added base checkbox

GrabowskiM · GrabowskiM · commit d2dd5110ea0b · 2025-08-22T15:27:39.000+02:00
diff --git a/packages/assets/src/scss/inputs/_checkbox.scss b/packages/assets/src/scss/inputs/_checkbox.scss
@@ -1,6 +1,29 @@
 @use '../functions' as *;
 @use '../variables' as *;
 
+@mixin checkbox-active-state {
+    border-color: $color-primary-80;
+    background-color: $color-primary-80;
+
+    &::after {
+        border-color: $color-neutral-10;
+    }
+
+    &:disabled {
+        border-color: $color-primary-60;
+        background-color: $color-primary-60;
+    }
+
+    &.ids-input--error {
+        border-color: $color-error-80;
+        background-color: $color-error-80;
+
+        &::after {
+            border-color: $color-neutral-10;
+        }
+    }
+}
+
 .ids-checkbox {
     .ids-input--checkbox {
         -webkit-appearance: none;
@@ -27,43 +50,8 @@
             transform: rotate(-45deg);
         }
 
-        &:checked,
-        &:indeterminate {
-            border-color: $color-primary-80;
-            background-color: $color-primary-80;
-
-            &::after {
-                border-color: $color-neutral-10;
-            }
-
-            &:disabled {
-                border-color: $color-primary-60;
-                background-color: $color-primary-60;
-            }
-
-            &.ids-input--error {
-                border-color: $color-error-80;
-                background-color: $color-error-80;
-
-                &::after {
-                    border-color: $color-neutral-10;
-                }
-            }
-        }
-
-        &:indeterminate {
-            &::after {
-                background-color: $color-neutral-10;
-                height: calculateRem(2px);
-                top: 50%;
-                transform: translateY(-50%);
-            }
-
-            &.ids-input--error {
-                &::after {
-                    background-color: $color-neutral-10;
-                }
-            }
+        &:checked {
+            @include checkbox-active-state;
         }
     }
 }
