@sakura-ui/sakura-ui 0.1.6 → 0.1.8

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { cx } from '../utils/class'
 import { ControllerContext } from './context'
 
-export interface Props extends React.ComponentPropsWithoutRef<'input'> {}
+export interface Props extends React.ComponentProps<'input'> {}
 
 export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
   const { className, children, ...newProps } = props
@@ -16,7 +16,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
 
   const style = `
     inline-block
-    text-sm
+    text-base
     cursor-pointer
     py-2
     mr-4
@@ -58,4 +58,4 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
       </span>
     </label>
   )
-})
+}) as React.ElementType

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { cx } from '../utils/class'
 import { ControllerContext } from './context'
 
-export interface SelectProps extends React.ComponentPropsWithoutRef<'select'> {}
+export interface SelectProps extends React.ComponentProps<'select'> {}
 
 export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
   (props, ref) => {
@@ -62,4 +62,4 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
       </label>
     )
   }
-)
+) as React.ElementType

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

@@ -2,8 +2,7 @@ import React from 'react'
 import { cx } from '../utils/class'
 import { ControllerContext } from './context'
 
-export interface TextareaProps
-  extends React.ComponentPropsWithoutRef<'textarea'> {}
+export interface TextareaProps extends React.ComponentProps<'textarea'> {}
 
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (props, ref) => {
@@ -43,4 +42,4 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       </textarea>
     )
   }
-)
+) as React.ElementType

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

@@ -4,7 +4,7 @@ import { FieldsetControl } from '../FieldsetControl'
 import { InputItem } from './InputItem'
 
 export interface CheckboxGroupProps
-  extends Omit<React.ComponentPropsWithoutRef<'fieldset'>, 'onChange'> {
+  extends Omit<React.ComponentProps<'fieldset'>, 'onChange'> {
   items: InputItem[]
   onChange: React.ChangeEventHandler<HTMLInputElement>
   labelText: string
@@ -50,4 +50,4 @@ export const CheckboxGroup = React.forwardRef<
       })}
     </FieldsetControl>
   )
-})
+}) as React.ElementType

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

@@ -0,0 +1,39 @@
+import React from 'react'
+import { LabelControl } from '../LabelControl'
+import { Input } from '../Input'
+
+export interface InputControlProps extends React.ComponentProps<'input'> {
+  labelText: string
+  helperText?: string
+  errorMessage?: string
+  isInvalid?: boolean
+  isRequired?: boolean
+}
+
+export const InputControl = React.forwardRef<
+  HTMLInputElement,
+  InputControlProps
+>((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}
+    >
+      <Input ref={ref} {...restProps} />
+    </LabelControl>
+  )
+}) as React.ElementType

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

@@ -4,7 +4,7 @@ import { FieldsetControl } from '../FieldsetControl'
 import { InputItem } from './InputItem'
 
 export interface RadioGroupProps
-  extends Omit<React.ComponentPropsWithoutRef<'fieldset'>, 'onChange'> {
+  extends Omit<React.ComponentProps<'fieldset'>, 'onChange'> {
   items: InputItem[]
   onChange: React.ChangeEventHandler<HTMLInputElement>
   labelText: string
@@ -57,4 +57,4 @@ export const RadioGroup = React.forwardRef<
       })}
     </FieldsetControl>
   )
-})
+}) as React.ElementType

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

@@ -2,8 +2,7 @@ import React from 'react'
 import { LabelControl } from '../LabelControl'
 import { Select } from '../Select'
 
-export interface SelectControlProps
-  extends React.ComponentPropsWithoutRef<'select'> {
+export interface SelectControlProps extends React.ComponentProps<'select'> {
   labelText: string
   helperText?: string
   errorMessage?: string
@@ -37,4 +36,4 @@ export const SelectControl = React.forwardRef<
       <Select ref={ref} {...restProps} />
     </LabelControl>
   )
-})
+}) as React.ElementType

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

@@ -2,8 +2,7 @@ import React from 'react'
 import { LabelControl } from '../LabelControl'
 import { Textarea } from '../Textarea'
 
-export interface TextareaControlProps
-  extends React.ComponentPropsWithoutRef<'textarea'> {
+export interface TextareaControlProps extends React.ComponentProps<'textarea'> {
   labelText: string
   helperText?: string
   errorMessage?: string
@@ -37,4 +36,4 @@ export const TextareaControl = React.forwardRef<
       <Textarea ref={ref} {...restProps} />
     </LabelControl>
   )
-})
+}) as React.ElementType

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

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

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

@@ -1,7 +1,7 @@
 export { Checkbox } from './Checkbox'
 export { Radio } from './Radio'
 export { Select } from './Select'
-export { Text } from './Text'
+export { Input } from './Input'
 export { Textarea } from './Textarea'
 export { LabelControl } from './LabelControl'
 export { FieldsetControl } from './FieldsetControl'

package/packages/forms/src/index.ts

@@ -2,7 +2,7 @@ export {
   Checkbox,
   Radio,
   Select,
-  Text,
+  Input,
   Textarea,
   LabelControl,
   FieldsetControl
@@ -12,6 +12,6 @@ export {
   CheckboxGroup,
   RadioGroup,
   SelectControl,
-  TextControl,
+  InputControl,
   TextareaControl
 } from './components/controlled'

package/packages/forms/tests/{Text.test.tsx → Input.test.tsx}

@@ -2,13 +2,13 @@ import * as React from 'react'
 import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 
-import { LabelControl, Text } from '../src'
+import { LabelControl, Input } from '../src'
 
 describe('should derive values from surrounding LabelControl', () => {
   test('renders Text component vol1', async () => {
     render(
       <LabelControl labelText="test">
-        <Text />
+        <Input />
       </LabelControl>
     )
 
@@ -20,7 +20,7 @@ describe('should derive values from surrounding LabelControl', () => {
   test('renders Text component vol2', async () => {
     render(
       <LabelControl labelText="test" helperText="helper" errorMessage="error">
-        <Text />
+        <Input />
       </LabelControl>
     )
 
@@ -35,7 +35,7 @@ describe('should derive values from surrounding LabelControl', () => {
   test('renders Text component vol3', async () => {
     render(
       <LabelControl labelText="test">
-        <Text />
+        <Input />
       </LabelControl>
     )
 
@@ -50,7 +50,7 @@ describe('should derive values from surrounding LabelControl', () => {
   test('renders Text component vol4', async () => {
     render(
       <LabelControl labelText="test" isInvalid>
-        <Text />
+        <Input />
       </LabelControl>
     )
 
@@ -66,7 +66,7 @@ describe('should derive values from surrounding LabelControl', () => {
   test('renders Text component vol5', async () => {
     render(
       <LabelControl labelText="test" isRequired>
-        <Text defaultValue="test value" />
+        <Input defaultValue="test value" />
       </LabelControl>
     )
 
@@ -82,7 +82,7 @@ describe('should derive values from surrounding LabelControl', () => {
   test('renders Text component vol6', async () => {
     render(
       <LabelControl labelText="test" isRequired>
-        <Text />
+        <Input />
       </LabelControl>
     )
 

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

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 
-import { LabelControl, Select, Text, Textarea } from '../src'
+import { LabelControl, Select, Input, Textarea } from '../src'
 
 describe('LabelControl', () => {
   test('renders LabelControl component vol1', async () => {
@@ -57,7 +57,7 @@ describe('LabelControl', () => {
           </Select>
         </LabelControl>
         <LabelControl labelText="test2">
-          <Text defaultValue="1" />
+          <Input defaultValue="1" />
         </LabelControl>
         <LabelControl labelText="test3">
           <Textarea defaultValue="1" />
@@ -90,7 +90,7 @@ describe('LabelControl', () => {
           </Select>
         </LabelControl>
         <LabelControl labelText="test2" htmlFor="id2">
-          <Text defaultValue="1" />
+          <Input defaultValue="1" />
         </LabelControl>
         <LabelControl labelText="test3" htmlFor="id3">
           <Textarea defaultValue="1" />
@@ -103,10 +103,10 @@ describe('LabelControl', () => {
     expect(select).toHaveValue('1')
     expect(select).toHaveAttribute('id', 'id1')
 
-    const text = screen.getByLabelText(/test2/)
-    expect(text).toBeInTheDocument()
-    expect(text).toHaveValue('1')
-    expect(text).toHaveAttribute('id', 'id2')
+    const input = screen.getByLabelText(/test2/)
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveValue('1')
+    expect(input).toHaveAttribute('id', 'id2')
 
     const textarea = screen.getByLabelText(/test3/)
     expect(textarea).toBeInTheDocument()

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export interface TextProps extends React.ComponentPropsWithoutRef<'input'> {
-}
-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;AAIzB,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;CAAG;AAE7E,eAAO,MAAM,IAAI,oFAoChB,CAAA"}

package/packages/forms/dist/components/controlled/TextControl.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export interface TextControlProps extends React.ComponentPropsWithoutRef<'input'> {
-    labelText: string;
-    helperText?: string;
-    errorMessage?: string;
-    isInvalid?: boolean;
-    isRequired?: boolean;
-}
-export declare const TextControl: React.ForwardRefExoticComponent<TextControlProps & React.RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=TextControl.d.ts.map

package/packages/forms/dist/components/controlled/TextControl.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextControl.d.ts","sourceRoot":"","sources":["../../../src/components/controlled/TextControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC;IAC/C,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,WAAW,2FAyBvB,CAAA"}

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

@@ -1,39 +0,0 @@
-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>
-    )
-  }
-)