@producteca/producteca-ui-kit 1.3.15 → 1.4.1-test.1

package/README.md

@@ -1,6 +1,4 @@
-# Producteca UI Kit ⚛️⚡
-
-> 📚 Documentation: [apps.producteca.com/producteca-ui-kit](https://apps.producteca.com/producteca-ui-kit)
+# ⚛️⚡ Node + Vite + React + Typescript
 
 ## Features
 
@@ -48,37 +46,19 @@ Follow these steps to integrate and configure the `@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)
+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";
+  ```
 
 ### Auto Publish
 

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

@@ -7,7 +7,6 @@ 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/selectField/selectField.d.ts

@@ -3,7 +3,6 @@ import { default as React } from 'react';
 export interface SelectOption {
     label: string;
     value: string | number;
-    tooltipMessage?: string;
     [key: string]: any;
 }
 export type SelectOptionType = SelectOption[] | SelectOption | null;

package/dist/locales/description.d.ts

@@ -1,8 +1,8 @@
 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    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 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   ";