@ssa-ui-kit/core 0.0.1-alpha

package/src/components/Form/Form.stories.tsx

@@ -0,0 +1,432 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Stories,
+} from '@storybook/addon-docs';
+import { within, userEvent } from '@storybook/testing-library';
+import {
+  useForm,
+  SubmitHandler,
+  FieldValues,
+  FieldError,
+} from 'react-hook-form';
+
+import mainTheme from '@themes/main';
+
+import Card from '@components/Card';
+import CardHeader from '@components/CardHeader';
+import CardContent from '@components/CardContent';
+import TextField from '@components/TextField';
+import Button from '@components/Button';
+import Typography from '@components/Typography';
+import Link from '@components/Link';
+import FormAction from '@components/FormAction';
+import FormGroup from '@components/FormGroup';
+import Icon from '@components/Icon';
+
+import Form from './Form';
+
+export default {
+  title: 'Forms/Samples',
+  component: Form,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Stories />
+        </>
+      ),
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div
+        css={css`
+          width: 346px;
+
+          margin: 0 auto;
+        `}>
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<typeof Card>;
+
+const wrapper = css`
+  display: flex;
+  width: 100%;
+
+  padding-block-start: 16px;
+
+  justify-content: center;
+
+  a {
+    padding-inline: 8px;
+  }
+`;
+
+export const SingIn: StoryObj<typeof Card> = () => {
+  const [isVisible, setIsVisible] = React.useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FieldValues>();
+
+  const onSubmit: SubmitHandler<FieldValues> = (data) => console.log(data);
+
+  const handleVisibility = () => {
+    setIsVisible(!isVisible);
+  };
+
+  return (
+    <>
+      <Card
+        css={css`
+          background-color: ${mainTheme.colors.greyLighter};
+
+          padding: 48px;
+        `}>
+        <CardHeader>
+          <Typography variant="h4">Sing In</Typography>
+        </CardHeader>
+
+        <CardContent>
+          <Form onSubmit={handleSubmit(onSubmit)}>
+            <FormGroup>
+              <TextField
+                placeholder="Email"
+                label="Email"
+                name="email"
+                register={register}
+                validationSchema={{
+                  required: 'Required',
+                }}
+                errors={errors?.email as FieldError}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <TextField
+                placeholder="Password"
+                label="Password"
+                name="password"
+                type={isVisible ? 'text' : 'password'}
+                register={register}
+                validationSchema={{
+                  required: 'Required',
+                }}
+                endElement={
+                  <Button
+                    variant="tertiary"
+                    endIcon={
+                      <Icon
+                        name={isVisible ? 'invisible' : 'visible'}
+                        size={16}
+                      />
+                    }
+                    onClick={handleVisibility}
+                  />
+                }
+                errors={errors?.password as FieldError}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <Link href="#">Forgot password?</Link>
+            </FormGroup>
+
+            <FormAction>
+              <Button type="submit" text="Submit" block />
+            </FormAction>
+
+            <span css={wrapper}>
+              <Typography variant="subtitle">Don’t have an account?</Typography>
+              <Link href="#">Sign Up</Link>
+            </span>
+          </Form>
+        </CardContent>
+      </Card>
+    </>
+  );
+};
+
+SingIn.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  const user = await canvas.getByPlaceholderText('Email');
+  const password = await canvas.getByPlaceholderText('Password');
+
+  await userEvent.click(user);
+  await userEvent.keyboard('email@email.com');
+  await userEvent.click(password);
+  await userEvent.keyboard('123');
+
+  const btn = await canvas.getByRole('button', { name: /submit/i });
+  await userEvent.click(btn);
+};
+
+export const ForgotPasswordTemplate: StoryObj<typeof Card> = () => {
+  const [visibleForm, setVisibleForm] = React.useState('request');
+  const [email, setEmail] = React.useState('');
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FieldValues>();
+
+  const onSubmit: SubmitHandler<FieldValues> = (data) => {
+    setEmail(data.email);
+    setVisibleForm('confirm');
+  };
+
+  return (
+    <>
+      <Card
+        css={css`
+          display: ${visibleForm === 'request' ? 'block' : 'none'};
+          background-color: ${mainTheme.colors.greyLighter};
+
+          padding: 48px;
+        `}>
+        <CardHeader
+          css={{
+            display: 'block',
+          }}>
+          <Typography variant="h4">Forgot Password?</Typography>
+          <Typography variant="subtitle">
+            No worries, we’ll sent reset instructions
+          </Typography>
+        </CardHeader>
+
+        <CardContent>
+          <Form onSubmit={handleSubmit(onSubmit)}>
+            <FormGroup>
+              <TextField
+                placeholder="Email"
+                label="Email"
+                name="email"
+                register={register}
+                validationSchema={{
+                  required: 'Required',
+                }}
+                errors={errors?.email as FieldError}
+              />
+            </FormGroup>
+
+            <FormAction>
+              <Button type="submit" text="Reset Password" block />
+            </FormAction>
+          </Form>
+        </CardContent>
+      </Card>
+
+      <Card
+        css={css`
+          display: ${visibleForm === 'confirm' ? 'block' : 'none'};
+          background-color: ${mainTheme.colors.greyLighter};
+
+          padding: 48px;
+        `}>
+        <CardContent>
+          <div
+            css={css`
+              text-align: center;
+            `}>
+            <Typography variant="h4" gutter>
+              Check Your Email
+            </Typography>
+            <Typography variant="subtitle" gutter>
+              We sent a password reset link to <strong>{email}</strong>.
+            </Typography>
+
+            <span css={wrapper}>
+              <Typography variant="subtitle">
+                Didn’t receive the email?
+              </Typography>
+              <Link href="#">Resend</Link>
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  );
+};
+
+ForgotPasswordTemplate.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  const user = await canvas.getByPlaceholderText('Email');
+
+  await userEvent.click(user);
+  await userEvent.keyboard('email@email.com');
+};
+
+export const RecoverPasswordTemplate: StoryObj<typeof Card> = () => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  const [isVisibleConfirm, setIsVisibleConfirm] = React.useState(false);
+  const [visibleForm, setVisibleForm] = React.useState('request');
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FieldValues>();
+
+  const onSubmit: SubmitHandler<FieldValues> = () => {
+    setVisibleForm('confirm');
+  };
+
+  const handleVisibility = (input: string) => () =>
+    input === 'password'
+      ? setIsVisible(!isVisible)
+      : setIsVisibleConfirm(!isVisibleConfirm);
+
+  return (
+    <>
+      <Card
+        css={css`
+          display: ${visibleForm === 'request' ? 'block' : 'none'};
+          background-color: ${mainTheme.colors.greyLighter};
+
+          padding: 48px;
+        `}>
+        <CardHeader
+          css={{
+            display: 'block',
+          }}>
+          <Typography variant="h4">Forgot Password?</Typography>
+          <Typography variant="subtitle">
+            No worries, we’ll sent reset instructions
+          </Typography>
+        </CardHeader>
+
+        <CardContent>
+          <Form onSubmit={handleSubmit(onSubmit)}>
+            <FormGroup>
+              <TextField
+                placeholder="Password"
+                label="New Password"
+                name="password"
+                type={isVisible ? 'text' : 'password'}
+                register={register}
+                validationSchema={{
+                  required: 'Required',
+                }}
+                endElement={
+                  <Button
+                    variant="tertiary"
+                    endIcon={
+                      <Icon
+                        name={isVisible ? 'invisible' : 'visible'}
+                        size={16}
+                      />
+                    }
+                    onClick={handleVisibility('password')}
+                  />
+                }
+                errors={errors?.password as FieldError}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormGroup>
+                <TextField
+                  placeholder="Confirm password"
+                  label="Confirm Password"
+                  name="confirmPassword"
+                  type={isVisibleConfirm ? 'text' : 'password'}
+                  register={register}
+                  validationSchema={{
+                    required: 'Required',
+                  }}
+                  endElement={
+                    <Button
+                      variant="tertiary"
+                      endIcon={
+                        <Icon
+                          name={isVisibleConfirm ? 'invisible' : 'visible'}
+                          size={16}
+                        />
+                      }
+                      onClick={handleVisibility('confirmPassword')}
+                    />
+                  }
+                  errors={errors?.confirmPassword as FieldError}
+                />
+              </FormGroup>
+            </FormGroup>
+
+            <FormAction>
+              <Button type="submit" text="Reset Password" block />
+            </FormAction>
+          </Form>
+        </CardContent>
+      </Card>
+
+      <Card
+        css={css`
+          display: ${visibleForm === 'confirm' ? 'block' : 'none'};
+          background-color: ${mainTheme.colors.greyLighter};
+
+          padding: 48px;
+        `}>
+        <CardContent>
+          <div
+            css={css`
+              text-align: center;
+            `}>
+            <Typography variant="h4" gutter>
+              Password Reset
+            </Typography>
+            <Typography variant="subtitle" gutter>
+              Your password has been successfully reset. Click to Sign In.
+            </Typography>
+
+            <Button text="Sign In" block />
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  );
+};
+
+RecoverPasswordTemplate.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  const [pass, confirmPass] = await canvas.getAllByPlaceholderText(/Password/i);
+
+  await userEvent.click(pass);
+  await userEvent.keyboard('123');
+
+  await userEvent.click(confirmPass);
+  await userEvent.keyboard('123');
+};
+
+RecoverPasswordTemplate.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  const [pass, confirmPass] = await canvas.getAllByPlaceholderText(/Password/i);
+
+  await userEvent.click(pass);
+  await userEvent.keyboard('123');
+
+  await userEvent.click(confirmPass);
+  await userEvent.keyboard('123');
+
+  const btn = await canvas.getByRole('button', { name: /reset password/i });
+
+  await userEvent.click(btn);
+};

