@sakura-ui/sakura-ui 0.2.0 → 0.3.0

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

@@ -1,5 +1,5 @@
-import React from 'react'
-import { cx } from '../utils/class'
+import React, { type ComponentPropsWithRef } from 'react'
+import { cx, Style } from '@sakura-ui/helper'
 import { ControllerContext } from './context'
 import {
   type InputSize,
@@ -8,78 +8,75 @@ import {
   iconStyles
 } from './inputStyle'
 
-export interface RadioProps
-  extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
-  size?: InputSize
+export namespace Radio {
+  export interface Props extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
+    size?: InputSize
+  }
 }
 
-export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
-  (props, ref) => {
-    const { id, className, size = 'lg', children, ...restProps } = props
-    const radioId = id || React.useId()
-    const ctx = React.useContext(ControllerContext)
-    if (ctx.isRequired) {
-      restProps.required = true
-    }
-    if (ctx.groupName) {
-      restProps.name = ctx.groupName
-    }
-
-    const styleInput = `
-      peer
-      sr-only
-    `
+export const Radio = (props: Radio.Props) => {
+  const { id, className, size = 'lg', children, ...restProps } = props
+  const genId = React.useId()
+  const radioId = id || genId
+  const ctx = React.useContext(ControllerContext)
+  if (ctx.isRequired) {
+    restProps.required = true
+  }
+  if (ctx.groupName) {
+    restProps.name = ctx.groupName
+  }
 
-    const styleRadio = `
-      bg-clip-content
-      rounded-full
-      border
-      border-solid
-      border-sumi-900
-      peer-checked:bg-sea-600
-      peer-checked:border-sea-600
-      peer-disabled:border-sumi-500
-      peer-focus-visible:ring-2
-      peer-focus-visible:ring-offset-2
-      peer-focus-visible:ring-wood-500
-    `
+  const styleInput = `
+    peer
+    sr-only
+  `
 
-    const radioSizes: { [key in InputSize]: string } = {
-      lg: 'p-1',
-      md: 'p-[3px]',
-      sm: 'p-[3px]'
-    }
+  const styleRadio = `
+    bg-clip-content
+    rounded-full
+    border
+    border-solid
+    border-solid-gray-900
+    peer-checked:bg-blue-600
+    peer-checked:border-blue-600
+    peer-disabled:border-solid-gray-500
+    ${Style.Peer.focusRect}
+  `
 
-    return (
-      <label
-        htmlFor={radioId}
-        className={cx(
-          borderlessInputBaseStyles,
-          borderlessInputSizeStyles[size],
-          className
-        )}
-      >
-        <span className="flex items-center">
-          <input
-            id={radioId}
-            className={styleInput}
-            type="radio"
-            aria-describedby={ctx.helperTextId}
-            aria-errormessage={ctx.errorMessageId}
-            aria-invalid={ctx.isInvalid ?? false}
-            aria-required={ctx.isRequired ?? false}
-            {...restProps}
-            ref={ref}
-          />
-          <span
-            aria-hidden={true}
-            className={cx(styleRadio, radioSizes[size], iconStyles[size])}
-          />
-          <span className="peer-disabled:text-sumi-500">{children}</span>
-        </span>
-      </label>
-    )
+  const radioSizes: { [key in InputSize]: string } = {
+    lg: 'p-1',
+    md: 'p-[3px]',
+    sm: 'p-[3px]'
   }
-)
+
+  return (
+    <label
+      htmlFor={radioId}
+      className={cx(
+        borderlessInputBaseStyles,
+        borderlessInputSizeStyles[size],
+        className
+      )}
+    >
+      <span className="flex items-center">
+        <input
+          id={radioId}
+          className={styleInput}
+          type="radio"
+          aria-describedby={ctx.helperTextId}
+          aria-errormessage={ctx.errorMessageId}
+          aria-invalid={ctx.isInvalid ?? false}
+          aria-required={ctx.isRequired ?? false}
+          {...restProps}
+        />
+        <span
+          aria-hidden={true}
+          className={cx(styleRadio, radioSizes[size], iconStyles[size])}
+        />
+        <span className="peer-disabled:text-solid-gray-500">{children}</span>
+      </span>
+    </label>
+  )
+}
 
 Radio.displayName = 'Radio'

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

