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

package/dist/types.d.ts

@@ -24,6 +24,9 @@ export declare type UiKitHelpers = Record<string, Styles | (() => Styles)>;
 export interface UiKitTheme {
     name: string;
     components?: Partial<Record<ComponentName, ComponentStyles<any, any>>>;
+    /**
+     * Для переопределения иконок, которые есть в UiKit
+     */
     icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
     complexIcons?: Partial<Record<IComplexIcon, string>>;
     preloaders?: Partial<Record<IPreloaderSvgType, string>>;

package/package.json

@@ -1,91 +1,91 @@
-{
-  "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "2.0.1",
-  "description": "True Engineering React UI Kit with theming support",
-  "author": "True Engineering (https://trueengineering.ru)",
-  "keywords": [
-    "TE",
-    "True Engineering",
-    "UI Kit with theming support",
-    "UI Kit"
-  ],
-  "homepage": "",
-  "license": "Apache-2.0",
-  "type": "module",
-  "types": "dist/index.d.ts",
-  "main": "dist/true-react-common-ui-kit.umd.cjs",
-  "module": "./dist/true-react-common-ui-kit.js",
-  "directories": {
-    "lib": "src"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "files": [
-    "src",
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "require": "./dist/true-react-common-ui-kit.umd.cjs",
-      "import": "./dist/true-react-common-ui-kit.js"
-    },
-    "./dist/style.css": "./dist/style.css",
-    "./src": "./src/index.ts"
-  },
-  "scripts": {
-    "build": "tsc && vite build",
-    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
-    "format": "prettier --write \"**/*.{js,jsx,css,json,ts,tsx}\"",
-    "format:check": "prettier --check \"**/*.{js,jsx,css,json,ts,tsx}\"",
-    "full-check": "yarn format:check && yarn lint",
-    "types-check": "tsc --noEmit"
-  },
-  "dependencies": {
-    "clsx": "1.2.1",
-    "country-flag-icons": "1.5.5",
-    "date-fns": "2.29.3",
-    "hex-to-rgba": "2.0.1",
-    "jss": "10.9.2",
-    "lodash-es": "4.17.21",
-    "react": "18.2.0",
-    "react-datepicker": "4.25.0",
-    "react-dom": "18.2.0",
-    "react-input-mask": "3.0.0-alpha.2",
-    "react-jss": "10.9.2",
-    "react-overlays": "5.2.1",
-    "react-remove-scroll": "2.5.6",
-    "react-transition-group": "4.4.5",
-    "scroll-into-view-if-needed": "3.0.6",
-    "ts-debounce": "4.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "7.20.12",
-    "@storybook/addon-actions": "6.5.15",
-    "@storybook/addon-essentials": "6.5.15",
-    "@storybook/addon-interactions": "6.5.15",
-    "@storybook/addon-links": "6.5.15",
-    "@storybook/builder-vite": "0.3.0",
-    "@storybook/react": "6.5.15",
-    "@storybook/testing-library": "0.0.13",
-    "@swc/core": "^1.3.30",
-    "@types/lodash-es": "4.17.11",
-    "@types/react": "18.0.26",
-    "@types/react-datepicker": "4.19.4",
-    "@types/react-dom": "18.0.9",
-    "@types/react-input-mask": "3.0.2",
-    "@types/react-transition-group": "4.4.5",
-    "@typescript-eslint/eslint-plugin": "5.48.2",
-    "@typescript-eslint/parser": "5.48.2",
-    "@vitejs/plugin-react": "3.0.0",
-    "eslint": "8.36.0",
-    "eslint-config-prettier": "8.7.0",
-    "eslint-plugin-react": "7.32.2",
-    "prettier": "2.8.3",
-    "rollup-plugin-swc3": "0.3.0",
-    "typescript": "4.9.3",
-    "unplugin-swc": "1.3.2",
-    "vite": "4.0.0",
-    "vite-plugin-dts": "1.7.1"
-  }
-}
+{
+  "name": "@true-engineering/true-react-common-ui-kit",
+  "version": "2.1.0",
+  "description": "True Engineering React UI Kit with theming support",
+  "author": "True Engineering (https://trueengineering.ru)",
+  "keywords": [
+    "TE",
+    "True Engineering",
+    "UI Kit with theming support",
+    "UI Kit"
+  ],
+  "homepage": "",
+  "license": "Apache-2.0",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "main": "dist/true-react-common-ui-kit.umd.cjs",
+  "module": "./dist/true-react-common-ui-kit.js",
+  "directories": {
+    "lib": "src"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/true-react-common-ui-kit.umd.cjs",
+      "import": "./dist/true-react-common-ui-kit.js"
+    },
+    "./dist/style.css": "./dist/style.css",
+    "./src": "./src/index.ts"
+  },
+  "scripts": {
+    "build": "tsc && vite build",
+    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
+    "format": "prettier --write \"**/*.{js,jsx,css,json,ts,tsx}\"",
+    "format:check": "prettier --check \"**/*.{js,jsx,css,json,ts,tsx}\"",
+    "full-check": "yarn format:check && yarn lint",
+    "types-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "clsx": "1.2.1",
+    "country-flag-icons": "1.5.5",
+    "date-fns": "2.29.3",
+    "hex-to-rgba": "2.0.1",
+    "jss": "10.9.2",
+    "lodash-es": "4.17.21",
+    "react": "18.2.0",
+    "react-datepicker": "4.25.0",
+    "react-dom": "18.2.0",
+    "react-input-mask": "3.0.0-alpha.2",
+    "react-jss": "10.9.2",
+    "react-overlays": "5.2.1",
+    "react-remove-scroll": "2.5.6",
+    "react-transition-group": "4.4.5",
+    "scroll-into-view-if-needed": "3.0.6",
+    "ts-debounce": "4.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.20.12",
+    "@storybook/addon-actions": "6.5.15",
+    "@storybook/addon-essentials": "6.5.15",
+    "@storybook/addon-interactions": "6.5.15",
+    "@storybook/addon-links": "6.5.15",
+    "@storybook/builder-vite": "0.3.0",
+    "@storybook/react": "6.5.15",
+    "@storybook/testing-library": "0.0.13",
+    "@swc/core": "^1.3.30",
+    "@types/lodash-es": "4.17.11",
+    "@types/react": "18.0.26",
+    "@types/react-datepicker": "4.19.4",
+    "@types/react-dom": "18.0.9",
+    "@types/react-input-mask": "3.0.2",
+    "@types/react-transition-group": "4.4.5",
+    "@typescript-eslint/eslint-plugin": "5.48.2",
+    "@typescript-eslint/parser": "5.48.2",
+    "@vitejs/plugin-react": "3.0.0",
+    "eslint": "8.36.0",
+    "eslint-config-prettier": "8.7.0",
+    "eslint-plugin-react": "7.32.2",
+    "prettier": "2.8.3",
+    "rollup-plugin-swc3": "0.3.0",
+    "typescript": "4.9.3",
+    "unplugin-swc": "1.3.2",
+    "vite": "4.0.0",
+    "vite-plugin-dts": "1.7.1"
+  }
+}

