@true-engineering/true-react-common-ui-kit 3.0.6 → 3.1.1

package/src/components/TextButton/TextButton.stories.tsx

@@ -0,0 +1,46 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { IIconType, iconsList } from '../Icon';
+import { complexIcons } from '../Icon/complexIcons';
+import { TextButton } from './TextButton';
+
+const iconTypes = [
+  undefined,
+  ...Object.keys(iconsList),
+  ...Object.keys(complexIcons),
+] as IIconType[];
+
+export default {
+  title: 'TextButton',
+  component: TextButton,
+  args: {
+    children: 'Text Button',
+    icon: 'chevron-right-small',
+    size: 'l',
+    view: 'primary',
+    isBold: false,
+    isLoading: false,
+    isActive: false,
+    isDisabled: false,
+    hasCircleUnderIcon: true,
+    iconPosition: 'left',
+    preloaderType: 'dots',
+  },
+
+  argTypes: {
+    icon: { control: 'select', options: iconTypes },
+    size: { control: 'inline-radio' },
+    view: { control: 'inline-radio' },
+    iconPosition: { control: 'inline-radio' },
+    preloaderType: { control: 'inline-radio' },
+  },
+
+  parameters: {
+    controls: {
+      exclude: ['testId', 'tweakStyles', 'data', 'onClick'],
+    },
+  },
+} as ComponentMeta<typeof TextButton>;
+
+export const Default: ComponentStory<typeof TextButton> = (args) => (
+  <TextButton {...args} key={args.size} />
+);

package/src/components/TextButton/TextButton.styles.ts

@@ -0,0 +1,129 @@
+import { createThemedStyles, ITweakStyles } from '../../theme';
+import { IThemedPreloaderStyles } from '../ThemedPreloader';
+
+export const useStyles = createThemedStyles('TextButton', {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    height: 24,
+    padding: 0,
+    background: 'transparent',
+    border: 'none',
+    borderRadius: 0,
+    cursor: 'pointer',
+    outline: 'none',
+    transition: 'color 0.25s ease-in-out',
+
+    '&[disabled]': {
+      cursor: 'default',
+      pointerEvents: 'none',
+    },
+  },
+
+  xl: {
+    fontSize: 16,
+
+    '& $content': {
+      gap: 14,
+    },
+  },
+
+  l: {
+    fontSize: 14,
+    letterSpacing: '0.15px',
+
+    '& $content': {
+      gap: 10,
+
+      '&$reverseContent': {
+        gap: 6,
+      },
+    },
+  },
+
+  primary: {},
+
+  secondary: {},
+
+  custom: {},
+
+  active: {},
+
+  disabled: {},
+
+  bold: {
+    fontWeight: 'bold',
+  },
+
+  iconContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  circle: {
+    width: 24,
+    height: 24,
+    borderRadius: '50%',
+    transition: '0.25s ease-in-out',
+    transitionProperty: ['background', 'color'],
+  },
+
+  icon: {
+    width: 20,
+    height: 20,
+  },
+
+  content: {
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+  },
+
+  reverseContent: {
+    flexDirection: 'row-reverse',
+  },
+
+  loader: {
+    display: 'none',
+    height: 8,
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+  },
+
+  loading: {
+    '& $content': {
+      visibility: 'hidden',
+    },
+
+    '& $loader': {
+      display: 'block',
+    },
+  },
+});
+
+export const preloaderStyles: IThemedPreloaderStyles = {
+  tweakDotsPreloader: {
+    fadedDot: {
+      width: 6,
+      height: 6,
+    },
+  },
+
+  logo: {
+    width: 24,
+    height: 24,
+  },
+
+  default: {
+    width: 24,
+    height: 24,
+  },
+};
+
+export type ITextButtonStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakPreloader: IThemedPreloaderStyles }
+>;

package/src/components/TextButton/TextButton.tsx

