@saas-ui/forms 2.0.0-next.3 → 2.0.0-next.6

package/src/select/select-context.tsx

@@ -0,0 +1,130 @@
+import {
+  HTMLChakraProps,
+  useControllableState,
+  useFormControl,
+} from '@chakra-ui/react'
+import { createContext } from '@chakra-ui/react-utils'
+import React from 'react'
+import { FieldOptions } from '../types'
+import { mapOptions } from '../utils'
+import { SelectOption } from './select'
+
+export const [SelectProvider, useSelectContext] = createContext<
+  ReturnType<typeof useSelect>
+>({
+  strict: true,
+})
+
+export interface SelectOptions {
+  /**
+   * The name of the input field in a native form.
+   */
+  name: string
+  /**
+   * The value of the select field.
+   */
+  value?: string | string[]
+  /**
+   * The initial value of the select field.
+   */
+  defaultValue?: string | string[]
+  /**
+   * The callback invoked when the value of the select field changes.
+   * @param value The value of the select field.
+   */
+  onChange?: (value: string | string[]) => void
+  /**
+   * The placeholder text when there's no value.
+   */
+  placeholder?: string
+  /**
+   * If `true`, the select will be disabled.
+   */
+  isDisabled?: boolean
+  /**
+   * An array of options
+   * If you leave this empty the children prop will be rendered.
+   */
+  options?: FieldOptions<SelectOption>
+  /**
+   * Enable multiple select.
+   */
+  multiple?: boolean
+  /**
+   * The function used to render the value of the select field.
+   * @param value The value of the select field.
+   * @returns The rendered value.
+   */
+  renderValue?: (value: string | string[]) => React.ReactNode
+}
+
+export const useSelect = (props: SelectOptions) => {
+  const {
+    name,
+    value,
+    defaultValue,
+    onChange,
+    multiple,
+    placeholder,
+    options: optionsProp,
+    isDisabled,
+    renderValue = (value) =>
+      typeof value === 'string' ? value : value?.join(', '),
+  } = props
+  const [currentValue, setCurrentValue] = useControllableState({
+    value,
+    defaultValue,
+    onChange,
+  })
+
+  const controlProps = useFormControl({ name } as HTMLChakraProps<'input'>)
+
+  const options = React.useMemo(
+    () => optionsProp && mapOptions(optionsProp),
+    [optionsProp]
+  )
+
+  const handleChange = (value: string | string[]) => {
+    setCurrentValue(value)
+  }
+
+  const getDisplayValue = React.useCallback(
+    (value: string) => {
+      if (!options) {
+        return value
+      }
+
+      for (const option of options) {
+        if (option.value === value) {
+          return option.label || option.value
+        }
+      }
+
+      return value
+    },
+    [options]
+  )
+
+  const displayValue = React.useMemo(
+    () =>
+      currentValue
+        ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
+            getDisplayValue
+          )
+        : [],
+    [currentValue, getDisplayValue]
+  )
+
+  return {
+    defaultValue,
+    value: currentValue,
+    displayValue,
+    renderValue,
+    onChange: handleChange,
+    options,
+    multiple,
+    controlProps,
+    placeholder,
+    isDisabled,
+  }
+}

package/src/select/select.stories.tsx

@@ -8,15 +8,23 @@ import {
 } from '@chakra-ui/react'
 import * as React from 'react'
 
-import { ComponentStory } from '@storybook/react'
+import { StoryFn } from '@storybook/react'
 
-import { Select } from './select'
+import { Select, SelectButton, SelectList, SelectOption } from './select'
 import { NativeSelect } from './native-select'
 
 import { FiSmile } from 'react-icons/fi'
 
