@true-engineering/true-react-common-ui-kit 1.0.1

package/src/components/Button/Button.tsx

@@ -0,0 +1,195 @@
+import {
+  useMemo,
+  FC,
+  ReactElement,
+  ReactNode,
+  ButtonHTMLAttributes,
+  MouseEvent,
+} from 'react';
+import clsx from 'clsx';
+import { merge } from 'lodash';
+
+import { ICommonProps } from '../../types';
+import { addDataAttributes, isNotEmpty, addDataTestId } from '../../helpers';
+import { useTheme } from '../../hooks';
+import {
+  ThemedPreloader,
+  IThemedPreloaderProps,
+  ThemedPreloaderStyles,
+} from '../ThemedPreloader';
+import { Icon, IIconType } from '../Icon';
+
+import { ButtonStyles, styles, dotsPreloaderStyles } from './Button.styles';
+
+export type IButtonSize = 's' | 'm' | 'l' | 'xl';
+
+/* Information for migration from old views
+
+      main => primary
+      cancel => secondary
+      cancel-light => outline
+      attention => warning
+      light => text
+      error => destructive
+
+  For other old views use custom.
+*/
+
+export const BUTTON_VIEWS = [
+  'primary',
+  'secondary',
+  'outline',
+  'warning',
+  'destructive',
+  'text',
+  'custom', // специальный стиль для кастомизации на своем проекте
+] as const;
+
+export type IButtonView = (typeof BUTTON_VIEWS)[number];
+
+export interface IButtonProps extends ICommonProps {
+  tweakStyles?: ButtonStyles;
+  children?: ReactNode;
+  /**
+   * @default `button`
+   */
+  type?: ButtonHTMLAttributes<unknown>['type'];
+  /**
+   * @default `l`
+   */
+  size?: IButtonSize;
+  /**
+   * @default `primary`
+   */
+  view?: IButtonView;
+  /**
+   * @default false
+   */
+  shouldSkipTabNavigation?: boolean;
+  /**
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * @default false
+   */
+  isFullWidth?: boolean;
+  /**
+   * Нужно ли убирать скругление у кнопки слева
+   * @default false
+   */
+  isInline?: boolean;
+  /**
+   * Нужно ли показать лоадер и заблокировать кнопку
+   * @default false
+   */
+  isLoading?: boolean;
+  /**
+   * @default false
+   */
+  isActive?: boolean;
+  icon?: IIconType | ReactElement;
+  /**
+   * @default `left`
+   */
+  iconPosition?: 'left' | 'right';
+  /**
+   * @default `dots`
+   */
+  preloaderType?: IThemedPreloaderProps['type'];
+  testId?: string;
+  onClick?(event: MouseEvent<HTMLButtonElement>): void | Promise<void>;
+  onMouseDown?(event: MouseEvent<HTMLButtonElement>): void | Promise<void>;
+}
+
+export const Button: FC<IButtonProps> = ({
+  type = 'button',
+  children,
+  size = 'l',
+  view = 'primary',
+  isFullWidth = false,
+  isInline = false,
+  isDisabled = false,
+  isActive = false,
+  isLoading = false,
+  shouldSkipTabNavigation = false,
+  data,
+  testId,
+  tweakStyles,
+  icon,
+  iconPosition = 'left',
+  preloaderType = 'dots',
+  onClick,
+  onMouseDown,
+}) => {
+  const { classes, componentStyles } = useTheme('Button', styles, tweakStyles);
+
+  const tweakPreloaderStyles = useMemo(
+    () =>
+      merge(
+        {},
+        size === 's' || size === 'm' ? dotsPreloaderStyles : undefined,
+        componentStyles.tweakPreloader,
+        tweakStyles?.tweakPreloader,
+      ) as ThemedPreloaderStyles,
+    [tweakStyles?.tweakPreloader, size],
+  );
+
+  const hasIcon = isNotEmpty(icon);
+  const hasChildren = isNotEmpty(children);
+  const hasNoAction = isDisabled || isLoading;
+
+  return (
+    <button
+      type={type}
+      className={clsx(classes.root, classes[size], classes[view], {
+        [classes.disabled]: isDisabled,
+        [classes.fullWidth]: isFullWidth,
+        [classes.inline]: isInline,
+        [classes.active]: isActive,
+        [classes.loading]: isLoading,
+        [classes.onlyIcon]: hasIcon && !hasChildren,
+      })}
+      tabIndex={shouldSkipTabNavigation ? -1 : undefined}
+      disabled={hasNoAction}
+      onClick={!hasNoAction ? onClick : undefined}
+      onMouseDown={!hasNoAction ? onMouseDown : undefined}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <span
+        className={clsx(classes.content, {
+          [classes.iconFromRight]:
+            hasChildren && hasIcon && iconPosition === 'right',
+          [classes.iconFromLeft]:
+            hasChildren && hasIcon && iconPosition === 'left',
+        })}
+      >
+        {hasIcon && (
+          <span className={classes.icon}>
+            {typeof icon === 'string' ? (
+              <Icon type={icon as IIconType} />
+            ) : (
+              icon
+            )}
+          </span>
+        )}
+        {hasChildren && (
+          <span className={clsx(classes.children, hasIcon && classes.withIcon)}>
+            {children}
+          </span>
+        )}
+      </span>
+
+      {isLoading && (
+        <span className={classes.loader}>
+          <ThemedPreloader
+            type={preloaderType}
+            useCurrentColor
+            tweakStyles={tweakPreloaderStyles}
+          />
+        </span>
+      )}
+    </button>
+  );
+};

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+export type { ButtonStyles } from './Button.styles';

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

