Refactor Checkbox (#932)

* Refactor Checkbox

* Complete note completion

* Fixes

* Fix login

front/src/modules/ui/input/components/Checkbox.tsx

@@ -8,11 +8,23 @@ export enum CheckboxVariant {
   Secondary = 'secondary',
 }
 
+export enum CheckboxShape {
+  Squared = 'squared',
+  Rounded = 'rounded',
+}
+
+export enum CheckboxSize {
+  Large = 'large',
+  Small = 'small',
+}
+
 type OwnProps = {
   checked: boolean;
   indeterminate?: boolean;
   onChange?: (value: boolean) => void;
   variant?: CheckboxVariant;
+  size?: CheckboxSize;
+  shape?: CheckboxShape;
 };
 
 const StyledInputContainer = styled.div`
@@ -22,8 +34,10 @@ const StyledInputContainer = styled.div`
 `;
 
 const StyledInput = styled.input<{
+  checkboxSize: CheckboxSize;
+  variant: CheckboxVariant;
   indeterminate?: boolean;
-  variant?: CheckboxVariant;
+  shape?: CheckboxShape;
 }>`
   cursor: pointer;
   margin: 0;
@@ -32,30 +46,37 @@ const StyledInput = styled.input<{
   z-index: 10;
 
   & + label {
+    --size: ${({ checkboxSize }) =>
+      checkboxSize === CheckboxSize.Large ? '18px' : '12px'};
     cursor: pointer;
-    height: 14px;
+    height: calc(var(--size) + 2px);
     padding: 0;
     position: relative;
-    width: 14px;
+    width: calc(var(--size) + 2px);
   }
 
   & + label:before {
-    border-radius: ${({ theme }) => theme.border.radius.sm};
+    --size: ${({ checkboxSize }) =>
+      checkboxSize === CheckboxSize.Large ? '18px' : '12px'};
     background: ${({ theme, indeterminate }) =>
       indeterminate ? theme.color.blue : 'transparent'};
-    border-style: solid;
-    border-width: 1px;
     border-color: ${({ theme, indeterminate, variant }) =>
       indeterminate
         ? theme.color.blue
         : variant === CheckboxVariant.Primary
         ? theme.border.color.inverted
         : theme.border.color.secondaryInverted};
+    border-radius: ${({ theme, shape }) =>
+      shape === CheckboxShape.Rounded
+        ? theme.border.radius.rounded
+        : theme.border.radius.sm};
+    border-style: solid;
+    border-width: 1px;
     content: '';
     cursor: pointer;
     display: inline-block;
-    height: 12px;
-    width: 12px;
+    height: var(--size);
+    width: var(--size);
   }
 
   &:checked + label:before {
@@ -64,12 +85,16 @@ const StyledInput = styled.input<{
   }
 
   & + label > svg {
-    height: 12px;
-    left: 1px;
+    --padding: ${({ checkboxSize }) =>
+      checkboxSize === CheckboxSize.Large ? '2px' : '1px'};
+    --size: ${({ checkboxSize }) =>
+      checkboxSize === CheckboxSize.Large ? '16px' : '12px'};
+    height: var(--size);
+    left: var(--padding);
     position: absolute;
     stroke: ${({ theme }) => theme.grayScale.gray0};
-    top: 1px;
-    width: 12px;
+    top: var(--padding);
+    width: var(--size);
   }
 `;
 
@@ -78,6 +103,8 @@ export function Checkbox({
   onChange,
   indeterminate,
   variant = CheckboxVariant.Primary,
+  size = CheckboxSize.Small,
+  shape = CheckboxShape.Squared,
 }: OwnProps) {
   const [isInternalChecked, setIsInternalChecked] =
     React.useState<boolean>(false);
@@ -101,6 +128,8 @@ export function Checkbox({
         checked={isInternalChecked}
         indeterminate={indeterminate}
         variant={variant}
+        checkboxSize={size}
+        shape={shape}
         onChange={(event) => handleChange(event.target.checked)}
       />
       <label htmlFor="checkbox">

front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx

@@ -5,7 +5,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { AutosizeTextInput } from '../AutosizeTextInput';
 
 const meta: Meta<typeof AutosizeTextInput> = {
-  title: 'UI/Inputs/AutosizeTextInput',
+  title: 'UI/Input/AutosizeTextInput',
   component: AutosizeTextInput,
   decorators: [ComponentDecorator],
 };

front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import {
+  Checkbox,
+  CheckboxShape,
+  CheckboxSize,
+  CheckboxVariant,
+} from '../Checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'UI/Input/Checkbox',
+  component: Checkbox,
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  args: {
+    checked: false,
+    indeterminate: false,
+    variant: CheckboxVariant.Primary,
+    size: CheckboxSize.Small,
+    shape: CheckboxShape.Squared,
+  },
+  decorators: [ComponentDecorator],
+};
+
+export const Catalog: Story = {
+  args: {},
+  argTypes: {
+    variant: { control: false },
+    size: { control: false },
+    indeterminate: { control: false },
+    checked: { control: false },
+    shape: { control: false },
+  },
+  parameters: {
+    catalog: [
+      {
+        name: 'state',
+        values: ['unchecked', 'checked', 'indeterminate'],
+        props: (state: string) => {
+          if (state === 'checked') {
+            return { checked: true };
+          }
+
+          if (state === 'indeterminate') {
+            return { indeterminate: true };
+          }
+        },
+      },
+      {
+        name: 'shape',
+        values: Object.values(CheckboxShape),
+        props: (shape: CheckboxShape) => ({ shape }),
+      },
+      {
+        name: 'variant',
+        values: Object.values(CheckboxVariant),
+        props: (variant: CheckboxVariant) => ({ variant }),
+      },
+      {
+        name: 'size',
+        values: Object.values(CheckboxSize),
+        props: (size: CheckboxSize) => ({ size }),
+      },
+    ],
+  },
+  decorators: [CatalogDecorator],
+};

front/src/modules/ui/input/components/__stories__/TextInput.stories.tsx

@@ -11,7 +11,7 @@ import { TextInput } from '../TextInput';
 const changeJestFn = jest.fn();
 
 const meta: Meta<typeof TextInput> = {
-  title: 'UI/Inputs/TextInput',
+  title: 'UI/Input/TextInput',
   component: TextInput,
   decorators: [ComponentDecorator],
   args: { value: '', onChange: changeJestFn, placeholder: 'Placeholder' },