@alveole/storybook 0.26.0

package/README.md

@@ -0,0 +1,255 @@
+# @alveole/storybook
+
+Composants réutilisables pour exposer un catalogue de stories et de tokens de thème.
+
+Le package reprend les grandes parties du `ui-kit` de `groove-application/app/ui-kit`, mais sous une forme réutilisable et indépendante d'Expo Router.
+
+## Prérequis
+
+Le package est prévu pour être utilisé avec :
+
+- `@alveole/components`
+- `@alveole/theme`
+- `react`
+- `react-native`
+
+Il doit être rendu dans une app déjà enveloppée par `ThemeProvider`.
+
+## Exports disponibles
+
+Le package exporte :
+
+- `StoriesScreen`
+- `StoryDetailScreen`
+- `ThemeConstantsScreen`
+- `ThemeConstantDetailScreen`
+- `ThemePaletteScreen`
+- `ThemeTypographyScreen`
+- `JsonBlock`
+- les types `StorybookMeta`, `StorybookModule`, `StorybookFlag`, `StorybookFlagKey`
+- les helpers de `utils`
+
+## Ecriture recommandee des stories
+
+Le package `@alveole/storybook` est pense pour consommer directement les stories ecrites comme dans `packages/components`.
+
+Le pattern recommande est :
+
+- un `export default` qui satisfait le type `Story`
+- des `export const` pour chaque exemple rendu
+
+Exemple proche de l'ecriture actuelle de [Box.stories.tsx](/Users/corentincouq/Documents/alveole/packages/components/src/core/Box/Box.stories.tsx) :
+
+```tsx
+import { Story } from '../../type';
+import { Typography } from '../Typography';
+import { Box } from './Box';
+
+export default {
+  title: 'Box',
+  tags: ['Kit'],
+  experimental: false,
+  description: 'Description du composant',
+  component: Box,
+  styleFn: () => 'Aucun style applique',
+} satisfies Story;
+
+export const BoxDefault = () => (
+  <Box tag="box">
+    <Typography>Contenu par defaut</Typography>
+  </Box>
+);
+
+export const BoxPadded = () => (
+  <Box p={16}>
+    <Typography>Box avec padding</Typography>
+  </Box>
+);
+```
+
+Le `default` porte les metadonnees de la story. Les autres exports sont les variantes affichees par `StoryDetailScreen`.
+
+Concretement, `@alveole/storybook` n'introduit pas un nouveau format de story. Il reutilise celui que tu ecris deja dans `packages/components/src/**/*.stories.tsx`.
+
+## Structure attendue par le package
+
+Quand tu fais :
+
+```tsx
+import * as Stories from '@alveole/components/stories';
+```
+
+chaque module exporte se retrouve sous une forme equivalente a :
+
+```tsx
+import type { StorybookModule } from '@alveole/storybook';
+
+const ButtonStory = {
+  default: {
+    title: 'Button',
+    tags: ['Kit'],
+    experimental: false,
+    description: 'Boutons de l application',
+    figmaURL: 'https://figma.com/...',
+    styleFn: () => ({}),
+  },
+  Primary: () => <MyButton label="Primary" />,
+  Secondary: () => <MyButton label="Secondary" />,
+} satisfies StorybookModule;
+```
+
+Autrement dit :
+
+- `default` doit contenir les metadonnees
+- les autres exports doivent etre des composants React affichables
+- il ne faut pas rendre `StoriesScreen` ou `StoryDetailScreen` a l'interieur d'une story unitaire
+- le bon point d'entree est un ecran catalogue qui consomme `@alveole/components/stories`
+
+## Exemple minimal pour les stories
+
+```tsx
+import * as Stories from '@alveole/components/stories';
+import { StoriesScreen, StoryDetailScreen, type StorybookModule } from '@alveole/storybook';
+import React from 'react';
+
+const storyList = Object.values(Stories) as StorybookModule[];
+
+export const StoryCatalogPage = () => {
+  const [selectedStory, setSelectedStory] = React.useState<StorybookModule | null>(null);
+
+  if (selectedStory) {
+    return <StoryDetailScreen story={selectedStory} />;
+  }
+
+  return (
+    <StoriesScreen
+      stories={storyList}
+      title="UI Kit - Components"
+      description="Catalogue des composants"
+      onSelectStory={setSelectedStory}
+    />
+  );
+};
+```
+
+## Exemple avec Expo Router
+
+Le package ne crée pas les routes. Il fournit seulement les écrans. À toi de brancher la navigation.
+
+```tsx
+import * as Stories from '@alveole/components/stories';
+import { StoriesScreen, type StorybookModule } from '@alveole/storybook';
+import { router } from 'expo-router';
+
+const storyList = Object.values(Stories) as StorybookModule[];
+
+export default function UIKitStoriesRoute() {
+  return (
+    <StoriesScreen
+      stories={storyList}
+      onSelectStory={story => {
+        router.push(`/ui-kit/components/${encodeURIComponent(story.default.title)}`);
+      }}
+    />
+  );
+}
+```
+
+Puis dans la route de détail :
+
+```tsx
+import * as Stories from '@alveole/components/stories';
+import { StoryDetailScreen, type StorybookModule } from '@alveole/storybook';
+import { useLocalSearchParams } from 'expo-router';
+
+export default function UIKitStoryDetailRoute() {
+  const { component } = useLocalSearchParams<{ component: string }>();
+
+  const story = (Object.values(Stories) as StorybookModule[]).find(entry => entry.default.title === component) ?? null;
+
+  return <StoryDetailScreen story={story} />;
+}
+```
+
+## Exemple pour les constantes du thème
+
+```tsx
+import * as ThemeConstants from '@alveole/theme';
+import { ThemeConstantsScreen } from '@alveole/storybook';
+
+export default function ThemeConstantsPage() {
+  return (
+    <ThemeConstantsScreen constants={ThemeConstants} title="UI Kit - Constants" description="Constantes du thème" />
+  );
+}
+```
+
+## Exemple pour la palette
+
+```tsx
+import { CustomPalette } from '@alveole/theme';
+import { ThemePaletteScreen } from '@alveole/storybook';
+
+export default function ThemePalettePage() {
+  return <ThemePaletteScreen palette={CustomPalette} />;
+}
+```
+
+## Exemple pour la typographie
+
+```tsx
+import { CustomTypography } from '@alveole/theme';
+import { ThemeTypographyScreen } from '@alveole/storybook';
+
+export default function ThemeTypographyPage() {
+  return <ThemeTypographyScreen typography={CustomTypography} />;
+}
+```
+
+## Props principales
+
+### `StoriesScreen`
+
+- `stories`: liste des stories
+- `title`: titre de page
+- `description`: description de page
+- `emptyMessage`: message affiché si aucun résultat
+- `createLabel`: libellé du bouton d’action
+- `onCreatePress`: callback du bouton d’action
+- `onSelectStory`: callback au clic sur une story
+
+### `StoryDetailScreen`
+
+- `story`: story sélectionnée
+- `notFoundMessage`: message si la story est absente
+
+### `ThemeConstantsScreen`
+
+- `constants`: objet de constantes
+- `title`: titre de page
+- `description`: description de page
+- `onSelectConstant`: callback au clic sur une constante
+
+### `ThemeConstantDetailScreen`
+
+- `name`: nom de la constante
+- `value`: valeur de la constante
+
+### `ThemePaletteScreen`
+
+- `palette`: objet de palette
+- `title`: titre de page
+- `description`: description de page
+
+### `ThemeTypographyScreen`
+
+- `typography`: objet de tokens typo
+- `title`: titre de page
+- `description`: description de page
+
+## Notes
+
+- Le package n’embarque pas de moteur Storybook officiel.
+- Il ne dépend pas d’Expo Router, mais il est pensé pour s’y brancher facilement.
+- `StoryDetailScreen` ouvre le lien Figma via `Linking.openURL`.
+- Les vues de détail affichent les objets sous forme JSON via `JsonBlock`.

