@royaltics/ui 1.1.3 → 1.1.4
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/PhotoCard.d.ts +7 -7
- package/dist/components/PhotoCard.d.ts.map +1 -1
- package/dist/components/PhotoCard.js +42 -21
- package/dist/components/PhotoCard.js.map +1 -1
- package/dist/components/PhotoCard.stories.d.ts +18 -0
- package/dist/components/PhotoCard.stories.d.ts.map +1 -0
- package/dist/components/PhotoCard.stories.js +38 -0
- package/dist/components/PhotoCard.stories.js.map +1 -0
- package/dist/forms/Button.stories.js +1 -1
- package/dist/forms/Button.stories.js.map +1 -1
- package/dist/forms/LinkButton.stories.js +1 -1
- package/dist/forms/LinkButton.stories.js.map +1 -1
- package/dist/forms/Select.d.ts +0 -1
- package/dist/forms/Select.d.ts.map +1 -1
- package/dist/forms/Select.js +2 -2
- package/dist/forms/Select.js.map +1 -1
- package/dist/forms/Select.stories.d.ts +2 -1
- package/dist/forms/Select.stories.d.ts.map +1 -1
- package/dist/forms/Select.stories.js +11 -6
- package/dist/forms/Select.stories.js.map +1 -1
- package/dist/types/global.d.ts +7 -0
- package/dist/types/global.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
user_id?: any;
|
|
2
|
+
import { ComponentBaseOutline } from "../types/global.js";
|
|
3
|
+
export interface PhotoCardProps extends ComponentBaseOutline {
|
|
5
4
|
api: string;
|
|
5
|
+
api_body?: Record<string, any>;
|
|
6
|
+
keyValue?: string;
|
|
6
7
|
photo: string | null;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
declare const PhotoCard: ({ uuid, api, user_id, photo, set, theme }: PhotoCardType) => React.JSX.Element;
|
|
8
|
+
onChange: (change: any) => void;
|
|
9
|
+
}
|
|
10
|
+
declare const PhotoCard: ({ api, size, api_body, theme, keyValue, photo, onChange }: PhotoCardProps) => React.JSX.Element;
|
|
11
11
|
export default PhotoCard;
|
|
12
12
|
//# sourceMappingURL=PhotoCard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhotoCard.d.ts","sourceRoot":"","sources":["../../src/components/PhotoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"PhotoCard.d.ts","sourceRoot":"","sources":["../../src/components/PhotoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAI1D,MAAM,WAAW,cAAe,SAAQ,oBAAoB;IACxD,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CACnC;AA8BD,QAAA,MAAM,SAAS,GAAI,2DAA6F,cAAc,sBA4F7H,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -3,12 +3,37 @@ import { toast } from "react-toastify";
|
|
|
3
3
|
import { FolderIcon, TrashIcon } from '@heroicons/react/24/outline';
|
|
4
4
|
import cn from "classnames";
|
|
5
5
|
import useHttpState from "../hooks/useHttpState.js";
|
|
6
|
-
|
|
6
|
+
import { uuidv4 } from "../index.js";
|
|
7
|
+
import { cvaMix } from "../utils/cvmix.js";
|
|
8
|
+
const classNamesProps = cvaMix("flex items-center justify-center", {
|
|
9
|
+
size: {
|
|
10
|
+
xxs: 'text-xs w-6 h-6',
|
|
11
|
+
xs: 'text-xs gap-1 w-9 h-9',
|
|
12
|
+
sm: ' text-sm gap-1.5 w-14 h-14',
|
|
13
|
+
md: 'text-base gap-2 w-16 h-16',
|
|
14
|
+
lg: 'text-lg gap-2.5 w-24 h-24',
|
|
15
|
+
},
|
|
16
|
+
theme: {
|
|
17
|
+
primary: 'border-primary text-primary hover:bg-primary hover:text-primary-foreground disabled:hover:bg-transparent disabled:hover:text-primary',
|
|
18
|
+
secondary: 'border-secondary text-secondary checked:border-secondary',
|
|
19
|
+
success: 'border-success text-success checked:border-success',
|
|
20
|
+
warn: 'border-warn text-warn-foreground checked:border-warn',
|
|
21
|
+
danger: 'border-danger text-danger-foreground checked:border-danger',
|
|
22
|
+
accent: 'border-accent text-accent-foreground checked:border-accent',
|
|
23
|
+
}
|
|
24
|
+
}, {
|
|
25
|
+
size: 'xxs',
|
|
26
|
+
width: 'full',
|
|
27
|
+
variant: 'fill'
|
|
28
|
+
});
|
|
29
|
+
const avatarPlaceHolder = `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"> <rect width="128" height="128" fill="#ccc"/> <circle cx="96" cy="32" r="12" fill="#bbb"/> <path d="M16 96L48 56L80 96Z" fill="#999"/> <path d="M48 96L80 64L112 96Z" fill="#888"/></svg>`)}`;
|
|
30
|
+
const PhotoCard = ({ api, size = 'md', api_body = {}, theme = 'primary', keyValue = 'photo', photo, onChange }) => {
|
|
7
31
|
// Valores de los inputs
|
|
8
32
|
const [preview, setPreview] = useState(null);
|
|
9
33
|
const { deleteReq, patch } = useHttpState();
|
|
34
|
+
const componentId = `photo_${uuidv4()}`;
|
|
10
35
|
useEffect(() => {
|
|
11
|
-
setPreview(photo);
|
|
36
|
+
setPreview(photo || avatarPlaceHolder);
|
|
12
37
|
}, [photo]);
|
|
13
38
|
// Crear una vista previa como efecto, siempre que se cambie el archivo seleccionado
|
|
14
39
|
//Update and Selected Image
|
|
@@ -21,10 +46,10 @@ const PhotoCard = ({ uuid = '', api, user_id, photo, set, theme = 'default' }) =
|
|
|
21
46
|
if (["jpg", "png", "jpeg", "bpm", "tif"].includes(ext)) {
|
|
22
47
|
setPreview(URL.createObjectURL(e.target.files[0]));
|
|
23
48
|
patch(api, {
|
|
24
|
-
data: {
|
|
49
|
+
data: { ...api_body, [keyValue]: e.target.files[0] },
|
|
25
50
|
content_type: 'file',
|
|
26
51
|
onSuccess: (data) => {
|
|
27
|
-
|
|
52
|
+
onChange({ [keyValue]: data.photo });
|
|
28
53
|
toast.success('Imagen Actualizada Correctamente!');
|
|
29
54
|
}
|
|
30
55
|
});
|
|
@@ -34,29 +59,25 @@ const PhotoCard = ({ uuid = '', api, user_id, photo, set, theme = 'default' }) =
|
|
|
34
59
|
}
|
|
35
60
|
};
|
|
36
61
|
const deletePreview = () => {
|
|
37
|
-
|
|
38
|
-
if (photo != 'Photo.jpg') {
|
|
62
|
+
if (!photo) {
|
|
39
63
|
deleteReq(api, {
|
|
40
|
-
onSuccess: (
|
|
41
|
-
|
|
64
|
+
onSuccess: () => {
|
|
65
|
+
onChange({ [keyValue]: null });
|
|
42
66
|
toast.success('Imagen Eliminada Correctamente!');
|
|
43
|
-
setPreview(
|
|
67
|
+
setPreview(avatarPlaceHolder);
|
|
44
68
|
}
|
|
45
69
|
});
|
|
46
70
|
}
|
|
47
71
|
};
|
|
48
|
-
return (React.createElement("div", { className: "flex items-center
|
|
49
|
-
React.createElement("img", { src: preview
|
|
50
|
-
React.createElement("
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
React.createElement(
|
|
56
|
-
|
|
57
|
-
preview && React.createElement("button", { className: "button outline-red", onClick: deletePreview },
|
|
58
|
-
React.createElement(TrashIcon, { className: "h-4" }),
|
|
59
|
-
React.createElement("span", { className: theme == 'small' ? 'hidden' : '' }, "Eliminar Imagen")))));
|
|
72
|
+
return (React.createElement("div", { className: "relative flex items-center justify-center" },
|
|
73
|
+
React.createElement("img", { src: preview, alt: "", className: cn('rounded-xl border-2', classNamesProps({ size, theme })) }),
|
|
74
|
+
React.createElement("input", { className: "hidden", type: "file", id: componentId, accept: ".jpg,.png,.jpeg,.bmp,.tif,.tiff,image/*", onChange: onSelectFile }),
|
|
75
|
+
React.createElement("div", { className: cn('absolute rounded-xl inset-0 bg-black/70 opacity-0 hover:opacity-85 transition-opacity duration-300', classNamesProps({ size })) },
|
|
76
|
+
React.createElement("div", { className: "flex items-center justify-center gap-0.5 px-2" },
|
|
77
|
+
React.createElement("label", { htmlFor: componentId, className: cn("flex items-center gap-1 rounded-md p-1 cursor-pointer bg-primary text-primary-foreground") },
|
|
78
|
+
React.createElement(FolderIcon, { className: "h-4" })),
|
|
79
|
+
!photo && (React.createElement("button", { className: "flex items-center gap-1 border-1 border-danger text-danger-foreground rounded-md p-1 cursor-pointer hover:bg-danger hover:text-danger-foreground", onClick: deletePreview },
|
|
80
|
+
React.createElement(TrashIcon, { className: "h-4" })))))));
|
|
60
81
|
};
|
|
61
82
|
export default PhotoCard;
|
|
62
83
|
//# sourceMappingURL=PhotoCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhotoCard.js","sourceRoot":"","sources":["../../src/components/PhotoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,YAAY,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"PhotoCard.js","sourceRoot":"","sources":["../../src/components/PhotoCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { PhotoCardProps } from './PhotoCard.js';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: ({ api, size, api_body, theme, keyValue, photo, onChange }: PhotoCardProps) => import("react").JSX.Element;
|
|
6
|
+
parameters: {
|
|
7
|
+
layout: string;
|
|
8
|
+
};
|
|
9
|
+
tags: string[];
|
|
10
|
+
argTypes: {
|
|
11
|
+
[x: string]: any;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export default meta;
|
|
15
|
+
export declare const paginatePrimary: StoryObj<typeof meta>;
|
|
16
|
+
export declare const paginateSecondary: StoryObj<typeof meta>;
|
|
17
|
+
export declare const paginateOutline: StoryObj<typeof meta>;
|
|
18
|
+
//# sourceMappingURL=PhotoCard.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PhotoCard.stories.d.ts","sourceRoot":"","sources":["../../src/components/PhotoCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAkB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAK3D,QAAA,MAAM,IAAI;;;;;;;;;;CAQsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AAIpB,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,OAAO,IAAI,CAMjD,CAAC;AAGF,eAAO,MAAM,iBAAiB,EAAE,QAAQ,CAAC,OAAO,IAAI,CAMnD,CAAC;AAIF,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,OAAO,IAAI,CAMjD,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import PhotoCard from './PhotoCard.js'; // Sin .js si usas la configuración por defecto de Webpack/Vite
|
|
2
|
+
import { ArgumentsBase } from '../types/StoriesArguments.js';
|
|
3
|
+
// Configuración general para el componente en Storybook
|
|
4
|
+
const meta = {
|
|
5
|
+
title: 'UI/Components/PhotoCard', // Categoría y nombre en la barra lateral de Storybook
|
|
6
|
+
component: PhotoCard,
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: 'centered', // Centra el componente en el lienzo
|
|
9
|
+
},
|
|
10
|
+
tags: ['autodocs'],
|
|
11
|
+
argTypes: { ...ArgumentsBase }
|
|
12
|
+
};
|
|
13
|
+
export default meta;
|
|
14
|
+
// Historias individuales
|
|
15
|
+
export const paginatePrimary = {
|
|
16
|
+
args: {
|
|
17
|
+
api: '',
|
|
18
|
+
photo: null,
|
|
19
|
+
onChange: () => { }
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
// Historias individuales
|
|
23
|
+
export const paginateSecondary = {
|
|
24
|
+
args: {
|
|
25
|
+
api: '',
|
|
26
|
+
photo: null,
|
|
27
|
+
onChange: () => { }
|
|
28
|
+
},
|
|
29
|
+
};
|
|
30
|
+
// Historias individuales
|
|
31
|
+
export const paginateOutline = {
|
|
32
|
+
args: {
|
|
33
|
+
api: '',
|
|
34
|
+
photo: null,
|
|
35
|
+
onChange: () => { }
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=PhotoCard.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PhotoCard.stories.js","sourceRoot":"","sources":["../../src/components/PhotoCard.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,SAA6B,MAAM,gBAAgB,CAAC,CAAC,+DAA+D;AAC3H,OAAO,EAAE,aAAa,EAAuB,MAAM,8BAA8B,CAAC;AAGlF,wDAAwD;AACxD,MAAM,IAAI,GAAG;IACT,KAAK,EAAE,yBAAyB,EAAE,sDAAsD;IACxF,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE;QACR,MAAM,EAAE,UAAU,EAAE,oCAAoC;KAC3D;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE,GAAG,aAAa,EAAE;CACF,CAAC;AAEjC,eAAe,IAAI,CAAC;AAGpB,yBAAyB;AACzB,MAAM,CAAC,MAAM,eAAe,GAA0B;IAClD,IAAI,EAAE;QACF,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,GAAG,EAAE,GAAG,CAAC;KACtB;CACJ,CAAC;AAEF,yBAAyB;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAA0B;IACpD,IAAI,EAAE;QACF,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,GAAG,EAAE,GAAG,CAAC;KACtB;CACJ,CAAC;AAGF,yBAAyB;AACzB,MAAM,CAAC,MAAM,eAAe,GAA0B;IAClD,IAAI,EAAE;QACF,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,GAAG,EAAE,GAAG,CAAC;KACtB;CACJ,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { ArgumentsBase, ArgumentsComponents } from '../types/StoriesArguments.js
|
|
|
3
3
|
import { TrashIcon } from '@heroicons/react/16/solid';
|
|
4
4
|
// Configuración general para el componente en Storybook
|
|
5
5
|
const meta = {
|
|
6
|
-
title: 'UI/
|
|
6
|
+
title: 'UI/Forms/Button', // Categoría y nombre en la barra lateral de Storybook
|
|
7
7
|
component: Button,
|
|
8
8
|
parameters: {
|
|
9
9
|
layout: 'centered', // Centra el componente en el lienzo
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/forms/Button.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,MAAuB,MAAM,aAAa,CAAC,CAAC,+DAA+D;AAClH,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,wDAAwD;AACxD,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/forms/Button.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,MAAuB,MAAM,aAAa,CAAC,CAAC,+DAA+D;AAClH,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,wDAAwD;AACxD,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,iBAAiB,EAAE,sDAAsD;IAChF,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU,EAAE,oCAAoC;KACzD;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE,GAAG,aAAa,EAAE,QAAQ,EAAE,mBAAmB,CAAC,QAAQ,EAAE;CAC3C,CAAC;AAE9B,eAAe,IAAI,CAAC;AAGpB,yBAAyB;AACzB,MAAM,CAAC,MAAM,aAAa,GAA0B;IAClD,IAAI,EAAE;QACJ,EAAE,EAAE,gBAAgB;QACpB,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAA0B;IACpD,IAAI,EAAE;QACJ,EAAE,EAAE,kBAAkB;QACtB,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,MAAM;QACf,IAAI,EAAE,SAAS;KAEhB;CACF,CAAC;AAGF,MAAM,CAAC,MAAM,iBAAiB,GAA0B;IACtD,IAAI,EAAE;QACJ,EAAE,EAAE,wBAAwB;QAC5B,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,SAAS;KAEnB;CACF,CAAC"}
|
|
@@ -5,7 +5,7 @@ import { TrashIcon } from '@heroicons/react/16/solid';
|
|
|
5
5
|
import { BrowserRouter } from 'react-router-dom';
|
|
6
6
|
// Configuración general para el componente en Storybook
|
|
7
7
|
const meta = {
|
|
8
|
-
title: 'UI/
|
|
8
|
+
title: 'UI/Forms/LinkButton', // Categoría y nombre en la barra lateral de Storybook
|
|
9
9
|
component: LinkButton,
|
|
10
10
|
// Aplica el decorador solo a esta historia o a este archivo de historias
|
|
11
11
|
decorators: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.stories.js","sourceRoot":"","sources":["../../src/forms/LinkButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAA+B,MAAM,iBAAiB,CAAC,CAAC,+DAA+D;AAC9H,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,wDAAwD;AACxD,MAAM,IAAI,GAAQ;IAChB,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"LinkButton.stories.js","sourceRoot":"","sources":["../../src/forms/LinkButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAA+B,MAAM,iBAAiB,CAAC,CAAC,+DAA+D;AAC9H,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,wDAAwD;AACxD,MAAM,IAAI,GAAQ;IAChB,KAAK,EAAE,qBAAqB,EAAE,sDAAsD;IACpF,SAAS,EAAE,UAAU;IACrB,yEAAyE;IACzE,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,oBAAC,aAAa;YACZ,oBAAC,KAAK,OAAG,CACK,CACjB;KACF;IAED,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE,GAAG,aAAa,EAAE,QAAQ,EAAE,mBAAmB,CAAC,QAAQ,EAAE;CACvC,CAAC;AAGlC,eAAe,IAAI,CAAC;AAGpB,yBAAyB;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAA0B;IACtD,IAAI,EAAE;QACJ,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,gBAAgB;QACpB,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAA0B;IACxD,IAAI,EAAE;QACJ,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,kBAAkB;QACtB,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,MAAM;QACf,IAAI,EAAE,SAAS;KAEhB;CACF,CAAC;AAGF,MAAM,CAAC,MAAM,qBAAqB,GAA0B;IAC1D,IAAI,EAAE;QACJ,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,wBAAwB;QAC5B,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,SAAS;KAEnB;CACF,CAAC"}
|
package/dist/forms/Select.d.ts
CHANGED
|
@@ -6,7 +6,6 @@ export interface SelectProps extends ComponentInputBase {
|
|
|
6
6
|
keyValue?: string;
|
|
7
7
|
KeyFindItem?: string;
|
|
8
8
|
onKeyDown?: (e: any) => void;
|
|
9
|
-
theme?: 'dark' | 'light';
|
|
10
9
|
state: [any] | [any, React.Dispatch<any>];
|
|
11
10
|
}
|
|
12
11
|
declare const _default: React.MemoExoticComponent<({ id, lb, state, onKeyDown, data, referer, keyText, keyValue, required, readOnly, className, KeyFindItem, size, variant }: SelectProps) => JSX.Element>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/forms/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAIxD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACnD,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,KAAK,
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/forms/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAIxD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACnD,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;CAC7C;8KAkBsL,WAAW,KAAG,GAAG,CAAC,OAAO;AAqDhN,wBAA4B"}
|
package/dist/forms/Select.js
CHANGED
|
@@ -12,7 +12,7 @@ const classNamesProps = cvaMix("flex flex-col items-stretch justify-start", {
|
|
|
12
12
|
width: 'full',
|
|
13
13
|
variant: 'fill'
|
|
14
14
|
});
|
|
15
|
-
const Select = ({ id, lb, state, onKeyDown, data, referer, keyText = 'names', keyValue = 'id', required = false, readOnly, className, KeyFindItem, size = 'sm', variant }) => {
|
|
15
|
+
const Select = ({ id, lb, state, onKeyDown, data, referer, keyText = 'names', keyValue = 'id', required = false, readOnly, className, KeyFindItem, size = 'sm', variant = 'outline' }) => {
|
|
16
16
|
const [inputs, setInputs] = state;
|
|
17
17
|
const isObject = (item) => typeof item === 'object';
|
|
18
18
|
const _onChange = (evt) => {
|
|
@@ -40,7 +40,7 @@ const Select = ({ id, lb, state, onKeyDown, data, referer, keyText = 'names', ke
|
|
|
40
40
|
lb && React.createElement("label", { htmlFor: id, className: cn(`font-medium text-input-label`) },
|
|
41
41
|
lb,
|
|
42
42
|
":"),
|
|
43
|
-
React.createElement("select", { ref: referer, required: required, disabled: readOnly, title: 'Escoja una Opción', name: id, onKeyDown: onKeyDown, value: inputs?.[id] !== undefined ? inputs[id] : '', onChange: _onChange, className: cn('appearance-none custom cursor-pointer rounded-md h-auto w-full border-1 border-input-border outline-none', classNamesProps({ variant, size })) }, data && data.map((item, index) => (React.createElement("option", { key: index, value: isObject(item) ? item[keyValue] : item, className: 'py-1.5 bg-input-options' }, isObject(item) ? (Array.isArray(keyText) ? `${item[keyText[0]]} - ${item[keyText[1]]}` : item[keyText]) : item))))));
|
|
43
|
+
React.createElement("select", { ref: referer, required: required, disabled: readOnly, title: 'Escoja una Opción', name: id, onKeyDown: onKeyDown, value: inputs?.[id] !== undefined ? inputs[id] : '', onChange: _onChange, className: cn('appearance-none custom cursor-pointer rounded-md h-auto w-full border-1 border-input-border outline-none', classNamesProps({ variant, size })) }, data && data.map((item, index) => (React.createElement("option", { key: index, value: isObject(item) ? item[keyValue] : item, className: cn('py-1.5 border-input-border', variant === 'outline' ? 'dark:bg-black/80' : 'bg-input-options') }, isObject(item) ? (Array.isArray(keyText) ? `${item[keyText[0]]} - ${item[keyText[1]]}` : item[keyText]) : item))))));
|
|
44
44
|
};
|
|
45
45
|
export default memo(Select);
|
|
46
46
|
//# sourceMappingURL=Select.js.map
|
package/dist/forms/Select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/forms/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/forms/Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react-vite';
|
|
2
2
|
import { SelectProps } from './Select.js';
|
|
3
|
+
import React from 'react';
|
|
3
4
|
declare const meta: {
|
|
4
5
|
title: string;
|
|
5
|
-
component:
|
|
6
|
+
component: React.MemoExoticComponent<({ id, lb, state, onKeyDown, data, referer, keyText, keyValue, required, readOnly, className, KeyFindItem, size, variant }: SelectProps) => JSX.Element>;
|
|
6
7
|
parameters: {
|
|
7
8
|
layout: string;
|
|
8
9
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../src/forms/Select.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAe,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../src/forms/Select.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAe,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,IAAI;;;;;;;;;;CAUmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AAIpB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,IAAI,CA2B5C,CAAC;AAKF,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAC,OAAO,IAAI,CAStD,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import Select from './Select.js'; // Sin .js si usas la configuración por defecto de Webpack/Vite
|
|
2
2
|
import { ArgumentsInputs } from '../types/StoriesArguments.js';
|
|
3
|
+
import React from 'react';
|
|
3
4
|
// Configuración general para el componente en Storybook
|
|
4
5
|
const meta = {
|
|
5
6
|
title: 'UI/Forms/Select', // Categoría y nombre en la barra lateral de Storybook
|
|
@@ -15,13 +16,17 @@ const meta = {
|
|
|
15
16
|
export default meta;
|
|
16
17
|
// Historias individuales
|
|
17
18
|
export const SelectText = {
|
|
19
|
+
render: (args) => {
|
|
20
|
+
const [inputs, setInputs] = React.useState({});
|
|
21
|
+
return (React.createElement("div", { className: 'flex gap-3 text-white' },
|
|
22
|
+
React.createElement(Select, { data: args.data, id: "option_id", lb: args.lb, state: [inputs, setInputs], variant: args.variant, size: args.size, readOnly: args.readOnly })));
|
|
23
|
+
},
|
|
18
24
|
args: {
|
|
19
|
-
id: '
|
|
20
|
-
|
|
21
|
-
state: [{
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
variant: 'fill'
|
|
25
|
+
id: 'option_id',
|
|
26
|
+
lb: 'Box Controlado',
|
|
27
|
+
state: [{}],
|
|
28
|
+
readOnly: false,
|
|
29
|
+
data: [{ id: 1, names: "Opcion 1" }, { id: 2, names: "Opcion 2" }, { id: 3, names: "Opcion 3" }]
|
|
25
30
|
},
|
|
26
31
|
};
|
|
27
32
|
export const variantSelectOutline = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.stories.js","sourceRoot":"","sources":["../../src/forms/Select.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,MAAuB,MAAM,aAAa,CAAC,CAAC,+DAA+D;AAClH,OAAO,
|
|
1
|
+
{"version":3,"file":"Select.stories.js","sourceRoot":"","sources":["../../src/forms/Select.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,MAAuB,MAAM,aAAa,CAAC,CAAC,+DAA+D;AAClH,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wDAAwD;AACxD,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,iBAAiB,EAAE,sDAAsD;IAChF,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU,EAAE,oCAAoC;KACzD;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,GAAG,eAAe;KACnB;CAC0B,CAAC;AAE9B,eAAe,IAAI,CAAC;AAGpB,yBAAyB;AACzB,MAAM,CAAC,MAAM,UAAU,GAA0B;IAC/C,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACf,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QAG/C,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,MAAM,IACL,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,WAAW,EACf,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAC1B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CAEE,CACP,CAAC;IACJ,CAAC;IACD,IAAI,EAAE;QACJ,EAAE,EAAE,WAAW;QACf,EAAE,EAAE,gBAAgB;QACpB,KAAK,EAAE,CAAC,EAAE,CAAC;QACX,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;KACjG;CACF,CAAC;AAKF,MAAM,CAAC,MAAM,oBAAoB,GAA0B;IACzD,IAAI,EAAE;QACJ,EAAE,EAAE,EAAE;QACN,KAAK,EAAE,CAAC,EAAE,CAAC;QACX,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;QAChG,EAAE,EAAE,UAAU;QACd,OAAO,EAAE,SAAS;KAEnB;CACF,CAAC"}
|
package/dist/types/global.d.ts
CHANGED
|
@@ -12,6 +12,13 @@ export interface ComponentBase {
|
|
|
12
12
|
tabIndex?: number;
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
}
|
|
15
|
+
export interface ComponentBaseOutline {
|
|
16
|
+
theme?: ThemeComponent;
|
|
17
|
+
size?: SizeComponent;
|
|
18
|
+
className?: string;
|
|
19
|
+
style?: HtmlHTMLAttributes<HTMLDivElement>["style"];
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
}
|
|
15
22
|
export interface ComponentInputBase {
|
|
16
23
|
id: string;
|
|
17
24
|
name?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/types/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAChG,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,SAAS,CAAC;AAGlD,MAAM,WAAW,aAAa;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;
|
|
1
|
+
{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/types/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAChG,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,SAAS,CAAC;AAGlD,MAAM,WAAW,aAAa;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACjC,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAID,MAAM,WAAW,kBAAkB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB"}
|