@producteca/producteca-ui-kit 1.20.0 → 1.21.1-beta.0

package/dist/styles/colors.js

@@ -0,0 +1,67 @@
+import _ from 'lodash';
+export var Colors = {
+    grey: {
+        '900': '#252525',
+        '800': '#404040',
+        '733': '#666666',
+        '700': '#797979',
+        '500': '#ACACAC',
+        '400': '#D7D7D7',
+        '200': '#EDEDED',
+        '100': '#F5F5F5',
+        '50': '#FAFAFA'
+    },
+    error: {
+        '900': '#9A1414',
+        '700': '#D90C0C',
+        '500': '#FF5A5A',
+        '300': '#FF8383',
+        '100': '#FFC8C8',
+        '50': '#FCECEB'
+    },
+    success: {
+        '900': '#136A19',
+        '700': '#21962A',
+        '500': '#1FB62A',
+        '300': '#43DC4E',
+        '100': '#85EA8D',
+        '50': '#CEF3D1'
+    },
+    secondary: {
+        '900': '#A86501',
+        '700': '#DC8400',
+        '500': '#FF9900',
+        '300': '#FFC56F',
+        '100': '#FFE1B4',
+        '50': '#FFF3D1'
+    },
+    primary: {
+        '900': '#0045AD',
+        '700': '#0058DB',
+        '500': '#0066FF',
+        '300': '#76ADFF',
+        '100': '#A7CAFF',
+        '50': '#E6F1FF'
+    }
+};
+export var getColor = function getColor(category, shade) {
+    var _a;
+    return ((_a = Colors[category]) === null || _a === void 0 ? void 0 : _a[shade]) || '';
+};
+export var allColors = _.flatMap(Colors, function (shades, category) {
+    return _.compact(_.map(shades, function (color, shade) {
+        return color ? { title: category + ' ' + shade, color: color } : null;
+    }));
+});
+export var ColorOptions = _.map(allColors, 'title');
+export var ColorValues = _.map(allColors, 'color');
+export var Shades = _.map(Colors['grey'], function (color, shade) {
+    return shade;
+});
+export var Categories = _.map(Colors, function (shades, category) {
+    return category;
+});
+export var isValidColor = function isValidColor(color) {
+    return _.includes(ColorValues, color);
+};
+export default Colors;

package/dist/styles/styles/colors.tsx

@@ -0,0 +1,88 @@
+import _ from 'lodash'
+
+export type ColorMap = {
+  [category: string]: {
+    '900'?: string
+    '800'?: string
+    '733'?: string
+    '700'?: string
+    '500'?: string
+    '400'?: string
+    '300'?: string
+    '200'?: string
+    '100'?: string
+    '50'?: string
+  }
+}
+
+export type ColorShade = '900' | '800' | '733' | '700' | '500' | '400' | '300' | '200' | '100' | '50'
+
+export const Colors: ColorMap = {
+  grey: {
+    '900': '#252525',
+    '800': '#404040',
+    '733': '#666666',
+    '700': '#797979',
+    '500': '#ACACAC',
+    '400': '#D7D7D7',
+    '200': '#EDEDED',
+    '100': '#F5F5F5',
+    '50': '#FAFAFA',
+  },
+  error: {
+    '900': '#9A1414',
+    '700': '#D90C0C',
+    '500': '#FF5A5A',
+    '300': '#FF8383',
+    '100': '#FFC8C8',
+    '50': '#FCECEB',
+  },
+  success: {
+    '900': '#136A19',
+    '700': '#21962A',
+    '500': '#1FB62A',
+    '300': '#43DC4E',
+    '100': '#85EA8D',
+    '50': '#CEF3D1',
+  },
+  secondary: {
+    '900': '#A86501',
+    '700': '#DC8400',
+    '500': '#FF9900',
+    '300': '#FFC56F',
+    '100': '#FFE1B4',
+    '50': '#FFF3D1',
+  },
+  primary: {
+    '900': '#0045AD',
+    '700': '#0058DB',
+    '500': '#0066FF',
+    '300': '#76ADFF',
+    '100': '#A7CAFF',
+    '50': '#E6F1FF',
+  },
+}
+
+export type ColorCategory = keyof typeof Colors
+
+export const getColor = (category: ColorCategory, shade: ColorShade): string => {
+  return Colors[category]?.[shade] || ''
+}
+
+export const allColors = _.flatMap(Colors, (shades: ColorShade, category: ColorCategory) =>
+  _.compact(
+    _.map(shades, (color: string, shade: ColorShade) => (color ? { title: `${category} ${shade}`, color } : null)),
+  ),
+)
+
+export const ColorOptions = _.map(allColors, 'title')
+
+export const ColorValues = _.map(allColors, 'color')
+
+export const Shades = _.map(Colors['grey'], (color, shade) => shade)
+
+export const Categories = _.map(Colors, (shades, category) => category)
+
+export const isValidColor = (color: string): boolean => _.includes(ColorValues, color)
+
+export default Colors

