@producteca/producteca-ui-kit 1.5.0-test.9 → 1.6.0

package/README.md

@@ -1,4 +1,6 @@
-# ⚛️⚡ Node + Vite + React + Typescript
+# Producteca UI Kit ⚛️⚡
+
+> 📚 Documentation: [apps.producteca.com/producteca-ui-kit](https://apps.producteca.com/producteca-ui-kit)
 
 ## Features
 
@@ -46,19 +48,37 @@ Follow these steps to integrate and configure the `@producteca/producteca-ui-kit
 
    ```
 
-3. **Remove old SelectField instances**
-
-- Check for any existing version of `selectField`. If found, delete the file:
-
-  ```bash
-  app/components/form/selectField
-
-  ```
-
-- Update any old imports to:
-  ```bash
-  import { SelectField } from "@producteca/producteca-ui-kit";
-  ```
+3. **Remove old component instances**
+   For any component that has been moved to the UI kit (like SelectField, CheckboxInput, etc.), you need to:
+
+   - Remove the old component files from your project. For example:
+
+     ```bash
+     app/components/form/selectField
+     app/components/form/checkboxInput
+     # or any other component that has been moved to the UI kit
+     ```
+
+   - Update your imports to use the components from the UI kit:
+     ```typescript
+     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/279)
 
 ### Auto Publish
 

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

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

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

@@ -7,6 +7,7 @@ interface CustomIconProps {
     size?: iconSize;
     sx?: SxProps<Theme>;
     children: ReactElement;
+    disabled?: boolean;
 }
 export declare const CustomIcon: React.FC<CustomIconProps>;
 export default CustomIcon;

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

@@ -1,5 +1,5 @@
 import { default as React, ChangeEvent } from 'react';
-import { Meta, inputValue } from '../../../validators';
+import { Meta, InputValue } from '../../../validators';
 
 export interface TextInputProps {
     meta?: Meta;
@@ -7,7 +7,7 @@ export interface TextInputProps {
     min?: number;
     name: string;
     noErrors?: boolean;
-    value?: inputValue;
+    value?: InputValue;
     disabled?: boolean;
     required?: boolean;
     placeholder?: string;
@@ -15,7 +15,7 @@ export interface TextInputProps {
     size?: 'sm' | 'md' | 'lg';
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
-    isValid?: (value: inputValue) => boolean;
+    isValid?: (value: InputValue) => boolean;
     type?: 'text' | 'number' | 'password' | undefined;
     onChange: (event: ChangeEvent<HTMLInputElement>) => void;
 }

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

@@ -2,3 +2,4 @@ export * from './selectField/selectField';
 export * from './formField/formField';
 export * from './formField/textInput';
 export * from './checkboxInput';
+export * from './searcher/searcher';

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

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

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

@@ -1,8 +1,10 @@
 import { default as React } from 'react';
+import { OptionProps, SingleValueProps } from 'react-select';
 
 export interface SelectOption {
     label: string;
     value: string | number;
+    tooltipMessage?: string;
     [key: string]: any;
 }
 export type SelectOptionType = SelectOption[] | SelectOption | null;
@@ -26,5 +28,13 @@ export interface SelectFieldProps {
     defaultValue?: (string | number) | (string | number)[] | null | undefined;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
+export declare const Option: (props: OptionProps<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, }: {
+    optionSelected?: SelectOptionType | undefined;
+    isClearable: boolean;
+    handleChange: (selected: SelectOptionType) => void;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export declare const SelectField: React.FC<SelectFieldProps>;
 export default SelectField;

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

@@ -1 +1,2 @@
 export * from './emptyState/emptyState';
+export * from './saveBar/saveBar';

package/dist/components/patterns/saveBar/saveBar.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+
+interface SaveButtonProps {
+    onSave: () => void;
+    label?: string;
+    [key: string]: any;
+}
+interface CancelButtonProps {
+    onCancel: () => void;
+    label?: string;
+    [key: string]: any;
+}
+interface PreviousButtonProps {
+    onPrevious: () => void;
+    label?: string;
+    [key: string]: any;
+}
+interface SaveBarProps {
+    saveProps: SaveButtonProps;
+    cancelProps: CancelButtonProps;
+    previousProps?: PreviousButtonProps;
+    withoutBorder?: boolean;
+}
+export declare const SaveBar: React.FC<SaveBarProps>;
+export type { SaveBarProps, SaveButtonProps, CancelButtonProps, PreviousButtonProps };
+export default SaveBar;

package/dist/favicon.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Circular background -->
+  <circle cx="16" cy="16" r="16" fill="#0066FF"/>
+  
+  <!-- UI Text with better visibility -->
+  <g transform="translate(16, 18)">
+    <text
+      x="0"
+      y="0"
+      text-anchor="middle"
+      dominant-baseline="middle"
+      fill="white"
+      font-family="Arial, sans-serif"
+      font-weight="900"
+      font-size="14"
+      letter-spacing="-0.5"
+    >
+      UI
+    </text>
+  </g>
+</svg> 

package/dist/locales/description.d.ts

@@ -1,9 +1,13 @@
-export declare const onChangeSelectField = "\n    Callback que se dispara cuando cambia el valor del input.\n    \n    #### Par\u00E1metros\n    event: `React.ChangeEvent<HTMLInputElement>`\n      - `event.target.name`: El nombre del input.\n      - `event.target.value`: El valor actual del input, que debe cumplir con la siguiente interfaz:\n    \n    ```typescript\n    interface SelectOption {\n      label: string;\n      value: string | number;\n      [key: string]: any;\n    }\n    ```\n  ";
-export declare const onChangeCheckboxInput = "\n    Callback que se dispara cuando cambia el valor del input.\n    \n    #### Par\u00E1metros\n    event: `React.ChangeEvent<HTMLInputElement>`\n      - `event.target.name`: El nombre del input.\n      - `event.target.value`: Siempre es \"on\"\n  ";
-export declare const onChangeInput = "\n    Callback que se dispara cuando cambia el valor del input.\n    \n    #### Par\u00E1metros\n    event: `React.ChangeEvent<HTMLInputElement>`\n      - `event.target.name`: El nombre del input.\n      - `event.target.value`: El valor actual del input, que debe cumplir con la siguiente interfaz:\n    \n    ```typescript\n        value: string | number; \n    ```\n  ";
-export declare const isOptionDisabled = " \n    Funcion que recibe un valor de tipo SelectOption y deberia devolver un valor booleano\n    Por ejemplo: (SelectOption) => SelectOption.value == 2\n    \n    ```typescript\n    interface SelectOption {\n      label: string;\n      value: string | number;\n      [key: string]: any;\n    }\n    ```\n   ";
-export declare const selectFieldDescription = " \n    Ejemplo de uso:\n    \n    ```typescript\n      <SelectField\n      name=\"productId\"\n      options={[{ label: \"1\", value: 1 }, { label: \"2\", value: 2 }]}\n      onChange={(event) => handleChange(event.target.name, event.target.value)}\n      isMultiple\n      isClearable={false}\n      label={localize('product')}\n      isOptionDisabled={(option) => option.value == 2}\n      rightModifier={shouldShowLoader && <Spinner />}\n    />\n    ```\n  ";
-export declare const formFieldExample = " \n    Ejemplo de uso:\n    \n    ```typescript\n      <FormField\n        label=\"T\u00EDtulo\"\n        name=\"textInput\"\n        onChange={(event) => handleChange(event.target.name, event.target.value)}\n        placeholder=\"Placeholder\"\n        size=\"md\"\n        type=\"text\"\n        isValid={(inputValue) => _.isNumber(inputValue)}\n      />\n    ```\n   ";
-export declare const isValidInput = "\n    Funcion que recibe un valor de tipo inputValue y deberia devolver un valor booleano.\n    \n    #### Por ejemplo: (inputValue) => _.isNumber(inputValue)\n    \n    ```typescript\n         type inputValue = string | number; \n    ```\n  ";
-export declare const checkboxInputExample = " \n    Ejemplo de uso:\n    \n    ```typescript\n      <CheckboxInput\n        items={[\n          {\n            id: '1',\n            label: 'Opci\u00F3n 1'\n          },\n          {\n            id: '2',\n            label: 'Opci\u00F3n 2'\n          },\n          {\n            disabled: true,\n            id: '3',\n            label: 'Opci\u00F3n 3'\n          }\n        ]}\n        name=\"CheckboxList\"\n        onChange={(event) => handleChange(event.target.name, event.target.value)}\n        size=\"lg\"\n        title=\"Selecciona una opci\u00F3n\"\n        type=\"checkbox\"\n      />\n    ```\n   ";
-export declare const singleCheckboxInputExample = " \n    Versi\u00F3n con una sola opci\u00F3n tipo checkbox y un label personalizado:\n    \n    ```typescript\n      const [checked, setChecked] = React.useState(false)\n      <SingleCheckboxInput\n        name=\"SingleToggle\"\n        checked={checked}\n        onChange={setChecked}\n        label={\"Amazon\"}\n        title={locale('syncStockFromChannel')}\n      />\n    ```\n   ";
+export declare const onChangeSelectField = "\n    Callback que se dispara cuando cambia el valor del input.\n    \n    #### Par\u00E1metros\n    event: `React.ChangeEvent<HTMLInputElement>`\n      - `event.target.name`: El nombre del input.\n      - `event.target.value`: El valor actual del input, que debe cumplir con la siguiente interfaz:\n    \n    ```typescript\n    interface SelectOption {\n      label: string;\n      value: string | number;\n      [key: string]: any;\n    }\n    ```\n";
+export declare const onInputChange = "\n    Callback que se ejecuta cuando escribimos algo en el buscador.\n    \n    #### Par\u00E1metros\n    event: `React.ChangeEvent<HTMLInputElement>`\n      - `event.target.name`: El nombre del input.\n      - `event.target.value`: El valor actual del input\n";
+export declare const onChangeSearcher = "\n    Callback que se ejecuta cuando seleccionamos una opcion del buscador.\n    \n    #### Par\u00E1metros\n    event: `React.ChangeEvent<HTMLInputElement>`\n      - `event.target.name`: El nombre del input.\n      - `event.target.value`: El valor actual del input, que debe cumplir con la siguiente interfaz:\n    \n    ``` typescript\n    interface SelectOption {\n      label: string;\n      value: string | number;\n      [key: string]: any;\n    }\n    ```\n";
+export declare const onChangeCheckboxInput = "\n    Callback que se dispara cuando cambia el valor del input.\n    \n    #### Par\u00E1metros\n    event: `React.ChangeEvent<HTMLInputElement>`\n      - `event.target.name`: El nombre del input.\n      - `event.target.value`: Siempre es \"on\"\n";
+export declare const onChangeInput = "\n    Callback que se dispara cuando cambia el valor del input.\n    \n    #### Par\u00E1metros\n    event: `React.ChangeEvent<HTMLInputElement>`\n      - `event.target.name`: El nombre del input.\n      - `event.target.value`: El valor actual del input, que debe cumplir con la siguiente interfaz:\n    \n    ``` typescript\n        value: string | number; \n    ```\n";
+export declare const isOptionDisabled = " \n    Funcion que recibe un valor de tipo SelectOption y deberia devolver un valor booleano\n    Si la opci\u00F3n tiene definida un tooltipMessage se va a mostrar al hacer hover.\n    \n#### Ejemplo\n  ``` typescript\n    const isOptionDisabled = (option: SelectOption) => option.value === 2;\n  ```\n    \n  #### Interfaz\n  ```typescript\n    interface SelectOption {\n      label: string;\n      value: string | number;\n      tooltipMessage?: string;\n      [key: string]: any;\n    }\n  ```\n";
+export declare const selectFieldDescription = "\n  #### Ejemplo de uso   \n  ```typescript\n      <SelectField\n      name=\"productId\"\n      options={[{ label: \"1\", value: 1 }, { label: \"2\", value: 2, tooltipMessage: \"Este valor no es representativo\" }]}\n      onChange={(event) => handleChange(event.target.name, event.target.value)}\n      isMultiple\n      isClearable={false}\n      label={localize('product')}\n      isOptionDisabled={(option) => option.value == 2}\n      rightModifier={shouldShowLoader && <Spinner />}\n    />\n  ```\n";
+export declare const formFieldExample = "\n #### Ejemplo de uso\n \n  ``` typescript\n      <FormField\n        label=\"T\u00EDtulo\"\n        name=\"textInput\"\n        onChange={(event) => handleChange(event.target.name, event.target.value)}\n        placeholder=\"Placeholder\"\n        size=\"md\"\n        type=\"text\"\n        isValid={(inputValue) => _.isNumber(inputValue)}\n      />\n  ```\n";
+export declare const isValidInput = "\n    Funcion que recibe un valor de tipo inputValue y deberia devolver un valor booleano.\n    \n    #### Por ejemplo: (inputValue) => _.isNumber(inputValue)\n    \n    ``` typescript\n         type inputValue = string | number; \n    ```\n";
+export declare const checkboxInputExample = "\n  #### Ejemplo de uso\n  \n  ``` typescript\n      <CheckboxInput\n        items={[\n          {\n            id: '1',\n            label: 'Opci\u00F3n 1'\n          },\n          {\n            id: '2',\n            label: 'Opci\u00F3n 2'\n          },\n          {\n            disabled: true,\n            id: '3',\n            label: 'Opci\u00F3n 3'\n          }\n        ]}\n        name=\"CheckboxList\"\n        onChange={(event) => handleChange(event.target.name, event.target.value)}\n        size=\"lg\"\n        title=\"Selecciona una opci\u00F3n\"\n        type=\"checkbox\"\n      />\n  ```\n";
+export declare const singleCheckboxInputExample = " \n    Versi\u00F3n con una sola opci\u00F3n tipo checkbox y un label personalizado:\n    \n    ```typescript\n      const [checked, setChecked] = React.useState(false)\n      <SingleCheckboxInput\n        name=\"SingleToggle\"\n        checked={checked}\n        onChange={setChecked}\n        label={\"Amazon\"}\n        title={locale('syncStockFromChannel')}\n      />\n    ```\n";
+export declare const searcherExample = " \n    Note la diferencia entre onChange y onInputChange (oficia de onSearch):\n    \n    ```typescript\n      <Searcher\n        label=\"Search label\"\n        name=\"Searcher\"\n        onChange={(event) => onSelectOption(event.target.value)}\n        onInputChange={(event) => handleSearch(event.target.value)}\n        options={[{ label: 'text', value: 1 }]}\n      />\n    ```\n";
+export declare const saveBarExample = "\n  #### Uso b\u00E1sico\n  ```typescript\n    <SaveBar\n      saveProps={{\n        onSave: () => handleSave(),\n        label: 'Save'\n      }}\n      cancelProps={{\n        onCancel: () => handleCancel(),\n        label: 'Cancel'\n      }}\n    />\n  ```\n    #### Con bot\u00F3n de navegaci\u00F3n\n  ```typescript\n    <SaveBar\n      saveProps={{\n        onSave: () => handleSave(),\n        label: 'Save',\n        variant: 'primary'\n      }}\n      cancelProps={{\n        onCancel: () => handleCancel(),\n        label: 'Cancel'\n      }}\n      previousProps={{\n        onPrevious: () => handlePrevious(),\n        label: 'Previous'\n      }}\n    />\n  ```\n    #### Ejemplo completo\n  ```typescript\n    <SaveBar\n      saveProps={{\n        onSave: () => handleSave(),\n        label: 'Guardar cambios',\n        variant: 'success',\n        disabled: false,\n        onClick: () => {},\n      }}\n      cancelProps={{\n        onCancel: () => handleCancel(),\n        label: 'Descartar',\n      }}\n      previousProps={{\n        onPrevious: () => handlePrevious(),\n        label: 'Anterior',\n        variant: 'primary',\n        outline: true,\n        disabled: false,\n        onClick: () => console.log('Previous clicked'),\n      }}\n    />\n  ```\n";

package/dist/locales/es.d.ts

@@ -12,15 +12,36 @@ declare const _default: {
     selectRequiredText: string;
     exportedIcon: string;
     syncStockFromChannel: string;
+    add: string;
+    previous: string;
+    continue: string;
+    cancel: string;
+    save: string;
     hideSelectedOptionsExplainText: string;
     description: {
         onChangeSelectField: string;
+        onInputChange: string;
+        onChangeSearcher: string;
         onChangeCheckboxInput: string;
         onChangeInput: string;
         isOptionDisabled: string;
         selectField: {
             example: string;
             defaultValue: string;
+            disabled: string;
+            disabledOptions: string;
+            noOptions: string;
+            withIcon: string;
+        };
+        saveBar: {
+            example: string;
+            saveButton: string;
+            cancelButton: string;
+            previousButton: string;
+            saveButtonProps: string;
+            cancelButtonProps: string;
+            previousButtonProps: string;
+            withoutBorder: string;
         };
         formField: {
             example: string;
@@ -33,6 +54,14 @@ declare const _default: {
         icons: {
             size: string;
         };
+        searcher: {
+            example: string;
+            exampleOption: string;
+            searchPlaceholder: string;
+            searchLabel: string;
+            noResults: string;
+            writeToSearch: string;
+        };
     };
     error: {
         required: string;