@ssa-ui-kit/core 0.0.1-alpha

package/src/components/Tag/styles.ts

@@ -0,0 +1,123 @@
+import { css, Theme } from '@emotion/react';
+
+import theme from '@themes/main';
+
+export const pinkBorder = css`
+  border: 1px solid ${theme.colors.pink};
+`;
+export const yellowBorder = css`
+  border: 1px solid ${theme.colors.yellow};
+`;
+export const greenBorder = css`
+  border: 1px solid ${theme.colors.green};
+`;
+export const turquoiseBorder = css`
+  border: 1px solid ${theme.colors.turquoise};
+`;
+export const purpleBorder = css`
+  border: 1px solid ${theme.colors.purple};
+`;
+export const blueLightBorder = css`
+  border: 1px solid ${theme.colors.blueLight};
+`;
+export const blueBorder = css`
+  border: 1px solid ${theme.colors.blue};
+`;
+export const yellowWarmBorder = css`
+  border: 1px solid ${theme.colors.yellowWarm};
+`;
+
+export const pink = (theme: Theme) => css`
+  color: ${theme.colors.pink};
+
+  background-color: ${theme.colors.pink20};
+  background: linear-gradient(
+    90deg,
+    ${theme.colors.pink20} 0%,
+    ${theme.colors.pinkLighter20} 100%
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.pinkShadow40};
+`;
+
+export const yellow = (theme: Theme) => css`
+  color: ${theme.colors.yellow};
+
+  background-color: ${theme.colors.yellow20};
+  background: linear-gradient(
+    90deg,
+    ${theme.colors.yellow20} 0%,
+    ${theme.colors.yellowLighter20} 100%
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.yellowLighter40};
+`;
+
+export const yellowWarm = (theme: Theme) => css`
+  color: ${theme.colors.yellowLighter};
+
+  background-color: ${theme.colors.yellowLighter20};
+  background: linear-gradient(
+    90deg,
+    ${theme.colors.yellowLighter20} 0%,
+    ${theme.colors.yellowWarm20} 100%
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.yellowWarm40};
+`;
+
+export const green = (theme: Theme) => css`
+  color: ${theme.colors.green};
+
+  background-color: ${theme.colors.green20};
+  background: linear-gradient(
+    270deg,
+    ${theme.colors.greenLighter20} 0%,
+    ${theme.colors.green20} 100%
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.greenLighter40};
+`;
+
+export const turquoise = (theme: Theme) => css`
+  color: ${theme.colors.turquoise};
+
+  background-color: ${theme.colors.turquoise20};
+  background: linear-gradient(
+    90deg,
+    ${theme.colors.turquoise20} 0%,
+    ${theme.colors.turquoiseLighter20} 100%
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.turquoiseShadow40};
+`;
+
+export const purple = (theme: Theme) => css`
+  color: ${theme.colors.purple};
+
+  background-color: ${theme.colors.purpleLighter20};
+  background: linear-gradient(
+    270deg,
+    ${theme.colors.purpleLighter20} 0%,
+    ${theme.colors.purple20} 100%
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.purpleLighter40};
+`;
+export const blue = (theme: Theme) => css`
+  color: ${theme.colors.blue};
+
+  background-color: ${theme.colors.blue20};
+  background: linear-gradient(
+    90deg,
+    ${theme.colors.blueLighter20},
+    ${theme.colors.blue20}
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.blueLightDarker40};
+`;
+
+export const blueLight = (theme: Theme) => css`
+  color: ${theme.colors.blueLight};
+
+  background-color: ${theme.colors.blueLight20};
+  background: linear-gradient(
+    270deg,
+    ${theme.colors.blueLight20} 0%,
+    ${theme.colors.blueLightLighter20} 100%
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.blueLightLighter40};
+`;

package/src/components/Tag/types.ts

@@ -0,0 +1,7 @@
+import { CommonProps } from '@global-types/emotion';
+
+export interface TagsProps extends CommonProps {
+  color?: keyof MainColors;
+  size?: keyof MainSizes;
+  children: React.ReactNode;
+}

package/src/components/TextField/TextField.spec.tsx