package/dist/styles/styles/global.module.scss

@@ -0,0 +1,85 @@
+@import 'variables.module';
+
+
+body {
+  font-family: $poppins-font-family;
+  :global {
+    .producteca-select-field__menu-portal {
+      z-index: 9999;
+      .producteca-select-field__menu-list {
+        max-height: 192px;
+        display: flex;
+        flex-direction: column;
+        &.producteca-select-field__menu-list--is-multi {
+          .producteca-select-field__option {
+            display: flex;
+            align-items: center;
+            label {
+              margin-left: 8px;
+            }
+          }
+        }
+        .producteca-select-field__option {
+          cursor: pointer;
+          height: 40px;
+          min-height: 40px;
+          margin: 0;
+          padding: 0 16px;
+          overflow: visible;
+          white-space: nowrap;
+          font-size: $body-regular;
+          font-weight: 400;
+          color: $text-primary;
+          line-height: 24px;
+          label {
+            font-size: $body-regular;
+            font-weight: 400;
+            color: $text-primary;
+            cursor: pointer;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-bottom: 0;
+            display: block;
+            padding: 9.5px 0;
+            line-height: 21px;
+          }
+        }
+        .producteca-select-field__menu-notice {
+          font-size: $body-regular;
+          color: $text-primary;
+          padding: 0;
+          min-height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .producteca-select-field__option--is-selected {
+          background-color: white;
+        }
+        .producteca-select-field__option--is-focused {
+          background-color: $grey-200;
+        }
+        .producteca-select-field__option--is-disabled {
+          opacity: 0.5;
+          cursor: default;
+        }
+      }
+      .producteca-select-field__menu {
+        margin: 0 0 0 1px;
+        max-height: 230px;
+        overflow-y:  auto;
+        width: calc(100% - 2px);
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        z-index: 9999;
+        input[type="checkbox"] {
+          height: 20px;
+          min-width: 20px;
+          width: 20px;
+          margin: 0;
+        }
+      }
+    }
+  }
+}

package/dist/styles/styles/theme.tsx

@@ -0,0 +1,24 @@
+import { createTheme } from '@mui/material/styles'
+import { getColor } from './colors'
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: getColor('primary', '500'),
+    },
+    secondary: {
+      main: getColor('secondary', '500'),
+    },
+  },
+  components: {
+    MuiSvgIcon: {
+      styleOverrides: {
+        root: {
+          color: getColor('grey', '500'),
+        },
+      },
+    },
+  },
+})
+
+export default theme

package/dist/styles/styles/variables.module.scss

