@true-engineering/true-react-common-ui-kit 3.45.2 → 4.0.0-alpha0

package/src/components/Icon/index.ts

@@ -1,5 +1,5 @@
-export * from './Icon';
-export * from './types';
-export { iconsList } from './icons-list';
-export type { IIconStyles } from './Icon.styles';
-export * from './snippet';
+export * from './Icon';
+export * from './types';
+export { iconsList } from './icons-list';
+export type { IIconStyles } from './Icon.styles';
+export * from './snippet';

package/src/components/Icon/snippet.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { Icon } from './Icon';
-import { IIcon } from './types';
-
-export const renderIcon = (icon: IIcon): ReactNode =>
-  typeof icon === 'string' ? <Icon type={icon} /> : icon;
+import { ReactNode } from 'react';
+import { Icon } from './Icon';
+import { IIcon } from './types';
+
+export const renderIcon = (icon: IIcon): ReactNode =>
+  typeof icon === 'string' ? <Icon type={icon} /> : icon;

package/src/components/Icon/types.ts

@@ -1,18 +1,18 @@
-import { ReactElement, SVGAttributes } from 'react';
-import { complexIcons } from './complexIcons';
-import { iconsList } from './icons-list';
-
-export interface ISvgIcon {
-  viewBox?: string;
-  paths?: Array<SVGAttributes<never>>;
-  circles?: Array<SVGAttributes<never>>;
-  rects?: Array<SVGAttributes<never>>;
-}
-
-export type ICommonIcon = keyof typeof iconsList;
-
-export type IComplexIcon = keyof typeof complexIcons;
-
-export type IIconType = ICommonIcon | IComplexIcon;
-
-export type IIcon = IIconType | ReactElement;
+import { ReactElement, SVGAttributes } from 'react';
+import { complexIcons } from './complexIcons';
+import { iconsList } from './icons-list';
+
+export interface ISvgIcon {
+  viewBox?: string;
+  paths?: Array<SVGAttributes<never>>;
+  circles?: Array<SVGAttributes<never>>;
+  rects?: Array<SVGAttributes<never>>;
+}
+
+export type ICommonIcon = keyof typeof iconsList;
+
+export type IComplexIcon = keyof typeof complexIcons;
+
+export type IIconType = ICommonIcon | IComplexIcon;
+
+export type IIcon = IIconType | ReactElement;

package/src/components/IconButton/IconButton.stories.tsx

@@ -1,32 +1,32 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { IIconType, iconsList } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
-import { IconButton } from './IconButton';
-import { ICON_BUTTON_SIZES, ICON_BUTTON_VIEWS } from './constants';
-
-const iconTypes = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
-
-export default {
-  title: 'Buttons/IconButton',
-  component: IconButton,
-  args: {
-    icon: iconTypes[0],
-    view: 'main',
-    size: 'm',
-    isDisabled: false,
-    isLoading: false,
-    isActive: false,
-  },
-  argTypes: {
-    icon: { options: iconTypes, control: 'select' },
-    size: { options: ICON_BUTTON_SIZES, control: 'inline-radio' },
-    view: { options: ICON_BUTTON_VIEWS, control: 'inline-radio' },
-  },
-  parameters: {
-    controls: {
-      exclude: ['tweakStyles', 'testId', 'data'],
-    },
-  },
-} as ComponentMeta<typeof IconButton>;
-
-export const Default: ComponentStory<typeof IconButton> = (args) => <IconButton {...args} />;
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { iconsList, IIconType } from '../Icon';
+import { complexIcons } from '../Icon/complexIcons';
+import { IconButton } from './IconButton';
+import { ICON_BUTTON_SIZES, ICON_BUTTON_VIEWS } from './constants';
+
+const icons = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+
+export default {
+  title: 'Buttons/IconButton',
+  component: IconButton,
+  args: {
+    icon: icons[0],
+    view: 'main',
+    size: 'm',
+    isDisabled: false,
+    isLoading: false,
+    isActive: false,
+  },
+  argTypes: {
+    icon: { options: icons, control: 'select' },
+    size: { options: ICON_BUTTON_SIZES, control: 'inline-radio' },
+    view: { options: ICON_BUTTON_VIEWS, control: 'inline-radio' },
+  },
+  parameters: {
+    controls: {
+      exclude: ['tweakStyles', 'testId', 'data'],
+    },
+  },
+} as ComponentMeta<typeof IconButton>;
+
+export const Default: ComponentStory<typeof IconButton> = (args) => <IconButton {...args} />;

package/src/components/IconButton/IconButton.styles.ts

