venice-ui 2.4.12 → 3.0.1

package/dist/types/config/index.d.ts

@@ -0,0 +1,4 @@
+export * from './config';
+export * from './themes';
+export * from './componentTheme';
+export * from './wordbook';

package/dist/types/config/themes.d.ts

@@ -0,0 +1,64 @@
+export declare const themes: {
+    readonly default: {
+        readonly primitive: {
+            readonly primary: {
+                readonly 50: "#F2F8FD";
+                readonly 100: "#E4F1FA";
+                readonly 200: "#C7E3F5";
+                readonly 300: "#9FD0EC";
+                readonly 400: "#6EB8DF";
+                readonly 500: "#3B90CB";
+                readonly 600: "#2F78B0";
+                readonly 700: "#25608E";
+                readonly 800: "#1C496C";
+                readonly 900: "#13324A";
+            };
+            readonly neutral: {
+                readonly 0: "#FFFFFF";
+                readonly 50: "#F9FAFB";
+                readonly 100: "#F3F4F6";
+                readonly 200: "#E5E7EB";
+                readonly 300: "#D1D5DB";
+                readonly 400: "#9CA3AF";
+                readonly 500: "#6B7280";
+                readonly 600: "#4B5563";
+                readonly 700: "#374151";
+                readonly 800: "#1F2937";
+                readonly 900: "#111827";
+            };
+            readonly error: {
+                readonly 50: "#FEF2F2";
+                readonly 100: "#FEE2E2";
+                readonly 200: "#FECACA";
+                readonly 300: "#FCA5A5";
+                readonly 500: "#EF4444";
+                readonly 600: "#DC2626";
+            };
+            readonly info: {
+                readonly 50: "#EFF6FF";
+                readonly 100: "#DBEAFE";
+                readonly 200: "#BFDBFE";
+                readonly 500: "#3B82F6";
+                readonly 600: "#2563EB";
+            };
+            readonly warning: {
+                readonly 50: "#FFFBEB";
+                readonly 100: "#FEF3C7";
+                readonly 200: "#FDE68A";
+                readonly 500: "#F59E0B";
+                readonly 600: "#D97706";
+            };
+            readonly success: {
+                readonly 50: "#ECFDF5";
+                readonly 100: "#D1FAE5";
+                readonly 200: "#A7F3D0";
+                readonly 500: "#10B981";
+                readonly 600: "#059669";
+            };
+        };
+    };
+};
+export type Themes = typeof themes;
+export type ThemeName = keyof Themes;
+export type AppTheme = Themes[ThemeName];
+export declare const defaultTheme: AppTheme;

package/dist/types/config/wordbook.d.ts

@@ -0,0 +1,55 @@
+export declare const wordbook: {
+    label: {
+        optional: string;
+    };
+    dropdown: {
+        placeholder: string;
+    };
+    searchInput: {
+        placeholder: string;
+        emptyState: string;
+    };
+    button: {
+        defaultText: string;
+    };
+    actions: {
+        confirm: string;
+        cancel: string;
+        clear: string;
+    };
+    file: {
+        placeholder: string;
+        buttonPlaceholder: string;
+    };
+    selector: {
+        placeholder: string;
+        emptyPanelMsg: string;
+    };
+    calendar: {
+        actionLabels: {
+            close: string;
+            confirm: string;
+            today: string;
+        };
+        months: string[];
+        weekdaysShort: string[];
+        placeholder: string;
+    };
+    section: {
+        action: string;
+    };
+    pagination: {
+        dropdownLabel: string;
+    };
+    filters: {
+        title: string;
+        confirm: string;
+        cancel: string;
+        labelClearAll: string;
+        filterText: string;
+        clear: string;
+    };
+    table: {
+        filterEmptyState: string;
+    };
+};

package/dist/types/example/ExampleComponent.d.ts

