@true-engineering/true-react-common-ui-kit 4.0.0-alpha44 → 4.0.0-alpha45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha44",
+  "version": "4.0.0-alpha45",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -69,14 +69,11 @@
   },
   "devDependencies": {
     "@babel/core": "7.20.12",
-    "@storybook/addon-essentials": "7.6.17",
-    "@storybook/blocks": "7.6.17",
-    "@storybook/react": "7.6.17",
-    "@storybook/react-vite": "7.6.17",
-    "@storybook/test": "7.6.17",
+    "@storybook/react": "9.1.10",
     "@swc/core": "^1.3.30",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
     "@types/lodash-es": "4.17.11",
+    "@types/node": "^24.7.2",
     "@types/react": "18.2.79",
     "@types/react-dom": "18.2.25",
     "@types/react-input-mask": "3.0.2",

package/src/components/AccountInfo/AccountInfo.stories.tsx

@@ -1,32 +1,24 @@
-import { ComponentStory } from '@storybook/react';
-import { AccountInfo } from './AccountInfo';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
+import { AccountInfo, IAccountInfoProps } from './AccountInfo';
 
-export default {
-  title: 'Data Display/AccountInfo',
-  component: AccountInfo,
-};
-
-const Template: ComponentStory<typeof AccountInfo> = (args) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 400,
-      height: 200,
-      border: '1px dotted rgba(0, 0, 0, 0.2)',
-    }}
-  >
-    <AccountInfo {...args} options={[{ item: 'Logout', onClick: () => console.log('logout') }]} />
-  </div>
+const Story: FC<IAccountInfoProps> = (args) => (
+  <AccountInfo {...args} options={[{ item: 'Logout', onClick: () => console.log('logout') }]} />
 );
 
