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

package/src/types.ts

@@ -1,20 +1,15 @@
 import { ReactElement } from 'react';
-import { Styles } from 'react-jss';
 import { Modifier, Placement } from 'react-overlays/usePopper';
-import type {
-  ICommonIcon,
-  IComplexIcon,
-  IIconType,
-  IPreloaderSvgType,
-  ISvgIcon,
-} from './components';
+import type { IIconType } from './components';
 
 export interface IDataAttributes {
   [key: string]: unknown;
 }
 
-export interface ICommonProps {
+export interface ICommonProps<TweakStyles> {
   data?: IDataAttributes;
+  testId?: string;
+  tweakStyles?: TweakStyles;
 }
 
 export interface IDropdownWithPopperOptions {
@@ -33,76 +28,3 @@ export interface IDropdownWithPopperOptions {
 }
 
 export type IIcon = IIconType | ReactElement;
-
-export type ComponentStyles<StyleSheet, Props = unknown> = Partial<Styles<keyof StyleSheet, Props>>;
-
-// TODO: Скрипт
-export type ComponentName =
-  | 'AccountInfo'
-  | 'AddButton'
-  | 'Button'
-  | 'CloseButton'
-  | 'Checkbox'
-  | 'CssBaseline'
-  | 'Colors'
-  | 'DateInput'
-  | 'DatePicker'
-  | 'DatePickerHeader'
-  | 'Description'
-  | 'DotsPreloader'
-  | 'SvgPreloader'
-  | 'FiltersPane'
-  | 'FilterInterval'
-  | 'FilterSelect'
-  | 'FilterWithDates'
-  | 'FilterWithPeriod'
-  | 'FilterWrapper'
-  | 'FilterValueView'
-  | '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

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

package/dist/components/FlexibleTable/components/TableRow/TableRow.d.ts

@@ -1,28 +0,0 @@
-import { ReactNode } from 'react';
-import { ICommonProps } from '../../../../types';
-import { FlexibleTableConfigType } from '../../types';
-export interface ITableRowProps<Values extends Record<string, any>> extends ICommonProps {
-    item: Values;
-    uniqueField?: keyof Values;
-    isFirstColumnSticky?: boolean;
-    isActive: boolean;
-    config?: FlexibleTableConfigType<Values>;
-    enabledColumns?: Array<keyof Values>;
-    rowAttributes?: Array<keyof Values>;
-    expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => ReactNode;
-    onRowHover?: (id?: string) => void;
-    onRowClick?: (id: string) => void;
-    classes: {
-        root: string;
-        active: string;
-        editable: string;
-        cell: {
-            root: string;
-            sticky: string;
-            second: string;
-        };
-    };
-}
-declare function TableRowInner<Values extends Record<string, any>>({ item, uniqueField, isFirstColumnSticky, isActive, config, enabledColumns, onRowHover, onRowClick, rowAttributes, expandableRowComponent, classes, }: ITableRowProps<Values>): JSX.Element;
-export declare const TableRow: typeof TableRowInner;
-export {};

package/dist/components/FlexibleTable/components/TableRow/index.d.ts

@@ -1 +0,0 @@
-export * from './TableRow';

package/dist/components/FlexibleTable/components/TableValue/TableValue.d.ts

@@ -1,21 +0,0 @@
-import { ReactNode } from 'react';
-import type { ICommonProps } from '../../../../types';
-import type { FlexibleTableConfigType } from '../../types';
-export interface ITableValueProps<Values extends Record<string, any>> extends ICommonProps {
-    item: Values;
-    columnName: keyof Values;
-    config?: FlexibleTableConfigType<Values>;
-    classes: {
-        root: string;
-        sticky: string;
-        second: string;
-    };
-    isFocusedRow?: boolean;
-    isSecond?: boolean;
-    isSticky?: boolean;
-    isNestedComponentExpanded: boolean;
-    isRowNestedComponentExpanded: boolean;
-    onSetNestedComponent: (component?: ReactNode) => void;
-}
-declare function TableValue<Values extends Record<string, any>>({ item, columnName, config, classes, isFocusedRow, isSecond, isSticky, isNestedComponentExpanded, isRowNestedComponentExpanded, onSetNestedComponent, }: ITableValueProps<Values>): JSX.Element;
-export default TableValue;

package/dist/components/FlexibleTable/components/TableValue/index.d.ts

@@ -1 +0,0 @@
-export * from './TableValue';

package/dist/components/IncrementInput/components/ChangeButton/ChangeButton.d.ts

@@ -1,10 +0,0 @@
-import { FC } from 'react';
-import { Classes } from 'jss';
-export interface IChangeButtonProps {
-    type: 'plus' | 'minus';
-    isButtonDisabled: boolean;
-    isInvalid?: boolean;
-    classes: Classes<'button' | 'disabledButton' | 'errorButton'>;
-    onClick: () => void;
-}
-export declare const ChangeButton: FC<IChangeButtonProps>;

package/dist/components/IncrementInput/components/ChangeButton/index.d.ts

@@ -1 +0,0 @@
-export * from './ChangeButton';

package/dist/components/IncrementInput/components/index.d.ts

@@ -1 +0,0 @@
-export * from './ChangeButton';

package/dist/helpers/deprecated.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-export declare const isInt: (value: number) => boolean;
-export declare const addClickHandler: (cb?: ((e: import("react").MouseEvent<Element, MouseEvent> | import("react").KeyboardEvent<Element>) => void) | undefined, hasAction?: boolean | undefined) => import("react").HTMLAttributes<unknown>;
-export declare const addDataTestId: (testId: string | undefined, postfix?: string | number | undefined) => {
-    'data-testid': string;
-} | undefined;
-export declare const createFilter: <T>(getter: (item: T) => (string | undefined)[], compareFn?: ((item: string, query: string) => boolean) | undefined) => (items: T[], query: string) => T[];
-export declare const getSelectKeyHandler: (cb: (e: import("react").KeyboardEvent<Element>) => void) => (e: import("react").KeyboardEvent<Element>) => void;
-export declare const getTestId: (testId: string | undefined, postfix?: string | number | undefined) => string | undefined;
-export declare const isStringNotEmpty: <T extends string>(value: T | null | undefined) => value is T;
-export declare const isEmpty: <T>(value: T | null | undefined) => value is null | undefined;
-export declare const isNotEmpty: <T>(val: T | null | undefined) => val is T;

package/dist/hooks/use-theme.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { ComponentName, UiKitTheme } from '../types';
-export declare const ThemeContext: import("react").Context<{
-    theme: UiKitTheme;
-}>;
-export declare const useTheme: <StyleSheet_1>(componentName: ComponentName, styles: StyleSheet_1, tweakStyles?: Partial<Record<keyof StyleSheet_1, any>> | undefined, options?: Record<string, unknown>) => {
-    classes: Record<keyof StyleSheet_1, string>;
-    componentStyles: StyleSheet_1;
-};

package/src/components/FlexibleTable/components/TableRow/index.ts

@@ -1 +0,0 @@
-export * from './TableRow';

package/src/components/FlexibleTable/components/TableValue/index.ts

@@ -1 +0,0 @@
-export * from './TableValue';

package/src/components/IncrementInput/components/ChangeButton/ChangeButton.tsx

@@ -1,33 +0,0 @@
-import { FC } from 'react';
-import clsx from 'clsx';
-import { Classes } from 'jss';
-import { Icon } from '../../../Icon';
-
-export interface IChangeButtonProps {
-  type: 'plus' | 'minus';
-  isButtonDisabled: boolean;
-  isInvalid?: boolean;
-  classes: Classes<'button' | 'disabledButton' | 'errorButton'>; // TODO: !!!!!
-  onClick: () => void;
-}
-
-export const ChangeButton: FC<IChangeButtonProps> = ({
-  type,
-  isButtonDisabled,
-  isInvalid,
-  onClick,
-  classes,
-}) => (
-  <button
-    className={clsx(
-      classes.button,
-      isButtonDisabled && classes.disabledButton,
-      isInvalid && classes.errorButton,
-    )}
-    disabled={isButtonDisabled}
-    onClick={onClick}
-    type="button"
-  >
-    <Icon type={type} />
-  </button>
-);

package/src/components/IncrementInput/components/ChangeButton/index.ts

@@ -1 +0,0 @@
-export * from './ChangeButton';

package/src/components/IncrementInput/components/index.ts

@@ -1 +0,0 @@
-export * from './ChangeButton';

package/src/helpers/deprecated.ts

@@ -1,23 +0,0 @@
-import {
-  addClickHandler as addClickHandlerHelper,
-  addDataTestId as addDataTestIdHelper,
-  createFilter as createFilterHelper,
-  getSelectKeyHandler as getSelectKeyHandlerHelper,
-  getTestId as getTestIdHelper,
-  isEmpty as isEmptyHelper,
-  isNotEmpty as isNotEmptyHelper,
-  isNumberInteger,
-  isString,
-  isStringNotEmpty as isStringNotEmptyHelper,
-} from '@true-engineering/true-react-platform-helpers';
-
-export const isInt = isNumberInteger;
-export const addClickHandler = addClickHandlerHelper;
-export const addDataTestId = addDataTestIdHelper;
-export const createFilter = createFilterHelper;
-export const getSelectKeyHandler = getSelectKeyHandlerHelper;
-export const getTestId = getTestIdHelper;
-export const isStringNotEmpty = isStringNotEmptyHelper;
-export const isEmpty = isEmptyHelper;
-export const isNotEmpty = <T>(val: T | null | undefined): val is T =>
-  (isString(val) && isStringNotEmptyHelper(val)) || isNotEmptyHelper(val);

package/src/hooks/use-theme.ts

@@ -1,32 +0,0 @@
-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,
-  };
-};