@@ -1,29 +1,29 @@
-export declare const StoryWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StoryWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 interface IExmpleBlock {
     width?: string;
     height?: string;
     color?: string;
 }
-export declare const ExmpleBlock: import("styled-components").StyledComponent<"div", any, IExmpleBlock, never>;
+export declare const ExmpleBlock: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IExmpleBlock, never>;
 interface IExmpleBlockWrapper {
     color?: string;
 }
-export declare const ExmpleBlockWrapper: import("styled-components").StyledComponent<"div", any, IExmpleBlockWrapper, never>;
-export declare const ExampleTable: import("styled-components").StyledComponent<"table", any, {}, never>;
-export declare const ExampleTableRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
-export declare const ExampleTableCell: import("styled-components").StyledComponent<"td", any, {}, never>;
-export declare const ExampleTableHeader: import("styled-components").StyledComponent<"th", any, {}, never>;
-export declare const ExampleAreaTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ExampleArea: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ExampleItem: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconsShowroom: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconName: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ColorsPreviewArea: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ColorsPreviewRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ExmpleBlockWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IExmpleBlockWrapper, never>;
+export declare const ExampleTable: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {}, never>;
+export declare const ExampleTableRow: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {}, never>;
+export declare const ExampleTableCell: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {}, never>;
+export declare const ExampleTableHeader: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, {}, never>;
+export declare const ExampleAreaTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ExampleArea: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ExampleItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const IconsShowroom: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const IconName: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ColorsPreviewArea: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ColorsPreviewRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 interface IColorsPreviewStyle {
     color: string;
 }
-export declare const ColorsPreview: import("styled-components").StyledComponent<"div", any, IColorsPreviewStyle, never>;
-export declare const ColorsDesc: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Test: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ColorsPreview: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IColorsPreviewStyle, never>;
+export declare const ColorsDesc: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Test: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};

package/dist/types/example/Icons.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const Icons: FC;

package/dist/types/index.d.ts

@@ -1,30 +1,34 @@
+export * from './components/ActionPanel';
 export * from './components/Aligment';
 export * from './components/Button';
 export * from './components/ButtonsFooter';
 export * from './components/Card';
 export * from './components/Checkbox';
-export * from './components/Chips';
+export * from './components/ComponentRoot';
 export * from './components/DatePicker';
 export * from './components/Dropdown';
 export * from './components/DropdownMenu';
-export * from './components/ElementHeader';
-export * from './components/DropdownMenu';
-export * from './components/Form';
 export * from './components/File';
-export * from './components/FillSelect';
 export * from './components/Filters';
-export * from './components/Icons';
+export * from './components/Form';
+export * from './components/Header';
+export * from './components/HelperText';
+export * from './components/Icon';
 export * from './components/Input';
+export * from './components/Label';
 export * from './components/List';
 export * from './components/Loader';
 export * from './components/Modal';
+export * from './components/Numerical';
+export * from './components/OptionsPanel';
 export * from './components/Pagination';
+export * from './components/SearchInput';
 export * from './components/Section';
 export * from './components/Selector';
 export * from './components/Sidepanel';
 export * from './components/Sort';
 export * from './components/Table';
+export * from './components/Tag';
 export * from './components/Tile';
-export * from './components/Toogle';
-export * from './components/Tooltip';
+export * from './components/Toggle';
 export * from './components/Typography';

package/dist/types/types/commonTypes.d.ts