@@ -0,0 +1,74 @@
+$poppins-font-family: 'Poppins', 'Open Sans', Helvetica, Arial, sans-serif !important;
+
+$font-size-base: 12px;
+
+$display-large: 60px;
+$display-medium: 46px;
+$display-small: 36px;
+
+$title-large: 30px;
+$title-medium: 24px;
+$title-small: 20px;
+$title-xsmall: 16px;
+
+$body-large: 16px;
+$body-regular: 14px;
+$body-small: 12px;
+
+$font-size-h1: 41px;
+$font-size-h2: 28px;
+$font-size-h3: 22px;
+$font-size-h4: 18px;
+$font-size-h5: 13px;
+$font-size-h6: 12px;
+
+$grey-900: #252525;
+$grey-800: #404040;
+$grey-733: #666666;
+$grey-700: #797979;
+$grey-500: #ACACAC;
+$grey-400: #D7D7D7;
+$grey-200: #EDEDED;
+$grey-100: #F5F5F5;
+$grey-50: #FAFAFA;
+
+$error-900: #9A1414;
+$error-700: #D90C0C;
+$error-500: #FF6565;
+$error-300: #FF8383;
+$error-100: #FFC8C8;
+$error-50: #FCECEB;
+
+$success-900: #136A19;
+$success-700: #21962A;
+$success-500: #1FB62A;
+$success-300: #43DC4E;
+$success-100: #85EA8D;
+$success-50: #CEF3D1;
+
+$secondary-900: #A86501;
+$secondary-700: #DC8400;
+$secondary-500: #FF9900;
+$secondary-300: #FFC56F;
+$secondary-100: #FFE1B4;
+$secondary-50: #FFF3D1;
+
+$primary-900: #0045AD;
+$primary-700: #0058DB;
+$primary-500: #0066FF;
+$primary-300: #76ADFF;
+$primary-100: #A7CAFF;
+$primary-50: #E6F1FF;
+
+$text-primary: $grey-900;
+$text-secondary: $grey-700;
+$text-link: $primary-500;
+$text-disabled: $grey-500;
+
+$radius-sm: 4px;
+
+$border-disabled: $grey-400;
+$border-default: $grey-400;
+$border-hover: $grey-500;
+$border-dark:$grey-700;
+$border-focus: $grey-900;

package/dist/styles/theme.js

@@ -0,0 +1,22 @@
+import { createTheme } from '@mui/material/styles';
+import { getColor } from './colors';
+var theme = createTheme({
+    palette: {
+        primary: {
+            main: getColor('primary', '500')
+        },
+        secondary: {
+            main: getColor('secondary', '500')
+        }
+    },
+    components: {
+        MuiSvgIcon: {
+            styleOverrides: {
+                root: {
+                    color: getColor('grey', '500')
+                }
+            }
+        }
+    }
+});
+export default theme;

package/dist/validators/errorMessage.js

@@ -0,0 +1,15 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './errorMessage.module.scss';
+import { hasError, hasWarning } from './index';
+import clsx from 'clsx';
+export var ErrorMessage = function ErrorMessage(_ref) {
+    var validationProps = _ref.validationProps;
+    var meta = validationProps.meta;
+
+    var _ref2 = meta || {},
+        error = _ref2.error,
+        warning = _ref2.warning;
+
+    var messageClass = clsx(styles['message'], hasError(validationProps) && styles['error'], hasWarning(validationProps) && styles['warning']);
+    return _jsxs("div", { className: messageClass, children: [hasError(validationProps) && (error === null || error === void 0 ? void 0 : error.locale), hasWarning(validationProps) && (warning === null || warning === void 0 ? void 0 : warning.locale)] });
+};

package/dist/validators/index.js

@@ -0,0 +1,2 @@
+export * from './validation';
+export { ErrorMessage } from './errorMessage';

package/dist/validators/validation.js

