@sakura-ui/sakura-ui 0.0.15 → 0.1.0

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

@@ -0,0 +1,70 @@
+import React from 'react'
+import { cx } from '../utils'
+import { ControllerContext } from './context'
+
+export interface FieldsetControlProps
+  extends React.ComponentPropsWithoutRef<'fieldset'> {
+  labelText: string
+  helperText?: string
+  errorMessage?: string
+  isInvalid?: boolean
+  isRequired?: boolean
+  direction?: 'flex-col' | 'flex-row'
+}
+
+export const FieldsetControl = React.forwardRef<
+  HTMLFieldSetElement,
+  FieldsetControlProps
+>((props, ref) => {
+  const id = React.useId()
+  const {
+    labelText,
+    className,
+    helperText,
+    errorMessage,
+    isInvalid,
+    isRequired,
+    direction,
+    children,
+    ...restProps
+  } = props
+
+  const groupName = restProps.name ?? `group-${id}`
+
+  const context = {
+    groupName: groupName,
+    helperTextId: `helper-text-${id}`,
+    errorMessageId: `error-message-${id}`,
+    isInvalid: isInvalid ?? false,
+    isRequired: isRequired ?? false
+  }
+
+  const styleDirection = direction ?? 'flex-col'
+
+  return (
+    <ControllerContext.Provider value={context}>
+      <fieldset className={cx('mb-4', className)} ref={ref} {...restProps}>
+        <legend>
+          <p className={cx('block mb-2', isInvalid && 'text-sun-800')}>
+            {labelText}
+            {isRequired && <span className="text-sun-800">&nbsp;*</span>}
+          </p>
+        </legend>
+        <div className={cx('inline-flex', styleDirection)}>{children}</div>
+        {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>
+        )}
+      </fieldset>
+    </ControllerContext.Provider>
+  )
+})

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
@@ -34,9 +41,19 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
   `
   return (
     <label htmlFor={newProps.id} className={cx(style, className)}>
-      <input className={styleInput} type="radio" {...newProps} ref={ref} />
-      <span className={styleRadio}></span>
-      {children}
+      <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}
+      </span>
     </label>
   )
 })

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

@@ -1,22 +1,27 @@
 import React from 'react'
 import { cx } from '../utils'
+import { ControllerContext } from './context'
 
-export interface SelectProps extends React.ComponentPropsWithoutRef<'select'> {
-  label?: string
-}
+export interface SelectProps extends React.ComponentPropsWithoutRef<'select'> {}
 
 export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
   (props, ref) => {
-    const { label, className, children, ...newProps } = props
+    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
@@ -24,12 +29,19 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
       focus:outline-wood-500
     `
 
-    const elem = (
-      <div className="inline-block relative">
-        <select className={cx(style, props.className)} {...newProps} ref={ref}>
-          {props.children}
+    return (
+      <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"
@@ -38,21 +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>
-    )
-
-    return (
-      <>
-        {label ? (
-          <label>
-            <span className="block mb-2">{label}</span>
-            {elem}
-          </label>
-        ) : (
-          elem
-        )}
-      </>
+        </span>
+      </span>
     )
   }
 )

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

@@ -1,20 +1,24 @@
 import React from 'react'
 import { cx } from '../utils'
+import { ControllerContext } from './context'
 