diff --git a/packages/assets/src/scss/inputs/_three-state-checkbox.scss b/packages/assets/src/scss/inputs/_three-state-checkbox.scss
@@ -0,0 +1,24 @@
+@use '../functions' as *;
+@use '../variables' as *;
+@use './checkbox' as checkbox-mixins;
+
+.ids-three-state-checkbox {
+    @extend .ids-checkbox;
+    
+    .ids-input--checkbox:indeterminate {
+        @include checkbox-mixins.checkbox-active-state;
+
+        &::after {
+            background-color: $color-neutral-10;
+            height: calculateRem(2px);
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        &.ids-input--error {
+            &::after {
+                background-color: $color-neutral-10;
+            }
+        }
+    }
+}
diff --git a/packages/assets/src/scss/styles.scss b/packages/assets/src/scss/styles.scss
@@ -13,5 +13,6 @@
 
 @use 'inputs/checkbox';
 @use 'inputs/input-text';
+@use 'inputs/three-state-checkbox';
 
 @use 'ui/clear-btn';
diff --git a/packages/components/src/inputs/Checkbox/Checkbox.stories.tsx b/packages/components/src/inputs/Checkbox/Checkbox.stories.tsx
@@ -16,7 +16,7 @@ const meta: Meta<typeof CheckboxStateful> = {
         title: {
             control: 'text',
         },
-        value: {
+        checked: {
             control: 'boolean',
         },
     },
@@ -59,7 +59,7 @@ export const Checked: Story = {
     name: 'Checked',
     args: {
         name: 'default-input',
-        value: true,
+        checked: true,
     },
 };
 
@@ -68,7 +68,7 @@ export const CheckedDisabled: Story = {
     args: {
         name: 'default-input',
         disabled: true,
-        value: true,
+        checked: true,
     },
 };
 
@@ -77,6 +77,6 @@ export const CheckedError: Story = {
     args: {
         name: 'default-input',
         error: true,
-        value: true,
+        checked: true,
     },
 };
diff --git a/packages/components/src/inputs/Checkbox/Checkbox.tsx b/packages/components/src/inputs/Checkbox/Checkbox.tsx
@@ -1,70 +1,25 @@
 import React from 'react';
 
-import BaseInput from '@ids-internal/partials/BaseInput';
+import BaseCheckbox from '@ids-internal/partials/BaseCheckbox';
 import { createCssClassNames } from '@ids-internal/shared/css.class.names';
-import withStateValue from '@ids-internal/hoc/withStateValue';
+import withStateChecked from '@ids-internal/hoc/withStateChecked';
 
 import { CheckboxProps } from './Checkbox.types';
 
 const Checkbox = ({
-    name,
-    onBlur = () => undefined,
-    onChange = () => undefined,
-    onFocus = () => undefined,
-    onInput = () => undefined,
     className = '',
-    disabled = false,
-    error = false,
-    extraAria = {},
-    id = undefined,
-    inputClassName = '',
-    ref,
-    required = false,
-    title = '',
-    value = false,
+    ...restProps
 }: CheckboxProps) => {
     const checkboxClassName = createCssClassNames({
         'ids-checkbox': true,
         [className]: true,
     });
-    const componentOnBlur = (event: React.FocusEvent<HTMLInputElement>) => {
-        onBlur(event);
-    };
-    const componentOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        onChange(event.target.checked, event);
-    };
-    const componentOnFocus = (event: React.FocusEvent<HTMLInputElement>) => {
-        onFocus(event);
-    };
-    const componentOnInput = (event: React.ChangeEvent<HTMLInputElement>) => {
-        onInput(event.target.checked, event);
-    };
 
     return (
-        <div className={checkboxClassName}>
-            <BaseInput
-                className={inputClassName}
-                disabled={disabled}
-                error={error}
-                extraInputAttrs={{
-                    checked: value,
-                    onBlur: componentOnBlur,
-                    onChange: componentOnChange,
-                    onFocus: componentOnFocus,
-                    onInput: componentOnInput,
-                    ...extraAria,
-                }}
-                id={id}
-                name={name}
-                ref={ref}
-                required={required}
-                title={title}
-                type="checkbox"
-            />
-        </div>
+        <BaseCheckbox {...restProps} className={checkboxClassName} />
     );
 };
 
 export default Checkbox;
 
-export const CheckboxStateful = withStateValue<boolean>(Checkbox);
+export const CheckboxStateful = withStateChecked(Checkbox);
diff --git a/packages/components/src/inputs/Checkbox/Checkbox.types.ts b/packages/components/src/inputs/Checkbox/Checkbox.types.ts
@@ -1,18 +1,3 @@
-import { Ref } from 'react';
+import { BaseCheckboxProps } from '@ids-internal/partials/BaseCheckbox';
 
-import { BaseComponentAriaAttributes } from '@ids-types/general';
-
-export interface CheckboxProps extends BaseComponentAriaAttributes {
-    name: string;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    onChange?: (value: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
-    onInput?: (value: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
-    disabled?: boolean;
-    error?: boolean;
-    id?: string;
-    inputClassName?: string;
-    ref?: Ref<HTMLInputElement>;
-    required?: boolean;
-    value?: boolean;
-}
+export type CheckboxProps = BaseCheckboxProps;
diff --git a/packages/components/src/inputs/ThreeStateCheckbox/ThreeStateCheckbox.stories.tsx b/packages/components/src/inputs/ThreeStateCheckbox/ThreeStateCheckbox.stories.tsx
@@ -16,7 +16,7 @@ const meta: Meta<typeof ThreeStateCheckboxStateful> = {
         title: {
             control: 'text',
         },
-        value: {
+        checked: {
             control: 'boolean',
         },
     },
@@ -85,7 +85,7 @@ export const Checked: Story = {
     name: 'Checked',
     args: {
         name: 'default-input',
-        value: true,
+        checked: true,
     },
 };
 
@@ -94,7 +94,7 @@ export const CheckedDisabled: Story = {
     args: {
         name: 'default-input',
         disabled: true,
-        value: true,
+        checked: true,
     },
 };
 
@@ -103,6 +103,6 @@ export const CheckedError: Story = {
     args: {
         name: 'default-input',
         error: true,
-        value: true,
+        checked: true,
     },
 };
diff --git a/packages/components/src/inputs/ThreeStateCheckbox/ThreeStateCheckbox.tsx b/packages/components/src/inputs/ThreeStateCheckbox/ThreeStateCheckbox.tsx
@@ -1,22 +1,22 @@
 import React from 'react';
 
-import Checkbox from '../Checkbox';
+import BaseCheckbox from '@ids-internal/partials/BaseCheckbox';
 import { createCssClassNames } from '@ids-internal/shared/css.class.names';
-import withStateValue from '@ids-internal/hoc/withStateValue';
+import withStateChecked from '@ids-internal/hoc/withStateChecked';
 
 import { ThreeStateCheckboxProps } from './ThreeStateCheckbox.types';
 
 const ThreeStateCheckbox = ({ className = '', indeterminate = false, ...restProps }: ThreeStateCheckboxProps) => {
     const checkboxClassName = createCssClassNames({
-        'ids-checkbox--three-state': true,
+        'ids-three-state-checkbox': true,
         [className]: true,
     });
     const inputClassName = createCssClassNames({
         'ids-input--indeterminate': indeterminate,
     });
 
     return (
-        <Checkbox
+        <BaseCheckbox
             className={checkboxClassName}
             inputClassName={inputClassName}
             ref={(node) => {
@@ -31,4 +31,4 @@ const ThreeStateCheckbox = ({ className = '', indeterminate = false, ...restProp
 
 export default ThreeStateCheckbox;
 
-export const ThreeStateCheckboxStateful = withStateValue<boolean>(ThreeStateCheckbox);
+export const ThreeStateCheckboxStateful = withStateChecked(ThreeStateCheckbox);
diff --git a/packages/components/src/inputs/ThreeStateCheckbox/ThreeStateCheckbox.types.ts b/packages/components/src/inputs/ThreeStateCheckbox/ThreeStateCheckbox.types.ts
@@ -1,13 +1,13 @@
-import { CheckboxProps } from '../Checkbox';
+import { BaseCheckboxProps } from '@ids-internal/partials/BaseCheckbox';
 
-interface ThreeStateCheckboxIsIndeterminateProps extends CheckboxProps {
+interface ThreeStateCheckboxIsIndeterminateProps extends BaseCheckboxProps {
     indeterminate: true;
-    value: false;
+    checked: false;
 }
 
-interface ThreeStateCheckboxIsNotIndeterminateProps extends CheckboxProps {
+interface ThreeStateCheckboxIsNotIndeterminateProps extends BaseCheckboxProps {
     indeterminate: false;
-    value: boolean;
+    checked: boolean;
 }
 
 export type ThreeStateCheckboxProps = ThreeStateCheckboxIsIndeterminateProps | ThreeStateCheckboxIsNotIndeterminateProps;
diff --git a/packages/components/src/internal/hoc/withStateChecked.tsx b/packages/components/src/internal/hoc/withStateChecked.tsx
@@ -0,0 +1,29 @@
+import React, { FC, useState } from 'react';
+
+type OnChangeFn = (checked: boolean, ...args: any[]) => any; // eslint-disable-line @typescript-eslint/no-explicit-any
+interface WrappedComponentProps {
+    onChange?: OnChangeFn;
+    checked: boolean;
+    [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default (WrappedComponent: FC<any>) => {
+    const WrapperComponent = ({ checked, onChange, ...restProps }: WrappedComponentProps) => {
+        const [componentChecked, setComponentChecked] = useState(checked);
+
+        const handleChange = (...args: Parameters<OnChangeFn>): ReturnType<OnChangeFn> => {
+            setComponentChecked(args[0]);
+
+            if (onChange) {
+                onChange(...args);
+            }
+        };
+
+        return <WrappedComponent {...restProps} checked={componentChecked} onChange={handleChange} />;
+    };
+
+    WrapperComponent.displayName = `withStateChecked(${WrappedComponent.displayName ?? WrappedComponent.name})`;
+
+    return WrapperComponent;
+};
diff --git a/packages/components/src/internal/partials/BaseCheckbox/BaseCheckbox.tsx b/packages/components/src/internal/partials/BaseCheckbox/BaseCheckbox.tsx
diff --git a/packages/components/src/internal/partials/BaseCheckbox/BaseCheckbox.types.ts b/packages/components/src/internal/partials/BaseCheckbox/BaseCheckbox.types.ts
diff --git a/packages/components/src/internal/partials/BaseCheckbox/index.ts b/packages/components/src/internal/partials/BaseCheckbox/index.ts
