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

package/src/components/Form/Form.tsx

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

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

package/src/components/FormAction/FormAction.tsx

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

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

package/src/components/FormCheckbox/FormCheckbox.tsx

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

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

package/src/components/FormCheckbox/types.ts

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

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

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

package/src/components/FormHelperText/FormHelperText.tsx

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

@@ -1,22 +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]]};
-`;
+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

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

package/src/components/FormHelperText/types.ts

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

@@ -1,74 +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);
-  });
-});
+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);
+  });
+});

package/src/components/FormRadioGroup/FormRadioGroup.stories.tsx

@@ -1,90 +1,90 @@
-import { Fragment } from 'react';
-import { Meta } from '@storybook/react';
-import { useForm, SubmitHandler } from 'react-hook-form';
-
-import Typography from '@components/Typography';
-import Button from '@components/Button';
-import Radio from '@components/Radio';
-
-import { IFormRadioGroupProps } from './types';
-import FormRadioGroup from './FormRadioGroup';
-
-export default {
-  title: 'Components/Radio Buttons/FormRadioGroup',
-  component: FormRadioGroup,
-  argTypes: {
-    className: {
-      control: {
-        disable: true,
-      },
-    },
-    initialState: {
-      control: {
-        disable: true,
-      },
-    },
-    control: {
-      control: {
-        disable: true,
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      source: {
-        type: 'code',
-      },
-    },
-  },
-} as Meta<typeof FormRadioGroup>;
-
-type DemoForm = {
-  tree: string;
-};
-
-export const FormRadioGroupStory = (args: IFormRadioGroupProps<DemoForm>) => {
-  const { name, isRequired, initialState } = args;
-
-  const { handleSubmit, control } = useForm<DemoForm>();
-
-  const onSubmit: SubmitHandler<DemoForm> = (data: DemoForm) =>
-    alert(JSON.stringify(data, null, ' '));
-
-  return (
-    <Fragment>
-      <Typography variant="h4">Form Radio Group</Typography>
-
-      <form onSubmit={handleSubmit(onSubmit)} css={{ marginTop: '10px' }}>
-        <FormRadioGroup
-          name={name}
-          isRequired={isRequired}
-          initialState={initialState}
-          control={control}>
-          <Radio id="radio1" value="oak" text="Oak" />
-          <Radio id="radio2" value="spruce" text="Spruce" />
-          <Radio
-            id="radio3"
-            value="chestnut"
-            text="Chestnut"
-            isDisabled={true}
-          />
-        </FormRadioGroup>
-
-        <Button
-          size="small"
-          type="submit"
-          text="Submit"
-          css={{
-            marginTop: '7px',
-          }}
-        />
-      </form>
-    </Fragment>
-  );
-};
-
-FormRadioGroupStory.args = {
-  name: 'tree',
-  isRequired: true,
-};
-FormRadioGroupStory.storyName = 'FormRadioGroup';
+import { Fragment } from 'react';
+import { Meta } from '@storybook/react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+
+import Typography from '@components/Typography';
+import Button from '@components/Button';
+import Radio from '@components/Radio';
+
+import { IFormRadioGroupProps } from './types';
+import FormRadioGroup from './FormRadioGroup';
+
+export default {
+  title: 'Components/Radio Buttons/FormRadioGroup',
+  component: FormRadioGroup,
+  argTypes: {
+    className: {
+      control: {
+        disable: true,
+      },
+    },
+    initialState: {
+      control: {
+        disable: true,
+      },
+    },
+    control: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+      },
+    },
+  },
+} as Meta<typeof FormRadioGroup>;
+
+type DemoForm = {
+  tree: string;
+};
+
+export const FormRadioGroupStory = (args: IFormRadioGroupProps<DemoForm>) => {
+  const { name, isRequired, initialState } = args;
+
+  const { handleSubmit, control } = useForm<DemoForm>();
+
+  const onSubmit: SubmitHandler<DemoForm> = (data: DemoForm) =>
+    alert(JSON.stringify(data, null, ' '));
+
+  return (
+    <Fragment>
+      <Typography variant="h4">Form Radio Group</Typography>
+
+      <form onSubmit={handleSubmit(onSubmit)} css={{ marginTop: '10px' }}>
+        <FormRadioGroup
+          name={name}
+          isRequired={isRequired}
+          initialState={initialState}
+          control={control}>
+          <Radio id="radio1" value="oak" text="Oak" />
+          <Radio id="radio2" value="spruce" text="Spruce" />
+          <Radio
+            id="radio3"
+            value="chestnut"
+            text="Chestnut"
+            isDisabled={true}
+          />
+        </FormRadioGroup>
+
+        <Button
+          size="small"
+          type="submit"
+          text="Submit"
+          css={{
+            marginTop: '7px',
+          }}
+        />
+      </form>
+    </Fragment>
+  );
+};
+
+FormRadioGroupStory.args = {
+  name: 'tree',
+  isRequired: true,
+};
+FormRadioGroupStory.storyName = 'FormRadioGroup';