@sakura-ui/sakura-ui 0.0.16 → 0.1.1

package/packages/forms/src/components/Textarea.tsx

@@ -1,19 +1,26 @@
 import React from 'react'
 import { cx } from '../utils'
+import { ControllerContext } from './context'
 
 export interface TextareaProps
   extends React.ComponentPropsWithoutRef<'textarea'> {}
 
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (props, ref) => {
-    const { className, children, ...newProps } = props
+    const { className, children, ...restProps } = props
+
+    const ctx = React.useContext(ControllerContext)
+    if (ctx.isRequired) {
+      restProps.required = true
+    }
+
+    const invalidStyle = ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'
 
     const style = `
       p-4
       rounded-lg
       border
       border-solid
-      border-sumi-900
       focus:outline
       focus:outline-2
       focus:outline-wood-500
@@ -25,7 +32,15 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     `
 
     return (
-      <textarea className={cx(style, className)} {...newProps} ref={ref}>
+      <textarea
+        id={restProps.id ?? ctx.id}
+        className={cx(style, invalidStyle, className)}
+        aria-describedby={ctx.helperTextId}
+        aria-errormessage={ctx.errorMessageId}
+        aria-invalid={ctx.isInvalid ?? false}
+        {...restProps}
+        ref={ref}
+      >
         {children}
       </textarea>
     )

package/packages/forms/src/components/context.ts

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export interface ControllerContextType {
+  id?: string
+  groupName?: string
+  helperTextId: string
+  errorMessageId: string
+  isInvalid: boolean
+  isRequired?: boolean
+}
+
+export const ControllerContext = React.createContext<ControllerContextType>({
+  helperTextId: '',
+  errorMessageId: '',
+  isInvalid: false,
+  isRequired: false
+})

package/packages/forms/src/components/controlled/CheckboxGroup.tsx

@@ -1,31 +1,53 @@
 import React from 'react'
 import { Checkbox } from '../Checkbox'
+import { FieldsetControl } from '../FieldsetControl'
 import { InputItem } from './InputItem'
-import { cx } from '../../utils'
 
 export interface CheckboxGroupProps
-  extends Omit<React.ComponentProps<'fieldset'>, 'onChange'> {
+  extends Omit<React.ComponentPropsWithoutRef<'fieldset'>, 'onChange'> {
   items: InputItem[]
   onChange: React.ChangeEventHandler<HTMLInputElement>
-  label: string
+  labelText: string
+  helperText?: string
+  errorMessage?: string
+  isInvalid?: boolean
+  isRequired?: boolean
 }
 
-export const CheckboxGroup = (props: CheckboxGroupProps) => {
-  const { items, onChange, label, className, ...newProps } = props
-  const groupName = `checkbox_group_${Math.random()}`
+export const CheckboxGroup = React.forwardRef<
+  HTMLFieldSetElement,
+  CheckboxGroupProps
+>((props, ref) => {
+  const {
+    items,
+    onChange,
+    className,
+    labelText,
+    helperText,
+    errorMessage,
+    isInvalid,
+    isRequired,
+    ...restProps
+  } = props
 
   return (
-    <fieldset className={cx('mb-4', className)} {...newProps}>
-      <legend>{label}</legend>
+    <FieldsetControl
+      className={className}
+      labelText={labelText}
+      helperText={helperText}
+      errorMessage={errorMessage}
+      isInvalid={isInvalid}
+      isRequired={isRequired}
+      ref={ref}
+      {...restProps}
+    >
       {items.map(({ label, value }, index) => {
         return (
-          <div key={index}>
-            <Checkbox name={groupName} value={value} onChange={onChange}>
-              {label}
-            </Checkbox>
-          </div>
+          <Checkbox key={index} value={value} onChange={onChange}>
+            {label}
+          </Checkbox>
         )
       })}
-    </fieldset>
+    </FieldsetControl>
   )
-}
+})

package/packages/forms/src/components/controlled/RadioGroup.tsx

@@ -1,36 +1,60 @@
 import React from 'react'
 import { Radio } from '../Radio'
+import { FieldsetControl } from '../FieldsetControl'
 import { InputItem } from './InputItem'
-import { cx } from '../../utils'
 
 export interface RadioGroupProps
-  extends Omit<React.ComponentProps<'fieldset'>, 'onChange'> {
+  extends Omit<React.ComponentPropsWithoutRef<'fieldset'>, 'onChange'> {
   items: InputItem[]
   onChange: React.ChangeEventHandler<HTMLInputElement>
-  label: string
+  labelText: string
+  helperText?: string
+  errorMessage?: string
+  isInvalid?: boolean
+  isRequired?: boolean
+  defaultValue?: string
 }
 
-export const RadioGroup = (props: RadioGroupProps) => {
-  const { items, onChange, label, className, ...newProps } = props
-  const groupName = `radio_group_${Math.random()}`
+export const RadioGroup = React.forwardRef<
+  HTMLFieldSetElement,
+  RadioGroupProps
+>((props, ref) => {
+  const {
+    items,
+    onChange,
+    className,
+    labelText,
+    helperText,
+    errorMessage,
+    isInvalid,
+    isRequired,
+    defaultValue,
+    ...restProps
+  } = props
 
   return (
-    <fieldset className={cx('mb-4', className)} {...newProps}>
-      <legend>{label}</legend>
+    <FieldsetControl
+      className={className}
+      labelText={labelText}
+      helperText={helperText}
+      errorMessage={errorMessage}
+      isInvalid={isInvalid}
+      isRequired={isRequired}
+      ref={ref}
+      {...restProps}
+    >
       {items.map(({ label, value }, index) => {
         return (
-          <div key={index}>
-            <Radio
-              name={groupName}
-              value={value}
-              onChange={onChange}
-              defaultChecked={index === 0}
-            >
-              {label}
-            </Radio>
-          </div>
+          <Radio
+            key={index}
+            value={value}
+            onChange={onChange}
+            defaultChecked={defaultValue === value}
+          >
+            {label}
+          </Radio>
         )
       })}
-    </fieldset>
+    </FieldsetControl>
   )
-}
+})

package/packages/forms/src/components/controlled/SelectControl.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { LabelControl } from '../LabelControl'
+import { Select } from '../Select'
+
+export interface SelectControlProps
+  extends React.ComponentPropsWithoutRef<'select'> {
+  labelText: string
+  helperText?: string
+  errorMessage?: string
+  isInvalid?: boolean
+  isRequired?: boolean
+}
+
+export const SelectControl = React.forwardRef<
+  HTMLSelectElement,
+  SelectControlProps
+>((props, ref) => {
+  const {
+    className,
+    labelText,
+    helperText,
+    errorMessage,
+    isInvalid,
+    isRequired,
+    ...restProps
+  } = props
+
+  return (
+    <LabelControl
+      className={className}
+      labelText={labelText}
+      helperText={helperText}
+      errorMessage={errorMessage}
+      isInvalid={isInvalid}
+      isRequired={isRequired}
+    >
+      <Select ref={ref} {...restProps} />
+    </LabelControl>
+  )
+})

package/packages/forms/src/components/controlled/TextControl.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { LabelControl } from '../LabelControl'
+import { Text } from '../Text'
+
+export interface TextControlProps
+  extends React.ComponentPropsWithoutRef<'input'> {
+  labelText: string
+  helperText?: string
+  errorMessage?: string
+  isInvalid?: boolean
+  isRequired?: boolean
+}
+
+export const TextControl = React.forwardRef<HTMLInputElement, TextControlProps>(
+  (props, ref) => {
+    const {
+      className,
+      labelText,
+      helperText,
+      errorMessage,
+      isInvalid,
+      isRequired,
+      ...restProps
+    } = props
+
+    return (
+      <LabelControl
+        className={className}
+        labelText={labelText}
+        helperText={helperText}
+        errorMessage={errorMessage}
+        isInvalid={isInvalid}
+        isRequired={isRequired}
+      >
+        <Text ref={ref} {...restProps} />
+      </LabelControl>
+    )
+  }
+)

package/packages/forms/src/components/controlled/TextareaControl.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { LabelControl } from '../LabelControl'
+import { Textarea } from '../Textarea'
+
+export interface TextareaControlProps
+  extends React.ComponentPropsWithoutRef<'textarea'> {
+  labelText: string
+  helperText?: string
+  errorMessage?: string
+  isInvalid?: boolean
+  isRequired?: boolean
+}
+
+export const TextareaControl = React.forwardRef<
+  HTMLTextAreaElement,
+  TextareaControlProps
+>((props, ref) => {
+  const {
+    className,
+    labelText,
+    helperText,
+    errorMessage,
+    isInvalid,
+    isRequired,
+    ...restProps
+  } = props
+
+  return (
+    <LabelControl
+      className={className}
+      labelText={labelText}
+      helperText={helperText}
+      errorMessage={errorMessage}
+      isInvalid={isInvalid}
+      isRequired={isRequired}
+    >
+      <Textarea ref={ref} {...restProps} />
+    </LabelControl>
+  )
+})

package/packages/forms/src/components/controlled/index.ts

@@ -1,5 +1,5 @@
 export { CheckboxGroup } from './CheckboxGroup'
 export { RadioGroup } from './RadioGroup'
-export { Select } from './Select'
-export { Text } from './Text'
-export { Textarea } from './Textarea'
+export { SelectControl } from './SelectControl'
+export { TextControl } from './TextControl'
+export { TextareaControl } from './TextareaControl'

package/packages/forms/src/components/index.ts

@@ -3,3 +3,5 @@ export { Radio } from './Radio'
 export { Select } from './Select'
 export { Text } from './Text'
 export { Textarea } from './Textarea'
+export { LabelControl } from './LabelControl'
+export { FieldsetControl } from './FieldsetControl'

package/packages/forms/src/index.ts

@@ -1,9 +1,17 @@
-export { Checkbox, Radio, Select, Text, Textarea } from './components'
+export {
+  Checkbox,
+  Radio,
+  Select,
+  Text,
+  Textarea,
+  LabelControl,
+  FieldsetControl
+} from './components'
 
 export {
   CheckboxGroup,
   RadioGroup,
-  Select as SelectControl,
-  Text as TextControl,
-  Textarea as TextareaControl
+  SelectControl,
+  TextControl,
+  TextareaControl
 } from './components/controlled'

package/packages/forms/tests/FieldsetControl.test.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { FieldsetControl } from '../src'
+
+describe('FieldsetControl', () => {
+  test('renders FieldsetControl component vol1', async () => {
+    render(<FieldsetControl labelText="test" />)
+
+    const fieldset = screen.getByRole('group')
+
+    expect(fieldset).toBeInTheDocument()
+
+    expect(screen.getByText('test')).toBeInTheDocument()
+  })
+
+  test('renders FieldsetControl component vol2', async () => {
+    render(
+      <FieldsetControl
+        labelText="test"
+        helperText="helper"
+        errorMessage="error"
+      />
+    )
+
+    expect(screen.getByText('helper')).toBeInTheDocument()
+    expect(screen.queryByText('error')).toBeNull()
+  })
+
+  test('renders FieldsetControl component vol3', async () => {
+    render(
+      <FieldsetControl
+        labelText="test"
+        helperText="helper"
+        errorMessage="error"
+        isInvalid
+      />
+    )
+
+    expect(screen.getByText('helper')).toBeInTheDocument()
+    expect(screen.getByText('error')).toBeInTheDocument()
+  })
+
+  test('renders FieldsetControl component vol4', async () => {
+    render(<FieldsetControl labelText="test" />)
+
+    expect(screen.queryByText('*')).toBeNull()
+
+    render(<FieldsetControl labelText="test" isRequired />)
+
+    expect(screen.getByText('*')).toBeInTheDocument()
+  })
+})

package/packages/forms/tests/LabelControl.test.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { LabelControl, Select, Text, Textarea } from '../src'
+
+describe('LabelControl', () => {
+  test('renders LabelControl component vol1', async () => {
+    render(<LabelControl labelText="test" data-testid="label" />)
+
+    const elem = screen.getByTestId('label')
+
+    expect(elem).toBeInTheDocument()
+
+    expect(screen.getByText('test')).toBeInTheDocument()
+  })
+
+  test('renders LabelControl component vol2', async () => {
+    render(
+      <LabelControl labelText="test" helperText="helper" errorMessage="error" />
+    )
+
+    expect(screen.getByText('helper')).toBeInTheDocument()
+    expect(screen.queryByText('error')).toBeNull()
+  })
+
+  test('renders LabelControl component vol3', async () => {
+    render(
+      <LabelControl
+        labelText="test"
+        helperText="helper"
+        errorMessage="error"
+        isInvalid
+      />
+    )
+
+    expect(screen.getByText('helper')).toBeInTheDocument()
+    expect(screen.getByText('error')).toBeInTheDocument()
+  })
+
+  test('renders LabelControl component vol4', async () => {
+    render(<LabelControl labelText="test" />)
+
+    expect(screen.queryByText('*')).toBeNull()
+
+    render(<LabelControl labelText="test" isRequired />)
+
+    expect(screen.getByText('*')).toBeInTheDocument()
+  })
+
+  test('Test the relationship between the label and input elements.', async () => {
+    render(
+      <>
+        <LabelControl labelText="test1">
+          <Select>
+            <option value="1" defaultChecked />
+          </Select>
+        </LabelControl>
+        <LabelControl labelText="test2">
+          <Text defaultValue="1" />
+        </LabelControl>
+        <LabelControl labelText="test3">
+          <Textarea defaultValue="1" />
+        </LabelControl>
+      </>
+    )
+
+    const select = screen.getByLabelText(/test1/)
+    expect(select).toBeInTheDocument()
+    expect(select).toHaveValue('1')
+    expect(select).toHaveAttribute('id')
+
+    const text = screen.getByLabelText(/test2/)
+    expect(text).toBeInTheDocument()
+    expect(text).toHaveValue('1')
+    expect(text).toHaveAttribute('id')
+
+    const textarea = screen.getByLabelText(/test3/)
+    expect(textarea).toBeInTheDocument()
+    expect(textarea).toHaveValue('1')
+    expect(textarea).toHaveAttribute('id')
+  })
+
+  test('Test the relationship between the label and input elements.', async () => {
+    render(
+      <>
+        <LabelControl labelText="test1" htmlFor="id1">
+          <Select>
+            <option value="1" defaultChecked />
+          </Select>
+        </LabelControl>
+        <LabelControl labelText="test2" htmlFor="id2">
+          <Text defaultValue="1" />
+        </LabelControl>
+        <LabelControl labelText="test3" htmlFor="id3">
+          <Textarea defaultValue="1" />
+        </LabelControl>
+      </>
+    )
+
+    const select = screen.getByLabelText(/test1/)
+    expect(select).toBeInTheDocument()
+    expect(select).toHaveValue('1')
+    expect(select).toHaveAttribute('id', 'id1')
+
+    const text = screen.getByLabelText(/test2/)
+    expect(text).toBeInTheDocument()
+    expect(text).toHaveValue('1')
+    expect(text).toHaveAttribute('id', 'id2')
+
+    const textarea = screen.getByLabelText(/test3/)
+    expect(textarea).toBeInTheDocument()
+    expect(textarea).toHaveValue('1')
+    expect(textarea).toHaveAttribute('id', 'id3')
+  })
+})

package/packages/forms/tests/Radio.test.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { FieldsetControl, Radio } from '../src'
+
+describe('should derive values from surrounding FieldsetControl', () => {
+  test('renders Text component vol1', async () => {
+    render(
+      <FieldsetControl labelText="test">
+        <Radio />
+      </FieldsetControl>
+    )
+
+    const elem = screen.getByRole('radio')
+
+    expect(elem).toBeInTheDocument()
+  })
+
+  test('renders Text component vol2', async () => {
+    render(
+      <FieldsetControl
+        labelText="test"
+        helperText="helper"
+        errorMessage="error"
+      >
+        <Radio />
+      </FieldsetControl>
+    )
+
+    const elem = screen.getByRole('radio')
+
+    expect(elem).toBeInTheDocument()
+
+    expect(elem).toHaveAttribute('aria-describedby', 'helper-text-:r1:')
+    expect(elem).toHaveAttribute('aria-errormessage', 'error-message-:r1:')
+  })
+
+  test('renders Text component vol3', async () => {
+    render(
+      <FieldsetControl labelText="test">
+        <Radio />
+      </FieldsetControl>
+    )
+
+    const elem = screen.getByRole('radio')
+
+    expect(elem).toBeInTheDocument()
+
+    expect(elem).toBeValid()
+    expect(elem).toHaveAttribute('aria-invalid', 'false')
+  })
+
+  test('renders Text component vol4', async () => {
+    render(
+      <FieldsetControl labelText="test" isInvalid>
+        <Radio />
+      </FieldsetControl>
+    )
+
+    const elem = screen.getByRole('radio')
+
+    expect(elem).toBeInTheDocument()
+
+    expect(elem).toBeInvalid()
+    expect(elem).toHaveAttribute('aria-invalid', 'true')
+    expect(elem).not.toBeRequired()
+  })
+
+  test('renders Text component vol5', async () => {
+    render(
+      <FieldsetControl labelText="test" isRequired>
+        <Radio defaultChecked={true} />
+      </FieldsetControl>
+    )
+
+    const elem = screen.getByRole('radio')
+
+    expect(elem).toBeInTheDocument()
+
+    expect(elem).toBeValid()
+    expect(elem).toBeRequired()
+  })
+
+  test('renders Text component vol6', async () => {
+    render(
+      <FieldsetControl labelText="test" isRequired>
+        <Radio />
+      </FieldsetControl>
+    )
+
+    const elem = screen.getByRole('radio')
+
+    expect(elem).toBeInTheDocument()
+
+    expect(elem).toBeInvalid()
+    expect(elem).toBeRequired()
+  })
+})