package/src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, PropsWithChildren } from 'react';
+import { useEffect, useState, ReactNode } from 'react';
 import clsx from 'clsx';
 import { Icon } from '../Icon';
 import { useTheme } from '../../hooks';
@@ -13,6 +13,7 @@ import { CheckboxStyles, styles } from './Checkbox.styles';
 
 export interface ICheckboxProps<V> extends ICommonProps {
   tweakStyles?: CheckboxStyles;
+  children?: ReactNode;
   isChecked?: boolean;
   isSemiChecked?: boolean;
   isDisabled?: boolean;
@@ -54,7 +55,7 @@ export function Checkbox<V>({
   labelPosition = 'right',
   tweakStyles,
   onSelect,
-}: PropsWithChildren<ICheckboxProps<V>>): JSX.Element {
+}: ICheckboxProps<V>): JSX.Element {
   const { classes } = useTheme('Checkbox', styles, tweakStyles, {
     size,
     alignItems,

package/src/components/DatePicker/DatePicker.tsx

@@ -46,10 +46,6 @@ export interface IDatePickerProps extends IDatePickerBaseProps {
   selectedDate?: Date | null;
   locale: Locale;
   months?: string[];
-  minDate?: Date | null;
-  maxDate?: Date | null;
-  endDate?: Date | null;
-  startDate?: Date | null;
   topPosition?: number;
   leftPosition?: number;
   /**
@@ -91,6 +87,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       isInline,
       isDisabled,
       isClearable,
+      strictParsing,
       focusSelectedMonth,
       disabledKeyboardNavigation,
       shouldRenderPopperInBody,
@@ -305,6 +302,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
           popperModifiers={popperModifiers}
           popperPlacement={popperPlacement}
           selectsRange={isRange}
+          strictParsing={strictParsing}
           preventOpenOnFocus={preventOpenOnFocus}
           shouldCloseOnSelect={shouldCloseOnSelect}
           customInputRef={customInputRef}

package/src/components/DatePicker/types.ts

@@ -5,6 +5,10 @@ export type IRange = [Date | null, Date | null] | null;
 
 export type IDatePickerBaseProps = Pick<
   ReactDatePickerProps,
+  | 'startDate'
+  | 'endDate'
+  | 'minDate'
+  | 'maxDate'
   | 'allowSameDay'
   | 'disabledKeyboardNavigation'
   | 'monthsShown'
@@ -24,6 +28,7 @@ export type IDatePickerBaseProps = Pick<
   | 'renderCustomHeader'
   | 'customInputRef'
   | 'preventOpenOnFocus'
+  | 'strictParsing'
 > &
   Omit<
     IDateInputProps,

package/src/components/FlexibleTable/FlexibleTable.stories.tsx

@@ -1,86 +1,86 @@
-import { ComponentStory } from '@storybook/react';
-import { FC } from 'react';
-import { FlexibleTable } from './FlexibleTable';
-import { FlexibleTableConfigType } from './types';
-import content from './fixture-test';
-
-export default {
-  title: 'Table/FlexibleTable',
-  component: FlexibleTable,
-};
-
-interface ITableContent {
-  contractCode: string;
-  validFrom: Date;
-  validTo: Date;
-  title: string;
-  signDate: Date;
-  partner: string;
-  partnerDescription: string;
-  parentContract: string;
-  currency: string;
-  status: string;
-}
-
-const Temp: FC<{ value: string | undefined }> = ({ value }) => <>{value}</>;
-const Temp1: FC<{ value: string }> = ({ value }) => <>{value}</>;
-
-const config: FlexibleTableConfigType<ITableContent> = {
-  contractCode: {
-    title: 'Contract Code',
-  },
-  title: {
-    component: Temp,
-    title: 'Title',
-    minWidth: 320,
-  },
-  validFrom: {
-    title: 'Valid From',
-  },
-  validTo: {
-    title: 'Valid From',
-  },
-  signDate: {
-    title: 'Sign Date',
-  },
-  partner: {
-    component: Temp1,
-    title: 'Partner',
-  },
-};
-
-const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (
-  args,
-) => (
-  <FlexibleTable<ITableContent>
-    {...args}
-    uniqueField="contractCode"
-    expandableRowComponent={(item, _, close) =>
-      item.contractCode === 'OB_UT_M119' ? (
-        <div onClick={close}>всем привет :) {item.contractCode}</div>
-      ) : null
-    }
-    content={content}
-    config={config}
-  />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  isHorizontallyScrollable: true,
-  isFirstColumnSticky: true,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'data',
-      'testId',
-      'onHeadClick',
-      'onRowClick',
-      'onRowHover',
-      'expandableRowComponent',
-    ],
-  },
-};
+import { ComponentStory } from '@storybook/react';
+import { FC } from 'react';
+import { FlexibleTable } from './FlexibleTable';
+import { FlexibleTableConfigType } from './types';
+import content from './fixture-test';
+
+export default {
+  title: 'Table/FlexibleTable',
+  component: FlexibleTable,
+};
+
+interface ITableContent {
+  contractCode: string;
+  validFrom: Date;
+  validTo: Date;
+  title: string;
+  signDate: Date;
+  partner: string;
+  partnerDescription: string;
+  parentContract: string;
+  currency: string;
+  status: string;
+}
+
+const Temp: FC<{ value: string | undefined }> = ({ value }) => <>{value}</>;
+const Temp1: FC<{ value: string }> = ({ value }) => <>{value}</>;
+
+const config: FlexibleTableConfigType<ITableContent> = {
+  contractCode: {
+    title: 'Contract Code',
+  },
+  title: {
+    component: Temp,
+    title: 'Title',
+    minWidth: 320,
+  },
+  validFrom: {
+    title: 'Valid From',
+  },
+  validTo: {
+    title: 'Valid From',
+  },
+  signDate: {
+    title: 'Sign Date',
+  },
+  partner: {
+    component: Temp1,
+    title: 'Partner',
+  },
+};
+
+const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (
+  args,
+) => (
+  <FlexibleTable<ITableContent>
+    {...args}
+    uniqueField="contractCode"
+    expandableRowComponent={(item, _, close) =>
+      item.contractCode === 'OB_UT_M119' ? (
+        <div onClick={close}>всем привет :) {item.contractCode}</div>
+      ) : null
+    }
+    content={content}
+    config={config}
+  />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  isHorizontallyScrollable: true,
+  isFirstColumnSticky: true,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: [
+      'data',
+      'testId',
+      'onHeadClick',
+      'onRowClick',
+      'onRowHover',
+      'expandableRowComponent',
+    ],
+  },
+};

package/src/components/RadioButton/RadioButton.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTheme } from '../../hooks';
 import { addDataAttributes, isNotEmpty } from '../../helpers';
@@ -8,12 +8,13 @@ import { RadioButtonStyles, styles } from './RadioButton.styles';
 
 export interface IRadioButtonProps<Value extends string> extends ICommonProps {
   tweakStyles?: RadioButtonStyles;
+  children?: ReactNode;
   value: Value;
   groupName: string;
   isChecked?: boolean;
   isDisabled?: boolean;
   isInvalid?: boolean;
-  onChange: (value: Value) => void | Promise<void>;
+  onChange(value: Value): void | Promise<void>;
 }
 
 export function RadioButton<Value extends string>({
@@ -23,10 +24,10 @@ export function RadioButton<Value extends string>({
   isChecked,
   isDisabled,
   isInvalid,
-  onChange,
   data,
   tweakStyles,
-}: PropsWithChildren<IRadioButtonProps<Value>>): JSX.Element {
+  onChange,
+}: IRadioButtonProps<Value>): JSX.Element {
   const { classes } = useTheme('RadioButton', styles, tweakStyles);
 
   return (