@true-engineering/true-react-common-ui-kit 3.2.0 → 3.5.0

package/src/components/Button/constants.ts

@@ -1,9 +1,9 @@
-export const BUTTON_VIEWS = [
-  'primary',
-  'secondary',
-  'outline',
-  'warning',
-  'destructive',
-  'text',
-  'custom', // специальный стиль для кастомизации на своем проекте
-] as const;
+export const BUTTON_VIEWS = [
+  'primary',
+  'secondary',
+  'outline',
+  'warning',
+  'destructive',
+  'text',
+  'custom', // специальный стиль для кастомизации на своем проекте
+] as const;

package/src/components/Button/index.ts

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

package/src/components/Button/types.ts

@@ -1,5 +1,5 @@
-import { BUTTON_VIEWS } from './constants';
-
-export type IButtonSize = 's' | 'm' | 'l' | 'xl';
-
-export type IButtonView = (typeof BUTTON_VIEWS)[number];
+import { BUTTON_VIEWS } from './constants';
+
+export type IButtonSize = 's' | 'm' | 'l' | 'xl';
+
+export type IButtonView = (typeof BUTTON_VIEWS)[number];

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

@@ -1,28 +1,28 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Checkbox } from './Checkbox';
-
-export default {
-  title: 'Checkbox',
-  component: Checkbox,
-  args: {
-    value: 'value',
-    labelPosition: 'right',
-    isReadonly: false,
-    isInvalid: false,
-    isDisabled: false,
-    isSemiChecked: false,
-  },
-  parameters: {
-    controls: {
-      exclude: ['data', 'tweakStyles', 'testId', 'onSelect'],
-    },
-  },
-} as ComponentMeta<typeof Checkbox>;
-
-export const Default: ComponentStory<typeof Checkbox> = (args) => (
-  <div style={{ width: 200 }}>
-    <Checkbox {...args} onSelect={(value) => console.log('Value was selected', value)}>
-      <div>Some text</div>
-    </Checkbox>
-  </div>
-);
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Checkbox } from './Checkbox';
+
+export default {
+  title: 'Checkbox',
+  component: Checkbox,
+  args: {
+    value: 'value',
+    labelPosition: 'right',
+    isReadonly: false,
+    isInvalid: false,
+    isDisabled: false,
+    isSemiChecked: false,
+  },
+  parameters: {
+    controls: {
+      exclude: ['data', 'tweakStyles', 'testId', 'onSelect'],
+    },
+  },
+} as ComponentMeta<typeof Checkbox>;
+
+export const Default: ComponentStory<typeof Checkbox> = (args) => (
+  <div style={{ width: 200 }}>
+    <Checkbox {...args} onSelect={(value) => console.log('Value was selected', value)}>
+      <div>Some text</div>
+    </Checkbox>
+  </div>
+);

package/src/components/Checkbox/Checkbox.styles.ts

@@ -1,47 +1,47 @@
-import { createThemedStyles, ITweakStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Checkbox', {
-  root: {
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    gap: 14,
-    width: 'fit-content',
-  },
-
-  disabled: {
-    cursor: 'default',
-    pointerEvents: 'none',
-  },
-
-  input: {
-    width: 1,
-    height: 1,
-    position: 'absolute',
-    opacity: 0,
-  },
-
-  children: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-
-  check: {
-    width: 18,
-    height: 18,
-    borderRadius: 2,
-    flexShrink: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    boxSizing: 'border-box',
-  },
-
-  checked: {},
-
-  labelPositionLeft: {
-    flexDirection: 'row-reverse',
-  },
-});
-
-export type ICheckboxStyles = ITweakStyles<typeof useStyles>;
+import { createThemedStyles, ITweakStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Checkbox', {
+  root: {
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 14,
+    width: 'fit-content',
+  },
+
+  disabled: {
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+
+  input: {
+    width: 1,
+    height: 1,
+    position: 'absolute',
+    opacity: 0,
+  },
+
+  children: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  check: {
+    width: 18,
+    height: 18,
+    borderRadius: 2,
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+  },
+
+  checked: {},
+
+  labelPositionLeft: {
+    flexDirection: 'row-reverse',
+  },
+});
+
+export type ICheckboxStyles = ITweakStyles<typeof useStyles>;

package/src/components/Checkbox/Checkbox.tsx

@@ -1,83 +1,85 @@
-import { useEffect, useState, ReactNode } from 'react';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  getSelectKeyHandler,
-  isReactNodeNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { useStyles, ICheckboxStyles } from './Checkbox.styles';
-
-export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
-  children?: ReactNode;
-  isChecked: boolean | undefined;
-  isSemiChecked?: boolean;
-  isDisabled?: boolean;
-  isReadonly?: boolean;
-  isInvalid?: boolean;
-  value: V;
-  /**
-   * @default `right`
-   */
-  labelPosition?: 'right' | 'left';
-  onSelect(value: { value: V; isSelected: boolean }): void;
-}
-
-export function Checkbox<V>({
-  children,
-  isDisabled,
-  isReadonly,
-  isChecked = false,
-  value,
-  data,
-  testId,
-  isSemiChecked,
-  labelPosition = 'right',
-  tweakStyles,
-  onSelect,
-}: ICheckboxProps<V>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const [isSelected, setIsSelected] = useState(false);
-
-  const hasAction = !isDisabled && !isReadonly;
-
-  const onToggle = () => {
-    const newValue = !isSelected;
-    onSelect({ value, isSelected: newValue });
-    setIsSelected(newValue);
-  };
-
-  useEffect(() => {
-    setIsSelected(isChecked);
-  }, [isChecked]);
-
-  return (
-    <label
-      className={clsx(classes.root, {
-        [classes.disabled]: isDisabled,
-        [classes.labelPositionLeft]: labelPosition === 'left',
-      })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <input
-        type="checkbox"
-        className={classes.input}
-        checked={isSelected}
-        disabled={isDisabled}
-        readOnly={isReadonly}
-        {...(hasAction && {
-          onChange: onToggle,
-          onKeyDown: getSelectKeyHandler(onToggle),
-        })}
-      />
-      <div className={clsx(classes.check, isSelected && classes.checked)}>
-        <Icon type={isSemiChecked ? 'minus' : 'check'} />
-      </div>
-      {isReactNodeNotEmpty(children) && <div className={classes.children}>{children}</div>}
-    </label>
-  );
-}
+import { useEffect, useState, ReactNode } from 'react';
+import clsx from 'clsx';
+import {
+  addDataTestId,
+  getSelectKeyHandler,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { useStyles, ICheckboxStyles } from './Checkbox.styles';
+
+export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
+  children?: ReactNode;
+  isChecked: boolean | undefined;
+  /** @default false */
+  isSemiChecked?: boolean;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isReadonly?: boolean;
+  /** @default false */
+  isInvalid?: boolean;
+  value: V;
+  /** @default 'right' */
+  labelPosition?: 'right' | 'left';
+  onSelect: (value: { value: V; isSelected: boolean }) => void;
+}
+
+export function Checkbox<V>({
+  children,
+  isDisabled = false,
+  isReadonly = false,
+  isChecked = false,
+  value,
+  data,
+  testId,
+  isSemiChecked = false,
+  labelPosition = 'right',
+  tweakStyles,
+  onSelect,
+}: ICheckboxProps<V>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const [isSelected, setIsSelected] = useState(false);
+
+  const hasAction = !isDisabled && !isReadonly;
+
+  const onToggle = () => {
+    const isSelectedNext = !isSelected;
+    onSelect({ value, isSelected: isSelectedNext });
+    setIsSelected(isSelectedNext);
+  };
+
+  useEffect(() => {
+    setIsSelected(isChecked);
+  }, [isChecked]);
+
+  return (
+    <label
+      className={clsx(classes.root, {
+        [classes.disabled]: isDisabled,
+        [classes.labelPositionLeft]: labelPosition === 'left',
+      })}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <input
+        type="checkbox"
+        className={classes.input}
+        checked={isSelected}
+        disabled={isDisabled}
+        readOnly={isReadonly}
+        {...(hasAction && {
+          onChange: onToggle,
+          onKeyDown: getSelectKeyHandler(onToggle),
+        })}
+      />
+      <div className={clsx(classes.check, isSelected && classes.checked)}>
+        <Icon type={isSemiChecked ? 'minus' : 'check'} />
+      </div>
+      {isReactNodeNotEmpty(children) && <div className={classes.children}>{children}</div>}
+    </label>
+  );
+}

package/src/components/Checkbox/index.ts

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

package/src/components/CloseButton/CloseButton.styles.ts

@@ -1,33 +1,33 @@
-import { rgba } from '../../helpers';
-import { colors, createThemedStyles, ITweakStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('CloseButton', {
-  root: {
-    width: 40,
-    height: 40,
-    maxWidth: '100%',
-    maxHeight: '100%',
-    padding: 5,
-    color: colors.FONT_MEDIUM,
-    border: 0,
-    borderRadius: '50%',
-    appearance: 'none',
-    backgroundColor: 'transparent',
-    cursor: 'pointer',
-    transition: 'background-color 0.25s ease-in-out',
-
-    '&:hover': {
-      backgroundColor: rgba(colors.BORDER_MAIN, 0.5),
-    },
-
-    '&:focus': {
-      backgroundColor: colors.GREY_FOCUS,
-    },
-
-    '&:active': {
-      backgroundColor: rgba(colors.FONT_DISABLED, 0.5),
-    },
-  },
-});
-
-export type ICloseButtonStyles = ITweakStyles<typeof useStyles>;
+import { rgba } from '../../helpers';
+import { colors, createThemedStyles, ITweakStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('CloseButton', {
+  root: {
+    width: 40,
+    height: 40,
+    maxWidth: '100%',
+    maxHeight: '100%',
+    padding: 5,
+    color: colors.FONT_MEDIUM,
+    border: 0,
+    borderRadius: '50%',
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    transition: 'background-color 0.25s ease-in-out',
+
+    '&:hover': {
+      backgroundColor: rgba(colors.BORDER_MAIN, 0.5),
+    },
+
+    '&:focus': {
+      backgroundColor: colors.GREY_FOCUS,
+    },
+
+    '&:active': {
+      backgroundColor: rgba(colors.FONT_DISABLED, 0.5),
+    },
+  },
+});
+
+export type ICloseButtonStyles = ITweakStyles<typeof useStyles>;

package/src/components/CloseButton/CloseButton.tsx

@@ -1,33 +1,34 @@
-import { FC } from 'react';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { useStyles, ICloseButtonStyles } from './CloseButton.styles';
-
-export interface ICloseButtonProps extends ICommonProps<ICloseButtonStyles> {
-  iconType?: 'close' | 'close-large' | 'close-window';
-  onClose?(): void;
-}
-
-export const CloseButton: FC<ICloseButtonProps> = ({
-  tweakStyles,
-  testId,
-  data,
-  iconType = 'close',
-  onClose,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  return (
-    <button
-      type="button"
-      className={classes.root}
-      onClick={onClose}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <Icon type={iconType} />
-    </button>
-  );
-};
+import { FC } from 'react';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { useStyles, ICloseButtonStyles } from './CloseButton.styles';
+
+export interface ICloseButtonProps extends ICommonProps<ICloseButtonStyles> {
+  /** @default 'close' */
+  iconType?: 'close' | 'close-large' | 'close-window';
+  onClose?: () => void;
+}
+
+export const CloseButton: FC<ICloseButtonProps> = ({
+  tweakStyles,
+  testId,
+  data,
+  iconType = 'close',
+  onClose,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return (
+    <button
+      type="button"
+      className={classes.root}
+      onClick={onClose}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <Icon type={iconType} />
+    </button>
+  );
+};

package/src/components/CloseButton/index.ts

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

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

@@ -1,7 +1,7 @@
-import { Colors } from './Colors';
-
-export default {
-  title: 'Colors',
-};
-
-export const Default = (): JSX.Element => <Colors />;
+import { Colors } from './Colors';
+
+export default {
+  title: 'Colors',
+};
+
+export const Default = (): JSX.Element => <Colors />;

package/src/components/Colors/Colors.styles.ts

@@ -1,36 +1,36 @@
-import { createThemedStyles } from '../../theme';
-
-export 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],
-  },
-});
+import { createThemedStyles } from '../../theme';
+
+export 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],
+  },
+});

package/src/components/Colors/Colors.tsx

@@ -1,26 +1,26 @@
-import { FC, useContext } from 'react';
-import { ThemeContext } from '../../theme';
-import { useStyles } from './Colors.styles';
-
-// TODO: А зачем нужен то этот компонент кроме как ради сторис?????? мб его толкьо в сторис оформить?
-
-export const Colors: FC = () => {
-  const classes = useStyles();
-  const { theme } = useContext(ThemeContext);
-  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>
-  );
-};
+import { FC, useContext } from 'react';
+import { ThemeContext } from '../../theme';
+import { useStyles } from './Colors.styles';
+
+// TODO: А зачем нужен то этот компонент кроме как ради сторис?????? мб его толкьо в сторис оформить?
+
+export const Colors: FC = () => {
+  const classes = useStyles();
+  const { theme } = useContext(ThemeContext);
+  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>
+  );
+};

package/src/components/Colors/index.ts

@@ -1 +1 @@
-export * from './Colors';
+export * from './Colors';