+const Template: StoryFn<typeof Select> = (args) => (
+  <Select placeholder="Select an option..." {...args}>
+    <SelectButton />
+    <SelectList />
+  </Select>
+)
+
 export default {
   title: 'Components/Forms/Select',
+  component: Template,
   decorators: [
     (Story: any) => (
       <Container mt="40px" maxW="320px">
@@ -34,111 +42,134 @@ const getOptions = (length = 6) =>
 
 const options = getOptions()
 
-const Template: ComponentStory<typeof Select> = (args) => (
-  <Select placeholder="Select an option..." {...args} />
-)
-
-export const Basic = Template.bind({})
-Basic.args = {
-  name: 'select',
-  options,
+export const Basic = {
+  args: {
+    name: 'select',
+    options,
+  },
 }
 
-export const DefaultValue = Template.bind({})
-DefaultValue.args = {
-  name: 'select',
-  options,
-  defaultValue: 1,
+export const DefaultValue = {
+  args: {
+    name: 'select',
+    options,
+    defaultValue: '1',
+  },
 }
 
-export const Placeholder = Template.bind({})
-Placeholder.args = {
-  name: 'select',
-  options,
-  placeholder: 'Select an option...',
+export const Placeholder = {
+  args: {
+    name: 'select',
+    options,
+    placeholder: 'Select an option...',
+  },
 }
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  name: 'select',
-  options,
-  placeholder: 'Disabled.',
-  isDisabled: true,
+export const Disabled = {
+  args: {
+    name: 'select',
+    options,
+    placeholder: 'Disabled.',
+    isDisabled: true,
+  },
 }
 
-export const Multi = Template.bind({})
-Multi.args = {
-  name: 'select',
-  options,
-  placeholder: 'Multiple.',
-  multiple: true,
+export const Multi = {
+  args: {
+    name: 'select',
+    options,
+    placeholder: 'Multiple.',
+    multiple: true,
+  },
 }
 
-export const MultiWithDefaultValue = Template.bind({})
-MultiWithDefaultValue.args = {
-  name: 'select',
-  options,
-  placeholder: 'Select an option...',
-  multiple: true,
-  defaultValue: ['1'],
+export const MultiWithDefaultValue = {
+  args: {
+    name: 'select',
+    options,
+    placeholder: 'Select an option...',
+    multiple: true,
+    defaultValue: ['1'],
+  },
 }
 
-export const MultiWithTags = Template.bind({})
-MultiWithTags.args = {
-  name: 'select',
-  options,
-  placeholder: 'Select options...',
-  multiple: true,
-  renderValue: (selected) => {
-    if (selected?.length) {
-      return (
-        <Wrap py="1">
-          {selected.map((value) => (
-            <WrapItem>
-              <Tag>{value}</Tag>
-            </WrapItem>
-          ))}
-        </Wrap>
-      )
-    }
+export const MultiWithTags = {
+  args: {
+    name: 'select',
+    options,
+    placeholder: 'Select options...',
+    multiple: true,
+    renderValue: (selected) => {
+      if (selected?.length) {
+        return (
+          <Wrap py="1">
+            {selected.map((value) => (
+              <WrapItem>
+                <Tag variant="solid">{value}</Tag>
+              </WrapItem>
+            ))}
+          </Wrap>
+        )
+      }
+    },
   },
 }
 
-export const WithIcons = Template.bind({})
-WithIcons.args = {
-  name: 'select',
-  options,
-  value: 1,
-  leftIcon: <Icon as={FiSmile} />,
+export const Test = {
+  render: () => (
+    <Tag variant="outline" colorScheme="teal">
+      Test
+    </Tag>
+  ),
 }
 
-export const MaxHeight = Template.bind({})
-MaxHeight.args = {
-  name: 'select',
-  options: getOptions(100),
+export const WithIcons = {
+  render: (args) => (
+    <Select placeholder="Select an option..." {...args}>
+      <SelectButton leftIcon={<Icon as={FiSmile} />} />
+      <SelectList />
+    </Select>
+  ),
+  args: {
+    name: 'select',
+    options,
+    value: '1',
+  },
 }
 
-export const WithChildren = () => {
-  return (
-    <Select name="select" value="1">
-      <MenuItemOption value="1">Option 1</MenuItemOption>
-      <MenuItemOption value="2">Option 1</MenuItemOption>
+export const MaxHeight = {
+  args: {
+    name: 'select',
+    options: getOptions(100),
+  },
+}
+
+export const WithChildren = {
+  render: () => (
+    <Select name="select" defaultValue="1">
+      <SelectButton />
+      <SelectList>
+        <SelectOption value="1">Option 1</SelectOption>
+        <SelectOption value="2">Option 2</SelectOption>
+      </SelectList>
     </Select>
-  )
+  ),
 }
 
-export const WithEmptyOption = () => {
-  return (
-    <Select name="select" value="1">
-      <MenuItemOption value="">None</MenuItemOption>
-      <MenuItemOption value="1">Option 1</MenuItemOption>
-      <MenuItemOption value="2">Option 1</MenuItemOption>
+export const WithEmptyOption = {
+  render: () => (
+    <Select name="select" defaultValue="1">
+      <SelectButton />
+      <SelectList>
+        <SelectOption value="">None</SelectOption>
+        <SelectOption value="1">Option 1</SelectOption>
+        <SelectOption value="2">Option 2</SelectOption>
+      </SelectList>
     </Select>
-  )
+  ),
 }
 
-export const WithNativeSelect = () => (
-  <>
+export const WithNativeSelect = {
+  render: () => (
     <NativeSelect name="select" options={options} aria-label="Select" />
-  </>
-)
+  ),
+}

package/src/select/select.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import { render, testStories } from '@saas-ui/test-utils'
-import * as stories from '../stories/select.stories'
+import * as stories from './select.stories'
 
 const { MaxHeight, ...rest } = stories