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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha40",
+  "version": "4.0.0-alpha43",
   "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;

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -1,12 +1,20 @@
 import { useState } from 'react';
 import { ComponentStory } from '@storybook/react';
+import { IExtendableProps } from '../../types';
 import { RadioButton } from './RadioButton';
 
+const RADIO_SIZES = [undefined, 'micro'] as const;
+
 export default {
   title: 'Controls/RadioButton',
   component: RadioButton,
 };
 
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface IRadioButtonSizes extends IExtendableProps<typeof RADIO_SIZES> {}
+}
+
 const options = ['one', 'two', 'three'];
 
 const Template: ComponentStory<typeof RadioButton> = (args) => {
@@ -34,11 +42,16 @@ export const Default = Template.bind({});
 
 Default.args = {
   children: 'Label',
+  size: undefined,
   // isChecked: false,
   isInvalid: false,
   isDisabled: false,
 };
 
+Default.argTypes = {
+  size: { options: [undefined, ...RADIO_SIZES], control: 'inline-radio' },
+};
+
 Default.parameters = {
   controls: {
     exclude: ['data', 'value', 'groupName', 'isChecked', 'onChange'],

package/src/components/RadioButton/RadioButton.styles.ts

@@ -1,4 +1,5 @@
 import { ITweakStyles, createThemedStyles } from '../../theme';
+import { IRadioButtonSizes } from './types';
 
 export const useStyles = createThemedStyles('RadioButton', {
   input: {
@@ -34,4 +35,4 @@ export const useStyles = createThemedStyles('RadioButton', {
   isInvalid: {},
 });
 
-export type IRadioButtonStyles = ITweakStyles<typeof useStyles>;
+export type IRadioButtonStyles = ITweakStyles<typeof useStyles, IRadioButtonSizes>;

package/src/components/RadioButton/RadioButton.tsx

@@ -1,14 +1,19 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import {
+  isNotEmpty,
+  isReactNodeNotEmpty,
+  addDataAttributes,
+} from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
+import { IRadioButtonSize } from './types';
 import { useStyles, IRadioButtonStyles } from './RadioButton.styles';
 
 export interface IRadioButtonProps<Value extends string> extends ICommonProps<IRadioButtonStyles> {
   children?: ReactNode;
   value: Value;
   groupName: string;
+  size?: IRadioButtonSize;
   isChecked?: boolean;
   /** @default false */
   isDisabled?: boolean;
@@ -21,6 +26,7 @@ export function RadioButton<Value extends string>({
   children,
   value,
   groupName,
+  size,
   isChecked,
   isDisabled = false,
   isInvalid = false,
@@ -33,10 +39,11 @@ export function RadioButton<Value extends string>({
 
   return (
     <label
-      className={clsx(classes.label, isDisabled && classes.isDisabled)}
+      className={clsx(classes.label, isNotEmpty(size) && classes[size], {
+        [classes.isDisabled]: isDisabled,
+      })}
       htmlFor={`${groupName}--${value}`}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <input
         id={`${groupName}--${value}`}

package/src/components/RadioButton/types.ts

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

package/src/components/TextButton/TextButton.stories.tsx

@@ -10,7 +10,7 @@ export default {
   component: TextButton,
   args: {
     children: 'Text Button',
-    icon: 'chevron-right-small',
+    icon: 'calendar',
     size: 'l',
     view: 'primary',
     isBold: false,