@ssa-ui-kit/core 0.0.16-alpha → 0.0.17-alpha

package/src/components/TextField/TextField.stories.tsx

@@ -1,221 +1,221 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useForm, FieldError, FieldValues } from 'react-hook-form';
-
-import TextField from '@components/TextField';
-import Icon from '@components/Icon';
-import Form from '@components/Form';
-import FormGroup from '@components/FormGroup';
-
-type Args = Parameters<typeof TextField>[0];
-
-export default {
-  title: 'Components/TextField',
-  component: TextField,
-  argTypes: {
-    validationSchema: {
-      control: {
-        disable: true,
-      },
-    },
-    register: {
-      control: {
-        disable: true,
-      },
-    },
-    setCountChar: {
-      control: {
-        disable: true,
-      },
-    },
-    endElement: {
-      control: {
-        disable: true,
-      },
-    },
-    type: {
-      description: 'input HTML valid type',
-    },
-  },
-  decorators: [
-    (Story) => (
-      <Form>
-        <FormGroup>{Story()}</FormGroup>
-      </Form>
-    ),
-  ],
-} as Meta<typeof TextField>;
-
-const mockError: FieldError = {
-  type: 'required',
-  message: 'Required field',
-};
-
-export const Basic: StoryObj<typeof TextField> = (args: Args) => {
-  const { register } = useForm<FieldValues>();
-
-  return <TextField {...args} register={register} />;
-};
-Basic.args = {
-  placeholder: 'Field',
-  label: 'Field',
-  name: 'field1',
-  validationSchema: {
-    required: 'Required',
-  },
-  helperText: 'some nice text',
-};
-
-export const WithError: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <TextField
-      placeholder="Field error"
-      label="Field"
-      name="field2"
-      register={register}
-      validationSchema={{
-        required: 'Required',
-      }}
-      errors={mockError}
-    />
-  );
-};
-WithError.args = {};
-
-export const WithSuccess: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <TextField
-      placeholder="Field success"
-      label="Field"
-      name="field3"
-      register={register}
-      validationSchema={{
-        required: 'Required',
-      }}
-      success={true}
-      helperText="some nice text"
-    />
-  );
-};
-WithSuccess.args = {};
-
-export const Disabled: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <TextField
-      placeholder="Field disabled"
-      label="Field"
-      name="field4"
-      register={register}
-      helperText="some nice text"
-      disabled={true}
-      endElement={<Icon name="visible" size={16} />}
-    />
-  );
-};
-Disabled.args = {};
-
-export const WithStatusDisabled: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <TextField
-      placeholder="Field success disabled"
-      label="Field"
-      name="field5"
-      register={register}
-      helperText="some nice text"
-      disabled={true}
-      success={true}
-    />
-  );
-};
-WithStatusDisabled.args = {};
-
-export const WithAction: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <TextField
-      type="password"
-      placeholder="Field"
-      label="Field"
-      name="field6"
-      register={register}
-      helperText="some nice text"
-      endElement={
-        <button onClick={() => console.log('calling action...')}>Action</button>
-      }
-    />
-  );
-};
-WithAction.args = {};
-
-export const MultilineSimple: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <TextField
-      multirow
-      rows={10}
-      placeholder="Textarea"
-      name="textarea"
-      register={register}
-    />
-  );
-};
-MultilineSimple.args = {};
-
-export const Multiline: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <TextField
-      multirow
-      maxLength={100}
-      label="Textarea"
-      placeholder="Textarea"
-      name="textarea"
-      helperText="some nice text"
-      register={register}
-    />
-  );
-};
-Multiline.args = {};
-
-export const MultilineDisabled: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <TextField
-      multirow
-      disabled
-      label="Textarea"
-      placeholder="Textarea"
-      name="textarea"
-      helperText="some nice text"
-      register={register}
-    />
-  );
-};
-MultilineDisabled.args = {};
-
-export const Focused: StoryObj<typeof TextField> = (args: Args) => {
-  const { register } = useForm<FieldValues>();
-
-  return <TextField {...args} register={register} />;
-};
-Focused.args = {
-  ...Basic.args,
-  label: 'Focused field',
-};
-
-Focused.parameters = {
-  pseudo: {
-    focus: true,
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { useForm, FieldError, FieldValues } from 'react-hook-form';
+
+import TextField from '@components/TextField';
+import Icon from '@components/Icon';
+import Form from '@components/Form';
+import FormGroup from '@components/FormGroup';
+
+type Args = Parameters<typeof TextField>[0];
+
+export default {
+  title: 'Components/TextField',
+  component: TextField,
+  argTypes: {
+    validationSchema: {
+      control: {
+        disable: true,
+      },
+    },
+    register: {
+      control: {
+        disable: true,
+      },
+    },
+    setCountChar: {
+      control: {
+        disable: true,
+      },
+    },
+    endElement: {
+      control: {
+        disable: true,
+      },
+    },
+    type: {
+      description: 'input HTML valid type',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Form>
+        <FormGroup>{Story()}</FormGroup>
+      </Form>
+    ),
+  ],
+} as Meta<typeof TextField>;
+
+const mockError: FieldError = {
+  type: 'required',
+  message: 'Required field',
+};
+
+export const Basic: StoryObj<typeof TextField> = (args: Args) => {
+  const { register } = useForm<FieldValues>();
+
+  return <TextField {...args} register={register} />;
+};
+Basic.args = {
+  placeholder: 'Field',
+  label: 'Field',
+  name: 'field1',
+  validationSchema: {
+    required: 'Required',
+  },
+  helperText: 'some nice text',
+};
+
+export const WithError: StoryObj<typeof TextField> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <TextField
+      placeholder="Field error"
+      label="Field"
+      name="field2"
+      register={register}
+      validationSchema={{
+        required: 'Required',
+      }}
+      errors={mockError}
+    />
+  );
+};
+WithError.args = {};
+
+export const WithSuccess: StoryObj<typeof TextField> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <TextField
+      placeholder="Field success"
+      label="Field"
+      name="field3"
+      register={register}
+      validationSchema={{
+        required: 'Required',
+      }}
+      success={true}
+      helperText="some nice text"
+    />
+  );
+};
+WithSuccess.args = {};
+
+export const Disabled: StoryObj<typeof TextField> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <TextField
+      placeholder="Field disabled"
+      label="Field"
+      name="field4"
+      register={register}
+      helperText="some nice text"
+      disabled={true}
+      endElement={<Icon name="visible" size={16} />}
+    />
+  );
+};
+Disabled.args = {};
+
+export const WithStatusDisabled: StoryObj<typeof TextField> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <TextField
+      placeholder="Field success disabled"
+      label="Field"
+      name="field5"
+      register={register}
+      helperText="some nice text"
+      disabled={true}
+      success={true}
+    />
+  );
+};
+WithStatusDisabled.args = {};
+
+export const WithAction: StoryObj<typeof TextField> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <TextField
+      type="password"
+      placeholder="Field"
+      label="Field"
+      name="field6"
+      register={register}
+      helperText="some nice text"
+      endElement={
+        <button onClick={() => console.log('calling action...')}>Action</button>
+      }
+    />
+  );
+};
+WithAction.args = {};
+
+export const MultilineSimple: StoryObj<typeof TextField> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <TextField
+      multirow
+      rows={10}
+      placeholder="Textarea"
+      name="textarea"
+      register={register}
+    />
+  );
+};
+MultilineSimple.args = {};
+
+export const Multiline: StoryObj<typeof TextField> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <TextField
+      multirow
+      maxLength={100}
+      label="Textarea"
+      placeholder="Textarea"
+      name="textarea"
+      helperText="some nice text"
+      register={register}
+    />
+  );
+};
+Multiline.args = {};
+
+export const MultilineDisabled: StoryObj<typeof TextField> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <TextField
+      multirow
+      disabled
+      label="Textarea"
+      placeholder="Textarea"
+      name="textarea"
+      helperText="some nice text"
+      register={register}
+    />
+  );
+};
+MultilineDisabled.args = {};
+
+export const Focused: StoryObj<typeof TextField> = (args: Args) => {
+  const { register } = useForm<FieldValues>();
+
+  return <TextField {...args} register={register} />;
+};
+Focused.args = {
+  ...Basic.args,
+  label: 'Focused field',
+};
+
+Focused.parameters = {
+  pseudo: {
+    focus: true,
+  },
+};

