@producteca/producteca-ui-kit 1.5.0 → 1.7.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -0
- package/dist/components/inputs/index.d.ts +1 -0
- package/dist/components/patterns/index.d.ts +1 -0
- package/dist/components/patterns/saveBar/saveBar.d.ts +26 -0
- package/dist/locales/description.d.ts +13 -12
- package/dist/locales/es.d.ts +14 -0
- package/dist/producteca-ui-kit.es.js +3876 -3698
- package/dist/producteca-ui-kit.umd.js +134 -59
- package/dist/style.css +1 -1
- package/package.json +7 -8
package/README.md
CHANGED
|
@@ -13,6 +13,9 @@
|
|
|
13
13
|
- 🌟 [Typescript](https://www.typescriptlang.org/)
|
|
14
14
|
- 🐶 [Husky](https://typicode.github.io/husky) & [Lint Staged](https://www.npmjs.com/package/lint-staged) - Pre-commit Hooks
|
|
15
15
|
- 👷 [Github Actions](https://github.com/features/actions)
|
|
16
|
+
- 🚀 [Semantic Release](https://semantic-release.gitbook.io/semantic-release) para automatizar el versionado y publicación de paquetes.
|
|
17
|
+
|
|
18
|
+
|
|
16
19
|
|
|
17
20
|
## Main Scripts
|
|
18
21
|
|
|
@@ -28,6 +31,38 @@
|
|
|
28
31
|
- `pre-commit`: Installs Husky and sets up Git hooks for pre-commit validation.
|
|
29
32
|
- `build-storybook`: Builds the static Storybook project.
|
|
30
33
|
|
|
34
|
+
### ✅ Commit Linting con Husky
|
|
35
|
+
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/).
|
|
36
|
+
|
|
37
|
+
#### ¿Por qué?
|
|
38
|
+
El formato convencional de commits permite:
|
|
39
|
+
|
|
40
|
+
- Generar changelogs automáticamente.
|
|
41
|
+
- Clasificar los cambios en versiones (patch, minor, major).
|
|
42
|
+
- Tener un historial de commits más claro y estructurado.
|
|
43
|
+
|
|
44
|
+
#### 🛠️ Instalación y configuración
|
|
45
|
+
Ya está todo configurado en el proyecto. Si estás trabajando localmente, asegurate de ejecutar lo siguiente luego de clonar e instalar dependencias:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
bun install
|
|
49
|
+
npx husky install
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
Esto se asegura de que los hooks de Git estén correctamente instalados.
|
|
53
|
+
|
|
54
|
+
#### ⚙️ Archivos relevantes
|
|
55
|
+
- `.husky/commit-msg`: hook que ejecuta commitlint antes de hacer un commit.
|
|
56
|
+
- `commitlint.config.js`: define las reglas que deben cumplir los mensajes de commit.
|
|
57
|
+
- `.husky/pre-commit`: (opcional) puede correr linters u otros chequeos automáticos.
|
|
58
|
+
|
|
59
|
+
📝 Ejemplo de mensaje de commit válido
|
|
60
|
+
```sh
|
|
61
|
+
feat: agrega componente de botón primario
|
|
62
|
+
fix(ci): corrige configuración de release en rama test
|
|
63
|
+
chore(deps): actualiza dependencias de desarrollo
|
|
64
|
+
```
|
|
65
|
+
|
|
31
66
|
### Setting up `@producteca/producteca-ui-kit`
|
|
32
67
|
|
|
33
68
|
Follow these steps to integrate and configure the `@producteca/producteca-ui-kit` package in your project:
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
interface SaveButtonProps {
|
|
4
|
+
onSave: () => void;
|
|
5
|
+
label?: string;
|
|
6
|
+
[key: string]: any;
|
|
7
|
+
}
|
|
8
|
+
interface CancelButtonProps {
|
|
9
|
+
onCancel: () => void;
|
|
10
|
+
label?: string;
|
|
11
|
+
[key: string]: any;
|
|
12
|
+
}
|
|
13
|
+
interface PreviousButtonProps {
|
|
14
|
+
onPrevious: () => void;
|
|
15
|
+
label?: string;
|
|
16
|
+
[key: string]: any;
|
|
17
|
+
}
|
|
18
|
+
interface SaveBarProps {
|
|
19
|
+
saveProps: SaveButtonProps;
|
|
20
|
+
cancelProps: CancelButtonProps;
|
|
21
|
+
previousProps?: PreviousButtonProps;
|
|
22
|
+
withoutBorder?: boolean;
|
|
23
|
+
}
|
|
24
|
+
export declare const SaveBar: React.FC<SaveBarProps>;
|
|
25
|
+
export type { SaveBarProps, SaveButtonProps, CancelButtonProps, PreviousButtonProps };
|
|
26
|
+
export default SaveBar;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
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
|
|
2
|
-
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
|
|
3
|
-
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
|
|
4
|
-
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
|
|
5
|
-
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
|
|
6
|
-
export declare const isOptionDisabled = " \n Funcion que recibe un valor de tipo SelectOption y deberia devolver un valor booleano\n
|
|
7
|
-
export declare const selectFieldDescription = "
|
|
8
|
-
export declare const formFieldExample = "
|
|
9
|
-
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
|
|
10
|
-
export declare const checkboxInputExample = "
|
|
11
|
-
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
|
|
12
|
-
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
|
|
1
|
+
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";
|
|
2
|
+
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";
|
|
3
|
+
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";
|
|
4
|
+
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";
|
|
5
|
+
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";
|
|
6
|
+
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";
|
|
7
|
+
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";
|
|
8
|
+
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";
|
|
9
|
+
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";
|
|
10
|
+
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";
|
|
11
|
+
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";
|
|
12
|
+
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";
|
|
13
|
+
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
CHANGED
|
@@ -13,11 +13,15 @@ declare const _default: {
|
|
|
13
13
|
exportedIcon: string;
|
|
14
14
|
syncStockFromChannel: string;
|
|
15
15
|
add: string;
|
|
16
|
+
previous: string;
|
|
16
17
|
continue: string;
|
|
18
|
+
cancel: string;
|
|
19
|
+
save: string;
|
|
17
20
|
hideSelectedOptionsExplainText: string;
|
|
18
21
|
description: {
|
|
19
22
|
onChangeSelectField: string;
|
|
20
23
|
onInputChange: string;
|
|
24
|
+
onChangeSearcher: string;
|
|
21
25
|
onChangeCheckboxInput: string;
|
|
22
26
|
onChangeInput: string;
|
|
23
27
|
isOptionDisabled: string;
|
|
@@ -29,6 +33,16 @@ declare const _default: {
|
|
|
29
33
|
noOptions: string;
|
|
30
34
|
withIcon: string;
|
|
31
35
|
};
|
|
36
|
+
saveBar: {
|
|
37
|
+
example: string;
|
|
38
|
+
saveButton: string;
|
|
39
|
+
cancelButton: string;
|
|
40
|
+
previousButton: string;
|
|
41
|
+
saveButtonProps: string;
|
|
42
|
+
cancelButtonProps: string;
|
|
43
|
+
previousButtonProps: string;
|
|
44
|
+
withoutBorder: string;
|
|
45
|
+
};
|
|
32
46
|
formField: {
|
|
33
47
|
example: string;
|
|
34
48
|
isValid: string;
|