@alveole/components 0.32.2 → 0.33.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/stories/index.d.ts +1 -0
  2. package/dist/stories/index.d.ts.map +1 -1
  3. package/dist/stories/index.js +1 -0
  4. package/dist/ui/DocumentViewer/DocumentViewer.d.ts +11 -0
  5. package/dist/ui/DocumentViewer/DocumentViewer.d.ts.map +1 -0
  6. package/dist/ui/DocumentViewer/DocumentViewer.js +48 -0
  7. package/dist/ui/DocumentViewer/DocumentViewer.stories.d.ts +143 -0
  8. package/dist/ui/DocumentViewer/DocumentViewer.stories.d.ts.map +1 -0
  9. package/dist/ui/DocumentViewer/DocumentViewer.stories.js +16 -0
  10. package/dist/ui/DocumentViewer/DocumentViewer.styles.d.ts +131 -0
  11. package/dist/ui/DocumentViewer/DocumentViewer.styles.d.ts.map +1 -0
  12. package/dist/ui/DocumentViewer/DocumentViewer.styles.js +125 -0
  13. package/dist/ui/DocumentViewer/DocumentViewerImage.d.ts +9 -0
  14. package/dist/ui/DocumentViewer/DocumentViewerImage.d.ts.map +1 -0
  15. package/dist/ui/DocumentViewer/DocumentViewerImage.js +35 -0
  16. package/dist/ui/DocumentViewer/DocumentViewerPDF.d.ts +13 -0
  17. package/dist/ui/DocumentViewer/DocumentViewerPDF.d.ts.map +1 -0
  18. package/dist/ui/DocumentViewer/DocumentViewerPDF.js +131 -0
  19. package/dist/ui/DocumentViewer/DocumentViewerToolbar.d.ts +18 -0
  20. package/dist/ui/DocumentViewer/DocumentViewerToolbar.d.ts.map +1 -0
  21. package/dist/ui/DocumentViewer/DocumentViewerToolbar.js +16 -0
  22. package/dist/ui/DocumentViewer/DocumentViewerToolbarButton.d.ts +9 -0
  23. package/dist/ui/DocumentViewer/DocumentViewerToolbarButton.d.ts.map +1 -0
  24. package/dist/ui/DocumentViewer/DocumentViewerToolbarButton.js +6 -0
  25. package/dist/ui/DocumentViewer/index.d.ts +2 -0
  26. package/dist/ui/DocumentViewer/index.d.ts.map +1 -0
  27. package/dist/ui/DocumentViewer/index.js +1 -0
  28. package/dist/ui/index.d.ts +1 -0
  29. package/dist/ui/index.d.ts.map +1 -1
  30. package/dist/ui/index.js +1 -0
  31. package/package.json +2 -1
@@ -16,6 +16,7 @@ export * as BreadcrumbsStory from '../ui/Breadcrumbs/Breadcrumbs.stories';
16
16
  export * as ButtonStory from '../ui/Button/Button.stories';
17
17
  export * as CardStory from '../ui/Card/Card.stories';
18
18
  export * as DividerStory from '../ui/Divider/Divider.stories';
19
+ export * as DocumentViewerStory from '../ui/DocumentViewer/DocumentViewer.stories';
19
20
  export * as EmptyStateStory from '../ui/EmptyState/EmptyState.stories';
20
21
  export * as ListItemStory from '../ui/ListItem/ListItem.stories';
21
22
  export * as LucideIconStory from '../ui/LucideIcon/LucideIcon.stories';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAC1D,OAAO,KAAK,WAAW,MAAM,+BAA+B,CAAC;AAC7D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,aAAa,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,cAAc,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAChE,OAAO,KAAK,eAAe,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAGhE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,aAAa,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,iBAAiB,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,qBAAqB,MAAM,iDAAiD,CAAC;AACzF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAC1D,OAAO,KAAK,WAAW,MAAM,+BAA+B,CAAC;AAC7D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,aAAa,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,cAAc,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAChE,OAAO,KAAK,eAAe,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAGhE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,mBAAmB,MAAM,6CAA6C,CAAC;AACnF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,aAAa,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,iBAAiB,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,qBAAqB,MAAM,iDAAiD,CAAC;AACzF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC"}
@@ -18,6 +18,7 @@ export * as BreadcrumbsStory from '../ui/Breadcrumbs/Breadcrumbs.stories';
18
18
  export * as ButtonStory from '../ui/Button/Button.stories';
19
19
  export * as CardStory from '../ui/Card/Card.stories';
20
20
  export * as DividerStory from '../ui/Divider/Divider.stories';
21
+ export * as DocumentViewerStory from '../ui/DocumentViewer/DocumentViewer.stories';
21
22
  export * as EmptyStateStory from '../ui/EmptyState/EmptyState.stories';
22
23
  export * as ListItemStory from '../ui/ListItem/ListItem.stories';
23
24
  export * as LucideIconStory from '../ui/LucideIcon/LucideIcon.stories';
