@sakura-ui/sakura-ui 0.1.21 → 0.3.0

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

@@ -0,0 +1,82 @@
+import { Style } from '@sakura-ui/helper'
+
+export type InputSize = 'lg' | 'md' | 'sm'
+
+export const borderedInputBaseStyles = `
+  bg-white
+  border
+  border-solid
+  border-solid-gray-900
+  disabled:bg-transparent
+  disabled:text-solid-gray-500
+  disabled:border-solid-gray-500
+  aria-invalid:border-red-800
+  ${Style.focusRect}
+`
+
+// for text input and select
+export const borderedInputSizeStyles: { [key in InputSize]: string } = {
+  // 16(p-4) * 2 + 22(text-label * leading-snug) + boader * 2 = 56px
+  lg: `
+    p-4
+    text-label
+    rounded-lg
+    leading-snug
+  `,
+  // 12(py-3) * 2 + 22(text-label * leading-snug) + boader * 2 = 48px
+  md: `
+    px-4
+    py-3
+    text-label
+    rounded-lg
+    leading-snug
+  `,
+  // 8(py-2) * 2 + 22(text-label * leading-snug) + boader * 2 = 40px
+  sm: `
+    px-3
+    py-2
+    text-label
+    rounded-md
+    leading-snug
+  `
+}
+
+export const borderlessInputBaseStyles = `
+  inline-block
+  cursor-pointer
+  border
+  border-solid
+  border-transparent
+`
+
+// for radio and checkbox
+export const borderlessInputSizeStyles: { [key in InputSize]: string } = {
+  // 16(p-4) * 2 + 22(text-label * leading-snug) + boader(transparent) * 2 = 56px
+  lg: `
+    pr-8
+    py-4
+    text-label
+    leading-snug
+  `,
+  // 12(py-3) * 2 + 22(text-label * leading-snug) + boader(transparent) * 2 = 48px
+  md: `
+    pr-6
+    py-3
+    text-label
+    leading-snug
+  `,
+  // 8(py-2) * 2 + 22(text-label * leading-snug) + boader(transparent) * 2 = 40px
+  sm: `
+    pr-4
+    py-2
+    text-label
+    leading-snug
+  `
+}
+
+// for radio and checkbox
+export const iconStyles: { [key in InputSize]: string } = {
+  lg: 'w-[22px] h-[22px] mr-2',
+  md: 'w-[18px] h-[18px] mr-1.5',
+  sm: 'w-[18px] h-[18px] mr-1'
+}

package/packages/forms/src/index.ts

@@ -9,20 +9,4 @@ export {
   FieldsetControl
 } from './components'
 
-export type {
-  CheckboxProps,
-  RadioProps,
-  SelectProps,
-  FileInputProps,
-  InputProps,
-  TextareaProps,
-  LabelControlProps,
-  FieldsetControlProps
-} from './components'
-
-export {
-  CheckboxGroup,
-  RadioGroup,
-  SelectControl,
-  TextareaControl
-} from './components/controlled'
+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)
+  })
+})

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

@@ -1,11 +1,11 @@
-import * as React from 'react'
+import React from 'react'
+import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
 
