feat/select primitive multiselect

.cursor/rules/02-typescript-testing.mdc

@@ -11,7 +11,8 @@ alwaysApply: false
 - Use discriminated unions for complex state.
 - Export component prop interfaces.
 - Implement proper generic constraints.
-- `any` is a non aceptable type, avoid its use
+- <IMPORTANT>`any` is a non aceptable type, avoid its use
+- Don't use `any` or `as any` to solve types issues</IMPORTANT>
 
 # Testing Standards
 

packages/react/package.json

@@ -177,8 +177,26 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.5",
     "@factorialco/f0-core": "workspace:*",
-    "@radix-ui/react-hover-card": "^1.1.6",
-    "@radix-ui/react-switch": "^1.2.2",
+    "@radix-ui/number": "^1.1.1",
+    "@radix-ui/primitive": "^1.1.2",
+    "@radix-ui/react-collection": "^1.1.7",
+    "@radix-ui/react-compose-refs": "^1.1.2",
+    "@radix-ui/react-context": "^1.1.2",
+    "@radix-ui/react-direction": "^1.1.1",
+    "@radix-ui/react-dismissable-layer": "^1.1.10",
+    "@radix-ui/react-focus-guards": "^1.1.2",
+    "@radix-ui/react-focus-scope": "^1.1.7",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-id": "^1.1.1",
+    "@radix-ui/react-popper": "^1.2.7",
+    "@radix-ui/react-portal": "^1.1.9",
+    "@radix-ui/react-primitive": "^2.1.3",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-use-callback-ref": "^1.1.1",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@radix-ui/react-use-layout-effect": "^1.1.1",
+    "@radix-ui/react-use-previous": "^1.1.1",
+    "@radix-ui/react-visually-hidden": "^1.2.3",
     "@tanstack/react-virtual": "^3.13.2",
     "@tiptap/core": "^2.24.0",
     "@tiptap/extension-bubble-menu": "^2.11.5",
@@ -206,13 +224,15 @@
     "@tiptap/starter-kit": "^2.11.5",
     "@tiptap/suggestion": "^2.12.0",
     "@vueless/storybook-dark-mode": "^9.0.7",
+    "aria-hidden": "^1.2.6",
     "cva": "1.0.0-beta.3",
     "dompurify": "^3.2.6",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.0.1",
     "prosemirror-state": "^1.4.3",
     "prosemirror-view": "^1.38.1",
+    "react-remove-scroll": "^2.7.1",
     "rehype-stringify": "^10.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",

packages/react/src/experimental/Forms/Fields/Select/index.tsx

@@ -3,7 +3,6 @@ import { F0Icon } from "@/components/F0Icon"
 import { OneEllipsis } from "@/components/OneEllipsis"
 import { F0TagRaw } from "@/components/tags/F0TagRaw"
 
