@true-engineering/true-react-common-ui-kit 2.3.2 → 2.4.0

package/src/components/AddButton/AddButton.tsx

@@ -1,48 +1,48 @@
-import { FC } from 'react';
-import clsx from 'clsx';
-import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { AddButtonStyles, styles } from './AddButton.styles';
-
-export interface IAddButtonProps extends ICommonProps {
-  tweakStyles?: AddButtonStyles;
-  text: string;
-  type?: 'submit' | 'button';
-  isDisabled?: boolean;
-  isFullWidth?: boolean;
-  onClick?(): void | Promise<void>;
-}
-
-// TODO: Весьма сомнительный компонент
-export const AddButton: FC<IAddButtonProps> = ({
-  text,
-  type = 'button',
-  isDisabled,
-  onClick,
-  isFullWidth,
-  data,
-  tweakStyles,
-}) => {
-  const { classes } = useTheme('AddButton', styles, tweakStyles);
-
-  return (
-    <button
-      type={type}
-      className={clsx(
-        classes.root,
-        isDisabled && classes.disabled,
-        isFullWidth && classes.fullWidth,
-      )}
-      onClick={!isDisabled ? onClick : undefined}
-      disabled={isDisabled}
-      {...addDataAttributes(data)}
-    >
-      <div className={classes.icon}>
-        <Icon type={'plus'} />
-      </div>
-      <div>{text}</div>
-    </button>
-  );
-};
+import { FC } from 'react';
+import clsx from 'clsx';
+import { addDataAttributes } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { AddButtonStyles, styles } from './AddButton.styles';
+
+export interface IAddButtonProps extends ICommonProps {
+  tweakStyles?: AddButtonStyles;
+  text: string;
+  type?: 'submit' | 'button';
+  isDisabled?: boolean;
+  isFullWidth?: boolean;
+  onClick?(): void | Promise<void>;
+}
+
+// TODO: Весьма сомнительный компонент
+export const AddButton: FC<IAddButtonProps> = ({
+  text,
+  type = 'button',
+  isDisabled,
+  onClick,
+  isFullWidth,
+  data,
+  tweakStyles,
+}) => {
+  const { classes } = useTheme('AddButton', styles, tweakStyles);
+
+  return (
+    <button
+      type={type}
+      className={clsx(
+        classes.root,
+        isDisabled && classes.disabled,
+        isFullWidth && classes.fullWidth,
+      )}
+      onClick={!isDisabled ? onClick : undefined}
+      disabled={isDisabled}
+      {...addDataAttributes(data)}
+    >
+      <div className={classes.icon}>
+        <Icon type={'plus'} />
+      </div>
+      <div>{text}</div>
+    </button>
+  );
+};

package/src/components/AddButton/index.ts

@@ -1,2 +1,2 @@
-export * from './AddButton';
-export type { AddButtonStyles } from './AddButton.styles';
+export * from './AddButton';
+export type { AddButtonStyles } from './AddButton.styles';

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