@@ -0,0 +1,171 @@
+import { screen, fireEvent, mockUseForm } from '../../../customTest';
+import { FieldError } from 'react-hook-form';
+
+import TextField from '@components/TextField';
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+
+const mockError: FieldError = {
+  type: 'required',
+  message: 'Required field',
+};
+
+const { register } = mockUseForm();
+
+describe('TextField', () => {
+  it('Render textarea with label and helper text', () => {
+    render(
+      <TextField
+        multirow={true}
+        placeholder="Field"
+        label="field"
+        name="field"
+        register={register}
+        validationSchema={{
+          required: 'Required',
+        }}
+        helperText={'some nice text'}
+      />,
+    );
+
+    const textarea = screen.getByRole('textbox') as HTMLInputElement;
+    const helperText = screen.getByRole('status');
+
+    fireEvent.change(textarea, { target: { value: 'rock n roll' } });
+
+    expect(textarea.value).toBe('rock n roll');
+    expect(helperText.innerHTML).toBe('some nice text');
+  });
+
+  it('Render textarea with limit char', () => {
+    render(
+      <TextField
+        multirow={true}
+        placeholder="Field"
+        label="field"
+        name="field"
+        register={register}
+        helperText={'some nice text'}
+        maxLength={100}
+      />,
+    );
+
+    const textarea = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.change(textarea, { target: { value: 'rock n roll' } });
+
+    const meter = screen.getByRole('meter');
+
+    expect(textarea.value).toBe('rock n roll');
+    expect(meter.innerHTML).toBe('11 / 100');
+  });
+
+  it('Render input with label and helper text', () => {
+    render(
+      <TextField
+        placeholder="Field"
+        label="field"
+        name="field"
+        register={register}
+        helperText={'some nice text'}
+      />,
+    );
+
+    const input = screen.getByLabelText(/Field/i) as HTMLInputElement;
+    const helperText = screen.getByRole('status');
+
+    fireEvent.change(input, { target: { value: 'rock n roll' } });
+
+    expect(input.value).toBe('rock n roll');
+    expect(input).toBeInTheDocument();
+    expect(helperText).toBeInTheDocument();
+  });
+
+  it('Render input disabled', () => {
+    render(
+      <TextField
+        placeholder="Field"
+        label="field disabled"
+        name="field"
+        register={register}
+        disabled={true}
+      />,
+    );
+
+    const input = screen.getByLabelText(/field disabled/i) as HTMLInputElement;
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveProperty('disabled', true);
+  });
+
+  it('Render input with status of success', async () => {
+    render(
+      <TextField
+        placeholder="Field"
+        label="field"
+        name="field"
+        register={register}
+        success={true}
+      />,
+    );
+
+    const input = screen.getByLabelText(/Field/i);
+    const icon = await screen.findByTitle('Check');
+
+    expect(input).toBeInTheDocument();
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('Render input with status of error', async () => {
+    render(
+      <TextField
+        placeholder="Field"
+        label="field"
+        name="field"
+        register={register}
+        validationSchema={{
+          required: 'Required',
+        }}
+        errors={mockError}
+      />,
+    );
+
+    const input = screen.getByLabelText(/Field/i);
+    const errorText = screen.getByRole('status');
+    const icon = await screen.findByTitle('Union');
+
+    expect(input).toBeInTheDocument();
+    expect(errorText).toBeInTheDocument();
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('Render input without status icon when with an append element', async () => {
+    render(
+      <TextField
+        placeholder="Field"
+        label="field"
+        name="field"
+        register={register}
+        validationSchema={{
+          required: 'Required',
+        }}
+        endElement={
+          <Button
+            variant="tertiary"
+            endIcon={<Icon name="visible" />}
+            onClick={jest.fn()}
+          />
+        }
+        errors={mockError}
+      />,
+    );
+
+    const input = screen.getByLabelText(/Field/i);
+    const errorText = screen.getByRole('status');
+    const icon = await screen.queryByTitle('Union');
+
+    expect(input).toBeInTheDocument();
+    expect(errorText).toBeInTheDocument();
+    expect(icon).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +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,
+  },
+};

package/src/components/TextField/TextField.tsx

@@ -0,0 +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;

package/src/components/TextField/index.ts

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

package/src/components/TextField/types.ts

@@ -0,0 +1,20 @@
+import type { UseFormReturn, FieldError } from 'react-hook-form';
+
+export interface TextFieldProps
+  extends Partial<Pick<UseFormReturn, 'register'>> {
+  name: string;
+  type?: string;
+  label?: string;
+  placeholder?: string;
+  validationSchema?: Record<string, unknown>;
+  errors?: FieldError;
+  success?: boolean;
+  helperText?: string;
+  disabled?: boolean;
+  rows?: number;
+  endElement?: React.ReactElement;
+  multirow?: boolean;
+  maxLength?: number;
+  className?: string;
+  as?: React.ElementType;
+}

package/src/components/Textarea/Textarea.spec.tsx

@@ -0,0 +1,56 @@
+import { screen, fireEvent, mockUseForm } from '../../../customTest';
+
+import Textarea from '@components/Textarea';
+
+const { register } = mockUseForm();
+
+describe('Textarea', () => {
+  it('Render textarea', () => {
+    const countChar = jest.fn();
+
+    render(
+      <Textarea
+        placeholder="Field"
+        name="field"
+        register={register}
+        maxLength={100}
+        setCountChar={countChar}
+      />,
+    );
+
+    const textarea = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.change(textarea, { target: { value: 'rock n roll' } });
+
+    expect(textarea.value).toBe('rock n roll');
+    expect(textarea).toHaveProperty('rows', 10);
+    expect(textarea).toHaveProperty('maxLength', 100);
+    expect(textarea).toHaveProperty('id', 'formElement-field');
+    expect(countChar).toHaveBeenCalled();
+  });
+
+  it('Render textarea', () => {
+    render(
+      <Textarea
+        placeholder="Field"
+        name="field"
+        register={register}
+        disabled={true}
+      />,
+    );
+
+    const textarea = screen.getByRole('textbox') as HTMLInputElement;
+
+    expect(textarea).toHaveProperty('disabled', true);
+  });
+
+  it('Trow error when without register', () => {
+    jest.spyOn(console, 'error').mockImplementation();
+
+    expect(() =>
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      render(<Textarea placeholder="Field" name="field" disabled={true} />),
+    ).toThrow('Input component must be used within a Form component');
+  });
+});