From 2035f5d8d5ec27d898fd7991ca96ecf6ef641336 Mon Sep 17 00:00:00 2001 From: rozwader Date: Wed, 1 Jul 2026 13:19:14 +0200 Subject: [PATCH 1/2] feat: added checkbox and warnings if component has to be controlled from outside of the library scope --- .storybook/checkbox.stories.tsx | 35 ++++++++++++ .storybook/select.stories.tsx | 3 ++ src/components/Checkbox/Checkbox.tsx | 46 ++++++++++++++++ src/components/Checkbox/styles.ts | 81 ++++++++++++++++++++++++++++ src/components/Checkbox/types.ts | 12 +++++ src/components/Select/Select.tsx | 20 +++---- src/index.tsx | 1 + 7 files changed, 188 insertions(+), 10 deletions(-) create mode 100644 .storybook/checkbox.stories.tsx create mode 100644 src/components/Checkbox/Checkbox.tsx create mode 100644 src/components/Checkbox/styles.ts create mode 100644 src/components/Checkbox/types.ts diff --git a/.storybook/checkbox.stories.tsx b/.storybook/checkbox.stories.tsx new file mode 100644 index 0000000..423c822 --- /dev/null +++ b/.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) => ( +
+ + + + + Outer state handler has to be passed for checkbox to work + + +
+ ), + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + value: false, + onChange: () => 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.', + }, +}; diff --git a/.storybook/select.stories.tsx b/.storybook/select.stories.tsx index 0365c52..831424c 100644 --- a/.storybook/select.stories.tsx +++ b/.storybook/select.stories.tsx @@ -13,6 +13,9 @@ const meta = { + + Outer state handler has to be passed for select to work + ), diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx new file mode 100644 index 0000000..83b2812 --- /dev/null +++ b/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, + onChange, +}: CheckboxProps) => { + const labelId = useId(); + + const handleClick = () => { + onChange(!value); + }; + + return ( +
+ + + {children} + +
+ ); +}; diff --git a/src/components/Checkbox/styles.ts b/src/components/Checkbox/styles.ts new file mode 100644 index 0000000..352a17d --- /dev/null +++ b/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; +`; diff --git a/src/components/Checkbox/types.ts b/src/components/Checkbox/types.ts new file mode 100644 index 0000000..da22d0d --- /dev/null +++ b/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; + onChange: (value: boolean) => void; +} + +export type CheckboxSizeVariant = 'small' | 'medium' | 'big'; diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index 45aa856..b045765 100644 --- a/src/components/Select/Select.tsx +++ b/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 = ({ {$labelContent} )} - setIsOpen(!isOpen)} aria-haspopup="listbox" aria-expanded={isOpen} @@ -85,10 +88,7 @@ export const Select = ({ )} {isOpen && ( - + {Children.map(children, (child) => { if (!isValidElement(child)) return child; diff --git a/src/index.tsx b/src/index.tsx index 02047d1..5f21a82 100644 --- a/src/index.tsx +++ b/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'; From 4c80668f9d704ab55090a83ec21790d9d452b217 Mon Sep 17 00:00:00 2001 From: rozwader Date: Thu, 2 Jul 2026 13:16:32 +0200 Subject: [PATCH 2/2] fixes --- .storybook/checkbox.stories.tsx | 2 +- src/components/Checkbox/Checkbox.tsx | 4 ++-- src/components/Checkbox/types.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.storybook/checkbox.stories.tsx b/.storybook/checkbox.stories.tsx index 423c822..9c3b767 100644 --- a/.storybook/checkbox.stories.tsx +++ b/.storybook/checkbox.stories.tsx @@ -28,7 +28,7 @@ type Story = StoryObj; export const Default: Story = { args: { value: false, - onChange: () => console.log('1'), + 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.', }, diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 83b2812..ff00eef 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -12,12 +12,12 @@ export const Checkbox = ({ disabled = false, name, value, - onChange, + onClick, }: CheckboxProps) => { const labelId = useId(); const handleClick = () => { - onChange(!value); + onClick(!value); }; return ( diff --git a/src/components/Checkbox/types.ts b/src/components/Checkbox/types.ts index da22d0d..47cd179 100644 --- a/src/components/Checkbox/types.ts +++ b/src/components/Checkbox/types.ts @@ -6,7 +6,7 @@ export interface CheckboxProps { disabled?: boolean; name?: string; value: boolean; - onChange: (value: boolean) => void; + onClick: (value: boolean) => void; } export type CheckboxSizeVariant = 'small' | 'medium' | 'big';