@@ -0,0 +1,35 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Checkbox } from './Checkbox';
+
+export default {
+  title: 'Checkbox',
+  component: Checkbox,
+  args: {
+    value: 'value',
+    size: 18,
+    alignItems: 'center',
+    labelPosition: 'right',
+    isChecked: true,
+    isInvalid: false,
+    isDisabled: false,
+    isSemiChecked: false,
+  },
+  argTypes: {
+    value: { control: 'text' },
+    alignItems: { control: 'inline-radio', options: ['top', 'center'] },
+  },
+  parameters: {
+    controls: {
+      exclude: ['data', 'tweakStyles', 'testId', 'onSelect'],
+    },
+  },
+} 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>
+);

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

@@ -0,0 +1,59 @@
+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: {
+    display: 'none',
+  },
+
+  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>;

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState, PropsWithChildren } from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon';
+import { useTheme } from '../../hooks';
+import { addDataAttributes, addDataTestId, isNotEmpty } from '../../helpers';
+import { ICommonProps } from '../../types';
+
+import { CheckboxStyles, styles } from './Checkbox.styles';
+
+export interface ICheckboxProps<V> extends ICommonProps {
+  tweakStyles?: CheckboxStyles;
+  isChecked?: boolean;
+  isSemiChecked?: boolean;
+  isDisabled?: 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;
+}
+
+export function Checkbox<V>({
+  children,
+  isDisabled,
+  isChecked = false,
+  value,
+  size = 18,
+  alignItems = 'center',
+  textMargin,
+  data,
+  testId,
+  isSemiChecked,
+  labelPosition = 'right',
+  tweakStyles,
+  onSelect,
+}: PropsWithChildren<ICheckboxProps<V>>): JSX.Element {
+  const { classes } = useTheme('Checkbox', styles, tweakStyles, {
+    size,
+    alignItems,
+    textMargin,
+  });
+
+  const [isSelected, setIsSelected] = useState<boolean>(false);
+
+  const onChange = (isBeingSelected: boolean) => {
+    onSelect({ value, isSelected: isBeingSelected });
+    setIsSelected(isBeingSelected);
+  };
+
+  useEffect(() => {
+    setIsSelected(isChecked);
+  }, [isChecked]);
+
+  return (
+    <label
+      className={clsx(classes.root, {
+        [classes.disabled]: isDisabled,
+        [classes.labelPositionLeft]: labelPosition === 'left',
+      })}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <input
+        className={classes.input}
+        checked={isSelected}
+        onChange={isDisabled ? undefined : () => onChange(!isSelected)}
+        disabled={isDisabled}
+        type="checkbox"
+      />
+      <div className={clsx(classes.check, isSelected && classes.checked)}>
+        <Icon type={isSemiChecked ? 'minus' : 'check'} />
+      </div>
+      {isNotEmpty(children) && (
+        <div className={classes.children}>{children}</div>
+      )}
+    </label>
+  );
+}

package/src/components/Checkbox/index.ts

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

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

