@producteca/producteca-ui-kit 1.7.0-alpha.1 → 1.7.0

package/README.md

@@ -15,8 +15,6 @@
 - 👷 [Github Actions](https://github.com/features/actions)
 - 🚀 [Semantic Release](https://semantic-release.gitbook.io/semantic-release) para automatizar el versionado y publicación de paquetes.
 
-
-
 ## Main Scripts
 
 - `dev`: Starts Storybook in development mode on port 6006.
@@ -32,9 +30,11 @@
 - `build-storybook`: Builds the static Storybook project.
 
 ### ✅ Commit Linting con Husky
+
 Este proyecto utiliza commitlint junto con husky para asegurar que todos los mensajes de commit sigan el [formato convencional](https://www.conventionalcommits.org/en/v1.0.0/).
 
 #### ¿Por qué?
+
 El formato convencional de commits permite:
 
 - Generar changelogs automáticamente.
@@ -42,6 +42,7 @@ El formato convencional de commits permite:
 - Tener un historial de commits más claro y estructurado.
 
 #### 🛠️ Instalación y configuración
+
 Ya está todo configurado en el proyecto. Si estás trabajando localmente, asegurate de ejecutar lo siguiente luego de clonar e instalar dependencias:
 
 ```bash
@@ -52,11 +53,13 @@ npx husky install
 Esto se asegura de que los hooks de Git estén correctamente instalados.
 
 #### ⚙️ Archivos relevantes
+
 - `.husky/commit-msg`: hook que ejecuta commitlint antes de hacer un commit.
 - `commitlint.config.js`: define las reglas que deben cumplir los mensajes de commit.
 - `.husky/pre-commit`: (opcional) puede correr linters u otros chequeos automáticos.
 
 📝 Ejemplo de mensaje de commit válido
+
 ```sh
 feat: agrega componente de botón primario
 fix(ci): corrige configuración de release en rama test

package/dist/components/index.d.ts

@@ -2,4 +2,4 @@ export * from './button/button';
 export * from './icons';
 export * from './inputs';
 export * from './patterns';
-export * from './spinner/spinner';
+export * from './loaders';

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

@@ -1,18 +1,26 @@
 import { default as React } from 'react';
 
 export interface CheckboxItem {
-    id: string;
+    id?: string;
+    name?: string;
     label: string;
+    value?: any;
     checked?: boolean;
     disabled?: boolean;
 }
 export interface CheckboxInputProps {
     name: string;
     items: CheckboxItem[];
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     title?: string;
     type?: 'checkbox' | 'radio';
     size?: 'sm' | 'md' | 'lg';
+    input?: {
+        value: any;
+        onChange: (value: any) => void;
+        onBlur: () => void;
+        name: string;
+    };
 }
 export declare const CheckboxInput: React.FC<CheckboxInputProps>;
 export default CheckboxInput;

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

@@ -2,12 +2,18 @@ import { default as React } from 'react';
 
 export interface SingleCheckboxInputOptionProps {
     name: string;
-    checked: boolean;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    checked?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     label: string;
     title?: string;
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    input?: {
+        value: any;
+        onChange: (value: any) => void;
+        onBlur: () => void;
+        name: string;
+    };
 }
 export declare const SingleCheckboxInput: React.FC<SingleCheckboxInputOptionProps>;
 export default SingleCheckboxInput;

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

@@ -17,6 +17,12 @@ export interface TextInputProps {
     rightIcon?: React.ReactNode;
     isValid?: (value: InputValue) => boolean;
     type?: 'text' | 'number' | 'password' | undefined;
-    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    input?: {
+        value: any;
+        onChange: (value: any) => void;
+        onBlur: () => void;
+        name: string;
+    };
 }
 export declare const TextInput: React.FC<TextInputProps>;

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

@@ -11,11 +11,17 @@ export interface SearcherProps {
     isClearable?: boolean;
     isSearchable?: boolean;
     options: SelectOption[];
-    noOptionsMessage?: string;
+    noOptionsMessage?: string | React.ReactNode;
     rightModifier?: React.ReactNode;
     isOptionDisabled?: (option: SelectOption) => boolean;
-    defaultValue?: SelectOption;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onInputChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    isLoading?: boolean;
+    input?: {
+        value: any;
+        onChange: (value: any) => void;
+        onBlur: () => void;
+        name: string;
+    };
 }
 export declare const Searcher: React.FC<SearcherProps>;

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

@@ -26,7 +26,13 @@ export interface SelectFieldProps {
     isOptionDisabled?: (option: SelectOption) => boolean;
     value?: (string | number)[] | null | undefined;
     defaultValue?: (string | number) | (string | number)[] | null | undefined;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    input?: {
+        value: any;
+        onChange: (value: any) => void;
+        onBlur: () => void;
+        name: string;
+    };
 }
 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;

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

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

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

@@ -0,0 +1,8 @@
+interface ProgressbarProps {
+    size?: 'sm' | 'lg';
+    progress?: number;
+    variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query';
+}
+export declare const Progressbar: ({ size, progress: initialProgress, variant, }: ProgressbarProps) => import("react/jsx-runtime").JSX.Element;
+export type { ProgressbarProps };
+export default Progressbar;

package/dist/components/{spinner → loaders/spinner}/spinner.d.ts

@@ -1,5 +1,5 @@
 interface SpinnerProps {
-    size?: number;
+    size?: 'sm' | 'lg';
 }
 export declare const Spinner: ({ size }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export type { SpinnerProps };

package/dist/locales/description.d.ts

@@ -11,3 +11,4 @@ export declare const checkboxInputExample = "\n  #### Ejemplo de uso\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";
+export declare const singleCheckboxInputReduxFormExample = "\n  #### Ejemplo de uso con Redux Form - SingleCheckboxInput\n  \n  ```typescript\n    <Field\n      name=\"salesSync\"\n      component={SingleCheckboxInput}\n      classComponent={'decrease-stock'}\n      props={{\n        name: 'cancelSales',\n        value: this.salesSync().cancelSales,\n        checked: this.salesSync().cancelSales,\n        label: this.context.localize('settings.cancelSales')\n      }}\n    />\n  ```\n";

package/dist/locales/es.d.ts

@@ -19,6 +19,7 @@ declare const _default: {
     save: string;
     hideSelectedOptionsExplainText: string;
     description: {
+        singleCheckboxInputReduxFormExample: string;
         onChangeSelectField: string;
         onInputChange: string;
         onChangeSearcher: string;