@@ -1,84 +1,84 @@
-import { ITweakStyles, animations, createThemedStyles } from '../../theme';
-
-const BUTTON_SIZE_S = 24;
-const BUTTON_SIZE_M = 32;
-const ICON_SIZE = 20;
-
-export const useStyles = createThemedStyles('IconButton', {
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    cursor: 'pointer',
-    outline: 'none',
-    boxSizing: 'border-box',
-    transition: animations.defaultTransition,
-    transitionProperty: 'background-color, color, border-color',
-    border: 'none',
-    position: 'relative',
-    boxShadow: 'none',
-    borderRadius: '50%',
-    background: 'none',
-    padding: 0,
-    flexShrink: 0,
-
-    '&:disabled': {
-      extend: 'disabled',
-    },
-
-    '&:active': {
-      extend: 'active',
-    },
-  },
-
-  'cancel-light': {},
-
-  cancel: {},
-
-  main: {},
-
-  custom: {},
-
-  active: {},
-
-  disabled: {
-    cursor: 'not-allowed',
-    pointerEvents: 'none',
-  },
-
-  loading: {
-    '& $loader': {
-      display: 'block',
-    },
-  },
-
-  icon: {
-    display: 'flex',
-    alignItems: 'center',
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-  },
-
-  loader: {
-    display: 'none',
-    position: 'absolute',
-    left: '50%',
-    top: '50%',
-    transform: 'translate(-50%, -50%)',
-
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-  },
-
-  s: {
-    width: BUTTON_SIZE_S,
-    height: BUTTON_SIZE_S,
-  },
-
-  m: {
-    width: BUTTON_SIZE_M,
-    height: BUTTON_SIZE_M,
-  },
-});
-
-export type IIconButtonStyles = ITweakStyles<typeof useStyles>;
+import { ITweakStyles, animations, createThemedStyles } from '../../theme';
+
+const BUTTON_SIZE_S = 24;
+const BUTTON_SIZE_M = 32;
+const ICON_SIZE = 20;
+
+export const useStyles = createThemedStyles('IconButton', {
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    outline: 'none',
+    boxSizing: 'border-box',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color, color, border-color',
+    border: 'none',
+    position: 'relative',
+    boxShadow: 'none',
+    borderRadius: '50%',
+    background: 'none',
+    padding: 0,
+    flexShrink: 0,
+
+    '&:disabled': {
+      extend: 'disabled',
+    },
+
+    '&:active': {
+      extend: 'active',
+    },
+  },
+
+  'cancel-light': {},
+
+  cancel: {},
+
+  main: {},
+
+  custom: {},
+
+  active: {},
+
+  disabled: {
+    cursor: 'not-allowed',
+    pointerEvents: 'none',
+  },
+
+  loading: {
+    '& $loader': {
+      display: 'block',
+    },
+  },
+
+  icon: {
+    display: 'flex',
+    alignItems: 'center',
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+  },
+
+  loader: {
+    display: 'none',
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+  },
+
+  s: {
+    width: BUTTON_SIZE_S,
+    height: BUTTON_SIZE_S,
+  },
+
+  m: {
+    width: BUTTON_SIZE_M,
+    height: BUTTON_SIZE_M,
+  },
+});
+
+export type IIconButtonStyles = ITweakStyles<typeof useStyles>;

package/src/components/IconButton/IconButton.tsx

