Feat/checkbox

.storybook/checkbox.stories.tsx

@@ -0,0 +1,35 @@
+import { ThemeProvider } from 'styled-components';
+import { Checkbox } from '../src';
+import { theme } from '../src/theme';
+import { GlobalStyles } from '../src/globalStyles';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+const meta = {
+  component: Checkbox,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '100%' }}>
+        <ThemeProvider theme={theme}>
+          <GlobalStyles />
+          <Story />
+          <span style={{ color: 'red' }}>
+            Outer state handler has to be passed for checkbox to work
+          </span>
+        </ThemeProvider>
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: false,
+    onClick: () => console.log('1'),
+    children:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sollicitudin sem lectus, vitae convallis urna ultricies at. Sed hendrerit bibendum urna. Praesent arcu sapien, porta blandit neque cursus, scelerisque ullamcorper ligula. Suspendisse malesuada nulla sed turpis tincidunt porttitor non a sapien. Pellentesque vitae risus nec tortor faucibus tincidunt accumsan quis lorem. Phasellus vestibulum purus id lorem bibendum molestie. In tincidunt consequat quam. Donec auctor erat semper diam eleifend aliquam. Fusce egestas sapien tellus, sit amet blandit tellus suscipit vel. Maecenas eu dictum felis. Quisque bibendum nulla tellus, eu tincidunt urna eleifend ut.',
+  },
+};

.storybook/select.stories.tsx

@@ -13,6 +13,9 @@ const meta = {
         <ThemeProvider theme={theme}>
           <GlobalStyles />
           <Story />
+          <span style={{ color: 'red' }}>
+            Outer state handler has to be passed for select to work
+          </span>
         </ThemeProvider>
       </div>
     ),

src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,46 @@
+import { useId, useState } from 'react';
+import type { CheckboxProps } from './types.js';
+import { CheckboxComponent, CheckboxContent } from './styles.js';
+import React from 'react';
+import { theme } from '../../theme.js';
+
+export const Checkbox = ({
+  $sizeVariant = 'small',
+  $contentSizeVariant,
+  color = theme.colors.primary,
+  children,
+  disabled = false,
+  name,
+  value,
+  onClick,
+}: CheckboxProps) => {
+  const labelId = useId();
+
+  const handleClick = () => {
+    onClick(!value);
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row' }}>
+      <CheckboxComponent
+        name={name}
+        aria-labelledby={labelId}
+        color={color}
+        onClick={handleClick}
+        $sizeVariant={$sizeVariant}
+        isChecked={value}
+        disabled={disabled}
+        aria-disabled={disabled}
+        tabIndex={disabled ? -1 : 0}
+      />
+      <CheckboxContent
+        id={labelId}
+        $sizeVariant={
+          $contentSizeVariant === undefined ? $sizeVariant : $contentSizeVariant
+        }
+      >
+        {children}
+      </CheckboxContent>
+    </div>
+  );
+};

src/components/Checkbox/styles.ts

