@soyfri/shared-library 1.4.9 → 1.5.0-beta.3

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.
Files changed (10) hide show
  1. package/README.md +243 -0
  2. package/components/Autocomplete/Autocomplete.cjs +109 -0
  3. package/components/Autocomplete/Autocomplete.cjs.map +1 -0
  4. package/components/Autocomplete/Autocomplete.d.ts +28 -0
  5. package/components/Autocomplete/Autocomplete.definitions.d.ts +9 -0
  6. package/components/Autocomplete/Autocomplete.js +109 -0
  7. package/components/Autocomplete/Autocomplete.js.map +1 -0
  8. package/components/Autocomplete/index.d.ts +1 -0
  9. package/components/Autocomplete.d.ts +2 -0
  10. package/package.json +6 -1
package/README.md ADDED
@@ -0,0 +1,243 @@
1
+ # @soyfri/shared-library
2
+
3
+ Una librería de componentes React reutilizables construida con Material-UI, TypeScript y Tailwind CSS, diseñada para proporcionar componentes UI consistentes y bien documentados.
4
+
5
+ ## 📋 Tabla de Contenidos
6
+
7
+ - [Características](#características)
8
+ - [Instalación](#instalación)
9
+ - [Uso](#uso)
10
+ - [Componentes Disponibles](#componentes-disponibles)
11
+ - [Desarrollo](#desarrollo)
12
+ - [Scripts Disponibles](#scripts-disponibles)
13
+ - [Storybook](#storybook)
14
+ - [Testing](#testing)
15
+ - [Tecnologías](#tecnologías)
16
+ - [Estructura del Proyecto](#estructura-del-proyecto)
17
+
18
+ ## ✨ Características
19
+
20
+ - 🎨 **Componentes tipados**: Todos los componentes están construidos con TypeScript para mayor seguridad de tipos
21
+ - 📚 **Documentación con Storybook**: Cada componente incluye historias interactivas y documentación
22
+ - 🎯 **Material-UI**: Basado en Material-UI para un diseño consistente y accesible
23
+ - 🌈 **Tailwind CSS**: Integración con Tailwind para estilos utilitarios
24
+ - 🧪 **Testing**: Configurado con Vitest y Playwright para testing de componentes
25
+ - 📦 **Build optimizado**: Configuración con Rollup para generar builds ESM y CommonJS
26
+
27
+ ## 📦 Instalación
28
+
29
+ ```bash
30
+ npm install @soyfri/shared-library
31
+ ```
32
+
33
+ ## 🚀 Uso
34
+
35
+ ```tsx
36
+ import { Button, Table, Select } from '@soyfri/shared-library';
37
+ import '@soyfri/shared-library/dist/styles.css';
38
+
39
+ function App() {
40
+ return (
41
+ <div>
42
+ <Button variant="contained" color="primary">
43
+ Mi Botón
44
+ </Button>
45
+ </div>
46
+ );
47
+ }
48
+ ```
49
+
50
+ ## 🧩 Componentes Disponibles
51
+
52
+ ### Button
53
+ Componente de botón personalizable basado en Material-UI con soporte para iconos, diferentes tamaños y estados.
54
+
55
+ **Características:**
56
+ - Variantes: `text`, `outlined`, `contained`
57
+ - Tamaños: `small`, `medium`, `large`
58
+ - Soporte para iconos de inicio y fin
59
+ - Estados de carga
60
+ - Completamente tipado
61
+
62
+ ### Table
63
+ Componente de tabla flexible con paginación interna y externa, ordenamiento y renderizado personalizado de columnas.
64
+
65
+ **Características:**
66
+ - Paginación interna automática
67
+ - Paginación externa controlada
68
+ - Columnas personalizables con renderizado custom
69
+ - Soporte para componentes complejos en celdas
70
+ - Completamente tipado con generics
71
+
72
+ ### Select
73
+ Componente select avanzado con soporte para selección múltiple, filtros, agrupación y renderizado personalizado.
74
+
75
+ **Características:**
76
+ - Selección simple y múltiple
77
+ - Filtrado de opciones
78
+ - Agrupación de opciones
79
+ - Renderizado personalizado con avatars
80
+ - Placeholder configurable
81
+
82
+ ### Avatar
83
+ Componente para mostrar avatares de usuarios con soporte para imágenes y texto.
84
+
85
+ ### Icon
86
+ Wrapper para iconos de Material-UI con propiedades consistentes.
87
+
88
+ ### Stat
89
+ Componente para mostrar estadísticas con diferentes plantillas de visualización.
90
+
91
+ **Características:**
92
+ - Plantilla simple
93
+ - Plantilla con chip
94
+ - Plantilla con lista de chips
95
+ - Colores personalizables
96
+
97
+ ### Column
98
+ Componente auxiliar para definir columnas en el componente Table.
99
+
100
+ ## 🛠️ Desarrollo
101
+
102
+ ### Prerrequisitos
103
+
104
+ - Node.js (versión 18 o superior)
105
+ - npm o yarn
106
+
107
+ ### Configuración del entorno de desarrollo
108
+
109
+ 1. Clona el repositorio:
110
+ ```bash
111
+ git clone <repository-url>
112
+ cd shared-library
113
+ ```
114
+
115
+ 2. Instala las dependencias:
116
+ ```bash
117
+ npm install
118
+ ```
119
+
120
+ 3. Inicia el entorno de desarrollo:
121
+ ```bash
122
+ npm run dev
123
+ ```
124
+
125
+ ## 📜 Scripts Disponibles
126
+
127
+ - `npm run build` - Construye la librería para producción
128
+ - `npm run dev` - Inicia el modo de desarrollo con watch
129
+ - `npm run build:css` - Construye los estilos CSS
130
+ - `npm run watch:css` - Observa cambios en los estilos CSS
131
+ - `npm run clean` - Limpia la carpeta dist
132
+ - `npm run prepare` - Limpia y construye la librería
133
+ - `npm run storybook` - Inicia Storybook en modo desarrollo
134
+ - `npm run build-storybook` - Construye Storybook para producción
135
+ - `npm run dist` - Ejecuta el script de distribución personalizado
136
+
137
+ ## 📚 Storybook
138
+
139
+ La librería incluye Storybook para documentación interactiva y desarrollo de componentes.
140
+
141
+ ### Iniciar Storybook
142
+
143
+ ```bash
144
+ npm run storybook
145
+ ```
146
+
147
+ Esto abrirá Storybook en `http://localhost:6006` donde podrás:
148
+
149
+ - Ver todos los componentes disponibles
150
+ - Interactuar con las propiedades de cada componente
151
+ - Ver ejemplos de uso
152
+ - Acceder a la documentación detallada
153
+
154
+ ### Construir Storybook
155
+
156
+ ```bash
157
+ npm run build-storybook
158
+ ```
159
+
160
+ ## 🧪 Testing
161
+
162
+ La librería está configurada con Vitest y Playwright para testing de componentes.
163
+
164
+ ### Configuración de Testing
165
+
166
+ - **Vitest**: Para unit tests y testing de componentes
167
+ - **Playwright**: Para testing de browser
168
+ - **Storybook Test Addon**: Para testing de historias de Storybook
169
+
170
+ ## 🔧 Tecnologías
171
+
172
+ ### Dependencias Principales
173
+
174
+ - **React 19.1.0**: Librería de UI
175
+ - **Material-UI 7.1.0**: Sistema de diseño y componentes
176
+ - **TypeScript 5.8.3**: Tipado estático
177
+ - **Tailwind CSS 4.1.7**: Framework de CSS utilitario
178
+
179
+ ### Herramientas de Desarrollo
180
+
181
+ - **Storybook 9.0.8**: Documentación y desarrollo de componentes
182
+ - **Rollup**: Bundler para la construcción de la librería
183
+ - **Vitest**: Framework de testing
184
+ - **Playwright**: Testing de browser
185
+ - **Prettier**: Formateo de código
186
+
187
+ ## 📁 Estructura del Proyecto
188
+
189
+ ```
190
+ shared-library/
191
+ ├── .storybook/ # Configuración de Storybook
192
+ ├── src/
193
+ │ ├── components/ # Componentes de la librería
194
+ │ │ ├── Avatar/
195
+ │ │ ├── Button/
196
+ │ │ ├── Column/
197
+ │ │ ├── Icon/
198
+ │ │ ├── Select/
199
+ │ │ ├── Stat/
200
+ │ │ └── Table/
201
+ │ ├── index.ts # Punto de entrada principal
202
+ │ └── styles.css # Estilos globales
203
+ ├── dist/ # Archivos construidos
204
+ ├── package.json
205
+ ├── tsconfig.json
206
+ ├── tailwind.config.js
207
+ ├── rollup.config.cjs
208
+ └── vitest.config.ts
209
+ ```
210
+
211
+ ### Estructura de Componentes
212
+
213
+ Cada componente sigue una estructura consistente:
214
+
215
+ ```
216
+ ComponentName/
217
+ ├── ComponentName.tsx # Implementación del componente
218
+ ├── ComponentName.stories.tsx # Historias de Storybook
219
+ ├── ComponentName.definition.ts # Definiciones de código (opcional)
220
+ ├── index.ts # Exportaciones
221
+ └── types.ts # Tipos específicos (opcional)
222
+ ```
223
+
224
+ ## 🤝 Contribución
225
+
226
+ Para contribuir al proyecto:
227
+
228
+ 1. Fork el repositorio
229
+ 2. Crea una rama para tu feature (`git checkout -b feature/nueva-funcionalidad`)
230
+ 3. Commit tus cambios (`git commit -am 'Agrega nueva funcionalidad'`)
231
+ 4. Push a la rama (`git push origin feature/nueva-funcionalidad`)
232
+ 5. Crea un Pull Request
233
+
234
+ ## 📄 Licencia
235
+
236
+ ISC License
237
+
238
+ ---
239
+
240
+ **Versión actual:** 1.0.1
241
+
242
+ Para más información y ejemplos detallados, consulta la documentación en Storybook ejecutando `npm run storybook`.
243
+
package/components/Autocomplete/Autocomplete.cjs ADDED
@@ -0,0 +1,109 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
4
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
5
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
8
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
9
+ var __spreadValues = (a, b) => {
10
+ for (var prop in b || (b = {}))
11
+ if (__hasOwnProp.call(b, prop))
12
+ __defNormalProp(a, prop, b[prop]);
13
+ if (__getOwnPropSymbols)
14
+ for (var prop of __getOwnPropSymbols(b)) {
15
+ if (__propIsEnum.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ }
18
+ return a;
19
+ };
20
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
21
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
22
+ const jsxRuntime = require("react/jsx-runtime");
23
+ const React = require("react");
24
+ const material = require("@mui/material");
25
+ const ClearIcon = require("@mui/icons-material/Clear");
26
+ function AutocompleteSelect(props) {
27
+ const {
28
+ label,
29
+ options = [],
30
+ value,
31
+ onChange,
32
+ placeholder,
33
+ multiple = false,
34
+ disabled = false,
35
+ loading = false,
36
+ error = false,
37
+ helperText,
38
+ renderOptionItem,
39
+ renderChipLabel,
40
+ maxChipsToShow = 3
41
+ } = props;
42
+ const renderTags = (value2, getTagProps) => {
43
+ const displayed = value2.slice(0, maxChipsToShow);
44
+ const hidden = value2.length - maxChipsToShow;
45
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
46
+ displayed.map((option, index) => /* @__PURE__ */ React.createElement(
47
+ material.Chip,
48
+ __spreadProps(__spreadValues({}, getTagProps({ index })), {
49
+ key: option.value,
50
+ label: renderChipLabel ? renderChipLabel(option) : option.label,
51
+ avatar: option.img ? /* @__PURE__ */ jsxRuntime.jsx(material.Avatar, { src: option.img }) : void 0,
52
+ deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, {})
53
+ })
54
+ )),
55
+ hidden > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: `+${hidden} más` })
56
+ ] });
57
+ };
58
+ const renderOption = (propsLi, option) => /* @__PURE__ */ React.createElement("li", __spreadProps(__spreadValues({}, propsLi), { key: option.value }), renderOptionItem ? renderOptionItem(option) : option.label);
59
+ const renderAutocomplete = (value2, onChange2) => {
60
+ var _a, _b;
61
+ return /* @__PURE__ */ jsxRuntime.jsx(
62
+ material.Autocomplete,
63
+ {
64
+ multiple,
65
+ options,
66
+ value: multiple ? (_a = options.filter(
67
+ (o) => value2 == null ? void 0 : value2.includes(o.value)
68
+ )) != null ? _a : [] : (_b = options.find((o) => o.value === value2)) != null ? _b : null,
69
+ disabled,
70
+ loading,
71
+ getOptionLabel: (opt) => {
72
+ var _a2;
73
+ return (_a2 = opt == null ? void 0 : opt.label) != null ? _a2 : "";
74
+ },
75
+ isOptionEqualToValue: (a, b) => a.value === b.value,
76
+ onChange: onChange2,
77
+ renderOption,
78
+ renderTags: multiple ? renderTags : void 0,
79
+ noOptionsText: "No hay opciones",
80
+ loadingText: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
81
+ /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 20 }),
82
+ /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: "Cargando..." })
83
+ ] }),
84
+ renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
85
+ material.TextField,
86
+ __spreadProps(__spreadValues({}, params), {
87
+ label,
88
+ placeholder,
89
+ error,
90
+ helperText
91
+ })
92
+ )
93
+ }
94
+ );
95
+ };
96
+ const handleChangeInternal = (event, newValue) => {
97
+ var _a;
98
+ if (multiple) {
99
+ const values = (newValue != null ? newValue : []).map((opt) => opt.value);
100
+ onChange == null ? void 0 : onChange(values);
101
+ } else {
102
+ const value2 = (_a = newValue == null ? void 0 : newValue.value) != null ? _a : "";
103
+ onChange == null ? void 0 : onChange(value2);
104
+ }
105
+ };
106
+ return renderAutocomplete(value, handleChangeInternal);
107
+ }
108
+ exports.Autocomplete = AutocompleteSelect;
109
+ //# sourceMappingURL=Autocomplete.cjs.map
package/components/Autocomplete/Autocomplete.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Autocomplete.cjs","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Autocomplete,\n TextField,\n Chip,\n Avatar,\n Box,\n Typography,\n CircularProgress,\n} from \"@mui/material\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n img?: string;\n disabled?: boolean;\n group?: string;\n [key: string]: any;\n}\n\ntype RenderOptionItem = (item: SelectOption) => React.ReactNode;\ntype RenderChipLabel = (item: SelectOption) => React.ReactNode;\n\ninterface AutocompleteProps<\n TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n> {\n label?: string;\n value: TValue | TValue[];\n onChange: (val: TValue | TValue[]) => void;\n options?: SelectOption[];\n placeholder?: string;\n multiple?: boolean;\n disabled?: boolean;\n loading?: boolean;\n error?: boolean;\n helperText?: string;\n maxChipsToShow?: number;\n renderOptionItem?: RenderOptionItem;\n renderChipLabel?: RenderChipLabel;\n}\n\nexport function AutocompleteSelect<\n TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n>(props: AutocompleteProps<TValue>) {\n const {\n label,\n options = [],\n value,\n onChange,\n placeholder,\n multiple = false,\n disabled = false,\n loading = false,\n error = false,\n helperText,\n renderOptionItem,\n renderChipLabel,\n maxChipsToShow = 3,\n } = props;\n\n const renderTags = (value: SelectOption[], getTagProps: any) => {\n const displayed = value.slice(0, maxChipsToShow);\n const hidden = value.length - maxChipsToShow;\n\n return (\n <>\n {displayed.map((option, index) => (\n <Chip\n {...getTagProps({ index })}\n key={option.value}\n label={renderChipLabel ? renderChipLabel(option) : option.label}\n avatar={option.img ? <Avatar src={option.img} /> : undefined}\n deleteIcon={<ClearIcon />}\n />\n ))}\n\n {hidden > 0 && <Chip label={`+${hidden} más`} />}\n </>\n );\n };\n\n const renderOption = (propsLi: any, option: SelectOption) => (\n <li {...propsLi} key={option.value}>\n {renderOptionItem ? renderOptionItem(option) : option.label}\n </li>\n );\n\n const renderAutocomplete = (value: any, onChange: any) => (\n <Autocomplete\n multiple={multiple}\n options={options}\n value={\n multiple\n ? (options.filter((o) =>\n (value as string[] | undefined)?.includes(o.value as string),\n ) ?? [])\n : (options.find((o) => o.value === value) ?? null)\n }\n disabled={disabled}\n loading={loading}\n getOptionLabel={(opt) => opt?.label ?? \"\"}\n isOptionEqualToValue={(a, b) => a.value === b.value}\n onChange={onChange}\n renderOption={renderOption}\n renderTags={multiple ? renderTags : undefined}\n noOptionsText=\"No hay opciones\"\n loadingText={\n <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1 }}>\n <CircularProgress size={20} />\n <Typography>Cargando...</Typography>\n </Box>\n }\n renderInput={(params) => (\n <TextField\n {...params}\n label={label}\n placeholder={placeholder}\n error={error}\n helperText={helperText}\n />\n )}\n />\n );\n\n const handleChangeInternal = (event: any, newValue: any) => {\n if (multiple) {\n const values = (newValue ?? []).map((opt: any) => opt.value);\n (onChange as (val: TValue[]) => void)?.(values);\n } else {\n const value = newValue?.value ?? \"\";\n (onChange as (val: TValue) => void)?.(value);\n }\n };\n\n return renderAutocomplete(value, handleChangeInternal);\n}\n\nexport default AutocompleteSelect;\n"],"names":["value","jsxs","Fragment","createElement","Chip","jsx","Avatar","onChange","Autocomplete","_a","Box","CircularProgress","Typography","TextField"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0CO,SAAS,mBAEd,OAAkC;AAClC,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,CAAA;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,EAAA,IACf;AAEJ,QAAM,aAAa,CAACA,QAAuB,gBAAqB;AAC9D,UAAM,YAAYA,OAAM,MAAM,GAAG,cAAc;AAC/C,UAAM,SAASA,OAAM,SAAS;AAE9B,WACEC,2BAAAA,KAAAC,qBAAA,EACG,UAAA;AAAA,MAAA,UAAU,IAAI,CAAC,QAAQ,UACtBC,sBAAAA;AAAAA,QAACC,SAAAA;AAAAA,QAAA,iCACK,YAAY,EAAE,OAAO,IAD1B;AAAA,UAEC,KAAK,OAAO;AAAA,UACZ,OAAO,kBAAkB,gBAAgB,MAAM,IAAI,OAAO;AAAA,UAC1D,QAAQ,OAAO,MAAMC,+BAACC,SAAAA,UAAO,KAAK,OAAO,KAAK,IAAK;AAAA,UACnD,2CAAa,WAAA,CAAA,CAAU;AAAA,QAAA;AAAA,MAAA,CAE1B;AAAA,MAEA,SAAS,KAAKD,2BAAAA,IAACD,iBAAK,OAAO,IAAI,MAAM,OAAA,CAAQ;AAAA,IAAA,GAChD;AAAA,EAEJ;AAEA,QAAM,eAAe,CAAC,SAAc,WAClCD,sBAAAA,cAAC,uCAAO,YAAS,KAAK,OAAO,UAC1B,mBAAmB,iBAAiB,MAAM,IAAI,OAAO,KACxD;AAGF,QAAM,qBAAqB,CAACH,QAAYO;;AACtCF,sCAAAA;AAAAA,MAACG,SAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OACE,YACK,aAAQ;AAAA,UAAO,CAAC,MACdR,iCAAgC,SAAS,EAAE;AAAA,QAAe,MAD5D,YAEI,CAAA,KACJ,aAAQ,KAAK,CAAC,MAAM,EAAE,UAAUA,MAAK,MAArC,YAA0C;AAAA,QAEjD;AAAA,QACA;AAAA,QACA,gBAAgB,CAAC;;AAAQ,kBAAAS,MAAA,2BAAK,UAAL,OAAAA,MAAc;AAAA;AAAA,QACvC,sBAAsB,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE;AAAA,QAC9C,UAAUF;AAAAA,QACV;AAAA,QACA,YAAY,WAAW,aAAa;AAAA,QACpC,eAAc;AAAA,QACd,aACEN,2BAAAA,KAACS,SAAAA,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAA,GACrD,UAAA;AAAA,UAAAL,2BAAAA,IAACM,SAAAA,kBAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,UAC5BN,2BAAAA,IAACO,SAAAA,cAAW,UAAA,cAAA,CAAW;AAAA,QAAA,GACzB;AAAA,QAEF,aAAa,CAAC,WACZP,2BAAAA;AAAAA,UAACQ,SAAAA;AAAAA,UAAA,iCACK,SADL;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA;AAKN,QAAM,uBAAuB,CAAC,OAAY,aAAkB;;AAC1D,QAAI,UAAU;AACZ,YAAM,UAAU,8BAAY,CAAA,GAAI,IAAI,CAAC,QAAa,IAAI,KAAK;AAC1D,2CAAuC;AAAA,IAC1C,OAAO;AACL,YAAMb,UAAQ,0CAAU,UAAV,YAAmB;AAChC,2CAAqCA;AAAAA,IACxC;AAAA,EACF;AAEA,SAAO,mBAAmB,OAAO,oBAAoB;AACvD;;"}
package/components/Autocomplete/Autocomplete.d.ts ADDED
@@ -0,0 +1,28 @@
1
+ import { default as React } from 'react';
2
+ export interface SelectOption {
3
+ value: string | number;
4
+ label: string;
5
+ img?: string;
6
+ disabled?: boolean;
7
+ group?: string;
8
+ [key: string]: any;
9
+ }
10
+ type RenderOptionItem = (item: SelectOption) => React.ReactNode;
11
+ type RenderChipLabel = (item: SelectOption) => React.ReactNode;
12
+ interface AutocompleteProps<TValue extends SelectOption["value"] = SelectOption["value"]> {
13
+ label?: string;
14
+ value: TValue | TValue[];
15
+ onChange: (val: TValue | TValue[]) => void;
16
+ options?: SelectOption[];
17
+ placeholder?: string;
18
+ multiple?: boolean;
19
+ disabled?: boolean;
20
+ loading?: boolean;
21
+ error?: boolean;
22
+ helperText?: string;
23
+ maxChipsToShow?: number;
24
+ renderOptionItem?: RenderOptionItem;
25
+ renderChipLabel?: RenderChipLabel;
26
+ }
27
+ export declare function AutocompleteSelect<TValue extends SelectOption["value"] = SelectOption["value"]>(props: AutocompleteProps<TValue>): import("react/jsx-runtime").JSX.Element;
28
+ export default AutocompleteSelect;
package/components/Autocomplete/Autocomplete.definitions.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ export declare const SimpleAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Box, Typography } from '@mui/material';\n\nconst options = [\n { value: '10', label: '10' },\n { value: '25', label: '25' },\n];\n\nexport const SimpleExample = () => {\n const [value, setValue] = useState(options[1]);\n\n return (\n <Box sx={{ width: 250 }}>\n <Autocomplete\n label=\"Registros por p\u00E1gina\"\n options={options}\n value={value}\n onChange={(val) => {\n setValue(val as string);\n }}\n />\n <Typography sx={{ mt: 2 }}>\n Valor: {value}\n </Typography>\n </Box>\n );\n};\n";
2
+ export declare const WithPlaceholderAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Box, Typography } from '@mui/material';\n\nexport const WithPlaceholderExample = () => {\n const [value, setValue] = useState(null);\n\n return (\n <Box sx={{ width: 300 }}>\n <Autocomplete\n label=\"Seleccione una opci\u00F3n\"\n options={[]}\n value={value}\n onChange={(val) => {\n setValue(val as string);\n }}\n placeholder=\"Ninguna opci\u00F3n seleccionada\"\n />\n <Typography sx={{ mt: 2 }}>\n {value || 'Ninguno'}\n </Typography>\n </Box>\n );\n};\n";
3
+ export declare const MultipleAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Box } from '@mui/material';\n\nconst options = [\n { value: 'pending', label: 'Pendiente' },\n { value: 'approved', label: 'Aprobado' },\n];\n\nexport const MultipleExample = () => {\n const [value, setValue] = useState([]);\n\n return (\n <Box sx={{ width: 400 }}>\n <Autocomplete\n multiple\n options={options}\n value={value}\n onChange={(val) => {\n setValue(val as string[]);\n }}\n />\n </Box>\n );\n};\n";
4
+ export declare const MultipleWithLimitAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\n\nexport const MultipleWithLimitExample = () => {\n const [value, setValue] = useState([]);\n\n return (\n <Autocomplete\n multiple\n maxChipsToShow={2}\n options={[]}\n value={value}\n onChange={(val) => {\n setValue(val as string[]);\n }}\n />\n );\n};\n";
5
+ export declare const CustomRenderOptionAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Avatar, Box } from '@mui/material';\n\nconst users = [\n { value: 'admin', label: 'Administrador', img: '...' },\n];\n\nexport const CustomRenderExample = () => {\n const [value, setValue] = useState([]);\n\n return (\n <Autocomplete\n multiple\n options={users}\n value={value}\n onChange={(val) => {\n setValue(val as string[]);\n }}\n renderOptionItem={(item) => (\n <Box sx={{ display: 'flex', gap: 1 }}>\n <Avatar src={item.img} />\n {item.label}\n </Box>\n )}\n />\n );\n};\n";
6
+ export declare const CustomChipRenderAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\nimport { Typography } from '@mui/material';\n\nexport const CustomChipExample = () => {\n const [value, setValue] = useState([]);\n\n return (\n <Autocomplete\n multiple\n options={[]}\n value={value}\n onChange={(val) => {\n setValue(val as string[]);\n }}\n renderChipLabel={(item) => (\n <Typography variant=\"caption\">\n {item.label.charAt(0)}\n </Typography>\n )}\n />\n );\n};\n";
7
+ export declare const LoadingAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\n\nexport const LoadingExample = () => {\n const [value, setValue] = useState(null);\n\n return (\n <Autocomplete\n loading\n options={[]}\n value={value}\n onChange={(val) => {\n\t\t\t\tsetValue(val as string);\n\t\t\t}}\n />\n );\n};\n";
8
+ export declare const EmptyOptionsAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\n\nexport const EmptyExample = () => {\n const [value, setValue] = useState(null);\n\n return (\n <Autocomplete\n options={[]}\n value={value}\n onChange={(val) => {\n\t\t\t\tsetValue(val as string);\n\t\t\t}}\n placeholder=\"No hay opciones\"\n />\n );\n};\n";
9
+ export declare const ManyOptionsAutocompleteDefinition = "\nimport React, { useState } from 'react';\nimport Autocomplete from './Autocomplete';\n\nconst options = Array.from({ length: 50 }, (_, i) => ({\n value: i,\n label: 'Opci\u00F3n ' + i,\n}));\n\nexport const ManyOptionsExample = () => {\n const [value, setValue] = useState(null);\n\n return (\n <Autocomplete\n options={options}\n value={value}\n onChange={(val) => {\n\t\t\t\tsetValue(val as string);\n\t\t\t}}\n />\n );\n};\n";
package/components/Autocomplete/Autocomplete.js ADDED
@@ -0,0 +1,109 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
21
+ import { createElement } from "react";
22
+ import { Autocomplete, TextField, Box, CircularProgress, Typography, Chip, Avatar } from "@mui/material";
23
+ import ClearIcon from "@mui/icons-material/Clear";
24
+ function AutocompleteSelect(props) {
25
+ const {
26
+ label,
27
+ options = [],
28
+ value,
29
+ onChange,
30
+ placeholder,
31
+ multiple = false,
32
+ disabled = false,
33
+ loading = false,
34
+ error = false,
35
+ helperText,
36
+ renderOptionItem,
37
+ renderChipLabel,
38
+ maxChipsToShow = 3
39
+ } = props;
40
+ const renderTags = (value2, getTagProps) => {
41
+ const displayed = value2.slice(0, maxChipsToShow);
42
+ const hidden = value2.length - maxChipsToShow;
43
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
44
+ displayed.map((option, index) => /* @__PURE__ */ createElement(
45
+ Chip,
46
+ __spreadProps(__spreadValues({}, getTagProps({ index })), {
47
+ key: option.value,
48
+ label: renderChipLabel ? renderChipLabel(option) : option.label,
49
+ avatar: option.img ? /* @__PURE__ */ jsx(Avatar, { src: option.img }) : void 0,
50
+ deleteIcon: /* @__PURE__ */ jsx(ClearIcon, {})
51
+ })
52
+ )),
53
+ hidden > 0 && /* @__PURE__ */ jsx(Chip, { label: `+${hidden} más` })
54
+ ] });
55
+ };
56
+ const renderOption = (propsLi, option) => /* @__PURE__ */ createElement("li", __spreadProps(__spreadValues({}, propsLi), { key: option.value }), renderOptionItem ? renderOptionItem(option) : option.label);
57
+ const renderAutocomplete = (value2, onChange2) => {
58
+ var _a, _b;
59
+ return /* @__PURE__ */ jsx(
60
+ Autocomplete,
61
+ {
62
+ multiple,
63
+ options,
64
+ value: multiple ? (_a = options.filter(
65
+ (o) => value2 == null ? void 0 : value2.includes(o.value)
66
+ )) != null ? _a : [] : (_b = options.find((o) => o.value === value2)) != null ? _b : null,
67
+ disabled,
68
+ loading,
69
+ getOptionLabel: (opt) => {
70
+ var _a2;
71
+ return (_a2 = opt == null ? void 0 : opt.label) != null ? _a2 : "";
72
+ },
73
+ isOptionEqualToValue: (a, b) => a.value === b.value,
74
+ onChange: onChange2,
75
+ renderOption,
76
+ renderTags: multiple ? renderTags : void 0,
77
+ noOptionsText: "No hay opciones",
78
+ loadingText: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
79
+ /* @__PURE__ */ jsx(CircularProgress, { size: 20 }),
80
+ /* @__PURE__ */ jsx(Typography, { children: "Cargando..." })
81
+ ] }),
82
+ renderInput: (params) => /* @__PURE__ */ jsx(
83
+ TextField,
84
+ __spreadProps(__spreadValues({}, params), {
85
+ label,
86
+ placeholder,
87
+ error,
88
+ helperText
89
+ })
90
+ )
91
+ }
92
+ );
93
+ };
94
+ const handleChangeInternal = (event, newValue) => {
95
+ var _a;
96
+ if (multiple) {
97
+ const values = (newValue != null ? newValue : []).map((opt) => opt.value);
98
+ onChange == null ? void 0 : onChange(values);
99
+ } else {
100
+ const value2 = (_a = newValue == null ? void 0 : newValue.value) != null ? _a : "";
101
+ onChange == null ? void 0 : onChange(value2);
102
+ }
103
+ };
104
+ return renderAutocomplete(value, handleChangeInternal);
105
+ }
106
+ export {
107
+ AutocompleteSelect as Autocomplete
108
+ };
109
+ //# sourceMappingURL=Autocomplete.js.map
package/components/Autocomplete/Autocomplete.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Autocomplete.js","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Autocomplete,\n TextField,\n Chip,\n Avatar,\n Box,\n Typography,\n CircularProgress,\n} from \"@mui/material\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n img?: string;\n disabled?: boolean;\n group?: string;\n [key: string]: any;\n}\n\ntype RenderOptionItem = (item: SelectOption) => React.ReactNode;\ntype RenderChipLabel = (item: SelectOption) => React.ReactNode;\n\ninterface AutocompleteProps<\n TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n> {\n label?: string;\n value: TValue | TValue[];\n onChange: (val: TValue | TValue[]) => void;\n options?: SelectOption[];\n placeholder?: string;\n multiple?: boolean;\n disabled?: boolean;\n loading?: boolean;\n error?: boolean;\n helperText?: string;\n maxChipsToShow?: number;\n renderOptionItem?: RenderOptionItem;\n renderChipLabel?: RenderChipLabel;\n}\n\nexport function AutocompleteSelect<\n TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n>(props: AutocompleteProps<TValue>) {\n const {\n label,\n options = [],\n value,\n onChange,\n placeholder,\n multiple = false,\n disabled = false,\n loading = false,\n error = false,\n helperText,\n renderOptionItem,\n renderChipLabel,\n maxChipsToShow = 3,\n } = props;\n\n const renderTags = (value: SelectOption[], getTagProps: any) => {\n const displayed = value.slice(0, maxChipsToShow);\n const hidden = value.length - maxChipsToShow;\n\n return (\n <>\n {displayed.map((option, index) => (\n <Chip\n {...getTagProps({ index })}\n key={option.value}\n label={renderChipLabel ? renderChipLabel(option) : option.label}\n avatar={option.img ? <Avatar src={option.img} /> : undefined}\n deleteIcon={<ClearIcon />}\n />\n ))}\n\n {hidden > 0 && <Chip label={`+${hidden} más`} />}\n </>\n );\n };\n\n const renderOption = (propsLi: any, option: SelectOption) => (\n <li {...propsLi} key={option.value}>\n {renderOptionItem ? renderOptionItem(option) : option.label}\n </li>\n );\n\n const renderAutocomplete = (value: any, onChange: any) => (\n <Autocomplete\n multiple={multiple}\n options={options}\n value={\n multiple\n ? (options.filter((o) =>\n (value as string[] | undefined)?.includes(o.value as string),\n ) ?? [])\n : (options.find((o) => o.value === value) ?? null)\n }\n disabled={disabled}\n loading={loading}\n getOptionLabel={(opt) => opt?.label ?? \"\"}\n isOptionEqualToValue={(a, b) => a.value === b.value}\n onChange={onChange}\n renderOption={renderOption}\n renderTags={multiple ? renderTags : undefined}\n noOptionsText=\"No hay opciones\"\n loadingText={\n <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1 }}>\n <CircularProgress size={20} />\n <Typography>Cargando...</Typography>\n </Box>\n }\n renderInput={(params) => (\n <TextField\n {...params}\n label={label}\n placeholder={placeholder}\n error={error}\n helperText={helperText}\n />\n )}\n />\n );\n\n const handleChangeInternal = (event: any, newValue: any) => {\n if (multiple) {\n const values = (newValue ?? []).map((opt: any) => opt.value);\n (onChange as (val: TValue[]) => void)?.(values);\n } else {\n const value = newValue?.value ?? \"\";\n (onChange as (val: TValue) => void)?.(value);\n }\n };\n\n return renderAutocomplete(value, handleChangeInternal);\n}\n\nexport default AutocompleteSelect;\n"],"names":["value","onChange","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0CO,SAAS,mBAEd,OAAkC;AAClC,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,CAAA;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,EAAA,IACf;AAEJ,QAAM,aAAa,CAACA,QAAuB,gBAAqB;AAC9D,UAAM,YAAYA,OAAM,MAAM,GAAG,cAAc;AAC/C,UAAM,SAASA,OAAM,SAAS;AAE9B,WACE,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA,UAAU,IAAI,CAAC,QAAQ,UACtB;AAAA,QAAC;AAAA,QAAA,iCACK,YAAY,EAAE,OAAO,IAD1B;AAAA,UAEC,KAAK,OAAO;AAAA,UACZ,OAAO,kBAAkB,gBAAgB,MAAM,IAAI,OAAO;AAAA,UAC1D,QAAQ,OAAO,MAAM,oBAAC,UAAO,KAAK,OAAO,KAAK,IAAK;AAAA,UACnD,gCAAa,WAAA,CAAA,CAAU;AAAA,QAAA;AAAA,MAAA,CAE1B;AAAA,MAEA,SAAS,KAAK,oBAAC,QAAK,OAAO,IAAI,MAAM,OAAA,CAAQ;AAAA,IAAA,GAChD;AAAA,EAEJ;AAEA,QAAM,eAAe,CAAC,SAAc,WAClC,8BAAC,uCAAO,YAAS,KAAK,OAAO,UAC1B,mBAAmB,iBAAiB,MAAM,IAAI,OAAO,KACxD;AAGF,QAAM,qBAAqB,CAACA,QAAYC;;AACtC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OACE,YACK,aAAQ;AAAA,UAAO,CAAC,MACdD,iCAAgC,SAAS,EAAE;AAAA,QAAe,MAD5D,YAEI,CAAA,KACJ,aAAQ,KAAK,CAAC,MAAM,EAAE,UAAUA,MAAK,MAArC,YAA0C;AAAA,QAEjD;AAAA,QACA;AAAA,QACA,gBAAgB,CAAC;;AAAQ,kBAAAE,MAAA,2BAAK,UAAL,OAAAA,MAAc;AAAA;AAAA,QACvC,sBAAsB,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE;AAAA,QAC9C,UAAUD;AAAAA,QACV;AAAA,QACA,YAAY,WAAW,aAAa;AAAA,QACpC,eAAc;AAAA,QACd,aACE,qBAAC,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAA,GACrD,UAAA;AAAA,UAAA,oBAAC,kBAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,UAC5B,oBAAC,cAAW,UAAA,cAAA,CAAW;AAAA,QAAA,GACzB;AAAA,QAEF,aAAa,CAAC,WACZ;AAAA,UAAC;AAAA,UAAA,iCACK,SADL;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA;AAKN,QAAM,uBAAuB,CAAC,OAAY,aAAkB;;AAC1D,QAAI,UAAU;AACZ,YAAM,UAAU,8BAAY,CAAA,GAAI,IAAI,CAAC,QAAa,IAAI,KAAK;AAC1D,2CAAuC;AAAA,IAC1C,OAAO;AACL,YAAMD,UAAQ,0CAAU,UAAV,YAAmB;AAChC,2CAAqCA;AAAAA,IACxC;AAAA,EACF;AAEA,SAAO,mBAAmB,OAAO,oBAAoB;AACvD;"}
package/components/Autocomplete/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as Autocomplete } from './Autocomplete';
package/components/Autocomplete.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './Autocomplete/index'
2
+ export {}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@soyfri/shared-library",
3
- "version": "1.4.9",
3
+ "version": "1.5.0-beta.3",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -153,6 +153,11 @@
153
153
  "require": "./components/Avatar/Avatar.cjs",
154
154
  "types": "./components/Avatar/Avatar.d.ts"
155
155
  },
156
+ "./components/Autocomplete": {
157
+ "import": "./components/Autocomplete/Autocomplete.js",
158
+ "require": "./components/Autocomplete/Autocomplete.cjs",
159
+ "types": "./components/Autocomplete/Autocomplete.d.ts"
160
+ },
156
161
  "./hooks/ClipBoard": {
157
162
  "import": "./hooks/ClipBoard/ClipBoard.js",
158
163
  "require": "./hooks/ClipBoard/ClipBoard.cjs",