allaw-ui 1.1.1 → 2.0.0

package/dist/components/molecules/proCard/ProCard.stories.js

@@ -0,0 +1,69 @@
+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 ProCard from "./ProCard";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/ProCard",
+    component: ProCard,
+    tags: ["autodocs"],
+    argTypes: {
+        imageUrl: { control: "text" },
+        job: { control: "text" },
+        firstName: { control: "text" },
+        lastName: { control: "text" },
+        address: { control: "text" },
+        profileUrl: { control: "text" },
+        isPro: { control: "boolean" },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var Template = function (args) { return React.createElement(ProCard, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    imageUrl: "https://example.com/avatar.jpg",
+    job: "AVOCAT",
+    firstName: "Camelia",
+    lastName: "Jordanna",
+    address: "132 Av. Resistance 75012 Paris",
+    profileUrl: "/profile/camelia-jordanna",
+    isPro: false,
+};
+export var NoImage = Template.bind({});
+NoImage.args = {
+    job: "NOTAIRE",
+    firstName: "John",
+    lastName: "Doe",
+    address: "1 Rue de la Paix, 75001 Paris",
+    profileUrl: "/profile/john-doe",
+    isPro: false,
+};
+export var ProUser = Template.bind({});
+ProUser.args = {
+    imageUrl: "https://example.com/avatar.jpg",
+    job: "AVOCAT",
+    firstName: "Emma",
+    lastName: "Smith",
+    address: "15 Rue du Faubourg Saint-Honoré, 75008 Paris",
+    profileUrl: "/profile/emma-smith",
+    isPro: true,
+};

package/dist/components/molecules/radioForm/RadioForm.stories.d.ts

@@ -0,0 +1,27 @@
+declare namespace _default {
+    export let title: string;
+    export { RadioForm as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace label {
+            let control: string;
+        }
+        namespace isRequired {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace options {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        namespace defaultSelected {
+            let control_3: string;
+            export { control_3 as control };
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const WithDefaultSelection: any;
+export const MultipleOptions: any;
+import RadioForm from "./RadioForm";

package/dist/components/molecules/radioForm/RadioForm.stories.js

@@ -0,0 +1,52 @@
+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, { useState } from "react";
+import RadioForm from "./RadioForm";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/RadioForm",
+    component: RadioForm,
+    tags: ["autodocs"],
+    argTypes: {
+        label: { control: "text" },
+        isRequired: { control: "boolean" },
+        options: { control: "array" },
+        defaultSelected: { control: "text" },
+    },
+};
+var Template = function (args) {
+    var _a = useState(args.defaultSelected || null), selectedOption = _a[0], setSelectedOption = _a[1];
+    var handleChange = function (newOption) {
+        setSelectedOption(newOption);
+        console.log("Selected option:", newOption);
+    };
+    return React.createElement(RadioForm, __assign({}, args, { onChange: handleChange }));
+};
+export var Default = Template.bind({});
+Default.args = {
+    label: "Référencer ma fiche pro dans les recherches sur allaw.fr",
+    isRequired: true,
+    options: ["Oui", "Non"],
+};
+export var WithDefaultSelection = Template.bind({});
+WithDefaultSelection.args = {
+    label: "Référencer ma fiche pro dans les recherches sur allaw.fr",
+    isRequired: true,
+    options: ["Oui", "Non"],
+    defaultSelected: "Oui",
+};
+export var MultipleOptions = Template.bind({});
+MultipleOptions.args = {
+    label: "Choisissez votre option préférée",
+    isRequired: false,
+    options: ["Option 1", "Option 2", "Option 3"],
+};

package/dist/components/molecules/selectForm/SelectForm.stories.d.ts

@@ -0,0 +1,58 @@
+declare namespace _default {
+    export let title: string;
+    export { SelectForm as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace label {
+            let control: string;
+        }
+        namespace isRequired {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace options {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        namespace isMultiple {
+            let control_3: string;
+            export { control_3 as control };
+        }
+        namespace width {
+            export namespace control_4 {
+                let type: string;
+                let min: number;
+                let max: number;
+            }
+            export { control_4 as control };
+        }
+        namespace selectedItem {
+            let control_5: string;
+            export { control_5 as control };
+        }
+        namespace variant {
+            export namespace control_6 {
+                let type_1: string;
+                export { type_1 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_6 as control };
+        }
+        namespace color {
+            export namespace control_7 {
+                let type_2: string;
+                export { type_2 as type };
+                let options_2: string[];
+                export { options_2 as options };
+            }
+            export { control_7 as control };
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const Multiple: any;
+export const CustomWidth: any;
+export const WithSelectedItem: any;
+import SelectForm from "./SelectForm";

package/dist/components/molecules/selectForm/SelectForm.stories.js

@@ -0,0 +1,96 @@
+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, { useState } from "react";
+import SelectForm from "./SelectForm";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/SelectForm",
+    component: SelectForm,
+    tags: ["autodocs"],
+    argTypes: {
+        label: { control: "text" },
+        isRequired: { control: "boolean" },
+        options: { control: "object" },
+        isMultiple: { control: "boolean" },
+        width: {
+            control: {
+                type: "number",
+                min: 1,
+                max: 100,
+            },
+        },
+        selectedItem: { control: "text" },
+        variant: {
+            control: {
+                type: "select",
+                options: ["bold", "semiBold", "medium"],
+            },
+        },
+        color: {
+            control: {
+                type: "select",
+                options: [
+                    "bleu-allaw",
+                    "mid-grey",
+                    "dark-grey",
+                    "noir",
+                    "pure-white",
+                    "grey-venom",
+                    "venom-grey-dark",
+                ],
+            },
+        },
+    },
+};
+var Template = function (args) {
+    var _a = useState(args.selectedItem), selectedOption = _a[0], setSelectedOption = _a[1];
+    var handleChange = function (newOption) {
+        setSelectedOption(newOption);
+        console.log("Selected option:", newOption);
+    };
+    return (React.createElement(SelectForm, __assign({}, args, { selectedItem: selectedOption, onChange: handleChange })));
+};
+export var Default = Template.bind({});
+Default.args = {
+    label: "Délais de préavis (en jours ouvrés) avant la date de rendez-vous",
+    isRequired: true,
+    options: [
+        { label: "24h", value: "24h" },
+        { label: "48h", value: "48h" },
+        { label: "72h", value: "72h" },
+        { label: "1 semaine", value: "1week" },
+        { label: "2 semaines", value: "2weeks" },
+    ],
+    isMultiple: false,
+    width: 100,
+    selectedItem: "",
+    variant: "medium",
+    color: "noir",
+};
+export var Multiple = Template.bind({});
+Multiple.args = {
+    label: "Sélectionnez vos domaines d'expertise",
+    isRequired: false,
+    options: [
+        { label: "Droit des affaires", value: "business" },
+        { label: "Droit immobilier", value: "real_estate" },
+        { label: "Droit du travail", value: "labor" },
+        { label: "Droit de la famille", value: "family" },
+    ],
+    isMultiple: true,
+    width: 100,
+    selectedItem: [],
+};
+export var CustomWidth = Template.bind({});
+CustomWidth.args = __assign(__assign({}, Default.args), { width: 50 });
+export var WithSelectedItem = Template.bind({});
+WithSelectedItem.args = __assign(__assign({}, Default.args), { selectedItem: "48h" });

package/dist/components/molecules/stepper/Stepper.css

@@ -69,9 +69,7 @@
   align-items: center;
   opacity: 0;
   visibility: hidden;
-  transition:
-    opacity 0.3s ease,
-    visibility 0.3s ease;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
 }
 
 .stepper-overlay.visible {
@@ -81,12 +79,27 @@
 
 .stepper-content {
   width: 100%;
+  max-height: 100%;
+  height: 90%;
+  overflow-y: auto;
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
   font-family: "Open Sans", sans-serif;
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
   letter-spacing: 0em;
 }
+
+@media (max-width: 800px) {
+  .stepper-container {
+    height: 99dvh;
+    position: fixed;
+    bottom: 0;
+    justify-content: start;
+    padding: 2rem;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}

package/dist/components/molecules/stepper/Stepper.stories.d.ts

@@ -0,0 +1,42 @@
+declare namespace _default {
+    export let title: string;
+    export { Stepper as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace startIcon {
+            namespace control {
+                let type: string;
+            }
+            let description: string;
+        }
+        namespace endIcon {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        namespace showProgressBar {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Default: any;
+import Stepper from "./Stepper";

package/dist/components/molecules/stepper/Stepper.stories.js

@@ -0,0 +1,132 @@
+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 { action } from "@storybook/addon-actions";
+import Stepper from "./Stepper";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/Stepper",
+    component: Stepper,
+    tags: ["autodocs"],
+    argTypes: {
+        startIcon: {
+            control: {
+                type: "object",
+            },
+            description: "Contrôle l'affichage de l'icône de début pour chaque étape",
+        },
+        endIcon: {
+            control: {
+                type: "boolean",
+            },
+        },
+        showProgressBar: {
+            control: {
+                type: "object",
+            },
+            description: "Contrôle l'affichage de la barre de progression pour chaque étape",
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var Template = function (args) { return React.createElement(Stepper, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    steps: 5,
+    currentStep: 1,
+    startIcon: [true, true, true, true, true],
+    endIcon: true,
+    onClose: function () {
+        action("Stepper closed")();
+    },
+    secondaryButton: [
+        { show: false },
+        {
+            show: true,
+            label: "Autre",
+            startIconName: "allaw-icon-add",
+            onSecondaryButtonClick: function (step) {
+                return action("Secondary button clicked on step ".concat(step))();
+            },
+        },
+        { show: false },
+        {
+            show: true,
+            label: "Option",
+            startIconName: "allaw-icon-settings",
+            onSecondaryButtonClick: function (step) {
+                return action("Secondary button clicked on step ".concat(step))();
+            },
+        },
+        { show: false },
+    ],
+    primaryButton: [
+        {
+            show: true,
+            label: "Commencer",
+            startIconName: "allaw-icon-arrow-right",
+            onPrimaryButtonClick: function (step) {
+                return action("Primary button clicked on step ".concat(step))();
+            },
+        },
+        {
+            show: true,
+            label: "Continuer",
+            endIconName: "allaw-icon-arrow-right",
+            onPrimaryButtonClick: function (step) {
+                return action("Primary button clicked on step ".concat(step))();
+            },
+        },
+        {
+            show: true,
+            label: "Suivant",
+            endIconName: "allaw-icon-arrow-right",
+            onPrimaryButtonClick: function (step) {
+                return action("Primary button clicked on step ".concat(step))();
+            },
+        },
+        {
+            show: true,
+            label: "Presque fini",
+            endIconName: "allaw-icon-arrow-right",
+            onPrimaryButtonClick: function (step) {
+                return action("Primary button clicked on step ".concat(step))();
+            },
+        },
+        {
+            show: true,
+            label: "Terminer",
+            endIconName: "allaw-icon-check",
+            onPrimaryButtonClick: function (step) {
+                return action("Stepper completed on step ".concat(step))();
+            },
+        },
+    ],
+    showProgressBar: [true, true, true, true, true],
+    children: [
+        React.createElement("div", { className: "stepper-content", key: "step1" }, "Contenu de l'\u00E9tape 1"),
+        React.createElement("div", { className: "stepper-content", key: "step2" }, "Contenu de l'\u00E9tape 2"),
+        React.createElement("div", { className: "stepper-content", key: "step3" }, "Contenu de l'\u00E9tape 3"),
+        React.createElement("div", { className: "stepper-content", key: "step4" }, "Contenu de l'\u00E9tape 4"),
+        React.createElement("div", { className: "stepper-content", key: "step5" }, "Contenu de l'\u00E9tape 5"),
+    ],
+};

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { default as Select } from "./components/atoms/selects/Select";
 export type { SelectItem, SelectProps, SelectRef, } from "./components/atoms/selects/Select";
 export { default as ComboBox } from "./components/atoms/selects/ComboBox";
 export type { ComboBoxProps, ComboBoxRef, } from "./components/atoms/selects/ComboBox";
+export { default as SelectableListItem } from "./components/atoms/selects/SelectableListItem";
 export { default as Datepicker } from "./components/atoms/datepickers/Datepicker";
 export type { DatepickerProps } from "./components/atoms/datepickers/Datepicker";
 export { default as DatepickerForm } from "./components/molecules/datepickerForm/DatepickerForm";
@@ -32,6 +33,7 @@ export { default as FolderStatusTag } from "./components/atoms/tags/FolderStatus
 export { default as OtherStatusTag } from "./components/atoms/tags/OtherStatusTag";
 export { default as Heading } from "./components/atoms/typography/Heading";
 export { default as Paragraph } from "./components/atoms/typography/Paragraph";
+export { default as Link } from "./components/atoms/typography/Link";
 export { default as SmallTitle } from "./components/atoms/typography/SmallTitle";
 export { default as Subtitle } from "./components/atoms/typography/Subtitle";
 export { default as TinyInfo } from "./components/atoms/typography/TinyInfo";
@@ -41,8 +43,8 @@ export { default as Strokes } from "./components/atoms/uiVariables/Strokes";
 export { default as AppointmentSlot } from "./components/molecules/appointmentSlot/AppointmentSlot";
 export { default as BillingCount } from "./components/molecules/billingCount/BillingCount";
 export { default as CaseCard } from "./components/molecules/caseCard/CaseCard";
-export { default as ContactCard } from "./components/molecules/contactCard/ContactCard";
 export type { ContactCardProps } from "./components/molecules/contactCard/ContactCard";
+export { default as ContactCard } from "./components/molecules/contactCard/ContactCard";
 export { default as DetailedContactCard } from "./components/molecules/contactCard/DetailedContactCard";
 export type { DetailedContactCardProps } from "./components/molecules/contactCard/DetailedContactCard";
 export { default as CaseCardLink } from "./components/molecules/caseLinkCard/CaseLinkCard";
@@ -51,6 +53,7 @@ export { default as CaseCardCompact } from "./components/molecules/caseCardCompa
 export type { CaseCardCompactProps } from "./components/molecules/caseCardCompact/CaseCardCompact";
 export { default as LoadingBox } from "./components/molecules/loadingBox/LoadingBox";
 export { default as DocumentCard } from "./components/molecules/documentCard/DocumentCard";
+export type { DocumentCardProps } from "./components/molecules/documentCard/DocumentCard";
 export { default as EmployeeCard } from "./components/molecules/employeeCard/EmployeeCard";
 export { default as Stepper } from "./components/molecules/stepper/Stepper";
 export type { StepperProps } from "./components/molecules/stepper/Stepper";
@@ -61,3 +64,13 @@ 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 BlogHeader } from "./components/molecules/blogHeader/BlogHeader";
+export type { BlogHeaderProps } from "./components/molecules/blogHeader/BlogHeader";
+export { default as BlogCard } from "./components/molecules/blogCard/BlogCard";
+export type { BlogCardProps } from "./components/molecules/blogCard/BlogCard";
+export { default as BlogText } from "./components/molecules/blogText/BlogText";
+export type { BlogTextProps } from "./components/molecules/blogText/BlogText";
+export { default as blogTextImageBlock } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
+export type { BlogTextImageBlockProps } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
+export { default as blogFooter } from "./components/molecules/blogFooter/BlogFooter";
+export type { BlogFooterProps } from "./components/molecules/blogFooter/BlogFooter";

package/dist/index.js

@@ -27,6 +27,7 @@ export { default as SingleFilter } from "./components/atoms/filters/SingleFilter
 // Selects
 export { default as Select } from "./components/atoms/selects/Select";
 export { default as ComboBox } from "./components/atoms/selects/ComboBox";
+export { default as SelectableListItem } from "./components/atoms/selects/SelectableListItem";
 // Datepickers
 export { default as Datepicker } from "./components/atoms/datepickers/Datepicker";
 // DatepickerForm
@@ -38,6 +39,7 @@ export { default as OtherStatusTag } from "./components/atoms/tags/OtherStatusTa
 // Typography
 export { default as Heading } from "./components/atoms/typography/Heading";
 export { default as Paragraph } from "./components/atoms/typography/Paragraph";
+export { default as Link } from "./components/atoms/typography/Link";
 export { default as SmallTitle } from "./components/atoms/typography/SmallTitle";
 export { default as Subtitle } from "./components/atoms/typography/Subtitle";
 export { default as TinyInfo } from "./components/atoms/typography/TinyInfo";
@@ -51,7 +53,6 @@ export { default as AppointmentSlot } from "./components/molecules/appointmentSl
 export { default as BillingCount } from "./components/molecules/billingCount/BillingCount";
 // Case Card
 export { default as CaseCard } from "./components/molecules/caseCard/CaseCard";
-// Contact Cards
 export { default as ContactCard } from "./components/molecules/contactCard/ContactCard";
 export { default as DetailedContactCard } from "./components/molecules/contactCard/DetailedContactCard";
 // Case Link Card
@@ -79,3 +80,9 @@ 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";
+// Blog
+export { default as BlogHeader } from "./components/molecules/blogHeader/BlogHeader";
+export { default as BlogCard } from "./components/molecules/blogCard/BlogCard";
+export { default as BlogText } from "./components/molecules/blogText/BlogText";
+export { default as blogTextImageBlock } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
+export { default as blogFooter } from "./components/molecules/blogFooter/BlogFooter";

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<[], void>;
+        onLogout: import("@vitest/spy").Mock<[], void>;
+        onCreateAccount: import("@vitest/spy").Mock<[], void>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;