package/dist/components/FilterBadge.d.ts

@@ -0,0 +1,7 @@
+export type FilterBadgeProps = {
+    active: boolean;
+    label: string;
+    onPress: () => void;
+};
+export declare const FilterBadge: ({ active, label, onPress }: FilterBadgeProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FilterBadge.d.ts.map

package/dist/components/FilterBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBadge.d.ts","sourceRoot":"","sources":["../../src/components/FilterBadge.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,4BAA4B,gBAAgB,4CAQvE,CAAC"}

package/dist/components/FilterBadge.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge, Box } from '@alveole/components';
+import { Pressable } from 'react-native';
+export const FilterBadge = ({ active, label, onPress }) => (_jsx(Pressable, { onPress: onPress, children: _jsx(Box, { children: _jsx(Badge, { variant: active ? 'new' : 'default', size: "sm", children: label }) }) }));

package/dist/components/JsonBlock.d.ts

@@ -0,0 +1,5 @@
+export type JsonBlockProps = {
+    value: unknown;
+};
+export declare const JsonBlock: ({ value }: JsonBlockProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=JsonBlock.d.ts.map

package/dist/components/JsonBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonBlock.d.ts","sourceRoot":"","sources":["../../src/components/JsonBlock.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,WAAW,cAAc,4CAyBlD,CAAC"}

package/dist/components/JsonBlock.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+export const JsonBlock = ({ value }) => {
+    const { text, color, radius } = useTheme();
+    return (_jsx(Box, { backgroundColor: color.light.background['alt-grey'], borderColor: color.light.border['plain-grey'], borderRadius: radius('md'), borderWidth: 1, p: '100', width: '100%', children: _jsx(Typography, { style: [
+                text['Corps de texte'].SM.Regular,
+                {
+                    fontFamily: 'monospace',
+                    whiteSpace: 'pre-wrap',
+                },
+            ], children: typeof value === 'string' ? value : JSON.stringify(value, null, 2) }) }));
+};

package/dist/components/SearchField.d.ts

@@ -0,0 +1,8 @@
+export type SearchFieldProps = {
+    label: string;
+    placeholder?: string;
+    value: string;
+    onChangeText: (value: string) => void;
+};
+export declare const SearchField: ({ label, placeholder, value, onChangeText }: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SearchField.d.ts.map

package/dist/components/SearchField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../src/components/SearchField.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,6CAA6C,gBAAgB,4CAuBxF,CAAC"}

package/dist/components/SearchField.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import { TextInput } from 'react-native';
+export const SearchField = ({ label, placeholder, value, onChangeText }) => {
+    const { text, color, radius, spacing } = useTheme();
+    return (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: text['Corps de texte'].SM.SemiBold, children: label }), _jsx(TextInput, { placeholder: placeholder, value: value, onChangeText: onChangeText, placeholderTextColor: color.light.text['mention-grey'], style: {
+                    borderWidth: 1,
+                    borderColor: color.light.border['plain-grey'],
+                    borderRadius: radius('md'),
+                    paddingVertical: spacing('075'),
+                    paddingHorizontal: spacing('100'),
+                    backgroundColor: color.light.background['default-grey'],
+                    color: color.light.text['default-grey'],
+                } })] }));
+};

