@alveole/components 0.13.2 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (91) hide show
  1. package/dist/core/Image/Image.d.ts +11 -0
  2. package/dist/core/Image/Image.d.ts.map +1 -0
  3. package/dist/core/Image/Image.js +79 -0
  4. package/dist/core/Image/Image.stories.d.ts +21 -0
  5. package/dist/core/Image/Image.stories.d.ts.map +1 -0
  6. package/dist/core/Image/Image.stories.js +45 -0
  7. package/dist/core/Image/Image.style.d.ts +6 -0
  8. package/dist/core/Image/Image.style.d.ts.map +1 -0
  9. package/dist/core/Image/Image.style.js +6 -0
  10. package/dist/core/Image/index.d.ts +2 -0
  11. package/dist/core/Image/index.d.ts.map +1 -0
  12. package/dist/core/Image/index.js +1 -0
  13. package/dist/core/Metabase/Metabase.d.ts +11 -0
  14. package/dist/core/Metabase/Metabase.d.ts.map +1 -0
  15. package/dist/core/Metabase/Metabase.js +17 -0
  16. package/dist/core/Metabase/Metabase.stories.d.ts +20 -0
  17. package/dist/core/Metabase/Metabase.stories.d.ts.map +1 -0
  18. package/dist/core/Metabase/Metabase.stories.js +12 -0
  19. package/dist/core/Metabase/Metabase.styles.d.ts +11 -0
  20. package/dist/core/Metabase/Metabase.styles.d.ts.map +1 -0
  21. package/dist/core/Metabase/Metabase.styles.js +12 -0
  22. package/dist/core/Metabase/Metabase.web.d.ts +20 -0
  23. package/dist/core/Metabase/Metabase.web.d.ts.map +1 -0
  24. package/dist/core/Metabase/Metabase.web.js +53 -0
  25. package/dist/core/Metabase/index.d.ts +2 -0
  26. package/dist/core/Metabase/index.d.ts.map +1 -0
  27. package/dist/core/Metabase/index.js +1 -0
  28. package/dist/core/Version/Version.d.ts +5 -0
  29. package/dist/core/Version/Version.d.ts.map +1 -0
  30. package/dist/core/Version/Version.js +15 -0
  31. package/dist/core/Version/Version.stories.d.ts +21 -0
  32. package/dist/core/Version/Version.stories.d.ts.map +1 -0
  33. package/dist/core/Version/Version.stories.js +12 -0
  34. package/dist/core/Version/Version.styles.d.ts +12 -0
  35. package/dist/core/Version/Version.styles.d.ts.map +1 -0
  36. package/dist/core/Version/Version.styles.js +9 -0
  37. package/dist/core/Version/index.d.ts +2 -0
  38. package/dist/core/Version/index.d.ts.map +1 -0
  39. package/dist/core/Version/index.js +1 -0
  40. package/dist/core/index.d.ts +3 -0
  41. package/dist/core/index.d.ts.map +1 -1
  42. package/dist/core/index.js +3 -0
  43. package/dist/index.d.ts +1 -0
  44. package/dist/index.d.ts.map +1 -1
  45. package/dist/index.js +1 -0
  46. package/dist/stories/index.d.ts +6 -0
  47. package/dist/stories/index.d.ts.map +1 -1
  48. package/dist/stories/index.js +8 -0
  49. package/dist/ui/Button/Button.d.ts +31 -0
  50. package/dist/ui/Button/Button.d.ts.map +1 -0
  51. package/dist/ui/Button/Button.js +141 -0
  52. package/dist/ui/Button/Button.stories.d.ts +249 -0
  53. package/dist/ui/Button/Button.stories.d.ts.map +1 -0
  54. package/dist/ui/Button/Button.stories.js +20 -0
  55. package/dist/ui/Button/Button.styles.d.ts +222 -0
  56. package/dist/ui/Button/Button.styles.d.ts.map +1 -0
  57. package/dist/ui/Button/Button.styles.js +194 -0
  58. package/dist/ui/Button/ButtonIcon.d.ts +26 -0
  59. package/dist/ui/Button/ButtonIcon.d.ts.map +1 -0
  60. package/dist/ui/Button/ButtonIcon.js +100 -0
  61. package/dist/ui/Button/index.d.ts +3 -0
  62. package/dist/ui/Button/index.d.ts.map +1 -0
  63. package/dist/ui/Button/index.js +2 -0
  64. package/dist/ui/Divider/Divider.d.ts +4 -0
  65. package/dist/ui/Divider/Divider.d.ts.map +1 -0
  66. package/dist/ui/Divider/Divider.js +7 -0
  67. package/dist/ui/Divider/Divider.stories.d.ts +18 -0
  68. package/dist/ui/Divider/Divider.stories.d.ts.map +1 -0
  69. package/dist/ui/Divider/Divider.stories.js +13 -0
  70. package/dist/ui/Divider/Divider.styles.d.ts +8 -0
  71. package/dist/ui/Divider/Divider.styles.d.ts.map +1 -0
  72. package/dist/ui/Divider/Divider.styles.js +8 -0
  73. package/dist/ui/Divider/index.d.ts +2 -0
  74. package/dist/ui/Divider/index.d.ts.map +1 -0
  75. package/dist/ui/Divider/index.js +1 -0
  76. package/dist/ui/LucideIcon/LucideIcon.d.ts +5 -0
  77. package/dist/ui/LucideIcon/LucideIcon.d.ts.map +1 -0
  78. package/dist/ui/LucideIcon/LucideIcon.js +23 -0
  79. package/dist/ui/LucideIcon/LucideIcon.props.d.ts +4135 -0
  80. package/dist/ui/LucideIcon/LucideIcon.props.d.ts.map +1 -0
  81. package/dist/ui/LucideIcon/LucideIcon.props.js +9 -0
  82. package/dist/ui/LucideIcon/LucideIcon.stories.d.ts +2073 -0
  83. package/dist/ui/LucideIcon/LucideIcon.stories.d.ts.map +1 -0
  84. package/dist/ui/LucideIcon/LucideIcon.stories.js +16 -0
  85. package/dist/ui/LucideIcon/index.d.ts +3 -0
  86. package/dist/ui/LucideIcon/index.d.ts.map +1 -0
  87. package/dist/ui/LucideIcon/index.js +2 -0
  88. package/dist/ui/index.d.ts +4 -0
  89. package/dist/ui/index.d.ts.map +1 -0
  90. package/dist/ui/index.js +3 -0
  91. package/package.json +6 -1