package/src/components/Form/Form.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+import { CommonProps } from '@global-types/emotion';
+
+const Form = styled.form<CommonProps>`
+  display: flex;
+  flex-flow: row wrap;
+`;
+
+export default Form;

package/src/components/Form/index.ts

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

package/src/components/FormAction/FormAction.tsx

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+import { CommonProps } from '@global-types/emotion';
+
+const FormAction = styled.div<CommonProps>`
+  flex: 1 1 100%;
+`;
+
+export default FormAction;

package/src/components/FormAction/index.ts

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

package/src/components/FormCheckbox/FormCheckbox.tsx

@@ -0,0 +1,33 @@
+import { useController } from 'react-hook-form';
+import type { FieldValues } from 'react-hook-form';
+
+import Checkbox from '@components/Checkbox';
+
+import { IFormCheckboxProps } from './types';
+import { ChangeEvent } from 'react';
+
+const FormCheckbox = <T extends FieldValues>({
+  control,
+  name,
+  isRequired = false,
+  ...props
+}: IFormCheckboxProps<T>) => {
+  const { field } = useController({
+    control,
+    name,
+    rules: { required: isRequired },
+  });
+
+  return (
+    <Checkbox
+      name={name}
+      onChange={(value) => {
+        field.onChange(value as unknown as ChangeEvent);
+      }}
+      isRequired={isRequired}
+      {...props}
+    />
+  );
+};
+
+export default FormCheckbox;