package/dist/components/StoryCard.d.ts

@@ -0,0 +1,7 @@
+import { StorybookModule } from '../types';
+export type StoryCardProps = {
+    story: StorybookModule;
+    onPress?: (story: StorybookModule) => void;
+};
+export declare const StoryCard: ({ story, onPress }: StoryCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StoryCard.d.ts.map

package/dist/components/StoryCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryCard.d.ts","sourceRoot":"","sources":["../../src/components/StoryCard.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,oBAAoB,cAAc,4CA2B3D,CAAC"}

package/dist/components/StoryCard.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Box, Card, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import { Pressable } from 'react-native';
+import { getStoryFlags } from '../utils';
+export const StoryCard = ({ story, onPress }) => {
+    const { text } = useTheme();
+    const meta = story.default;
+    const flags = getStoryFlags(meta);
+    return (_jsx(Pressable, { onPress: onPress ? () => onPress(story) : undefined, children: _jsx(Card, { height: '100%', children: _jsxs(Card.Section, { display: "flex", gap: 12, p: '100', children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [meta.tags.map(tag => (_jsx(Badge, { variant: "info", size: "sm", children: tag }, tag))), flags.map(flag => (_jsx(Badge, { variant: "default", size: "sm", children: flag.label }, flag.key)))] }), _jsx(Typography, { style: text.Titres['H5 - XS'], children: meta.title }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: meta.description })] }) }) }));
+};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export * from './components/JsonBlock';
+export * from './screens/StoriesScreen';
+export * from './screens/StoryDetailScreen';
+export * from './screens/ThemeConstantDetailScreen';
+export * from './screens/ThemeConstantsScreen';
+export * from './screens/ThemePaletteScreen';
+export * from './screens/ThemeTypographyScreen';
+export * from './types';
+export * from './utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iCAAiC,CAAC;AAChD,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,9 @@
+export * from './components/JsonBlock';
+export * from './screens/StoriesScreen';
+export * from './screens/StoryDetailScreen';
+export * from './screens/ThemeConstantDetailScreen';
+export * from './screens/ThemeConstantsScreen';
+export * from './screens/ThemePaletteScreen';
+export * from './screens/ThemeTypographyScreen';
+export * from './types';
+export * from './utils';

