@producteca/producteca-ui-kit 1.5.0-test.8 → 1.5.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/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/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,12 @@
 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    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 isOptionDisabled = " \n    Funcion que recibe un valor de tipo SelectOption y deberia devolver un valor booleano\n    Por ejemplo: (SelectOption) => SelectOption.value == 2\n    Si la opci\u00F3n tiene definida un tooltipMessage se va a mostrar al hacer hover.\n    \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    \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   ";

package/dist/locales/es.d.ts

@@ -12,15 +12,22 @@ declare const _default: {
     selectRequiredText: string;
     exportedIcon: string;
     syncStockFromChannel: string;
+    add: string;
+    continue: string;
     hideSelectedOptionsExplainText: string;
     description: {
         onChangeSelectField: string;
+        onInputChange: string;
         onChangeCheckboxInput: string;
         onChangeInput: string;
         isOptionDisabled: string;
         selectField: {
             example: string;
             defaultValue: string;
+            disabled: string;
+            disabledOptions: string;
+            noOptions: string;
+            withIcon: string;
         };
         formField: {
             example: string;
@@ -33,6 +40,14 @@ declare const _default: {
         icons: {
             size: string;
         };
+        searcher: {
+            example: string;
+            exampleOption: string;
+            searchPlaceholder: string;
+            searchLabel: string;
+            noResults: string;
+            writeToSearch: string;
+        };
     };
     error: {
         required: string;