@@ -1,3 +1,4 @@
+import { InputType, LabelPosition } from './types';
 export interface IOption {
     value: string | number;
     label: string | number;
@@ -14,3 +15,70 @@ export interface IIconsActions {
     iconName: string;
     action: (id?: string) => void;
 }
+export interface ICalendarLocaleLabels {
+    months?: string[];
+    weekdaysShort?: string[];
+    firstDayOfWeek?: number;
+}
+export interface FormDataProps {
+    type: string;
+    label: string;
+    value: any;
+    name: string;
+    inputType?: InputType;
+    labelPosition?: LabelPosition;
+    width?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    options?: IOption[];
+    autofocus?: boolean;
+    submit?: () => void;
+    position?: string;
+    zIndex?: number;
+    isDisabled?: boolean;
+    error?: boolean;
+    helperText?: string;
+    placeholder?: string;
+    maxHeight?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    optional?: boolean;
+    optionalLabel?: string;
+    handleAdd?: (value: string | number) => void;
+    prefix?: string;
+    suffix?: string;
+    prefixIcon?: string;
+    suffixIcon?: string;
+    prefixIconAction?: (name: string) => void;
+    suffixIconAction?: (name: string) => void;
+    withClear?: boolean;
+    maxRows?: number;
+    noBreakLabel?: boolean;
+    searchable?: boolean;
+    buttonLabel?: string;
+    isAdvance?: boolean;
+    autoConfirm?: boolean;
+    actionLabels?: IComponentLabels;
+    localeLabels?: ICalendarLocaleLabels;
+    multipleFile?: boolean;
+    acceptFormats?: string;
+}
+interface FormDataParentProps {
+    row: FormDataProps[];
+}
+export type DataType = FormDataProps | FormDataParentProps;
+export interface FormSourceData {
+    data: DataType[];
+    action: any;
+}
+export interface IDetailsProps {
+    label: string;
+    value: any;
+    type: string;
+}
+export interface IComponentLabels {
+    [name: string]: string | undefined;
+}
+export type IFilterLabels = IComponentLabels;
+export {};

package/dist/types/types/types.d.ts

@@ -1,8 +1,13 @@
-export type ButtonMode = 'primary' | 'secondary';
-export type InputSize = 'large' | 'medium' | 'small';
-export type InputType = "text" | "password" | "email" | "number" | "increase";
+export type ButtonMode = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type InputSize = 'lg' | 'md' | 'sm';
+export type InputType = "text" | "password" | "email";
+export type NumberType = "number" | "increase";
 export type LabelPosition = "top" | "left";
 export type TitlePosition = "left" | "center" | "right";
+export type TIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xl2' | 'xl3' | 'xl4';
+export type THelperMode = 'default' | 'error' | 'success';
+export type AdditionalType = 'button' | 'toggle';
+export type TagType = 'default' | 'success' | 'warning' | 'error';
 export interface IFormElement {
     label?: string;
     labelPosition?: LabelPosition;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "2.4.12",
+  "version": "3.0.1",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",
@@ -34,18 +34,14 @@
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
-    "@storybook/addon-actions": "^7.0.12",
-    "@storybook/addon-essentials": "^7.0.12",
-    "@storybook/addon-interactions": "^7.0.12",
-    "@storybook/addon-links": "^7.0.12",
-    "@storybook/addon-mdx-gfm": "^7.0.12",
-    "@storybook/cli": "^7.0.12",
-    "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/react": "^7.0.12",
-    "@storybook/react-webpack5": "^7.0.12",
-    "@storybook/testing-library": "0.1.0",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-links": "^10.3.5",
+    "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
+    "@storybook/react": "^10.3.5",
+    "@storybook/react-webpack5": "^10.3.5",
     "@types/node": "^18.16.0",
-    "@types/react": "^16.11.7",
+    "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.37.0",
     "@typescript-eslint/parser": "^5.37.0",
@@ -53,11 +49,11 @@
     "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.8",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^10.3.5",
     "prettier": "2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.12",
+    "storybook": "^10.3.5",
     "typescript": "^5.0.4"
   },
   "overrides": {
@@ -72,10 +68,6 @@
     "npm": "10.9.2"
   },
   "dependencies": {
-    "@storybook/addon-a11y": "^7.0.12",
-    "@storybook/addons": "^7.0.12",
-    "@storybook/preset-create-react-app": "^7.0.12",
-    "@storybook/theming": "^7.0.12",
     "@types/styled-components": "^5.1.26",
     "date-fns": "^2.30.0",
     "ftp-deploy": "^2.4.4",
@@ -85,4 +77,4 @@
     "react-docgen-typescript-plugin": "^1.0.5",
     "styled-components": "^5.3.10"
   }
-}
+}

