@alveole/storybook 0.42.1 → 0.43.0

package/dist/pages/UIKitPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UIKitPage.d.ts","sourceRoot":"","sources":["../../src/pages/UIKitPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,KAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAaF,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAwGF,eAAO,MAAM,SAAS,GAAI,6EAQvB,cAAc,6BAmHhB,CAAC"}
+{"version":3,"file":"UIKitPage.d.ts","sourceRoot":"","sources":["../../src/pages/UIKitPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,KAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAcF,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AA2GF,eAAO,MAAM,SAAS,GAAI,6EAQvB,cAAc,6BAwHhB,CAAC"}

package/dist/pages/UIKitPage.js

@@ -8,6 +8,7 @@ import { ThemeConstantDetailScreen } from '../screens/ThemeConstantDetailScreen'
 import { ThemeConstantsScreen } from '../screens/ThemeConstantsScreen';
 import { ThemePaletteScreen } from '../screens/ThemePaletteScreen';
 import { ThemeTypographyScreen } from '../screens/ThemeTypographyScreen';
+import { PhilosophyPage } from './PhilosophyPage';
 const MenuCard = ({ title, description, onPress }) => {
     const { text } = useTheme();
     return (_jsx(Card, { onPress: onPress, children: _jsxs(Box, { display: "flex", gap: 8, p: '150', children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: title }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: description })] }) }));
@@ -17,8 +18,8 @@ const InternalHeader = ({ canGoBack, onBack }) => {
         return null;
     return (_jsx(Section, { withPaddingY: true, children: _jsx(Box, { children: _jsx(Button, { title: "Retour", variant: "tertiary", size: "sm", onPress: onBack }) }) }));
 };
-const HomeScreen = ({ title, description, blankPage, onOpenComponents, onOpenTheme, onOpenConstants, onOpenBlank, }) => {
-    return (_jsx(Page, { scrollable: true, title: title, description: description, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(MenuCard, { title: "Composants", description: "Catalogue des composants et de leurs variantes.", onPress: onOpenComponents }), _jsx(MenuCard, { title: "Th\u00E8me", description: "Couleurs et typographies du design system.", onPress: onOpenTheme }), _jsx(MenuCard, { title: "Constantes", description: "Constantes expos\u00E9es par le th\u00E8me.", onPress: onOpenConstants }), blankPage ? (_jsx(MenuCard, { title: blankPage.title ?? 'Page vierge', description: blankPage.description ?? 'Espace de test libre pour expérimenter.', onPress: onOpenBlank })) : null] }) }) }));
+const HomeScreen = ({ title, description, blankPage, onOpenComponents, onOpenTheme, onOpenConstants, onOpenBlank, onOpenPhilosophy, }) => {
+    return (_jsx(Page, { scrollable: true, title: title, description: description, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(MenuCard, { title: "Composants", description: "Catalogue des composants et de leurs variantes.", onPress: onOpenComponents }), _jsx(MenuCard, { title: "Th\u00E8me", description: "Couleurs et typographies du design system.", onPress: onOpenTheme }), _jsx(MenuCard, { title: "Constantes", description: "Constantes expos\u00E9es par le th\u00E8me.", onPress: onOpenConstants }), _jsx(MenuCard, { title: "Philosophie", description: "Les principes qui guident Alveole.", onPress: onOpenPhilosophy }), blankPage ? (_jsx(MenuCard, { title: blankPage.title ?? 'Page vierge', description: blankPage.description ?? 'Espace de test libre pour expérimenter.', onPress: onOpenBlank })) : null] }) }) }));
 };
 const ThemeHomeScreen = ({ onOpenColors, onOpenTypography, beforeContent, }) => {
     return (_jsx(Page, { scrollable: true, title: "UI Kit - Th\u00E8me", description: "Tokens du th\u00E8me", beforeContent: beforeContent, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(MenuCard, { title: "Couleurs", description: "Palette et couleurs du th\u00E8me.", onPress: onOpenColors }), _jsx(MenuCard, { title: "Typographies", description: "Styles de texte et hi\u00E9rarchie typographique.", onPress: onOpenTypography })] }) }) }));
