@clicoh/orion-library 1.2.0-beta.5 → 1.2.0-beta.6
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/01-atoms/Button/Button.d.ts +4 -1
- package/dist/components/01-atoms/Button/Button.d.ts.map +1 -1
- package/dist/components/01-atoms/Button/Button.jsx +16 -2
- package/dist/components/01-atoms/Button/Button.jsx.map +1 -1
- package/dist/components/02-molecules/ImageViewer/ImageViewer.d.ts +24 -4
- package/dist/components/02-molecules/ImageViewer/ImageViewer.d.ts.map +1 -1
- package/dist/components/02-molecules/ImageViewer/ImageViewer.jsx +68 -18
- package/dist/components/02-molecules/ImageViewer/ImageViewer.jsx.map +1 -1
- package/dist/components/02-molecules/Modal/Modal.d.ts +5 -1
- package/dist/components/02-molecules/Modal/Modal.d.ts.map +1 -1
- package/dist/components/02-molecules/Modal/Modal.jsx +4 -2
- package/dist/components/02-molecules/Modal/Modal.jsx.map +1 -1
- package/package.json +1 -1
|
@@ -2,11 +2,13 @@ import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
|
2
2
|
export type ButtonProps = {
|
|
3
3
|
modifier?: ButtonsVariants;
|
|
4
4
|
size?: ButtonSize;
|
|
5
|
+
tone?: ButtonTone;
|
|
5
6
|
iconL?: ReactNode;
|
|
6
7
|
iconR?: ReactNode;
|
|
7
8
|
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
8
9
|
export type ButtonsVariants = 'principal' | 'second' | 'text' | 'action';
|
|
9
10
|
export type ButtonSize = 'md' | 'field' | 'sm';
|
|
11
|
+
export type ButtonTone = 'default' | 'critical';
|
|
10
12
|
/**
|
|
11
13
|
* Represents a button component with different modifiers.
|
|
12
14
|
*
|
|
@@ -18,6 +20,7 @@ export type ButtonSize = 'md' | 'field' | 'sm';
|
|
|
18
20
|
* @param {Object} props - The properties of the Button component.
|
|
19
21
|
* @param {'principal' | 'second' | 'text' | 'action'} [props.modifier='principal'] - The modifier for styling the button.
|
|
20
22
|
* @param {'md' | 'field' | 'sm'} [props.size='md'] - `field` matches the 36px height of `Input`, `Select` and `DatePicker`, for buttons that sit in the same row as form controls. `sm` is the compact button for dense rows (cards, table cells): smaller padding and 12px label. All sizes share the same variants.
|
|
23
|
+
* @param {'default' | 'critical'} [props.tone='default'] - `critical` marks an action that cannot be undone (reject, delete) with the error hue, keeping the shape of the `modifier`. `action` drops its brand gradient and renders like a critical `second`: a brand accent on a destructive action would send two opposite signals.
|
|
21
24
|
* @param {ReactNode} [props.iconL] - The icon to be displayed to the left of the button text.
|
|
22
25
|
* @param {ReactNode} [props.iconR] - The icon to be displayed to the right of the button text.
|
|
23
26
|
* @param {ReactNode} props.children - The content to be displayed inside the button.
|
|
@@ -25,5 +28,5 @@ export type ButtonSize = 'md' | 'field' | 'sm';
|
|
|
25
28
|
*
|
|
26
29
|
* @returns {ReactNode} The rendered Button component.
|
|
27
30
|
*/
|
|
28
|
-
export declare function Button({ modifier, size, iconL, iconR, children, ...restProps }: ButtonProps): ReactNode;
|
|
31
|
+
export declare function Button({ modifier, size, tone, iconL, iconR, children, ...restProps }: ButtonProps): ReactNode;
|
|
29
32
|
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;AAmHhD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAsB,EACtB,IAAW,EACX,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,WAAW,GAAG,SAAS,CAuBzB"}
|
|
@@ -31,6 +31,18 @@ const styleMap = {
|
|
|
31
31
|
text: clsx('underline', 'text-black', 'disabled:text-gray-3', 'active:text-gray-1', 'not-disabled:hover:before:bg-gray-5', 'not-disabled:hover:after:bg-gray-5', 'dark:active:text-gray-7 dark:disabled:text-gray-2 dark:text-white', 'dark:not-disabled:hover:before:bg-gray-1', 'dark:not-disabled:hover:after:bg-gray-1'),
|
|
32
32
|
action: clsx('disabled:text-gray-3 not-disabled:active:text-gray-5 text-black not-disabled:hover:text-white [&:not(:disabled):not(:hover)]:focus:text-black', '[&:not(:disabled):not(:hover)]:focus:before:bg-gray-5 before:bg-white not-disabled:hover:before:bg-black not-disabled:active:before:bg-black disabled:before:bg-white', 'after:bg-clicoh disabled:after:bg-gray-3 not-disabled:hover:after:bg-black not-disabled:hover:after:bg-none not-disabled:active:after:bg-black not-disabled:active:after:bg-none disabled:after:bg-none', 'dark:disabled:text-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:text-gray-5 dark:text-white dark:not-disabled:hover:text-black dark:not-disabled:active:text-black', 'dark:not-disabled:active:before:bg-gray-5 dark:before:bg-black dark:not-disabled:hover:before:bg-white dark:disabled:before:bg-black dark:[&:not(:disabled):not(:hover)]:focus:before:bg-black', 'dark:after:bg-clicoh dark:disabled:after:bg-gray-2 dark:not-disabled:active:after:bg-gray-5 dark:not-disabled:hover:after:bg-white dark:not-disabled:hover:after:bg-none dark:not-disabled:active:after:bg-none dark:disabled:after:bg-none'),
|
|
33
33
|
};
|
|
34
|
+
/**
|
|
35
|
+
* El texto rojo usa `error-strong`: `error` queda por debajo de 4.5:1 sobre
|
|
36
|
+
* blanco. Los rellenos con texto blanco usan `error-strong` tambien en dark por
|
|
37
|
+
* la misma razon; el texto sobre fondo oscuro sigue la regla de `-dark`.
|
|
38
|
+
*/
|
|
39
|
+
const criticalOutline = clsx('text-error-strong disabled:text-gray-3 [&:not(:disabled):not(:hover)]:focus:text-error-strong not-disabled:hover:text-white not-disabled:active:text-white', 'not-disabled:hover:before:bg-error-strong not-disabled:active:before:bg-error-strong [&:not(:disabled):not(:hover)]:focus:before:bg-error-1 before:bg-white disabled:before:bg-white', 'after:bg-error-strong disabled:after:bg-gray-3 not-disabled:hover:after:bg-error-strong not-disabled:active:after:bg-error-strong [&:not(:disabled):not(:hover)]:focus:after:bg-error-strong', 'dark:text-error-dark dark:disabled:text-gray-2 dark:[&:not(:disabled):not(:hover)]:focus:text-error-dark dark:not-disabled:hover:text-white dark:not-disabled:active:text-white', 'dark:not-disabled:hover:before:bg-error-strong dark:not-disabled:active:before:bg-error-strong dark:[&:not(:disabled):not(:hover)]:focus:before:bg-error-dark-1 dark:before:bg-black dark:disabled:before:bg-black', 'dark:after:bg-error-dark dark:disabled:after:bg-gray-2 dark:not-disabled:hover:after:bg-error-strong dark:not-disabled:active:after:bg-error-strong dark:[&:not(:disabled):not(:hover)]:focus:after:bg-error-dark');
|
|
40
|
+
const criticalStyleMap = {
|
|
41
|
+
principal: clsx('not-disabled:hover:text-error-strong not-disabled:active:text-error-strong text-white disabled:text-white [&:not(:disabled):not(:hover)]:focus:text-white', 'before:bg-error-strong not-disabled:active:before:bg-error-1 disabled:before:bg-gray-3 [&:not(:disabled):not(:hover)]:focus:before:bg-error-strong not-disabled:hover:before:bg-white', 'after:bg-error-strong not-disabled:hover:after:bg-error-strong not-disabled:active:after:bg-error-strong disabled:after:bg-gray-3 [&:not(:disabled):not(:hover)]:focus:after:bg-clicoh', 'dark:not-disabled:hover:text-error-dark dark:not-disabled:active:text-error-dark dark:text-white dark:disabled:text-white dark:[&:not(:disabled):not(:hover)]:focus:text-white', 'dark:before:bg-error-strong dark:not-disabled:active:before:bg-error-dark-1 dark:disabled:before:bg-gray-1 dark:[&:not(:disabled):not(:hover)]:focus:before:bg-error-strong dark:not-disabled:hover:before:bg-black', 'dark:after:bg-error-strong dark:not-disabled:hover:after:bg-error-dark dark:not-disabled:active:after:bg-error-dark dark:disabled:after:bg-gray-1 dark:[&:not(:disabled):not(:hover)]:focus:after:bg-clicoh'),
|
|
42
|
+
second: criticalOutline,
|
|
43
|
+
text: clsx('underline', 'text-error-strong', 'disabled:text-gray-3', 'active:text-error', 'not-disabled:hover:before:bg-error-1', 'not-disabled:hover:after:bg-error-1', 'dark:text-error-dark dark:disabled:text-gray-2 dark:active:text-error-dark dark:not-disabled:hover:text-white', 'dark:not-disabled:hover:before:bg-error-dark-1', 'dark:not-disabled:hover:after:bg-error-dark-1'),
|
|
44
|
+
action: criticalOutline,
|
|
45
|
+
};
|
|
34
46
|
/**
|
|
35
47
|
* Represents a button component with different modifiers.
|
|
36
48
|
*
|
|
@@ -42,6 +54,7 @@ const styleMap = {
|
|
|
42
54
|
* @param {Object} props - The properties of the Button component.
|
|
43
55
|
* @param {'principal' | 'second' | 'text' | 'action'} [props.modifier='principal'] - The modifier for styling the button.
|
|
44
56
|
* @param {'md' | 'field' | 'sm'} [props.size='md'] - `field` matches the 36px height of `Input`, `Select` and `DatePicker`, for buttons that sit in the same row as form controls. `sm` is the compact button for dense rows (cards, table cells): smaller padding and 12px label. All sizes share the same variants.
|
|
57
|
+
* @param {'default' | 'critical'} [props.tone='default'] - `critical` marks an action that cannot be undone (reject, delete) with the error hue, keeping the shape of the `modifier`. `action` drops its brand gradient and renders like a critical `second`: a brand accent on a destructive action would send two opposite signals.
|
|
45
58
|
* @param {ReactNode} [props.iconL] - The icon to be displayed to the left of the button text.
|
|
46
59
|
* @param {ReactNode} [props.iconR] - The icon to be displayed to the right of the button text.
|
|
47
60
|
* @param {ReactNode} props.children - The content to be displayed inside the button.
|
|
@@ -49,9 +62,10 @@ const styleMap = {
|
|
|
49
62
|
*
|
|
50
63
|
* @returns {ReactNode} The rendered Button component.
|
|
51
64
|
*/
|
|
52
|
-
export function Button({ modifier = 'principal', size = 'md', iconL, iconR, children, ...restProps }) {
|
|
65
|
+
export function Button({ modifier = 'principal', size = 'md', tone = 'default', iconL, iconR, children, ...restProps }) {
|
|
53
66
|
const sizing = sizeMap[size];
|
|
54
|
-
const
|
|
67
|
+
const variantStyles = tone === 'critical' ? criticalStyleMap : styleMap;
|
|
68
|
+
const className = clsx('relative isolate flex items-center justify-center text-center font-semibold', 'rounded-3xl border-2 border-transparent transition-colors', 'before:absolute before:inset-0 before:-z-10 before:block before:rounded-3xl before:transition-colors', 'after:absolute after:-inset-[2px] after:-z-20 after:block after:rounded-3xl after:transition-colors', sizing.base, iconL ? sizing.iconPadL : sizing.padL, iconR ? sizing.iconPadR : sizing.padR, variantStyles[modifier], restProps.className);
|
|
55
69
|
return (<button {...restProps} className={className}>
|
|
56
70
|
{!!iconL && <span className={clsx('pr-2', sizing.icon)}>{iconL}</span>}
|
|
57
71
|
<span>{children}</span>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ export type TImageView = {
|
|
|
4
4
|
label: string;
|
|
5
5
|
src: string;
|
|
6
6
|
alt: string;
|
|
7
|
+
indicator?: ReactNode;
|
|
7
8
|
};
|
|
8
9
|
export type TImageViewerLabels = {
|
|
9
10
|
zoomIn: string;
|
|
@@ -17,25 +18,42 @@ type ImageViewerProps = {
|
|
|
17
18
|
labels: TImageViewerLabels;
|
|
18
19
|
title?: ReactNode;
|
|
19
20
|
emptyState?: ReactNode;
|
|
21
|
+
activeId?: string;
|
|
22
|
+
onViewChange?: (id: string) => void;
|
|
20
23
|
} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'>;
|
|
21
24
|
/**
|
|
22
25
|
* ImageViewer component for inspecting one or more images of the same subject.
|
|
23
26
|
*
|
|
24
27
|
* Each view is a tab, so a subject photographed from several angles reads as one
|
|
25
|
-
* piece instead of a gallery. Zoom and rotation reset
|
|
28
|
+
* piece instead of a gallery. Zoom and rotation reset whenever the active view
|
|
29
|
+
* changes, whether the user picked a tab or the consumer moved `activeId`: a
|
|
26
30
|
* transform that made sense for one angle rarely makes sense for the next.
|
|
27
31
|
*
|
|
32
|
+
* Uncontrolled by default. Passing `activeId` makes the consumer own the active
|
|
33
|
+
* view, so something outside the viewer (a side panel, a "next pending" action)
|
|
34
|
+
* can follow or drive it; `onViewChange` reports tab picks in both modes.
|
|
35
|
+
*
|
|
28
36
|
* Renders `emptyState` while `views` is empty, and disables the toolbar with it,
|
|
29
37
|
* so the frame keeps its size instead of collapsing.
|
|
30
38
|
*
|
|
31
39
|
* @component
|
|
32
40
|
* @example
|
|
41
|
+
* const [viewId, setViewId] = useState('front');
|
|
42
|
+
*
|
|
33
43
|
* <ImageViewer
|
|
34
44
|
* title="Identity document"
|
|
35
45
|
* views={[
|
|
36
46
|
* { id: 'front', label: 'Front', src: '/front.jpg', alt: 'Document front' },
|
|
37
|
-
* {
|
|
47
|
+
* {
|
|
48
|
+
* id: 'back',
|
|
49
|
+
* label: 'Back',
|
|
50
|
+
* src: '/back.jpg',
|
|
51
|
+
* alt: 'Document back',
|
|
52
|
+
* indicator: <FiAlertTriangle role="img" aria-label="Needs review" />,
|
|
53
|
+
* },
|
|
38
54
|
* ]}
|
|
55
|
+
* activeId={viewId}
|
|
56
|
+
* onViewChange={setViewId}
|
|
39
57
|
* labels={{
|
|
40
58
|
* zoomIn: 'Zoom in',
|
|
41
59
|
* zoomOut: 'Zoom out',
|
|
@@ -47,14 +65,16 @@ type ImageViewerProps = {
|
|
|
47
65
|
* />
|
|
48
66
|
*
|
|
49
67
|
* @param {Object} props - The properties of the ImageViewer component.
|
|
50
|
-
* @param {TImageView[]} props.views - Images to display. More than one renders a tab per view.
|
|
68
|
+
* @param {TImageView[]} props.views - Images to display. More than one renders a tab per view. A view's optional `indicator` sits after its tab label and becomes part of the tab's accessible name, so give it its own (for an icon, `role="img"` and `aria-label`). With a single view there are no tabs, so no indicator is shown.
|
|
51
69
|
* @param {TImageViewerLabels} props.labels - Accessible names of the toolbar actions.
|
|
52
70
|
* @param {ReactNode} [props.title] - Optional heading rendered on the left of the toolbar.
|
|
53
71
|
* @param {ReactNode} [props.emptyState] - Content rendered when there is no image.
|
|
72
|
+
* @param {string} [props.activeId] - Id of the view to show. Makes the viewer controlled; an id that matches no view falls back to the first one.
|
|
73
|
+
* @param {(id: string) => void} [props.onViewChange] - Called with the id of the tab the user picks, only when it differs from the active one.
|
|
54
74
|
* @param {HTMLAttributes<HTMLElement>} [props.restProps] - Additional attributes for the root element.
|
|
55
75
|
*
|
|
56
76
|
* @returns {ReactNode} The rendered ImageViewer component.
|
|
57
77
|
*/
|
|
58
|
-
export declare function ImageViewer({ views, labels, title, emptyState, ...restProps }: ImageViewerProps): ReactNode;
|
|
78
|
+
export declare function ImageViewer({ views, labels, title, emptyState, activeId, onViewChange, ...restProps }: ImageViewerProps): ReactNode;
|
|
59
79
|
export {};
|
|
60
80
|
//# sourceMappingURL=ImageViewer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageViewer.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/ImageViewer/ImageViewer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"ImageViewer.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/ImageViewer/ImageViewer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;AAiB5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,KAAK,EACL,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,SAAS,CAqN9B"}
|
|
@@ -11,25 +11,41 @@ const MAX_ZOOM = 3;
|
|
|
11
11
|
const ZOOM_STEP = 0.5;
|
|
12
12
|
const QUARTER_TURN = 90;
|
|
13
13
|
const FULL_TURN = 360;
|
|
14
|
+
const INITIAL_TRANSFORM = { zoom: MIN_ZOOM, rotation: 0 };
|
|
14
15
|
const TOOL_CLASSNAME = 'hover:bg-gray-5 focus-visible:ring-lavender disabled:text-gray-3 dark:disabled:text-gray-1 dark:hover:bg-gray-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm text-lg text-black focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:hover:bg-transparent dark:text-white';
|
|
15
16
|
/**
|
|
16
17
|
* ImageViewer component for inspecting one or more images of the same subject.
|
|
17
18
|
*
|
|
18
19
|
* Each view is a tab, so a subject photographed from several angles reads as one
|
|
19
|
-
* piece instead of a gallery. Zoom and rotation reset
|
|
20
|
+
* piece instead of a gallery. Zoom and rotation reset whenever the active view
|
|
21
|
+
* changes, whether the user picked a tab or the consumer moved `activeId`: a
|
|
20
22
|
* transform that made sense for one angle rarely makes sense for the next.
|
|
21
23
|
*
|
|
24
|
+
* Uncontrolled by default. Passing `activeId` makes the consumer own the active
|
|
25
|
+
* view, so something outside the viewer (a side panel, a "next pending" action)
|
|
26
|
+
* can follow or drive it; `onViewChange` reports tab picks in both modes.
|
|
27
|
+
*
|
|
22
28
|
* Renders `emptyState` while `views` is empty, and disables the toolbar with it,
|
|
23
29
|
* so the frame keeps its size instead of collapsing.
|
|
24
30
|
*
|
|
25
31
|
* @component
|
|
26
32
|
* @example
|
|
33
|
+
* const [viewId, setViewId] = useState('front');
|
|
34
|
+
*
|
|
27
35
|
* <ImageViewer
|
|
28
36
|
* title="Identity document"
|
|
29
37
|
* views={[
|
|
30
38
|
* { id: 'front', label: 'Front', src: '/front.jpg', alt: 'Document front' },
|
|
31
|
-
* {
|
|
39
|
+
* {
|
|
40
|
+
* id: 'back',
|
|
41
|
+
* label: 'Back',
|
|
42
|
+
* src: '/back.jpg',
|
|
43
|
+
* alt: 'Document back',
|
|
44
|
+
* indicator: <FiAlertTriangle role="img" aria-label="Needs review" />,
|
|
45
|
+
* },
|
|
32
46
|
* ]}
|
|
47
|
+
* activeId={viewId}
|
|
48
|
+
* onViewChange={setViewId}
|
|
33
49
|
* labels={{
|
|
34
50
|
* zoomIn: 'Zoom in',
|
|
35
51
|
* zoomOut: 'Zoom out',
|
|
@@ -41,18 +57,19 @@ const TOOL_CLASSNAME = 'hover:bg-gray-5 focus-visible:ring-lavender disabled:tex
|
|
|
41
57
|
* />
|
|
42
58
|
*
|
|
43
59
|
* @param {Object} props - The properties of the ImageViewer component.
|
|
44
|
-
* @param {TImageView[]} props.views - Images to display. More than one renders a tab per view.
|
|
60
|
+
* @param {TImageView[]} props.views - Images to display. More than one renders a tab per view. A view's optional `indicator` sits after its tab label and becomes part of the tab's accessible name, so give it its own (for an icon, `role="img"` and `aria-label`). With a single view there are no tabs, so no indicator is shown.
|
|
45
61
|
* @param {TImageViewerLabels} props.labels - Accessible names of the toolbar actions.
|
|
46
62
|
* @param {ReactNode} [props.title] - Optional heading rendered on the left of the toolbar.
|
|
47
63
|
* @param {ReactNode} [props.emptyState] - Content rendered when there is no image.
|
|
64
|
+
* @param {string} [props.activeId] - Id of the view to show. Makes the viewer controlled; an id that matches no view falls back to the first one.
|
|
65
|
+
* @param {(id: string) => void} [props.onViewChange] - Called with the id of the tab the user picks, only when it differs from the active one.
|
|
48
66
|
* @param {HTMLAttributes<HTMLElement>} [props.restProps] - Additional attributes for the root element.
|
|
49
67
|
*
|
|
50
68
|
* @returns {ReactNode} The rendered ImageViewer component.
|
|
51
69
|
*/
|
|
52
|
-
export function ImageViewer({ views, labels, title, emptyState, ...restProps }) {
|
|
53
|
-
const [
|
|
54
|
-
const [
|
|
55
|
-
const [rotation, setRotation] = useState(0);
|
|
70
|
+
export function ImageViewer({ views, labels, title, emptyState, activeId, onViewChange, ...restProps }) {
|
|
71
|
+
const [internalIndex, setInternalIndex] = useState(0);
|
|
72
|
+
const [transform, setTransform] = useState(INITIAL_TRANSFORM);
|
|
56
73
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
57
74
|
const generatedId = useId();
|
|
58
75
|
/**
|
|
@@ -62,9 +79,8 @@ export function ImageViewer({ views, labels, title, emptyState, ...restProps })
|
|
|
62
79
|
*/
|
|
63
80
|
const viewsSignature = views.map(({ id }) => id).join('|');
|
|
64
81
|
useEffect(() => {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
setRotation(0);
|
|
82
|
+
setInternalIndex(0);
|
|
83
|
+
setTransform(INITIAL_TRANSFORM);
|
|
68
84
|
}, [viewsSignature]);
|
|
69
85
|
useEffect(() => {
|
|
70
86
|
if (!isFullscreen)
|
|
@@ -76,12 +92,32 @@ export function ImageViewer({ views, labels, title, emptyState, ...restProps })
|
|
|
76
92
|
document.addEventListener('keydown', handleKeyDown);
|
|
77
93
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
78
94
|
}, [isFullscreen]);
|
|
95
|
+
const isControlled = activeId !== undefined;
|
|
96
|
+
const activeIndex = isControlled
|
|
97
|
+
? Math.max(views.findIndex(({ id }) => id === activeId), 0)
|
|
98
|
+
: internalIndex;
|
|
79
99
|
const activeView = views[activeIndex] ?? views[0];
|
|
80
100
|
const hasImage = Boolean(activeView);
|
|
101
|
+
const { zoom, rotation } = transform;
|
|
102
|
+
/**
|
|
103
|
+
* En modo controlado la vista puede cambiar sin pasar por `selectView`, asi
|
|
104
|
+
* que el reinicio se ata a la vista activa y no al clic. Guardar el zoom por
|
|
105
|
+
* id no alcanza: al volver a una vista reapareceria el zoom que tenia.
|
|
106
|
+
*/
|
|
107
|
+
const [transformViewId, setTransformViewId] = useState(activeView?.id);
|
|
108
|
+
if (activeView?.id !== transformViewId) {
|
|
109
|
+
setTransformViewId(activeView?.id);
|
|
110
|
+
setTransform(INITIAL_TRANSFORM);
|
|
111
|
+
}
|
|
81
112
|
const selectView = (index) => {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
113
|
+
const view = views[index];
|
|
114
|
+
if (!view)
|
|
115
|
+
return;
|
|
116
|
+
setTransform(INITIAL_TRANSFORM);
|
|
117
|
+
if (!isControlled)
|
|
118
|
+
setInternalIndex(index);
|
|
119
|
+
if (view.id !== activeView?.id)
|
|
120
|
+
onViewChange?.(view.id);
|
|
85
121
|
};
|
|
86
122
|
const frame = (<section {...restProps} className={clsx('border-gray-5 dark:border-gray-1 flex min-h-0 flex-col overflow-hidden rounded-lg border', isFullscreen ? 'h-full w-full bg-white dark:bg-black' : undefined, !isFullscreen ? restProps.className : undefined)}>
|
|
87
123
|
<div className="border-gray-5 bg-gray-6 dark:border-gray-1 dark:bg-black-1 flex flex-none items-center justify-between gap-4 border-b px-4 py-3">
|
|
@@ -93,13 +129,22 @@ export function ImageViewer({ views, labels, title, emptyState, ...restProps })
|
|
|
93
129
|
</Show.When>
|
|
94
130
|
</Show>
|
|
95
131
|
<div className="ml-auto flex items-center gap-1.5">
|
|
96
|
-
<button type="button" aria-label={labels.zoomOut} disabled={!hasImage || zoom <= MIN_ZOOM} onClick={() =>
|
|
132
|
+
<button type="button" aria-label={labels.zoomOut} disabled={!hasImage || zoom <= MIN_ZOOM} onClick={() => setTransform((current) => ({
|
|
133
|
+
...current,
|
|
134
|
+
zoom: current.zoom - ZOOM_STEP,
|
|
135
|
+
}))} className={TOOL_CLASSNAME}>
|
|
97
136
|
<MdZoomOut aria-hidden="true"/>
|
|
98
137
|
</button>
|
|
99
|
-
<button type="button" aria-label={labels.zoomIn} disabled={!hasImage || zoom >= MAX_ZOOM} onClick={() =>
|
|
138
|
+
<button type="button" aria-label={labels.zoomIn} disabled={!hasImage || zoom >= MAX_ZOOM} onClick={() => setTransform((current) => ({
|
|
139
|
+
...current,
|
|
140
|
+
zoom: current.zoom + ZOOM_STEP,
|
|
141
|
+
}))} className={TOOL_CLASSNAME}>
|
|
100
142
|
<MdZoomIn aria-hidden="true"/>
|
|
101
143
|
</button>
|
|
102
|
-
<button type="button" aria-label={labels.rotate} disabled={!hasImage} onClick={() =>
|
|
144
|
+
<button type="button" aria-label={labels.rotate} disabled={!hasImage} onClick={() => setTransform((current) => ({
|
|
145
|
+
...current,
|
|
146
|
+
rotation: (current.rotation + QUARTER_TURN) % FULL_TURN,
|
|
147
|
+
}))} className={TOOL_CLASSNAME}>
|
|
103
148
|
<MdRotateRight aria-hidden="true"/>
|
|
104
149
|
</button>
|
|
105
150
|
<button type="button" aria-label={isFullscreen ? labels.exitFullscreen : labels.enterFullscreen} aria-pressed={isFullscreen} disabled={!hasImage} onClick={() => setIsFullscreen((current) => !current)} className={TOOL_CLASSNAME}>
|
|
@@ -111,9 +156,14 @@ export function ImageViewer({ views, labels, title, emptyState, ...restProps })
|
|
|
111
156
|
<Show>
|
|
112
157
|
<Show.When isTrue={views.length > 1}>
|
|
113
158
|
<List role="tablist" aria-orientation="horizontal" orientation="horizontal" className="border-gray-5 dark:border-gray-1 flex-none items-end gap-6 border-b px-4">
|
|
114
|
-
<Each of={views} render={({ id, label }, index) => (<li key={id} role="presentation">
|
|
159
|
+
<Each of={views} render={({ id, label, indicator }, index) => (<li key={id} role="presentation">
|
|
115
160
|
<TabItem id={`${generatedId}-tab-${index}`} aria-controls={`${generatedId}-panel`} aria-selected={index === activeIndex} tabIndex={index === activeIndex ? 0 : -1} isActive={index === activeIndex} onClick={() => selectView(index)} className="pb-2">
|
|
116
|
-
|
|
161
|
+
<span className="inline-flex items-center gap-1.5">
|
|
162
|
+
{label}
|
|
163
|
+
{!!indicator && (<span className="flex flex-none items-center">
|
|
164
|
+
{indicator}
|
|
165
|
+
</span>)}
|
|
166
|
+
</span>
|
|
117
167
|
</TabItem>
|
|
118
168
|
</li>)}/>
|
|
119
169
|
</List>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageViewer.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/ImageViewer/ImageViewer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EACL,SAAS,EACT,KAAK,EACL,QAAQ,GAGT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACb,QAAQ,EACR,SAAS,GACV,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"ImageViewer.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/ImageViewer/ImageViewer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { type ReactNode, type RefObject } from 'react';
|
|
1
|
+
import { type ComponentProps, type ReactNode, type RefObject } from 'react';
|
|
2
|
+
import { Button } from '../../01-atoms';
|
|
2
3
|
type ModalProps = {
|
|
3
4
|
header: string | ReactNode;
|
|
4
5
|
subHeader?: string | ReactNode;
|
|
@@ -16,6 +17,7 @@ export type TButton = {
|
|
|
16
17
|
text: string;
|
|
17
18
|
callback: (close: (closeAction: () => void) => void) => void;
|
|
18
19
|
disabled?: boolean;
|
|
20
|
+
tone?: ComponentProps<typeof Button>['tone'];
|
|
19
21
|
};
|
|
20
22
|
type ModalRef = {
|
|
21
23
|
handlerClose: (callback: TButton['callback']) => void;
|
|
@@ -43,10 +45,12 @@ type ModalRef = {
|
|
|
43
45
|
* @param {Object} [props.confirmButton] - Configuration for the confirm button.
|
|
44
46
|
* @param {Function} props.confirmButton.callback - Callback function triggered on confirm.
|
|
45
47
|
* @param {boolean} [props.confirmButton.disabled] - Whether the confirm button is disabled.
|
|
48
|
+
* @param {'default' | 'critical'} [props.confirmButton.tone='default'] - `critical` for a confirmation that cannot be undone (reject, delete).
|
|
46
49
|
* @param {Object} [props.cancelButton] - Configuration for the cancel button.
|
|
47
50
|
* @param {string} props.cancelButton.text - Text displayed on the cancel button.
|
|
48
51
|
* @param {Function} props.cancelButton.callback - Callback function triggered on cancel.
|
|
49
52
|
* @param {boolean} [props.cancelButton.disabled] - Whether the cancel button is disabled.
|
|
53
|
+
* @param {'default' | 'critical'} [props.cancelButton.tone='default'] - Tone of the cancel button, same values as the confirm one.
|
|
50
54
|
* @param {'base' | 'lg' | 'xl'} [props.size='base'] - The size of the modal.
|
|
51
55
|
* @param {string} props.classHeader - Class header.
|
|
52
56
|
* @param {Function} [props.handleCloseIcon] - Handle close icon close
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAGnB,KAAK,SAAS,EACd,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,MAAM,EAAa,MAAM,gBAAgB,CAAC;AAGnD,KAAK,UAAU,GAAG;IAChB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5B,eAAe,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,WAAW,EAAE,MAAM,IAAI,KAAK,IAAI,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9C,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,YAAY,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CACvD,CAAC;AAKF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,KAAK,iGAqJhB,CAAC"}
|
|
@@ -29,10 +29,12 @@ const leavingClasses = 'ease-in duration-200 opacity-75';
|
|
|
29
29
|
* @param {Object} [props.confirmButton] - Configuration for the confirm button.
|
|
30
30
|
* @param {Function} props.confirmButton.callback - Callback function triggered on confirm.
|
|
31
31
|
* @param {boolean} [props.confirmButton.disabled] - Whether the confirm button is disabled.
|
|
32
|
+
* @param {'default' | 'critical'} [props.confirmButton.tone='default'] - `critical` for a confirmation that cannot be undone (reject, delete).
|
|
32
33
|
* @param {Object} [props.cancelButton] - Configuration for the cancel button.
|
|
33
34
|
* @param {string} props.cancelButton.text - Text displayed on the cancel button.
|
|
34
35
|
* @param {Function} props.cancelButton.callback - Callback function triggered on cancel.
|
|
35
36
|
* @param {boolean} [props.cancelButton.disabled] - Whether the cancel button is disabled.
|
|
37
|
+
* @param {'default' | 'critical'} [props.cancelButton.tone='default'] - Tone of the cancel button, same values as the confirm one.
|
|
36
38
|
* @param {'base' | 'lg' | 'xl'} [props.size='base'] - The size of the modal.
|
|
37
39
|
* @param {string} props.classHeader - Class header.
|
|
38
40
|
* @param {Function} [props.handleCloseIcon] - Handle close icon close
|
|
@@ -100,10 +102,10 @@ export const Modal = forwardRef(function ({ header, subHeader, children, confirm
|
|
|
100
102
|
{children}
|
|
101
103
|
</div>
|
|
102
104
|
{!!(cancelButton || confirmButton) && (<div className="flex flex-col-reverse justify-end gap-2 px-6 py-4 sm:flex-row">
|
|
103
|
-
{!!cancelButton && (<Button modifier="text" onClick={() => handlerClose(cancelButton.callback)} disabled={cancelButton.disabled}>
|
|
105
|
+
{!!cancelButton && (<Button modifier="text" tone={cancelButton.tone} onClick={() => handlerClose(cancelButton.callback)} disabled={cancelButton.disabled}>
|
|
104
106
|
{cancelButton.text}
|
|
105
107
|
</Button>)}
|
|
106
|
-
{!!confirmButton && (<Button onClick={() => handlerClose(confirmButton.callback)} disabled={confirmButton.disabled}>
|
|
108
|
+
{!!confirmButton && (<Button tone={confirmButton.tone} onClick={() => handlerClose(confirmButton.callback)} disabled={confirmButton.disabled}>
|
|
107
109
|
{confirmButton.text}
|
|
108
110
|
</Button>)}
|
|
109
111
|
</div>)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,
|
|
1
|
+
{"version":3,"file":"Modal.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Modal/Modal.tsx"],"names":[],"mappings":"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"}
|