feat(checkbox): added CheckBox component

components/checkbox/.npmignore

@@ -0,0 +1 @@
+src

components/checkbox/README.md

@@ -0,0 +1,21 @@
+# `@byndyusoft-ui/checkbox`
+
+A React CheckBox component.
+
+### Installation
+
+```sh
+npm i @byndyusoft-ui/checkbox
+# or
+yarn add @byndyusoft-ui/checkbox
+```
+
+### Usage
+
+```ts
+// Usage examples coming soon
+```
+
+### License
+
+Apache-2.0

components/checkbox/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@byndyusoft-ui/checkbox",
+  "version": "0.0.1",
+  "description": "Byndyusoft UI CheckBox React Component",
+  "keywords": [
+    "byndyusoft",
+    "byndyusoft-ui",
+    "react",
+    "checkbox"
+  ],
+  "author": "Tolmachev Serega <tolms@yandex.ru>",
+  "homepage": "https://github.com/Byndyusoft/ui/tree/master/components/checkbox#readme",
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Byndyusoft/ui.git"
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json",
+    "clean": "rimraf dist",
+    "lint:check": "npm run eslint:check && npm run prettier:check && npm run stylelint:check",
+    "lint:fix": "npm run eslint:fix && npm run prettier:fix && npm run stylelint:fix",
+    "eslint:check": "eslint src --config ../../eslint.config.js",
+    "eslint:fix": "eslint src --config ../../eslint.config.js --fix",
+    "prettier:check": "prettier --check '**/*.{ts,tsx,css,scss,json}' '!**/dist/**'",
+    "prettier:fix": "prettier --write '**/*.{ts,tsx,css,scss,json}' '!**/dist/**'",
+    "stylelint:check": "stylelint '**/*.{css,scss}' --allow-empty-input",
+    "stylelint:fix": "stylelint '**/*.{css,scss}' --fix --allow-empty-input"
+  },
+  "bugs": {
+    "url": "https://github.com/Byndyusoft/ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "react-hook-form": "^7.43.9"
+  }
+}

components/checkbox/rollup.config.js

@@ -0,0 +1,15 @@
+import typescript from '@rollup/plugin-typescript';
+import baseConfig from '../../rollup.base.config';
+
+export default {
+    ...baseConfig,
+    input: ['src/index.ts'],
+    plugins: [
+        ...baseConfig.plugins,
+        typescript({
+            tsconfig: './tsconfig.json',
+            module: 'ESNext',
+            exclude: ['src/*.stories.tsx', 'src/*.tests.tsx', 'node_modules']
+        })
+    ]
+};

components/checkbox/src/CheckBox.module.css