-export const Default = Template.bind({});
-Default.args = {
-  accountName: 'Ivan Ivanov',
-};
-Default.parameters = {
-  controls: {
-    exclude: ['data', 'options', 'avatar'],
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/AccountInfo',
+  component: Story,
+  args: {
+    accountName: 'Ivan Ivanov',
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['avatar', 'options']),
+    },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/AddButton/AddButton.stories.tsx

@@ -1,21 +1,18 @@
-import { ComponentStory } from '@storybook/react';
-import { AddButton } from './AddButton';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { AddButton, IAddButtonProps } from '../AddButton';
 
-export default {
-  title: 'Buttons/AddButton',
-  component: AddButton,
-};
-
-const Template: ComponentStory<typeof AddButton> = (args) => (
-  <AddButton {...args} onClick={console.log} />
-);
+const Story: FC<IAddButtonProps> = (args) => <AddButton {...args} onClick={console.log} />;
 
-export const Default = Template.bind({});
-
-Default.args = {
-  text: 'Добавить билет',
-  isDisabled: false,
-  isFullWidth: false,
+const meta: Meta<typeof Story> = {
+  title: 'Buttons/AddButton',
+  component: Story,
+  args: {
+    text: 'Добавить билет',
+    isDisabled: false,
+    isFullWidth: false,
+  },
 };
 
-Default.parameters = { controls: { exclude: ['onClick'] } };
+export default meta;
+export const Default = {};

package/src/components/Button/Button.stories.tsx

@@ -1,13 +1,11 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { iconsMap } from '../Icon';
 import { Button, IButtonProps } from './Button';
-import { BUTTON_SIZES, BUTTON_VIEWS } from './constants';
-
-const icons = [undefined, ...Object.keys(iconsMap)];
+import { BUTTON_SIZES } from './constants';
 
 const preloaderTypes: Array<IButtonProps['preloaderType']> = ['dots', 'default', 'logo'];
 
-export default {
+const meta: Meta<typeof Button> = {
   title: 'Buttons/Button',
   component: Button,
   args: {
@@ -24,26 +22,11 @@ export default {
     isFullWidth: false,
   },
   argTypes: {
-    icon: { options: icons, control: 'select' },
+    icon: { options: [undefined, ...Object.keys(iconsMap)], control: 'select' },
     size: { options: BUTTON_SIZES, control: 'inline-radio' },
-    view: { options: BUTTON_VIEWS, control: 'inline-radio' },
-    iconPosition: { options: ['left', 'right'], control: 'inline-radio' },
     preloaderType: { options: preloaderTypes, control: 'inline-radio' },
   },
-  parameters: {
-    controls: {
-      exclude: [
-        'data',
-        'testId',
-        'onClick',
-        'onMouseDown',
-        'tweakStyles',
-        'shouldSkipTabNavigation',
-      ],
-    },
-  },
-} as ComponentMeta<typeof Button>;
+};
 
-export const Default: ComponentStory<typeof Button> = (args) => (
-  <Button {...args} key={args.size} />
-);
+export default meta;
+export const Default = {};

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

@@ -1,42 +1,48 @@
-import { useState, FC } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
 import { IExtendableProps } from '../../types';
-import { Checkbox as CheckboxComponent, ICheckboxProps } from './Checkbox';
+import { Checkbox, ICheckboxProps } from '../Checkbox';
 
-const CHECKBOX_SIZES = ['micro'] as const;
+const SIZES = ['micro'] as const;
 
-const CheckboxComponentWithData: FC<ICheckboxProps<string>> = (props) => {
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface ICheckboxSizes extends IExtendableProps<typeof SIZES> {}
+}
+
+const Story: FC<ICheckboxProps<string>> = (args) => {
   const [isChecked, setIsChecked] = useState(false);
   const [isSemiChecked, setIsSemiChecked] = useState(false);
 
   return (
     <div style={{ gap: 10, display: 'grid' }}>
-      <CheckboxComponent
+      <Checkbox
         isChecked={isChecked}
         isSemiChecked={isSemiChecked}
         onSelect={({ isSelected }) => {
           setIsChecked(isSelected);
           setIsSemiChecked(false);
         }}
-        {...props}
+        {...args}
       >
         Use wrapping paper
-      </CheckboxComponent>
-      <CheckboxComponent
+      </Checkbox>
+      <Checkbox
         value={undefined}
         isChecked={isSemiChecked}
         onSelect={({ isSelected }) => setIsSemiChecked(isSelected)}
-        {...props}
+        {...args}
       >
         Is Semi Checked
-      </CheckboxComponent>
+      </Checkbox>
     </div>
   );
 };
 
-const meta: Meta<typeof CheckboxComponentWithData> = {
+const meta: Meta<typeof Story> = {
   title: 'Controls/Checkbox',
-  component: CheckboxComponentWithData,
+  component: Story,
   args: {
     value: 'value',
     labelPosition: 'right',
@@ -45,23 +51,15 @@ const meta: Meta<typeof CheckboxComponentWithData> = {
     isDisabled: false,
     isReadonly: false,
   },
+  argTypes: {
+    size: { options: [undefined, ...SIZES], control: 'inline-radio' },
+  },
   parameters: {
     controls: {
-      exclude: ['data', 'tweakStyles', 'testId', 'onSelect'],
+      exclude: excludeStorybookParams(['isChecked', 'isSemiChecked']),
     },
   },
-  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>;
-
-export const Default: Story = {};
+export const Default = {};

package/src/components/CloseButton/CloseButton.stories.tsx

@@ -1,11 +1,10 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { CloseButton } from './CloseButton';
 
-export default {
+const meta: Meta<typeof CloseButton> = {
   title: 'Buttons/CloseButton',
   component: CloseButton,
-  args: {},
-  argTypes: {},
-} as ComponentMeta<typeof CloseButton>;
+};
 
-export const Default: ComponentStory<typeof CloseButton> = (args) => <CloseButton {...args} />;
+export default meta;
+export const Default = {};

package/src/components/Colors/Colors.stories.tsx

@@ -1,7 +1,67 @@
-import { Colors } from './Colors';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { createThemedStyles, useTheme } from '../../theme';
 
-export default {
+const useStyles = createThemedStyles({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+
+  colorCard: {
+    width: 120,
+    border: 'solid 1px #dde3ed',
+    borderRadius: 8,
+    color: '#222a37',
+    fontSize: 14,
+    margin: 6,
+  },
+
+  color: {
+    height: 120,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+
+  colorName: {
+    marginBottom: 6,
+    padding: 6,
+    overflow: 'hidden',
+  },
+
+  hex: {
+    marginTop: 6,
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+    padding: [0, 6, 6],
+  },
+});
+
+const Story: FC = () => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const { colors = {} } = theme;
+
+  return (
+    <div className={classes.root}>
+      {Object.entries(colors as Record<string, string>).map(([colorName, color]) => {
+        const name = colorName.split('_').join(' ').toLowerCase();
+        return (
+          <div key={colorName} className={classes.colorCard}>
+            <div className={classes.color} style={{ backgroundColor: color }} />
+            <div className={classes.colorName}>{`${name[0].toUpperCase()}${name.slice(1)}`}</div>
+            <div className={classes.hex}>{color}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const meta: Meta = {
   title: 'Data Display/Colors',
+  component: Story,
 };
 
-export const Default = (): JSX.Element => <Colors />;
+export default meta;
+export const Default = {};

package/src/components/ControlWrapper/ControlWrapper.stories.tsx

@@ -1,50 +1,55 @@
+import { FC } from 'react';
 import { doNothing } from '@true-engineering/true-react-platform-helpers';
-import { ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
+import { IExtendableProps } from '../../types';
 import { Icon, iconsMap } from '../Icon';
-import { ControlWrapper } from './ControlWrapper';
+import { ControlWrapper, IControlWrapperProps } from './ControlWrapper';
+import { GROUP_PLACEMENTS } from './constants';
 
-export default {
-  title: 'Controls/ControlWrapper',
-  component: ControlWrapper,
-};
+const SIZES = ['micro'] as const;
+
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface IControlWrapperSizes extends IExtendableProps<typeof SIZES> {}
+}
 
-const Template: ComponentStory<typeof ControlWrapper> = (args) => (
+const Story: FC<IControlWrapperProps> = (args) => (
   <ControlWrapper {...args} onClear={doNothing}>
     <div style={{ minWidth: 200, height: 48 }} />
   </ControlWrapper>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  isInvalid: false,
-  label: 'Label',
-  isFocused: false,
-  isRequired: false,
-  isLoading: false,
-  isDisabled: false,
-  hasValue: false,
-  icon: [
-    { iconComponent: <div>Бу</div>, onClick: () => console.log('close'), shouldResetSize: true },
-    { iconComponent: <Icon type="plus" /> },
-    { iconComponent: 'search', onClick: () => console.log('search') },
-  ],
-};
-
-Default.argTypes = {
-  icon: { control: 'select', options: [undefined, ...Object.keys(iconsMap)] },
-  groupPlacement: {
-    control: 'select',
-    options: [
-      'top',
-      'bottom',
-      'top-left',
-      'top-right',
-      'bottom-left',
-      'bottom-right',
-      'left',
-      'right',
-      'middle',
+const meta: Meta<typeof Story> = {
+  title: 'Controls/ControlWrapper',
+  component: Story,
+  args: {
+    label: 'Label',
+    isInvalid: false,
+    isFocused: false,
+    isRequired: false,
+    isLoading: false,
+    isDisabled: false,
+    hasValue: false,
+    isActive: false,
+    isFullWidth: false,
+    icon: [
+      { iconComponent: <div>Бу</div>, onClick: () => console.log('close'), shouldResetSize: true },
+      { iconComponent: <Icon type="plus" /> },
+      { iconComponent: 'search', onClick: () => console.log('search') },
     ],
   },
+  argTypes: {
+    size: { options: [undefined, ...SIZES], control: 'inline-radio' },
+    icon: { options: [undefined, ...Object.keys(iconsMap)], control: 'select' },
+    groupPlacement: { options: [undefined, ...GROUP_PLACEMENTS], control: 'select' },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['children']),
+    },
+  },
 };
+
+export default meta;
+export const Default = {};

package/src/components/ControlWrapper/ControlWrapper.tsx

@@ -15,7 +15,7 @@ import { IClickHandlerEvent, ICommonProps } from '../../types';
 import { Icon, IIcon, renderIcon } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { convertToControlWrapperIcon } from './helpers';
-import { IControlWrapperIcon, IControlWrapperSize } from './types';
+import { IControlWrapperIcon, IControlWrapperSize, IGroupPlacement } from './types';
 import { IControlWrapperStyles, useStyles } from './ControlWrapper.styles';
 
 export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles> {
@@ -23,16 +23,7 @@ export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles
   label?: ReactNode;
   icon?: IMaybeArray<IIcon | IControlWrapperIcon>;
   size?: IControlWrapperSize;
-  groupPlacement?:
-    | 'left'
-    | 'right'
-    | 'middle'
-    | 'top'
-    | 'bottom'
-    | 'top-left'
-    | 'top-right'
-    | 'bottom-left'
-    | 'bottom-right';
+  groupPlacement?: IGroupPlacement;
   /** @default false */
   isInvalid?: boolean;
   /** @default false */

package/src/components/ControlWrapper/constants.ts

@@ -0,0 +1,11 @@
+export const GROUP_PLACEMENTS = [
+  'left',
+  'right',
+  'middle',
+  'top',
+  'bottom',
+  'top-left',
+  'top-right',
+  'bottom-left',
+  'bottom-right',
+] as const;

package/src/components/ControlWrapper/index.ts

@@ -1,4 +1,5 @@
 export * from './ControlWrapper';
 export * from './helpers';
+export * from './constants';
 export * from './types';
 export type { IControlWrapperStyles } from './ControlWrapper.styles';

package/src/components/ControlWrapper/types.ts

@@ -1,12 +1,15 @@
 import { type Key } from 'react';
 import { IClickHandlerEvent } from '../../types';
 import { IIcon } from '../Icon';
+import { GROUP_PLACEMENTS } from './constants';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface IControlWrapperSizes {}
 
 export type IControlWrapperSize = keyof IControlWrapperSizes;
 
+export type IGroupPlacement = (typeof GROUP_PLACEMENTS)[number];
+
 // подумать над extend HTMLAttributes<HTMLDivElement>
 export interface IControlWrapperIcon {
   key?: Key;

package/src/components/DateInput/DateInput.stories.tsx

@@ -1,14 +1,9 @@
-import { useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { format, isValid } from 'date-fns';
-import { ComponentStory } from '@storybook/react';
-import { DateInput } from './DateInput';
+import { type Meta } from '@storybook/react';
+import { DateInput, IDateInputProps } from './DateInput';
 
-export default {
-  title: 'Inputs/DateInput',
-  component: DateInput,
-};
-
-const Template: ComponentStory<typeof DateInput> = ({ date, startDate, endDate, ...args }) => {
+const Story: FC<IDateInputProps> = ({ date, startDate, endDate, ...args }) => {
   const [value, setValue] = useState(date);
 
   const startDateValue = isValid(startDate)
@@ -35,26 +30,14 @@ const Template: ComponentStory<typeof DateInput> = ({ date, startDate, endDate,
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  date: '23.01.2023',
-  startDate: undefined,
-  endDate: undefined,
-  isRange: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'data',
-      'testId',
-      'tabIndex',
-      'onChange',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onKeyDown',
-    ],
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/DateInput',
+  component: Story,
+  args: {
+    date: '23.01.2023',
+    isRange: false,
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,7 +1,7 @@
-import { useState } from 'react';
+import { FC, useState } from 'react';
 import { ru } from 'date-fns/locale';
-import { ComponentStory } from '@storybook/react';
-import { DatePicker } from './DatePicker';
+import { type Meta } from '@storybook/react';
+import { DatePicker, IDatePickerProps } from './DatePicker';
 
 const months = [
   'Январь',
@@ -18,19 +18,9 @@ const months = [
   'Декабрь',
 ];
 
-export default {
-  title: 'Inputs/DatePicker',
-  component: DatePicker,
-};
-
-const Template: ComponentStory<typeof DatePicker> = (args) => {
+const Story: FC<IDatePickerProps> = (args) => {
   const [date, setDate] = useState<Date | null>(null);
 
-  const [startDate, setStartDate] = useState<Date | null>(
-    args.startDate ? new Date(args.startDate) : null,
-  );
-  const [endDate, setEndDate] = useState<Date | null>(args.endDate ? new Date(args.endDate) : null);
-
   return (
     <div
       style={{
@@ -50,52 +40,25 @@ const Template: ComponentStory<typeof DatePicker> = (args) => {
           testId="datepicker"
           months={months}
           selectedDate={date}
-          startDate={startDate}
-          endDate={endDate}
           minDate={new Date()}
           onChangeDate={setDate}
-          onChangeRange={(dates) => {
-            setStartDate(dates?.[0] ?? null);
-            setEndDate(dates?.[1] ?? null);
-          }}
         />
       </div>
     </div>
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Дата',
-  isRange: false,
-  isClearable: true,
-  shouldRenderPopperInBody: false,
-  popperPlacement: 'bottom-start',
-};
-
-Default.argTypes = {
-  popperPlacement: {
-    options: [
-      'bottom-start',
-      'bottom',
-      'bottom-end',
-      'top-start',
-      'top',
-      'top-end',
-      'right-start',
-      'right',
-      'right-end',
-      'left-start',
-      'left',
-      'left-end',
-    ],
-    control: 'select',
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/DatePicker',
+  component: Story,
+  args: {
+    label: 'Дата',
+    isRange: false,
+    isClearable: true,
+    shouldRenderPopperInBody: false,
+    popperPlacement: 'bottom-start',
   },
 };
 
-Default.parameters = {
-  controls: {
-    exclude: ['data', 'testId', 'tabIndex', 'onFocus', 'onBlur', 'onPaste', 'onKeyDown'],
-  },
-};
+export default meta;
+export const Default = {};