@@ -0,0 +1,81 @@
+import { styled } from 'styled-components';
+import type { CheckboxSizeVariant } from './types.js';
+import { theme } from '../../theme.js';
+
+const DEFAULT_CHECKBOX_SIZE = 17;
+const DEFAULT_CONTENT_FONT_SIZE = 10;
+
+const getCheckboxSize = (size: CheckboxSizeVariant) => {
+  switch (size) {
+    case 'small':
+      return `
+                width: ${DEFAULT_CHECKBOX_SIZE}px;
+                height: ${DEFAULT_CHECKBOX_SIZE}px;
+                border-radius: 4px;
+                border: 1px solid;
+            `;
+    case 'medium':
+      return `
+                width: ${DEFAULT_CHECKBOX_SIZE + 3}px;
+                height: ${DEFAULT_CHECKBOX_SIZE + 3}px;
+                border-radius: 6px;
+                border: 2px solid;
+            `;
+    case 'big':
+      return `
+                width: ${DEFAULT_CHECKBOX_SIZE + 6}px;
+                height: ${DEFAULT_CHECKBOX_SIZE + 6}px;
+                border-radius: 8px;
+                border: 3px solid;
+            `;
+  }
+};
+
+const getContentSize = (size: CheckboxSizeVariant) => {
+  switch (size) {
+    case 'small':
+      return `
+                font-size: ${DEFAULT_CONTENT_FONT_SIZE}pt;
+                margin-left: 7px;
+            `;
+    case 'medium':
+      return `
+                font-size: ${DEFAULT_CONTENT_FONT_SIZE + 2}pt;
+                margin-left: 10px;
+            `;
+    case 'big':
+      return `
+                font-size: ${DEFAULT_CONTENT_FONT_SIZE + 4}pt;
+                margin-left: 13px;
+            `;
+  }
+};
+
+export const CheckboxComponent = styled.button<{
+  $sizeVariant: CheckboxSizeVariant;
+  isChecked: boolean;
+  color: string;
+  disabled: boolean;
+}>`
+  ${({ $sizeVariant }) => $sizeVariant && getCheckboxSize($sizeVariant)}
+  cursor: pointer;
+
+  padding: 2px;
+  border-color: ${theme.colors.main};
+  outline: 1px solid
+    ${({ disabled }) => (disabled ? theme.colors.lightGray : theme.colors.dark)};
+  background-color: ${({ isChecked, color }) =>
+    isChecked ? color : theme.colors.main};
+
+  &:focus {
+    outline: 1px dashed ${theme.colors.dark};
+  }
+`;
+
+export const CheckboxContent = styled.p<{ $sizeVariant: CheckboxSizeVariant }>`
+  margin: 0;
+  ${({ $sizeVariant }) => $sizeVariant && getContentSize($sizeVariant)}
+
+  color: ${theme.colors.lightGray};
+  width: fit-content;
+`;

src/components/Checkbox/types.ts

@@ -0,0 +1,12 @@
+export interface CheckboxProps {
+  children: React.ReactNode;
+  $sizeVariant?: CheckboxSizeVariant;
+  $contentSizeVariant?: CheckboxSizeVariant;
+  color?: string;
+  disabled?: boolean;
+  name?: string;
+  value: boolean;
+  onClick: (value: boolean) => void;
+}
+
+export type CheckboxSizeVariant = 'small' | 'medium' | 'big';

src/components/Select/Select.tsx

@@ -36,10 +36,13 @@ export const Select = ({
     );
   }, [value, children]);
 
-  const handleOptionClick = useCallback((optionValue: string) => {
-    $onChange(optionValue);
-    setIsOpen(false);
-  }, [$onChange]);
+  const handleOptionClick = useCallback(
+    (optionValue: string) => {
+      $onChange(optionValue);
+      setIsOpen(false);
+    },
+    [$onChange],
+  );
 
   const handleUnfocus = (event: PointerEvent) => {
     if (!parentComponentRef.current?.contains(event.target as Node)) {
@@ -49,7 +52,7 @@ export const Select = ({
 
   useEffect(() => {
     if (parentComponentRef.current === null || !isOpen) return;
-    
+
     setTimeout(() => {
       document.addEventListener('click', handleUnfocus);
     }, 0);
@@ -71,7 +74,7 @@ export const Select = ({
         <SelectButtonLabelComponent>{$labelContent}</SelectButtonLabelComponent>
       )}
 
-      <SelectButtonComponent 
+      <SelectButtonComponent
         onClick={() => setIsOpen(!isOpen)}
         aria-haspopup="listbox"
         aria-expanded={isOpen}
@@ -85,10 +88,7 @@ export const Select = ({
         )}
       </SelectButtonComponent>
       {isOpen && (
-        <SelectListComponent
-          id="select-list"
-          role="listbox"
-        >
+        <SelectListComponent id="select-list" role="listbox">
           {Children.map(children, (child) => {
             if (!isValidElement(child)) return child;
 

src/index.tsx

@@ -3,3 +3,4 @@ export { Link } from './components/Link/Link.js';
 export { Input } from './components/Input/Input.js';
 export { Select } from './components/Select/Select.js';
 export { SelectChild } from './components/Select/SelectChild.js';
+export { Checkbox } from './components/Checkbox/Checkbox.js';