-import { FieldsetControl } from '../src'
+import { FieldsetControl, Input } from '../src'
 
 describe('FieldsetControl', () => {
-  test('renders FieldsetControl component vol1', async () => {
+  it('should render a fieldset with a label text', async () => {
     render(<FieldsetControl labelText="test" />)
 
     const fieldset = screen.getByRole('group')
@@ -15,34 +15,55 @@ describe('FieldsetControl', () => {
     expect(screen.getByText('test')).toBeInTheDocument()
   })
 
-  test('renders FieldsetControl component vol2', async () => {
+  it('should render a fieldset with a helper text and error text', async () => {
     render(
       <FieldsetControl
         labelText="test"
         helperText="helper"
         errorMessage="error"
-      />
+        isInvalid
+      >
+        <Input />
+      </FieldsetControl>
     )
 
     expect(screen.getByText('helper')).toBeInTheDocument()
-    expect(screen.queryByText('error')).toBeNull()
+    expect(screen.getByText('error')).toBeInTheDocument()
+
+    const input = screen.getByRole('textbox')
+
+    expect(input).toBeInTheDocument()
+
+    expect(input).toHaveAttribute('aria-describedby', 'helper-text-:r1:')
+    expect(input).toHaveAttribute('aria-errormessage', 'error-message-:r1:')
+
+    expect(input).toBeInvalid()
+    expect(input).toHaveAttribute('aria-invalid', 'true')
   })
 
-  test('renders FieldsetControl component vol3', async () => {
+  it('should render a fieldset with a helper text', async () => {
     render(
       <FieldsetControl
         labelText="test"
         helperText="helper"
         errorMessage="error"
-        isInvalid
-      />
+      >
+        <Input />
+      </FieldsetControl>
     )
 
     expect(screen.getByText('helper')).toBeInTheDocument()
-    expect(screen.getByText('error')).toBeInTheDocument()
+    expect(screen.queryByText('error')).toBeNull()
+
+    const input = screen.getByRole('textbox')
+
+    expect(input).toBeInTheDocument()
+
+    expect(input).toBeValid()
+    expect(input).toHaveAttribute('aria-invalid', 'false')
   })
 
-  test('renders FieldsetControl component vol4', async () => {
+  it('should display an asterisk only when isRequired prop is true', async () => {
     render(<FieldsetControl labelText="test" />)
 
     expect(screen.queryByText('*')).toBeNull()
@@ -51,4 +72,34 @@ describe('FieldsetControl', () => {
 
     expect(screen.getByText('*')).toBeInTheDocument()
   })
+
+  it('should render an input with required attribute and correct label text', async () => {
+    render(
+      <FieldsetControl labelText="test" isRequired>
+        <Input defaultValue="test value" />
+      </FieldsetControl>
+    )
+
+    const input = screen.getByRole('textbox')
+
+    expect(input).toBeInTheDocument()
+
+    expect(input).toBeValid()
+    expect(input).toBeRequired()
+  })
+
+  it('should render an input as invalid when required but has no value', async () => {
+    render(
+      <FieldsetControl labelText="test" isRequired>
+        <Input />
+      </FieldsetControl>
+    )
+
+    const input = screen.getByRole('textbox')
+
+    expect(input).toBeInTheDocument()
+
+    expect(input).toBeInvalid()
+    expect(input).toBeRequired()
+  })
 })

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+import { FileInput } from '../src'
+
+describe('FileInput', () => {
+  it('should render a file input with a label text', async () => {
+    render(<FileInput />)
+
+    const input = screen.getByRole('button')
+
+    expect(input).toBeInTheDocument()
+
+    expect(screen.getByLabelText('File Upload')).toBeInTheDocument()
+  })
+
+  it('should pass an object to the ref property', async () => {
+    const ref = vi.fn()
+
+    render(<FileInput ref={ref} />)
+
+    expect(ref).toHaveBeenCalledTimes(1)
+  })
+})

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

@@ -1,96 +1,25 @@
-import * as React from 'react'
+import React from 'react'
+import { describe, it, expect, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
 
-import { LabelControl, Input } from '../src'
+import { Input } from '../src'
 
-describe('should derive values from surrounding LabelControl', () => {
-  test('renders Text component vol1', async () => {
-    render(
-      <LabelControl labelText="test">
-        <Input />
-      </LabelControl>
-    )
+describe('Input', () => {
+  it('should render a input with a value text', async () => {
+    render(<Input value="test" />)
 
-    const text = screen.getByLabelText(/test/)
+    const input = screen.getByRole('textbox')
 
-    expect(text).toBeInTheDocument()
-  })
-
-  test('renders Text component vol2', async () => {
-    render(
-      <LabelControl labelText="test" helperText="helper" errorMessage="error">
-        <Input />
-      </LabelControl>
-    )
-
-    const text = screen.getByLabelText(/test/)
-
-    expect(text).toBeInTheDocument()
-
-    expect(text).toHaveAttribute('aria-describedby', 'helper-text-:r1:')
-    expect(text).toHaveAttribute('aria-errormessage', 'error-message-:r1:')
-  })
-
-  test('renders Text component vol3', async () => {
-    render(
-      <LabelControl labelText="test">
-        <Input />
-      </LabelControl>
-    )
-
-    const text = screen.getByLabelText(/test/)
-
-    expect(text).toBeInTheDocument()
-
-    expect(text).toBeValid()
-    expect(text).toHaveAttribute('aria-invalid', 'false')
-  })
-
-  test('renders Text component vol4', async () => {
-    render(
-      <LabelControl labelText="test" isInvalid>
-        <Input />
-      </LabelControl>
-    )
-
-    const text = screen.getByLabelText(/test/)
-
-    expect(text).toBeInTheDocument()
-
-    expect(text).toBeInvalid()
-    expect(text).toHaveAttribute('aria-invalid', 'true')
-    expect(text).not.toBeRequired()
-  })
-
-  test('renders Text component vol5', async () => {
-    render(
-      <LabelControl labelText="test" isRequired>
-        <Input defaultValue="test value" />
-      </LabelControl>
-    )
-
-    screen.getByLabelText
-    const text = screen.getByLabelText(/test/)
+    expect(input).toBeInTheDocument()
 
-    expect(text).toBeInTheDocument()
-
-    expect(text).toBeValid()
-    expect(text).toBeRequired()
+    expect(screen.getByDisplayValue('test')).toBeInTheDocument()
   })
 
-  test('renders Text component vol6', async () => {
-    render(
-      <LabelControl labelText="test" isRequired>
-        <Input />
-      </LabelControl>
-    )
-
-    const text = screen.getByLabelText(/test/)
+  it('should pass an object to the ref property', async () => {
+    const ref = vi.fn()
 
-    expect(text).toBeInTheDocument()
+    render(<Input ref={ref} />)
 
-    expect(text).toBeInvalid()
-    expect(text).toBeRequired()
+    expect(ref).toHaveBeenCalledTimes(1)
   })
 })

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

@@ -1,44 +1,62 @@
-import * as React from 'react'
+import React from 'react'
+import { describe, test, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
 
-import { LabelControl, Select, Input, Textarea } from '../src'
+import { LabelControl, Select, Input, Textarea, FileInput } from '../src'
 
 describe('LabelControl', () => {
-  test('renders LabelControl component vol1', async () => {
+  it('should render a label with a label text', async () => {
     render(<LabelControl labelText="test" data-testid="label" />)
 
-    const elem = screen.getByTestId('label')
+    const label = screen.getByTestId('label')
 
-    expect(elem).toBeInTheDocument()
+    expect(label).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 () => {
+  it('should render a fieldset with a helper text and error text', async () => {
     render(
       <LabelControl
         labelText="test"
         helperText="helper"
         errorMessage="error"
         isInvalid
-      />
+      >
+        <Input />
+      </LabelControl>
     )
 
     expect(screen.getByText('helper')).toBeInTheDocument()
     expect(screen.getByText('error')).toBeInTheDocument()
+
+    const input = screen.getByLabelText(/test/)
+
+    expect(input).toBeInTheDocument()
+
+    expect(input).toHaveAttribute('aria-describedby', 'helper-text-:r1:')
+    expect(input).toHaveAttribute('aria-errormessage', 'error-message-:r1:')
+
+    expect(input).toBeInvalid()
+    expect(input).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('should render a fieldset with a helper text', async () => {
+    render(
+      <LabelControl labelText="test">
+        <Input />
+      </LabelControl>
+    )
+
+    const input = screen.getByLabelText(/test/)
+
+    expect(input).toBeInTheDocument()
+
+    expect(input).toBeValid()
+    expect(input).toHaveAttribute('aria-invalid', 'false')
   })
 
-  test('renders LabelControl component vol4', async () => {
+  it('should display an asterisk only when isRequired prop is true', async () => {
     render(<LabelControl labelText="test" />)
 
     expect(screen.queryByText('*')).toBeNull()
@@ -48,6 +66,36 @@ describe('LabelControl', () => {
     expect(screen.getByText('*')).toBeInTheDocument()
   })
 
+  it('should render an input with required attribute and correct label text', async () => {
+    render(
+      <LabelControl labelText="test" isRequired>
+        <Input defaultValue="test value" />
+      </LabelControl>
+    )
+
+    const input = screen.getByLabelText(/test/)
+
+    expect(input).toBeInTheDocument()
+
+    expect(input).toBeValid()
+    expect(input).toBeRequired()
+  })
+
+  it('should render an input as invalid when required but has no value', async () => {
+    render(
+      <LabelControl labelText="test" isRequired>
+        <Input />
+      </LabelControl>
+    )
+
+    const input = screen.getByLabelText(/test/)
+
+    expect(input).toBeInTheDocument()
+
+    expect(input).toBeInvalid()
+    expect(input).toBeRequired()
+  })
+
   test('Test the relationship between the label and input elements.', async () => {
     render(
       <>
@@ -60,6 +108,9 @@ describe('LabelControl', () => {
           <Input defaultValue="1" />
         </LabelControl>
         <LabelControl labelText="test3">
+          <FileInput />
+        </LabelControl>
+        <LabelControl labelText="test4">
           <Textarea defaultValue="1" />
         </LabelControl>
       </>
@@ -75,7 +126,11 @@ describe('LabelControl', () => {
     expect(text).toHaveValue('1')
     expect(text).toHaveAttribute('id')
 
-    const textarea = screen.getByLabelText(/test3/)
+    const file = screen.getByLabelText(/test3/)
+    expect(file).toBeInTheDocument()
+    expect(file).toHaveAttribute('id')
+
+    const textarea = screen.getByLabelText(/test4/)
     expect(textarea).toBeInTheDocument()
     expect(textarea).toHaveValue('1')
     expect(textarea).toHaveAttribute('id')
@@ -93,6 +148,9 @@ describe('LabelControl', () => {
           <Input defaultValue="1" />
         </LabelControl>
         <LabelControl labelText="test3" htmlFor="id3">
+          <FileInput />
+        </LabelControl>
+        <LabelControl labelText="test4" htmlFor="id4">
           <Textarea defaultValue="1" />
         </LabelControl>
       </>
@@ -108,9 +166,13 @@ describe('LabelControl', () => {
     expect(input).toHaveValue('1')
     expect(input).toHaveAttribute('id', 'id2')
 
-    const textarea = screen.getByLabelText(/test3/)
+    const file = screen.getByLabelText(/test3/)
+    expect(file).toBeInTheDocument()
+    expect(file).toHaveAttribute('id', 'id3')
+
+    const textarea = screen.getByLabelText(/test4/)
     expect(textarea).toBeInTheDocument()
     expect(textarea).toHaveValue('1')
-    expect(textarea).toHaveAttribute('id', 'id3')
+    expect(textarea).toHaveAttribute('id', 'id4')
   })
 })

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

@@ -1,99 +1,44 @@
-import * as React from 'react'
+import React from 'react'
+import { describe, it, expect, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
 
-import { FieldsetControl, Radio } from '../src'
+import { 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:')
-  })
+describe('Radio', () => {
+  it('should render a radio with a value text', async () => {
+    render(<Radio id="test" value="test" />)
 
-  test('renders Text component vol3', async () => {
-    render(
-      <FieldsetControl labelText="test">
-        <Radio />
-      </FieldsetControl>
-    )
-
-    const elem = screen.getByRole('radio')
+    const radio = screen.getByRole('radio')
 
-    expect(elem).toBeInTheDocument()
+    expect(radio).toBeInTheDocument()
 
-    expect(elem).toBeValid()
-    expect(elem).toHaveAttribute('aria-invalid', 'false')
+    expect(screen.getByDisplayValue('test')).toBeInTheDocument()
   })
 
-  test('renders Text component vol4', async () => {
+  it('should render two radios with verify checked states', async () => {
     render(
-      <FieldsetControl labelText="test" isInvalid>
-        <Radio />
-      </FieldsetControl>
+      <>
+        <Radio id="test" value="test1" data-testid="checked" checked />
+        <Radio id="test" value="test2" data-testid="not_checked" />
+      </>
     )
 
-    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 checked = screen.getByTestId('checked')
 
-    const elem = screen.getByRole('radio')
+    expect(checked).toBeInTheDocument()
+    expect(checked).toBeChecked()
 
-    expect(elem).toBeInTheDocument()
+    const notChecked = screen.getByTestId('not_checked')
 
-    expect(elem).toBeValid()
-    expect(elem).toBeRequired()
+    expect(notChecked).toBeInTheDocument()
+    expect(notChecked).not.toBeChecked()
   })
 
-  test('renders Text component vol6', async () => {
-    render(
-      <FieldsetControl labelText="test" isRequired>
-        <Radio />
-      </FieldsetControl>
-    )
-
-    const elem = screen.getByRole('radio')
+  it('should pass an object to the ref property', async () => {
+    const ref = vi.fn()
 
-    expect(elem).toBeInTheDocument()
+    render(<Radio ref={ref} />)
 
-    expect(elem).toBeInvalid()
-    expect(elem).toBeRequired()
+    expect(ref).toHaveBeenCalledTimes(1)
   })
 })