@@ -0,0 +1,103 @@
+import { ButtonHTMLAttributes, FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { IIcon, renderIcon } from '../Icon';
+import { IThemedPreloaderProps, ThemedPreloader } from '../ThemedPreloader';
+import { useStyles, ITextButtonStyles, preloaderStyles } from './TextButton.styles';
+
+export interface ITextButtonProps
+  extends ICommonProps<ITextButtonStyles>,
+    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'disabled'> {
+  /** @default 'undefined' */
+  children?: ReactNode;
+  /** @default 'undefined' */
+  icon?: IIcon;
+  /** @default 'primary' */
+  view?: 'primary' | 'secondary' | 'custom';
+  /** @default false */
+  isBold?: boolean;
+  /** @default false */
+  hasCircleUnderIcon?: boolean;
+  /**  @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isLoading?: boolean;
+  /** @default false */
+  isActive?: boolean;
+  /** @default 'l' */
+  size?: 'l' | 'xl';
+  /** @default 'left' */
+  iconPosition?: 'left' | 'right';
+  /** @default `dots` */
+  preloaderType?: IThemedPreloaderProps['type'];
+}
+
+export const TextButton: FC<ITextButtonProps> = ({
+  children,
+  icon,
+  view = 'primary',
+  isDisabled = false,
+  isBold = false,
+  isLoading = false,
+  isActive = false,
+  hasCircleUnderIcon = false,
+  size = 'l',
+  iconPosition = 'left',
+  preloaderType = 'dots',
+  type = 'button',
+  testId,
+  tweakStyles,
+  data,
+  onClick,
+  ...restProps
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakPreloaderStyles = useTweakStyles({
+    innerStyles: preloaderStyles,
+    tweakStyles,
+    className: 'tweakPreloader',
+    currentComponentName: 'TextButton',
+  });
+
+  const hasNoAction = isDisabled || isLoading;
+
+  return (
+    <button
+      className={clsx(classes.root, classes[size], classes[view], {
+        [classes.bold]: isBold,
+        [classes.loading]: isLoading,
+        [classes.active]: isActive,
+        [classes.disabled]: isDisabled,
+      })}
+      onClick={!hasNoAction ? onClick : undefined}
+      disabled={hasNoAction}
+      type={type}
+      {...restProps}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <span className={clsx(classes.content, iconPosition === 'right' && classes.reverseContent)}>
+        {isReactNodeNotEmpty(icon) && (
+          <span className={clsx(classes.iconContainer, hasCircleUnderIcon && classes.circle)}>
+            <span className={classes.icon}>{renderIcon(icon)}</span>
+          </span>
+        )}
+        {children}
+      </span>
+
+      {isLoading && (
+        <span className={classes.loader}>
+          <ThemedPreloader
+            type={preloaderType}
+            useCurrentColor
+            tweakStyles={tweakPreloaderStyles}
+          />
+        </span>
+      )}
+    </button>
+  );
+};

package/src/components/TextButton/index.ts

@@ -0,0 +1,4 @@
+export * from './TextButton';
+export * from './TextButton';
+
+export type { ITextButtonStyles } from './TextButton.styles';

package/src/components/index.ts

@@ -21,17 +21,20 @@ export * from './MultiSelect';
 export * from './MultiSelectList';
 export * from './Notification';
 export * from './NumberInput';
-export * from './SearchInput';
-export * from './SmartInput';
 export * from './PhoneInput';
 export * from './RadioButton';
+export * from './ScrollIntoViewIfNeeded';
+export * from './SearchInput';
 export * from './Select';
+export * from './Selector';
+export * from './Skeleton';
+export * from './SmartInput';
+export * from './Status';
 export * from './Switch';
 export * from './TextArea';
+export * from './TextButton';
 export * from './TextWithInfo';
 export * from './TextWithTooltip';
 export * from './ThemedPreloader';
 export * from './Toaster';
 export * from './Tooltip';
-export * from './ScrollIntoViewIfNeeded';
-export * from './Skeleton';

package/src/theme/types.ts

@@ -40,20 +40,23 @@ import type {
   ISearchInputStyles,
   ISelectListStyles,
   ISelectStyles,
+  IFilterValueViewStyles,
+  IFlexibleTableCellStyles,
+  IFlexibleTableRowStyles,
+  IListItemStyles,
+  ISelectorStyles,
+  ISkeletonStyles,
   ISvgIcon,
   ISvgPreloaderStyles,
   ISwitchStyles,
   ITextAreaStyles,
+  ITextButtonStyles,
   ITextWithInfoStyles,
+  IStatusStyles,
   ITextWithTooltipStyles,
   IThemedPreloaderStyles,
   IToasterStyles,
   ITooltipStyles,
-  IFlexibleTableCellStyles,
-  IFlexibleTableRowStyles,
-  IFilterValueViewStyles,
-  ISkeletonStyles,
-  IListItemStyles,
 } from '../components';
 
 export type IStyles<C extends string, P> = Styles<C, P, Partial<Styles<C, P>>>;
@@ -111,11 +114,14 @@ export interface IComponentStyles {
   SearchInput: ISearchInputStyles;
   Select: ISelectStyles;
   SelectList: ISelectListStyles;
+  Selector: ISelectorStyles;
   Skeleton: ISkeletonStyles;
   Switch: ISwitchStyles;
+  TextButton: ITextButtonStyles;
   TextArea: ITextAreaStyles;
   TextWithInfo: ITextWithInfoStyles;
   TextWithTooltip: ITextWithTooltipStyles;
+  Status: IStatusStyles;
   ThemedPreloader: IThemedPreloaderStyles;
   Tooltip: ITooltipStyles;
   Toaster: IToasterStyles;