@@ -1,52 +1,56 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { IIconType } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
-import { icons } from '../Icon/icons';
-import { Button, BUTTON_VIEWS, IButtonProps } from './Button';
-
-const sizeTypes: Array<IButtonProps['size']> = ['s', 'm', 'l', 'xl'];
-
-const iconTypes = [undefined, ...Object.keys(icons), ...Object.keys(complexIcons)] as IIconType[];
-
-const preloaderTypes: Array<IButtonProps['preloaderType']> = ['dots', 'default', 'logo'];
-
-export default {
-  title: 'Button',
-  component: Button,
-  args: {
-    size: 'l',
-    view: 'primary',
-    icon: undefined,
-    iconPosition: 'left',
-    preloaderType: 'dots',
-    children: 'Button',
-    isActive: false,
-    isInline: false,
-    isLoading: false,
-    isDisabled: false,
-    isFullWidth: false,
-  },
-  argTypes: {
-    view: { options: BUTTON_VIEWS, control: 'inline-radio' },
-    icon: { options: iconTypes, control: 'select' },
-    size: { options: sizeTypes, 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} />
-);
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { IIconType, iconsList } from '../Icon';
+import { complexIcons } from '../Icon/complexIcons';
+import { Button, IButtonProps } from './Button';
+import { BUTTON_VIEWS } from './constants';
+
+const sizeTypes: Array<IButtonProps['size']> = ['s', 'm', 'l', 'xl'];
+
+const iconTypes = [
+  undefined,
+  ...Object.keys(iconsList),
+  ...Object.keys(complexIcons),
+] as IIconType[];
+
+const preloaderTypes: Array<IButtonProps['preloaderType']> = ['dots', 'default', 'logo'];
+
+export default {
+  title: 'Button',
+  component: Button,
+  args: {
+    size: 'l',
+    view: 'primary',
+    icon: undefined,
+    iconPosition: 'left',
+    preloaderType: 'dots',
+    children: 'Button',
+    isActive: false,
+    isInline: false,
+    isLoading: false,
+    isDisabled: false,
+    isFullWidth: false,
+  },
+  argTypes: {
+    view: { options: BUTTON_VIEWS, control: 'inline-radio' },
+    icon: { options: iconTypes, control: 'select' },
+    size: { options: sizeTypes, 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} />
+);

package/src/components/Button/Button.styles.ts

@@ -1,196 +1,196 @@
-import { ComponentStyles } from '../../types';
-import { ThemedPreloaderStyles } from '../ThemedPreloader';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    cursor: 'pointer',
-    outline: 'none',
-    boxSizing: 'border-box',
-    transition: '0.25s ease-in-out',
-    transitionProperty: 'background-color, color, box-shadow, border-color',
-    maxWidth: '100%',
-    border: [1, 'solid', 'transparent'],
-    position: 'relative',
-    boxShadow: 'none',
-
-    '&[disabled]': {
-      cursor: 'default',
-      pointerEvents: 'none',
-    },
-  },
-
-  primary: {},
-  secondary: {},
-  outline: {},
-  warning: {},
-  destructive: {},
-  text: {},
-  custom: {},
-
-  children: {},
-
-  icon: {
-    width: 20,
-    height: 20,
-    flexShrink: 0,
-    transition: 'color 0.25s ease-in-out',
-  },
-
-  iconFromLeft: {
-    flexDirection: 'row',
-    gap: 6,
-
-    '& $icon': {
-      marginLeft: -4,
-    },
-  },
-
-  iconFromRight: {
-    flexDirection: 'row-reverse',
-    gap: 6,
-
-    '& $icon': {
-      marginRight: -4,
-    },
-  },
-
-  onlyIcon: {},
-
-  withIcon: {},
-
-  s: {
-    padding: [0, 12],
-    height: 32,
-    fontSize: 14,
-    letterSpacing: 0.15,
-
-    '&$onlyIcon': {
-      padding: 0,
-      width: 32,
-    },
-
-    '& $icon': {
-      width: 16,
-      height: 16,
-    },
-
-    '& $iconFromLeft': {
-      gap: 4,
-    },
-
-    '& $iconFromRight': {
-      gap: 4,
-    },
-  },
-
-  m: {
-    padding: [0, 12],
-    height: 42,
-    fontSize: 16,
-
-    '& $iconFromLeft': {
-      gap: 6,
-    },
-
-    '& $iconFromRight': {
-      gap: 6,
-    },
-
-    '&$onlyIcon': {
-      padding: 0,
-      width: 42,
-    },
-  },
-
-  l: {
-    padding: [0, 16],
-    height: 48,
-    fontSize: 16,
-
-    '& $iconFromLeft': {
-      gap: 6,
-    },
-
-    '& $iconFromRight': {
-      gap: 6,
-    },
-
-    '&$onlyIcon': {
-      padding: 0,
-      width: 48,
-    },
-  },
-
-  xl: {
-    padding: [0, 20],
-    height: 56,
-    fontSize: 16,
-
-    '&$onlyIcon': {
-      padding: 0,
-      width: 56,
-    },
-
-    '& $iconFromLeft': {
-      gap: 8,
-    },
-
-    '& $iconFromRight': {
-      gap: 8,
-    },
-  },
-
-  fullWidth: {
-    minWidth: 'auto',
-    width: '100%',
-  },
-
-  inline: {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-  },
-
-  active: {},
-
-  content: {
-    display: 'flex',
-    alignItems: 'center',
-    height: '100%',
-  },
-
-  loader: {
-    display: 'none',
-    position: 'absolute',
-    left: '50%',
-    top: '50%',
-    transform: 'translate(-50%, -50%)',
-  },
-
-  loading: {
-    '& $content': {
-      visibility: 'hidden',
-    },
-
-    '& $loader': {
-      display: 'block',
-    },
-  },
-
-  disabled: {},
-
-  tweakPreloader: {},
-};
-
-export const dotsPreloaderStyles: ThemedPreloaderStyles = {
-  tweakPreloaderComponent: {
-    fadedDot: {
-      width: 6,
-      height: 6,
-    },
-  },
-};
-
-export type ButtonStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../types';
+import { ThemedPreloaderStyles } from '../ThemedPreloader';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    outline: 'none',
+    boxSizing: 'border-box',
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'background-color, color, box-shadow, border-color',
+    maxWidth: '100%',
+    border: [1, 'solid', 'transparent'],
+    position: 'relative',
+    boxShadow: 'none',
+
+    '&[disabled]': {
+      cursor: 'default',
+      pointerEvents: 'none',
+    },
+  },
+
+  primary: {},
+  secondary: {},
+  outline: {},
+  warning: {},
+  destructive: {},
+  text: {},
+  custom: {},
+
+  children: {},
+
+  icon: {
+    width: 20,
+    height: 20,
+    flexShrink: 0,
+    transition: 'color 0.25s ease-in-out',
+  },
+
+  iconFromLeft: {
+    flexDirection: 'row',
+    gap: 6,
+
+    '& $icon': {
+      marginLeft: -4,
+    },
+  },
+
+  iconFromRight: {
+    flexDirection: 'row-reverse',
+    gap: 6,
+
+    '& $icon': {
+      marginRight: -4,
+    },
+  },
+
+  onlyIcon: {},
+
+  withIcon: {},
+
+  s: {
+    padding: [0, 12],
+    height: 32,
+    fontSize: 14,
+    letterSpacing: 0.15,
+
+    '&$onlyIcon': {
+      padding: 0,
+      width: 32,
+    },
+
+    '& $icon': {
+      width: 16,
+      height: 16,
+    },
+
+    '& $iconFromLeft': {
+      gap: 4,
+    },
+
+    '& $iconFromRight': {
+      gap: 4,
+    },
+  },
+
+  m: {
+    padding: [0, 12],
+    height: 42,
+    fontSize: 16,
+
+    '& $iconFromLeft': {
+      gap: 6,
+    },
+
+    '& $iconFromRight': {
+      gap: 6,
+    },
+
+    '&$onlyIcon': {
+      padding: 0,
+      width: 42,
+    },
+  },
+
+  l: {
+    padding: [0, 16],
+    height: 48,
+    fontSize: 16,
+
+    '& $iconFromLeft': {
+      gap: 6,
+    },
+
+    '& $iconFromRight': {
+      gap: 6,
+    },
+
+    '&$onlyIcon': {
+      padding: 0,
+      width: 48,
+    },
+  },
+
+  xl: {
+    padding: [0, 20],
+    height: 56,
+    fontSize: 16,
+
+    '&$onlyIcon': {
+      padding: 0,
+      width: 56,
+    },
+
+    '& $iconFromLeft': {
+      gap: 8,
+    },
+
+    '& $iconFromRight': {
+      gap: 8,
+    },
+  },
+
+  fullWidth: {
+    minWidth: 'auto',
+    width: '100%',
+  },
+
+  inline: {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+
+  active: {},
+
+  content: {
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+  },
+
+  loader: {
+    display: 'none',
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+  },
+
+  loading: {
+    '& $content': {
+      visibility: 'hidden',
+    },
+
+    '& $loader': {
+      display: 'block',
+    },
+  },
+
+  disabled: {},
+
+  tweakPreloader: {},
+};
+
+export const dotsPreloaderStyles: ThemedPreloaderStyles = {
+  tweakPreloaderComponent: {
+    fadedDot: {
+      width: 6,
+      height: 6,
+    },
+  },
+};
+
+export type ButtonStyles = ComponentStyles<typeof styles>;