@@ -1,74 +1,74 @@
-import { forwardRef } from 'react';
-import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { renderIcon, IIcon } from '../Icon';
-import { ThemedPreloader } from '../ThemedPreloader';
-import { IIconButtonSize, IIconButtonView, IIconButtonHTMLBaseProps } from './types';
-import { useStyles, IIconButtonStyles } from './IconButton.styles';
-
-export interface IIconButtonProps
-  extends IIconButtonHTMLBaseProps,
-    ICommonProps<IIconButtonStyles> {
-  icon: IIcon;
-  /** @default 'm' */
-  size?: IIconButtonSize;
-  /** @default 'cancel-light' */
-  view?: IIconButtonView;
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default false */
-  isActive?: boolean;
-  /** @default false */
-  isLoading?: boolean;
-}
-
-export const IconButton = forwardRef<HTMLButtonElement, IIconButtonProps>(
-  (
-    {
-      icon,
-      size = 'm',
-      view = 'cancel-light',
-      isDisabled = false,
-      isActive = false,
-      isLoading = false,
-      type = 'button',
-      testId,
-      tweakStyles,
-      data,
-      onClick,
-      ...restProps
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
-
-    const hasNoAction = isDisabled || isLoading;
-
-    return (
-      <button
-        ref={ref}
-        className={clsx(classes.root, classes[view], classes[size], {
-          [classes.disabled]: isDisabled,
-          [classes.active]: isActive,
-          [classes.loading]: isLoading,
-        })}
-        type={type}
-        disabled={isDisabled}
-        onClick={hasNoAction ? undefined : onClick}
-        {...restProps}
-        {...addDataTestId(testId)}
-        {...addDataAttributes(data)}
-      >
-        {isLoading ? (
-          <span className={classes.loader}>
-            <ThemedPreloader type="default" useCurrentColor />
-          </span>
-        ) : (
-          <span className={classes.icon}>{renderIcon(icon)}</span>
-        )}
-      </button>
-    );
-  },
-);
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { renderIcon, IIcon } from '../Icon';
+import { ThemedPreloader } from '../ThemedPreloader';
+import { IIconButtonSize, IIconButtonView, IIconButtonHTMLBaseProps } from './types';
+import { useStyles, IIconButtonStyles } from './IconButton.styles';
+
+export interface IIconButtonProps
+  extends IIconButtonHTMLBaseProps,
+    ICommonProps<IIconButtonStyles> {
+  icon: IIcon;
+  /** @default 'm' */
+  size?: IIconButtonSize;
+  /** @default 'cancel-light' */
+  view?: IIconButtonView;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isActive?: boolean;
+  /** @default false */
+  isLoading?: boolean;
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IIconButtonProps>(
+  (
+    {
+      icon,
+      size = 'm',
+      view = 'cancel-light',
+      isDisabled = false,
+      isActive = false,
+      isLoading = false,
+      type = 'button',
+      testId,
+      tweakStyles,
+      data,
+      onClick,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const classes = useStyles({ theme: tweakStyles });
+
+    const hasNoAction = isDisabled || isLoading;
+
+    return (
+      <button
+        ref={ref}
+        className={clsx(classes.root, classes[view], classes[size], {
+          [classes.disabled]: isDisabled,
+          [classes.active]: isActive,
+          [classes.loading]: isLoading,
+        })}
+        type={type}
+        disabled={isDisabled}
+        onClick={hasNoAction ? undefined : onClick}
+        {...restProps}
+        {...addDataTestId(testId)}
+        {...addDataAttributes(data)}
+      >
+        {isLoading ? (
+          <span className={classes.loader}>
+            <ThemedPreloader type="default" useCurrentColor />
+          </span>
+        ) : (
+          <span className={classes.icon}>{renderIcon(icon)}</span>
+        )}
+      </button>
+    );
+  },
+);

package/src/components/IconButton/constants.ts

@@ -1,3 +1,3 @@
-export const ICON_BUTTON_SIZES = ['s', 'm'] as const;
-
-export const ICON_BUTTON_VIEWS = ['cancel', 'cancel-light', 'main', 'custom'] as const;
+export const ICON_BUTTON_SIZES = ['s', 'm'] as const;
+
+export const ICON_BUTTON_VIEWS = ['cancel', 'cancel-light', 'main', 'custom'] as const;

package/src/components/IconButton/index.ts

@@ -1,3 +1,3 @@
-export * from './IconButton';
-export * from './types';
-export type { IIconButtonStyles } from './IconButton.styles';
+export * from './IconButton';
+export * from './types';
+export type { IIconButtonStyles } from './IconButton.styles';

package/src/components/IconButton/types.ts

@@ -1,11 +1,11 @@
-import { ButtonHTMLAttributes } from 'react';
-import { ICON_BUTTON_SIZES, ICON_BUTTON_VIEWS } from './constants';
-
-export type IIconButtonSize = (typeof ICON_BUTTON_SIZES)[number];
-
-export type IIconButtonView = (typeof ICON_BUTTON_VIEWS)[number];
-
-export type IIconButtonHTMLBaseProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  'disabled' | 'style' | 'className'
->;
+import { ButtonHTMLAttributes } from 'react';
+import { ICON_BUTTON_SIZES, ICON_BUTTON_VIEWS } from './constants';
+
+export type IIconButtonSize = (typeof ICON_BUTTON_SIZES)[number];
+
+export type IIconButtonView = (typeof ICON_BUTTON_VIEWS)[number];
+
+export type IIconButtonHTMLBaseProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'disabled' | 'style' | 'className'
+>;

package/src/components/IncrementInput/IncrementInput.stories.tsx

@@ -1,31 +1,29 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { IncrementInput } from './IncrementInput';
-
-export default {
-  title: 'Inputs/IncrementInput',
-  component: IncrementInput,
-};
-
-const Template: ComponentStory<typeof IncrementInput> = (args) => {
-  const [value, setValue] = useState<number>();
-  return <IncrementInput {...args} value={value} onChange={(v) => setValue(v)} />;
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  min: 0,
-  max: 99,
-  step: 1,
-  intPartPrecision: 10,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  hasFloatingLabel: true,
-  hasRequiredLabel: true,
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  isDisabled: false,
-  isRequired: false,
-  isReadonly: false,
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { IncrementInput } from './IncrementInput';
+
+export default {
+  title: 'Inputs/IncrementInput',
+  component: IncrementInput,
+};
+
+const Template: ComponentStory<typeof IncrementInput> = (args) => {
+  const [value, setValue] = useState<number>();
+  return <IncrementInput {...args} value={value} onChange={(v) => setValue(v)} />;
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  min: 0,
+  max: 99,
+  step: 1,
+  intPartPrecision: 10,
+  label: 'Label',
+  placeholder: 'Placeholder',
+  isInvalid: false,
+  errorMessage: 'Error Text',
+  isDisabled: false,
+  isRequired: false,
+  isReadonly: false,
+};