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

package/src/components/NewMoreMenu/NewMoreMenu.stories.tsx

@@ -1,23 +1,11 @@
-import { ComponentStory } from '@storybook/react';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
 import { colors } from '../../theme';
-import { NewMoreMenu } from './NewMoreMenu';
+import { IListItem } from '../List';
+import { INewMoreMenuProps, NewMoreMenu } from './NewMoreMenu';
 
-const positions = [
-  'top',
-  'bottom',
-  'right',
-  'left',
-  'top-start',
-  'top-end',
-  'bottom-start',
-  'bottom-end',
-  'right-start',
-  'right-end',
-  'left-start',
-  'left-end',
-];
-
-const menuItems = [
+const menuItems: IListItem[] = [
   { item: 'Печатать билет', onClick: console.log },
   { item: 'Выписать', onClick: console.log },
   { item: 'Аннулировать', onClick: console.log, shouldDrawSpacerBelow: true },
@@ -31,15 +19,22 @@ const menuItems = [
   },
 ];
 
-export default {
-  title: 'Data Display/NewMoreMenu',
-  component: NewMoreMenu,
-  argTypes: {
-    placement: { control: 'select', options: positions },
-  },
-};
+const placements = [
+  'top',
+  'bottom',
+  'right',
+  'left',
+  'top-start',
+  'top-end',
+  'bottom-start',
+  'bottom-end',
+  'right-start',
+  'right-end',
+  'left-start',
+  'left-end',
+];
 
-const Template: ComponentStory<typeof NewMoreMenu> = (args) => (
+const Story: FC<INewMoreMenuProps> = (args) => (
   <div
     style={{
       display: 'flex',
@@ -56,19 +51,26 @@ const Template: ComponentStory<typeof NewMoreMenu> = (args) => (
   </div>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  canBeFlipped: false,
-  isDisabled: false,
-  hasDefaultStateBackground: true,
-  placement: 'bottom-end',
-  shouldRenderInBody: false,
-  shouldHideOnScroll: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['items', 'middlewares', 'testId', 'data'],
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/NewMoreMenu',
+  component: Story,
+  args: {
+    canBeFlipped: false,
+    isDisabled: false,
+    hasDefaultStateBackground: true,
+    placement: 'bottom-end',
+    shouldRenderInBody: false,
+    shouldHideOnScroll: false,
+  },
+  argTypes: {
+    placement: { control: 'select', options: placements },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['items', 'middlewares']),
+    },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/Notification/Notification.stories.tsx

@@ -1,50 +1,52 @@
-import { Meta, Story } from '@storybook/react';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
 import { iconsMap } from '../Icon';
 import { INotificationProps, Notification } from './Notification';
 
-const icons = [undefined, ...Object.keys(iconsMap)];
-
-const lorem = 'Lorem ipsum dolor, sit amet consectetur adipisicing';
-
-interface IStory extends INotificationProps {
+interface INotificationCustomProps extends INotificationProps {
   shouldUseChildrenInstead: boolean;
 }
 
-export default {
+const Story: FC<INotificationCustomProps> = ({
+  shouldUseChildrenInstead,
+  title,
+  text,
+  ...args
+}) => (
+  <Notification
+    {...args}
+    title={!shouldUseChildrenInstead ? title : undefined}
+    text={!shouldUseChildrenInstead ? text : undefined}
+  >
+    {shouldUseChildrenInstead ? (
+      <div>
+        Some childrens with <a href="google.com">tags</a>
+      </div>
+    ) : undefined}
+  </Notification>
+);
+
+const meta: Meta<typeof Story> = {
   title: 'Data Display/Notification',
-  component: Notification,
+  component: Story,
   args: {
     title: 'Notification title',
-    text: lorem,
+    text: 'Lorem ipsum dolor, sit amet consectetur adipisicing',
     size: 's',
     type: 'info',
     isFullWidth: false,
     shouldUseChildrenInstead: false,
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['s', 'm', 'l'] },
-    icon: { options: icons, control: 'select' },
-    type: {
-      control: 'inline-radio',
-      options: ['error', 'info', 'warning', 'ok', 'not-ok', 'custom'],
+    icon: { options: [undefined, ...Object.keys(iconsMap)], control: 'select' },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['children']),
     },
   },
-} as Meta<IStory>;
-
-export const Default: Story<IStory> = ({ title, text, shouldUseChildrenInstead, ...args }) => {
-  const children = (
-    <div>
-      Some childrens with <a href="google.com">tags</a>
-    </div>
-  );
-
-  return (
-    <Notification
-      {...args}
-      title={!shouldUseChildrenInstead ? title : undefined}
-      text={!shouldUseChildrenInstead ? text : undefined}
-    >
-      {shouldUseChildrenInstead ? children : undefined}
-    </Notification>
-  );
 };
+
+export default meta;
+export const Default = {};

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -1,13 +1,8 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { NumberInput } from './NumberInput';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { INumberInputProps, NumberInput } from './NumberInput';
 
-export default {
-  title: 'Inputs/NumberInput',
-  component: NumberInput,
-};
-
-const Template: ComponentStory<typeof NumberInput> = (args) => {
+const Story: FC<INumberInputProps> = (args) => {
   const [value, setValue] = useState<number>();
   return (
     <div style={{ width: 300 }}>
@@ -16,22 +11,27 @@ const Template: ComponentStory<typeof NumberInput> = (args) => {
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  min: 0,
-  max: 9999,
-  precision: 3,
-  intPartPrecision: 7,
-  canBeFloat: false,
-  canBeNegative: false,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  infoMessage: 'Message Info',
-  units: 'RUB',
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  isDisabled: false,
-  isRequired: false,
-  isReadonly: false,
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/NumberInput',
+  component: Story,
+  args: {
+    min: 0,
+    max: 9999,
+    precision: 3,
+    intPartPrecision: 7,
+    canBeFloat: false,
+    canBeNegative: false,
+    label: 'Label',
+    placeholder: 'Placeholder',
+    infoMessage: 'Message Info',
+    units: 'RUB',
+    isInvalid: false,
+    errorMessage: 'Error Text',
+    isDisabled: false,
+    isRequired: false,
+    isReadonly: false,
+  },
 };
+
+export default meta;
+export const Default = {};

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -1,67 +1,41 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { phoneInfo } from '../../constants';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { GROUP_PLACEMENTS } from '../ControlWrapper';
 import { iconsMap } from '../Icon';
-import { PhoneInput } from './PhoneInput';
+import { IPhoneInputProps, PhoneInput } from './PhoneInput';
 import { IPhoneValue } from './types';
 
-const icons = [undefined, ...Object.keys(iconsMap)];
-const groupPlacements = [undefined, 'left', 'right', 'middle'];
-const borders = [undefined, 'left', 'top', 'right', 'bottom'];
-const errorPositions = ['bottom', 'top'];
-const countryCodes = phoneInfo.map((info) => info.countryCode);
-
-export default {
-  title: 'Inputs/PhoneInput',
-  component: PhoneInput,
-  argTypes: {
-    icon: { control: 'select', options: icons },
-    errorPosition: { control: 'inline-radio', options: errorPositions },
-    border: { control: 'inline-radio', options: borders },
-    groupPlacement: { control: 'select', options: groupPlacements },
-    defaultCountryCode: { control: 'select', options: countryCodes },
-  },
-};
-
-const Template: ComponentStory<typeof PhoneInput> = (args) => {
+const Story: FC<IPhoneInputProps> = (args) => {
   const [value, setValue] = useState<IPhoneValue>({
     dialCode: '7',
     phoneNumber: '9134567890',
     countryCode: 'RU',
   });
-
   return <PhoneInput {...args} value={value} onChange={setValue} />;
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Label',
-  infoMessage: 'Message Info',
-  icon: undefined,
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  isActive: false,
-  isDisabled: false,
-  isRequired: false,
-  isReadonly: false,
-  isClearable: false,
-  isLoading: false,
-  groupPlacement: undefined,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'testId',
-      'data',
-      'tabIndex',
-      'onChange',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onKeyDown',
-      'onIconClick',
-    ],
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/PhoneInput',
+  component: Story,
+  args: {
+    label: 'Label',
+    infoMessage: 'Message Info',
+    icon: undefined,
+    isInvalid: false,
+    errorMessage: 'Error Text',
+    isActive: false,
+    isDisabled: false,
+    isRequired: false,
+    isReadonly: false,
+    isClearable: false,
+    isLoading: false,
+    groupPlacement: undefined,
+  },
+  argTypes: {
+    icon: { control: 'select', options: [undefined, ...Object.keys(iconsMap)] },
+    groupPlacement: { options: [undefined, ...GROUP_PLACEMENTS], control: 'select' },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { PhoneInputCountryList } from './PhoneInputCountryList';
 
-export default {
+const meta: Meta<typeof PhoneInputCountryList> = {
   title: 'Inputs/PhoneInput/PhoneInputCountryList',
   component: PhoneInputCountryList,
   args: {
@@ -9,13 +9,7 @@ export default {
     placeholder: 'Поиск',
     noMatchesLabel: 'Ничего не найдено',
   },
-  parameters: {
-    controls: {
-      exclude: ['data', 'tweakStyles', 'testId'],
-    },
-  },
-} as ComponentMeta<typeof PhoneInputCountryList>;
+};
 
-export const Default: ComponentStory<typeof PhoneInputCountryList> = (args) => (
-  <PhoneInputCountryList {...args} />
-);
+export default meta;
+export const Default = {};

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

@@ -1,23 +1,18 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
 import { IExtendableProps } from '../../types';
-import { RadioButton } from './RadioButton';
+import { IRadioButtonProps, RadioButton } from './RadioButton';
 
-const RADIO_SIZES = [undefined, 'micro'] as const;
-
-export default {
-  title: 'Controls/RadioButton',
-  component: RadioButton,
-};
+const options = ['one', 'two', 'three'];
+const SIZES = [undefined, 'micro'] as const;
 
 declare module './types' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface IRadioButtonSizes extends IExtendableProps<typeof RADIO_SIZES> {}
+  export interface IRadioButtonSizes extends IExtendableProps<typeof SIZES> {}
 }
 
-const options = ['one', 'two', 'three'];
-
-const Template: ComponentStory<typeof RadioButton> = (args) => {
+const Story: FC<IRadioButtonProps<string>> = (args) => {
   const [activeIdx, setActiveIdx] = useState(0);
 
   return (
@@ -38,22 +33,24 @@ const Template: ComponentStory<typeof RadioButton> = (args) => {
   );
 };
 
-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'],
+const meta: Meta<typeof Story> = {
+  title: 'Controls/RadioButton',
+  component: Story,
+  args: {
+    children: 'Label',
+    size: undefined,
+    isInvalid: false,
+    isDisabled: false,
+  },
+  argTypes: {
+    size: { options: [undefined, ...SIZES], control: 'inline-radio' },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['value', 'groupName', 'isChecked']),
+    },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/SearchInput/SearchInput.stories.tsx

@@ -1,13 +1,8 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { SearchInput } from './SearchInput';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { ISearchInputProps, SearchInput } from './SearchInput';
 
-export default {
-  title: 'Inputs/SearchInput',
-  component: SearchInput,
-};
-
-const Template: ComponentStory<typeof SearchInput> = (args) => {
+const Story: FC<ISearchInputProps> = (args) => {
   const [value, setValue] = useState('');
   return (
     <div style={{ width: 320 }}>
@@ -16,9 +11,14 @@ const Template: ComponentStory<typeof SearchInput> = (args) => {
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  placeholder: 'Поиск',
-  isAutoSized: false,
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/SearchInput',
+  component: Story,
+  args: {
+    placeholder: 'Поиск',
+    isAutoSized: false,
+  },
 };
+
+export default meta;
+export const Default = {};

package/src/components/Select/CustomSelect.stories.tsx

@@ -1,13 +1,13 @@
-import { useState } from 'react';
+import { FC, useState } from 'react';
 import { createUseStyles } from 'react-jss';
 import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { type ComponentMeta, type ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { Button, type IButtonStyles } from '../Button';
 import { type IInputStyles, Input } from '../Input';
 import { TextButton } from '../TextButton';
 import { type ISelectProps, Select } from './Select';
 
-interface ISelectWithCustomProps<Option> extends ISelectProps<Option> {
+interface ISelectCustomProps<Option> extends ISelectProps<Option> {
   shouldUsePopper?: boolean;
   shouldRenderInBody?: boolean;
   shouldHideOnScroll?: boolean;
@@ -136,15 +136,15 @@ function CustomListFooter({ onReset, onClear }: ICustomListFooterProps) {
   );
 }
 
-function SelectWithCustomProps({
+const Story: FC<ISelectCustomProps<string>> = ({
   noMatchesLabel,
   shouldUsePopper,
   shouldRenderInBody,
   shouldHideOnScroll,
   canBeFlipped,
   scrollParent,
-  ...restProps
-}: ISelectWithCustomProps<string>) {
+  ...args
+}) => {
   const classes = useSelectStyles();
   const [inputValue, setInputValue] = useState<string>();
   const [options, setOptions] = useState<string[]>([]);
@@ -185,7 +185,7 @@ function SelectWithCustomProps({
   );
 
   const props = {
-    ...restProps,
+    ...args,
     onChange: setInputValue,
     value: inputValue,
     options,
@@ -214,38 +214,34 @@ function SelectWithCustomProps({
       }}
     />
   );
-}
+};
 
-export default {
+const meta: Meta<typeof Story> = {
   title: 'Controls/Select',
-  component: SelectWithCustomProps,
+  component: Story,
+  args: {
+    label: 'Dropdown',
+    noMatchesLabel: 'No matches',
+    isInvalid: false,
+    errorMessage: '',
+    isDisabled: false,
+    isRequired: false,
+    isClearable: false,
+    shouldUsePopper: false,
+    shouldRenderInBody: false,
+    shouldHideOnScroll: false,
+    shouldScrollToList: true,
+    canBeFlipped: false,
+    scrollParent: 'document',
+    size: undefined,
+  },
   argTypes: {
     scrollParent: {
       options: ['document', 'auto'],
       control: { type: 'select' },
     },
   },
-} as ComponentMeta<typeof SelectWithCustomProps>;
-
-const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
-  <SelectWithCustomProps {...args} />
-);
-
-export const CustomSelect = Template.bind({});
-
-CustomSelect.args = {
-  label: 'Dropdown',
-  noMatchesLabel: 'No matches',
-  isInvalid: false,
-  errorMessage: '',
-  isDisabled: false,
-  isRequired: false,
-  isClearable: false,
-  shouldUsePopper: false,
-  shouldRenderInBody: false,
-  shouldHideOnScroll: false,
-  shouldScrollToList: true,
-  canBeFlipped: false,
-  scrollParent: 'document',
-  size: undefined,
 };
+
+export default meta;
+export const CustomSelect = {};