package/dist/screens/StoriesScreen.d.ts

@@ -0,0 +1,12 @@
+import { StorybookModule } from '../types';
+export type StoriesScreenProps = {
+    stories: StorybookModule[];
+    title?: string;
+    description?: string;
+    emptyMessage?: string;
+    createLabel?: string;
+    onCreatePress?: () => void;
+    onSelectStory?: (story: StorybookModule) => void;
+};
+export declare const StoriesScreen: ({ stories, title, description, emptyMessage, createLabel, onCreatePress, onSelectStory, }: StoriesScreenProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StoriesScreen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StoriesScreen.d.ts","sourceRoot":"","sources":["../../src/screens/StoriesScreen.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAiB,eAAe,EAAE,MAAM,UAAU,CAAC;AAW1D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,2FAQ3B,kBAAkB,4CAmGpB,CAAC"}

package/dist/screens/StoriesScreen.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Page, Section, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import { FilterBadge } from '../components/FilterBadge';
+import { SearchField } from '../components/SearchField';
+import { StoryCard } from '../components/StoryCard';
+import { filterStories, getAllStoryTags, groupStoriesByTag } from '../utils';
+const AVAILABLE_FLAGS = [
+    { key: 'figma', label: 'Figma' },
+    { key: 'experimental', label: 'Experimental' },
+    { key: 'props', label: 'Props' },
+    { key: 'webOnly', label: 'Web only' },
+    { key: 'mobileOnly', label: 'Mobile only' },
+];
+export const StoriesScreen = ({ stories, title = 'UI Kit - Components', description = 'Shared component catalog', emptyMessage = 'No story found.', createLabel, onCreatePress, onSelectStory, }) => {
+    const { text } = useTheme();
+    const { width } = useWindowDimensions();
+    const columns = width >= 1200 ? 3 : width >= 768 ? 2 : 1;
+    const [query, setQuery] = React.useState('');
+    const [selectedTag, setSelectedTag] = React.useState(null);
+    const [selectedFlag, setSelectedFlag] = React.useState(null);
+    const allTags = React.useMemo(() => getAllStoryTags(stories), [stories]);
+    const filteredStories = React.useMemo(() => filterStories({
+        stories,
+        query,
+        selectedTag,
+        selectedFlag,
+    }), [stories, query, selectedTag, selectedFlag]);
+    const groupedStories = React.useMemo(() => groupStoriesByTag(filteredStories, allTags), [filteredStories, allTags]);
+    return (_jsxs(Page, { scrollable: true, title: title, description: description, beforeContent: createLabel && onCreatePress ? (_jsx(Section, { withPaddingY: true, children: _jsx(Box, { style: { alignItems: 'flex-end' }, children: _jsx(Button, { title: createLabel, variant: "primary", onPress: onCreatePress }) }) })) : undefined, children: [_jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(SearchField, { label: "Search", placeholder: "Button, Tabs, Card...", value: query, onChangeText: setQuery }), _jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: text['Corps de texte'].SM.SemiBold, children: "Tags" }), _jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [_jsx(FilterBadge, { active: selectedTag === null, label: "All", onPress: () => setSelectedTag(null) }), allTags.map(tag => (_jsx(FilterBadge, { active: selectedTag === tag, label: tag, onPress: () => setSelectedTag(current => (current === tag ? null : tag)) }, tag)))] })] }), _jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: text['Corps de texte'].SM.SemiBold, children: "Flags" }), _jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [_jsx(FilterBadge, { active: selectedFlag === null, label: "All", onPress: () => setSelectedFlag(null) }), AVAILABLE_FLAGS.map(flag => (_jsx(FilterBadge, { active: selectedFlag === flag.key, label: flag.label, onPress: () => setSelectedFlag(current => (current === flag.key ? null : flag.key)) }, flag.key)))] })] }), _jsxs(Typography, { style: text['Corps de texte'].SM.Regular, children: [filteredStories.length, " result", filteredStories.length > 1 ? 's' : ''] })] }) }), groupedStories.length === 0 ? (_jsx(Section, { withPaddingY: true, children: _jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: emptyMessage }) })) : (groupedStories.map(([tag, taggedStories]) => (_jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: tag }), _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 16, children: taggedStories.map(story => (_jsx(Box, { width: columns === 1 ? '100%' : columns === 2 ? '48%' : '31%', children: _jsx(StoryCard, { story: story, onPress: onSelectStory }) }, story.default.title))) })] }) }, tag))))] }));
+};