@@ -1,5 +1,5 @@
-import React from 'react'
-import { cx } from '../utils/class'
+import React, { type ComponentPropsWithRef } from 'react'
+import { cx } from '@sakura-ui/helper'
 import { ControllerContext } from './context'
 import {
   type InputSize,
@@ -7,71 +7,71 @@ import {
   borderedInputSizeStyles
 } from './inputStyle'
 
-export interface SelectProps
-  extends Omit<React.ComponentPropsWithRef<'select'>, 'size'> {
-  size?: InputSize
+export namespace Select {
+  export interface Props extends Omit<ComponentPropsWithRef<'select'>, 'size'> {
+    size?: InputSize
+  }
 }
 
-export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-  (props, ref) => {
-    const { id, className, size = 'lg', children, ...restProps } = props
-    const ctx = React.useContext(ControllerContext)
-    if (ctx.isRequired) {
-      restProps.required = true
-    }
+export const Select = (props: Select.Props) => {
+  const { id, className, size = 'lg', children, ...restProps } = props
+  const ctx = React.useContext(ControllerContext)
+  if (ctx.isRequired) {
+    restProps.required = true
+  }
 
-    const style = `
-      !pr-8
-      peer
-      cursor-pointer
-      appearance-none
-    `
+  const style = `
+    !pr-8
+    peer
+    cursor-pointer
+    appearance-none
+  `
 
-    const styleArrow = `
-      pointer-events-none
-      absolute
-      right-4
-      top-1/2
-      -translate-y-1/2
-      text-sumi-900
-      peer-disabled:text-sumi-500
-    `
+  const styleArrow = `
+    pointer-events-none
+    absolute
+    right-4
+    top-1/2
+    -translate-y-1/2
+    text-solid-gray-900
+    peer-disabled:text-solid-gray-500
+  `
 
-    return (
-      <div className="inline-block relative">
-        <select
-          id={id || ctx.id}
-          className={cx(
-            style,
-            borderedInputBaseStyles,
-            borderedInputSizeStyles[size],
-            props.className
-          )}
-          aria-describedby={ctx.helperTextId}
-          aria-errormessage={ctx.errorMessageId}
-          aria-invalid={ctx.isInvalid ?? false}
-          aria-required={ctx.isRequired ?? false}
-          {...restProps}
-          ref={ref}
-        >
-          {children}
-        </select>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          aria-hidden={true}
-          className={styleArrow}
-          fill="none"
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-        >
-          <title>arrow down</title>
-          <path
-            d="M12 15.05 6.35 9.4 7.4 8.35l4.6 4.6 4.6-4.6 1.05 1.05Z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-    )
-  }
-)
+  return (
+    <div className="inline-block relative">
+      <select
+        id={id || ctx.id}
+        className={cx(
+          style,
+          borderedInputBaseStyles,
+          borderedInputSizeStyles[size],
+          className
+        )}
+        aria-describedby={ctx.helperTextId}
+        aria-errormessage={ctx.errorMessageId}
+        aria-invalid={ctx.isInvalid ?? false}
+        aria-required={ctx.isRequired ?? false}
+        {...restProps}
+      >
+        {children}
+      </select>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden={true}
+        className={styleArrow}
+        fill="none"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+      >
+        <title>arrow down</title>
+        <path
+          d="M12 15.05 6.35 9.4 7.4 8.35l4.6 4.6 4.6-4.6 1.05 1.05Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  )
+}
+
+Select.displayName = 'Select'

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

@@ -1,73 +1,68 @@
-import React from 'react'
-import { cx } from '../utils/class'
+import React, { type ComponentPropsWithRef } from 'react'
+import { cx, Style } from '@sakura-ui/helper'
 import { ControllerContext } from './context'
 
-export interface TextareaProps
-  extends React.ComponentPropsWithRef<'textarea'> {}
+export namespace Textarea {
+  export interface Props extends ComponentPropsWithRef<'textarea'> {}
+}
 
-export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (props, ref) => {
-    const { id, className, children, onChange, maxLength, ...restProps } = props
+export const Textarea = (props: Textarea.Props) => {
+  const { id, className, children, onChange, maxLength, ...restProps } = props
 
-    const [count, setCount] = React.useState(0)
+  const [count, setCount] = React.useState(0)
 
-    const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      if (onChange) onChange(e)
+  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (onChange) onChange(e)
 
-      setCount(e.target.value.length)
-    }
+    setCount(e.target.value.length)
+  }
 
-    const ctx = React.useContext(ControllerContext)
-    if (ctx.isRequired) {
-      restProps.required = true
-    }
+  const ctx = React.useContext(ControllerContext)
+  if (ctx.isRequired) {
+    restProps.required = true
+  }
 
-    const overtextStyle =
-      count > (maxLength || 0) ? 'text-sun-800' : 'text-sumi-700'
+  const overtextStyle =
+    count > (maxLength || 0) ? 'text-red-800' : 'text-solid-gray-700'
 
-    const style = `
+  const style = `
       p-4
       text-label
       rounded-lg
       border
       border-solid
-      border-sumi-900
-      outline-offset-2
-      focus:outline
-      focus:outline-2
-      focus:outline-wood-500
+      border-solid-gray-900
       disabled:bg-transparent
-      disabled:text-sumi-500
-      disabled:border-sumi-500
-      aria-invalid:border-sun-800
+      disabled:text-solid-gray-500
+      disabled:border-solid-gray-500
+      aria-invalid:border-red-800
+      ${Style.focusRect}
     `
 
-    return (
-      <>
-        <textarea
-          id={id || ctx.id}
-          className={cx(style, className)}
-          aria-describedby={ctx.helperTextId}
-          aria-errormessage={ctx.errorMessageId}
-          aria-invalid={ctx.isInvalid ?? false}
-          aria-required={ctx.isRequired ?? false}
-          onChange={onChangeHandler}
-          {...restProps}
-          ref={ref}
-        >
-          {children}
-        </textarea>
-        {maxLength ? (
-          <p className="text-label text-sumi-700">
-            <span className={overtextStyle}>{count}</span>/
-            <span>{maxLength}</span>
-          </p>
-        ) : (
-          ''
-        )}
-      </>
-    )
-  }
-)
+  return (
+    <>
+      <textarea
+        id={id || ctx.id}
+        className={cx(style, className)}
+        aria-describedby={ctx.helperTextId}
+        aria-errormessage={ctx.errorMessageId}
+        aria-invalid={ctx.isInvalid ?? false}
+        aria-required={ctx.isRequired ?? false}
+        onChange={onChangeHandler}
+        {...restProps}
+      >
+        {children}
+      </textarea>
+      {maxLength ? (
+        <p className="text-label text-solid-gray-700">
+          <span className={overtextStyle}>{count}</span>/
+          <span>{maxLength}</span>
+        </p>
+      ) : (
+        ''
+      )}
+    </>
+  )
+}
 
 Textarea.displayName = 'Textarea'

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

@@ -1,25 +1,24 @@
-import React from 'react'
+import React, { type ComponentPropsWithRef } from 'react'
 import { Checkbox } from '../Checkbox'
 import { FieldsetControl } from '../FieldsetControl'
 import type { InputItem } from './InputItem'
 import type { InputSize } from '../inputStyle'
 
-export interface CheckboxGroupProps
-  extends Omit<React.ComponentPropsWithRef<'fieldset'>, 'onChange'> {
-  items: InputItem[]
-  onChange: React.ChangeEventHandler<HTMLInputElement>
-  labelText: string
-  helperText?: string
-  errorMessage?: string
-  isInvalid?: boolean
-  isRequired?: boolean
-  size?: InputSize
+export namespace CheckboxGroup {
+  export interface Props
+    extends Omit<ComponentPropsWithRef<'fieldset'>, 'onChange'> {
+    items: InputItem[]
+    onChange: React.ChangeEventHandler<HTMLInputElement>
+    labelText: string
+    helperText?: string
+    errorMessage?: string
+    isInvalid?: boolean
+    isRequired?: boolean
+    size?: InputSize
+  }
 }
 
-export const CheckboxGroup = React.forwardRef<
-  HTMLFieldSetElement,
-  CheckboxGroupProps
->((props, ref) => {
+export const CheckboxGroup = (props: CheckboxGroup.Props) => {
   const {
     items,
     onChange,
@@ -41,7 +40,6 @@ export const CheckboxGroup = React.forwardRef<
       errorMessage={errorMessage}
       isInvalid={isInvalid}
       isRequired={isRequired}
-      ref={ref}
       {...restProps}
     >
       {items.map(({ label, value }) => {
@@ -58,6 +56,6 @@ export const CheckboxGroup = React.forwardRef<
       })}
     </FieldsetControl>
   )
-})
+}
 
 CheckboxGroup.displayName = 'CheckboxGroup'

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

@@ -1,26 +1,25 @@
-import React from 'react'
+import React, { type ComponentPropsWithRef } from 'react'
 import { Radio } from '../Radio'
 import { FieldsetControl } from '../FieldsetControl'
 import type { InputItem } from './InputItem'
 import type { InputSize } from '../inputStyle'
 
-export interface RadioGroupProps
-  extends Omit<React.ComponentPropsWithRef<'fieldset'>, 'onChange'> {
-  items: InputItem[]
-  onChange: React.ChangeEventHandler<HTMLInputElement>
-  labelText: string
-  helperText?: string
-  errorMessage?: string
-  isInvalid?: boolean
-  isRequired?: boolean
-  defaultValue?: string
-  size?: InputSize
+export namespace RadioGroup {
+  export interface Props
+    extends Omit<ComponentPropsWithRef<'fieldset'>, 'onChange'> {
+    items: InputItem[]
+    onChange: React.ChangeEventHandler<HTMLInputElement>
+    labelText: string
+    helperText?: string
+    errorMessage?: string
+    isInvalid?: boolean
+    isRequired?: boolean
+    defaultValue?: string
+    size?: InputSize
+  }
 }
 
-export const RadioGroup = React.forwardRef<
-  HTMLFieldSetElement,
-  RadioGroupProps
->((props, ref) => {
+export const RadioGroup = (props: RadioGroup.Props) => {
   const {
     items,
     onChange,
@@ -43,7 +42,6 @@ export const RadioGroup = React.forwardRef<
       errorMessage={errorMessage}
       isInvalid={isInvalid}
       isRequired={isRequired}
-      ref={ref}
       {...restProps}
     >
       {items.map(({ label, value }) => {
@@ -61,6 +59,6 @@ export const RadioGroup = React.forwardRef<
       })}
     </FieldsetControl>
   )
-})
+}
 
 RadioGroup.displayName = 'RadioGroup'

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

@@ -1,8 +1,8 @@
-export { Checkbox, type CheckboxProps } from './Checkbox'
-export { Radio, type RadioProps } from './Radio'
-export { Select, type SelectProps } from './Select'
-export { FileInput, type FileInputProps } from './FileInput'
-export { Input, type InputProps } from './Input'
-export { Textarea, type TextareaProps } from './Textarea'
-export { LabelControl, type LabelControlProps } from './LabelControl'
-export { FieldsetControl, type FieldsetControlProps } from './FieldsetControl'
+export { Checkbox } from './Checkbox'
+export { Radio } from './Radio'
+export { Select } from './Select'
+export { FileInput } from './FileInput'
+export { Input } from './Input'
+export { Textarea } from './Textarea'
+export { LabelControl } from './LabelControl'
+export { FieldsetControl } from './FieldsetControl'

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

@@ -1,18 +1,17 @@
+import { Style } from '@sakura-ui/helper'
+
 export type InputSize = 'lg' | 'md' | 'sm'
 
 export const borderedInputBaseStyles = `
   bg-white
   border
   border-solid
-  border-sumi-900
-  outline-offset-2
-  focus:outline
-  focus:outline-2
-  focus:outline-wood-500
+  border-solid-gray-900
   disabled:bg-transparent
-  disabled:text-sumi-500
-  disabled:border-sumi-500
-  aria-invalid:border-sun-800
+  disabled:text-solid-gray-500
+  disabled:border-solid-gray-500
+  aria-invalid:border-red-800
+  ${Style.focusRect}
 `
 
 // for text input and select

package/packages/forms/src/index.ts

@@ -9,15 +9,4 @@ export {
   FieldsetControl
 } from './components'
 
-export type {
-  CheckboxProps,
-  RadioProps,
-  SelectProps,
-  FileInputProps,
-  InputProps,
-  TextareaProps,
-  LabelControlProps,
-  FieldsetControlProps
-} from './components'
-
 export { CheckboxGroup, RadioGroup } from './components/controlled'

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

@@ -0,0 +1,44 @@
+import React from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+import { Checkbox } from '../src'
+
+describe('Checkbox', () => {
+  it('should render a checkbox with a label text', async () => {
+    render(<Checkbox>test</Checkbox>)
+
+    const checkbox = screen.getByRole('checkbox')
+
+    expect(checkbox).toBeInTheDocument()
+
+    expect(screen.getByText('test')).toBeInTheDocument()
+  })
+
+  it('should render two checkbox with verify checked states', async () => {
+    render(
+      <>
+        <Checkbox id="test" value="test1" data-testid="checked" checked />
+        <Checkbox id="test" value="test2" data-testid="not_checked" />
+      </>
+    )
+
+    const checked = screen.getByTestId('checked')
+
+    expect(checked).toBeInTheDocument()
+    expect(checked).toBeChecked()
+
+    const notChecked = screen.getByTestId('not_checked')
+
+    expect(notChecked).toBeInTheDocument()
+    expect(notChecked).not.toBeChecked()
+  })
+
+  it('should pass an object to the ref property', async () => {
+    const ref = vi.fn()
+
+    render(<Checkbox ref={ref}>test</Checkbox>)
+
+    expect(ref).toHaveBeenCalledTimes(1)
+  })
+})