@@ -0,0 +1,11 @@
1
+ import { type BoxProps } from '@alveole/components';
2
+ export type DocumentViewerRotation = 0 | 90 | 180 | 270;
3
+ export declare const isDocumentViewerRotation: (value: number) => value is DocumentViewerRotation;
4
+ export type DocumentViewerProps = BoxProps & {
5
+ type: 'image' | 'pdf';
6
+ title: string;
7
+ source: string;
8
+ height: number;
9
+ };
10
+ export declare const DocumentViewer: (props: DocumentViewerProps) => import("react/jsx-runtime").JSX.Element;
11
+ //# sourceMappingURL=DocumentViewer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocumentViewer.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAOzD,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;AACxD,eAAO,MAAM,wBAAwB,GAAI,OAAO,MAAM,KAAG,KAAK,IAAI,sBAC/B,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG;IAC3C,IAAI,EAAE,OAAO,GAAG,KAAK,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,4CAsFxD,CAAC"}
@@ -0,0 +1,48 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Box } from '@alveole/components';
3
+ import React from 'react';
4
+ import { useStyles } from './DocumentViewer.styles';
5
+ import { DocumentViewerImage } from './DocumentViewerImage';
6
+ import { DocumentViewerPDF } from './DocumentViewerPDF';
7
+ import { DocumentViewerToolbar } from './DocumentViewerToolbar';
8
+ export const isDocumentViewerRotation = (value) => [0, 90, 180, 270].includes(value);
9
+ export const DocumentViewer = (props) => {
10
+ const { children, title, source, type, height, ...boxProps } = props;
11
+ const styles = useStyles();
12
+ const [rotation, setRotation] = React.useState(0);
13
+ const [page, setPage] = React.useState(1);
14
+ const [totalPages, setTotalPages] = React.useState(type === 'image' ? 1 : 1);
15
+ const state = React.useMemo(() => {
16
+ return {
17
+ fileType: type,
18
+ rotation,
19
+ page,
20
+ totalPages,
21
+ };
22
+ }, [type, rotation, page, totalPages]);
23
+ const handleRotate = React.useCallback((direction) => {
24
+ let newRotation = direction === 'right' ? rotation + 90 : rotation - 90;
25
+ if (newRotation < 0)
26
+ newRotation = 270;
27
+ if (newRotation > 270)
28
+ newRotation = 0;
29
+ if (isDocumentViewerRotation(newRotation))
30
+ setRotation(newRotation);
31
+ }, [rotation]);
32
+ const handleNextPage = React.useCallback(() => {
33
+ setPage(currentPage => Math.min(currentPage + 1, totalPages));
34
+ }, [totalPages]);
35
+ const handlePreviousPage = React.useCallback(() => {
36
+ setPage(currentPage => Math.max(currentPage - 1, 1));
37
+ }, []);
38
+ React.useEffect(() => {
39
+ setPage(currentPage => Math.min(currentPage, totalPages));
40
+ }, [totalPages]);
41
+ const handlePdfReady = React.useCallback((proxy) => {
42
+ setTotalPages(proxy.numPages);
43
+ }, []);
44
+ return (_jsxs(Box, { tag: "document-viewer-wrapper", style: styles.viewerWrapper, children: [_jsxs(Box, { tag: "document-viewer", flex: 1, ...boxProps, children: [_jsx(DocumentViewerToolbar, { title: title, state: state, withChildren: children != null, onRotateLeft: () => handleRotate('left'), onRotateRight: () => handleRotate('right'), onNextPage: handleNextPage, onPreviousPage: handlePreviousPage }), _jsx(Box, { tag: "document-viewer-container", style: {
45
+ ...styles.viewerContainer,
46
+ ...(children ? { borderBottomRightRadius: 0 } : {}),
47
+ }, children: _jsxs(Box, { children: [type === 'image' && _jsx(DocumentViewerImage, { source: source, rotation: rotation, height: height }), type === 'pdf' && (_jsx(DocumentViewerPDF, { source: source, page: page, rotation: rotation, height: height, onReady: handlePdfReady }))] }) })] }), children && (_jsx(Box, { tag: "document-viewer-children", style: styles.children, children: children }))] }));
48
+ };
@@ -0,0 +1,143 @@
1
+ declare const _default: {
2
+ title: string;
3
+ tags: "Kit"[];
4
+ experimental: false;
5
+ webOnly: true;
6
+ description: string;
7
+ component: (props: import("@alveole/components").DocumentViewerProps) => import("react/jsx-runtime").JSX.Element;
8
+ styleFn: () => {
9
+ toolbar: {
10
+ padding: import("@alveole/theme").Spacing;
11
+ borderColor: "#DEE3EC";
12
+ borderWidth: number;
13
+ borderStyle: "solid";
14
+ borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
15
+ borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
16
+ backgroundColor: "#F6F7F8";
17
+ display: "flex";
18
+ flexDirection: "row";
19
+ gap: import("@alveole/theme").Spacing;
20
+ justifyContent: "space-between";
21
+ };
22
+ toolbarAction: {
23
+ display: "flex";
24
+ flexDirection: "row";
25
+ gap: import("@alveole/theme").Spacing;
26
+ justifyContent: "flex-end";
27
+ };
28
+ toolbarTitle: {
29
+ color: "#373A3F";
30
+ paddingLeft: import("@alveole/theme").Spacing;
31
+ marginTop: string;
32
+ marginBottom: string;
33
+ userSelect: "none";
34
+ fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
35
+ fontSize: 14;
36
+ lineHeight: 20;
37
+ letterSpacing: 0;
38
+ };
39
+ toolbarState: {
40
+ color: "#5F6571";
41
+ userSelect: "none";
42
+ fontVariant: "tabular-nums"[];
43
+ fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
44
+ fontSize: 14;
45
+ lineHeight: 20;
46
+ letterSpacing: 0;
47
+ };
48
+ toolbarDivider: {
49
+ width: number;
50
+ height: "50%";
51
+ backgroundColor: "#DEE3EC";
52
+ marginTop: string;
53
+ marginBottom: string;
54
+ };
55
+ viewerWrapper: {
56
+ display: "flex";
57
+ flexDirection: "row";
58
+ };
59
+ viewerContainer: {
60
+ padding: import("@alveole/theme").Spacing;
61
+ borderColor: "#DEE3EC";
62
+ borderWidth: number;
63
+ borderStyle: "solid";
64
+ borderTopWidth: number;
65
+ borderBottomLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
66
+ borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
67
+ backgroundColor: "#FFFFFF";
68
+ overflow: "hidden";
69
+ };
70
+ children: {
71
+ borderColor: "#DEE3EC";
72
+ borderWidth: number;
73
+ borderStyle: "solid";
74
+ borderLeft: number;
75
+ borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
76
+ borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
77
+ backgroundColor: "#FFFFFF";
78
+ overflow: "hidden";
79
+ };
80
+ viewerImageContent: {
81
+ display: "flex";
82
+ flexDirection: "row";
83
+ justifyContent: "center";
84
+ alignItems: "center";
85
+ overflow: "hidden";
86
+ cursor: "crosshair";
87
+ userSelect: "none";
88
+ };
89
+ viewerImageZoomLayer: {
90
+ width: "100%";
91
+ height: "100%";
92
+ transitionProperty: "transform";
93
+ transitionDuration: "120ms";
94
+ transitionTimingFunction: "ease-out";
95
+ transitionDelay: "0ms";
96
+ };
97
+ viewerPdfContent: {
98
+ display: "flex";
99
+ flexDirection: "row";
100
+ justifyContent: "center";
101
+ alignItems: "center";
102
+ overflow: "hidden";
103
+ cursor: "crosshair";
104
+ userSelect: "none";
105
+ };
106
+ viewerPdfStage: {
107
+ position: "relative";
108
+ display: "flex";
109
+ flexDirection: "row";
110
+ justifyContent: "center";
111
+ alignItems: "center";
112
+ overflow: "hidden";
113
+ width: "100%";
114
+ height: "100%";
115
+ };
116
+ viewerPdfCanvasWrapper: {
117
+ display: "flex";
118
+ justifyContent: "center";
119
+ alignItems: "center";
120
+ transitionProperty: "transform";
121
+ transitionDuration: "120ms";
122
+ transitionTimingFunction: "ease-out";
123
+ transitionDelay: "0ms";
124
+ };
125
+ viewerPdfCanvas: {
126
+ display: "block";
127
+ maxWidth: string;
128
+ };
129
+ viewerPdfOverlay: {
130
+ position: "absolute";
131
+ inset: number;
132
+ display: "flex";
133
+ alignItems: "center";
134
+ justifyContent: "center";
135
+ backgroundColor: "#FFFFFF";
136
+ };
137
+ };
138
+ };
139
+ export default _default;
140
+ export declare const DocumentImage: () => import("react/jsx-runtime").JSX.Element;
141
+ export declare const DocumentPdf: () => import("react/jsx-runtime").JSX.Element;
142
+ export declare const WithChildren: () => import("react/jsx-runtime").JSX.Element;
143
+ //# sourceMappingURL=DocumentViewer.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocumentViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBAQkB;AAElB,eAAO,MAAM,aAAa,+CAIzB,CAAC;AAEF,eAAO,MAAM,WAAW,+CASvB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAaxB,CAAC"}
@@ -0,0 +1,16 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Box, Typography } from '@alveole/components';
3
+ import { DocumentViewer } from './DocumentViewer';
4
+ import { useStyles } from './DocumentViewer.styles';
5
+ export default {
6
+ title: 'DocumentViewer',
7
+ tags: ['Kit'],
8
+ experimental: false,
9
+ webOnly: true,
10
+ description: 'Viewer de documents (PDF, Image)',
11
+ component: DocumentViewer,
12
+ styleFn: useStyles,
13
+ };
14
+ export const DocumentImage = () => (_jsx(Box, { maxW: 500, children: _jsx(DocumentViewer, { title: "Document image", type: "image", source: "https://picsum.photos/1000/2000", height: 600 }) }));
15
+ export const DocumentPdf = () => (_jsx(Box, { maxW: 500, children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "https://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf", height: 600 }) }));
16
+ export const WithChildren = () => (_jsx(Box, { children: _jsx(DocumentViewer, { title: "Document PDF", type: "pdf", source: "https://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf", height: 600, children: _jsx(Box, { p: '2W', minW: 600, children: _jsx(Typography, { children: "Contenu enfant" }) }) }) }));
@@ -0,0 +1,131 @@
1
+ export declare const useStyles: () => {
2
+ toolbar: {
3
+ padding: import("@alveole/theme").Spacing;
4
+ borderColor: "#DEE3EC";
5
+ borderWidth: number;
6
+ borderStyle: "solid";
7
+ borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
8
+ borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
9
+ backgroundColor: "#F6F7F8";
10
+ display: "flex";
11
+ flexDirection: "row";
12
+ gap: import("@alveole/theme").Spacing;
13
+ justifyContent: "space-between";
14
+ };
15
+ toolbarAction: {
16
+ display: "flex";
17
+ flexDirection: "row";
18
+ gap: import("@alveole/theme").Spacing;
19
+ justifyContent: "flex-end";
20
+ };
21
+ toolbarTitle: {
22
+ color: "#373A3F";
23
+ paddingLeft: import("@alveole/theme").Spacing;
24
+ marginTop: string;
25
+ marginBottom: string;
26
+ userSelect: "none";
27
+ fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
28
+ fontSize: 14;
29
+ lineHeight: 20;
30
+ letterSpacing: 0;
31
+ };
32
+ toolbarState: {
33
+ color: "#5F6571";
34
+ userSelect: "none";
35
+ fontVariant: "tabular-nums"[];
36
+ fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
37
+ fontSize: 14;
38
+ lineHeight: 20;
39
+ letterSpacing: 0;
40
+ };
41
+ toolbarDivider: {
42
+ width: number;
43
+ height: "50%";
44
+ backgroundColor: "#DEE3EC";
45
+ marginTop: string;
46
+ marginBottom: string;
47
+ };
48
+ viewerWrapper: {
49
+ display: "flex";
50
+ flexDirection: "row";
51
+ };
52
+ viewerContainer: {
53
+ padding: import("@alveole/theme").Spacing;
54
+ borderColor: "#DEE3EC";
55
+ borderWidth: number;
56
+ borderStyle: "solid";
57
+ borderTopWidth: number;
58
+ borderBottomLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
59
+ borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
60
+ backgroundColor: "#FFFFFF";
61
+ overflow: "hidden";
62
+ };
63
+ children: {
64
+ borderColor: "#DEE3EC";
65
+ borderWidth: number;
66
+ borderStyle: "solid";
67
+ borderLeft: number;
68
+ borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
69
+ borderBottomRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
70
+ backgroundColor: "#FFFFFF";
71
+ overflow: "hidden";
72
+ };
73
+ viewerImageContent: {
74
+ display: "flex";
75
+ flexDirection: "row";
76
+ justifyContent: "center";
77
+ alignItems: "center";
78
+ overflow: "hidden";
79
+ cursor: "crosshair";
80
+ userSelect: "none";
81
+ };
82
+ viewerImageZoomLayer: {
83
+ width: "100%";
84
+ height: "100%";
85
+ transitionProperty: "transform";
86
+ transitionDuration: "120ms";
87
+ transitionTimingFunction: "ease-out";
88
+ transitionDelay: "0ms";
89
+ };
90
+ viewerPdfContent: {
91
+ display: "flex";
92
+ flexDirection: "row";
93
+ justifyContent: "center";
94
+ alignItems: "center";
95
+ overflow: "hidden";
96
+ cursor: "crosshair";
97
+ userSelect: "none";
98
+ };
99
+ viewerPdfStage: {
100
+ position: "relative";
101
+ display: "flex";
102
+ flexDirection: "row";
103
+ justifyContent: "center";
104
+ alignItems: "center";
105
+ overflow: "hidden";
106
+ width: "100%";
107
+ height: "100%";
108
+ };
109
+ viewerPdfCanvasWrapper: {
110
+ display: "flex";
111
+ justifyContent: "center";
112
+ alignItems: "center";
113
+ transitionProperty: "transform";
114
+ transitionDuration: "120ms";
115
+ transitionTimingFunction: "ease-out";
116
+ transitionDelay: "0ms";
117
+ };
118
+ viewerPdfCanvas: {
119
+ display: "block";
120
+ maxWidth: string;
121
+ };
122
+ viewerPdfOverlay: {
123
+ position: "absolute";
124
+ inset: number;
125
+ display: "flex";
126
+ alignItems: "center";
127
+ justifyContent: "center";
128
+ backgroundColor: "#FFFFFF";
129
+ };
130
+ };
131
+ //# sourceMappingURL=DocumentViewer.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocumentViewer.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2HnB,CAAC"}
@@ -0,0 +1,125 @@
1
+ import { makeStyles } from '@alveole/theme';
2
+ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
3
+ toolbar: {
4
+ padding: spacing('1W'),
5
+ borderColor: color.light.border['default-grey'],
6
+ borderWidth: 1,
7
+ borderStyle: 'solid',
8
+ borderTopLeftRadius: radius('md'),
9
+ borderTopRightRadius: radius('md'),
10
+ backgroundColor: color.light.background['alt-grey'],
11
+ display: 'flex',
12
+ flexDirection: 'row',
13
+ gap: spacing('1W'),
14
+ justifyContent: 'space-between',
15
+ },
16
+ toolbarAction: {
17
+ display: 'flex',
18
+ flexDirection: 'row',
19
+ gap: spacing('1W'),
20
+ justifyContent: 'flex-end',
21
+ },
22
+ toolbarTitle: {
23
+ ...text['Corps de texte'].SM.Bold,
24
+ color: color.light.text['default-grey'],
25
+ paddingLeft: spacing('1W'),
26
+ marginTop: 'auto',
27
+ marginBottom: 'auto',
28
+ userSelect: 'none',
29
+ },
30
+ toolbarState: {
31
+ ...text['Corps de texte'].SM.Regular,
32
+ color: color.light.text['mention-grey'],
33
+ userSelect: 'none',
34
+ fontVariant: ['tabular-nums'],
35
+ },
36
+ toolbarDivider: {
37
+ width: 1,
38
+ height: '50%',
39
+ backgroundColor: color.light.border['default-grey'],
40
+ marginTop: 'auto',
41
+ marginBottom: 'auto',
42
+ },
43
+ viewerWrapper: {
44
+ display: 'flex',
45
+ flexDirection: 'row',
46
+ },
47
+ viewerContainer: {
48
+ padding: spacing('1W'),
49
+ borderColor: color.light.border['default-grey'],
50
+ borderWidth: 1,
51
+ borderStyle: 'solid',
52
+ borderTopWidth: 0,
53
+ borderBottomLeftRadius: radius('md'),
54
+ borderBottomRightRadius: radius('md'),
55
+ backgroundColor: color.light.background['default-grey'],
56
+ overflow: 'hidden',
57
+ },
58
+ children: {
59
+ borderColor: color.light.border['default-grey'],
60
+ borderWidth: 1,
61
+ borderStyle: 'solid',
62
+ borderLeft: 0,
63
+ borderTopRightRadius: radius('md'),
64
+ borderBottomRightRadius: radius('md'),
65
+ backgroundColor: color.light.background['default-grey'],
66
+ overflow: 'hidden',
67
+ },
68
+ viewerImageContent: {
69
+ display: 'flex',
70
+ flexDirection: 'row',
71
+ justifyContent: 'center',
72
+ alignItems: 'center',
73
+ overflow: 'hidden',
74
+ cursor: 'crosshair',
75
+ userSelect: 'none',
76
+ },
77
+ viewerImageZoomLayer: {
78
+ width: '100%',
79
+ height: '100%',
80
+ transitionProperty: 'transform',
81
+ transitionDuration: '120ms',
82
+ transitionTimingFunction: 'ease-out',
83
+ transitionDelay: '0ms',
84
+ },
85
+ viewerPdfContent: {
86
+ display: 'flex',
87
+ flexDirection: 'row',
88
+ justifyContent: 'center',
89
+ alignItems: 'center',
90
+ overflow: 'hidden',
91
+ cursor: 'crosshair',
92
+ userSelect: 'none',
93
+ },
94
+ viewerPdfStage: {
95
+ position: 'relative',
96
+ display: 'flex',
97
+ flexDirection: 'row',
98
+ justifyContent: 'center',
99
+ alignItems: 'center',
100
+ overflow: 'hidden',
101
+ width: '100%',
102
+ height: '100%',
103
+ },
104
+ viewerPdfCanvasWrapper: {
105
+ display: 'flex',
106
+ justifyContent: 'center',
107
+ alignItems: 'center',
108
+ transitionProperty: 'transform',
109
+ transitionDuration: '120ms',
110
+ transitionTimingFunction: 'ease-out',
111
+ transitionDelay: '0ms',
112
+ },
113
+ viewerPdfCanvas: {
114
+ display: 'block',
115
+ maxWidth: '100%',
116
+ },
117
+ viewerPdfOverlay: {
118
+ position: 'absolute',
119
+ inset: 0,
120
+ display: 'flex',
121
+ alignItems: 'center',
122
+ justifyContent: 'center',
123
+ backgroundColor: color.light.background['default-grey'],
124
+ },
125
+ }));
@@ -0,0 +1,9 @@
1
+ import { DocumentViewerRotation } from './DocumentViewer';
2
+ export type DocumentViewerImageProps = {
3
+ source: string;
4
+ height: number;
5
+ rotation: DocumentViewerRotation;
6
+ scale?: number;
7
+ };
8
+ export declare const DocumentViewerImage: (props: DocumentViewerImageProps) => import("react/jsx-runtime").JSX.Element;
9
+ //# sourceMappingURL=DocumentViewerImage.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocumentViewerImage.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerImage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,4CA8ClE,CAAC"}
@@ -0,0 +1,35 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Box, Image } from '@alveole/components';
3
+ import React from 'react';
4
+ import { useStyles } from './DocumentViewer.styles';
5
+ export const DocumentViewerImage = (props) => {
6
+ const { source, rotation, height, scale = 1 } = props;
7
+ const styles = useStyles();
8
+ const [isHovered, setIsHovered] = React.useState(false);
9
+ const [transformOrigin, setTransformOrigin] = React.useState('50% 50%');
10
+ const hoveredScale = isHovered ? 2 : 1;
11
+ const handlePointerMove = React.useCallback((event) => {
12
+ const rect = event.currentTarget?.getBoundingClientRect?.();
13
+ if (!rect)
14
+ return;
15
+ const x = ((event.clientX - rect.left) / rect.width) * 100;
16
+ const y = ((event.clientY - rect.top) / rect.height) * 100;
17
+ const origin = getRotatedTransformOrigin(x, y, rotation);
18
+ setTransformOrigin(`${clampPercent(origin.x)}% ${clampPercent(origin.y)}%`);
19
+ }, [rotation]);
20
+ return (_jsx(Box, { tag: "document-viewer-image", width: '100%', height: height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onPointerMove: handlePointerMove, style: styles.viewerImageContent, children: _jsx(Box, { width: '100%', height: '100%', p: '1V', children: _jsx(Box, { width: '100%', height: '100%', style: { transform: [{ rotate: `${rotation}deg` }] }, children: _jsx(Box, { width: '100%', height: '100%', style: [styles.viewerImageZoomLayer, { transformOrigin }, { transform: [{ scale: scale * hoveredScale }] }], children: _jsx(Image, { source: { uri: source }, contentFit: "contain", width: '100%', height: '100%', pointerEvents: "none" }) }) }) }) }));
21
+ };
22
+ const clampPercent = (value) => Math.max(0, Math.min(100, value));
23
+ const getRotatedTransformOrigin = (x, y, rotation) => {
24
+ switch (rotation) {
25
+ case 90:
26
+ return { x: y, y: 100 - x };
27
+ case 180:
28
+ return { x: 100 - x, y: 100 - y };
29
+ case 270:
30
+ return { x: 100 - y, y: x };
31
+ case 0:
32
+ default:
33
+ return { x, y };
34
+ }
35
+ };
@@ -0,0 +1,13 @@
1
+ import type { PDFDocumentProxy } from 'pdfjs-dist';
2
+ import 'pdfjs-dist/build/pdf.worker.entry';
3
+ import { DocumentViewerRotation } from './DocumentViewer';
4
+ export type DocumentViewerPDFProps = {
5
+ source: string;
6
+ page: number;
7
+ height: number;
8
+ rotation: DocumentViewerRotation;
9
+ scale?: number;
10
+ onReady?: (state: PDFDocumentProxy) => void;
11
+ };
12
+ export declare const DocumentViewerPDF: (props: DocumentViewerPDFProps) => import("react/jsx-runtime").JSX.Element;
13
+ //# sourceMappingURL=DocumentViewerPDF.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocumentViewerPDF.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerPDF.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,mCAAmC,CAAC;AAG3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,sBAAsB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAWF,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,4CA6J9D,CAAC"}
@@ -0,0 +1,131 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Box } from '@alveole/components';
3
+ import * as pdfjs from 'pdfjs-dist';
4
+ import 'pdfjs-dist/build/pdf.worker.entry';
5
+ import React from 'react';
6
+ import { Platform } from 'react-native';
7
+ import { useStyles } from './DocumentViewer.styles';
8
+ const isPdfCancellationError = (error) => {
9
+ if (!(error instanceof Error))
10
+ return false;
11
+ return (['RenderingCancelledException', 'AbortException', 'UnknownErrorException'].includes(error.name) ||
12
+ error.message.includes('Worker was terminated'));
13
+ };
14
+ export const DocumentViewerPDF = (props) => {
15
+ const { source, page, rotation, height, scale = 1, onReady } = props;
16
+ const styles = useStyles();
17
+ const [pdf, setPdf] = React.useState(null);
18
+ const [viewerSize, setViewerSize] = React.useState({ width: 0, height: 0 });
19
+ const [isHovered, setIsHovered] = React.useState(false);
20
+ const [transformOrigin, setTransformOrigin] = React.useState('50% 50%');
21
+ const [renderedPageSize, setRenderedPageSize] = React.useState({ width: 0, height: 0 });
22
+ const canvasRef = React.useRef(null);
23
+ const onReadyRef = React.useRef(onReady);
24
+ const hoveredScale = isHovered ? 2 : 1;
25
+ React.useEffect(() => {
26
+ onReadyRef.current = onReady;
27
+ }, [onReady]);
28
+ const onPdfLoadedSuccess = React.useCallback((documentPdf, active) => {
29
+ if (!active)
30
+ return void documentPdf.destroy?.();
31
+ setPdf(currentPdf => {
32
+ void currentPdf?.destroy?.();
33
+ return documentPdf;
34
+ });
35
+ onReadyRef.current?.(documentPdf);
36
+ }, []);
37
+ const onPdfLoadedError = (active) => {
38
+ if (!active)
39
+ return;
40
+ setPdf(null);
41
+ };
42
+ const onPageLoadedSuccess = React.useCallback((pagePdf, active) => {
43
+ if (!active || !canvasRef.current)
44
+ return;
45
+ const baseViewport = pagePdf.getViewport({ scale: 1, rotation });
46
+ const fittedScale = Math.min(viewerSize.width / baseViewport.width, viewerSize.height / baseViewport.height);
47
+ const viewport = pagePdf.getViewport({ scale: fittedScale * scale, rotation });
48
+ const canvas = canvasRef.current;
49
+ const context = canvas.getContext('2d');
50
+ if (context == null)
51
+ return null;
52
+ const pixelRatio = window.devicePixelRatio || 1;
53
+ canvas.width = Math.floor(viewport.width * pixelRatio);
54
+ canvas.height = Math.floor(viewport.height * pixelRatio);
55
+ canvas.style.width = `${viewport.width}px`;
56
+ canvas.style.height = `${viewport.height}px`;
57
+ setRenderedPageSize({ width: viewport.width, height: viewport.height });
58
+ context.setTransform(1, 0, 0, 1, 0, 0);
59
+ context.clearRect(0, 0, canvas.width, canvas.height);
60
+ return pagePdf.render({
61
+ canvasContext: context,
62
+ viewport,
63
+ transform: pixelRatio === 1 ? undefined : [pixelRatio, 0, 0, pixelRatio, 0, 0],
64
+ });
65
+ }, [rotation, scale, viewerSize.height, viewerSize.width]);
66
+ React.useEffect(() => {
67
+ let isActive = true;
68
+ const loadingTask = pdfjs.getDocument(source);
69
+ loadingTask.promise
70
+ .then(nextPdf => onPdfLoadedSuccess(nextPdf, isActive))
71
+ .catch(error => {
72
+ if (!isActive || isPdfCancellationError(error))
73
+ return;
74
+ onPdfLoadedError(true);
75
+ });
76
+ return () => {
77
+ isActive = false;
78
+ loadingTask.destroy();
79
+ };
80
+ }, [source, onPdfLoadedSuccess]);
81
+ React.useEffect(() => {
82
+ if (!pdf || !canvasRef.current || viewerSize.width <= 0 || viewerSize.height <= 0)
83
+ return;
84
+ let isActive = true;
85
+ let renderTask = null;
86
+ pdf
87
+ .getPage(page)
88
+ .then(pdfPage => {
89
+ renderTask = onPageLoadedSuccess(pdfPage, isActive);
90
+ return renderTask?.promise.then(() => {
91
+ if (!isActive)
92
+ return;
93
+ pdfPage.cleanup?.();
94
+ });
95
+ })
96
+ .catch(error => {
97
+ if (!isActive || isPdfCancellationError(error))
98
+ return;
99
+ onPdfLoadedError(true);
100
+ });
101
+ return () => {
102
+ isActive = false;
103
+ renderTask?.cancel?.();
104
+ };
105
+ }, [pdf, page, rotation, scale, viewerSize, onPageLoadedSuccess]);
106
+ const handleLayout = React.useCallback((event) => {
107
+ const nextWidth = event?.nativeEvent?.layout?.width;
108
+ const nextHeight = event?.nativeEvent?.layout?.height;
109
+ if (typeof nextWidth === 'number' && nextWidth > 0 && typeof nextHeight === 'number' && nextHeight > 0) {
110
+ setViewerSize({ width: nextWidth, height: nextHeight });
111
+ }
112
+ }, []);
113
+ const handlePointerMove = React.useCallback((event) => {
114
+ const rect = event.currentTarget?.getBoundingClientRect?.();
115
+ if (!rect)
116
+ return;
117
+ const x = ((event.clientX - rect.left) / rect.width) * 100;
118
+ const y = ((event.clientY - rect.top) / rect.height) * 100;
119
+ setTransformOrigin(`${Math.max(0, Math.min(100, x))}% ${Math.max(0, Math.min(100, y))}%`);
120
+ }, []);
121
+ React.useEffect(() => () => void pdf?.destroy?.(), [pdf]);
122
+ return (_jsx(Box, { tag: "document-viewer-pdf", width: '100%', height: height, onLayout: handleLayout, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onPointerMove: handlePointerMove, style: styles.viewerPdfContent, children: _jsx(Box, { width: '100%', height: '100%', p: '1V', style: styles.viewerPdfStage, children: Platform.OS === 'web' && (_jsx(Box, { style: [
123
+ styles.viewerPdfCanvasWrapper,
124
+ {
125
+ width: renderedPageSize.width,
126
+ height: renderedPageSize.height,
127
+ transformOrigin,
128
+ transform: [{ scale: hoveredScale }],
129
+ },
130
+ ], children: _jsx("canvas", { ref: canvasRef, style: styles.viewerPdfCanvas }) })) }) }));
131
+ };
@@ -0,0 +1,18 @@
1
+ import { DocumentViewerProps } from './DocumentViewer';
2
+ export type DocumentViewerToolbarState = {
3
+ fileType: DocumentViewerProps['type'];
4
+ rotation: 0 | 90 | 180 | 270;
5
+ page?: number;
6
+ totalPages?: number;
7
+ };
8
+ export type DocumentViewerToolbarProps = {
9
+ title: string;
10
+ state: DocumentViewerToolbarState;
11
+ withChildren: boolean;
12
+ onRotateLeft: () => void;
13
+ onRotateRight: () => void;
14
+ onPreviousPage?: () => void;
15
+ onNextPage?: () => void;
16
+ };
17
+ export declare const DocumentViewerToolbar: (props: DocumentViewerToolbarProps) => import("react/jsx-runtime").JSX.Element;
18
+ //# sourceMappingURL=DocumentViewerToolbar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocumentViewerToolbar.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerToolbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAIvD,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,0BAA0B,CAAC;IAClC,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,OAAO,0BAA0B,4CA4CtE,CAAC"}
@@ -0,0 +1,16 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Box, Typography } from '@alveole/components';
3
+ import { useStyles } from './DocumentViewer.styles';
4
+ import { ToolbarButton } from './DocumentViewerToolbarButton';
5
+ export const DocumentViewerToolbar = (props) => {
6
+ const { title, state, withChildren, onRotateLeft, onRotateRight, onNextPage, onPreviousPage } = props;
7
+ const styles = useStyles();
8
+ const isPdf = state.fileType === 'pdf';
9
+ const isFirstPage = state.page === 1;
10
+ const isLastPage = state.page === state.totalPages;
11
+ const hasPagination = isPdf && typeof state.page === 'number' && typeof state.totalPages === 'number';
12
+ return (_jsxs(Box, { tag: "document-viewer-toolbar", style: {
13
+ ...styles.toolbar,
14
+ ...(withChildren ? { borderTopRightRadius: 0 } : {}),
15
+ }, children: [_jsx(Box, { children: _jsx(Typography, { style: styles.toolbarTitle, children: title }) }), _jsxs(Box, { tag: "document-viewer-toolbar-actions", style: styles.toolbarAction, children: [_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1,5V", children: [_jsx(ToolbarButton, { onPress: onRotateLeft, icon: "RotateCcwSquare" }), _jsx(ToolbarButton, { onPress: onRotateRight, icon: "RotateCwSquare" })] }), _jsx(Box, { style: styles.toolbarDivider }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: "1,5V", children: [_jsx(ToolbarButton, { onPress: onPreviousPage, disabled: isFirstPage || !hasPagination, icon: "SquareChevronLeft" }), _jsx(Box, { mt: 'auto', mb: 'auto', children: _jsxs(Typography, { style: styles.toolbarState, children: [hasPagination ? state.page : 1, " / ", hasPagination ? state.totalPages : 1] }) }), _jsx(ToolbarButton, { onPress: onNextPage, disabled: isLastPage || !hasPagination, icon: "SquareChevronRight" })] })] })] }));
16
+ };
@@ -0,0 +1,9 @@
1
+ import { LucideIconProps } from '@alveole/components';
2
+ type ToolbarButtonProps = {
3
+ icon: LucideIconProps['name'];
4
+ disabled?: boolean;
5
+ onPress?: () => void;
6
+ };
7
+ export declare const ToolbarButton: (props: ToolbarButtonProps) => import("react/jsx-runtime").JSX.Element;
8
+ export {};
9
+ //# sourceMappingURL=DocumentViewerToolbarButton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DocumentViewerToolbarButton.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/DocumentViewerToolbarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAElE,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,4CAGtD,CAAC"}
@@ -0,0 +1,6 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { ButtonIcon } from '@alveole/components';
3
+ export const ToolbarButton = (props) => {
4
+ const { icon, disabled, onPress } = props;
5
+ return _jsx(ButtonIcon, { variant: "tertiary", icon: icon, disabled: disabled, onPress: onPress });
6
+ };
@@ -0,0 +1,2 @@
1
+ export * from './DocumentViewer';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/DocumentViewer/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}
@@ -0,0 +1 @@
1
+ export * from './DocumentViewer';
@@ -5,6 +5,7 @@ export * from './Breadcrumbs';
5
5
  export * from './Button';
6
6
  export * from './Card';
7
7
  export * from './Divider';
8
+ export * from './DocumentViewer';
8
9
  export * from './EmptyState';
9
10
  export * from './ListItem';
10
11
  export * from './LucideIcon';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}
package/dist/ui/index.js CHANGED
@@ -5,6 +5,7 @@ export * from './Breadcrumbs';
5
5
  export * from './Button';
6
6
  export * from './Card';
7
7
  export * from './Divider';
8
+ export * from './DocumentViewer';
8
9
  export * from './EmptyState';
9
10
  export * from './ListItem';
10
11
  export * from './LucideIcon';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alveole/components",
3
- "version": "0.32.2",
3
+ "version": "0.33.1",
4
4
  "description": "Shared UI components.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -62,6 +62,7 @@
62
62
  "expo-linear-gradient": "*",
63
63
  "expo-constants": "*",
64
64
  "lottie-react-native": "*",
65
+ "pdfjs-dist": "^3.11.174",
65
66
  "@lottiefiles/dotlottie-react": "*"
66
67
  },
67
68
  "publishConfig": {