@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/ui/Sidebar/Sidebar.stories.d.ts

@@ -2,85 +2,75 @@ declare const _default: {
     title: string;
     tags: "ui"[];
     experimental: false;
+    webOnly: true;
     figmaURL: string;
     description: string;
     shortDescription: string;
     component: (props: import("./Sidebar").SidebarProps) => import("react").JSX.Element;
     styleFn: () => {
-        sidebar: {
-            backgroundColor: "#FFFFFF";
-            borderRightWidth: number;
-            borderColor: string;
-            display: "flex";
-            flexDirection: "column";
-            alignItems: "flex-start";
-            alignSelf: "stretch";
-        };
-        header: {};
-        headerContent: {
-            display: "flex";
-            flexDirection: "row";
-            padding: import("@alveole/theme").Spacing;
-        };
-        logo: {
-            marginLeft: string | number;
+        sidebarItemSelectedIndicator: {
+            height: "100%";
+            width: import("@alveole/theme").Spacing;
+            position: "absolute";
+            left: number;
         };
-        sidebarContent: {
-            flex: number;
-            justifyContent: "space-between";
+        sidebarItemSelectedIndicatorContent: {
             width: "100%";
+            minHeight: string | number;
+            backgroundColor: string;
+            margin: string;
+            borderRadius: string | number;
         };
-        scrollView: {
-            flex: number;
-            paddingTop: string | number;
-            paddingBottom: string | number;
-            zIndex: number;
-            backgroundColor: "#FFFFFF";
-        };
-        groupTitleDesktop: {
-            paddingLeft: string | number;
-            paddingTop: string | number;
-            fontSize: 12;
+        sidebarItemTitleSelectedDesktop: {
+            color: string;
+            stroke: string;
+            fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        groupTitleMobile: {
+        sidebarItemTitleSelectedMobile: {
             color: string;
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            paddingTop: string | number;
-            paddingBottom: string | number;
+            stroke: string;
             fontSize: 16;
             lineHeight: 24;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        sidebarItemDesktop: {
-            borderRadius: string | number;
-            display: "flex";
-            flexDirection: "row";
-            alignItems: "center";
-            gap: string | number;
-            padding: string | number;
-            width: "100%";
+        sidebarItemTitleDesktop: {
             color: string;
             stroke: string;
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        sidebarItemMobile: {
-            display: "flex";
-            flexDirection: "row";
-            alignItems: "center";
-            gap: string | number;
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            paddingTop: string | number;
-            paddingBottom: string | number;
-            width: "100%";
+        sidebarItemTitleMobile: {
             color: string;
             stroke: string;
+            fontSize: 16;
+            lineHeight: 24;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        sidebarItemTitleCurrentHoverDesktop: {
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        sidebarItemTitleCurrentHoverMobile: {
+            color: string;
+            fontSize: 16;
+            lineHeight: 24;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         sidebarItemSelectedDesktop: {
             backgroundColor: string;
@@ -89,12 +79,6 @@ declare const _default: {
             borderRadius: import("@alveole/theme").Radius;
             backgroundColor: string;
         };
-        sidebarItemHover: {
-            backgroundColor: string;
-        };
-        sidebarItemCurrentHover: {
-            backgroundColor: "#EFF1F6";
-        };
         sidebarItemContainerDesktop: {
             paddingLeft: string | number;
             paddingRight: string | number;
@@ -117,92 +101,96 @@ declare const _default: {
             marginLeft: string | number;
             marginRight: string | number;
         };
-        sidebarItemTitleSelectedDesktop: {
+        sidebarItemDesktop: {
+            borderRadius: string | number;
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            gap: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+            width: "100%";
             color: string;
             stroke: string;
-            fontSize: 16;
-            lineHeight: 24;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        sidebarItemTitleSelectedMobile: {
+        sidebarItemMobile: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            gap: string | number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+            width: "100%";
             color: string;
             stroke: string;
-            fontSize: 16;
-            lineHeight: 24;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        sidebarItemTitleDesktop: {
+        sidebarItemHover: {
+            backgroundColor: string;
+        };
+        groupDesktop: {
+            marginTop: string | number;
+        };
+        groupTitleDesktop: {
             color: string;
-            stroke: string;
-            fontSize: 16;
-            lineHeight: 24;
+            paddingLeft: number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+            fontSize: 12;
+            lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        sidebarItemTitleMobile: {
+        groupTitleMobile: {
             color: string;
-            stroke: string;
-            fontSize: 16;
-            lineHeight: 24;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+            fontSize: 14;
+            lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        sidebarItemTitleCurrentHoverDesktop: {
-            fontSize: 16;
-            lineHeight: 24;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        sidebar: {
+            backgroundColor: "#FFFFFF";
+            borderRightWidth: number;
+            borderColor: string;
+            display: "flex";
+            flexDirection: "column";
+            alignItems: "flex-start";
+            alignSelf: "stretch";
         };
-        sidebarItemTitleCurrentHoverMobile: {
-            color: string;
-            fontSize: 16;
-            lineHeight: 24;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        header: {};
+        headerContent: {
+            display: "flex";
+            flexDirection: "row";
+            padding: import("@alveole/theme").Spacing;
         };
-        sidebarItemSelectedIndicator: {
-            height: "100%";
-            width: import("@alveole/theme").Spacing;
-            position: "absolute";
-            left: number;
+        logo: {
+            marginLeft: string | number;
         };
-        sidebarItemSelectedIndicatorContent: {
+        sidebarContent: {
+            flex: number;
+            justifyContent: "space-between";
             width: "100%";
-            minHeight: string | number;
-            backgroundColor: string;
-            margin: string;
-            borderRadius: string | number;
+        };
+        scrollView: {
+            flex: number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+            zIndex: number;
+            backgroundColor: "#FFFFFF";
         };
     };
 };
 export default _default;
-/**
- * Exemple d'intégration complète du composant avec un contrôleur, un logo et un footer.
- *
- * ```tsx
- * <Sidebar
- *   controller={sidebarController}
- *   logo={<Image source={require('../../assets/logo.png')} />}
- *   footer={<Button borderNone variant="tertiary" title="Se déconnecter" onPress={onLogout} />}
- * >
- *   <SidebarItem title="Item 1" href="/admin/item-1" routeName="item-1" />
- *   <SidebarItem title="Item 2" href="/admin/item-2" routeName="item-2" />
- *
- *   <SidebarGroup title="Groupe">
- *     <SidebarItem title="Item group 1" href="/admin/gp-item-2" routeName="gp-item-1" />
- *     <SidebarItem title="Item group 2" href="/admin/gp-item-2" routeName="gp-item-2" />
- *   </SidebarGroup>
- * </Sidebar>
- * ```
- */
-export declare const ExampleUsage: () => null;
+export declare const ExampleUsage: () => import("react").JSX.Element;
+export declare const AvecHeaderEtFooter: () => import("react").JSX.Element;
 export * as Sources from './Sidebar.stories.sources';
 //# sourceMappingURL=Sidebar.stories.d.ts.map

package/dist/ui/Sidebar/Sidebar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBAWkB;AAElB;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,YAAa,CAAC;AAEvC,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"Sidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,wBAYkB;AAElB,eAAO,MAAM,YAAY,mCAsBxB,CAAC;AAaF,eAAO,MAAM,kBAAkB,mCA6D9B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}

package/dist/ui/Sidebar/Sidebar.stories.js

@@ -1,33 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Typography } from '../../core/Typography';
+import { ActionMenu } from '../ActionMenu';
+import { Avatar } from '../Avatar';
+import { Button } from '../Button';
 import { Sidebar } from './Sidebar';
 import { useStyles } from './Sidebar.styles';
+import { SidebarDivider } from './SidebarDivider';
+import { SidebarGroup } from './SidebarGroup';
+import { SidebarItem } from './SidebarItem';
+import { useSidebar } from './useSidebar';
 export default {
     title: 'Sidebar',
     tags: ['ui'],
     experimental: false,
+    webOnly: true,
     figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1328-725',
     description: "SideNav est un composant de navigation primaire qui permet d'accéder aux principales sections d'une application. Navigation coté droit, se transformant en menu burger sur mobile. Uitliser `<SidebarItem>` et `<SidebarGroup>`.",
     shortDescription: 'Navigation primaire latérale. Se transforme en menu burger sur mobile. À utiliser avec SidebarItem et SidebarGroup.',
     component: Sidebar,
     styleFn: useStyles,
 };
-/**
- * Exemple d'intégration complète du composant avec un contrôleur, un logo et un footer.
- *
- * ```tsx
- * <Sidebar
- *   controller={sidebarController}
- *   logo={<Image source={require('../../assets/logo.png')} />}
- *   footer={<Button borderNone variant="tertiary" title="Se déconnecter" onPress={onLogout} />}
- * >
- *   <SidebarItem title="Item 1" href="/admin/item-1" routeName="item-1" />
- *   <SidebarItem title="Item 2" href="/admin/item-2" routeName="item-2" />
- *
- *   <SidebarGroup title="Groupe">
- *     <SidebarItem title="Item group 1" href="/admin/gp-item-2" routeName="gp-item-1" />
- *     <SidebarItem title="Item group 2" href="/admin/gp-item-2" routeName="gp-item-2" />
- *   </SidebarGroup>
- * </Sidebar>
- * ```
- */
-export const ExampleUsage = () => null;
+export const ExampleUsage = () => {
+    const controller = useSidebar();
+    return (_jsxs(Sidebar, { controller: controller, logo: _jsx(Typography, { fontSize: 16, style: { fontWeight: '700' }, children: "Mon Application" }), footer: _jsx(SidebarItem, { pressable: true, leading: "LogOut", title: "Se d\u00E9connecter", onPress: console.log }), children: [_jsx(SidebarItem, { pressable: true, title: "Item 1", onPress: console.log }), _jsx(SidebarItem, { pressable: true, title: "Item 2", onPress: console.log }), _jsxs(SidebarGroup, { title: "Groupe", children: [_jsx(SidebarItem, { pressable: true, title: "Item group 1", onPress: console.log }), _jsx(SidebarItem, { pressable: true, title: "Item group 2", onPress: console.log })] })] }));
+};
+// Faute de logo publie pour Alveole, une forme generee tient lieu de logo.
+const organisations = [
+    { nom: 'Alveole', logo: 'https://api.dicebear.com/9.x/shapes/png?seed=Alveole&size=64' },
+    { nom: 'Captive', logo: 'https://www.google.com/s2/favicons?domain=captive.fr&sz=64' },
+    { nom: 'Bonne Gueule', logo: 'https://www.google.com/s2/favicons?domain=bonnegueule.fr&sz=64' },
+];
+const LogoDOrganisation = ({ nom }) => (_jsx(Avatar, { size: "xs", carre: true, src: organisations.find(o => o.nom === nom)?.logo, fallbackText: nom }));
+export const AvecHeaderEtFooter = () => {
+    const [orga, setOrga] = useState('Alveole');
+    const logo = (_jsx(ActionMenu, { placement: "bottom-start", renderTrigger: () => (_jsx(Button, { variant: "tertiary", size: "md", contentAlign: "start", title: orga, leading: _jsx(LogoDOrganisation, { nom: orga }), trailing: "ChevronDown" })), children: organisations.map(({ nom }) => (_jsx(ActionMenu.Item, { title: nom, leading: _jsx(LogoDOrganisation, { nom: nom }), selected: nom === orga, onPress: () => setOrga(nom) }, nom))) }));
+    const footer = (_jsxs(ActionMenu, { placement: "top-start", renderTrigger: () => (_jsx(Button, { variant: "tertiary", size: "lg", contentAlign: "start", title: "Cl\u00E9ment Prod'homme", leading: _jsx(Avatar, { size: "sm", src: "https://www.loremfaces.net/96/id/1.jpg", fallbackText: "Cl\u00E9ment Prod'homme" }) })), children: [_jsx(ActionMenu.Item, { title: "Mon profil", leading: "User" }), _jsx(ActionMenu.Item, { title: "Param\u00E8tres", leading: "Settings" }), _jsx(ActionMenu.Item, { title: "Aide", leading: "HelpCircle" }), _jsx(ActionMenu.Item, { title: "Se d\u00E9connecter", leading: "LogOut" })] }));
+    return (_jsxs(Sidebar, { logo: logo, footer: footer, children: [_jsx(SidebarItem, { pressable: true, leading: "LayoutDashboard", title: "Tableau de bord", onPress: console.log }), _jsx(SidebarItem, { pressable: true, leading: "Users", title: "Utilisateurs", onPress: console.log }), _jsx(SidebarItem, { pressable: true, leading: "FileText", title: "Rapports", onPress: console.log }), _jsx(SidebarDivider, {}), _jsx(SidebarItem, { pressable: true, leading: "Settings", title: "Configuration", onPress: console.log }), _jsx(SidebarItem, { pressable: true, leading: "Bell", title: "Notifications", onPress: console.log })] }));
+};
 export * as Sources from './Sidebar.stories.sources';

package/dist/ui/Sidebar/Sidebar.stories.sources.d.ts

@@ -1,7 +1,8 @@
 export declare const ExampleUsage: () => string;
+export declare const AvecHeaderEtFooter: () => string;
 export declare const storySources: {
     readonly ExampleUsage: () => string;
+    readonly AvecHeaderEtFooter: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
-export declare const storyDescriptions: Partial<Record<StorySourceName, string>>;
 //# sourceMappingURL=Sidebar.stories.sources.d.ts.map

package/dist/ui/Sidebar/Sidebar.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,cAAkD,CAAC;AAE5E,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}
+{"version":3,"file":"Sidebar.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,cAAqxB,CAAC;AAE/yB,eAAO,MAAM,kBAAkB,cAA2/D,CAAC;AAE3hE,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/Sidebar/Sidebar.stories.sources.js

@@ -1,9 +1,8 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Sidebar/Sidebar.stories.tsx
-export const ExampleUsage = () => "export const ExampleUsage = () => null;";
+export const ExampleUsage = () => "export const ExampleUsage = () => {\n  const controller = useSidebar();\n\n  return (\n    <Sidebar\n      controller={controller}\n      logo={\n        <Typography fontSize={16} style={{ fontWeight: '700' }}>\n          Mon Application\n        </Typography>\n      }\n      footer={<SidebarItem pressable leading=\"LogOut\" title=\"Se déconnecter\" onPress={console.log} />}\n    >\n      <SidebarItem pressable title=\"Item 1\" onPress={console.log} />\n      <SidebarItem pressable title=\"Item 2\" onPress={console.log} />\n\n      <SidebarGroup title=\"Groupe\">\n        <SidebarItem pressable title=\"Item group 1\" onPress={console.log} />\n        <SidebarItem pressable title=\"Item group 2\" onPress={console.log} />\n      </SidebarGroup>\n    </Sidebar>\n  );\n};";
+export const AvecHeaderEtFooter = () => "export const AvecHeaderEtFooter = () => {\n  const [orga, setOrga] = useState('Alveole');\n\n  const logo = (\n    <ActionMenu\n      placement=\"bottom-start\"\n      renderTrigger={() => (\n        <Button\n          variant=\"tertiary\"\n          size=\"md\"\n          contentAlign=\"start\"\n          title={orga}\n          leading={<LogoDOrganisation nom={orga} />}\n          trailing=\"ChevronDown\"\n        />\n      )}\n    >\n      {organisations.map(({ nom }) => (\n        <ActionMenu.Item\n          key={nom}\n          title={nom}\n          leading={<LogoDOrganisation nom={nom} />}\n          selected={nom === orga}\n          onPress={() => setOrga(nom)}\n        />\n      ))}\n    </ActionMenu>\n  );\n\n  const footer = (\n    <ActionMenu\n      placement=\"top-start\"\n      renderTrigger={() => (\n        <Button\n          variant=\"tertiary\"\n          size=\"lg\"\n          contentAlign=\"start\"\n          title=\"Clément Prod'homme\"\n          leading={<Avatar size=\"sm\" src=\"https://www.loremfaces.net/96/id/1.jpg\" fallbackText=\"Clément Prod'homme\" />}\n        />\n      )}\n    >\n      <ActionMenu.Item title=\"Mon profil\" leading=\"User\" />\n      <ActionMenu.Item title=\"Paramètres\" leading=\"Settings\" />\n      <ActionMenu.Item title=\"Aide\" leading=\"HelpCircle\" />\n      <ActionMenu.Item title=\"Se déconnecter\" leading=\"LogOut\" />\n    </ActionMenu>\n  );\n\n  return (\n    <Sidebar logo={logo} footer={footer}>\n      <SidebarItem pressable leading=\"LayoutDashboard\" title=\"Tableau de bord\" onPress={console.log} />\n      <SidebarItem pressable leading=\"Users\" title=\"Utilisateurs\" onPress={console.log} />\n      <SidebarItem pressable leading=\"FileText\" title=\"Rapports\" onPress={console.log} />\n\n      <SidebarDivider />\n\n      <SidebarItem pressable leading=\"Settings\" title=\"Configuration\" onPress={console.log} />\n      <SidebarItem pressable leading=\"Bell\" title=\"Notifications\" onPress={console.log} />\n    </Sidebar>\n  );\n};";
 export const storySources = {
     ExampleUsage,
-};
-export const storyDescriptions = {
-    ExampleUsage: "Exemple d'intégration complète du composant avec un contrôleur, un logo et un footer.\n\n```tsx\n<Sidebar\n  controller={sidebarController}\n  logo={<Image source={require('../../assets/logo.png')} />}\n  footer={<Button borderNone variant=\"tertiary\" title=\"Se déconnecter\" onPress={onLogout} />}\n>\n  <SidebarItem title=\"Item 1\" href=\"/admin/item-1\" routeName=\"item-1\" />\n  <SidebarItem title=\"Item 2\" href=\"/admin/item-2\" routeName=\"item-2\" />\n\n  <SidebarGroup title=\"Groupe\">\n    <SidebarItem title=\"Item group 1\" href=\"/admin/gp-item-2\" routeName=\"gp-item-1\" />\n    <SidebarItem title=\"Item group 2\" href=\"/admin/gp-item-2\" routeName=\"gp-item-2\" />\n  </SidebarGroup>\n</Sidebar>\n```",
+    AvecHeaderEtFooter,
 };