@sakura-ui/sakura-ui 0.0.16 → 0.1.0

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

@@ -0,0 +1,65 @@
+import React from 'react'
+import { cx } from '../utils'
+import { ControllerContext } from './context'
+
+export interface LabelControlProps
+  extends React.ComponentPropsWithoutRef<'div'> {
+  labelText: string
+  helperText?: string
+  errorMessage?: string
+  isInvalid?: boolean
+  isRequired?: boolean
+}
+
+export const LabelControl = React.forwardRef<HTMLDivElement, LabelControlProps>(
+  (props, ref) => {
+    const id = React.useId()
+    const {
+      labelText,
+      className,
+      helperText,
+      errorMessage,
+      isInvalid,
+      isRequired,
+      children,
+      ...restProps
+    } = props
+
+    const context = {
+      helperTextId: `helper-text-${id}`,
+      errorMessageId: `error-message-${id}`,
+      isInvalid: isInvalid ?? false,
+      isRequired: isRequired ?? false
+    }
+
+    return (
+      <ControllerContext.Provider value={context}>
+        <div className={cx('mb-4', className)} ref={ref} {...restProps}>
+          <label>
+            <span className={cx('block mb-2', isInvalid && 'text-sun-800')}>
+              {labelText}
+              {isRequired && <span className="text-sun-800">&nbsp;*</span>}
+            </span>
+            {children}
+          </label>
+          {helperText && (
+            <p id={context.helperTextId} className="text-sm text-sumi-700 mt-2">
+              {helperText}
+            </p>
+          )}
+          {isInvalid && (
+            <p
+              id={context.errorMessageId}
+              className={cx(
+                'text-sm text-sun-800',
+                helperText ? 'mt-1' : 'mt-2'
+              )}
+            >
+              {errorMessage}
+            </p>
+          )}
+        </div>
+      </ControllerContext.Provider>
+    )
+  }
+)

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

@@ -1,17 +1,25 @@
 import React from 'react'
 import { cx } from '../utils'
+import { ControllerContext } from './context'
 
-export interface Props extends React.ComponentProps<'input'> {}
+export interface Props extends React.ComponentPropsWithoutRef<'input'> {}
 
 export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
   const { className, children, ...newProps } = props
+  const ctx = React.useContext(ControllerContext)
+  if (ctx.isRequired) {
+    newProps.required = true
+  }
+  if (ctx.groupName) {
+    newProps.name = ctx.groupName
+  }
 
   const style = `
-    flex
-    items-center
+    inline-block
     text-sm
     cursor-pointer
     py-2
+    mr-4
   `
   const styleInput = `
     hidden
@@ -19,7 +27,6 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
   `
 
   const styleRadio = `
-    inline-block
     bg-clip-content
     w-6 h-6
     ml-1
@@ -33,12 +40,20 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
     peer-checked:border-sea-600
   `
   return (
-    <div className="inline-block">
-      <label htmlFor={newProps.id} className={cx(style, className)}>
-        <input className={styleInput} type="radio" {...newProps} ref={ref} />
+    <label htmlFor={newProps.id} className={cx(style, className)}>
+      <span className="flex items-center">
+        <input
+          className={styleInput}
+          type="radio"
+          aria-describedby={ctx.helperTextId}
+          aria-errormessage={ctx.errorMessageId}
+          aria-invalid={ctx.isInvalid ?? false}
+          {...newProps}
+          ref={ref}
+        />
         <span className={styleRadio}></span>
         {children}
-      </label>
-    </div>
+      </span>
+    </label>
   )
 })

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

@@ -1,20 +1,27 @@
 import React from 'react'
 import { cx } from '../utils'
+import { ControllerContext } from './context'
 
 export interface SelectProps extends React.ComponentPropsWithoutRef<'select'> {}
 
 export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
   (props, ref) => {
     const { className, children, ...newProps } = props
+    const ctx = React.useContext(ControllerContext)
+    if (ctx.isRequired) {
+      newProps.required = true
+    }
+
+    const invalidStyle = ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'
 
     const style = `
+      cursor-pointer
       appearance-none
       text-base
       w-full
       bg-white-100
       border
       border-solid
-      border-sumi-900
       py-4 px-4 pr-8
       rounded-[8px]
       focus:outline
@@ -23,11 +30,18 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
     `
 
     return (
-      <div className="inline-block relative">
-        <select className={cx(style, props.className)} {...newProps} ref={ref}>
+      <span className="inline-block relative">
+        <select
+          className={cx(style, invalidStyle, props.className)}
+          aria-describedby={ctx.helperTextId}
+          aria-errormessage={ctx.errorMessageId}
+          aria-invalid={ctx.isInvalid ?? false}
+          {...newProps}
+          ref={ref}
+        >
           {children}
         </select>
-        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+        <span className="flex items-center absolute inset-y-0 right-0 px-2 pointer-events-none">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             className="fill-sumi-900"
@@ -36,8 +50,8 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
           >
             <path d="M12 15.05 6.35 9.4 7.4 8.35l4.6 4.6 4.6-4.6 1.05 1.05Z" />
           </svg>
-        </div>
-      </div>
+        </span>
+      </span>
     )
   }
 )

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

@@ -1,18 +1,24 @@
 import React from 'react'
 import { cx } from '../utils'
+import { ControllerContext } from './context'
 
 export interface TextProps extends React.ComponentPropsWithoutRef<'input'> {}
 
 export const Text = React.forwardRef<HTMLInputElement, TextProps>(
   (props, ref) => {
-    const { className, ...newProps } = props
+    const { className, ...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
@@ -26,8 +32,11 @@ export const Text = React.forwardRef<HTMLInputElement, TextProps>(
     return (
       <input
         type="text"
-        className={cx(style, className)}
-        {...newProps}
+        className={cx(style, invalidStyle, className)}
+        aria-describedby={ctx.helperTextId}
+        aria-errormessage={ctx.errorMessageId}
+        aria-invalid={ctx.isInvalid ?? false}
+        {...restProps}
         ref={ref}
       />
     )

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,14 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     `
 
     return (
-      <textarea className={cx(style, className)} {...newProps} ref={ref}>
+      <textarea
+        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,16 @@
+import React from 'react'
+
+export interface ControllerContextType {
+  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()
+  })
+})