package/dist/screens/StoryDetailScreen.d.ts

@@ -0,0 +1,7 @@
+import { StorybookModule } from '../types';
+export type StoryDetailScreenProps = {
+    story?: StorybookModule | null;
+    notFoundMessage?: string;
+};
+export declare const StoryDetailScreen: ({ story, notFoundMessage }: StoryDetailScreenProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StoryDetailScreen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StoryDetailScreen.d.ts","sourceRoot":"","sources":["../../src/screens/StoryDetailScreen.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,4BAAiD,sBAAsB,4CA4FxG,CAAC"}

package/dist/screens/StoryDetailScreen.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Divider, Page, Section, Tabs, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import { Linking } from 'react-native';
+import { JsonBlock } from '../components/JsonBlock';
+import { getStoryExamples, getStoryFlags } from '../utils';
+export const StoryDetailScreen = ({ story, notFoundMessage = 'Story not found.' }) => {
+    const { text } = useTheme();
+    if (!story) {
+        return (_jsx(Page, { title: "Story not found", description: notFoundMessage, children: _jsx(Section, { withPaddingY: true, children: _jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: notFoundMessage }) }) }));
+    }
+    const meta = story.default;
+    const flags = getStoryFlags(meta);
+    const examples = getStoryExamples(story);
+    const isTemplate = meta.tags.includes('Template');
+    const examplesContent = (_jsx(Box, { display: "flex", gap: 16, children: examples.map(([key, Example]) => (_jsxs(Box, { display: "flex", gap: 12, children: [!isTemplate ? _jsx(Typography, { style: text['Corps de texte'].SM.SemiBold, children: key }) : null, _jsx(Box, { borderColor: '#e8e8e8', borderWidth: 1, borderRadius: 8, p: '100', style: isTemplate ? { minHeight: 400 } : undefined, children: _jsx(Example, {}) }), _jsx(Divider, {})] }, key))) }));
+    return (_jsx(Page, { scrollable: true, title: meta.title, description: meta.description, children: _jsx(Section, { withPaddingY: true, children: _jsxs(Box, { display: "flex", gap: 16, children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [meta.tags.map(tag => (_jsx(Typography, { style: text['Corps de texte'].XS.SemiBold, children: tag }, tag))), flags.map(flag => (_jsx(Typography, { style: text['Corps de texte'].XS.Regular, children: flag.label }, flag.key)))] }), meta.figmaURL ? (_jsx(Box, { style: { alignItems: 'flex-start' }, children: _jsx(Button, { title: "Open Figma", variant: "primary", onPress: () => Linking.openURL(meta.figmaURL) }) })) : null, _jsx(Tabs, { defaultValue: "examples", tabs: [
+                            {
+                                value: 'examples',
+                                label: 'Examples',
+                                content: examplesContent,
+                                scrollable: true,
+                            },
+                            {
+                                value: 'styles',
+                                label: 'Styles',
+                                content: _jsx(JsonBlock, { value: meta.styleFn() }),
+                                scrollable: true,
+                            },
+                            ...(meta.props != null
+                                ? [
+                                    {
+                                        value: 'props',
+                                        label: 'Props',
+                                        content: _jsx(JsonBlock, { value: meta.props }),
+                                        scrollable: true,
+                                    },
+                                ]
+                                : []),
+                        ] })] }) }) }));
+};

