@producteca/producteca-ui-kit 1.3.7 → 1.3.9

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

@@ -1,12 +1,12 @@
-import { default as React } from 'react';
-import { SvgIconProps } from '@mui/material';
-import { ColorCategory, ColorShade } from '../../../styles/colors';
+import { default as React, ReactElement } from 'react';
+import { SxProps, Theme } from '@mui/material';
 
 export type iconSize = '24' | '20' | '16' | '12' | '8';
-interface CustomIconProps extends SvgIconProps {
-    category?: ColorCategory;
-    shade?: ColorShade;
+interface CustomIconProps {
+    color?: string;
     size?: iconSize;
+    sx?: SxProps<Theme>;
+    children: ReactElement;
 }
 export declare const CustomIcon: React.FC<CustomIconProps>;
 export default CustomIcon;

package/dist/components/inputs/{toggleInput/toggleInput.d.ts → checkboxInput/checkboxInput.d.ts}

@@ -3,16 +3,16 @@ import { default as React } from 'react';
 export interface ToggleItem {
     id: string;
     label: string;
-    isChecked?: boolean;
-    isDisabled?: boolean;
+    checked?: boolean;
+    disabled?: boolean;
 }
 export interface ToggleInputProps {
     name: string;
     items: ToggleItem[];
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     title?: string;
     type?: 'checkbox' | 'radio';
     size?: 'sm' | 'md' | 'lg';
 }
-export declare const ToggleInput: React.FC<ToggleInputProps>;
-export default ToggleInput;
+export declare const CheckboxInput: React.FC<ToggleInputProps>;
+export default CheckboxInput;

package/dist/components/inputs/checkboxInput/singleCheckboxInput.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+
+interface SingleToggleOptionProps {
+    name: string;
+    checked: boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    label: string;
+    title?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const SingleCheckboxInput: React.FC<SingleToggleOptionProps>;
+export default SingleCheckboxInput;

package/dist/components/inputs/{textInput → formField}/textInput.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import { default as React, ChangeEvent } from 'react';
 import { Meta, inputValue } from '../../../validators';
 
 export interface TextInputProps {
@@ -8,8 +8,8 @@ export interface TextInputProps {
     name: string;
     noErrors?: boolean;
     value?: inputValue;
-    isDisabled?: boolean;
-    isRequired?: boolean;
+    disabled?: boolean;
+    required?: boolean;
     placeholder?: string;
     isClearable?: boolean;
     size?: 'sm' | 'md' | 'lg';
@@ -17,9 +17,6 @@ export interface TextInputProps {
     rightIcon?: React.ReactNode;
     isValid?: (value: inputValue) => boolean;
     type?: 'text' | 'number' | 'password' | undefined;
-    onChange: ({ name, value }: {
-        name: string;
-        value: inputValue;
-    }) => void;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const TextInput: React.FC<TextInputProps>;

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

@@ -1,3 +1,5 @@
 export * from './selectField/selectField';
-export * from './textInput/formField';
-export * from './toggleInput/toggleInput';
+export * from './formField/formField';
+export * from './checkboxInput/checkboxInput';
+export * from './formField/textInput';
+export * from './checkboxInput/singleCheckboxInput';

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

@@ -12,9 +12,9 @@ export interface SelectFieldProps {
     size?: 'md' | 'lg';
     onBlur?: () => void;
     placeholder?: string;
-    isDisabled?: boolean;
+    disabled?: boolean;
     isMultiple?: boolean;
-    isRequired?: boolean;
+    required?: boolean;
     isClearable?: boolean;
     isSearchable?: boolean;
     options: SelectOption[];
@@ -22,8 +22,9 @@ export interface SelectFieldProps {
     hideSelectedOptions?: boolean;
     rightModifier?: React.ReactNode;
     isOptionDisabled?: (option: SelectOption) => boolean;
-    defaultValue?: (string | number)[] | null | undefined;
-    onChange: (name: string, value: SelectOptionType) => void;
+    value?: (string | number)[] | null | undefined;
+    defaultValue?: (string | number) | (string | number)[] | null | undefined;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const SelectField: React.FC<SelectFieldProps>;
 export default SelectField;

package/dist/locales/description.d.ts

@@ -1,3 +1,9 @@
 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 onChangeToggleInput = "\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 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   ";

package/dist/locales/es.d.ts

@@ -11,14 +11,25 @@ declare const _default: {
     password: string;
     selectRequiredText: string;
     exportedIcon: string;
+    syncStockFromChannel: string;
     hideSelectedOptionsExplainText: string;
     description: {
         onChangeSelectField: string;
-        onChangeToggleInput: string;
+        onChangeCheckboxInput: string;
         onChangeInput: string;
+        isOptionDisabled: string;
         selectField: {
+            example: string;
             defaultValue: string;
         };
+        formField: {
+            example: string;
+            isValid: string;
+        };
+        checkboxInput: {
+            example: string;
+            singleCheckboxInputExample: string;
+        };
         icons: {
             size: string;
         };