Merge pull request #58 from oasisprotocol/mz/select

Create custom Select component

Author: buberdds

src/components/select/index.tsx

@@ -0,0 +1,76 @@
+import { Select as BaseSelect, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { Label } from '../ui/label'
+import { cn } from '../../lib/utils'
+
+export type SelectOption<T = string> = {
+  label: string
+  value: T
+}
+
+export type SelectProps<T = string> = {
+  className?: string
+  defaultValue?: T
+  disabled?: boolean
+  handleChange?: (value: T) => void
+  label?: string
+  options?: SelectOption<T>[]
+  placeholder?: string
+  value?: T
+}
+
+// Avoid throwing an error if <Select.Item /> has an empty string value.
+// https://github.com/radix-ui/primitives/blob/main/packages/react/select/src/select.tsx#L1277
+const EMPTY_VALUE_PLACEHOLDER = '__empty__'
+
+export const Select = <T extends string = string>({
+  className,
+  defaultValue,
+  disabled = false,
+  handleChange,
+  label,
+  options = [],
+  placeholder = 'Select an option',
+  value,
+}: SelectProps<T>) => {
+  const normalizeValue = (val: T | undefined) => {
+    if (val === '') return EMPTY_VALUE_PLACEHOLDER
+    return val
+  }
+
+  const denormalizeValue = (val: string): T => {
+    if (val === EMPTY_VALUE_PLACEHOLDER) return '' as T
+    return val as T
+  }
+
+  const handleValueChange = (newValue: string) => {
+    if (handleChange) {
+      handleChange(denormalizeValue(newValue))
+    }
+  }
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {label && <Label>{label}</Label>}
+      <BaseSelect
+        value={normalizeValue(value)}
+        onValueChange={handleValueChange}
+        defaultValue={normalizeValue(defaultValue)}
+        disabled={disabled}
+      >
+        <SelectTrigger className="[&_svg:not([class*='text-'])]:text-foreground [&_svg]:opacity-100 text-foreground font-medium data-[size=default]:h-10 w-full bg-background focus-visible:ring-ring/20">
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map(option => {
+            const itemValue = option.value === '' ? EMPTY_VALUE_PLACEHOLDER : String(option.value)
+            return (
+              <SelectItem key={itemValue} value={itemValue}>
+                {option.label}
+              </SelectItem>
+            )
+          })}
+        </SelectContent>
+      </BaseSelect>
+    </div>
+  )
+}

src/stories/Select/Select.stories.tsx

@@ -1,60 +1,29 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../../components/ui/select.tsx'
-import { expect, within, userEvent } from 'storybook/test'
+import { Select } from '../../components/select'
 
 const meta: Meta<typeof Select> = {
   title: 'Components/Select',
   component: Select,
   parameters: {
-    docs: {
-      description: {
-        component: 'Displays a list of options for the user to pick from—triggered by a button.',
-      },
-    },
     layout: 'centered',
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/dSsI9L6NSpNCorbSdiYd1k/Oasis-Design-System---shadcn-ui---Default---December-2024?node-id=118-1264&p=f&t=wiAnBZzlnMC9rGYE-0',
-    },
   },
   tags: ['autodocs'],
 }
 
 export default meta
 type Story = StoryObj<typeof meta>
 
+const options = [
+  { value: 'rofl_create', label: 'ROFL Create' },
+  { value: 'rofl_register', label: 'ROFL Register' },
+  { value: 'rofl_remove', label: 'ROFL Remove' },
+  { value: 'rofl_update', label: 'ROFL Update' },
+  { value: '', label: 'Unknown' },
+]
+
 export const Default: Story = {
   args: {
-    defaultValue: '',
-  },
-  render: args => (
-    <Select {...args}>
-      <SelectTrigger className="w-[180px]">
-        <SelectValue placeholder="Select type" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectGroup>
-          <SelectItem value="rofl_create">ROFL Create</SelectItem>
-          <SelectItem value="rofl_register">ROFL Register</SelectItem>
-          <SelectItem value="rofl_remove">ROFL Remove</SelectItem>
-          <SelectItem value="rofl_update">ROFL Update</SelectItem>
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const selectTrigger = canvas.getByRole('combobox')
-    await expect(selectTrigger).toBeInTheDocument()
-    await userEvent.click(selectTrigger)
-    const options = document.querySelectorAll('[role="option"]')
-    await expect(options).toBeTruthy()
+    options,
+    placeholder: 'Select type',
   },
 }