Add controlled Select stories

Author: forestream

packages/components/src/components/Select/ControlledCheckbox.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { css, Flex } from '@devup-ui/react'
+import { useState } from 'react'
+
+import {
+  Select,
+  SelectContainer,
+  SelectDivider,
+  SelectOption,
+  SelectTrigger,
+} from '.'
+import { IconArrow } from './IconArrow'
+
+export function ControlledCheckbox() {
+  const [value, setValue] = useState<string[]>([])
+  const handleChange = (nextValue: string) => {
+    if (value.includes(nextValue)) {
+      setValue(value.filter((v) => v !== nextValue))
+    } else {
+      setValue([...value, nextValue])
+    }
+  }
+
+  const [subValue, setSubValue] = useState<string[]>([])
+  const handleSubChange = (nextValue: string) => {
+    if (subValue.includes(nextValue)) {
+      setSubValue(subValue.filter((v) => v !== nextValue))
+    } else {
+      setSubValue([...subValue, nextValue])
+    }
+  }
+
+  return (
+    <Select onValueChange={handleChange} type="checkbox" value={value}>
+      <SelectTrigger>Select {value}</SelectTrigger>
+      <SelectContainer>
+        <SelectOption value="Option 1">Option 1</SelectOption>
+        <SelectOption value="Option 2">Option 2</SelectOption>
+        <SelectDivider />
+        <SelectOption value="Option 3">Option 3</SelectOption>
+        <SelectOption value="Option 4">Option 4</SelectOption>
+        <Select
+          onValueChange={handleSubChange}
+          type="checkbox"
+          value={subValue}
+        >
+          <SelectTrigger asChild>
+            <SelectOption>
+              <Flex alignItems="center" justifyContent="space-between" w="100%">
+                Option 5<IconArrow />
+              </Flex>
+            </SelectOption>
+          </SelectTrigger>
+          <SelectContainer
+            className={css({
+              right: '0',
+              top: '0',
+              transform: 'translateX(100%)',
+            })}
+          >
+            <SelectOption value="Option 6">Option 6</SelectOption>
+            <SelectOption value="Option 7">Option 7</SelectOption>
+          </SelectContainer>
+        </Select>
+      </SelectContainer>
+    </Select>
+  )
+}

packages/components/src/components/Select/ControlledRadio.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { css, Flex } from '@devup-ui/react'
+import { useState } from 'react'
+
+import {
+  Select,
+  SelectContainer,
+  SelectDivider,
+  SelectOption,
+  SelectTrigger,
+} from '.'
+import { IconArrow } from './IconArrow'
+
+export function ControlledRadio() {
+  const [value, setValue] = useState('')
+  const handleChange = (value: string) => {
+    setValue(value)
+  }
+  return (
+    <Select onValueChange={handleChange} type="radio" value={value}>
+      <SelectTrigger>Select {value}</SelectTrigger>
+      <SelectContainer>
+        <SelectOption value="Option 1">Option 1</SelectOption>
+        <SelectOption value="Option 2">Option 2</SelectOption>
+        <SelectDivider />
+        <SelectOption value="Option 3">Option 3</SelectOption>
+        <SelectOption value="Option 4">Option 4</SelectOption>
+        <Select type="radio">
+          <SelectTrigger asChild>
+            <SelectOption>
+              <Flex alignItems="center" justifyContent="space-between" w="100%">
+                Option 5<IconArrow />
+              </Flex>
+            </SelectOption>
+          </SelectTrigger>
+          <SelectContainer
+            className={css({
+              right: '0',
+              top: '0',
+              transform: 'translateX(100%)',
+            })}
+          >
+            <SelectOption value="Option 6">Option 6</SelectOption>
+            <SelectOption value="Option 7">Option 7</SelectOption>
+          </SelectContainer>
+        </Select>
+      </SelectContainer>
+    </Select>
+  )
+}

packages/components/src/components/Select/Select.stories.tsx

@@ -8,6 +8,8 @@ import {
   SelectOption,
   SelectTrigger,
 } from '.'
+import { ControlledCheckbox } from './ControlledCheckbox'
+import { ControlledRadio } from './ControlledRadio'
 import { IconArrow } from './IconArrow'
 
 type Story = StoryObj<typeof meta>
@@ -26,16 +28,20 @@ const meta: Meta<typeof Select> = {
 }
 
 export const Default: Story = {
-  args: {},
+  args: { type: 'radio' },
   render: (args) => (
-    <Select {...args}>
+    <Select {...args} defaultValue="Option 1">
       <SelectTrigger>Select</SelectTrigger>
       <SelectContainer>
-        <SelectOption>Option 1</SelectOption>
-        <SelectOption>Option 2</SelectOption>
+        <SelectOption disabled value="Option 1">
+          Option 1
+        </SelectOption>
+        <SelectOption value="Option 2">Option 2</SelectOption>
         <SelectDivider />
-        <SelectOption>Option 3</SelectOption>
-        <SelectOption disabled>Option 4</SelectOption>
+        <SelectOption value="Option 3">Option 3</SelectOption>
+        <SelectOption disabled value="Option 4">
+          Option 4
+        </SelectOption>
         <Select type="radio">
           <SelectTrigger asChild>
             <SelectOption>
@@ -60,4 +66,14 @@ export const Default: Story = {
   ),
 }
 
+export const ControlledRadioStory: Story = {
+  args: {},
+  render: () => <ControlledRadio />,
+}
+
+export const ControlledCheckboxStory: Story = {
+  args: {},
+  render: () => <ControlledCheckbox />,
+}
+
 export default meta

packages/components/src/components/Select/index.tsx

@@ -24,7 +24,7 @@ type SelectValue<T extends SelectType> = T extends 'radio' ? string : string[]
 interface SelectProps extends ComponentProps<'div'> {
   defaultValue?: SelectValue<SelectType>
   value?: SelectValue<SelectType>
-  onValueChange?: (value: SelectValue<SelectType>) => void
+  onValueChange?: (value: string) => void
   defaultOpen?: boolean
   open?: boolean
   onOpenChange?: (open: boolean) => void
@@ -171,6 +171,7 @@ export function SelectContainer({ children, ...props }: ComponentProps<'div'>) {
       h="fit-content"
       p="10px"
       pos="absolute"
+      styleOrder={1}
       transform="translateY(100%)"
       userSelect="none"
       w="232px"