@@ -0,0 +1,25 @@
+export var hasError = function hasError(props) {
+    var value = props.value,
+        isValid = props.isValid,
+        required = props.required,
+        _props$meta = props.meta;
+    _props$meta = _props$meta === undefined ? {} : _props$meta;
+    var touched = _props$meta.touched,
+        error = _props$meta.error;
+
+    var hasError = isValid && !isValid(value) || touched && error;
+    return !!(required && !value) || !!hasError;
+};
+export var hasWarning = function hasWarning(props) {
+    var _props$meta2 = props.meta;
+    _props$meta2 = _props$meta2 === undefined ? {} : _props$meta2;
+    var touched = _props$meta2.touched,
+        warning = _props$meta2.warning;
+
+    return !!touched && !!warning;
+};
+export var formValidation = function formValidation(props) {
+    if (hasWarning(props)) return 'warning';
+    if (hasError(props)) return 'error';
+    return null;
+};

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@producteca/producteca-ui-kit",
-  "version": "1.20.0",
-  "main": "./dist/producteca-ui-kit.umd.js",
+  "version": "1.21.1-beta.0",
+  "main": "./dist/producteca-ui-kit.cjs.js",
+  "module": "./dist/producteca-ui-kit.es.js",
+  "unpkg": "./dist/producteca-ui-kit.umd.js",
+  "jsdelivr": "./dist/producteca-ui-kit.umd.js",
   "types": "./dist/index.d.ts",
   "repository": {
     "type": "git",
@@ -19,6 +22,10 @@
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "rm -rf dist && tsc && vite build",
+    "build:babel": "rm -rf dist && tsc -p tsconfig.babel.json && babel temp-ts --out-dir dist --extensions .js,.jsx --ignore '**/*.stories.*','**/*.test.*' && rm -rf temp-ts",
+    "build:babel:full": "rm -rf dist && tsc -p tsconfig.babel.json && babel temp-ts --out-dir dist --extensions .js,.jsx --ignore '**/*.stories.*','**/*.test.*' && tsc --declaration --emitDeclarationOnly --outDir dist && rm -rf temp-ts",
+    "build:legacy": "node scripts/build-legacy.js",
+    "build:es:babel": "node scripts/build-legacy.js",
     "build:storybook": "storybook build",
     "deploy": "make deploy",
     "lint": "node linterteca-lint",
@@ -32,6 +39,19 @@
   "files": [
     "dist"
   ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/producteca-ui-kit.es.js",
+      "require": "./dist/producteca-ui-kit.cjs.js",
+      "default": "./dist/producteca-ui-kit.es.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
   "lint-staged": {
     "*.{js,jsx}": [
       "linterteca-lint"
@@ -59,7 +79,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-select": "^5.8.3",
-    "sass": "^1.77.4",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-css-modules": "^0.0.1",
@@ -68,8 +87,23 @@
   },
   "devDependencies": {
     "@producteca/linterteca": "^1.3.2",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.4",
     "@storybook/addon-a11y": "^9.1.2",
+    "@storybook/addon-docs": "^9.1.2",
     "autoprefixer": "^10.4.19",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-runtime": "^6.26.0",
     "chromatic": "^11.3.0",
     "clsx": "^2.1.1",
     "eslint": "^8.57.0",
@@ -82,10 +116,14 @@
     "prettier": "3.0.1",
     "prop-types": "15.8.1",
     "react-i18next": "^14.1.2",
+    "rollup": "^4.50.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-scss": "^4.0.1",
+    "sass": "^1.92.1",
     "storybook": "^9.1.2",
     "storybook-i18n": "^3.0.1",
     "storybook-react-i18next": "^3.1.1",
-    "@storybook/addon-docs": "^9.1.2"
+    "vite-plugin-babel": "^1.3.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.14.0",

package/dist/components/alert/alert.d.ts

@@ -1,17 +0,0 @@
-import { default as React } from 'react';
-
-interface AlertProps {
-    message: string;
-    variant?: 'success' | 'error' | 'warning' | 'info';
-    className?: string;
-    icon?: React.ReactNode;
-    fullWidth?: boolean;
-    link?: {
-        text: string;
-        href?: string;
-        onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-    };
-}
-export declare const Alert: ({ message, variant, className, icon, fullWidth, link, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element;
-export type { AlertProps };
-export default Alert;

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -1,15 +0,0 @@
-import { default as React } from 'react';
-
-interface BreadcrumbItem {
-    text: string;
-    href?: string;
-    onClick?: () => void;
-    isActive?: boolean;
-}
-interface BreadcrumbProps {
-    items: BreadcrumbItem[];
-    className?: string;
-}
-export declare const Breadcrumb: React.FC<BreadcrumbProps>;
-export type { BreadcrumbProps, BreadcrumbItem };
-export default Breadcrumb;

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

@@ -1,2 +0,0 @@
-export { Breadcrumb, type BreadcrumbProps, type BreadcrumbItem } from './breadcrumb';
-export { Breadcrumb as default } from './breadcrumb';

package/dist/components/button/button.d.ts

@@ -1,17 +0,0 @@
-import { default as React } from 'react';
-
-interface ButtonProps {
-    label: string;
-    outline?: boolean;
-    size?: 'sm' | 'md' | 'lg';
-    type?: 'submit' | 'button' | 'reset';
-    variant?: 'primary' | 'secondary' | 'success' | 'error' | 'link' | 'tooltip-link';
-    disabled?: boolean;
-    className?: string;
-    onClick?: () => void;
-    leftAdornment?: React.ReactNode;
-    rightAdornment?: React.ReactNode;
-}
-export declare const Button: ({ type, variant, size, label, outline, leftAdornment, rightAdornment, className, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export type { ButtonProps };
-export default Button;

package/dist/components/chip/chip.d.ts

@@ -1,13 +0,0 @@
-type ChipVariant = 'primary' | 'success' | 'error' | 'secondary' | 'grey';
-type ChipSize = 'sm' | 'lg';
-export interface ChipProps {
-    text?: string;
-    title?: string;
-    onRemove?: () => void;
-    disabled?: boolean;
-    variant?: ChipVariant;
-    size?: ChipSize;
-    isActive?: boolean;
-}
-export declare const Chip: ({ isActive, title, text, onRemove, disabled, variant, size }: ChipProps) => import("react/jsx-runtime").JSX.Element;
-export default Chip;

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

@@ -1,2 +0,0 @@
-export { Chip } from './chip';
-export type { ChipProps } from './chip';

package/dist/components/icons/customIcon/customIcon.d.ts

@@ -1,16 +0,0 @@
-import { default as React, ReactElement } from 'react';
-import { SvgIcon, SxProps, Theme } from '@mui/material';
-
-export type iconSize = '32' | '24' | '20' | '16' | '12' | '8';
-type BaseSvgIconProps = React.ComponentProps<typeof SvgIcon>;
-interface CustomIconProps extends Omit<BaseSvgIconProps, 'color'> {
-    color?: string;
-    size?: iconSize;
-    sx?: SxProps<Theme>;
-    children: ReactElement;
-    disabled?: boolean;
-    onClick?: () => void;
-    className?: string;
-}
-export declare const CustomIcon: React.FC<CustomIconProps>;
-export default CustomIcon;

package/dist/components/icons/fileIcon/fileIcon.d.ts

@@ -1,5 +0,0 @@
-import { IconInterface } from '../parameters';
-
-export declare const FileIcon: ({ size, color }: IconInterface) => import("react/jsx-runtime").JSX.Element;
-export type { IconInterface };
-export default FileIcon;

package/dist/components/icons/mailIcon/mailIcon.d.ts

@@ -1,5 +0,0 @@
-import { IconInterface } from '../parameters';
-
-export declare const MailIcon: ({ size, color }: IconInterface) => import("react/jsx-runtime").JSX.Element;
-export type { IconInterface };
-export default MailIcon;

package/dist/components/icons/parameters.d.ts

@@ -1,51 +0,0 @@
-export interface IconInterface {
-    size?: number;
-    color?: string;
-}
-export declare const argTypes: {
-    color: {
-        control: {
-            type: string;
-            presetColors: boolean[];
-        };
-        description: string;
-    };
-    size: {
-        control: {
-            type: string;
-        };
-        description: string;
-    };
-};
-export declare const parameters: {
-    layout: string;
-    design: {
-        type: string;
-        url: string;
-    };
-};
-export declare const defaultParameters: {
-    parameters: {
-        layout: string;
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-    argTypes: {
-        color: {
-            control: {
-                type: string;
-                presetColors: boolean[];
-            };
-            description: string;
-        };
-        size: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
-    };
-};
-export default defaultParameters;

package/dist/components/icons/priceCloseIcon/priceCloseIcon.d.ts

@@ -1,5 +0,0 @@
-import { IconInterface } from '../parameters';
-
-export declare const PriceCloseIcon: ({ size, color }: IconInterface) => import("react/jsx-runtime").JSX.Element;
-export type { IconInterface };
-export default PriceCloseIcon;

package/dist/components/icons/priceDownIcon/priceDownIcon.d.ts

@@ -1,5 +0,0 @@
-import { IconInterface } from '../parameters';
-
-export declare const PriceDownIcon: ({ size, color }: IconInterface) => import("react/jsx-runtime").JSX.Element;
-export type { IconInterface };
-export default PriceDownIcon;

package/dist/components/icons/searchPublication/searchPublication.d.ts

@@ -1,5 +0,0 @@
-import { IconInterface } from '../parameters';
-
-export declare const SearchPublication: ({ size, color }: IconInterface) => import("react/jsx-runtime").JSX.Element;
-export type { IconInterface };
-export default SearchPublication;