@producteca/producteca-ui-kit 1.29.0 → 1.31.0

package/README.md

@@ -6,8 +6,9 @@
 
 - 🔹 [Node 22](https://nodejs.org/)
 - ⚛️ [React 18](https://reactjs.org/)
-- 📚 [Storybook 8](https://storybook.js.org/) - Components preview
+- 📚 [Storybook 9](https://storybook.js.org/) - Components preview
 - ⏩ [Vite](https://vitejs.dev/) - Run and build the project blazingly fast!
+- 🔧 [Babel](https://babeljs.io/) - JavaScript transpilation for maximum browser compatibility
 - ⚡ [Vitest](https://vitest.dev/) - Components Unit Testing
 - 📐 [ESLint](https://eslint.org/) & [Prettier](https://prettier.io/) - Formatting and Linting
 - 🌟 [Typescript](https://www.typescriptlang.org/)
@@ -18,8 +19,8 @@
 ## Main Scripts
 
 - `dev`: Starts Storybook in development mode on port 6006.
-- `build`: Builds the static Storybook project.
-- `build:lib`: Removes the `dist` folder, compiles TypeScript, and builds the library using Vite.
+- `build`: Removes the `dist` folder, compiles TypeScript, builds the library using Vite, and transpiles with Babel for maximum browser compatibility.
+- `build:storybook`: Builds the static Storybook project.
 - `deploy`: Deploys the project using the specified Makefile configuration.
 - `lint`: Runs ESLint to lint and fix issues in files with `.js`, `.jsx`, `.ts`, and `.tsx` extensions.
 - `prettier`: Formats files in the `src` folder with extensions `.ts`, `.tsx`, `.js`, and `.mdx` using Prettier.
@@ -29,6 +30,21 @@
 - `pre-commit`: Installs Husky and sets up Git hooks for pre-commit validation.
 - `build-storybook`: Builds the static Storybook project.
 
+## 🌐 Browser Compatibility
+
+Este proyecto utiliza **Babel** para transpilar el código JavaScript/TypeScript, garantizando compatibilidad con:
+
+- **Navegadores modernos**: Chrome, Firefox, Safari, Edge (últimas 2 versiones)
+- **Navegadores legacy**: Internet Explorer 11+
+- **Dispositivos móviles**: iOS Safari, Chrome Mobile, Samsung Internet
+- **Cobertura global**: >0.25% de usuarios, excluyendo navegadores obsoletos
+
+La configuración de Babel incluye:
+- `@babel/preset-env` para transpilación automática según el target
+- `@babel/preset-react` para sintaxis JSX
+- `@babel/preset-typescript` para TypeScript
+- Plugins adicionales para características modernas de JavaScript
+
 ### Setting up `@producteca/producteca-ui-kit`
 
 Follow these steps to integrate and configure the `@producteca/producteca-ui-kit` package in your project:
@@ -65,22 +81,6 @@ Follow these steps to integrate and configure the `@producteca/producteca-ui-kit
      import { SelectField, CheckboxInput /* other components */ } from '@producteca/producteca-ui-kit'
      ```
 
-4. **Node 12 Compatibility**
-   If you're using Node 12 in your project, you'll need to update your Babel configuration to ensure compatibility. Follow these steps:
-
-   - Update your Babel dependencies to the following versions:
-     ```json
-     {
-       "devDependencies": {
-         "@babel/core": "^7.23.9",
-         "@babel/preset-env": "^7.23.9",
-         "@babel/preset-react": "^7.23.3",
-         "@babel/preset-typescript": "^7.23.3"
-       }
-     }
-     ```
-   - For a complete example of how to implement these changes, refer to this pull request: [Shopify Babel Update Example](https://github.com/Parsimotion/shopify/pull/290)
-
 ## 📦 Publishing a New Version
 
 Package publishing is now handled automatically via a GitHub Action triggered on `push` to the `main` or `master` branches.

package/dist/components/alert/alert.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/breadcrumb/breadcrumb.d.js

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/button/button.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/card/card.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/card/index.d.js

@@ -0,0 +1 @@
+export { Card } from './card';

package/dist/components/chip/chip.d.js

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/dropdown/dropdown.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/dropdown/dropdown.sx.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/dropdown/dropdown.types.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/dropdown/index.d.js

@@ -0,0 +1 @@
+export { Dropdown } from './dropdown';

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

package/dist/components/icons/index.d.js

@@ -0,0 +1,6 @@
+export * from './searchPublication/searchPublication';
+export * from './mailIcon/mailIcon';
+export * from './fileIcon/fileIcon';
+export * from './priceDownIcon/priceDownIcon';
+export * from './priceCloseIcon/priceCloseIcon';
+export * from './customIcon/customIcon';

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

package/dist/components/image/image.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/image/index.d.js

@@ -0,0 +1 @@
+export { Image } from './image';

package/dist/components/index.d.js

@@ -0,0 +1,15 @@
+export * from './button/button';
+export * from './chip';
+export * from './icons';
+export * from './inputs';
+export * from './patterns';
+export * from './loaders';
+export * from './alert/alert';
+export * from './tooltip';
+export * from './image';
+export * from './breadcrumb';
+export * from './menu/menuAction';
+export * from './modals';
+export * from './tabs';
+export * from './card';
+export * from './sidebar';

package/dist/components/index.d.ts

@@ -11,4 +11,5 @@ export * from './breadcrumb';
 export * from './menu/menuAction';
 export * from './modals';
 export * from './tabs';
+export * from './card';
 export * from './sidebar';

package/dist/components/inputs/checkboxInput/checkboxInput.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/checkboxInput/checkboxInputGroup.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/checkboxInput/index.d.js

@@ -0,0 +1,3 @@
+import { CheckboxInput } from './checkboxInput';
+import { CheckboxInputGroup } from './checkboxInputGroup';
+export { CheckboxInput, CheckboxInput as Checkbox, CheckboxInputGroup, CheckboxInputGroup as CheckboxGroup };

package/dist/components/inputs/datePicker/datePicker.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/datePicker/datePickerCustomStyles.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/datePicker/datePickerTypes.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/datePicker/datePickerUtils.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/datePicker/datePickerUtils.d.ts

@@ -36,6 +36,7 @@ export declare const getPickerProps: ({ currentValue, finalFormat, onChange, dis
     minDate: dayjs.Dayjs | undefined;
     maxDate: dayjs.Dayjs | undefined;
     format: string;
+    reduceAnimations: boolean;
     slots: {
         textField: typeof TextField;
     };

package/dist/components/inputs/datePicker/index.d.js

@@ -0,0 +1,2 @@
+export * from './datePicker';
+export * from './datePickerCustomStyles';

package/dist/components/inputs/dateRangePicker/dateFormater.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/dateRangePicker/dateRangePicker.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/dateRangePicker/dateRangePickerTypes.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/dateRangePicker/dateRangePickerUtils.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/dateRangePicker/index.d.js

@@ -0,0 +1,2 @@
+export { DateRangePicker, DateRangePickerInput } from './dateRangePicker';
+export { formatDate } from './dateFormater';

package/dist/components/inputs/formField/formField.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/formField/passwordInput.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/formField/textInput.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/index.d.js

@@ -0,0 +1,8 @@
+export * from './selectField/selectField';
+export * from './formField/formField';
+export * from './formField/textInput';
+export * from './checkboxInput';
+export * from './searcher/searcher';
+export * from './switchInput';
+export * from './datePicker';
+export * from './dateRangePicker';

package/dist/components/inputs/searcher/searcher.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/searcher/searcher.d.ts

@@ -1,21 +1,8 @@
 import { default as React } from 'react';
-import { SelectOption } from '../selectField/selectField';
+import { BaseSelectProps } from '../selectField/selectField.types';
 
-export interface SearcherProps {
-    name: string;
-    label?: string;
-    size?: 'md' | 'lg';
-    placeholder?: string;
-    disabled?: boolean;
-    required?: boolean;
-    isClearable?: boolean;
-    isSearchable?: boolean;
+export interface SearcherProps extends BaseSelectProps {
     clearOnSelect?: boolean;
-    options: SelectOption[];
-    noOptionsMessage?: string | React.ReactNode;
-    rightModifier?: React.ReactNode;
-    isOptionDisabled?: (option: SelectOption) => boolean;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onInputChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     isLoading?: boolean;
     input?: {

package/dist/components/inputs/selectField/selectField.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/selectField/selectField.d.ts

@@ -1,40 +1,12 @@
 import { default as React } from 'react';
 import { OptionProps, SingleValueProps } from 'react-select';
-import { ReduxFormInput } from '../../../hooks/useReduxFormField';
-import { InputValue, Meta } from '../../../validators';
+import { SelectOption, SelectOptionType, BaseSelectProps, SelectFieldProps } from './selectField.types';
 
-export interface SelectOption {
-    label: string;
-    value: string | number;
-    tooltipMessage?: string;
-    [key: string]: any;
-}
-export type SelectOptionType = SelectOption[] | SelectOption | null;
-export interface SelectFieldProps {
-    name: string;
-    label?: string;
-    size?: 'md' | 'lg';
-    onBlur?: () => void;
-    placeholder?: string;
-    disabled?: boolean;
-    isMultiple?: boolean;
-    required?: boolean;
-    isClearable?: boolean;
-    isSearchable?: boolean;
-    options: SelectOption[];
-    noOptionsMessage?: string;
-    hideSelectedOptions?: boolean;
-    rightModifier?: React.ReactNode;
-    isOptionDisabled?: (option: SelectOption) => boolean;
-    value?: (string | number)[] | null | undefined;
-    defaultValue?: (string | number) | (string | number)[] | null | undefined;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    input?: ReduxFormInput;
-    meta?: Meta;
-    isValid?: (value: InputValue) => boolean;
-    noErrors?: boolean;
-}
-export declare const Option: (props: OptionProps<SelectOption>) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseOption: (props: OptionProps<SelectOption>) => import("react/jsx-runtime").JSX.Element;
+export declare const Option: (props: OptionProps<SelectOption> & {
+    formatOption?: (option: SelectOption) => React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseSingleValue: (props: SingleValueProps<SelectOption>) => import("react/jsx-runtime").JSX.Element;
 export declare const SingleValue: (props: SingleValueProps<SelectOption>) => import("react/jsx-runtime").JSX.Element;
 export declare const SearchComponent: () => import("react/jsx-runtime").JSX.Element;
 export declare const ClearComponent: ({ optionSelected, isClearable, handleChange, }: {
@@ -44,3 +16,4 @@ export declare const ClearComponent: ({ optionSelected, isClearable, handleChang
 }) => import("react/jsx-runtime").JSX.Element | null;
 export declare const SelectField: React.FC<SelectFieldProps>;
 export default SelectField;
+export type { BaseSelectProps, SelectOption, SelectOptionType, SelectFieldProps };

package/dist/components/inputs/selectField/selectField.types.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/selectField/selectField.types.d.ts

@@ -0,0 +1,37 @@
+import { ReduxFormInput } from '../../../hooks/useReduxFormField';
+import { InputValue, Meta } from '../../../validators';
+
+export interface SelectOption {
+    label: string;
+    value: string | number;
+    tooltipMessage?: string;
+    [key: string]: any;
+}
+export type SelectOptionType = SelectOption[] | SelectOption | null;
+export interface BaseSelectProps {
+    name: string;
+    label?: string;
+    size?: 'md' | 'lg' | 'fullwidth';
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    options: SelectOption[];
+    noOptionsMessage?: string;
+    rightModifier?: React.ReactNode;
+    isOptionDisabled?: (option: SelectOption) => boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    formatOption?: (option: SelectOption) => React.ReactNode;
+}
+export interface SelectFieldProps extends BaseSelectProps {
+    onBlur?: () => void;
+    isMultiple?: boolean;
+    hideSelectedOptions?: boolean;
+    value?: (string | number)[] | null | undefined;
+    defaultValue?: (string | number) | (string | number)[] | null | undefined;
+    input?: ReduxFormInput;
+    meta?: Meta;
+    isValid?: (value: InputValue) => boolean;
+    noErrors?: boolean;
+}

package/dist/components/inputs/switchInput/index.d.js

@@ -0,0 +1,2 @@
+import { SwitchInput, SwitchInputGroup } from './switchInput';
+export { SwitchInput, SwitchInput as Switch, SwitchInputGroup, SwitchInputGroup as SwitchGroup };

package/dist/components/inputs/switchInput/switchInput.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/loaders/index.d.js

@@ -0,0 +1,2 @@
+export * from './spinner/spinner';
+export * from './progressbar/progressbar';

package/dist/components/loaders/progressbar/progressbar.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/loaders/spinner/spinner.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/menu/menuAction/index.d.js

@@ -0,0 +1,2 @@
+export { MenuAction } from './menuAction';
+export { MenuItemComponent } from '../menuItem/menuItem';

package/dist/components/menu/menuAction/menuAction.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/menu/menuAction/menuAction.sx.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/menu/menuAction/menuAction.types.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/menu/menuItem/menuItem.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/menu/menuItem/menuItem.sx.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/menu/menuItem/menuItem.types.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/modals/index.d.js

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

package/dist/components/modals/warningModal/index.d.js

@@ -0,0 +1 @@
+export { WarningModal } from './warningModal';

package/dist/components/modals/warningModal/warningModal.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/patterns/actionBar/actionBar.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/patterns/copyButton/copyButton.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/patterns/copyButton/index.d.js

@@ -0,0 +1 @@
+export { CopyButton } from './copyButton';

package/dist/components/patterns/emptyState/emptyState.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/patterns/headerSection/headerSection.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/patterns/headerSection/index.d.js

@@ -0,0 +1 @@
+export { HeaderSection } from './headerSection';

package/dist/components/patterns/iconWithIdentifier/iconWithIdentifier.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/patterns/iconWithIdentifier/index.d.js

@@ -0,0 +1 @@
+export { IconWithIdentifier } from './iconWithIdentifier';

package/dist/components/patterns/index.d.js

@@ -0,0 +1,6 @@
+export * from './emptyState/emptyState';
+export * from './actionBar/actionBar';
+export * from './copyButton/copyButton';
+export * from './headerSection';
+export * from './linkWithIcon';
+export * from './iconWithIdentifier';

package/dist/components/patterns/linkWithIcon/index.d.js

@@ -0,0 +1 @@
+export { LinkWithIcon } from './linkWithIcon';

package/dist/components/patterns/linkWithIcon/linkWithIcon.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/sidebar/index.d.js

@@ -0,0 +1 @@
+export { AppSidebar as Sidebar } from './sidebar';

package/dist/components/sidebar/sidebar.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/tabs/index.d.js

@@ -0,0 +1 @@
+export { Tabs } from './tabs';

package/dist/components/tabs/tabs.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/tooltip/index.d.js

@@ -0,0 +1,2 @@
+export { OverflowChecker } from './overflowChecker';
+export { WithTooltip, WithOverflowTooltip } from './tooltip';

package/dist/components/tooltip/overflowChecker.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/tooltip/tooltip.d.js

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useReduxFormField.d.js

@@ -0,0 +1,8 @@
+/**
+ * Hook to unify Redux Form and regular form field handling
+ *
+ * @param params Configuration object containing input, onChange, and transformValue
+ * @returns Object with handleChange and handleBlur functions
+ */
+
+export {};

package/dist/index.d.js

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './styles/colors';
+export * from './hooks/useReduxFormField';

package/dist/locales/description.d.js

@@ -0,0 +1 @@
+export {};

package/dist/locales/es.d.js

@@ -0,0 +1 @@
+export {};

package/dist/locales/es.d.ts

@@ -62,6 +62,8 @@ declare const _default: {
             disabledOptions: string;
             noOptions: string;
             withIcon: string;
+            fullWidth: string;
+            labelFullWidth: string;
         };
         actionBar: {
             example: string;

package/dist/locales/index.d.js

@@ -0,0 +1 @@
+export {};

package/dist/locales/translator.d.js

@@ -0,0 +1,2 @@
+import { default as i18next } from 'i18next';
+export default i18next;