package/dist/cjs/Theme/Theme.js

@@ -1,130 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mainTheme = exports.Theme = exports.pallete = void 0;
-const polished_1 = require("polished");
-exports.pallete = {
-    primary: "#4c95c5",
-    accent: '#e4b485',
-};
-exports.Theme = {
-    colors: {
-        primary: exports.pallete.primary,
-        primary_40: (0, polished_1.lighten)(0.1, exports.pallete.primary),
-        primary_30: (0, polished_1.lighten)(0.2, exports.pallete.primary),
-        primary_20: (0, polished_1.lighten)(0.3, exports.pallete.primary),
-        primary_10: (0, polished_1.lighten)(0.4, exports.pallete.primary),
-        accent: exports.pallete.accent,
-        accent_light: (0, polished_1.lighten)(0.2, exports.pallete.accent),
-        black: "#000000",
-        text: '#333333',
-        darkGray: ' #222222',
-        gray_1: '#979797',
-        gray_2: "#b7b7b7",
-        gray_3: "#e3e3e3",
-        gray_4: '#f3f3f3',
-        white: "#ffffff",
-        overlayer: 'rgba(0,0,0,0.4)',
-        red: '#ad1616',
-        orange: '#de890a',
-        green: '#179334'
-    },
-    fontSize: {
-        xxs: '10px',
-        xs: "12px",
-        s: "14px",
-        m: "16px",
-        l: "22px",
-        xl: "32px",
-    },
-    lineHeight: {
-        xxs: '12px',
-        xs: "14px",
-        s: "16px",
-        m: "18px",
-        l: "24px",
-        xl: "36px",
-    },
-    padding: {
-        xs: "2px",
-        s: "4px",
-        m: "8px",
-        l: "16px",
-        xl: "32px",
-        xxl: '48px',
-    },
-    zIndex: {
-        modalOverlayer: 1000,
-        dropdown: 800,
-    },
-    borderRadius: {
-        s: '2px',
-        m: '4px',
-        l: '8px',
-    },
-    shadow: {
-        s: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);',
-        m: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);'
-    }
-};
-exports.mainTheme = {
-    //buton
-    action: exports.Theme.colors.primary,
-    buttonText: exports.Theme.colors.white,
-    buttonPrimaryHover: (0, polished_1.lighten)(0.1, exports.Theme.colors.primary),
-    buttonSecondaryHover: (0, polished_1.lighten)(0.4, exports.Theme.colors.primary),
-    buttonInverseHover: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
-    disabledBackground: exports.Theme.colors.gray_4,
-    disabledText: exports.Theme.colors.gray_1,
-    errorBackgroundColor: exports.Theme.colors.red,
-    errorBackgroundColorHover: (0, polished_1.lighten)(0.3, exports.Theme.colors.red),
-    errorBackgroundColorHoverLight: (0, polished_1.lighten)(0.6, exports.Theme.colors.red),
-    //icon
-    iconColor: exports.Theme.colors.text,
-    iconHoverColor: exports.Theme.colors.primary,
-    iconBgColor: 'transparent',
-    iconDisabledColor: exports.Theme.colors.gray_4,
-    iconBgHoverColor: exports.Theme.colors.primary_10,
-    //text
-    textColor: exports.Theme.colors.text,
-    // input
-    inputDefaultBackground: exports.Theme.colors.white,
-    inputDefaultBorder: exports.Theme.colors.gray_2,
-    inputDefaultTextColor: exports.Theme.colors.text,
-    inputFocusBackground: (0, polished_1.lighten)(0.45, exports.Theme.colors.primary),
-    inputFocusBorder: exports.Theme.colors.primary,
-    inputFocusTextColor: exports.Theme.colors.text,
-    inputDisabledBackground: exports.Theme.colors.gray_4,
-    inputDisabledBorder: exports.Theme.colors.gray_1,
-    inputDisabledTextColor: exports.Theme.colors.gray_1,
-    inputErrorBackground: (0, polished_1.lighten)(0.6, exports.Theme.colors.red),
-    inputErrorBorder: exports.Theme.colors.red,
-    inputErrorTextColor: exports.Theme.colors.red,
-    // global
-    contentBackground: exports.Theme.colors.white,
-    // selector / dropdown
-    optionActiveColor: exports.Theme.colors.primary,
-    optionColor: exports.Theme.colors.text,
-    optionHoverBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
-    selector: exports.Theme.colors.primary_10,
-    //table
-    tableBorderColor: exports.Theme.colors.gray_3,
-    tableHeaderBackground: exports.Theme.colors.white,
-    tableHeaderActive: exports.Theme.colors.primary,
-    tableCellBackground: exports.Theme.colors.white,
-    tableCellEvenBackground: exports.Theme.colors.gray_4,
-    tableCellHoverBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
-    tableCellActiveBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
-    tableCellSortIconActive: exports.Theme.colors.primary,
-    tableCellSortIcon: exports.Theme.colors.text,
-    tableMoreIconColor: exports.Theme.colors.text,
-    tableHoverMoreIconColor: exports.Theme.colors.primary,
-    // chips
-    chipsNeutralBackground: exports.Theme.colors.primary,
-    chipsNeutralTextColor: exports.Theme.colors.white,
-    chipsNeutralHoverBackground: (0, polished_1.lighten)(0.1, exports.Theme.colors.primary),
-    //toogle
-    toogleBackgrund: exports.Theme.colors.gray_3,
-    toogleActiveBackgorund: exports.Theme.colors.primary_20,
-    //checkobx
-    checkColor: exports.Theme.colors.text,
-};

