@sakura-ui/sakura-ui 0.2.0 → 0.4.1

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

@@ -1,11 +1,11 @@
 import React from 'react'
-import { describe, test, expect } from 'vitest'
+import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 
-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,61 @@ 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',
+      screen.getByText('helper').id
+    )
+    expect(input).toHaveAttribute(
+      'aria-errormessage',
+      screen.getByText('error').id
+    )
+
+    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 +78,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 React from 'react'
-import { describe, test, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
 
-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,68 @@
 import React from 'react'
-import { describe, test, expect } from 'vitest'
+import { describe, test, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 
-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',
+      screen.getByText('helper').id
+    )
+    expect(input).toHaveAttribute(
+      'aria-errormessage',
+      screen.getByText('error').id
+    )
+
+    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 +72,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 +114,9 @@ describe('LabelControl', () => {
           <Input defaultValue="1" />
         </LabelControl>
         <LabelControl labelText="test3">
+          <FileInput />
+        </LabelControl>
+        <LabelControl labelText="test4">
           <Textarea defaultValue="1" />
         </LabelControl>
       </>
@@ -75,7 +132,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 +154,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 +172,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 React from 'react'
-import { describe, test, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
 
-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)
   })
 })

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

@@ -0,0 +1,30 @@
+import React from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+import { Select } from '../src'
+
+describe('Select', () => {
+  it('should render a select with a value text', async () => {
+    render(
+      <Select value="dog">
+        <option value="cat">Cat</option>
+        <option value="dog">Dog</option>
+      </Select>
+    )
+
+    const select = screen.getByRole('combobox')
+
+    expect(select).toBeInTheDocument()
+
+    expect(screen.getByDisplayValue('Dog')).toBeInTheDocument()
+  })
+
+  it('should pass an object to the ref property', async () => {
+    const ref = vi.fn()
+
+    render(<Select ref={ref} />)
+
+    expect(ref).toHaveBeenCalledTimes(1)
+  })
+})

package/packages/forms/tests/Textarea.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 { Textarea } from '../src'
+
+describe('Textarea', () => {
+  it('should render a textarea with a value text', async () => {
+    render(<Textarea value="test" />)
+
+    const input = screen.getByRole('textbox')
+
+    expect(input).toBeInTheDocument()
+
+    expect(screen.getByDisplayValue('test')).toBeInTheDocument()
+  })
+
+  it('should pass an object to the ref property', async () => {
+    const ref = vi.fn()
+
+    render(<Textarea ref={ref} />)
+
+    expect(ref).toHaveBeenCalledTimes(1)
+  })
+})

package/packages/forms/tests/vitest.setup.ts

@@ -1 +1,2 @@
+/// <reference types="vitest" />
 import '@testing-library/jest-dom'

package/packages/forms/tsconfig.node.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
-    "composite": true
+    "composite": true,
+    "resolveJsonModule": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "package.json"]
 }

package/packages/forms/vite.config.ts

@@ -3,10 +3,11 @@ import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 import { peerDependencies } from './package.json'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   resolve: {
     alias: {
       '@': resolve(__dirname, 'src')

package/packages/helper/.turbo/turbo-build.log

@@ -0,0 +1,12 @@
+$ rimraf dist
+$ run-p build:*
+$ vite build
+$ tsc && tsc-alias
+vite v7.3.6 building client environment for production...
+transforming...
+✓ 6 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/index.es.js  2.90 kB │ gzip: 1.00 kB
+dist/index.cjs.js  2.72 kB │ gzip: 0.99 kB
+✓ built in 303ms