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

package/src/hooks/use-theme.ts

@@ -0,0 +1,36 @@
+import { createContext, useContext, useMemo } from 'react';
+import { createUseStyles, Styles } from 'react-jss';
+import { merge } from 'lodash';
+
+import { ComponentName, UiKitTheme } from '../types';
+import { commonTheme } from '../theme';
+
+export const ThemeContext = createContext<{
+  theme: UiKitTheme;
+}>({ theme: commonTheme });
+
+export const useTheme = <StyleSheet>(
+  componentName: ComponentName,
+  styles: StyleSheet,
+  tweakStyles?: Partial<Record<keyof StyleSheet, any>>,
+  options?: Record<string, unknown>,
+): {
+  classes: Record<keyof StyleSheet, string>;
+  componentStyles: StyleSheet;
+} => {
+  const { theme } = useContext(ThemeContext);
+  const { components } = theme;
+
+  const newStyles = useMemo(
+    () => merge({}, styles, components?.[componentName] ?? {}, tweakStyles),
+    [styles, components?.[componentName], tweakStyles],
+  );
+
+  return {
+    classes: createUseStyles(newStyles as Styles)(options) as Record<
+      keyof StyleSheet,
+      string
+    >,
+    componentStyles: newStyles,
+  };
+};

package/src/hooks/use-tweak-styles.ts

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { merge } from 'lodash';
+import { Styles } from 'react-jss';
+
+export const useTweakStyles = <StyleSheet>(
+  componentStyles: StyleSheet = {} as StyleSheet,
+  tweakStyles: Partial<Record<keyof StyleSheet, any>> | undefined,
+  className: keyof StyleSheet,
+): Styles =>
+  useMemo(
+    () =>
+      merge({}, componentStyles[className], tweakStyles?.[className]) as Styles,
+    [tweakStyles?.[className]],
+  );

package/src/index.ts

@@ -0,0 +1,5 @@
+export { commonTheme } from './theme';
+export * from './components';
+export * from './hooks';
+export * from './types';
+export * from './helpers';

package/src/theme.ts

@@ -0,0 +1,155 @@
+import { Styles } from 'react-jss';
+import { UiKitHelpers, UiKitTheme } from './types';
+
+export const colors = {
+  FONT_MAIN: '#222a37',
+  FONT_MEDIUM: '#505f79',
+  FONT_LABEL: '#7a869a',
+  FONT_DISABLED: '#95a0b3',
+  GREY_ACTIVE: '#95a0b3',
+  BORDER_MAIN: '#d0d6e1',
+  BORDER_LIGHT: '#dde3ed',
+  GREY_HOVER: '#dde3ed',
+  GREY_FOCUS: '#eceff5',
+  GREY_DISABLED: '#eceff5',
+  GREY_BACKGROUND: '#f6f8fc',
+  CLASSIC_WHITE: '#ffffff',
+  RED_ACTIVE: '#912e34',
+  RED_HOVER: '#c13e45',
+  RED_WARNING: '#f14d56',
+  RED_WARNING_LIGHT: '#ff6261',
+  RED_BACKGROUND: '#feedee',
+  ORANGE_BACKGROUND: '#fff4e9',
+  GREEN_BACKGROUND: '#f4f9e6',
+  BLUE_BACKGROUND: '#ebf1ff',
+  // временные константы пока не будет полной темизации
+  GREEN_FOCUS: '#97ba1e',
+  ORANGE_FOCUS: '#ff991f',
+} as const;
+
+export const dimensions = {
+  BORDER_RADIUS_LARGE: 16,
+  BORDER_RADIUS_MEDIUM: 12,
+  BORDER_RADIUS_STD: 8,
+  BORDER_RADIUS_SMALL: 6,
+  BORDER_RADIUS_EXTRA_SMALL: 4,
+  CONTROL_HEIGHT: 48,
+} as const;
+
+export const helpers: UiKitHelpers = {
+  withAngle: (
+    angleSize = 6,
+    position: 'left' | 'right' = 'left',
+    distance = 100,
+  ) =>
+    ({
+      display: 'inline-block',
+      position: 'relative',
+      marginTop: angleSize * 2 - 1,
+      boxShadow: '0 8px 20px 0 rgba(0, 0, 0, 0.04)',
+      border: ['solid', 1, colors.BORDER_MAIN],
+      borderRadius: dimensions.BORDER_RADIUS_EXTRA_SMALL,
+
+      '&:before': {
+        content: '""',
+        position: 'absolute',
+        top: -angleSize,
+        left: position === 'left' && distance,
+        right: position === 'right' && distance,
+        width: 0,
+        height: 0,
+        borderLeft: [angleSize, 'solid', 'transparent'],
+        borderRight: [angleSize, 'solid', 'transparent'],
+        borderBottom: [angleSize, 'solid', colors.BORDER_MAIN],
+      },
+
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        top: -angleSize + 1,
+        left: position === 'left' && distance + 1,
+        right: position === 'right' && distance + 1,
+        width: 0,
+        height: 0,
+        borderLeft: [angleSize - 1, 'solid', 'transparent'],
+        borderRight: [angleSize - 1, 'solid', 'transparent'],
+        borderBottom: [angleSize - 1, 'solid', colors.CLASSIC_WHITE],
+      },
+    } as unknown as Styles),
+
+  withScrollBar: {
+    overflow: 'auto',
+    boxSizing: 'border-box',
+    scrollbarWidth: 'thin' /* Firefox */,
+    scrollbarColor: '#d0d6e1 transparent',
+
+    '&::-webkit-scrollbar': {
+      height: 10,
+      width: 10,
+    },
+
+    '&::-webkit-scrollbar-thumb': {
+      backgroundClip: 'padding-box',
+      backgroundColor: colors.BORDER_MAIN,
+      border: [2, 'solid', 'transparent'],
+      borderRadius: 5,
+      minHeight: 30,
+      width: 6,
+
+      '&:hover': {
+        backgroundColor: colors.GREY_ACTIVE,
+      },
+    },
+
+    '&::-webkit-scrollbar-track-piece': {
+      backgroundColor: 'transparent',
+    },
+  },
+};
+
+const SLIDE_UP_POSITION_START = 15;
+const SLIDE_UP_POSITION_END = 0;
+
+export const animations = {
+  // Если понадобится, сюда можно пробросить параметры через useTheme props
+  slideUp: {
+    'slide-up-enter': {
+      opacity: 0,
+      transform: `translateY(${SLIDE_UP_POSITION_START}px)`,
+    },
+
+    'slide-up-enter-active': {
+      opacity: 1,
+      transform: `translateY(${SLIDE_UP_POSITION_END}px)`,
+      transition: ({ timeout = 150 }: { timeout: number }): string =>
+        `${timeout}ms ease-in-out`,
+      transitionProperty: 'opacity, transform',
+    },
+
+    'slide-up-exit-active': {
+      opacity: 1,
+      transform: `translateY(${SLIDE_UP_POSITION_END}px)`,
+    },
+
+    'slide-up-exit': {
+      opacity: 0,
+      transform: `translateY(${SLIDE_UP_POSITION_START}px)`,
+      transition: ({ timeout = 150 }: { timeout: number }): string =>
+        `${timeout}ms ease-in-out`,
+      transitionProperty: 'opacity, transform',
+    },
+  },
+};
+
+export interface CommonUiKitTheme extends UiKitTheme {
+  colors: typeof colors;
+  dimensions: typeof dimensions;
+}
+
+export const commonTheme: CommonUiKitTheme = {
+  name: 'common',
+  animations,
+  colors,
+  dimensions,
+  helpers,
+};