-export interface TextProps extends React.ComponentPropsWithoutRef<'input'> {
-  label?: string
-}
+export interface TextProps extends React.ComponentPropsWithoutRef<'input'> {}
 
 export const Text = React.forwardRef<HTMLInputElement, TextProps>(
   (props, ref) => {
-    const { label, 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
@@ -25,26 +29,16 @@ export const Text = React.forwardRef<HTMLInputElement, TextProps>(
       disabled:border-sumi-500
     `
 
-    const elem = (
+    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}
       />
     )
-
-    return (
-      <>
-        {label ? (
-          <label>
-            <div className="mb-2">{label}</div>
-            {elem}
-          </label>
-        ) : (
-          elem
-        )}
-      </>
-    )
   }
 )

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

@@ -1,21 +1,26 @@
 import React from 'react'
 import { cx } from '../utils'
+import { ControllerContext } from './context'
 
 export interface TextareaProps
-  extends React.ComponentPropsWithoutRef<'textarea'> {
-  label?: string
-}
+  extends React.ComponentPropsWithoutRef<'textarea'> {}
 
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (props, ref) => {
-    const { label, 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
@@ -26,23 +31,17 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       disabled:border-sumi-500
     `
 
-    const elem = (
-      <textarea className={cx(style, className)} {...newProps} ref={ref}>
+    return (
+      <textarea
+        className={cx(style, invalidStyle, className)}
+        aria-describedby={ctx.helperTextId}
+        aria-errormessage={ctx.errorMessageId}
+        aria-invalid={ctx.isInvalid ?? false}
+        {...restProps}
+        ref={ref}
+      >
         {children}
       </textarea>
     )
-
-    return (
-      <>
-        {label ? (
-          <label>
-            <div className="mb-2">{label}</div>
-            {elem}
-          </label>
-        ) : (
-          elem
-        )}
-      </>
-    )
   }
 )

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

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Checkbox } from '../Checkbox'
+import { FieldsetControl } from '../FieldsetControl'
+import { InputItem } from './InputItem'
+
+export interface CheckboxGroupProps
+  extends Omit<React.ComponentPropsWithoutRef<'fieldset'>, 'onChange'> {
+  items: InputItem[]
+  onChange: React.ChangeEventHandler<HTMLInputElement>
+  labelText: string
+  helperText?: string
+  errorMessage?: string
+  isInvalid?: boolean
+  isRequired?: boolean
+}
+
+export const CheckboxGroup = React.forwardRef<
+  HTMLFieldSetElement,
+  CheckboxGroupProps
+>((props, ref) => {
+  const {
+    items,
+    onChange,
+    className,
+    labelText,
+    helperText,
+    errorMessage,
+    isInvalid,
+    isRequired,
+    ...restProps
+  } = props
+
+  return (
+    <FieldsetControl
+      className={className}
+      labelText={labelText}
+      helperText={helperText}
+      errorMessage={errorMessage}
+      isInvalid={isInvalid}
+      isRequired={isRequired}
+      ref={ref}
+      {...restProps}
+    >
+      {items.map(({ label, value }, index) => {
+        return (
+          <Checkbox key={index} value={value} onChange={onChange}>
+            {label}
+          </Checkbox>
+        )
+      })}
+    </FieldsetControl>
+  )
+})

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

@@ -0,0 +1,60 @@
+import React from 'react'
+import { Radio } from '../Radio'
+import { FieldsetControl } from '../FieldsetControl'
+import { InputItem } from './InputItem'
+
+export interface RadioGroupProps
+  extends Omit<React.ComponentPropsWithoutRef<'fieldset'>, 'onChange'> {
+  items: InputItem[]
+  onChange: React.ChangeEventHandler<HTMLInputElement>
+  labelText: string
+  helperText?: string
+  errorMessage?: string
+  isInvalid?: boolean
+  isRequired?: boolean
+  defaultValue?: string
+}
+
+export const RadioGroup = React.forwardRef<
+  HTMLFieldSetElement,
+  RadioGroupProps
+>((props, ref) => {
+  const {
+    items,
+    onChange,
+    className,
+    labelText,
+    helperText,
+    errorMessage,
+    isInvalid,
+    isRequired,
+    defaultValue,
+    ...restProps
+  } = props
+
+  return (
+    <FieldsetControl
+      className={className}
+      labelText={labelText}
+      helperText={helperText}
+      errorMessage={errorMessage}
+      isInvalid={isInvalid}
+      isRequired={isRequired}
+      ref={ref}
+      {...restProps}
+    >
+      {items.map(({ label, value }, index) => {
+        return (
+          <Radio
+            key={index}
+            value={value}
+            onChange={onChange}
+            defaultChecked={defaultValue === value}
+          >
+            {label}
+          </Radio>
+        )
+      })}
+    </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

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

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

@@ -1,7 +1,7 @@
 export { Checkbox } from './Checkbox'
-export { CheckboxGroup } from './CheckboxGroup'
 export { Radio } from './Radio'
-export { RadioGroup } from './RadioGroup'
 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,
-  CheckboxGroup,
   Radio,
-  RadioGroup,
   Select,
   Text,
-  Textarea
+  Textarea,
+  LabelControl,
+  FieldsetControl
 } from './components'
+
+export {
+  CheckboxGroup,
+  RadioGroup,
+  SelectControl,
+  TextControl,
+  TextareaControl
+} from './components/controlled'