@saas-ui/forms 1.5.3 → 2.0.0-next.0

package/src/layout.tsx

@@ -38,7 +38,7 @@ export const FormLayout = ({ children, ...props }: FormLayoutProps) => {
   return (
     <SimpleGrid
       {...gridProps}
-      className={cx('saas-form__layout', props.className)}
+      className={cx('sui-form__layout', props.className)}
     >
       {React.Children.map(children, (child) => {
         if (React.isValidElement(child)) {

package/src/number-input/index.ts

@@ -0,0 +1 @@
+export * from './number-input'

package/src/number-input/number-input.stories.tsx

@@ -0,0 +1,39 @@
+import { Container } from '@chakra-ui/react'
+import * as React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import { NumberInput } from '../src'
+
+export default {
+  title: 'Components/Forms/NumberInput',
+  decorators: [
+    (Story: any) => (
+      <Container mt="40px">
+        <Story />
+      </Container>
+    ),
+  ],
+} as Meta
+
+const Template: Story = (args) => <NumberInput aria-label="Number" {...args} />
+
+export const Basic = Template.bind({})
+Basic.args = {}
+
+export const HideStepper = Template.bind({})
+HideStepper.args = {
+  hideStepper: true,
+}
+
+export const MinMax = Template.bind({})
+MinMax.args = {
+  defaultValue: 5,
+  min: 0,
+  max: 10,
+}
+
+export const WithFormatter = Template.bind({})
+WithFormatter.args = {
+  format: (value) => `$${value}`, // use any currency formatter here
+  parse: (value) => value.replace('$', ''),
+}

package/src/number-input/number-input.test.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+
+import { render, testStories } from '@saas-ui/test-utils'
+import * as stories from './number-input.stories'
+
+testStories<typeof stories>(stories)

package/src/number-input/number-input.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+
+import {
+  forwardRef,
+  NumberInput as ChakraNumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+  NumberInputProps as ChakraNumberInputProps,
+} from '@chakra-ui/react'
+import { __DEV__ } from '@chakra-ui/utils'
+
+interface NumberInputOptions {
+  /**
+   * Hide the stepper.
+   */
+  hideStepper?: boolean
+  /**
+   * Render a custom increment icon.
+   */
+  incrementIcon?: React.ReactNode
+  /**
+   * Render a custom decrement icon.
+   */
+  decrementIcon?: React.ReactNode
+}
+
+export interface NumberInputProps
+  extends ChakraNumberInputProps,
+    NumberInputOptions {}
+
+export const NumberInput = forwardRef<NumberInputProps, 'div'>((props, ref) => {
+  const { hideStepper, incrementIcon, decrementIcon, ...rest } = props
+
+  return (
+    <ChakraNumberInput {...rest} ref={ref}>
+      <NumberInputField />
+
+      {!hideStepper && (
+        <NumberInputStepper>
+          <NumberIncrementStepper children={incrementIcon} />
+          <NumberDecrementStepper children={decrementIcon} />
+        </NumberInputStepper>
+      )}
+    </ChakraNumberInput>
+  )
+})
+
+NumberInput.defaultProps = {
+  hideStepper: false,
+}
+
+if (__DEV__) {
+  NumberInput.displayName = 'NumberInput'
+}

package/src/object-field.tsx

@@ -21,7 +21,7 @@ export interface ObjectFieldProps extends FieldProps {
 }
 
 export const FormLegend = (props: FormLabelProps) => {
-  const styles = useStyleConfig('FormLegend')
+  const styles = useStyleConfig('SuiFormLegend')
   return <FormLabel as="legend" sx={styles} {...props} />
 }
 

package/src/password-input/index.ts

@@ -0,0 +1 @@
+export * from './password-input'

package/src/password-input/password-input.stories.tsx

@@ -0,0 +1,50 @@
+import { Container, FormControl, FormLabel, Icon } from '@chakra-ui/react'
+import { Story } from '@storybook/react'
+import * as React from 'react'
+
+import { FiEye, FiEyeOff } from 'react-icons/fi'
+
+import { PasswordInput } from './password-input'
+
+export default {
+  title: 'Components/Forms/PasswordInput',
+  decorators: [
+    (Story: any) => (
+      <Container mt="40px">
+        <Story />
+      </Container>
+    ),
+  ],
+}
+
+export const Basic: Story = () => (
+  <FormControl>
+    <FormLabel>Password</FormLabel>
+    <PasswordInput name="password" placeholder="Password" />
+  </FormControl>
+)
+
+export const ReactIcons: Story = () => (
+  <>
+    <PasswordInput
+      name="password"
+      placeholder="Password"
+      viewIcon={<Icon as={FiEye} />}
+      viewOffIcon={<Icon as={FiEyeOff} />}
+    />
+  </>
+)
+
+export const Variant: Story = () => (
+  <FormControl>
+    <FormLabel>Password</FormLabel>
+    <PasswordInput name="password" variant="flushed" />
+  </FormControl>
+)
+
+export const CustomWidth: Story = () => (
+  <FormControl>
+    <FormLabel>Password</FormLabel>
+    <PasswordInput name="password" width="200px" />
+  </FormControl>
+)

package/src/password-input/password-input.test.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+import { render, act, fireEvent, testStories } from '@saas-ui/test-utils'
+import * as stories from './password-input.stories'
+
+const { Basic } = testStories<typeof stories>(stories)
+
+test('should render correct aria labels', async () => {
+  const { getByText, getByLabelText, getByPlaceholderText, getByRole } = render(
+    <Basic />
+  )
+
+  const toggle = getByLabelText('Show password')
+
+  await act(async () => {
+    fireEvent.click(toggle)
+  })
+
+  expect(toggle).toHaveAttribute('aria-label', 'Hide password')
+})

package/src/password-input/password-input.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+
+import { forwardRef, InputGroup, Input, InputProps } from '@chakra-ui/react'
+import { __DEV__ } from '@chakra-ui/utils'
+import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
+
+import { InputRightButton } from '../input-right-button'
+
+interface PasswordOptions {
+  viewIcon?: React.ReactNode
+  viewOffIcon?: React.ReactNode
+}
+
+export interface PasswordInputProps extends InputProps, PasswordOptions {}
+
+export const PasswordInput = forwardRef<PasswordInputProps, 'div'>(
+  (props, ref) => {
+    const {
+      viewIcon,
+      viewOffIcon,
+      autoComplete,
+      w,
+      width,
+      size,
+      variant,
+      ...inputProps
+    } = props
+    const [show, setShow] = useState(false)
+    const handleClick = () => setShow(!show)
+
+    const label = show ? 'Hide password' : 'Show password'
+
+    let icon
+    if (show) {
+      icon = viewIcon || <ViewIcon />
+    } else {
+      icon = viewOffIcon || <ViewOffIcon />
+    }
+
+    const groupProps = {
+      width: w || width,
+      size,
+      variant,
+    }
+
+    return (
+      <InputGroup {...groupProps}>
+        <Input
+          {...inputProps}
+          ref={ref}
+          type={show ? 'text' : 'password'}
+          autoComplete={show ? 'off' : autoComplete}
+        />
+
+        <InputRightButton
+          onClick={handleClick}
+          aria-label={label}
+          variant="ghost"
+        >
+          {icon}
+        </InputRightButton>
+      </InputGroup>
+    )
+  }
+)
+
+if (__DEV__) {
+  PasswordInput.displayName = 'PasswordInput'
+}

package/src/pin-input/index.ts

@@ -0,0 +1 @@
+export * from './pin-input'

package/src/pin-input/pin-input.stories.tsx

@@ -0,0 +1,38 @@
+import { Container } from '@chakra-ui/react'
+import * as React from 'react'
+
+import { ComponentStory } from '@storybook/react'
+
+import { PinInput } from './pin-input'
+
+export default {
+  title: 'Components/Forms/PinInput',
+  decorators: [
+    (Story: any) => (
+      <Container mt="40px">
+        <Story />
+      </Container>
+    ),
+  ],
+}
+
+const Template: ComponentStory<typeof PinInput> = (args) => (
+  <PinInput {...args} />
+)
+
+export const Basic = Template.bind({})
+Basic.args = {
+  /**
+   * Description
+   */
+  name: 'pin-input',
+}
+
+export const PinLength = Template.bind({})
+PinLength.args = {
+  /**
+   * Description
+   */
+  name: 'pin-input',
+  pinLength: 10,
+}

package/src/pin-input/pin-input.test.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+
+import { render, testStories } from '@saas-ui/test-utils'
+import * as stories from './pin-input.stories'
+
+testStories<typeof stories>(stories)

package/src/pin-input/pin-input.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import {
+  forwardRef,
+  PinInput as ChakraPinInput,
+  UsePinInputProps,
+  PinInputField,
+  HStack,
+  SystemProps,
+} from '@chakra-ui/react'
+
+import { __DEV__ } from '@chakra-ui/utils'
+
+interface PinInputOptions {
+  /**
+   * The pin length.
+   */
+  pinLength?: number
+  /**
+   * Spacing between the inputs.
+   */
+  spacing?: SystemProps['margin']
+}
+
+export interface PinInputProps extends UsePinInputProps, PinInputOptions {}
+
+/**
+ * @deprecated
+ */
+export const PinInput = forwardRef<PinInputProps, 'div'>((props, ref) => {
+  const { pinLength = 4, spacing, ...inputProps } = props
+
+  const inputs: React.ReactNode[] = []
+  for (let i = 0; i < pinLength; i++) {
+    inputs.push(<PinInputField key={i} ref={ref} />)
+  }
+
+  return (
+    <HStack spacing={spacing}>
+      <ChakraPinInput {...inputProps}>{inputs}</ChakraPinInput>
+    </HStack>
+  )
+})
+
+PinInput.defaultProps = {
+  pinLength: 4,
+}
+
+if (__DEV__) {
+  PinInput.displayName = 'PinInput'
+}

package/src/radio/index.ts

@@ -0,0 +1 @@
+export * from './radio-input'

package/src/radio/radio-input.stories.tsx

@@ -0,0 +1,45 @@
+import { Container } from '@chakra-ui/react'
+import * as React from 'react'
+
+import { ComponentStory } from '@storybook/react'
+
+import { RadioInput } from './'
+
+export default {
+  title: 'Components/Forms/Radio',
+  decorators: [
+    (Story: any) => (
+      <Container mt="40px">
+        <Story />
+      </Container>
+    ),
+  ],
+}
+
+const options = [
+  {
+    value: '1',
+    label: 'Option 1',
+  },
+  {
+    value: '2',
+    label: 'Option 2',
+  },
+]
+
+const Template: ComponentStory<typeof RadioInput> = (args) => (
+  <RadioInput {...args} />
+)
+
+export const Basic = Template.bind({})
+Basic.args = {
+  name: 'radio',
+  options,
+}
+
+export const Direction = Template.bind({})
+Direction.args = {
+  name: 'radio',
+  direction: 'row',
+  options,
+}

package/src/radio/radio-input.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react'
+
+import {
+  forwardRef,
+  Stack,
+  RadioGroup,
+  RadioGroupProps,
+  Radio,
+  RadioProps,
+  SystemProps,
+  StackDirection,
+} from '@chakra-ui/react'
+import { __DEV__ } from '@chakra-ui/utils'
+
+interface Option extends RadioProps {
+  value: string
+  label?: string
+}
+
+interface RadioInputOptions {
+  options: Option[]
+  spacing?: SystemProps['margin']
+  direction?: StackDirection
+}
+
+export interface RadioInputProps
+  extends Omit<RadioGroupProps, 'children'>,
+    RadioInputOptions {}
+
+export const RadioInput = forwardRef<RadioInputProps, 'div'>(
+  ({ options, spacing, direction, ...props }, ref) => {
+    const { onBlur, onChange, ...groupProps } = props
+
+    return (
+      <RadioGroup onChange={onChange} {...groupProps}>
+        <Stack spacing={spacing} direction={direction}>
+          {options.map(({ value, label, ...radioProps }, i) => {
+            return (
+              <Radio
+                key={i}
+                onBlur={onBlur}
+                value={value}
+                ref={ref}
+                {...radioProps}
+              >
+                {label || value}
+              </Radio>
+            )
+          })}
+        </Stack>
+      </RadioGroup>
+    )
+  }
+)
+
+if (__DEV__) {
+  RadioInput.displayName = 'RadioInput'
+}

package/src/radio/radio.test.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+
+import { render, testStories } from '@saas-ui/test-utils'
+import * as stories from './radio-input.stories'
+
+testStories<typeof stories>(stories)

package/src/select/index.ts

@@ -0,0 +1,2 @@
+export * from './select'
+export * from './native-select'

package/src/select/native-select.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+
+import {
+  forwardRef,
+  Select as ChakraSelect,
+  SelectProps as ChakraSelectProps,
+} from '@chakra-ui/react'
+import { __DEV__ } from '@chakra-ui/utils'
+
+interface Option {
+  value: string
+  label?: string
+}
+
+interface NativeSelectOptions {
+  options?: Option[]
+}
+
+export interface NativeSelectProps
+  extends ChakraSelectProps,
+    NativeSelectOptions {}
+
+export const NativeSelect = forwardRef<NativeSelectProps, 'select'>(
+  ({ options, children, ...props }, ref) => {
+    return (
+      <ChakraSelect ref={ref} {...props}>
+        {children ||
+          options?.map(({ value, label }) => {
+            return (
+              <option key={value} value={value}>
+                {label || value}
+              </option>
+            )
+          })}
+      </ChakraSelect>
+    )
+  }
+)
+
+if (__DEV__) {
+  NativeSelect.displayName = 'NativeSelect'
+}

package/src/select/select.stories.tsx

@@ -0,0 +1,144 @@
+import {
+  Container,
+  Icon,
+  MenuItemOption,
+  Tag,
+  Wrap,
+  WrapItem,
+} from '@chakra-ui/react'
+import * as React from 'react'
+
+import { ComponentStory } from '@storybook/react'
+
+import { Select } from '../src/select'
+import { NativeSelect } from '../src/native-select'
+
+import { FiSmile } from 'react-icons/fi'
+
+export default {
+  title: 'Components/Forms/Select',
+  decorators: [
+    (Story: any) => (
+      <Container mt="40px" maxW="320px">
+        <Story />
+      </Container>
+    ),
+  ],
+}
+
+const getOptions = (length = 6) =>
+  Array.from({ length }).map((_node, index) => ({
+    value: String(index),
+    label: `Option ${index + 1}`,
+  }))
+
+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 DefaultValue = Template.bind({})
+DefaultValue.args = {
+  name: 'select',
+  options,
+  defaultValue: 1,
+}
+
+export const Placeholder = Template.bind({})
+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 Multi = Template.bind({})
+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 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 WithIcons = Template.bind({})
+WithIcons.args = {
+  name: 'select',
+  options,
+  value: 1,
+  leftIcon: <Icon as={FiSmile} />,
+}
+
+export const MaxHeight = Template.bind({})
+MaxHeight.args = {
+  name: 'select',
+  options: getOptions(100),
+}
+
+export const WithChildren = () => {
+  return (
+    <Select name="select" value="1">
+      <MenuItemOption value="1">Option 1</MenuItemOption>
+      <MenuItemOption value="2">Option 1</MenuItemOption>
+    </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>
+    </Select>
+  )
+}
+
+export const WithNativeSelect = () => (
+  <>
+    <NativeSelect name="select" options={options} aria-label="Select" />
+  </>
+)

package/src/select/select.test.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react'
+
+import { render, testStories } from '@saas-ui/test-utils'
+import * as stories from '../stories/select.stories'
+
+const { MaxHeight, ...rest } = stories
+
+testStories<typeof rest>(rest)