package/dist/screens/ThemeConstantDetailScreen.d.ts

@@ -0,0 +1,6 @@
+export type ThemeConstantDetailScreenProps = {
+    name: string;
+    value: unknown;
+};
+export declare const ThemeConstantDetailScreen: ({ name, value }: ThemeConstantDetailScreenProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeConstantDetailScreen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeConstantDetailScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeConstantDetailScreen.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,8BAA8B,GAAG;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,iBAAiB,8BAA8B,4CAsBxF,CAAC"}

package/dist/screens/ThemeConstantDetailScreen.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Page, Section, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import { JsonBlock } from '../components/JsonBlock';
+export const ThemeConstantDetailScreen = ({ name, value }) => {
+    const { text } = useTheme();
+    const entries = typeof value === 'object' && value != null ? Object.entries(value) : [];
+    return (_jsx(Page, { scrollable: true, title: name, description: name, children: _jsx(Section, { withPaddingY: true, children: _jsx(Box, { display: "flex", gap: 16, children: entries.length === 0 ? (_jsx(JsonBlock, { value: value })) : (entries.map(([entryName, entryValue]) => (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: text.Titres['H6 - XXS'], children: entryName }), _jsx(JsonBlock, { value: entryValue })] }, entryName)))) }) }) }));
+};

package/dist/screens/ThemeConstantsScreen.d.ts

@@ -0,0 +1,11 @@
+export type ThemeConstantsScreenProps = {
+    constants: Record<string, unknown>;
+    title?: string;
+    description?: string;
+    onSelectConstant?: (entry: {
+        name: string;
+        value: unknown;
+    }) => void;
+};
+export declare const ThemeConstantsScreen: ({ constants, title, description, onSelectConstant, }: ThemeConstantsScreenProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeConstantsScreen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeConstantsScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeConstantsScreen.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CACtE,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,sDAKlC,yBAAyB,4CAgC3B,CAAC"}

package/dist/screens/ThemeConstantsScreen.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Card, Page, Section, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import React from 'react';
+import { Pressable, useWindowDimensions } from 'react-native';
+export const ThemeConstantsScreen = ({ constants, title = 'UI Kit - Constants', description = 'Theme constants', onSelectConstant, }) => {
+    const { text } = useTheme();
+    const { width } = useWindowDimensions();
+    const columns = width >= 1200 ? 3 : width >= 768 ? 2 : 1;
+    const entries = React.useMemo(() => Object.entries(constants)
+        .filter(([, value]) => typeof value === 'object' && value != null)
+        .sort((left, right) => left[0].localeCompare(right[0])), [constants]);
+    return (_jsx(Page, { scrollable: true, title: title, description: description, children: _jsx(Section, { withPaddingY: true, children: _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 16, children: entries.map(([name, value]) => (_jsx(Box, { width: columns === 1 ? '100%' : columns === 2 ? '48%' : '31%', children: _jsx(Pressable, { onPress: onSelectConstant ? () => onSelectConstant({ name, value }) : undefined, children: _jsx(Card, { children: _jsx(Card.Section, { p: '100', children: _jsx(Typography, { style: text.Titres['H5 - XS'], children: name }) }) }) }) }, name))) }) }) }));
+};

package/dist/screens/ThemePaletteScreen.d.ts

@@ -0,0 +1,12 @@
+interface PaletteScale {
+    [key: string]: PaletteValue;
+}
+type PaletteValue = string | PaletteScale;
+export type ThemePaletteScreenProps = {
+    palette: Record<string, PaletteValue>;
+    title?: string;
+    description?: string;
+};
+export declare const ThemePaletteScreen: ({ palette, title, description, }: ThemePaletteScreenProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ThemePaletteScreen.d.ts.map

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

@@ -0,0 +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;CACtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,kCAIhC,uBAAuB,4CAuBzB,CAAC"}

package/dist/screens/ThemePaletteScreen.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Card, Page, Section, Typography } 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] }));
+};
+export const ThemePaletteScreen = ({ palette, title = 'UI Kit - Theme colors', description = 'Theme palette', }) => {
+    const { text } = useTheme();
+    const { width } = useWindowDimensions();
+    const columns = width >= 1200 ? 3 : width >= 768 ? 2 : 1;
+    return (_jsx(Page, { scrollable: true, title: title, description: description, 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(Card.Section, { display: "flex", gap: 16, p: '100', children: [_jsx(Typography, { style: text.Titres['H5 - XS'], children: key }), _jsx(PaletteValueView, { value: value })] }) }) }, key))) }) }) }));
+};