package/dist/cjs/components/ButtonsFooter/ButtonsFooter.style.js

@@ -1,10 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonsFooterGroup = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-exports.ButtonsFooterGroup = styled_components_1.default.div `
-    display:flex;
-`;

package/dist/cjs/components/Chips/Chips.js

@@ -1,20 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Chips = void 0;
-const Aligment_1 = require("../Aligment");
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = require("styled-components");
-const Theme_1 = require("../../Theme");
-const Chips_styles_1 = require("./Chips.styles");
-const Icons_1 = require("../Icons");
-const Chips = ({ theme = Theme_1.mainTheme, label, handleClose, }) => {
-    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-        react_1.default.createElement(Chips_styles_1.ChipsElement, { onClick: () => handleClose() },
-            react_1.default.createElement(Aligment_1.Aligment, { gap: 4 },
-                react_1.default.createElement(Chips_styles_1.ChipsLabel, null, label),
-                react_1.default.createElement(Icons_1.Icon, { name: "close", iconColor: theme.chipsNeutralTextColor, iconHoverColor: theme.chipsNeutralTextColor, iconBgHoverColor: theme.iconBgColor, size: 14 })))));
-};
-exports.Chips = Chips;

package/dist/cjs/components/Chips/Chips.styles.js

@@ -1,24 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChipsLabel = exports.ChipsElement = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme");
-exports.ChipsElement = styled_components_1.default.div `
-  display:inline-block;
-  cursor: pointer;
-  background-color:${p => p.theme.chipsNeutralBackground};
-  color:${p => p.theme.chipsNeutralTextColor};
-  padding:4px 8px;
-  width:auto;
-  box-sizing: border-box;
-  border-radius:30px;
-  &:hover{
-    background-color:${p => p.theme.chipsNeutralHoverBackground};
-  }
-`;
-exports.ChipsLabel = styled_components_1.default.div `
-  font-size:${Theme_1.Theme.fontSize.s}
-`;