feat(select): select api

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

@@ -1,3 +1,4 @@
+import { Job } from '@spark-ui/icons/dist/icons/Job'
 import { Meta, StoryFn } from '@storybook/react'
 
 import { Select } from '.'
@@ -9,4 +10,20 @@ const meta: Meta<typeof Select> = {
 
 export default meta
 
-export const Default: StoryFn = _args => <Select />
+export const Default: StoryFn = _args => (
+  <div className="w-sz-480 bg-success p-xl">
+    <Select value="Full time job" placeholder="--Pick a job type--">
+      <Select.Trigger>
+        <Select.LeadingIcon>
+          <Job />
+        </Select.LeadingIcon>
+      </Select.Trigger>
+
+      <Select.Items>
+        <Select.Item>Full time job</Select.Item>
+        <Select.Item>Part time job</Select.Item>
+        <Select.Item>Internship</Select.Item>
+      </Select.Items>
+    </Select>
+  </div>
+)

packages/components/select/src/Select.tsx

@@ -1 +1,27 @@
-export const Select = () => <>select</>
+import { ReactElement } from 'react'
+
+import { SelectProvider } from './SelectContext'
+import { findElement } from './utils'
+
+export interface SelectProps {
+  children: ReactElement[]
+  value?: string
+  placeholder?: string
+}
+
+export const Select = ({ children, placeholder }: SelectProps) => {
+  const trigger = findElement('Trigger', children)
+
+  const items = findElement('Items', children)
+
+  return (
+    <SelectProvider
+      data-spark-component="select"
+      // value={value}
+      placeholder={placeholder}
+      items={items}
+    >
+      {trigger}
+    </SelectProvider>
+  )
+}

packages/components/select/src/SelectContext.tsx

@@ -0,0 +1,39 @@
+import { createContext, ReactElement, type ReactNode, useContext } from 'react'
+
+export interface SelectContextState {
+  items: ReactElement | undefined
+  placeholder?: string | undefined
+}
+
+const SelectContext = createContext<SelectContextState | null>(null)
+
+export const SelectProvider = ({
+  children,
+  items,
+  placeholder,
+}: {
+  children: ReactNode
+  items: ReactElement | undefined
+  placeholder: string | undefined
+}) => {
+  return (
+    <SelectContext.Provider
+      value={{
+        items,
+        placeholder,
+      }}
+    >
+      {children}
+    </SelectContext.Provider>
+  )
+}
+
+export const useSelect = () => {
+  const context = useContext(SelectContext)
+
+  if (!context) {
+    throw Error('useSelect must be used within a Select provider')
+  }
+
+  return context
+}

packages/components/select/src/SelectItem.tsx

@@ -0,0 +1,6 @@
+export const Item = ({ children }: { children: string }) => {
+  return <option value={children}>{children}</option>
+}
+
+Item.id = 'Item'
+Item.displayName = 'Select.Item'

packages/components/select/src/SelectItems.tsx

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react'
+
+import { useSelect } from './SelectContext'
+
+export const Items = ({ children }: PropsWithChildren) => {
+  const { placeholder } = useSelect()
+
+  return (
+    <select className="absolute left-none top-none h-full w-full opacity-0">
+      {placeholder && <option value="">{placeholder}</option>}
+      {children}
+    </select>
+  )
+}
+
+Items.id = 'Items'
+Items.displayName = 'Select.Items'

packages/components/select/src/SelectItemsGroup.tsx

@@ -0,0 +1,4 @@
+export const ItemsGroup = () => null
+
+ItemsGroup.id = 'ItemsGroup'
+ItemsGroup.displayName = 'Select.ItemsGroup'

packages/components/select/src/SelectLeadingIcon.tsx

@@ -0,0 +1,9 @@
+import { Icon } from '@spark-ui/icon'
+import { ReactElement } from 'react'
+
+export const LeadingIcon = ({ children }: { children: ReactElement }) => {
+  return <Icon>{children}</Icon>
+}
+
+LeadingIcon.id = 'LeadingIcon'
+LeadingIcon.displayName = 'Select.LeadingIcon'

packages/components/select/src/SelectTrigger.tsx

@@ -0,0 +1,23 @@
+import { Icon } from '@spark-ui/icon'
+import { ArrowHorizontalDown } from '@spark-ui/icons/dist/icons/ArrowHorizontalDown'
+import { ReactNode } from 'react'
+
+import { useSelect } from './SelectContext'
+
+export const Trigger = ({ children }: { children?: ReactNode }) => {
+  const { items, placeholder } = useSelect()
+
+  return (
+    <div className="relative flex h-sz-44 items-center gap-md rounded-md border-sm border-outline bg-surface px-lg focus-within:u-ring">
+      {children}
+      {placeholder && <p className="grow">{placeholder}</p>}
+      <Icon>
+        <ArrowHorizontalDown />
+      </Icon>
+      {items && items}
+    </div>
+  )
+}
+
+Trigger.id = 'Trigger'
+Trigger.displayName = 'Select.Trigger'

packages/components/select/src/index.ts

@@ -1 +1,29 @@
-export { Select } from './Select'
+import type { FC } from 'react'
+
+import { Select as Root, type SelectProps } from './Select'
+import { Item } from './SelectItem'
+import { Items } from './SelectItems'
+import { ItemsGroup } from './SelectItemsGroup'
+import { LeadingIcon } from './SelectLeadingIcon'
+import { Trigger } from './SelectTrigger'
+
+export const Select: FC<SelectProps> & {
+  Trigger: typeof Trigger
+  LeadingIcon: typeof LeadingIcon
+  Items: typeof Items
+  Item: typeof Item
+  ItemsGroup: typeof ItemsGroup
+} = Object.assign(Root, {
+  Trigger,
+  LeadingIcon,
+  Items,
+  Item,
+  ItemsGroup,
+})
+
+Select.displayName = 'Select'
+Trigger.displayName = 'Select.Trigger'
+LeadingIcon.displayName = 'Select.LeadingIcon'
+Items.displayName = 'Select.Items'
+Item.displayName = 'Select.Item'
+ItemsGroup.displayName = 'Select.ItemsGroup'

packages/components/select/src/utils.ts

@@ -0,0 +1,9 @@
+import { type FC, type ReactElement } from 'react'
+
+const getElementId = (element?: ReactElement) => {
+  return element ? (element.type as FC & { id?: string }).id : ''
+}
+
+export const findElement = (value: string, children: ReactElement[]) => {
+  return children.find(child => value === getElementId(child) || '')
+}