package/src/components/TextField/TextField.tsx

@@ -1,61 +1,61 @@
-import React from 'react';
-
-import Label from '@components/Label';
-import FormHelperText from '@components/FormHelperText';
-import Input from '@components/Input';
-import Textarea from '@components/Textarea';
-
-import { TextFieldProps } from './types';
-
-const TextField = ({
-  multirow,
-  name,
-  label,
-  errors,
-  helperText,
-  success,
-  disabled,
-  maxLength,
-  ...props
-}: TextFieldProps) => {
-  const [countChar, setCountChar] = React.useState(0);
-
-  const status = success ? 'success' : errors ? 'error' : 'basic';
-
-  const handleCount = (e: React.ChangeEvent<HTMLInputElement>) =>
-    setCountChar(e.currentTarget.value.length);
-
-  return (
-    <>
-      <Label htmlFor={`formElement-${name}`}>{label}</Label>
-
-      {multirow ? (
-        <Textarea
-          name={name}
-          disabled={disabled}
-          maxLength={maxLength}
-          setCountChar={handleCount}
-          {...props}
-        />
-      ) : (
-        <Input name={name} status={status} disabled={disabled} {...props} />
-      )}
-
-      <div
-        css={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          width: '100%',
-        }}>
-        <FormHelperText role="status" status={status} disabled={disabled}>
-          {errors ? errors?.message : helperText}
-        </FormHelperText>
-        <FormHelperText role="meter">
-          {maxLength ? `${countChar} / ${maxLength}` : null}
-        </FormHelperText>
-      </div>
-    </>
-  );
-};
-
-export default TextField;
+import React from 'react';
+
+import Label from '@components/Label';
+import FormHelperText from '@components/FormHelperText';
+import Input from '@components/Input';
+import Textarea from '@components/Textarea';
+
+import { TextFieldProps } from './types';
+
+const TextField = ({
+  multirow,
+  name,
+  label,
+  errors,
+  helperText,
+  success,
+  disabled,
+  maxLength,
+  ...props
+}: TextFieldProps) => {
+  const [countChar, setCountChar] = React.useState(0);
+
+  const status = success ? 'success' : errors ? 'error' : 'basic';
+
+  const handleCount = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setCountChar(e.currentTarget.value.length);
+
+  return (
+    <>
+      <Label htmlFor={`formElement-${name}`}>{label}</Label>
+
+      {multirow ? (
+        <Textarea
+          name={name}
+          disabled={disabled}
+          maxLength={maxLength}
+          setCountChar={handleCount}
+          {...props}
+        />
+      ) : (
+        <Input name={name} status={status} disabled={disabled} {...props} />
+      )}
+
+      <div
+        css={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          width: '100%',
+        }}>
+        <FormHelperText role="status" status={status} disabled={disabled}>
+          {errors ? errors?.message : helperText}
+        </FormHelperText>
+        <FormHelperText role="meter">
+          {maxLength ? `${countChar} / ${maxLength}` : null}
+        </FormHelperText>
+      </div>
+    </>
+  );
+};
+
+export default TextField;

package/src/components/TextField/index.ts

@@ -1 +1 @@
-export { default } from './TextField';
+export { default } from './TextField';

package/src/components/TextField/types.ts

@@ -1,14 +1,14 @@
-import type { UseFormReturn, FieldError } from 'react-hook-form';
-import { InputProps } from '@components/Input/types';
-
-export interface TextFieldProps
-  extends InputProps,
-    Partial<Pick<UseFormReturn, 'register'>> {
-  label?: string;
-  errors?: FieldError;
-  success?: boolean;
-  helperText?: string;
-  rows?: number;
-  multirow?: boolean;
-  maxLength?: number;
-}
+import type { UseFormReturn, FieldError } from 'react-hook-form';
+import { InputProps } from '@components/Input/types';
+
+export interface TextFieldProps
+  extends InputProps,
+    Partial<Pick<UseFormReturn, 'register'>> {
+  label?: string;
+  errors?: FieldError;
+  success?: boolean;
+  helperText?: string;
+  rows?: number;
+  multirow?: boolean;
+  maxLength?: number;
+}