-import { GroupHeader } from "@/experimental/OneDataCollection/components/GroupHeader"
 import {
   BaseFetchOptions,
   BaseResponse,
@@ -22,6 +21,7 @@ import {
 } from "@/hooks/datasource"
 import { useI18n } from "@/lib/providers/i18n"
 import { cn } from "@/lib/utils"
+import { GroupHeader } from "@/ui/GroupHeader/index"
 import { InputField, InputFieldProps } from "@/ui/InputField"
 import {
   SelectContent,

packages/react/src/experimental/OneDataCollection/visualizations/collection/Card/index.tsx

@@ -3,7 +3,6 @@ import { CardAvatarVariant } from "@/components/F0Card/components/CardAvatar"
 import { cardPropertyRenderers } from "@/components/F0Card/components/CardMetadata"
 import { CardMetadata, CardMetadataProperty } from "@/components/F0Card/types"
 import { IconType } from "@/components/F0Icon"
-import { GroupHeader } from "@/experimental/OneDataCollection/components/GroupHeader/GroupHeader"
 import { useDataCollectionData } from "@/experimental/OneDataCollection/hooks/useDataCollectionData"
 import { DataCollectionSource } from "@/experimental/OneDataCollection/hooks/useDataCollectionSource"
 import { NavigationFiltersDefinition } from "@/experimental/OneDataCollection/navigationFilters/types"
@@ -13,6 +12,7 @@ import { getAnimationVariants, useGroups } from "@/hooks/datasource/useGroups"
 import { useSelectable } from "@/hooks/datasource/useSelectable"
 import { Placeholder } from "@/icons/app"
 import { Card, CardContent, CardHeader, CardTitle } from "@/ui/Card"
+import { GroupHeader } from "@/ui/GroupHeader/GroupHeader"
 import { Skeleton } from "@/ui/skeleton"
 import { AnimatePresence, motion } from "motion/react"
 import { useEffect, useMemo } from "react"

packages/react/src/experimental/OneDataCollection/visualizations/collection/List/index.tsx

@@ -1,7 +1,7 @@
 import { NavigationFiltersDefinition } from "@/experimental/OneDataCollection/navigationFilters/types"
 
-import { GroupHeader } from "@/experimental/OneDataCollection/components/GroupHeader/GroupHeader"
 import { useGroups } from "@/hooks/datasource/useGroups"
+import { GroupHeader } from "@/ui/GroupHeader/GroupHeader"
 
 import { useDataCollectionData } from "@/experimental/OneDataCollection/hooks/useDataCollectionData"
 import { useInfiniteScrollPagination } from "@/experimental/OneDataCollection/hooks/useInfiniteScrollPagination"

packages/react/src/experimental/OneDataCollection/visualizations/collection/Table/Table.tsx

@@ -1,5 +1,4 @@
 import { F0Checkbox } from "@/components/F0Checkbox"
-import { GroupHeader } from "@/experimental/OneDataCollection/components/GroupHeader"
 import { PagesPagination } from "@/experimental/OneDataCollection/components/PagesPagination"
 import { useDataCollectionSettings } from "@/experimental/OneDataCollection/Settings/SettingsProvider"
 import {
@@ -25,6 +24,7 @@ import {
 } from "@/hooks/datasource"
 import { useI18n } from "@/lib/providers/i18n"
 import { cn } from "@/lib/utils"
+import { GroupHeader } from "@/ui/GroupHeader/index"
 import { Skeleton } from "@/ui/skeleton.tsx"
 import { AnimatePresence, motion } from "motion/react"
 import { Fragment, useEffect, useMemo, useState } from "react"

packages/react/src/ui/GroupHeader/index.tsx

@@ -0,0 +1 @@
+export * from "./GroupHeader"

packages/react/src/ui/Select/Select.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import * as SelectPrimitive from "@radix-ui/react-select"
+import * as SelectPrimitive from "./components/radix-ui"
 
 /**
  * Select Group component

packages/react/src/ui/Select/SelectContext.tsx

@@ -1,15 +1,16 @@
 import { createContext, useContext } from "react"
 
-type SelectContextType = {
-  value?: string
+export type SelectContextType = {
   open?: boolean
   asList?: boolean
+  multiple?: boolean
+  value: string[] | string
 }
-
 export const SelectContext = createContext<SelectContextType>({
-  value: undefined,
+  value: "",
   open: false,
   asList: false,
+  multiple: false,
 })
 
 export const useSelectContext = () => useContext(SelectContext)

packages/react/src/ui/Select/select.stories.tsx → packages/react/src/ui/Select/__stories__/select.stories.tsx

@@ -1,44 +1,101 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { useMemo, useState } from "react"
-import { Circle, Desktop } from "../../icons/app"
+import { Circle, Desktop } from "../../../icons/app"
 import {
   Select,
   SelectContent,
   SelectItem,
+  SelectProps,
   SelectTrigger,
   SelectValue,
-} from "./index"
+} from "../index"
 
 const SelectWithHooks = ({
   options,
   placeholder,
   asList,
   ...props
-}: {
-  options: { value: string; label: string }[]
-  placeholder?: string
-  asList?: boolean
-}) => {
-  const [value, setValue] = useState("")
+}: SelectProps) => {
+  const { value, multiple } = props
+  const [localValue, setLocalValue] = useState<string | string[] | undefined>(
+    value
+  )
+
+  const RenderSelect = (
+    props: Omit<SelectProps, "value"> & {
+      children: React.ReactNode
+      value: string | string[] | undefined
+      onValueChange: (value: string | string[]) => void
+    }
+  ) => {
+    const { value: initialValue, defaultValue: _, multiple, ...rest } = props
+
+    if (multiple) {
+      const [value, setValue] = useState<string[] | undefined>(
+        initialValue as string[] | undefined
+      )
+      const handleChange = (value: string[]) => {
+        console.log("value", value)
+        setValue(value)
+        props.onValueChange(value)
+      }
+      return (
+        <Select {...rest} value={value} onValueChange={handleChange} multiple>
+          {props.children}
+        </Select>
+      )
+    } else {
+      const [value, setValue] = useState<string | undefined>(
+        props.value as string | undefined
+      )
+      const handleChange = (value: string) => {
+        console.log("value", value)
+        setValue(value)
+        props.onValueChange(value)
+      }
+
+      return (
+        <Select
+          {...rest}
+          value={value}
+          onValueChange={handleChange}
+          multiple={false}
+        />
+      )
+    }
+  }
 
   const items = useMemo(
     () =>
-      options.map((option) => ({
+      (options || []).map((option) => ({
         value: option.value,
         height: 40,
         item: <SelectItem value={option.value}>{option.label}</SelectItem>,
       })),
     [options]
   )
 
+  const handleValueChange = (value: string | string[]) => {
+    setLocalValue(value)
+  }
+
   return (
-    <Select value={value} onValueChange={setValue} {...props} asList={asList}>
-      <SelectTrigger>
-        {value}
-        <SelectValue placeholder={placeholder} />
-      </SelectTrigger>
-      <SelectContent items={items}></SelectContent>
-    </Select>
+    <>
+      <RenderSelect
+        value={localValue}
+        multiple={multiple}
+        {...props}
+        asList={asList}
+        onValueChange={handleValueChange}
+      >
+        <SelectTrigger>
+          {localValue}
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent items={items} />
+      </RenderSelect>
+      <div className="mt-20">Selected: {JSON.stringify(localValue)}</div>
+    </>
   )
 }
 
@@ -49,6 +106,7 @@ const meta = {
     a11y: {
       skipCi: true, // Todo add aria labels
     },
+    //layout: "centered",
     docs: {
       description: {
         component:
@@ -63,6 +121,7 @@ const meta = {
   },
   args: {
     placeholder: "Select an option",
+    multiple: false,
     options: [
       { value: "light", label: "Light" },
       { value: "dark", label: "Dark" },
@@ -95,6 +154,31 @@ export const AsList: Story = {
   },
 }
 
+export const Multiple: Story = {
+  args: {
+    value: ["light", "system"],
+    multiple: true,
+  },
+  render: ({ options, placeholder }) => {
+    const [value, setValue] = useState<string[]>([])
+
+    return (
+      <Select value={value} onValueChange={setValue} multiple>
+        <SelectTrigger>
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {options?.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    )
+  },
+}
+
 export const WithTopContent: Story = {
   render: ({ options, placeholder }) => {
     const [value, setValue] = useState("")
@@ -107,7 +191,7 @@ export const WithTopContent: Story = {
         <SelectContent
           top={<div className="border-b border-f1-border p-3">Top Content</div>}
         >
-          {options.map((option) => (
+          {options?.map((option) => (
             <SelectItem key={option.value} value={option.value}>
               {option.label}
             </SelectItem>
@@ -132,7 +216,7 @@ export const WithBottomContent: Story = {
             <div className="border-t border-f1-border p-3">Bottom Content</div>
           }
         >
-          {options.map((option) => (
+          {options?.map((option) => (
             <SelectItem key={option.value} value={option.value}>
               {option.label}
             </SelectItem>
@@ -166,7 +250,7 @@ export const WithBothTopAndBottom: Story = {
             </div>
           }
         >
-          {options.map((option) => (
+          {options?.map((option) => (
             <SelectItem key={option.value} value={option.value}>
               {option.label}
             </SelectItem>
@@ -204,7 +288,7 @@ export const WithCustomTrigger: Story = {
           </button>
         </SelectTrigger>
         <SelectContent>
-          {options.map((option) => (
+          {options?.map((option) => (
             <SelectItem key={option.value} value={option.value}>
               <div className="flex items-center gap-2">
                 <Desktop className="h-4 w-4" />