@@ -0,0 +1,11 @@
1
+ import { ImageProps as ExpoImageProps } from 'expo-image';
2
+ type Dimension = number | `${number}%`;
3
+ export type ImageProps = ExpoImageProps & {
4
+ width?: Dimension;
5
+ height?: Dimension;
6
+ maxWidth?: number;
7
+ maxHeight?: number;
8
+ };
9
+ export declare const Image: (props: ImageProps) => import("react/jsx-runtime").JSX.Element;
10
+ export {};
11
+ //# sourceMappingURL=Image.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,UAAU,IAAI,cAAc,EAAsB,MAAM,YAAY,CAAC;AAOlG,KAAK,SAAS,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;AAGvC,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG;IACxC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,4CAiGtC,CAAC"}
@@ -0,0 +1,79 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Image as ExpoImage } from 'expo-image';
3
+ import React, { useEffect, useState } from 'react';
4
+ import { LucideIcon } from '../../ui';
5
+ import { Box } from '../Box';
6
+ import { useStyles } from './Image.style';
7
+ const DEFAULT_ASPECT_RATIO = 3 / 4;
8
+ const isNumericDimension = (value) => value != null && typeof value === 'number';
9
+ export const Image = (props) => {
10
+ const { source, width, height, maxWidth, maxHeight, style, ...rest } = props;
11
+ const maxWidthNumber = maxWidth ?? (isNumericDimension(width) ? width : undefined);
12
+ const maxHeightNumber = maxHeight ?? (isNumericDimension(height) ? height : undefined);
13
+ const styles = useStyles();
14
+ const [error, setError] = useState(false);
15
+ const [dimensions, setDimensions] = useState(null);
16
+ const imageSource = React.useMemo(() => (typeof source === 'string' ? { uri: source } : source), [source]);
17
+ const imageStyle = React.useMemo(() => {
18
+ const fixedWidth = isNumericDimension(width) ? width : undefined;
19
+ const fixedHeight = isNumericDimension(height) ? height : undefined;
20
+ if (dimensions) {
21
+ let computedWidth = dimensions.width;
22
+ let computedHeight = dimensions.height;
23
+ if (maxWidthNumber != null && computedWidth > maxWidthNumber) {
24
+ computedWidth = maxWidthNumber;
25
+ if (fixedHeight == null) {
26
+ computedHeight = computedWidth * (dimensions.height / dimensions.width);
27
+ }
28
+ }
29
+ if (maxHeightNumber != null && computedHeight > maxHeightNumber) {
30
+ computedHeight = maxHeightNumber;
31
+ if (fixedWidth == null) {
32
+ computedWidth = computedHeight * (dimensions.width / dimensions.height);
33
+ }
34
+ }
35
+ return {
36
+ width: computedWidth,
37
+ height: computedHeight,
38
+ maxWidth: maxWidthNumber,
39
+ maxHeight: maxHeightNumber,
40
+ };
41
+ }
42
+ let fallbackWidth;
43
+ let fallbackHeight;
44
+ if (fixedWidth != null && fixedHeight != null) {
45
+ fallbackWidth = fixedWidth;
46
+ fallbackHeight = fixedHeight;
47
+ }
48
+ else if (fixedWidth != null) {
49
+ fallbackWidth = fixedWidth;
50
+ fallbackHeight = maxHeightNumber ?? fixedWidth * DEFAULT_ASPECT_RATIO;
51
+ }
52
+ else if (fixedHeight != null) {
53
+ fallbackHeight = fixedHeight;
54
+ fallbackWidth = maxWidthNumber ?? fixedHeight / DEFAULT_ASPECT_RATIO;
55
+ }
56
+ else if (maxWidthNumber != null || maxHeightNumber != null) {
57
+ fallbackWidth = maxWidthNumber;
58
+ fallbackHeight = maxHeightNumber ?? (maxWidthNumber != null ? maxWidthNumber * DEFAULT_ASPECT_RATIO : undefined);
59
+ }
60
+ return {
61
+ width: fallbackWidth,
62
+ height: fallbackHeight,
63
+ maxWidth: maxWidthNumber,
64
+ maxHeight: maxHeightNumber,
65
+ };
66
+ }, [width, height, maxWidthNumber, maxHeightNumber, dimensions]);
67
+ const handleLoad = (event) => setDimensions(event.source);
68
+ const handleError = () => setError(true);
69
+ useEffect(() => {
70
+ setDimensions(null);
71
+ setError(false);
72
+ }, []);
73
+ return error ? (_jsx(Box, { children: _jsx(LucideIcon, { name: "ImageOff", size: "md" }) })) : (_jsx(ExpoImage, { style: {
74
+ ...styles.image,
75
+ ...imageStyle,
76
+ width: width === '100%' ? '100%' : imageStyle.width,
77
+ height: height === '100%' ? '100%' : imageStyle.height,
78
+ }, source: imageSource, onLoad: handleLoad, onError: handleError, ...rest }));
79
+ };
@@ -0,0 +1,21 @@
1
+ declare const _default: {
2
+ title: string;
3
+ tags: ["Kit"];
4
+ experimental: true;
5
+ description: string;
6
+ component: (props: import("./Image").ImageProps) => import("react/jsx-runtime").JSX.Element;
7
+ styleFn: () => string;
8
+ };
9
+ export default _default;
10
+ export declare const Cover: () => import("react/jsx-runtime").JSX.Element;
11
+ export declare const MaxWidth: () => import("react/jsx-runtime").JSX.Element;
12
+ export declare const MaxHeight: () => import("react/jsx-runtime").JSX.Element;
13
+ export declare const MaxWidthAndHeight: () => import("react/jsx-runtime").JSX.Element;
14
+ export declare const contain: () => import("react/jsx-runtime").JSX.Element;
15
+ export declare const cover: () => import("react/jsx-runtime").JSX.Element;
16
+ export declare const fill: () => import("react/jsx-runtime").JSX.Element;
17
+ export declare const transition: () => import("react/jsx-runtime").JSX.Element;
18
+ export declare const withAnotherImage: () => import("react/jsx-runtime").JSX.Element;
19
+ export declare const responsiveImage: () => import("react/jsx-runtime").JSX.Element;
20
+ export declare const ImageNotFound: () => import("react/jsx-runtime").JSX.Element;
21
+ //# sourceMappingURL=Image.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":";;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,KAAK,+CAwBjB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAOpB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAOrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,+CAO7B,CAAC;AAEF,eAAO,MAAM,OAAO,+CAoBnB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAOjB,CAAC;AAEF,eAAO,MAAM,IAAI,+CAOhB,CAAC;AAEF,eAAO,MAAM,UAAU,+CAOtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAa5B,CAAC;AAEF,eAAO,MAAM,eAAe,+CAS3B,CAAC;AAEF,eAAO,MAAM,aAAa,+CAOzB,CAAC"}
@@ -0,0 +1,45 @@
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import { Box } from '../Box';
3
+ import { Typography } from '../Typography';
4
+ import { Image } from './Image';
5
+ export default {
6
+ title: 'Image',
7
+ tags: ['Kit'],
8
+ experimental: true,
9
+ description: "Permet d'afficher une image de manière responsive que ce soit sur mobile ou desktop. Actuellement l'image ne peut que être fill, il faudrait développer les autres en se basant sur l'élément <img> HTML. https://www.w3schools.com/csS/css3_object-fit.asp",
10
+ component: Image,
11
+ styleFn: () => 'Aucun style appliqué',
12
+ };
13
+ export const Cover = () => {
14
+ return (_jsxs(Box, { children: [_jsxs(Box, { children: [_jsx(Typography, { children: "Image originale avec 400 x 300" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", width: 400, height: 300 })] }), _jsxs(Box, { children: [_jsx(Typography, { children: "Image d\u00E9form\u00E9e avec width 250 et height 200 (rendu 250 x 200)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", width: 250, height: 200 })] }), _jsxs(Box, { children: [_jsx(Typography, { children: "Image avec une width de 200px (rendu 200 x 150)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", width: 200 })] }), _jsxs(Box, { children: [_jsx(Typography, { children: "Image avec une height de 200px (rendu 400 x 200)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", height: 200 })] })] }));
15
+ };
16
+ export const MaxWidth = () => {
17
+ return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec maxWidth de 200px (rendu 200 x 400)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", maxWidth: 200 })] }));
18
+ };
19
+ export const MaxHeight = () => {
20
+ return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec maxHeight de 200px (rendu 300 x 200)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", maxHeight: 200 })] }));
21
+ };
22
+ export const MaxWidthAndHeight = () => {
23
+ return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec maxWidth et maxHeight de 200px (rendu 200 x 200)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", maxWidth: 200, maxHeight: 200 })] }));
24
+ };
25
+ export const contain = () => {
26
+ return (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec contentFit de contain (rendu 250 x 150)" }), _jsx(Image, { source: "https://www.w3schools.com/csS/paris.jpg", contentFit: "contain", width: 250, height: 150 })] }), _jsxs(Box, { children: [_jsx(Typography, { children: "Image avec contentFit de contain (rendu 250 x 150)" }), _jsx(Image, { source: "https://www.w3schools.com/csS/paris.jpg", contentFit: "contain", contentPosition: "left", width: 250, height: 150 })] })] }));
27
+ };
28
+ export const cover = () => {
29
+ return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec contentFit de cover (rendu 500 x 500)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", contentFit: "cover", width: 500, height: 500 })] }));
30
+ };
31
+ export const fill = () => {
32
+ return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec contentFit de fill (rendu 500 x 500)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", contentFit: "fill", width: 500, height: 500 })] }));
33
+ };
34
+ export const transition = () => {
35
+ return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec transition de 1000ms (rendu 200 x 200)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", transition: 1000, width: 200, height: 200 })] }));
36
+ };
37
+ export const withAnotherImage = () => {
38
+ return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec contentFit de contain (rendu 200 x 150)" }), _jsx(Image, { source: "https://www.w3schools.com/csS/paris.jpg", contentFit: "contain", contentPosition: "left", width: 200, height: 150 })] }));
39
+ };
40
+ export const responsiveImage = () => {
41
+ return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image responsive. L'image doit prendre la taille de son conteneur. Ici 200 x 100" }), _jsx(Box, { width: 200, height: 100, children: _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", width: '100%', height: '100%' }) })] }));
42
+ };
43
+ export const ImageNotFound = () => {
44
+ return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image non trouv\u00E9e" }), _jsx(Image, { source: "https://invalid.url", width: 200, height: 200 })] }));
45
+ };
@@ -0,0 +1,6 @@
1
+ export declare const useStyles: () => {
2
+ image: {
3
+ width: "100%";
4
+ };
5
+ };
6
+ //# sourceMappingURL=Image.style.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Image.style.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;CAInB,CAAC"}
@@ -0,0 +1,6 @@
1
+ import { makeStyles } from '@alveole/theme';
2
+ export const useStyles = makeStyles(() => ({
3
+ image: {
4
+ width: '100%',
5
+ },
6
+ }));
@@ -0,0 +1,2 @@
1
+ export * from './Image';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/Image/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}
@@ -0,0 +1 @@
1
+ export * from './Image';
@@ -0,0 +1,11 @@
1
+ import { BoxProps } from '../Box';
2
+ export type MetabaseProps = {
3
+ source: string;
4
+ style?: BoxProps['style'];
5
+ } | {
6
+ token: string;
7
+ instanceUrl: string;
8
+ style?: BoxProps['style'];
9
+ };
10
+ export declare const Metabase: (props: MetabaseProps) => import("react/jsx-runtime").JSX.Element | null;
11
+ //# sourceMappingURL=Metabase.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Metabase.d.ts","sourceRoot":"","sources":["../../../src/core/Metabase/Metabase.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAGlC,MAAM,MAAM,aAAa,GACrB;IACE,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CAC3B,GACD;IACE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CAC3B,CAAC;AAEN,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,mDAiB5C,CAAC"}
@@ -0,0 +1,17 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import WebView from 'react-native-webview';
3
+ import { useStyles } from './Metabase.styles';
4
+ export const Metabase = (props) => {
5
+ const styles = useStyles();
6
+ const { style } = props;
7
+ const metabaseStyle = { ...styles.metabase, style };
8
+ if ('source' in props && props.source) {
9
+ return _jsx(WebView, { source: { uri: props.source }, style: metabaseStyle });
10
+ }
11
+ if ('token' in props && 'instanceUrl' in props) {
12
+ const { token, instanceUrl } = props;
13
+ const embedUrl = `${instanceUrl}embed/dashboard/${encodeURIComponent(token)}#bordered=true&titled=true`;
14
+ return _jsx(WebView, { source: { uri: embedUrl }, style: metabaseStyle });
15
+ }
16
+ return null;
17
+ };
@@ -0,0 +1,20 @@
1
+ declare const _default: {
2
+ title: string;
3
+ tags: ["Kit"];
4
+ experimental: true;
5
+ description: string;
6
+ component: (props: import("./Metabase").MetabaseProps) => import("react/jsx-runtime").JSX.Element | null;
7
+ styleFn: () => {
8
+ metabase: {
9
+ height: 600 | "100%";
10
+ width: "100%";
11
+ flex: number;
12
+ background: string;
13
+ borderRadius: number;
14
+ boxSizing: "border-box";
15
+ };
16
+ };
17
+ };
18
+ export default _default;
19
+ export declare const Default: () => import("react/jsx-runtime").JSX.Element;
20
+ //# sourceMappingURL=Metabase.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Metabase.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Metabase/Metabase.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAIA,wBAOkB;AAElB,eAAO,MAAM,OAAO,+CAEnB,CAAC"}
@@ -0,0 +1,12 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Metabase } from './Metabase';
3
+ import { useStyles } from './Metabase.styles';
4
+ export default {
5
+ title: 'Metabase',
6
+ tags: ['Kit'],
7
+ experimental: true,
8
+ description: "Intègre une page Metabase en passant l'url",
9
+ component: Metabase,
10
+ styleFn: useStyles,
11
+ };
12
+ export const Default = () => (_jsx(Metabase, { source: "https://spined-burst.metabaseapp.com/public/dashboard/a5f977a6-b6f4-4609-8e16-e422826c40ab" }));
@@ -0,0 +1,11 @@
1
+ export declare const useStyles: () => {
2
+ metabase: {
3
+ height: 600 | "100%";
4
+ width: "100%";
5
+ flex: number;
6
+ background: string;
7
+ borderRadius: number;
8
+ boxSizing: "border-box";
9
+ };
10
+ };
11
+ //# sourceMappingURL=Metabase.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Metabase.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Metabase/Metabase.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;CASnB,CAAC"}
@@ -0,0 +1,12 @@
1
+ import { makeStyles } from '@alveole/theme';
2
+ import { Platform } from 'react-native';
3
+ export const useStyles = makeStyles(() => ({
4
+ metabase: {
5
+ height: Platform.OS === 'web' ? '100%' : 600,
6
+ width: '100%',
7
+ flex: 1,
8
+ background: '#ffffff',
9
+ borderRadius: 10,
10
+ boxSizing: 'border-box',
11
+ },
12
+ }));
@@ -0,0 +1,20 @@
1
+ import React from 'react';
2
+ declare global {
3
+ namespace JSX {
4
+ interface IntrinsicElements {
5
+ 'metabase-dashboard': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
6
+ token?: string;
7
+ 'with-title'?: string;
8
+ 'with-downloads'?: string;
9
+ }, HTMLElement>;
10
+ }
11
+ }
12
+ }
13
+ export type MetabaseProps = {
14
+ source: string;
15
+ } | {
16
+ token: string;
17
+ instanceUrl: string;
18
+ };
19
+ export declare const Metabase: (props: MetabaseProps) => import("react/jsx-runtime").JSX.Element | null;
20
+ //# sourceMappingURL=Metabase.web.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Metabase.web.d.ts","sourceRoot":"","sources":["../../../src/core/Metabase/Metabase.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,oBAAoB,EAAE,KAAK,CAAC,iBAAiB,CAC3C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;gBAClC,KAAK,CAAC,EAAE,MAAM,CAAC;gBACf,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;aAC3B,EACD,WAAW,CACZ,CAAC;SACH;KACF;CACF;AAED,MAAM,MAAM,aAAa,GACrB;IACE,MAAM,EAAE,MAAM,CAAC;CAChB,GACD;IACE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEN,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,mDAoE5C,CAAC"}
@@ -0,0 +1,53 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useEffect, useRef } from 'react';
3
+ import { useStyles } from './Metabase.styles';
4
+ export const Metabase = (props) => {
5
+ const styles = useStyles();
6
+ const scriptLoadedRef = useRef(false);
7
+ const configLoadedRef = useRef(false);
8
+ const isSourceFormat = 'source' in props && props.source;
9
+ const token = 'token' in props ? props.token : undefined;
10
+ const instanceUrl = 'instanceUrl' in props ? props.instanceUrl : undefined;
11
+ useEffect(() => {
12
+ if (!scriptLoadedRef.current && typeof window !== 'undefined' && instanceUrl) {
13
+ const existingScript = document.querySelector(`script[src="${instanceUrl}/app/embed.js"]`);
14
+ if (existingScript) {
15
+ scriptLoadedRef.current = true;
16
+ return;
17
+ }
18
+ const script = document.createElement('script');
19
+ script.src = `${instanceUrl}/app/embed.js`;
20
+ script.defer = true;
21
+ script.onload = () => {
22
+ scriptLoadedRef.current = true;
23
+ };
24
+ document.head.appendChild(script);
25
+ }
26
+ }, [instanceUrl]);
27
+ useEffect(() => {
28
+ if (!configLoadedRef.current && typeof window !== 'undefined' && instanceUrl) {
29
+ window.defineMetabaseConfig = (config) => {
30
+ window.metabaseConfig = config;
31
+ };
32
+ window.defineMetabaseConfig({
33
+ theme: {
34
+ preset: 'light',
35
+ },
36
+ isGuest: true,
37
+ instanceUrl: instanceUrl,
38
+ });
39
+ configLoadedRef.current = true;
40
+ }
41
+ }, [instanceUrl]);
42
+ if (isSourceFormat) {
43
+ return _jsx("iframe", { src: props.source, style: styles.metabase, frameBorder: "0" });
44
+ }
45
+ if (!token || !instanceUrl) {
46
+ return null;
47
+ }
48
+ return (_jsx("div", { style: styles.metabase, children: _jsx("metabase-dashboard", { token: token, "with-title": "true", "with-downloads": "true", style: {
49
+ width: '100%',
50
+ height: '100%',
51
+ display: 'block',
52
+ } }) }));
53
+ };
@@ -0,0 +1,2 @@
1
+ export * from './Metabase';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/Metabase/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
@@ -0,0 +1 @@
1
+ export * from './Metabase';
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ export declare const displayVersion: (version: string | undefined, build?: string) => string;
3
+ export type VersionProps = React.PropsWithoutRef<{}>;
4
+ export declare const Version: (_props: VersionProps) => import("react/jsx-runtime").JSX.Element;
5
+ //# sourceMappingURL=Version.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Version.d.ts","sourceRoot":"","sources":["../../../src/core/Version/Version.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,cAAc,GAAI,SAAS,MAAM,GAAG,SAAS,EAAE,QAAQ,MAAM,WAEzE,CAAC;AACF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;AACrD,eAAO,MAAM,OAAO,GAAI,QAAQ,YAAY,4CAa3C,CAAC"}
@@ -0,0 +1,15 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as Application from 'expo-application';
3
+ import Constants from 'expo-constants';
4
+ import { Typography } from '../Typography';
5
+ import { useStyles } from './Version.styles';
6
+ export const displayVersion = (version, build) => {
7
+ return `App version ${version}${build ? ` (build ${build})` : ''}`;
8
+ };
9
+ export const Version = (_props) => {
10
+ const styles = useStyles();
11
+ const version = Constants?.expoConfig?.version; // Provient du fichier package.json pour le Web
12
+ const sourceVersion = process.env.CONTAINER_VERSION; // https://doc.scalingo.com/platform/app/environment#build-environment-variables
13
+ const build = Application.nativeBuildVersion ?? sourceVersion;
14
+ return (_jsx(Typography, { tag: "version", style: styles.container, children: displayVersion(version, build) }));
15
+ };
@@ -0,0 +1,21 @@
1
+ declare const _default: {
2
+ title: string;
3
+ tags: ["Kit"];
4
+ experimental: false;
5
+ description: string;
6
+ component: (_props: import("./Version").VersionProps) => import("react/jsx-runtime").JSX.Element;
7
+ styleFn: () => {
8
+ container: {
9
+ color: "#5F6571";
10
+ fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
11
+ fontSize: 12;
12
+ lineHeight: 20;
13
+ letterSpacing: 0;
14
+ padding: import("@alveole/theme").Spacing;
15
+ textAlign: "center";
16
+ };
17
+ };
18
+ };
19
+ export default _default;
20
+ export declare const Default: () => import("react/jsx-runtime").JSX.Element;
21
+ //# sourceMappingURL=Version.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Version.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Version/Version.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAIA,wBAOkB;AAElB,eAAO,MAAM,OAAO,+CAAoB,CAAC"}
@@ -0,0 +1,12 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Version } from './Version';
3
+ import { useStyles } from './Version.styles';
4
+ export default {
5
+ title: 'Version',
6
+ tags: ['Kit'],
7
+ experimental: false,
8
+ description: "Affiche la version de l'app",
9
+ component: Version,
10
+ styleFn: useStyles,
11
+ };
12
+ export const Default = () => _jsx(Version, {});
@@ -0,0 +1,12 @@
1
+ export declare const useStyles: () => {
2
+ container: {
3
+ color: "#5F6571";
4
+ fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
5
+ fontSize: 12;
6
+ lineHeight: 20;
7
+ letterSpacing: 0;
8
+ padding: import("@alveole/theme").Spacing;
9
+ textAlign: "center";
10
+ };
11
+ };
12
+ //# sourceMappingURL=Version.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Version.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Version/Version.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;CAOnB,CAAC"}
@@ -0,0 +1,9 @@
1
+ import { makeStyles } from '@alveole/theme';
2
+ export const useStyles = makeStyles(({ text, color, spacing }) => ({
3
+ container: {
4
+ padding: spacing('075'),
5
+ textAlign: 'center',
6
+ ...text['Corps de texte'].XS.Regular,
7
+ color: color.light.text['mention-grey'],
8
+ },
9
+ }));
@@ -0,0 +1,2 @@
1
+ export * from './Version';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/Version/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
@@ -0,0 +1 @@
1
+ export * from './Version';
@@ -1,3 +1,6 @@
1
1
  export * from './Box';
2
+ export * from './Image';
3
+ export * from './Metabase';
2
4
  export * from './Typography';
5
+ export * from './Version';
3
6
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}
@@ -1,2 +1,5 @@
1
1
  export * from './Box';
2
+ export * from './Image';
3
+ export * from './Metabase';
2
4
  export * from './Typography';
5
+ export * from './Version';
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export * from './core';
2
2
  export * from './type';
3
+ export * from './ui';
3
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,MAAM,CAAC"}
package/dist/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from './core';
2
2
  export * from './type';
3
+ export * from './ui';
@@ -1,3 +1,9 @@
1
1
  export * as BoxStory from '../core/Box/Box.stories';
2
+ export * as ImageStory from '../core/Image/Image.stories';
3
+ export * as MetabaseStory from '../core/Metabase/Metabase.stories';
2
4
  export * as TypographyStory from '../core/Typography/Typography.stories';
5
+ export * as VersionStory from '../core/Version/Version.stories';
6
+ export * as ButtonStory from '../ui/Button/Button.stories';
7
+ export * as DividerStory from '../ui/Divider/Divider.stories';
8
+ export * as LucideIconStory from '../ui/LucideIcon/LucideIcon.stories';
3
9
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,eAAe,MAAM,uCAAuC,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,eAAe,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAGhE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC"}
@@ -1,2 +1,10 @@
1
+ // Core
1
2
  export * as BoxStory from '../core/Box/Box.stories';
3
+ export * as ImageStory from '../core/Image/Image.stories';
4
+ export * as MetabaseStory from '../core/Metabase/Metabase.stories';
2
5
  export * as TypographyStory from '../core/Typography/Typography.stories';
6
+ export * as VersionStory from '../core/Version/Version.stories';
7
+ // UI
8
+ export * as ButtonStory from '../ui/Button/Button.stories';
9
+ export * as DividerStory from '../ui/Divider/Divider.stories';
10
+ export * as LucideIconStory from '../ui/LucideIcon/LucideIcon.stories';
@@ -0,0 +1,31 @@
1
+ import React from 'react';
2
+ import { PressableProps, View } from 'react-native';
3
+ import { BoxProps } from '../../core';
4
+ import { IconProps } from '../LucideIcon';
5
+ export type ButtonProps = Omit<PressableProps, 'children' | 'style'> & {
6
+ title: string;
7
+ size?: 'xs' | 'sm' | 'md' | 'lg';
8
+ variant: 'primary' | 'secondary' | 'tertiary' | 'link';
9
+ startIcon?: IconProps['name'];
10
+ endIcon?: IconProps['name'];
11
+ ContainerProps?: BoxProps;
12
+ noPadding?: boolean;
13
+ borderNone?: boolean;
14
+ leftAlign?: boolean;
15
+ type?: 'button' | 'submit';
16
+ isLoading?: boolean;
17
+ };
18
+ export declare const Button: React.ForwardRefExoticComponent<Omit<PressableProps, "children" | "style"> & {
19
+ title: string;
20
+ size?: "xs" | "sm" | "md" | "lg";
21
+ variant: "primary" | "secondary" | "tertiary" | "link";
22
+ startIcon?: IconProps["name"];
23
+ endIcon?: IconProps["name"];
24
+ ContainerProps?: BoxProps;
25
+ noPadding?: boolean;
26
+ borderNone?: boolean;
27
+ leftAlign?: boolean;
28
+ type?: "button" | "submit";
29
+ isLoading?: boolean;
30
+ } & React.RefAttributes<View>>;
31
+ //# sourceMappingURL=Button.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAgC,cAAc,EAA8B,IAAI,EAAE,MAAM,cAAc,CAAC;AAC9G,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAOtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IACvD,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM;WAbV,MAAM;WACN,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;aACvB,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM;gBAC1C,SAAS,CAAC,MAAM,CAAC;cACnB,SAAS,CAAC,MAAM,CAAC;qBACV,QAAQ;gBACb,OAAO;iBACN,OAAO;gBACR,OAAO;WACZ,QAAQ,GAAG,QAAQ;gBACd,OAAO;8BA6JnB,CAAC"}