@ssa-ui-kit/core 0.0.10-alpha → 0.0.11-alpha

package/src/components/Input/Input.spec.tsx

@@ -1,95 +1,95 @@
-import { screen, fireEvent, mockUseForm } from '../../../customTest';
-import Input from '@components/Input';
-
-const { register } = mockUseForm();
-
-describe('Inputs', () => {
-  it('Render input with label and helper text', () => {
-    render(<Input placeholder="Field" name="field" register={register} />);
-
-    const input = screen.getByRole('textbox') as HTMLInputElement;
-
-    fireEvent.change(input, { target: { value: 'rock n roll' } });
-
-    expect(input.value).toBe('rock n roll');
-    expect(input).toBeInTheDocument();
-  });
-
-  it('Trow error when without register', () => {
-    jest.spyOn(console, 'error').mockImplementation();
-
-    expect(() =>
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      render(<Input placeholder="Field" name="field" disabled={true} />),
-    ).toThrow('Input component must be used within a Form component');
-  });
-
-  it('Render input disabled', () => {
-    render(
-      <Input
-        placeholder="Field"
-        name="field"
-        register={register}
-        disabled={true}
-      />,
-    );
-
-    const input = screen.getByRole('textbox') as HTMLInputElement;
-
-    expect(input).toBeInTheDocument();
-    expect(input).toHaveProperty('disabled', true);
-  });
-
-  it('Render input with status of success', async () => {
-    render(
-      <Input
-        placeholder="Field"
-        name="field"
-        register={register}
-        status="success"
-      />,
-    );
-
-    const input = screen.getByRole('textbox') as HTMLInputElement;
-    const icon = await screen.findByTitle('Check');
-
-    expect(input).toBeInTheDocument();
-    expect(icon).toBeInTheDocument();
-  });
-
-  it('Render input with status of error', async () => {
-    render(
-      <Input
-        placeholder="Field"
-        name="field"
-        register={register}
-        validationSchema={{
-          required: 'Required',
-        }}
-        status="error"
-      />,
-    );
-
-    const input = screen.getByRole('textbox') as HTMLInputElement;
-    const icon = await screen.findByTitle('Union');
-
-    expect(input).toBeInTheDocument();
-    expect(icon).toBeInTheDocument();
-  });
-
-  it('Render input with startElement and endElement', () => {
-    render(
-      <Input
-        placeholder="Field"
-        name="field"
-        register={register}
-        startElement={<span data-testid="startElement">+</span>}
-        endElement={<span data-testid="endElement">-</span>}
-      />,
-    );
-
-    expect(screen.getByTestId('startElement')).toBeInTheDocument();
-    expect(screen.getByTestId('endElement')).toBeInTheDocument();
-  });
-});
+import { screen, fireEvent, mockUseForm } from '../../../customTest';
+import Input from '@components/Input';
+
+const { register } = mockUseForm();
+
+describe('Inputs', () => {
+  it('Render input with label and helper text', () => {
+    render(<Input placeholder="Field" name="field" register={register} />);
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: 'rock n roll' } });
+
+    expect(input.value).toBe('rock n roll');
+    expect(input).toBeInTheDocument();
+  });
+
+  it('Trow error when without register', () => {
+    jest.spyOn(console, 'error').mockImplementation();
+
+    expect(() =>
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      render(<Input placeholder="Field" name="field" disabled={true} />),
+    ).toThrow('Input component must be used within a Form component');
+  });
+
+  it('Render input disabled', () => {
+    render(
+      <Input
+        placeholder="Field"
+        name="field"
+        register={register}
+        disabled={true}
+      />,
+    );
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveProperty('disabled', true);
+  });
+
+  it('Render input with status of success', async () => {
+    render(
+      <Input
+        placeholder="Field"
+        name="field"
+        register={register}
+        status="success"
+      />,
+    );
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    const icon = await screen.findByTitle('Check');
+
+    expect(input).toBeInTheDocument();
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('Render input with status of error', async () => {
+    render(
+      <Input
+        placeholder="Field"
+        name="field"
+        register={register}
+        validationSchema={{
+          required: 'Required',
+        }}
+        status="error"
+      />,
+    );
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    const icon = await screen.findByTitle('Union');
+
+    expect(input).toBeInTheDocument();
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('Render input with startElement and endElement', () => {
+    render(
+      <Input
+        placeholder="Field"
+        name="field"
+        register={register}
+        startElement={<span data-testid="startElement">+</span>}
+        endElement={<span data-testid="endElement">-</span>}
+      />,
+    );
+
+    expect(screen.getByTestId('startElement')).toBeInTheDocument();
+    expect(screen.getByTestId('endElement')).toBeInTheDocument();
+  });
+});

package/src/components/Input/Input.stories.tsx

@@ -1,215 +1,215 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { FieldValues, useForm } from 'react-hook-form';
-
-import Input from '@components/Input';
-import Icon from '@components/Icon';
-import { InputProps } from './types';
-
-export default {
-  title: 'Components/Inputs',
-  component: Input,
-
-  argTypes: {
-    status: {
-      options: ['basic', 'error', 'success'],
-      control: {
-        type: 'inline-radio',
-      },
-    },
-    type: {
-      description: 'input HTML valid type',
-    },
-    validationSchema: {
-      control: {
-        disable: true,
-      },
-    },
-    register: {
-      control: {
-        disable: true,
-      },
-    },
-    endElement: {
-      control: {
-        disable: true,
-      },
-    },
-  },
-} as Meta<typeof Input>;
-
-export const Default: StoryObj<typeof Input> = ({
-  placeholder,
-  name,
-  status,
-  endElement,
-  disabled,
-  type,
-}: InputProps) => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      type={type}
-      placeholder={placeholder}
-      name={name}
-      register={register}
-      validationSchema={{
-        required: 'Required',
-      }}
-      endElement={endElement}
-      status={status}
-      disabled={disabled}
-    />
-  );
-};
-
-Default.args = {
-  placeholder: 'Field',
-  name: 'field1',
-  status: 'basic',
-};
-
-export const WithIcon: StoryObj<typeof Input> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      placeholder="Field"
-      name="field1"
-      register={register}
-      validationSchema={{
-        required: 'Required',
-      }}
-      endElement={<Icon name="visible" />}
-    />
-  );
-};
-WithIcon.args = {};
-
-export const WithBothIcons: StoryObj<typeof Input> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      placeholder="Field"
-      name="field1"
-      register={register}
-      validationSchema={{
-        required: 'Required',
-      }}
-      startElement={<Icon name="invisible" />}
-      endElement={<Icon name="visible" />}
-    />
-  );
-};
-WithBothIcons.args = {};
-
-export const WithError: StoryObj<typeof Input> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      placeholder="Field error"
-      name="field2"
-      register={register}
-      validationSchema={{
-        required: 'Required',
-      }}
-      status="error"
-    />
-  );
-};
-WithError.args = {};
-
-export const WithSuccess: StoryObj<typeof Input> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      placeholder="Field success"
-      name="field3"
-      register={register}
-      validationSchema={{
-        required: 'Required',
-      }}
-      status="success"
-    />
-  );
-};
-WithSuccess.args = {};
-
-export const Disabled: StoryObj<typeof Input> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      placeholder="Field disabled"
-      name="field4"
-      register={register}
-      disabled={true}
-      status="basic"
-    />
-  );
-};
-Disabled.args = {};
-
-export const WithStatusDisabled: StoryObj<typeof Input> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      placeholder="Field success disabled"
-      name="field5"
-      register={register}
-      disabled={true}
-      status="success"
-    />
-  );
-};
-WithStatusDisabled.args = {};
-
-export const WithCallAction: StoryObj<typeof Input> = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      type="password"
-      placeholder="Field"
-      name="field6"
-      register={register}
-      endElement={
-        <button onClick={() => console.log('calling action...')}>Action</button>
-      }
-      status="basic"
-    />
-  );
-};
-WithCallAction.args = {};
-
-export const Focused: StoryObj<typeof Input> & {
-  args: { label?: string };
-} = () => {
-  const { register } = useForm<FieldValues>();
-
-  return (
-    <Input
-      placeholder="Field focused"
-      name="field3"
-      register={register}
-      validationSchema={{
-        required: 'Required',
-      }}
-      status="basic"
-    />
-  );
-};
-Focused.args = {
-  ...Default.args,
-  label: 'Focused Input',
-};
-
-Focused.parameters = {
-  pseudo: {
-    focus: true,
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { FieldValues, useForm } from 'react-hook-form';
+
+import Input from '@components/Input';
+import Icon from '@components/Icon';
+import { InputProps } from './types';
+
+export default {
+  title: 'Components/Inputs',
+  component: Input,
+
+  argTypes: {
+    status: {
+      options: ['basic', 'error', 'success'],
+      control: {
+        type: 'inline-radio',
+      },
+    },
+    type: {
+      description: 'input HTML valid type',
+    },
+    validationSchema: {
+      control: {
+        disable: true,
+      },
+    },
+    register: {
+      control: {
+        disable: true,
+      },
+    },
+    endElement: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+} as Meta<typeof Input>;
+
+export const Default: StoryObj<typeof Input> = ({
+  placeholder,
+  name,
+  status,
+  endElement,
+  disabled,
+  type,
+}: InputProps) => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      type={type}
+      placeholder={placeholder}
+      name={name}
+      register={register}
+      validationSchema={{
+        required: 'Required',
+      }}
+      endElement={endElement}
+      status={status}
+      disabled={disabled}
+    />
+  );
+};
+
+Default.args = {
+  placeholder: 'Field',
+  name: 'field1',
+  status: 'basic',
+};
+
+export const WithIcon: StoryObj<typeof Input> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      placeholder="Field"
+      name="field1"
+      register={register}
+      validationSchema={{
+        required: 'Required',
+      }}
+      endElement={<Icon name="visible" />}
+    />
+  );
+};
+WithIcon.args = {};
+
+export const WithBothIcons: StoryObj<typeof Input> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      placeholder="Field"
+      name="field1"
+      register={register}
+      validationSchema={{
+        required: 'Required',
+      }}
+      startElement={<Icon name="invisible" />}
+      endElement={<Icon name="visible" />}
+    />
+  );
+};
+WithBothIcons.args = {};
+
+export const WithError: StoryObj<typeof Input> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      placeholder="Field error"
+      name="field2"
+      register={register}
+      validationSchema={{
+        required: 'Required',
+      }}
+      status="error"
+    />
+  );
+};
+WithError.args = {};
+
+export const WithSuccess: StoryObj<typeof Input> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      placeholder="Field success"
+      name="field3"
+      register={register}
+      validationSchema={{
+        required: 'Required',
+      }}
+      status="success"
+    />
+  );
+};
+WithSuccess.args = {};
+
+export const Disabled: StoryObj<typeof Input> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      placeholder="Field disabled"
+      name="field4"
+      register={register}
+      disabled={true}
+      status="basic"
+    />
+  );
+};
+Disabled.args = {};
+
+export const WithStatusDisabled: StoryObj<typeof Input> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      placeholder="Field success disabled"
+      name="field5"
+      register={register}
+      disabled={true}
+      status="success"
+    />
+  );
+};
+WithStatusDisabled.args = {};
+
+export const WithCallAction: StoryObj<typeof Input> = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      type="password"
+      placeholder="Field"
+      name="field6"
+      register={register}
+      endElement={
+        <button onClick={() => console.log('calling action...')}>Action</button>
+      }
+      status="basic"
+    />
+  );
+};
+WithCallAction.args = {};
+
+export const Focused: StoryObj<typeof Input> & {
+  args: { label?: string };
+} = () => {
+  const { register } = useForm<FieldValues>();
+
+  return (
+    <Input
+      placeholder="Field focused"
+      name="field3"
+      register={register}
+      validationSchema={{
+        required: 'Required',
+      }}
+      status="basic"
+    />
+  );
+};
+Focused.args = {
+  ...Default.args,
+  label: 'Focused Input',
+};
+
+Focused.parameters = {
+  pseudo: {
+    focus: true,
+  },
+};