package/src/types.ts

@@ -0,0 +1,106 @@
+import { Styles } from 'react-jss';
+import { Modifier, Placement } from 'react-overlays/usePopper';
+import {
+  ICommonIcon,
+  IComplexIcon,
+  IPreloaderSvgType,
+  ISvgIcon,
+} from './components';
+
+export interface IDataAttributes {
+  [key: string]: string | null | undefined;
+}
+
+export interface ICommonProps {
+  data?: IDataAttributes;
+}
+
+export interface IDropdownWithPopperOptions {
+  shouldUsePopper?: boolean;
+  shouldRenderInBody?: boolean;
+  scrollParent?: 'auto' | 'document' | Element;
+
+  shouldHideOnScroll?: boolean; // работает весьма условно без shouldUsePopper
+  canBeFlipped?: boolean; // только с shouldUsePopper
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  modifiers?: Array<Partial<Modifier<any, any>>>; // только с shouldUsePopper
+  placement?: Placement; // only with shouldUsePopper
+  // https://popper.js.org/docs/v2/modifiers/flip/
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  flipOptions?: Record<string, any>; // только с shouldUsePopper
+}
+
+export type ComponentStyles<StyleSheet, Props = unknown> = Partial<
+  Styles<keyof StyleSheet, Props>
+>;
+
+// TODO: Скрипт
+export type ComponentName =
+  | 'AccountInfo'
+  | 'AddButton'
+  | 'Button'
+  | 'CloseButton'
+  | 'Checkbox'
+  | 'CssBaseline'
+  | 'Colors'
+  | 'DateInput'
+  | 'DatePicker'
+  | 'DatePickerInput'
+  | 'DatePickerHeader'
+  | 'Description'
+  | 'DotsPreloader'
+  | 'SvgPreloader'
+  | 'FiltersPane'
+  | 'FilterInterval'
+  | 'FilterSelect'
+  | 'FilterWithDates'
+  | 'FilterWithPeriod'
+  | 'FilterWrapper'
+  | 'FiltersPaneSearch'
+  | 'Flag'
+  | 'FlexibleTable'
+  | 'Icon'
+  | 'IncrementInput'
+  | 'Input'
+  | 'List'
+  | 'Modal'
+  | 'MoreMenu'
+  | 'MultiSelect'
+  | 'MultiSelectInput'
+  | 'MultiSelectList'
+  | 'Notification'
+  | 'PhoneInput'
+  | 'PhoneInputCountryList'
+  | 'RadioButton'
+  | 'SearchInput'
+  | 'Select'
+  | 'SelectList'
+  | 'ScrollIntoViewIfNeeded'
+  | 'Switch'
+  | 'TextArea'
+  | 'TextWithInfo'
+  | 'TextWithTooltip'
+  | 'ThemedPreloader'
+  | 'Tooltip'
+  | 'Toaster';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type UiKitAnimations = Record<string, any>;
+export type UiKitHelpers = Record<string, Styles | (() => Styles)>;
+
+export interface UiKitTheme {
+  name: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  components?: Partial<Record<ComponentName, ComponentStyles<any, any>>>;
+  /**
+   * Для переопределения иконок, которые есть в UiKit
+   */
+  icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
+  complexIcons?: Partial<Record<IComplexIcon, string>>;
+  preloaders?: Partial<Record<IPreloaderSvgType, string>>; // TODO: заменить string
+  animations?: UiKitAnimations;
+  colors?: Record<string, string>;
+  dimensions?: Record<string, number>;
+  boxShadows?: Record<string, string>;
+  helpers?: UiKitHelpers;
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />