@via-profit/ui-kit 0.1.8 → 0.2.1-alpha.3

package/TextField/index.d.ts

@@ -6,6 +6,13 @@ import { TextFieldInputWrapperProps } from './TextFieldInputWrapper';
 import { TextFieldInputProps } from './TextFieldInput';
 import { TextFieldErrorTextProps } from './TextFieldErrorText';
 import { TextFieldIconWrapperProps } from './TextFieldIconWrapper';
+export * from './TextFieldContainer';
+export * from './TextFieldLabel';
+export * from './TextFieldLabelAsterisk';
+export * from './TextFieldInputWrapper';
+export * from './TextFieldInput';
+export * from './TextFieldErrorText';
+export * from './TextFieldIconWrapper';
 export interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /**
      * If true then `errorText` value will be displayed under the TextField element
@@ -50,31 +57,31 @@ export interface TextFieldOverrides {
     /**
      * Native `input` component
      */
-    readonly Input?: React.ForwardRefExoticComponent<TextFieldInputProps & React.RefAttributes<HTMLInputElement>>;
+    readonly Input?: React.ComponentType<TextFieldInputProps & React.RefAttributes<HTMLInputElement>>;
     /**
      * Component for display error text
      */
-    readonly ErrorText?: React.ForwardRefExoticComponent<TextFieldErrorTextProps & React.RefAttributes<HTMLDivElement>>;
+    readonly ErrorText?: React.ComponentType<TextFieldErrorTextProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Icons wrapper component
      */
-    readonly IconWrapper?: React.ForwardRefExoticComponent<TextFieldIconWrapperProps & React.RefAttributes<HTMLDivElement>>;
+    readonly IconWrapper?: React.ComponentType<TextFieldIconWrapperProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * input field wrapper component
      */
-    readonly InputWrapper?: React.ForwardRefExoticComponent<TextFieldInputWrapperProps & React.RefAttributes<HTMLDivElement>>;
+    readonly InputWrapper?: React.ComponentType<TextFieldInputWrapperProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * label component
      */
-    readonly Label?: React.ForwardRefExoticComponent<TextFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
+    readonly Label?: React.ComponentType<TextFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
     /**
      * label asterisk component
      */
-    readonly Asterisk?: React.ForwardRefExoticComponent<TextFieldLabelAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly Asterisk?: React.ComponentType<TextFieldLabelAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * label component
      */
-    readonly Container?: React.ForwardRefExoticComponent<TextFieldContainerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Container?: React.ComponentType<TextFieldContainerProps & React.RefAttributes<HTMLDivElement>>;
 }
-declare const _default: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLDivElement>>>;
 export default _default;

