@sakura-ui/sakura-ui 0.0.15 → 0.1.0

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()
+  })
+})

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

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { LabelControl } from '../src'
+
+describe('LabelControl', () => {
+  test('renders LabelControl component vol1', async () => {
+    render(<LabelControl labelText="test" data-testid="label" />)
+
+    const elem = screen.getByTestId('label')
+
+    expect(elem).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 () => {
+    render(
+      <LabelControl
+        labelText="test"
+        helperText="helper"
+        errorMessage="error"
+        isInvalid
+      />
+    )
+
+    expect(screen.getByText('helper')).toBeInTheDocument()
+    expect(screen.getByText('error')).toBeInTheDocument()
+  })
+
+  test('renders LabelControl component vol4', async () => {
+    render(<LabelControl labelText="test" />)
+
+    expect(screen.queryByText('*')).toBeNull()
+
+    render(<LabelControl labelText="test" isRequired />)
+
+    expect(screen.getByText('*')).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,99 @@
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { FieldsetControl, 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:')
+  })
+
+  test('renders Text component vol3', async () => {
+    render(
+      <FieldsetControl labelText="test">
+        <Radio />
+      </FieldsetControl>
+    )
+
+    const elem = screen.getByRole('radio')
+
+    expect(elem).toBeInTheDocument()
+
+    expect(elem).toBeValid()
+    expect(elem).toHaveAttribute('aria-invalid', 'false')
+  })
+
+  test('renders Text component vol4', async () => {
+    render(
+      <FieldsetControl labelText="test" isInvalid>
+        <Radio />
+      </FieldsetControl>
+    )
+
+    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 elem = screen.getByRole('radio')
+
+    expect(elem).toBeInTheDocument()
+
+    expect(elem).toBeValid()
+    expect(elem).toBeRequired()
+  })
+
+  test('renders Text component vol6', async () => {
+    render(
+      <FieldsetControl labelText="test" isRequired>
+        <Radio />
+      </FieldsetControl>
+    )
+
+    const elem = screen.getByRole('radio')
+
+    expect(elem).toBeInTheDocument()
+
+    expect(elem).toBeInvalid()
+    expect(elem).toBeRequired()
+  })
+})

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

@@ -0,0 +1,96 @@
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { LabelControl, Text } from '../src'
+
+describe('should derive values from surrounding LabelControl', () => {
+  test('renders Text component vol1', async () => {
+    render(
+      <LabelControl labelText="test">
+        <Text />
+      </LabelControl>
+    )
+
+    const text = screen.getByLabelText(/test/)
+
+    expect(text).toBeInTheDocument()
+  })
+
+  test('renders Text component vol2', async () => {
+    render(
+      <LabelControl labelText="test" helperText="helper" errorMessage="error">
+        <Text />
+      </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">
+        <Text />
+      </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>
+        <Text />
+      </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>
+        <Text defaultValue="test value" />
+      </LabelControl>
+    )
+
+    screen.getByLabelText
+    const text = screen.getByLabelText(/test/)
+
+    expect(text).toBeInTheDocument()
+
+    expect(text).toBeValid()
+    expect(text).toBeRequired()
+  })
+
+  test('renders Text component vol6', async () => {
+    render(
+      <LabelControl labelText="test" isRequired>
+        <Text />
+      </LabelControl>
+    )
+
+    const text = screen.getByLabelText(/test/)
+
+    expect(text).toBeInTheDocument()
+
+    expect(text).toBeInvalid()
+    expect(text).toBeRequired()
+  })
+})

package/packages/forms/tsconfig.json

@@ -1,22 +1,6 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "outDir": "dist",
-    "declaration": true,
-    "declarationMap": true,
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]

package/packages/forms/dist/components/Checkbox.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export interface CheckboxProps extends React.ComponentProps<'input'> {
-}
-export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=Checkbox.d.ts.map

package/packages/forms/dist/components/Checkbox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;CAAG;AAEvE,eAAO,MAAM,QAAQ,qGA8CpB,CAAA"}

package/packages/forms/dist/components/CheckboxGroup.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { InputItem } from './InputItem';
-export interface CheckboxGroupProps extends Omit<React.ComponentProps<'fieldset'>, 'onChange'> {
-    items: InputItem[];
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
-    label?: string;
-}
-export declare const CheckboxGroup: (props: CheckboxGroupProps) => JSX.Element;
-//# sourceMappingURL=CheckboxGroup.d.ts.map

package/packages/forms/dist/components/CheckboxGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,UAAU,CAAC;IAC1D,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAA;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,aAAa,UAAW,kBAAkB,gBAuBtD,CAAA"}

package/packages/forms/dist/components/InputItem.d.ts

@@ -1,5 +0,0 @@
-export interface InputItem {
-    label: string;
-    value: string;
-}
-//# sourceMappingURL=InputItem.d.ts.map

package/packages/forms/dist/components/InputItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InputItem.d.ts","sourceRoot":"","sources":["../../src/components/InputItem.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd"}

package/packages/forms/dist/components/Radio.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export interface Props extends React.ComponentProps<'input'> {
-}
-export declare const Radio: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=Radio.d.ts.map

package/packages/forms/dist/components/Radio.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;CAAG;AAE/D,eAAO,MAAM,KAAK,6FAoChB,CAAA"}

package/packages/forms/dist/components/RadioGroup.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { InputItem } from './InputItem';
-export interface RadioGroupProps extends Omit<React.ComponentProps<'fieldset'>, 'onChange'> {
-    items: InputItem[];
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
-    label?: string;
-}
-export declare const RadioGroup: (props: RadioGroupProps) => JSX.Element;
-//# sourceMappingURL=RadioGroup.d.ts.map

package/packages/forms/dist/components/RadioGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,UAAU,CAAC;IAC1D,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAA;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,UAAU,UAAW,eAAe,gBAwBhD,CAAA"}

package/packages/forms/dist/components/Select.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface SelectProps extends React.ComponentPropsWithoutRef<'select'> {
-    label?: string;
-}
-export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
-//# sourceMappingURL=Select.d.ts.map

package/packages/forms/dist/components/Select.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,MAAM,uFAkDlB,CAAA"}

package/packages/forms/dist/components/Text.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface TextProps extends React.ComponentPropsWithoutRef<'input'> {
-    label?: string;
-}
-export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=Text.d.ts.map

package/packages/forms/dist/components/Text.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/components/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;IACxE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,IAAI,oFA0ChB,CAAA"}

package/packages/forms/dist/components/Textarea.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface TextareaProps extends React.ComponentPropsWithoutRef<'textarea'> {
-    label?: string;
-}
-export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-//# sourceMappingURL=Textarea.d.ts.map

package/packages/forms/dist/components/Textarea.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,QAAQ,2FAuCpB,CAAA"}

package/packages/forms/dist/components/index.d.ts

@@ -1,8 +0,0 @@
-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';
-//# sourceMappingURL=index.d.ts.map

package/packages/forms/dist/components/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/packages/forms/dist/index.d.ts

@@ -1,2 +0,0 @@
-export { Checkbox, CheckboxGroup, Radio, RadioGroup, Select, Text, Textarea } from './components';
-//# sourceMappingURL=index.d.ts.map

package/packages/forms/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,aAAa,EACb,KAAK,EACL,UAAU,EACV,MAAM,EACN,IAAI,EACJ,QAAQ,EACT,MAAM,cAAc,CAAA"}

package/packages/forms/dist/utils/index.d.ts

@@ -1,2 +0,0 @@
-export declare const cx: (...classNames: any[]) => string;
-//# sourceMappingURL=index.d.ts.map

package/packages/forms/dist/utils/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,EAAE,kBAAmB,GAAG,EAAE,WAAyC,CAAA"}

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

@@ -1,35 +0,0 @@
-import React from 'react'
-import { Checkbox } from './Checkbox'
-import { InputItem } from './InputItem'
-
-export interface CheckboxGroupProps
-  extends Omit<React.ComponentProps<'fieldset'>, 'onChange'> {
-  items: InputItem[]
-  onChange: React.ChangeEventHandler<HTMLInputElement>
-  label?: string
-}
-
-export const CheckboxGroup = (props: CheckboxGroupProps) => {
-  const { items, onChange, label, className, children, ...newProps } = props
-  const groupName = 'checkbox group ' + Math.random() * 100000
-
-  return (
-    <fieldset {...newProps}>
-      {label && <legend>{label}</legend>}
-      {items.map(({ label, value }, index) => {
-        return (
-          <div key={index}>
-            <Checkbox
-              className=""
-              name={groupName}
-              value={value}
-              onChange={onChange}
-            >
-              {label}
-            </Checkbox>
-          </div>
-        )
-      })}
-    </fieldset>
-  )
-}

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

@@ -1,36 +0,0 @@
-import React from 'react'
-import { Radio } from './Radio'
-import { InputItem } from './InputItem'
-
-export interface RadioGroupProps
-  extends Omit<React.ComponentProps<'fieldset'>, 'onChange'> {
-  items: InputItem[]
-  onChange: React.ChangeEventHandler<HTMLInputElement>
-  label?: string
-}
-
-export const RadioGroup = (props: RadioGroupProps) => {
-  const { items, onChange, label, className, children, ...newProps } = props
-  const groupName = 'radio group ' + Math.random() * 100000
-
-  return (
-    <fieldset {...newProps}>
-      {label && <legend>{label}</legend>}
-      {items.map(({ label, value }, index) => {
-        return (
-          <div key={index}>
-            <Radio
-              className=""
-              name={groupName}
-              value={value}
-              onChange={onChange}
-              defaultChecked={index === 0}
-            >
-              {label}
-            </Radio>
-          </div>
-        )
-      })}
-    </fieldset>
-  )
-}

package/packages/forms/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/packages/react/tsconfig.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "outDir": "dist",
-    "declaration": true,
-    "declarationMap": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}