@@ -0,0 +1,77 @@
+/**
+ * Container
+ */
+.container {
+    position: relative;
+
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    width: fit-content;
+
+    user-select: none;
+    cursor: pointer;
+}
+
+.containerDisabled {
+    cursor: default;
+}
+
+/**
+ * Label
+ */
+.label {
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+.labelDisabled {
+    color: #7a7f82;
+}
+
+/**
+ * Indicator
+ */
+.indicator {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+    justify-content: center;
+
+    width: 1rem;
+    height: 1rem;
+
+    border: 1px solid #21272b;
+    border-radius: 0.125rem;
+    color: #fff;
+}
+
+.indicator:not(.indicatorDisabled):hover {
+    background-color: #e0e0e0;
+}
+
+.indicatorDisabled {
+    border-color: #adb0b2;
+}
+
+.indicatorChecked,
+.indicatorIndeterminate {
+    border: none;
+    background-color: #2b83ba;
+}
+
+.indicatorChecked:not(.indicatorDisabled):hover,
+.indicatorIndeterminate:not(.indicatorDisabled):hover {
+    background-color: #3b99d4;
+}
+
+.indicatorChecked.indicatorDisabled,
+.indicatorIndeterminate.indicatorDisabled {
+    background-color: #adb0b2;
+}
+
+.input:focus-visible + .indicator {
+    box-shadow: 0 0 0 2px #ffd86a;
+}

components/checkbox/src/CheckBox.stories.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/addon-docs';
+import { Markdown } from '@storybook/blocks';
+
+import Readme from '../README.md';
+
+<Meta title="components/CheckBox" />
+
+<Markdown>{Readme}</Markdown>

components/checkbox/src/CheckBox.tests.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useForm } from 'react-hook-form';
+// eslint-disable-next-line import/no-named-as-default
+import userEvent from '@testing-library/user-event';
+
+import CheckBox from './CheckBox';
+import CheckBoxLabel from './partials/CheckBoxLabel';
+
+interface IFormValues {
+    isChecked: boolean;
+}
+
+interface IFormProps {
+    defaultValues: IFormValues;
+    onSubmit: (values: IFormValues) => void;
+}
+
+const Form = ({ defaultValues, onSubmit }: IFormProps): JSX.Element => {
+    const { register, handleSubmit } = useForm<IFormValues>({ defaultValues });
+
+    return (
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        <form onSubmit={handleSubmit(onSubmit)}>
+            {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+            {/* @ts-expect-error */}
+            <CheckBox {...register('isChecked')}>Label</CheckBox>
+            <button type="submit">Submit</button>
+        </form>
+    );
+};
+
+describe('components/CheckBox', () => {
+    test('should render children', () => {
+        const onChange = vi.fn();
+
+        render(
+            <CheckBox isChecked onChange={onChange}>
+                Check box label
+            </CheckBox>
+        );
+
+        expect(screen.getByText('Check box label')).toBeInTheDocument();
+    });
+
+    test('should render checked checkbox', () => {
+        const onChange = vi.fn();
+
+        render(
+            <CheckBox isChecked onChange={onChange}>
+                Check box label
+            </CheckBox>
+        );
+
+        expect(screen.getByRole('checkbox')).toBeChecked();
+    });
+
+    test('should render unchecked checkbox', () => {
+        const onChange = vi.fn();
+
+        render(
+            <CheckBox isChecked={false} onChange={onChange}>
+                Check box label
+            </CheckBox>
+        );
+
+        expect(screen.getByRole('checkbox')).not.toBeChecked();
+    });
+
+    test('should render disabled checkbox', () => {
+        const onChange = vi.fn();
+
+        render(
+            <CheckBox isChecked isDisabled onChange={onChange}>
+                Disabled check box label
+            </CheckBox>
+        );
+
+        expect(screen.getByRole('checkbox')).toBeDisabled();
+    });
+
+    test('should render indeterminate checkbox', () => {
+        const onChange = vi.fn();
+
+        render(
+            <CheckBox isChecked={false} isIndeterminate onChange={onChange}>
+                Indeterminate check box label
+            </CheckBox>
+        );
+
+        expect(screen.getByRole('checkbox')).toBePartiallyChecked();
+    });
+
+    test('should works with react-hook-form correctly', async () => {
+        const onSubmit = vi.fn();
+        const defaultValues = {
+            isChecked: true
+        };
+
+        render(<Form defaultValues={defaultValues} onSubmit={onSubmit} />);
+
+        expect(screen.getByRole('checkbox')).toBeChecked();
+
+        await userEvent.click(screen.getByRole('checkbox'));
+        expect(screen.getByRole('checkbox')).not.toBeChecked();
+
+        await userEvent.click(screen.getByText('Submit'));
+        expect(onSubmit).toHaveBeenCalledWith({ isChecked: false }, expect.any(Object));
+    });
+
+    test('should throw error without using context', () => {
+        expect(() => render(<CheckBoxLabel>some label text</CheckBoxLabel>)).toThrow();
+    });
+});

components/checkbox/src/CheckBox.tsx

@@ -0,0 +1,31 @@
+import React, { JSX, forwardRef } from 'react';
+
+import { ICheckBoxProps } from './CheckBox.types';
+import getDefaultCheckBoxClassNames from './utilities/getDefaultCheckBoxClassNames';
+
+import CheckBoxContainer from './partials/CheckBoxContainer';
+import CheckBoxIndicator from './partials/CheckBoxIndicator';
+import CheckBoxLabel from './partials/CheckBoxLabel';
+
+const CheckBox = forwardRef<HTMLInputElement, ICheckBoxProps>(
+    (
+        { children, classNames = getDefaultCheckBoxClassNames(), labelPosition = 'right', renderIndicator, ...props },
+        ref
+    ): JSX.Element => (
+        <CheckBoxContainer classNames={classNames.container} ref={ref} {...props}>
+            {labelPosition === 'left' && <CheckBoxLabel classNames={classNames.label}>{children}</CheckBoxLabel>}
+
+            {renderIndicator ? (
+                renderIndicator(classNames.indicator)
+            ) : (
+                <CheckBoxIndicator classNames={classNames.indicator} />
+            )}
+
+            {labelPosition === 'right' && <CheckBoxLabel classNames={classNames.label}>{children}</CheckBoxLabel>}
+        </CheckBoxContainer>
+    )
+);
+
+CheckBox.displayName = 'CheckBox';
+
+export default CheckBox;

components/checkbox/src/CheckBox.types.ts

@@ -0,0 +1,40 @@
+import { InputHTMLAttributes } from 'react';
+
+export interface ICheckBoxClassNames {
+    container?: ICheckBoxContainerClassNames;
+    indicator?: ICheckBoxIndicatorClassNames;
+    label?: ICheckBoxLabelClassNames;
+}
+
+export interface ICheckBoxContainerClassNames {
+    main?: string;
+    disabled?: string;
+    input?: string;
+}
+
+export interface ICheckBoxIndicatorClassNames {
+    main?: string;
+    checked?: string;
+    disabled?: string;
+    indeterminate?: string;
+}
+
+export interface ICheckBoxLabelClassNames {
+    main?: string;
+    disabled?: string;
+}
+
+export interface ICheckBoxInputProps
+    extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'disabled' | 'id' | 'type'> {
+    id?: string;
+    isChecked: boolean;
+    isDisabled?: boolean;
+    isIndeterminate?: boolean;
+}
+
+export interface ICheckBoxProps extends ICheckBoxInputProps {
+    className?: string;
+    classNames?: ICheckBoxClassNames;
+    labelPosition?: 'left' | 'right';
+    renderIndicator?: (classNames?: ICheckBoxIndicatorClassNames) => JSX.Element;
+}