package/TextField/index.js

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -45,7 +48,23 @@ const TextFieldInputWrapper_1 = __importDefault(require("./TextFieldInputWrapper
 const TextFieldInput_1 = __importDefault(require("./TextFieldInput"));
 const TextFieldErrorText_1 = __importDefault(require("./TextFieldErrorText"));
 const TextFieldIconWrapper_1 = __importDefault(require("./TextFieldIconWrapper"));
-const TextField = (props, ref) => {
+__exportStar(require("./TextFieldContainer"), exports);
+__exportStar(require("./TextFieldLabel"), exports);
+__exportStar(require("./TextFieldLabelAsterisk"), exports);
+__exportStar(require("./TextFieldInputWrapper"), exports);
+__exportStar(require("./TextFieldInput"), exports);
+__exportStar(require("./TextFieldErrorText"), exports);
+__exportStar(require("./TextFieldIconWrapper"), exports);
+const defailtOverrides = {
+    Label: TextFieldLabel_1.default,
+    Input: TextFieldInput_1.default,
+    Asterisk: TextFieldLabelAsterisk_1.default,
+    Container: TextFieldContainer_1.default,
+    ErrorText: TextFieldErrorText_1.default,
+    IconWrapper: TextFieldIconWrapper_1.default,
+    InputWrapper: TextFieldInputWrapper_1.default,
+};
+const TextField = React.forwardRef((props, ref) => {
     const { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = props, nativeInputProps = __rest(props, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
     const [focused, setFocused] = React.useState(false);
     const inputID = React.useMemo(() => {
@@ -53,19 +72,21 @@ const TextField = (props, ref) => {
             return id;
         }
         const u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);
-        const guid = [
+        return [
             u.substring(0, 8),
             u.substring(8, 12),
             '4000-8' + u.substring(13, 16),
             u.substring(16, 28),
         ].join('-');
-        return guid;
     }, [id]);
+    const stableOnChange = React.useCallback(onChange ? onChange : () => undefined, [onChange]); // уже есть
+    // const stableOnFocus = React.useCallback(onFocus, [onFocus]); // уже есть
+    // const stableOnBlur = React.useCallback(onBlur, [onBlur]); // уже есть
     const inputChange = React.useCallback(event => {
-        if (onChange) {
-            onChange(event);
+        if (stableOnChange) {
+            stableOnChange(event);
         }
-    }, [onChange]);
+    }, [stableOnChange]);
     const inputFocus = React.useCallback(event => {
         setFocused(true);
         if (typeof onFocus === 'function') {
@@ -80,23 +101,29 @@ const TextField = (props, ref) => {
     }, [onBlur]);
     const hasStartIcon = React.useMemo(() => typeof startIcon !== 'undefined' && startIcon !== null, [startIcon]);
     const hasEndIcon = React.useMemo(() => typeof endIcon !== 'undefined' && endIcon !== null, [endIcon]);
-    const overridesMap = React.useMemo(() => ({
-        Label: (overrides === null || overrides === void 0 ? void 0 : overrides.Label) || TextFieldLabel_1.default,
-        Input: (overrides === null || overrides === void 0 ? void 0 : overrides.Input) || TextFieldInput_1.default,
-        Asterisk: (overrides === null || overrides === void 0 ? void 0 : overrides.Asterisk) || TextFieldLabelAsterisk_1.default,
-        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || TextFieldContainer_1.default,
-        ErrorText: (overrides === null || overrides === void 0 ? void 0 : overrides.ErrorText) || TextFieldErrorText_1.default,
-        IconWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.IconWrapper) || TextFieldIconWrapper_1.default,
-        InputWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.InputWrapper) || TextFieldInputWrapper_1.default,
-    }), [overrides]);
-    return (React.createElement(overridesMap.Container, { ref: ref, fullWidth: fullWidth, className: className, style: style, focused: focused },
-        typeof label !== 'undefined' && label !== null && (React.createElement(overridesMap.Label, { htmlFor: inputID, error: error },
+    const overridesMap = React.useMemo(() => (Object.assign(Object.assign({}, defailtOverrides), overrides)), [overrides]);
+    const renderAsterisk = React.useCallback(() => {
+        if (!requiredAsterisk) {
+            return null;
+        }
+        return (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk));
+    }, [overridesMap, requiredAsterisk]);
+    const renderLabel = React.useCallback(() => {
+        if (!label) {
+            return null;
+        }
+        return (React.createElement(overridesMap.Label, { htmlFor: inputID, error: error },
             label,
-            typeof requiredAsterisk !== 'undefined' && requiredAsterisk !== null && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+            renderAsterisk()));
+    }, [error, inputID, label, overridesMap, renderAsterisk]);
+    const renderIcon = React.useCallback((position, icon) => (React.createElement(overridesMap.IconWrapper, { position: position }, icon)), [overridesMap]);
+    return (React.createElement(overridesMap.Container, { ref: ref, fullWidth: fullWidth, className: className, style: style, focused: focused },
+        renderLabel(),
         React.createElement(overridesMap.InputWrapper, { error: error, focused: focused, fullWidth: fullWidth },
-            hasStartIcon && (React.createElement(overridesMap.IconWrapper, { position: "start" }, startIcon)),
+            hasStartIcon && renderIcon('start', startIcon),
             React.createElement(overridesMap.Input, Object.assign({}, nativeInputProps, { hasStartIcon: hasStartIcon, hasEndIcon: hasEndIcon, ref: inputRef, id: inputID, onChange: inputChange, onFocus: inputFocus, onBlur: inputBlur })),
-            hasEndIcon && (React.createElement(overridesMap.IconWrapper, { position: "end" }, endIcon))),
+            hasEndIcon && renderIcon('end', endIcon)),
         React.createElement(overridesMap.ErrorText, { error: error }, errorText)));
-};
-exports.default = React.forwardRef(TextField);
+});
+TextField.displayName = 'TextField';
+exports.default = React.memo(TextField);

package/ThemeProvider/createTheme.js

@@ -39,9 +39,9 @@ const createTheme = overrides => {
         successContrast: '#ffffff',
     };
     Object.entries(Object.assign(Object.assign({}, defaultColors), color)).forEach(([colorName, colorValue]) => {
-        theme.color[colorName] = new Color_1.default(colorValue);
+        theme.color[colorName] = Color_1.default.fromString(colorValue);
     });
-    theme.color.test = new Color_1.default('red');
+    theme.color.test = Color_1.default.fromString('red');
     return theme;
 };
 exports.createTheme = createTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.8",
+  "version": "0.2.1-alpha.3",
   "description": "UI Kit",
   "repository": {
     "type": "git",

package/Calendar/reducer.d.ts

@@ -1,14 +0,0 @@
-import { CalendarValue } from './use-calendar';
-export type State<Range extends boolean | undefined = undefined> = {
-    readonly calendarDate: Date;
-    readonly calendarValue: CalendarValue<Range>;
-    readonly calendarCurrentView: CalendarView;
-    readonly calendarViewVariants: readonly CalendarView[];
-};
-export type CalendarView = 'days' | 'months' | 'years';
-export declare const createDefaultState: <Range_1 extends boolean | undefined = undefined>(range?: Range_1 | undefined) => State<Range_1>;
-export type Action<Range extends boolean | undefined = undefined> = {
-    readonly type: 'setPartial';
-    readonly payload: Partial<State<Range>>;
-};
-export declare const reducer: <Range_1 extends boolean | undefined = undefined>(state: State<Range_1>, action: Action<Range_1>) => State<Range_1>;

package/Calendar/reducer.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.reducer = exports.createDefaultState = void 0;
-const createDefaultState = (range) => {
-    const currentDate = new Date();
-    const nextDate = new Date();
-    nextDate.setDate(nextDate.getDate() + 3);
-    return {
-        calendarValue: range
-            ? [currentDate, nextDate]
-            : new Date(),
-        calendarDate: range ? currentDate : new Date(),
-        calendarCurrentView: 'days',
-        calendarViewVariants: ['years', 'months', 'days'],
-    };
-};
-exports.createDefaultState = createDefaultState;
-const reducer = (state, action) => {
-    switch (action.type) {
-        case 'setPartial':
-            return Object.assign(Object.assign({}, state), action.payload);
-        default:
-            return state;
-    }
-};
-exports.reducer = reducer;