Add test case for clicking confirm button

Author: forestream

packages/components/src/components/Select/Default.tsx

@@ -1,6 +1,6 @@
 import { css, Flex } from '@devup-ui/react'
 import { Meta, StoryObj } from '@storybook/react-vite'
-import { useState } from 'react'
+import { ComponentProps, useState } from 'react'
 
 import {
   Select,
@@ -9,7 +9,6 @@ import {
   SelectOption,
   SelectTrigger,
 } from '.'
-import { Default as DefaultComponent } from './Default'
 import { IconArrow } from './IconArrow'
 
 export type Story = StoryObj<typeof meta>
@@ -29,7 +28,6 @@ const meta: Meta<typeof Select> = {
 
 export const DefaultStory: Story = {
   args: {
-    type: 'default',
     colors: {},
   },
   render: (args) => <DefaultComponent {...args} />,
@@ -47,6 +45,46 @@ export const ControlledCheckboxStory: Story = {
 
 export default meta
 
+export function DefaultComponent({
+  ...props
+}: Omit<ComponentProps<typeof Select>, 'children'>) {
+  return (
+    <Select {...props}>
+      <SelectTrigger>Select</SelectTrigger>
+      <SelectContainer>
+        <SelectOption disabled value="Option 1">
+          Option 1
+        </SelectOption>
+        <SelectOption value="Option 2">Option 2</SelectOption>
+        <SelectDivider />
+        <SelectOption value="Option 3">Option 3</SelectOption>
+        <SelectOption disabled 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>
+  )
+}
+
 function ControlledCheckbox() {
   const [value, setValue] = useState<string[]>([])
   const handleChange = (nextValue: string) => {