@true-engineering/true-react-common-ui-kit 2.1.0 → 2.2.0

package/src/hooks/use-on-click-outside.ts

@@ -1,92 +1,77 @@
-import { RefObject, useEffect } from 'react';
-
-export const checkElementParentsClassNames = (
-  element: HTMLElement,
-  className: string,
-): boolean => {
-  if (element.classList.contains(className)) {
-    return true;
-  }
-
-  if (element === document.body) {
-    return false;
-  }
-
-  if (element.parentElement) {
-    return checkElementParentsClassNames(element.parentElement, className);
-  }
-
-  return false;
-};
-
-export const isElementOneOfParents = (
-  element: HTMLElement,
-  elToSearch: HTMLElement,
-): boolean => {
-  if (element === elToSearch) {
-    return true;
-  }
-
-  if (element === document.body) {
-    return false;
-  }
-
-  if (element.parentElement) {
-    return isElementOneOfParents(element.parentElement, elToSearch);
-  }
-
-  return false;
-};
-
-export function useOnClickOutsideWithRef<
-  Elem extends HTMLElement,
-  IgnoreElem extends HTMLElement,
->(
-  ref: RefObject<Elem>,
-  handler: (event: MouseEvent | TouchEvent) => void,
-  ignoreRef?: RefObject<IgnoreElem>,
-): void {
-  useOnClickOutside(ref, handler, undefined, ignoreRef);
-}
-
-export function useOnClickOutside<
-  Elem extends HTMLElement,
-  IgnoreElem extends HTMLElement,
->(
-  ref: RefObject<Elem>,
-  handler: (event: MouseEvent | TouchEvent) => void,
-  ignoreClassName?: string,
-  ignoreRef?: RefObject<IgnoreElem>,
-): void {
-  useEffect(() => {
-    const listener = (event: MouseEvent | TouchEvent) => {
-      // Do nothing if clicking ref's element or descendent elements
-      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
-        return;
-      }
-
-      if (
-        (ignoreClassName !== undefined &&
-          checkElementParentsClassNames(
-            event.target as HTMLElement,
-            ignoreClassName,
-          )) ||
-        (ignoreRef !== undefined &&
-          ignoreRef.current !== null &&
-          isElementOneOfParents(event.target as HTMLElement, ignoreRef.current))
-      ) {
-        return;
-      }
-
-      handler(event);
-    };
-
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-
-    return () => {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [ref, handler, ignoreClassName]);
-}
+import { RefObject, useEffect } from 'react';
+
+export const checkElementParentsClassNames = (element: HTMLElement, className: string): boolean => {
+  if (element.classList.contains(className)) {
+    return true;
+  }
+
+  if (element === document.body) {
+    return false;
+  }
+
+  if (element.parentElement) {
+    return checkElementParentsClassNames(element.parentElement, className);
+  }
+
+  return false;
+};
+
+export const isElementOneOfParents = (element: HTMLElement, elToSearch: HTMLElement): boolean => {
+  if (element === elToSearch) {
+    return true;
+  }
+
+  if (element === document.body) {
+    return false;
+  }
+
+  if (element.parentElement) {
+    return isElementOneOfParents(element.parentElement, elToSearch);
+  }
+
+  return false;
+};
+
+export function useOnClickOutsideWithRef<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
+  ref: RefObject<Elem>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+  ignoreRef?: RefObject<IgnoreElem>,
+): void {
+  useOnClickOutside(ref, handler, undefined, ignoreRef);
+}
+
+export function useOnClickOutside<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
+  ref: RefObject<Elem>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+  ignoreClassName?: string,
+  ignoreRef?: RefObject<IgnoreElem>,
+): void {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
+        return;
+      }
+
+      if (
+        (ignoreClassName !== undefined &&
+          checkElementParentsClassNames(event.target as HTMLElement, ignoreClassName)) ||
+        (ignoreRef !== undefined &&
+          ignoreRef.current !== null &&
+          isElementOneOfParents(event.target as HTMLElement, ignoreRef.current))
+      ) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler, ignoreClassName]);
+}

package/src/hooks/use-theme.ts

@@ -1,36 +1,32 @@
-import { createContext, useContext, useMemo } from 'react';
-import { createUseStyles, Styles } from 'react-jss';
-import merge from 'lodash-es/merge';
-
-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,
-  };
-};
+import { createContext, useContext, useMemo } from 'react';
+import { createUseStyles, Styles } from 'react-jss';
+import merge from 'lodash-es/merge';
+import { commonTheme } from '../theme';
+import { ComponentName, UiKitTheme } from '../types';
+
+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

@@ -1,14 +1,13 @@
-import { useMemo } from 'react';
-import merge from 'lodash-es/merge';
-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]],
-  );
+import { useMemo } from 'react';
+import { Styles } from 'react-jss';
+import merge from 'lodash-es/merge';
+
+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

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

package/src/theme.ts

@@ -1,155 +1,149 @@
-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,
-};
+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,
+};