@true-engineering/true-react-common-ui-kit 3.19.0 → 3.20.1

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

@@ -1,200 +1,200 @@
-import { animations, createThemedStyles, ITweakStyles } from '../../theme';
-import { IThemedPreloaderStyles } from '../ThemedPreloader';
-import { IButtonSize } from './types';
-
-export const useStyles = createThemedStyles('Button', {
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    cursor: 'pointer',
-    outline: 'none',
-    boxSizing: 'border-box',
-    transition: animations.defaultTransition,
-    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,
-  },
-
-  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: {},
-});
-
-const dotsPreloaderStyles: IThemedPreloaderStyles = {
-  tweakDotsPreloader: {
-    fadedDot: {
-      width: 6,
-      height: 6,
-    },
-  },
-};
-
-export const getPreloaderStyles = (size: IButtonSize): IThemedPreloaderStyles | undefined =>
-  size === 's' || size === 'm' ? dotsPreloaderStyles : undefined;
-
-export type IButtonStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakPreloader: IThemedPreloaderStyles }
->;
+import { animations, createThemedStyles, ITweakStyles } from '../../theme';
+import { IThemedPreloaderStyles } from '../ThemedPreloader';
+import { IButtonSize } from './types';
+
+export const useStyles = createThemedStyles('Button', {
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    outline: 'none',
+    boxSizing: 'border-box',
+    transition: animations.defaultTransition,
+    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,
+  },
+
+  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: {},
+});
+
+const dotsPreloaderStyles: IThemedPreloaderStyles = {
+  tweakDotsPreloader: {
+    fadedDot: {
+      width: 6,
+      height: 6,
+    },
+  },
+};
+
+export const getPreloaderStyles = (size: IButtonSize): IThemedPreloaderStyles | undefined =>
+  size === 's' || size === 'm' ? dotsPreloaderStyles : undefined;
+
+export type IButtonStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakPreloader: IThemedPreloaderStyles }
+>;

package/src/components/Button/constants.ts

@@ -1,11 +1,11 @@
-export const BUTTON_SIZES = ['s', 'm', 'l', 'xl'] as const;
-
-export const BUTTON_VIEWS = [
-  'primary',
-  'secondary',
-  'outline',
-  'warning',
-  'destructive',
-  'text',
-  'custom', // специальный стиль для кастомизации на своем проекте
-] as const;
+export const BUTTON_SIZES = ['s', 'm', 'l', 'xl'] 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_SIZES, BUTTON_VIEWS } from './constants';
-
-export type IButtonSize = (typeof BUTTON_SIZES)[number];
-
-export type IButtonView = (typeof BUTTON_VIEWS)[number];
+import { BUTTON_SIZES, BUTTON_VIEWS } from './constants';
+
+export type IButtonSize = (typeof BUTTON_SIZES)[number];
+
+export type IButtonView = (typeof BUTTON_VIEWS)[number];

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

@@ -1,54 +1,54 @@
-import { useState, FC } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Checkbox as CheckboxComponent, ICheckboxProps } from './Checkbox';
-
-const CheckboxComponentWithData: FC<ICheckboxProps<string>> = (props) => {
-  const [isChecked, setIsChecked] = useState(false);
-  const [isSemiChecked, setIsSemiChecked] = useState(false);
-
-  return (
-    <div style={{ gap: 10, display: 'grid' }}>
-      <CheckboxComponent
-        isChecked={isChecked}
-        isSemiChecked={isSemiChecked}
-        onSelect={({ isSelected }) => {
-          setIsChecked(isSelected);
-          setIsSemiChecked(false);
-        }}
-        {...props}
-      >
-        Use wrapping paper
-      </CheckboxComponent>
-      <CheckboxComponent
-        value={undefined}
-        isChecked={isSemiChecked}
-        onSelect={({ isSelected }) => setIsSemiChecked(isSelected)}
-      >
-        Is Semi Checked
-      </CheckboxComponent>
-    </div>
-  );
-};
-
-const meta: Meta<typeof CheckboxComponentWithData> = {
-  title: 'Controls/Checkbox',
-  component: CheckboxComponentWithData,
-  args: {
-    value: 'value',
-    labelPosition: 'right',
-    isInvalid: false,
-    isDisabled: false,
-    isReadonly: false,
-  },
-  parameters: {
-    controls: {
-      exclude: ['data', 'tweakStyles', 'testId', 'onSelect'],
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof CheckboxComponent>;
-
-export const Default: Story = {};
+import { useState, FC } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Checkbox as CheckboxComponent, ICheckboxProps } from './Checkbox';
+
+const CheckboxComponentWithData: FC<ICheckboxProps<string>> = (props) => {
+  const [isChecked, setIsChecked] = useState(false);
+  const [isSemiChecked, setIsSemiChecked] = useState(false);
+
+  return (
+    <div style={{ gap: 10, display: 'grid' }}>
+      <CheckboxComponent
+        isChecked={isChecked}
+        isSemiChecked={isSemiChecked}
+        onSelect={({ isSelected }) => {
+          setIsChecked(isSelected);
+          setIsSemiChecked(false);
+        }}
+        {...props}
+      >
+        Use wrapping paper
+      </CheckboxComponent>
+      <CheckboxComponent
+        value={undefined}
+        isChecked={isSemiChecked}
+        onSelect={({ isSelected }) => setIsSemiChecked(isSelected)}
+      >
+        Is Semi Checked
+      </CheckboxComponent>
+    </div>
+  );
+};
+
+const meta: Meta<typeof CheckboxComponentWithData> = {
+  title: 'Controls/Checkbox',
+  component: CheckboxComponentWithData,
+  args: {
+    value: 'value',
+    labelPosition: 'right',
+    isInvalid: false,
+    isDisabled: false,
+    isReadonly: false,
+  },
+  parameters: {
+    controls: {
+      exclude: ['data', 'tweakStyles', 'testId', 'onSelect'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckboxComponent>;
+
+export const Default: Story = {};

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

@@ -1,49 +1,49 @@
-import { createThemedStyles, ITweakStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Checkbox', {
-  root: {
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    gap: 14,
-    width: 'fit-content',
-  },
-
-  checked: {},
-
-  invalid: {},
-
-  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',
-  },
-
-  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',
+  },
+
+  checked: {},
+
+  invalid: {},
+
+  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',
+  },
+
+  labelPositionLeft: {
+    flexDirection: 'row-reverse',
+  },
+});
+
+export type ICheckboxStyles = ITweakStyles<typeof useStyles>;