package/src/components/FormCheckbox/index.ts

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

package/src/components/FormCheckbox/types.ts

@@ -0,0 +1,10 @@
+import { Control, FieldPath, FieldValues } from 'react-hook-form';
+import { ICheckboxProps } from '../..';
+
+export type IFormCheckboxProps<T extends FieldValues> = Omit<
+  ICheckboxProps,
+  'onChange' | 'name'
+> & {
+  name: FieldPath<T>;
+  control: Control<T>;
+};

package/src/components/FormGroup/FormGroup.tsx

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+import { CommonProps } from '@global-types/emotion';
+
+const FormGroup = styled.div<CommonProps>`
+  display: flex;
+
+  margin: 10px 0;
+
+  flex: 1 1 100%;
+  flex-wrap: wrap;
+
+  align-items: flex-start;
+`;
+
+export default FormGroup;

package/src/components/FormGroup/index.ts

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

package/src/components/FormHelperText/FormHelperText.tsx

@@ -0,0 +1,18 @@
+import { IFormHelperText } from './types';
+import { FormHelperTextBase } from './FormHelperTextBase';
+
+const FormHelperText = ({
+  role,
+  status,
+  disabled,
+  children,
+}: IFormHelperText) => {
+  status = disabled ? 'basic' : status;
+  return (
+    <FormHelperTextBase role={role} status={status}>
+      {children}
+    </FormHelperTextBase>
+  );
+};
+
+export default FormHelperText;

