@producteca/producteca-ui-kit 1.85.0 → 1.86.0
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/dist/components/dropzone/dropzone.d.js +1 -0
- package/dist/components/dropzone/dropzone.d.ts +4 -0
- package/dist/components/dropzone/dropzone.examples.d.js +1 -0
- package/dist/components/dropzone/dropzone.examples.d.ts +4 -0
- package/dist/components/dropzone/dropzone.types.d.js +1 -0
- package/dist/components/dropzone/dropzone.types.d.ts +27 -0
- package/dist/components/dropzone/dropzone.utils.d.js +1 -0
- package/dist/components/dropzone/dropzone.utils.d.ts +20 -0
- package/dist/components/dropzone/index.d.js +2 -0
- package/dist/components/dropzone/index.d.ts +3 -0
- package/dist/components/dropzone/useDropzone.d.js +1 -0
- package/dist/components/dropzone/useDropzone.d.ts +16 -0
- package/dist/components/inputs/datePicker/datePickerUtils.d.ts +1 -0
- package/dist/components/inputs/dateRangePicker/dateRangePickerUtils.d.ts +0 -1
- package/dist/components/patterns/fileRow/fileRow.d.js +1 -0
- package/dist/components/patterns/fileRow/fileRow.d.ts +4 -0
- package/dist/components/patterns/fileRow/fileRow.types.d.js +1 -0
- package/dist/components/patterns/fileRow/fileRow.types.d.ts +12 -0
- package/dist/components/patterns/fileRow/index.d.js +2 -0
- package/dist/components/patterns/fileRow/index.d.ts +3 -0
- package/dist/components/patterns/fileRow/useAutoloadProgress.d.js +1 -0
- package/dist/components/patterns/fileRow/useAutoloadProgress.d.ts +7 -0
- package/dist/components/patterns/index.d.js +1 -0
- package/dist/components/patterns/index.d.ts +1 -0
- package/dist/locales/description.d.ts +2 -0
- package/dist/locales/en.d.ts +8 -0
- package/dist/locales/es.d.ts +40 -0
- package/dist/locales/pt-BR.d.ts +8 -0
- package/dist/locales/weekdayFormatter.d.js +1 -0
- package/dist/locales/weekdayFormatter.d.ts +1 -0
- package/dist/playground/ComponentDemos.d.ts +1 -0
- package/dist/producteca-ui-kit.es.js +91 -91
- package/dist/producteca-ui-kit.umd.js +9 -9
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { DropzoneProps } from './dropzone.types';
|
|
2
|
+
|
|
3
|
+
export declare const Dropzone: ({ onDrop, onReject, accept, maxSize, maxFiles, label, error, isLoading, loadingText, disabled, name, }: DropzoneProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export default Dropzone;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { DropzoneProps } from './dropzone.types';
|
|
2
|
+
|
|
3
|
+
export declare const renderControlledDropzone: (args: DropzoneProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare const renderWithFileList: (args: DropzoneProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
export type DropzoneFileType = 'PDF' | 'XML' | 'XLSX' | 'XLS' | 'CSV' | 'PNG' | 'JPEG' | 'IMAGE';
|
|
2
|
+
export type DropRejectionReason = 'invalidType' | 'tooLarge' | 'tooManyFiles';
|
|
3
|
+
export interface DropRejection {
|
|
4
|
+
file: File;
|
|
5
|
+
reason: DropRejectionReason;
|
|
6
|
+
}
|
|
7
|
+
export interface DropzoneProps {
|
|
8
|
+
onDrop: (files: File[]) => void;
|
|
9
|
+
onReject?: (rejections: DropRejection[]) => void;
|
|
10
|
+
accept?: DropzoneFileType[];
|
|
11
|
+
maxSize?: number;
|
|
12
|
+
maxFiles?: number;
|
|
13
|
+
label?: string;
|
|
14
|
+
error?: string;
|
|
15
|
+
isLoading?: boolean;
|
|
16
|
+
loadingText?: string;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
name?: string;
|
|
19
|
+
}
|
|
20
|
+
export interface UseDropzoneOptions {
|
|
21
|
+
onDrop: (files: File[]) => void;
|
|
22
|
+
onReject?: (rejections: DropRejection[]) => void;
|
|
23
|
+
accept?: DropzoneFileType[];
|
|
24
|
+
maxSize?: number;
|
|
25
|
+
maxFiles?: number;
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { DropRejection, DropzoneFileType } from './dropzone.types';
|
|
2
|
+
|
|
3
|
+
interface FileTypeDefinition {
|
|
4
|
+
mime: string;
|
|
5
|
+
extensions: string[];
|
|
6
|
+
}
|
|
7
|
+
export declare const fileTypes: Record<DropzoneFileType, FileTypeDefinition>;
|
|
8
|
+
export declare const buildAcceptAttribute: (accept?: DropzoneFileType[]) => string | undefined;
|
|
9
|
+
export declare const buildAcceptLabel: (accept?: DropzoneFileType[]) => string;
|
|
10
|
+
export declare const isAcceptedType: (file: File, accept?: DropzoneFileType[]) => boolean;
|
|
11
|
+
interface PartitionOptions {
|
|
12
|
+
accept?: DropzoneFileType[];
|
|
13
|
+
maxSize?: number;
|
|
14
|
+
maxFiles: number;
|
|
15
|
+
}
|
|
16
|
+
export declare const partitionFiles: (files: File[], { accept, maxSize, maxFiles }: PartitionOptions) => {
|
|
17
|
+
accepted: File[];
|
|
18
|
+
rejected: DropRejection[];
|
|
19
|
+
};
|
|
20
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ChangeEvent, DragEvent } from 'react';
|
|
2
|
+
import { UseDropzoneOptions } from './dropzone.types';
|
|
3
|
+
|
|
4
|
+
export declare const useDropzone: ({ onDrop, onReject, accept, maxSize, maxFiles, disabled, }: UseDropzoneOptions) => {
|
|
5
|
+
isDragActive: boolean;
|
|
6
|
+
acceptAttribute: string | undefined;
|
|
7
|
+
dragHandlers: {
|
|
8
|
+
onDragEnter: (event: DragEvent<HTMLElement>) => void;
|
|
9
|
+
onDragOver: (event: DragEvent<HTMLElement>) => void;
|
|
10
|
+
onDragLeave: (event: DragEvent<HTMLElement>) => void;
|
|
11
|
+
onDrop: (event: DragEvent<HTMLElement>) => void;
|
|
12
|
+
};
|
|
13
|
+
handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
14
|
+
isMultiple: boolean;
|
|
15
|
+
};
|
|
16
|
+
export default useDropzone;
|
|
@@ -20,6 +20,7 @@ interface ReadOnlyDateFieldProps {
|
|
|
20
20
|
textFieldProps?: Record<string, unknown>;
|
|
21
21
|
}
|
|
22
22
|
export declare const ReadOnlyDateField: React.FC<ReadOnlyDateFieldProps>;
|
|
23
|
+
export declare const formatDayOfWeek: (weekday: Dayjs) => string;
|
|
23
24
|
export type PickerType = 'date' | 'dateTime' | 'time' | 'year';
|
|
24
25
|
export declare const getPickerTypeFromFormat: (format?: string) => PickerType;
|
|
25
26
|
export declare const getFinalFormat: (format?: string) => string;
|
|
@@ -5,5 +5,4 @@ export type DisabledDays = Matcher | Matcher[] | undefined;
|
|
|
5
5
|
export declare const fromInputValue: (inputValue: InputValue) => DateRange | undefined;
|
|
6
6
|
export declare const getDisplayRange: (range: DateRange | undefined, format?: string) => string;
|
|
7
7
|
export declare const convertToDate: (val: InputValue | undefined) => Date | undefined;
|
|
8
|
-
export declare const CustomWeekday: (props: any) => import("react/jsx-runtime").JSX.Element;
|
|
9
8
|
export declare const getDisabledDays: (disabled: boolean, minDate?: InputValue, maxDate?: InputValue) => DisabledDays;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { MouseEvent } from 'react';
|
|
2
|
+
|
|
3
|
+
export interface FileRowProps {
|
|
4
|
+
name: string;
|
|
5
|
+
progress?: number;
|
|
6
|
+
autoload?: boolean;
|
|
7
|
+
autoloadDuration?: number;
|
|
8
|
+
onAutoloadComplete?: () => void;
|
|
9
|
+
error?: string;
|
|
10
|
+
onRemove?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
11
|
+
showRemoveAction?: boolean;
|
|
12
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
interface UseAutoloadProgressOptions {
|
|
2
|
+
enabled: boolean;
|
|
3
|
+
duration?: number;
|
|
4
|
+
onComplete?: () => void;
|
|
5
|
+
}
|
|
6
|
+
export declare const useAutoloadProgress: ({ enabled, duration, onComplete, }: UseAutoloadProgressOptions) => number;
|
|
7
|
+
export default useAutoloadProgress;
|
|
@@ -59,3 +59,5 @@ export declare const spinnerExample = "\n## Uso del componente\n\nEl componente
|
|
|
59
59
|
export declare const maintenanceExample = "\n## Uso del componente\n\nEl componente `Maintenance` muestra una vista de p\u00E1gina completa para indicar que el sistema est\u00E1 en mantenimiento. Acepta `title`, `description` y `subtitle` opcionales con valores por defecto en espa\u00F1ol.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<Maintenance />\n```\n\n### Con contenido personalizado:\n\n```tsx\n<Maintenance\n title=\"Estamos mejorando\"\n description=\"Estamos haciendo algunos ajustes para brindarte una mejor experiencia.\"\n subtitle=\"Volvemos en unos minutos.\"\n/>\n```\n";
|
|
60
60
|
export declare const permissionOptionExample = "\n## Uso del componente\n\nEl componente `PermissionOption` muestra un permiso (Lectura, Edici\u00F3n o Sin acceso) con su \u00EDcono y label. Es clickeable/seleccionable: al definir `onClick` se vuelve interactivo (accesible por teclado). `isActive` lo muestra seleccionado (fondo celeste + texto/\u00EDcono azul) y `disabled` lo aten\u00FAa (opacidad 0.5) sin interacci\u00F3n.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<PermissionOption\n permission=\"read\"\n isActive\n onClick={() => setPermission('read')}\n/>\n```\n";
|
|
61
61
|
export declare const permissionSelectorExample = "\n## Uso del componente\n\nEl componente `PermissionSelector` muestra los tres permisos (Sin acceso, Lectura, Edici\u00F3n) en l\u00EDnea como un selector de opci\u00F3n \u00FAnica. Al elegir un permiso, el fondo celeste se desliza desde el permiso actual hacia el seleccionado (misma t\u00E9cnica que `Tabs`).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\nconst [permission, setPermission] = React.useState('noAccess')\n\n<PermissionSelector\n value={permission}\n onChange={setPermission}\n/>\n```\n";
|
|
62
|
+
export declare const dropzoneExample = "\n## Uso del componente\n\n`Dropzone` es la zona de carga: soporta drag & drop nativo y click para abrir el explorador de archivos. Es **controlado**: no guarda los archivos, solo valida tipo/tama\u00F1o/cantidad y emite `onDrop` con los aceptados y `onReject` con los rechazados. El padre maneja la subida (progreso, errores del backend) y renderiza las filas con [FileRow](/docs/components-filerow--docs).\n\n### Estados\n\n- **Vac\u00EDo**: borde punteado, \u00EDcono de subida, instrucciones y el tama\u00F1o m\u00E1ximo permitido.\n- **Drag activo**: borde s\u00F3lido y fondo celeste mientras se arrastra un archivo encima.\n- **Cargando** (`isLoading`): spinner + texto, sin interacci\u00F3n.\n- **Error** (`error`): borde rojo y mensaje debajo de la zona.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\nconst [files, setFiles] = useState<UploadedFile[]>([])\n\nconst handleDrop = async (dropped: File[]) => {\n const [file] = dropped\n setFiles([{ id: file.name, name: file.name, progress: 0 }])\n await upload(file, (progress) => setFiles([{ id: file.name, name: file.name, progress }]))\n}\n\nconst handleReject = ([{ reason }]: DropRejection[]) =>\n setError(localize(\\`dropzone.\\${reason}\\`, { maxSize: 10 }))\n\nreturn (\n <>\n <Dropzone\n accept={['PDF', 'XLSX']}\n maxSize={10}\n error={error}\n onDrop={handleDrop}\n onReject={handleReject}\n />\n {files.map(({ id, name, progress }) => (\n <FileRow key={id} name={name} progress={progress} onRemove={() => remove(id)} />\n ))}\n </>\n)\n```\n";
|
|
63
|
+
export declare const fileRowExample = "\n## Uso del componente\n\n`FileRow` es la tarjeta de un archivo ya adjuntado. Muestra el nombre, un bot\u00F3n de eliminar y, opcionalmente, el progreso de subida y un mensaje de error.\n\n- `progress` (0-100): al definirlo se muestra la barra lineal y el porcentaje. Omitilo para el estado \"subida terminada\".\n- `autoload`: anima la barra de 0 a 100 al montar, sin necesidad de eventos reales de subida. Al terminar, la barra desaparece y la fila queda en su estado final (nombre + eliminar). \u00DAtil cuando la subida es tan r\u00E1pida que no hay progreso que reportar, o para prototipar. Se ignora si se define `progress`, y avisa el final con `onAutoloadComplete`.\n- `error`: pinta el borde de la tarjeta en rojo y muestra el mensaje debajo.\n- `showRemoveAction={false}`: oculta el bot\u00F3n de eliminar.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<FileRow\n name=\"Nombre_del_archivo.xlm\"\n progress={75}\n onRemove={() => removeFile(id)}\n/>\n```\n";
|
package/dist/locales/en.d.ts
CHANGED
|
@@ -34,6 +34,14 @@ declare const _default: {
|
|
|
34
34
|
selectTime: string;
|
|
35
35
|
selectYear: string;
|
|
36
36
|
};
|
|
37
|
+
dropzone: {
|
|
38
|
+
clickHere: string;
|
|
39
|
+
dropFiles: string;
|
|
40
|
+
maxSize: string;
|
|
41
|
+
percentage: string;
|
|
42
|
+
removeFile: string;
|
|
43
|
+
uploadingFile: string;
|
|
44
|
+
};
|
|
37
45
|
guide: string;
|
|
38
46
|
maintenance: {
|
|
39
47
|
description: string;
|
package/dist/locales/es.d.ts
CHANGED
|
@@ -186,6 +186,12 @@ declare const _default: {
|
|
|
186
186
|
permissionSelector: {
|
|
187
187
|
example: string;
|
|
188
188
|
};
|
|
189
|
+
dropzone: {
|
|
190
|
+
example: string;
|
|
191
|
+
};
|
|
192
|
+
fileRow: {
|
|
193
|
+
example: string;
|
|
194
|
+
};
|
|
189
195
|
dropdown: {
|
|
190
196
|
example: string;
|
|
191
197
|
};
|
|
@@ -582,6 +588,40 @@ declare const _default: {
|
|
|
582
588
|
descriptionDescription: string;
|
|
583
589
|
subtitleDescription: string;
|
|
584
590
|
};
|
|
591
|
+
dropzone: {
|
|
592
|
+
dropFiles: string;
|
|
593
|
+
clickHere: string;
|
|
594
|
+
maxSize: string;
|
|
595
|
+
uploadingFile: string;
|
|
596
|
+
percentage: string;
|
|
597
|
+
removeFile: string;
|
|
598
|
+
invalidType: string;
|
|
599
|
+
tooLarge: string;
|
|
600
|
+
tooManyFiles: string;
|
|
601
|
+
label: string;
|
|
602
|
+
fileName: string;
|
|
603
|
+
onDrop: string;
|
|
604
|
+
onReject: string;
|
|
605
|
+
accept: string;
|
|
606
|
+
maxSizeProp: string;
|
|
607
|
+
maxFiles: string;
|
|
608
|
+
labelProp: string;
|
|
609
|
+
errorProp: string;
|
|
610
|
+
isLoading: string;
|
|
611
|
+
loadingText: string;
|
|
612
|
+
disabled: string;
|
|
613
|
+
nameProp: string;
|
|
614
|
+
fileRow: {
|
|
615
|
+
name: string;
|
|
616
|
+
progress: string;
|
|
617
|
+
autoload: string;
|
|
618
|
+
autoloadDuration: string;
|
|
619
|
+
onAutoloadComplete: string;
|
|
620
|
+
error: string;
|
|
621
|
+
onRemove: string;
|
|
622
|
+
showRemoveAction: string;
|
|
623
|
+
};
|
|
624
|
+
};
|
|
585
625
|
stepper: {
|
|
586
626
|
done: string;
|
|
587
627
|
cart: string;
|
package/dist/locales/pt-BR.d.ts
CHANGED
|
@@ -34,6 +34,14 @@ declare const _default: {
|
|
|
34
34
|
selectTime: string;
|
|
35
35
|
selectYear: string;
|
|
36
36
|
};
|
|
37
|
+
dropzone: {
|
|
38
|
+
clickHere: string;
|
|
39
|
+
dropFiles: string;
|
|
40
|
+
maxSize: string;
|
|
41
|
+
percentage: string;
|
|
42
|
+
removeFile: string;
|
|
43
|
+
uploadingFile: string;
|
|
44
|
+
};
|
|
37
45
|
guide: string;
|
|
38
46
|
maintenance: {
|
|
39
47
|
description: string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const formatWeekdayInitial: (weekday: Date) => string;
|
|
@@ -34,5 +34,6 @@ export declare const DemoWarningModal: DemoComponent;
|
|
|
34
34
|
export declare const DemoMenuAction: DemoComponent;
|
|
35
35
|
export declare const DemoTable: DemoComponent;
|
|
36
36
|
export declare const DemoPermissionSelector: DemoComponent;
|
|
37
|
+
export declare const DemoDropzone: DemoComponent;
|
|
37
38
|
export declare const ComponentDemos: Record<string, DemoComponent>;
|
|
38
39
|
export {};
|