package/dist/screens/ThemeTypographyScreen.d.ts

@@ -0,0 +1,7 @@
+export type ThemeTypographyScreenProps = {
+    typography: Record<string, unknown>;
+    title?: string;
+    description?: string;
+};
+export declare const ThemeTypographyScreen: ({ typography, title, description, }: ThemeTypographyScreenProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeTypographyScreen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeTypographyScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ThemeTypographyScreen.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG;IACvC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,qCAInC,0BAA0B,4CAgC5B,CAAC"}

package/dist/screens/ThemeTypographyScreen.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Card, Page, Section, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import { useWindowDimensions } from 'react-native';
+import { JsonBlock } from '../components/JsonBlock';
+export const ThemeTypographyScreen = ({ typography, title = 'UI Kit - Theme typography', description = 'Theme text styles', }) => {
+    const { text } = useTheme();
+    const { width } = useWindowDimensions();
+    const columns = width >= 1200 ? 3 : width >= 768 ? 2 : 1;
+    return (_jsx(Page, { scrollable: true, title: title, description: description, children: _jsx(Section, { withPaddingY: true, children: _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 16, children: Object.entries(typography).map(([key, value]) => (_jsx(Box, { width: columns === 1 ? '100%' : columns === 2 ? '48%' : '31%', children: _jsx(Card, { children: _jsxs(Card.Section, { display: "flex", gap: 16, p: '100', children: [_jsx(Typography, { style: text.Titres['H5 - XS'], children: key }), typeof value === 'object' && value != null ? (Object.entries(value).map(([subKey, subValue]) => (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Typography, { style: text['Corps de texte'].XS.SemiBold, children: subKey }), _jsx(JsonBlock, { value: subValue })] }, subKey)))) : (_jsx(JsonBlock, { value: value }))] }) }) }, key))) }) }) }));
+};