package/src/components/FormHelperText/FormHelperTextBase.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+import { InputColors } from '@components/Input/types';
+
+const statusColor: Record<string, InputColors> = {
+  error: 'red',
+  success: 'greenLighter',
+  basic: 'greyDarker60',
+};
+
+export const FormHelperTextBase = styled.span<{
+  status?: string;
+}>`
+  display: block;
+
+  font-weight: 400;
+  font-size: 0.688rem;
+
+  margin: 6px 0 0 4px;
+
+  color: ${({ theme, status = 'basic' }) => theme.colors[statusColor[status]]};
+`;

package/src/components/FormHelperText/index.ts

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

package/src/components/FormHelperText/types.ts

@@ -0,0 +1,8 @@
+import { CommonProps } from '@global-types/emotion';
+
+export interface IFormHelperText extends CommonProps {
+  children: React.ReactNode;
+  role?: string;
+  status?: string;
+  disabled?: boolean;
+}

package/src/components/FormRadioGroup/FormRadioGroup.spec.tsx

@@ -0,0 +1,74 @@
+import { useForm } from 'react-hook-form';
+import userEvent from '@testing-library/user-event';
+import Radio from '@components/Radio';
+import FormRadioGroup from './FormRadioGroup';
+
+describe('FormRadioGroup', () => {
+  type TestFormValues = {
+    tree: boolean;
+  };
+
+  const TestForm = ({
+    onFormSubmit,
+    ...props
+  }: {
+    onFormSubmit: (data: TestFormValues) => void;
+    isRequired?: boolean;
+  }) => {
+    const { control, handleSubmit } = useForm<TestFormValues>();
+    const onSubmit = handleSubmit((data) => onFormSubmit(data));
+
+    return (
+      <form onSubmit={onSubmit}>
+        <FormRadioGroup<TestFormValues>
+          name="tree"
+          control={control}
+          {...props}>
+          <Radio id="radio1" value="oak" text="Oak" />
+          <Radio id="radio2" value="spruce" text="Spruce" />
+          <Radio id="radio3" value="chestnut" text="Chestnut" />
+        </FormRadioGroup>
+
+        <input type="submit" />
+      </form>
+    );
+  };
+
+  it('Renders and is connected to the form', async () => {
+    const user = userEvent.setup();
+    const onMockFormSubmit = jest.fn();
+
+    const { getAllByRole, getByText } = render(
+      <TestForm onFormSubmit={onMockFormSubmit} isRequired={false} />,
+    );
+
+    const radioEls = getAllByRole('radio');
+    expect(radioEls.length).toBe(3);
+
+    for (const radioEl of radioEls) {
+      expect(radioEl).not.toBeChecked();
+    }
+
+    const submitEl = document.querySelector('input[type="submit"]');
+
+    await user.click(
+      getByText('Spruce').closest('label') as never as HTMLLabelElement,
+    );
+    await user.click(submitEl as HTMLInputElement);
+
+    expect(onMockFormSubmit).toBeCalledWith({ tree: 'spruce' });
+
+    expect((getAllByRole('radio')[1] as HTMLInputElement)?.checked).toBe(true);
+  });
+
+  it('Renders with default value', () => {
+    const onMockFormSubmit = jest.fn();
+
+    const { getAllByRole } = render(
+      <TestForm onFormSubmit={onMockFormSubmit} />,
+    );
+
+    const radioEls = getAllByRole('radio');
+    expect(radioEls.length).toBe(3);
+  });
+});