@@ -35,7 +36,7 @@ export const UIKitPage = ({ stories, constants, palette = CustomPalette, typogra
     }, []);
     const beforeContent = _jsx(InternalHeader, { canGoBack: canGoBack, onBack: goBack });
     if (route.name === 'home') {
-        return (_jsx(HomeScreen, { title: title, description: description, blankPage: blankPage, onOpenComponents: () => push({ name: 'components' }), onOpenTheme: () => push({ name: 'theme-home' }), onOpenConstants: () => push({ name: 'constants' }), onOpenBlank: () => push({ name: 'blank' }) }));
+        return (_jsx(HomeScreen, { title: title, description: description, blankPage: blankPage, onOpenComponents: () => push({ name: 'components' }), onOpenTheme: () => push({ name: 'theme-home' }), onOpenConstants: () => push({ name: 'constants' }), onOpenBlank: () => push({ name: 'blank' }), onOpenPhilosophy: () => push({ name: 'philosophy' }) }));
     }
     if (route.name === 'components') {
         return (_jsx(StoriesScreen, { beforeContent: beforeContent, stories: stories, title: "UI Kit - Composants", description: "Catalogue des composants", createLabel: blankPage ? (blankPage.title ?? 'Page vierge') : undefined, onCreatePress: blankPage ? () => push({ name: 'blank' }) : undefined, onSelectStory: story => push({ name: 'component-detail', story }) }));
@@ -58,6 +59,9 @@ export const UIKitPage = ({ stories, constants, palette = CustomPalette, typogra
     if (route.name === 'constant-detail') {
         return (_jsx(ThemeConstantDetailScreen, { beforeContent: beforeContent, name: route.constantName, value: route.constantValue }));
     }
+    if (route.name === 'philosophy') {
+        return _jsx(PhilosophyPage, { beforeContent: beforeContent });
+    }
     if (route.name === 'blank' && blankPage) {
         return (_jsx(Page, { scrollable: true, title: blankPage.title ?? 'Page vierge', description: blankPage.description ?? 'Zone de test libre', beforeContent: beforeContent, children: _jsx(Section, { withPaddingY: true, children: blankPage.render() }) }));
     }

package/dist/screens/ThemePaletteScreen.d.ts

@@ -1,13 +1,10 @@
-interface PaletteScale {
-    [key: string]: PaletteValue;
-}
-type PaletteValue = string | PaletteScale;
+import React from 'react';
 export type ThemePaletteScreenProps = {
-    palette: Record<string, PaletteValue>;
+    palette: Record<string, unknown>;
     title?: string;
     description?: string;
     beforeContent?: React.ReactNode;
+    footerContent?: React.ReactNode;
 };
-export declare const ThemePaletteScreen: ({ palette, title, description, beforeContent, }: ThemePaletteScreenProps) => import("react").JSX.Element;
-export {};
+export declare const ThemePaletteScreen: ({ palette, title, description, beforeContent, footerContent, }: ThemePaletteScreenProps) => React.JSX.Element;
 //# sourceMappingURL=ThemePaletteScreen.d.ts.map

package/dist/screens/ThemePaletteScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemePaletteScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemePaletteScreen.tsx"],"names":[],"mappings":"AAKA,UAAU,YAAY;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,CAAC;CAC7B;AAED,KAAK,YAAY,GAAG,MAAM,GAAG,YAAY,CAAC;AAmB1C,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,iDAKhC,uBAAuB,gCAuBzB,CAAC"}
+{"version":3,"file":"ThemePaletteScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemePaletteScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA+K1B,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,gEAMhC,uBAAuB,sBAsBzB,CAAC"}

package/dist/screens/ThemePaletteScreen.js

@@ -1,17 +1,117 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Card, Page, Section, Typography } from '@alveole/components';
+import { Box, Page, Section, Typography, useToast } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
-import { useWindowDimensions } from 'react-native';
-import { JsonBlock } from '../components/JsonBlock';
-const PaletteValueView = ({ label, value }) => {
-    const { text } = useTheme();
-    return (_jsxs(Box, { display: "flex", gap: 8, children: [label ? _jsx(Typography, { style: text['Corps de texte'].XS.SemiBold, children: label }) : null, typeof value === 'string' ? _jsx(Box, { height: 48, width: 48, borderRadius: 8, backgroundColor: value }) : null, _jsx(JsonBlock, { value: value }), typeof value === 'object'
-                ? Object.entries(value).map(([childLabel, childValue]) => (_jsx(PaletteValueView, { label: childLabel, value: childValue }, childLabel)))
-                : null] }));
+import React from 'react';
+import { Pressable } from 'react-native';
+function flattenColors(obj, prefix = '') {
+    const entries = [];
+    for (const [key, val] of Object.entries(obj)) {
+        const path = prefix ? `${prefix}.${key}` : key;
+        if (typeof val === 'string') {
+            entries.push({ path, value: val });
+        }
+        else if (val && typeof val === 'object') {
+            entries.push(...flattenColors(val, path));
+        }
+    }
+    return entries;
+}
+const DEPRECATED_KEYS = [
+    'primary',
+    'transparent',
+    'danger',
+    'info',
+    'success',
+    'warning',
+    'link',
+    'text',
+    'border',
+    'background',
+    'system',
+];
+function buildSections(palette) {
+    const sections = [];
+    for (const [modeKey, modeVal] of Object.entries(palette)) {
+        if (modeKey === 'light' || modeKey === 'dark') {
+            if (modeVal && typeof modeVal === 'object') {
+                for (const [groupKey, groupVal] of Object.entries(modeVal)) {
+                    const entries = flattenColors({ [groupKey]: groupVal }, modeKey);
+                    if (entries.length > 0) {
+                        sections.push({ title: `${modeKey} / ${groupKey}`, entries });
+                    }
+                }
+            }
+        }
+    }
+    const deprecatedEntries = [];
+    for (const key of DEPRECATED_KEYS) {
+        const val = palette[key];
+        if (val !== undefined) {
+            if (typeof val === 'string') {
+                deprecatedEntries.push({ path: key, value: val });
+            }
+            else if (val && typeof val === 'object') {
+                deprecatedEntries.push(...flattenColors(val, key));
+            }
+        }
+    }
+    if (deprecatedEntries.length > 0) {
+        sections.push({ title: 'Deprecated', entries: deprecatedEntries, deprecated: true });
+    }
+    return sections;
+}
+const ColorSwatch = ({ entry }) => {
+    const toast = useToast();
+    const { color, radius } = useTheme();
+    const tokenName = entry.path.split('.').pop() ?? entry.path;
+    const handleCopy = () => {
+        if (typeof navigator !== 'undefined' && navigator.clipboard) {
+            navigator.clipboard.writeText(entry.value).then(() => {
+                toast.present('Copié !', entry.value, { variant: 'success', duration: 1500 });
+            });
+        }
+    };
+    return (_jsx(Pressable, { onPress: handleCopy, style: { width: 120, marginBottom: 8 }, children: ({ pressed }) => (_jsxs(Box, { style: {
+                borderRadius: radius('md'),
+                overflow: 'hidden',
+                opacity: pressed ? 0.8 : 1,
+                borderWidth: 1,
+                borderColor: color.light.border['default-grey'],
+            }, children: [_jsx(Box, { style: { height: 56, backgroundColor: entry.value } }), _jsxs(Box, { style: {
+                        paddingHorizontal: 8,
+                        paddingVertical: 6,
+                        backgroundColor: color.light.background['default-grey'],
+                    }, children: [_jsx(Typography, { style: { fontSize: 11, fontWeight: '600', color: color.light.text['title-grey'], lineHeight: 14 }, numberOfLines: 1, children: tokenName }), _jsx(Typography, { style: {
+                                fontSize: 10,
+                                color: color.light.text['mention-grey'],
+                                fontFamily: 'monospace',
+                                lineHeight: 14,
+                                marginTop: 2,
+                            }, numberOfLines: 1, children: entry.value })] })] })) }));
 };
-export const ThemePaletteScreen = ({ palette, title = 'UI Kit - Theme colors', description = 'Theme palette', beforeContent, }) => {
-    const { text } = useTheme();
-    const { width } = useWindowDimensions();
-    const columns = width >= 1200 ? 3 : width >= 768 ? 2 : 1;
-    return (_jsx(Page, { scrollable: true, title: title, description: description, beforeContent: beforeContent, children: _jsx(Section, { withPaddingY: true, children: _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 16, children: Object.entries(palette).map(([key, value]) => (_jsx(Box, { width: columns === 1 ? '100%' : columns === 2 ? '48%' : '31%', children: _jsx(Card, { children: _jsxs(Box, { display: "flex", gap: 16, p: '100', children: [_jsx(Typography, { style: text.Titres['H5 - XS'], children: key }), _jsx(PaletteValueView, { value: value })] }) }) }, key))) }) }) }));
+const ColorSectionView = ({ section }) => {
+    const [collapsed, setCollapsed] = React.useState(section.deprecated === true);
+    const { color, radius } = useTheme();
+    return (_jsxs(Box, { style: { marginBottom: 24 }, children: [_jsx(Pressable, { onPress: () => setCollapsed(c => !c), children: _jsxs(Box, { style: {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        paddingVertical: 10,
+                        paddingHorizontal: 16,
+                        backgroundColor: color.light.background['alt-grey'],
+                        borderRadius: radius('md'),
+                        borderWidth: 1,
+                        borderColor: color.light.border['default-grey'],
+                        marginBottom: collapsed ? 0 : 12,
+                    }, children: [_jsx(Typography, { style: {
+                                fontSize: 13,
+                                fontWeight: '700',
+                                color: section.deprecated ? color.light.text['mention-grey'] : color.light.text['title-grey'],
+                                flex: 1,
+                                fontFamily: 'monospace',
+                            }, children: section.title }), _jsxs(Typography, { style: { fontSize: 11, color: color.light.text['mention-grey'], marginRight: 8 }, children: [section.entries.length, " token", section.entries.length > 1 ? 's' : ''] }), _jsx(Typography, { style: { fontSize: 12, color: color.light.text['mention-grey'] }, children: collapsed ? '▸' : '▾' })] }) }), !collapsed && (_jsx(Box, { style: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, paddingHorizontal: 4 }, children: section.entries.map(entry => (_jsx(ColorSwatch, { entry: entry }, entry.path))) }))] }));
+};
+export const ThemePaletteScreen = ({ palette, title = 'UI Kit - Couleurs du thème', description = 'Palette et couleurs du thème', beforeContent, footerContent, }) => {
+    const { color } = useTheme();
+    const sections = React.useMemo(() => buildSections(palette), [palette]);
+    return (_jsx(Page, { scrollable: true, title: title, description: description, beforeContent: beforeContent, footerContent: footerContent, children: _jsxs(Section, { withPaddingY: true, children: [_jsx(Typography, { style: { fontSize: 14, color: color.light.text['mention-grey'], marginBottom: 24 }, children: 'Cliquez sur un swatch pour copier sa valeur dans le presse-papiers.' }), sections.map(section => (_jsx(ColorSectionView, { section: section }, section.title)))] }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/storybook",
-  "version": "0.42.1",
+  "version": "0.43.0",
   "description": "Catalog screens and helpers for Alveole stories and theme tokens.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",