@true-engineering/true-react-common-ui-kit 4.0.0-alpha40 → 4.0.0-alpha42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha40",
+  "version": "4.0.0-alpha42",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,7 +1,10 @@
 import { useState, FC } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { IExtendableProps } from '../../types';
 import { Checkbox as CheckboxComponent, ICheckboxProps } from './Checkbox';
 
+const CHECKBOX_SIZES = ['micro'] as const;
+
 const CheckboxComponentWithData: FC<ICheckboxProps<string>> = (props) => {
   const [isChecked, setIsChecked] = useState(false);
   const [isSemiChecked, setIsSemiChecked] = useState(false);
@@ -23,6 +26,7 @@ const CheckboxComponentWithData: FC<ICheckboxProps<string>> = (props) => {
         value={undefined}
         isChecked={isSemiChecked}
         onSelect={({ isSelected }) => setIsSemiChecked(isSelected)}
+        {...props}
       >
         Is Semi Checked
       </CheckboxComponent>
@@ -36,6 +40,7 @@ const meta: Meta<typeof CheckboxComponentWithData> = {
   args: {
     value: 'value',
     labelPosition: 'right',
+    size: undefined,
     isInvalid: false,
     isDisabled: false,
     isReadonly: false,
@@ -45,8 +50,16 @@ const meta: Meta<typeof CheckboxComponentWithData> = {
       exclude: ['data', 'tweakStyles', 'testId', 'onSelect'],
     },
   },
+  argTypes: {
+    size: { options: [undefined, ...CHECKBOX_SIZES], control: 'inline-radio' },
+  },
 };
 
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface ICheckboxSizes extends IExtendableProps<typeof CHECKBOX_SIZES> {}
+}
+
 export default meta;
 
 type Story = StoryObj<typeof CheckboxComponent>;

package/src/components/Checkbox/Checkbox.styles.ts

@@ -1,4 +1,5 @@
 import { createThemedStyles, ITweakStyles } from '../../theme';
+import { ICheckboxSizes } from './types';
 
 export const useStyles = createThemedStyles('Checkbox', {
   root: {
@@ -46,4 +47,4 @@ export const useStyles = createThemedStyles('Checkbox', {
   },
 });
 
-export type ICheckboxStyles = ITweakStyles<typeof useStyles>;
+export type ICheckboxStyles = ITweakStyles<typeof useStyles, ICheckboxSizes>;

package/src/components/Checkbox/Checkbox.tsx

@@ -1,18 +1,20 @@
 import { ReactNode, ChangeEvent, KeyboardEvent } from 'react';
 import clsx from 'clsx';
 import {
-  addDataTestId,
   getSelectKeyHandler,
+  isNotEmpty,
   isReactNodeNotEmpty,
+  addDataAttributes,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
+import { ICheckboxSize } from './types';
 import { useStyles, ICheckboxStyles } from './Checkbox.styles';
 
 export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
   value?: V;
   children?: ReactNode;
+  size?: ICheckboxSize;
   /** @default false */
   isChecked?: boolean;
   /** @default false */
@@ -34,6 +36,7 @@ export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
 export function Checkbox<V>({
   value,
   children,
+  size,
   isChecked = false,
   isSemiChecked = false,
   isInvalid = false,
@@ -55,14 +58,13 @@ export function Checkbox<V>({
 
   return (
     <label
-      className={clsx(classes.root, {
+      className={clsx(classes.root, isNotEmpty(size) && classes[size], {
         [classes.checked]: isSelected,
         [classes.invalid]: isInvalid,
         [classes.disabled]: isDisabled,
         [classes.labelPositionLeft]: labelPosition === 'left',
       })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <input
         className={classes.input}

package/src/components/Checkbox/types.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface ICheckboxSizes {}
+
+export type ICheckboxSize = keyof ICheckboxSizes;