package/dist/types.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export type StorybookTag = 'Kit' | 'Composant' | 'Template' | (string & {});
+export type StorybookMeta = {
+    title: string;
+    tags: readonly StorybookTag[];
+    experimental: boolean;
+    figmaURL?: string;
+    mobileOnly?: boolean;
+    webOnly?: boolean;
+    description: string;
+    component?: React.ComponentType<any>;
+    config?: object;
+    props?: unknown;
+    styleFn: () => string | object;
+};
+export type StorybookExample = React.ComponentType<any>;
+export type StorybookModule<TMeta extends StorybookMeta = StorybookMeta> = {
+    default: TMeta;
+} & Record<string, StorybookExample | TMeta>;
+export type StorybookFlagKey = 'figma' | 'experimental' | 'props' | 'webOnly' | 'mobileOnly';
+export type StorybookFlag = {
+    key: StorybookFlagKey;
+    label: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,WAAW,GAAG,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAE5E,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,YAAY,EAAE,CAAC;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;AAExD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,aAAa,GAAG,aAAa,IAAI;IACzE,OAAO,EAAE,KAAK,CAAC;CAChB,GAAG,MAAM,CAAC,MAAM,EAAE,gBAAgB,GAAG,KAAK,CAAC,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,CAAC;AAE7F,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,gBAAgB,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,14 @@
+import { StorybookFlag, StorybookMeta, StorybookModule } from './types';
+export declare const normalizeText: (value: string) => string;
+export declare const getStoryFlags: (meta: StorybookMeta) => StorybookFlag[];
+export declare const getAllStoryTags: (stories: StorybookModule[]) => string[];
+export declare const filterStories: (params: {
+    stories: StorybookModule[];
+    query: string;
+    selectedTag: string | null;
+    selectedFlag: StorybookFlag["key"] | null;
+}) => StorybookModule[];
+export declare const sortStoriesByTitle: (stories: StorybookModule[]) => StorybookModule[];
+export declare const groupStoriesByTag: (stories: StorybookModule[], tags: string[]) => (readonly [string, StorybookModule[]])[];
+export declare const getStoryExamples: (story: StorybookModule) => [string, Exclude<StorybookModule[keyof StorybookModule], StorybookMeta>][];
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAUxE,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,WAIP,CAAC;AAErC,eAAO,MAAM,aAAa,GAAI,MAAM,aAAa,KAAG,aAAa,EAC+B,CAAC;AAEjG,eAAO,MAAM,eAAe,GAAI,SAAS,eAAe,EAAE,KAAG,MAAM,EAOlE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,QAAQ;IACpC,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;CAC3C,sBAoBA,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,SAAS,eAAe,EAAE,sBAC8B,CAAC;AAE5F,eAAO,MAAM,iBAAiB,GAAI,SAAS,eAAe,EAAE,EAAE,MAAM,MAAM,EAAE,6CAGd,CAAC;AAE/D,eAAO,MAAM,gBAAgB,GAAI,OAAO,eAAe,KAC+C,CAClG,MAAM,EACN,OAAO,CAAC,eAAe,CAAC,MAAM,eAAe,CAAC,EAAE,aAAa,CAAC,CAC/D,EAAE,CAAC"}

package/dist/utils.js

@@ -0,0 +1,45 @@
+const FLAG_DEFINITIONS = [
+    { key: 'figma', label: 'Figma', isActive: (meta) => Boolean(meta.figmaURL) },
+    { key: 'experimental', label: 'Experimental', isActive: (meta) => Boolean(meta.experimental) },
+    { key: 'props', label: 'Props', isActive: (meta) => meta.props != null },
+    { key: 'webOnly', label: 'Web only', isActive: (meta) => Boolean(meta.webOnly) },
+    { key: 'mobileOnly', label: 'Mobile only', isActive: (meta) => Boolean(meta.mobileOnly) },
+];
+export const normalizeText = (value) => value
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '');
+export const getStoryFlags = (meta) => FLAG_DEFINITIONS.filter(flag => flag.isActive(meta)).map(({ key, label }) => ({ key, label }));
+export const getAllStoryTags = (stories) => {
+    const tags = new Set();
+    for (const story of stories) {
+        for (const tag of story.default.tags)
+            tags.add(tag);
+    }
+    return Array.from(tags).sort((left, right) => left.localeCompare(right));
+};
+export const filterStories = (params) => {
+    const { stories, query, selectedTag, selectedFlag } = params;
+    const normalizedQuery = normalizeText(query.trim());
+    return stories.filter(story => {
+        const meta = story.default;
+        const matchesQuery = normalizedQuery.length === 0 ||
+            normalizeText(meta.title).includes(normalizedQuery) ||
+            normalizeText(meta.description).includes(normalizedQuery);
+        if (!matchesQuery)
+            return false;
+        if (selectedTag && !meta.tags.includes(selectedTag))
+            return false;
+        if (selectedFlag) {
+            const definition = FLAG_DEFINITIONS.find(flag => flag.key === selectedFlag);
+            if (definition && !definition.isActive(meta))
+                return false;
+        }
+        return true;
+    });
+};
+export const sortStoriesByTitle = (stories) => [...stories].sort((left, right) => left.default.title.localeCompare(right.default.title));
+export const groupStoriesByTag = (stories, tags) => tags
+    .map(tag => [tag, stories.filter(story => story.default.tags.includes(tag))])
+    .filter(([, groupedStories]) => groupedStories.length > 0);
+export const getStoryExamples = (story) => Object.entries(story).filter(([key, value]) => key !== 'default' && typeof value === 'function');

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@alveole/storybook",
+  "version": "0.26.0",
+  "description": "Catalog screens and helpers for Alveole stories and theme tokens.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "lint": "eslint .",
+    "typecheck": "tsc -p tsconfig.typecheck.json --noEmit"
+  },
+  "devDependencies": {
+    "@alveole/eslint-config": "file:../eslint-config",
+    "eslint": "^9.39.2"
+  },
+  "peerDependencies": {
+    "@alveole/components": "*",
+    "@alveole/theme": "*",
+    "react": "*",
+    "react-native": "*"
+  }
+}