@@ -0,0 +1,34 @@
+import { colors } from '../../theme';
+import { rgba } from '../../helpers';
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  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 CloseButtonStyles = ComponentStyles<typeof styles>;

package/src/components/CloseButton/CloseButton.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { addDataAttributes } from '../../helpers';
+import { Icon } from '../Icon';
+
+import { CloseButtonStyles, styles } from './CloseButton.styles';
+
+export interface ICloseButtonProps extends ICommonProps {
+  tweakStyles?: CloseButtonStyles;
+  testId?: string;
+  onClose?: () => void;
+  iconType?: 'close' | 'close-large' | 'close-window';
+}
+
+export const CloseButton: FC<ICloseButtonProps> = ({
+  tweakStyles,
+  testId,
+  data,
+  iconType = 'close',
+  onClose,
+}) => {
+  const { classes } = useTheme('CloseButton', styles, tweakStyles);
+
+  return (
+    <button
+      type="button"
+      className={classes.root}
+      onClick={onClose}
+      data-testid={testId}
+      {...addDataAttributes(data)}
+    >
+      <Icon type={iconType} />
+    </button>
+  );
+};

package/src/components/CloseButton/index.ts

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

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

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

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

@@ -0,0 +1,38 @@
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  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],
+  },
+};
+
+export type ColorsStyles = ComponentStyles<typeof styles>;

package/src/components/Colors/Colors.tsx

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

@@ -0,0 +1,2 @@
+export * from './Colors';
+export type { ColorsStyles } from './Colors.styles';

package/src/components/CssBaseline/CssBaseline.styles.ts

@@ -0,0 +1,15 @@
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  '@global html, body': {
+    fontFamily: 'Arial, sans-serif',
+    color: colors.FONT_MAIN,
+    padding: 0,
+    margin: 0,
+  },
+
+  root: {},
+};
+
+export type CssBaselineStyles = ComponentStyles<typeof styles>;

package/src/components/CssBaseline/CssBaseline.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { addDataAttributes } from '../../helpers';
+
+import { CssBaselineStyles, styles } from './CssBaseline.styles';
+
+export interface ICssBaselineProps extends ICommonProps {
+  tweakStyles?: CssBaselineStyles;
+}
+
+export const CssBaseline: FC<ICssBaselineProps> = ({ data, tweakStyles }) => {
+  const { classes } = useTheme('CssBaseline', styles, tweakStyles);
+
+  return <div className={classes.root} {...addDataAttributes(data)} />;
+};

package/src/components/CssBaseline/index.ts

@@ -0,0 +1,2 @@
+export * from './CssBaseline';
+export type { CssBaselineStyles } from './CssBaseline.styles';

package/src/components/DateInput/DateInput.stories.tsx

@@ -0,0 +1,63 @@
+import { ComponentStory } from '@storybook/react';
+import { format, isValid } from 'date-fns';
+import { useEffect, useState } from 'react';
+
+import { DateInput } from './DateInput';
+
+export default {
+  title: 'Inputs/DateInput',
+  component: DateInput,
+};
+
+const Template: ComponentStory<typeof DateInput> = (args) => {
+  const [value, setValue] = useState<string | undefined>(args.date);
+
+  useEffect(() => {
+    setValue(args.date);
+  }, [args.date]);
+
+  const startDateValue =
+    args.startDate !== undefined && isValid(args.startDate)
+      ? format(new Date(args.startDate), 'dd.MM.yyyy')
+      : undefined;
+
+  const endDateValue =
+    args.endDate !== undefined && isValid(args.endDate)
+      ? format(new Date(args.endDate), 'dd.MM.yyyy')
+      : undefined;
+
+  return (
+    <DateInput
+      {...args}
+      date={value}
+      onChange={(d) => setValue(d)}
+      startDate={startDateValue}
+      endDate={endDateValue}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  date: '23.01.2023',
+  startDate: undefined,
+  endDate: undefined,
+  isRange: false,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: [
+      'data',
+      'testId',
+      'tabIndex',
+      'onChange',
+      'onFocus',
+      'onBlur',
+      'onPaste',
+      'onIconClick',
+      'onKeyDown',
+    ],
+  },
+};

package/src/components/DateInput/DateInput.styles.ts

@@ -0,0 +1,14 @@
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    cursor: 'pointer',
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+  },
+
+  tweakInput: {},
+};
+
+export type DateInputStyles = ComponentStyles<typeof styles>;