allaw-ui 1.0.108 → 1.0.112

package/dist/components/atoms/progressBars/ProgressBar.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import "./ProgressBar.css";
 import "../../../styles/global.css";
 import "../../../styles/icons.css";
 export type BarColor = "blue" | "red" | "green" | "grey";

package/dist/components/atoms/progressBars/ProgressBar.js

@@ -1,5 +1,5 @@
 import React from "react";
-import "./ProgressBar.css";
+import styles from "./ProgressBar.module.css";
 import "../../../styles/global.css";
 import "../../../styles/icons.css";
 var ProgressBar = function (_a) {
@@ -7,20 +7,20 @@ var ProgressBar = function (_a) {
     var constrainedCurrentStep = Math.max(0, Math.min(currentStep, steps));
     var progressWidth = constrainedCurrentStep === 0 ? 0 : (constrainedCurrentStep / steps) * 100;
     var noIconsMargin = !startIcon && !endIcon ? "0px" : "0 10px";
-    return (React.createElement("div", { className: "progress-bar-container" },
-        startIcon && (React.createElement("div", { className: "progress-bar-icon-container" },
-            React.createElement("button", { className: "progress-bar-chevron", onClick: onStartIconClick },
+    return (React.createElement("div", { className: styles.progressBarContainer },
+        startIcon && (React.createElement("div", { className: styles.progressBarIconContainer },
+            React.createElement("button", { className: styles.progressBarChevron, onClick: onStartIconClick },
                 React.createElement("i", { className: "allaw-icon-chevron-left" })))),
-        React.createElement("div", { className: "progress-bar-background ".concat(showProgressBar ? "" : "hidden-content"), style: {
+        React.createElement("div", { className: "".concat(styles.progressBarBackground, " ").concat(showProgressBar ? "" : styles.hiddenContent), style: {
                 height: isWrapperProgressBar ? "6px" : "8px",
                 width: startIcon ? "calc(100% - 32px)" : "100%",
                 margin: noIconsMargin,
             } },
-            React.createElement("div", { className: "progress-bar-fill progress-bar-fill-".concat(barColor), style: {
+            React.createElement("div", { className: "".concat(styles.progressBarFill, " ").concat(styles["progressBarFill".concat(barColor.charAt(0).toUpperCase() + barColor.slice(1))]), style: {
                     width: "".concat(progressWidth, "%"),
                     height: isWrapperProgressBar ? "6px" : "8px",
                 } })),
-        endIcon && (React.createElement("button", { className: "progress-bar-close", onClick: onEndIconClick },
+        endIcon && (React.createElement("button", { className: styles.progressBarClose, onClick: onEndIconClick },
             React.createElement("i", { className: "allaw-icon-close" })))));
 };
 export default ProgressBar;

package/dist/components/atoms/progressBars/{ProgressBar.css → ProgressBar.module.css}

@@ -1,21 +1,20 @@
 @import "../../../styles/colors.css";
 
-.progress-bar-container {
+.progressBarContainer {
   display: flex;
   width: 100%;
   justify-content: space-between;
   align-items: center;
   height: 1.5rem;
   gap: 4rem;
+  padding-left: 0.7rem;
 }
 
-
-
-.progress-bar-background.hidden-content {
+.hiddenContent {
   visibility: hidden;
 }
 
-.progress-bar-icon-container {
+.progressBarIconContainer {
   width: 32px;
   height: 32px;
   flex-shrink: 0;
@@ -24,7 +23,7 @@
   align-items: center;
 }
 
-.progress-bar-chevron {
+.progressBarChevron {
   width: 32px;
   height: 32px;
   cursor: pointer;
@@ -40,14 +39,14 @@
   transition: background-color 0.2s ease;
 }
 
-.progress-bar-chevron:hover {
+.progressBarChevron:hover {
   background-color: var(--venom-grey, #e6edf5);
 }
-.progress-bar-chevron:active {
+.progressBarChevron:active {
   background-color: var(--venom-grey-dark, #d1dce8);
 }
 
-.progress-bar-background {
+.progressBarBackground {
   display: flex;
   width: 100%;
   height: 6px;
@@ -57,29 +56,29 @@
   margin: 0 10px;
 }
 
-.progress-bar-fill {
+.progressBarFill {
   height: 6px;
   border-radius: 8px;
   transition: width 0.35s ease;
 }
 
-.progress-bar-fill-blue {
+.progressBarFillBlue {
   background: var(--primary-blue, #25beeb);
 }
 
-.progress-bar-fill-red {
+.progressBarFillRed {
   background: var(--actions-error, #e15151);
 }
 
-.progress-bar-fill-green {
+.progressBarFillGreen {
   background: var(--actions-valid, #29a36a);
 }
 
-.progress-bar-fill-grey {
+.progressBarFillGrey {
   background: var(--mid-grey, #728ea7);
 }
 
-.progress-bar-close {
+.progressBarClose {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -96,14 +95,14 @@
   transition: background-color 0.2s ease;
 }
 
-.progress-bar-close:hover {
+.progressBarClose:hover {
   background-color: var(--venom-grey, #e6edf5);
 }
-.progress-bar-close:active {
+.progressBarClose:active {
   background-color: var(--venom-grey-dark, #d1dce8);
 }
 
-.progress-bar-close i {
+.progressBarClose i {
   width: 14px;
   height: 14px;
   flex-shrink: 0;

package/dist/components/molecules/BlogTextBlock/BlogTextBlock.css

@@ -0,0 +1,43 @@
+.blogContainerTop {
+    display: flex;
+    width: 1000px;
+    max-width: 1000px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 23px;
+}
+
+.blogInfoContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center; 
+    justify-content: flex-start; 
+    gap: 23px; 
+    width: auto; 
+    height: auto; 
+    flex-wrap: nowrap;
+}
+
+.blogContainerBottom {
+    display: flex;
+    max-width: 1000px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+}
+
+.blogImageContainer {
+    align-self: stretch;
+    background: #D9D9D9;
+    object-fit: cover;
+}
+
+.timeToReadContainer {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.timeToReadContainer svg {
+    flex-shrink: 0;
+}

package/dist/components/molecules/BlogTextBlock/BlogTextBlock.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import "./BlogTextBlock.css";
+export type BlogTextBlockProps = {
+    Title: string;
+    Author: string;
+    Date: Date;
+    TimeToRead: string;
+    Profession: "Avocat" | "Notaire" | "Commissaire de justice";
+    ImageBlog: string;
+};
+declare function BlogTextBlock({ Title, Date, TimeToRead, Profession, ImageBlog, }: BlogTextBlockProps): React.JSX.Element;
+export default BlogTextBlock;

package/dist/components/molecules/BlogTextBlock/BlogTextBlock.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Heading, TinyInfo } from "../../atoms/typography";
+import Image from "next/image";
+import "./BlogTextBlock.css";
+function BlogTextBlock(_a) {
+    var Title = _a.Title, Date = _a.Date, TimeToRead = _a.TimeToRead, Profession = _a.Profession, ImageBlog = _a.ImageBlog;
+    return (React.createElement("div", { className: "blogContainer" },
+        React.createElement("div", { className: "blogContainerTop" },
+            React.createElement(Heading, { text: Title, variant: "h2", color: "noir", align: "left" }),
+            React.createElement("div", { className: "blogInfoContainer" },
+                React.createElement(TinyInfo, { variant: "medium12", text: Date.toLocaleDateString(), color: "dark-grey" }),
+                React.createElement("div", { className: "timeToReadContainer" },
+                    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" },
+                        React.createElement("g", { clipPath: "url(#clip0_9957_3676)" },
+                            React.createElement("path", { d: "M7.00033 12.8332C10.222 12.8332 12.8337 10.2215 12.8337 6.99984C12.8337 3.77818 10.222 1.1665 7.00033 1.1665C3.77866 1.1665 1.16699 3.77818 1.16699 6.99984C1.16699 10.2215 3.77866 12.8332 7.00033 12.8332Z", stroke: "#25BEEB", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+                            React.createElement("path", { d: "M7 3.5V7L9.33333 8.16667", stroke: "#25BEEB", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })),
+                        React.createElement("defs", null,
+                            React.createElement("clipPath", { id: "clip0_9957_3676" },
+                                React.createElement("rect", { width: "14", height: "14", fill: "white" })))),
+                    React.createElement(TinyInfo, { variant: "medium12", text: TimeToRead, color: "dark-grey" })),
+                React.createElement(TinyInfo, { variant: "medium12", text: Profession, color: "dark-grey" })),
+            React.createElement("div", { className: "blogImageContainer" },
+                React.createElement(Image, { src: ImageBlog, alt: "Image de fond d'un article de blog", width: 1000, height: 449 }))),
+        React.createElement("div", { className: "blogContainerBottom" })));
+}
+export default BlogTextBlock;

package/dist/components/molecules/BlogTextBlock/BlogTextBlock.stories.d.ts

@@ -0,0 +1,48 @@
+declare namespace _default {
+    export let title: string;
+    export { BlogTextBlock as component };
+    export namespace argTypes {
+        namespace Title {
+            let control: string;
+            let description: string;
+        }
+        namespace Author {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace Date {
+            let control_2: string;
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        namespace TimeToRead {
+            let control_3: string;
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        namespace Profession {
+            export namespace control_4 {
+                let type: string;
+            }
+            export { control_4 as control };
+            export let options: string[];
+            let description_4: string;
+            export { description_4 as description };
+        }
+        namespace ImageBlog {
+            let control_5: string;
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const NotaryExample: any;
+export const JudicialOfficerExample: any;
+import BlogTextBlock from "./BlogTextBlock";

package/dist/components/molecules/BlogTextBlock/BlogTextBlock.stories.js

@@ -0,0 +1,57 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import BlogTextBlock, { BlogTextBlockProps } from "./BlogTextBlock";
+export default {
+    title: "Components/molecules/BlogTextBlock",
+    component: BlogTextBlock,
+    argTypes: {
+        Title: { control: "text", description: "The title of the blog post" },
+        Author: { control: "text", description: "The author of the blog post" },
+        Date: { control: "date", description: "The publication date of the blog post" },
+        TimeToRead: { control: "text", description: "The estimated time to read the blog post" },
+        Profession: {
+            control: { type: "select" },
+            options: ["avocat", "notaire", "commissaire de justice"],
+            description: "The profession associated with the author",
+        },
+        ImageBlog: { control: "text", description: "The image for the blog post" },
+    },
+};
+var Template = function (args) { return React.createElement(BlogTextBlock, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    Title: "Understanding Legal Procedures",
+    Author: "John Doe",
+    Date: new Date("2023-10-21"),
+    TimeToRead: "5 min",
+    Profession: "avocat",
+    ImageBlog: "https://plus.unsplash.com/premium_photo-1661329930662-19a43503782f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YXZvY2F0fGVufDB8fDB8fHww",
+};
+export var NotaryExample = Template.bind({});
+NotaryExample.args = {
+    Title: "The Role of a Notary in Legal Contracts",
+    Author: "Jane Smith",
+    Date: new Date("2023-08-15"),
+    TimeToRead: "7 min",
+    Profession: "notaire",
+    ImageBlog: "https://via.placeholder.com/1000x449",
+};
+export var JudicialOfficerExample = Template.bind({});
+JudicialOfficerExample.args = {
+    Title: "How Judicial Officers Ensure Justice",
+    Author: "Alice Cooper",
+    Date: new Date("2023-09-10"),
+    TimeToRead: "6 min",
+    Profession: "commissaire de justice",
+    ImageBlog: "https://via.placeholder.com/1000x449",
+};

package/dist/components/molecules/blogArticle/BlogArticle.css

@@ -0,0 +1,105 @@
+.blog-container {
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 361px;
+    box-shadow: 0px 1px 20px 0px rgba(213, 233, 246, 0.80);
+    border-radius: 16px;
+    overflow: hidden;
+    transition: transform 0.2s ease;
+    cursor: pointer;
+}
+
+.blog-container:hover {
+    transform: scale(1.015);
+}
+
+.blog-top-section {
+    height: 230px;
+    align-self: stretch;
+}
+
+.blog-split-section {
+    width: 329px;
+    height: 1px;
+    background: #F1F4F8;
+}
+
+.blog-bottom-section {
+    display: flex;
+    padding: 23px 16px 24px 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    background: #FFF;
+}
+
+.blog-image {
+    background: var(--Primary-Light-grey, #F4F7FB);
+    width: 100%; 
+    height: 100%; 
+    object-fit: cover; 
+}
+
+.blog-title {
+    display: -webkit-box;
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.blog-description {
+    display: -webkit-box;
+    line-clamp: 3;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.blog-top-section.placeholder {
+    background: var(--Primary-Light-grey, #F4F7FB);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ccc;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+}
+
+.tags-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap; /* Permet le retour à la ligne si nécessaire */
+    gap: 8px;
+    max-width: 100%;
+    overflow-x: auto; /* Garde la possibilité de scroller horizontalement si la largeur dépasse */
+    scroll-behavior: smooth;
+}
+
+.blog-bottom-section-up {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    width: 100%; 
+    overflow: hidden; 
+}
+
+.blog-bottom-section-down {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    align-self: stretch;
+}
+
+.blog-date {
+    color:#728EA7;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+}

package/dist/components/molecules/blogArticle/BlogArticle.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './BlogArticle.css';
+export type BlogArticleProps = {
+    Article_URL: string;
+    Image_URL: string;
+    Tags: string[];
+    Date: Date;
+    Title: string;
+    Description: string;
+};
+declare const BlogArticle: React.FC<BlogArticleProps>;
+export default BlogArticle;

package/dist/components/molecules/blogArticle/BlogArticle.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import './BlogArticle.css';
+import Link from 'next/link';
+import { OtherStatusTag } from '../../atoms/tags';
+import { Heading, TinyInfo } from '../../atoms/typography';
+import Image from 'next/image';
+var BlogTopSection = function (_a) {
+    var Image_URL = _a.Image_URL, Title = _a.Title;
+    return (React.createElement("div", { className: "blog-top-section ".concat(!Image_URL ? 'placeholder' : '') }, Image_URL ? (React.createElement(Image, { className: "blog-image", src: Image_URL, alt: Title || 'Image de l’article de blog', width: 361, height: 230, objectFit: "cover" })) : (React.createElement("span", { className: "placeholder-text" }))));
+};
+var BlogBottomSection = function (_a) {
+    var Tags = _a.Tags, Date = _a.Date, Title = _a.Title, Description = _a.Description;
+    return (React.createElement("div", { className: "blog-bottom-section" },
+        React.createElement("div", { className: "blog-bottom-section-up" },
+            React.createElement("div", { className: "tags-container" }, Tags.map(function (tag, index) { return (React.createElement(OtherStatusTag, { key: index, label: tag })); })),
+            React.createElement(TinyInfo, { text: Date.toLocaleDateString(), variant: 'medium14', color: 'mid-grey' })),
+        React.createElement("div", { className: "blog-split-section" }),
+        React.createElement("div", { className: "blog-bottom-section-down" },
+            React.createElement("div", { className: "blog-title" },
+                React.createElement(Heading, { variant: "h6", text: Title, color: "noir", align: "center" })),
+            React.createElement("div", { className: 'blog-description' },
+                React.createElement(TinyInfo, { variant: "medium14", text: Description, color: "noir" })))));
+};
+var BlogArticle = function (_a) {
+    var Article_URL = _a.Article_URL, Image_URL = _a.Image_URL, Tags = _a.Tags, Date = _a.Date, Title = _a.Title, Description = _a.Description;
+    return (React.createElement(Link, { href: Article_URL, className: 'blog-container' },
+        React.createElement(BlogTopSection, { Image_URL: Image_URL, Title: Title }),
+        React.createElement(BlogBottomSection, { Tags: Tags, Date: Date, Title: Title, Description: Description })));
+};
+export default BlogArticle;

package/dist/components/molecules/blogArticle/BlogArticle.stories.d.ts

@@ -0,0 +1,10 @@
+declare namespace _default {
+    export let title: string;
+    export { BlogArticle as component };
+}
+export default _default;
+export const Default: any;
+export const NoImage: any;
+export const LongDescriptionTitle: any;
+export const MultipleTags: any;
+import BlogArticle from './BlogArticle';

package/dist/components/molecules/blogArticle/BlogArticle.stories.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import BlogArticle from './BlogArticle';
+export default {
+    title: 'Components/Molecules/BlogArticle',
+    component: BlogArticle,
+};
+var Template = function (args) { return React.createElement(BlogArticle, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    Article_URL: 'https://example.com/article',
+    Image_URL: 'https://plus.unsplash.com/premium_photo-1661329930662-19a43503782f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YXZvY2F0fGVufDB8fDB8fHww',
+    Tags: ['Conseil'],
+    Date: new Date('2023-04-23'),
+    Title: 'Le Droit en France',
+    Description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquam...',
+};
+export var NoImage = Template.bind({});
+NoImage.args = __assign(__assign({}, Default.args), { Image_URL: '' });
+export var LongDescriptionTitle = Template.bind({});
+LongDescriptionTitle.args = __assign(__assign({}, Default.args), { Description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum lacus vitae turpis malesuada, id varius magna faucibus. Nulla facilisi. Suspendisse potenti. Vivamus in purus sit amet sapien sodales convallis. Integer venenatis velit id lorem aliquam, sit amet pulvinar neque volutpat.', Title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum lacus vitae turpis malesuada, id varius magna faucibus. Nulla facilisi. Suspendisse potenti. Vivamus in purus sit amet sapien sodales convallis. Integer venenatis velit id lorem aliquam, sit amet pulvinar neque volutpat.' });
+export var MultipleTags = Template.bind({});
+MultipleTags.args = __assign(__assign({}, Default.args), { Tags: ['Conseil', 'Droit', 'Avocat', 'Justice', 'Légal', 'Justice', 'Légal'] });

package/dist/components/molecules/blogArticle/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BlogArticle } from "./BlogArticle";
+export type { BlogArticleProps } from "./BlogArticle";

package/dist/components/molecules/blogArticle/index.js

@@ -0,0 +1 @@
+export { default as BlogArticle } from "./BlogArticle";

package/dist/index.d.ts

@@ -61,3 +61,5 @@ export { default as Breadcrumb } from "./components/molecules/breadcrumb/Breadcr
 export { default as ProCard } from "./components/molecules/proCard/ProCard";
 export { default as Pagination } from "./components/molecules/pagination/Pagination";
 export type { PaginationProps } from "./components/molecules/pagination/Pagination";
+export { default as BlogTextBlock } from './components/molecules/BlogTextBlock/BlogTextBlock';
+export type { BlogTextBlockProps } from './components/molecules/BlogTextBlock/BlogTextBlock';

package/dist/index.js

@@ -79,3 +79,4 @@ export { default as Breadcrumb } from "./components/molecules/breadcrumb/Breadcr
 export { default as ProCard } from "./components/molecules/proCard/ProCard";
 // Pagination
 export { default as Pagination } from "./components/molecules/pagination/Pagination";
+export { default as BlogTextBlock } from './components/molecules/BlogTextBlock/BlogTextBlock';

package/dist/stories/Header.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "./header.css";
+type User = {
+    name: string;
+};
+export interface HeaderProps {
+    user?: User;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+}
+export declare const Header: ({ user }: HeaderProps) => React.JSX.Element;
+export {};

package/dist/stories/Header.js

@@ -0,0 +1,20 @@
+import React from "react";
+// import { Button } from './Button';
+import "./header.css";
+export var Header = function (_a) {
+    var user = _a.user;
+    return (React.createElement("header", null,
+        React.createElement("div", { className: "storybook-header" },
+            React.createElement("div", null,
+                React.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg" },
+                    React.createElement("g", { fill: "none", fillRule: "evenodd" },
+                        React.createElement("path", { d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z", fill: "#FFF" }),
+                        React.createElement("path", { d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z", fill: "#555AB9" }),
+                        React.createElement("path", { d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z", fill: "#91BAF8" }))),
+                React.createElement("h1", null, "Acme")),
+            React.createElement("div", null, user ? (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: "welcome" },
+                    "Welcome, ",
+                    React.createElement("b", null, user.name),
+                    "!"))) : (React.createElement(React.Fragment, null))))));
+};

package/dist/stories/Header.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ user }: import("./Header").HeaderProps) => import("react").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        onLogin: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onLogout: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onCreateAccount: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/stories/Header.stories.js

@@ -0,0 +1,26 @@
+import { fn } from '@storybook/test';
+import { Header } from './Header';
+var meta = {
+    title: 'Example/Header',
+    component: Header,
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+        layout: 'fullscreen',
+    },
+    args: {
+        onLogin: fn(),
+        onLogout: fn(),
+        onCreateAccount: fn(),
+    },
+};
+export default meta;
+export var LoggedIn = {
+    args: {
+        user: {
+            name: 'Jane Doe',
+        },
+    },
+};
+export var LoggedOut = {};

package/dist/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './page.css';
+export declare const Page: React.FC;

package/dist/stories/Page.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Header } from './Header';
+import './page.css';
+export var Page = function () {
+    var _a = React.useState(), user = _a[0], setUser = _a[1];
+    return (React.createElement("article", null,
+        React.createElement(Header, { user: user, onLogin: function () { return setUser({ name: 'Jane Doe' }); }, onLogout: function () { return setUser(undefined); }, onCreateAccount: function () { return setUser({ name: 'Jane Doe' }); } }),
+        React.createElement("section", { className: "storybook-page" },
+            React.createElement("h2", null, "Pages in Storybook"),
+            React.createElement("p", null,
+                "We recommend building UIs with a",
+                ' ',
+                React.createElement("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer" },
+                    React.createElement("strong", null, "component-driven")),
+                ' ',
+                "process starting with atomic components and ending with pages."),
+            React.createElement("p", null, "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:"),
+            React.createElement("ul", null,
+                React.createElement("li", null, "Use a higher-level connected component. Storybook helps you compose such data from the \"args\" of child component stories"),
+                React.createElement("li", null, "Assemble data in the page component from your services. You can mock these services out using Storybook.")),
+            React.createElement("p", null,
+                "Get a guided tutorial on component-driven development at",
+                ' ',
+                React.createElement("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer" }, "Storybook tutorials"),
+                ". Read more in the",
+                ' ',
+                React.createElement("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer" }, "docs"),
+                "."),
+            React.createElement("div", { className: "tip-wrapper" },
+                React.createElement("span", { className: "tip" }, "Tip"),
+                " Adjust the width of the canvas with the",
+                ' ',
+                React.createElement("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" },
+                    React.createElement("g", { fill: "none", fillRule: "evenodd" },
+                        React.createElement("path", { d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z", id: "a", fill: "#999" }))),
+                "Viewports addon in the toolbar"))));
+};

package/dist/stories/Page.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{}>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

package/dist/stories/Page.stories.js

@@ -0,0 +1,76 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { within, userEvent, expect } from '@storybook/test';
+import { Page } from './Page';
+var meta = {
+    title: 'Example/Page',
+    component: Page,
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export var LoggedOut = {};
+// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+export var LoggedIn = {
+    play: function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
+        var canvas, loginButton, logoutButton;
+        var canvasElement = _b.canvasElement;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    canvas = within(canvasElement);
+                    loginButton = canvas.getByRole('button', { name: /Log in/i });
+                    return [4 /*yield*/, expect(loginButton).toBeInTheDocument()];
+                case 1:
+                    _c.sent();
+                    return [4 /*yield*/, userEvent.click(loginButton)];
+                case 2:
+                    _c.sent();
+                    return [4 /*yield*/, expect(loginButton).not.toBeInTheDocument()];
+                case 3:
+                    _c.sent();
+                    logoutButton = canvas.getByRole('button', { name: /Log out/i });
+                    return [4 /*yield*/, expect(logoutButton).toBeInTheDocument()];
+                case 4:
+                    _c.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); },
+};

package/dist/stories/header.css

@@ -0,0 +1,32 @@
+.storybook-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header h1 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 6px 0 6px 10px;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.storybook-header button + button {
+  margin-left: 10px;
+}
+
+.storybook-header .welcome {
+  margin-right: 10px;
+  color: #333;
+  font-size: 14px;
+}

package/dist/stories/page.css

@@ -0,0 +1,69 @@
+.storybook-page {
+  margin: 0 auto;
+  padding: 48px 20px;
+  max-width: 600px;
+  color: #333;
+  font-size: 14px;
+  line-height: 24px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-page h2 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 0 4px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  color: #1ea7fd;
+  text-decoration: none;
+}
+
+.storybook-page ul {
+  margin: 1em 0;
+  padding-left: 30px;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 10px;
+  border-radius: 1em;
+  background: #e7fdd8;
+  padding: 4px 12px;
+  color: #66bf3c;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.storybook-page .tip-wrapper {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 3px;
+  margin-right: 4px;
+  width: 12px;
+  height: 12px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "1.0.108",
+  "version": "1.0.112",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",