@true-engineering/true-react-common-ui-kit 2.5.0 → 3.0.0-alpha.0

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

@@ -1,196 +1,201 @@
-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 { 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: '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: {},
+});
+
+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/Button.tsx

@@ -1,17 +1,15 @@
-import { useMemo, ReactNode, ButtonHTMLAttributes, MouseEvent, forwardRef } from 'react';
+import { ReactNode, ButtonHTMLAttributes, MouseEvent, forwardRef } from 'react';
 import clsx from 'clsx';
-import merge from 'lodash-es/merge';
 import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { renderIcon } from '../../helpers/snippets';
-import { useTheme } from '../../hooks';
+import { useTweakStyles } from '../../hooks';
 import { ICommonProps, IIcon } from '../../types';
-import { ThemedPreloader, IThemedPreloaderProps, ThemedPreloaderStyles } from '../ThemedPreloader';
+import { ThemedPreloader, IThemedPreloaderProps } from '../ThemedPreloader';
 import { IButtonSize, IButtonView } from './types';
-import { ButtonStyles, styles, dotsPreloaderStyles } from './Button.styles';
+import { useStyles, IButtonStyles, getPreloaderStyles } from './Button.styles';
 
-export interface IButtonProps extends ICommonProps {
-  tweakStyles?: ButtonStyles;
+export interface IButtonProps extends ICommonProps<IButtonStyles> {
   children?: ReactNode;
   /**
    * @default `button`
@@ -60,7 +58,6 @@ export interface IButtonProps extends ICommonProps {
    * @default `dots`
    */
   preloaderType?: IThemedPreloaderProps['type'];
-  testId?: string;
   onClick?(event: MouseEvent<HTMLButtonElement>): void | Promise<void>;
   onMouseDown?(event: MouseEvent<HTMLButtonElement>): void | Promise<void>;
 }
@@ -89,18 +86,14 @@ export const Button = forwardRef<HTMLButtonElement, IButtonProps>(
     },
     ref,
   ) => {
-    const { classes, componentStyles } = useTheme('Button', styles, tweakStyles);
+    const classes = useStyles({ theme: tweakStyles });
 
-    const tweakPreloaderStyles = useMemo(
-      () =>
-        merge(
-          {},
-          size === 's' || size === 'm' ? dotsPreloaderStyles : undefined,
-          componentStyles.tweakPreloader,
-          tweakStyles?.tweakPreloader,
-        ) as ThemedPreloaderStyles,
-      [tweakStyles?.tweakPreloader, size],
-    );
+    const tweakPreloaderStyles = useTweakStyles({
+      innerStyles: getPreloaderStyles(size),
+      tweakStyles,
+      className: 'tweakPreloader',
+      currentComponentName: 'Button',
+    });
 
     const hasIcon = isReactNodeNotEmpty(icon);
     const hasChildren = isReactNodeNotEmpty(children);

package/src/components/Button/index.ts

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

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

@@ -6,18 +6,12 @@ export default {
   component: Checkbox,
   args: {
     value: 'value',
-    size: 18,
-    alignItems: 'center',
     labelPosition: 'right',
     isReadonly: false,
     isInvalid: false,
     isDisabled: false,
     isSemiChecked: false,
   },
-  argTypes: {
-    value: { control: 'text' },
-    alignItems: { control: 'inline-radio', options: ['top', 'center'] },
-  },
   parameters: {
     controls: {
       exclude: ['data', 'tweakStyles', 'testId', 'onSelect'],
@@ -26,7 +20,9 @@ export default {
 } as ComponentMeta<typeof Checkbox>;
 
 export const Default: ComponentStory<typeof Checkbox> = (args) => (
-  <Checkbox {...args} onSelect={(value) => console.log('Value was selected', value)}>
-    <div>some text</div>
-  </Checkbox>
+  <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,62 +1,46 @@
-import { ComponentStyles } from '../../types';
-import type { ICheckboxProps } from './Checkbox';
-
-interface IStyleProps {
-  size: NonNullable<ICheckboxProps<unknown>['size']>;
-  alignItems: NonNullable<ICheckboxProps<unknown>['alignItems']>;
-  textMargin: ICheckboxProps<unknown>['textMargin'];
-}
-
-export const styles = {
-  root: {
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: ({ alignItems }: IStyleProps): string =>
-      alignItems === 'top' ? 'flex-start' : 'center',
-  },
-
-  disabled: {
-    cursor: 'default',
-    pointerEvents: 'none',
-  },
-
-  input: {
-    width: 1,
-    height: 1,
-    position: 'absolute',
-    opacity: 0,
-  },
-
-  children: {
-    maxWidth: 'calc(100% - 32px)',
-    display: 'flex',
-    alignItems: 'center',
-  },
-
-  check: {
-    width: ({ size }: IStyleProps): number => size,
-    height: ({ size }: IStyleProps): number => size,
-    borderRadius: 2,
-    flexShrink: 0,
-    marginRight: ({ size, textMargin }: IStyleProps): number =>
-      textMargin !== undefined ? textMargin : size - 4,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    boxSizing: 'border-box',
-  },
-
-  checked: {},
-
-  labelPositionLeft: {
-    flexDirection: 'row-reverse',
-
-    '& $check': {
-      marginRight: 0,
-      marginLeft: ({ size, textMargin }: IStyleProps): number =>
-        textMargin !== undefined ? textMargin : size - 4,
-    },
-  },
-};
-
-export type CheckboxStyles = ComponentStyles<typeof styles, IStyleProps>;
+import { createThemedStyles, ITweakStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Checkbox', {
+  root: {
+    cursor: 'pointer',
+    display: 'flex',
+    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

@@ -6,13 +6,11 @@ import {
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
-import { CheckboxStyles, styles } from './Checkbox.styles';
+import { useStyles, ICheckboxStyles } from './Checkbox.styles';
 
-export interface ICheckboxProps<V> extends ICommonProps {
-  tweakStyles?: CheckboxStyles;
+export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
   children?: ReactNode;
   isChecked?: boolean;
   isSemiChecked?: boolean;
@@ -20,23 +18,10 @@ export interface ICheckboxProps<V> extends ICommonProps {
   isReadonly?: boolean;
   isInvalid?: boolean;
   value: V;
-  /**
-   * @default 18
-   */
-  size?: number;
-  /**
-   * @default `center`
-   */
-  alignItems?: 'top' | 'center';
-  /**
-   * @default `size - 4px`
-   */
-  textMargin?: number;
   /**
    * @default `right`
    */
   labelPosition?: 'right' | 'left';
-  testId?: string;
   onSelect(value: { value: V; isSelected: boolean }): void;
 }
 
@@ -46,9 +31,6 @@ export function Checkbox<V>({
   isReadonly,
   isChecked = false,
   value,
-  size = 18,
-  alignItems = 'center',
-  textMargin,
   data,
   testId,
   isSemiChecked,
@@ -56,11 +38,7 @@ export function Checkbox<V>({
   tweakStyles,
   onSelect,
 }: ICheckboxProps<V>): JSX.Element {
-  const { classes } = useTheme('Checkbox', styles, tweakStyles, {
-    size,
-    alignItems,
-    textMargin,
-  });
+  const classes = useStyles({ theme: tweakStyles });
 
   const [isSelected, setIsSelected] = useState(false);
 

package/src/components/Checkbox/index.ts

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