allaw-ui 1.1.1 → 2.0.0

package/dist/components/atoms/inputs/Input.stories.js

@@ -0,0 +1,101 @@
+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 { useForm, FormProvider } from "react-hook-form";
+import Input from "./Input";
+import "../../../styles/global.css";
+import "../../../styles/icons.css";
+export var ActionsData = {};
+export default {
+    title: "Components/Atoms/Inputs/Input",
+    component: Input,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign(__assign({}, ActionsData), { endIcon: "allaw-icon-edit-2" }),
+    argTypes: {
+        style: {
+            control: {
+                type: "radio",
+                options: ["default", "variation", "password"],
+            },
+        },
+        endIcon: {
+            control: {
+                type: "text",
+            },
+        },
+        isRequired: {
+            control: "boolean",
+        },
+        validate: {
+            control: {
+                type: "text",
+            },
+        },
+        variant: {
+            control: {
+                type: "select",
+                options: ["bold", "semiBold", "medium"],
+            },
+        },
+    },
+    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) {
+    var methods = useForm();
+    return (React.createElement(FormProvider, __assign({}, methods),
+        React.createElement(Input, __assign({}, args))));
+};
+export var Default = Template.bind({});
+Default.args = {
+    name: "defaultInput",
+    title: "Nommer le rendez-vous",
+    placeholder: "Entrez le motif du rendez-vous",
+    style: "default",
+    isRequired: false,
+    variant: "medium",
+};
+export var Variation = Template.bind({});
+Variation.args = {
+    name: "variationInput",
+    title: "Adresse e-mail",
+    placeholder: "Entrez le motif du rendez-vous",
+    style: "variation",
+    isRequired: true,
+};
+export var Password = Template.bind({});
+Password.args = {
+    name: "passwordInput",
+    title: "Mot de passe",
+    placeholder: "Entrez le nouveau mot de passe",
+    style: "password",
+    isRequired: false,
+};
+export var WithValidation = Template.bind({});
+WithValidation.args = {
+    name: "validationInput",
+    title: "Email",
+    placeholder: "Entrez votre email",
+    style: "default",
+    isRequired: true,
+    validate: "email",
+};

package/dist/components/atoms/inputs/SearchBar.stories.d.ts

@@ -0,0 +1,54 @@
+export namespace ActionsData {
+    namespace onChange {
+        let action: string;
+    }
+}
+declare namespace _default {
+    export let title: string;
+    export { SearchBar as component };
+    export let tags: string[];
+    export let excludeStories: RegExp;
+    export namespace args {
+        let endIcon: string;
+    }
+    export namespace argTypes {
+        export namespace placeholder {
+            namespace control {
+                let type: string;
+            }
+        }
+        export namespace endIcon_1 {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        export { endIcon_1 as endIcon };
+        export namespace value {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        export namespace onChange_1 {
+            let action_1: string;
+            export { action_1 as action };
+        }
+        export { onChange_1 as onChange };
+    }
+    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 SearchBar from "./SearchBar";

package/dist/components/atoms/inputs/SearchBar.stories.js

@@ -0,0 +1,67 @@
+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 SearchBar from "./SearchBar";
+import "../../../styles/global.css";
+import "../../../styles/icons.css";
+export var ActionsData = {
+    onChange: { action: "changed" },
+};
+export default {
+    title: "Components/Atoms/Inputs/SearchBar",
+    component: SearchBar,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign(__assign({}, ActionsData), { endIcon: "allaw-icon-search" }),
+    argTypes: {
+        placeholder: {
+            control: {
+                type: "text",
+            },
+        },
+        endIcon: {
+            control: {
+                type: "text",
+            },
+        },
+        value: {
+            control: {
+                type: "text",
+            },
+        },
+        onChange: { action: "changed" },
+    },
+    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) {
+    var _a = useState(""), value = _a[0], setValue = _a[1];
+    return (React.createElement(SearchBar, __assign({}, args, { value: value, onChange: function (newValue) {
+            setValue(newValue);
+            args.onChange(newValue);
+        } })));
+};
+export var Default = Template.bind({});
+Default.args = {
+    placeholder: "Faites une recherche",
+    endIcon: "allaw-icon-search",
+    onChange: function (value) { return console.log("Search value:", value); },
+};

package/dist/components/atoms/inputs/TextArea.stories.d.ts

@@ -0,0 +1,70 @@
+export const ActionsData: {};
+declare namespace _default {
+    export let title: string;
+    export { TextArea as component };
+    export let tags: string[];
+    export let excludeStories: RegExp;
+    export let args: {};
+    export namespace argTypes {
+        namespace style {
+            namespace control {
+                let type: string;
+                let options: string[];
+            }
+        }
+        namespace isRequired {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace validate {
+            export namespace control_2 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_2 as control };
+        }
+        namespace maxHeight {
+            export namespace control_3 {
+                let type_2: string;
+                export { type_2 as type };
+                export let min: number;
+                export let max: number;
+                export let step: number;
+            }
+            export { control_3 as control };
+        }
+        namespace variant {
+            export namespace control_4 {
+                let type_3: string;
+                export { type_3 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_4 as control };
+        }
+        namespace color {
+            export namespace control_5 {
+                let type_4: string;
+                export { type_4 as type };
+                let options_2: string[];
+                export { options_2 as options };
+            }
+            export { control_5 as control };
+        }
+    }
+    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;
+export const Variation: any;
+export const WithValidation: any;
+import TextArea from "./TextArea";

package/dist/components/atoms/inputs/TextArea.stories.js

@@ -0,0 +1,113 @@
+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 { useForm, FormProvider } from "react-hook-form";
+import TextArea from "./TextArea";
+import "../../../styles/global.css";
+export var ActionsData = {};
+export default {
+    title: "Components/Atoms/Inputs/TextArea",
+    component: TextArea,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign({}, ActionsData),
+    argTypes: {
+        style: {
+            control: {
+                type: "radio",
+                options: ["default", "variation"],
+            },
+        },
+        isRequired: {
+            control: "boolean",
+        },
+        validate: {
+            control: {
+                type: "text",
+            },
+        },
+        maxHeight: {
+            control: {
+                type: "number",
+                min: 100,
+                max: 1000,
+                step: 50,
+            },
+        },
+        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",
+                ],
+            },
+        },
+    },
+    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) {
+    var methods = useForm();
+    return (React.createElement(FormProvider, __assign({}, methods),
+        React.createElement(TextArea, __assign({}, args))));
+};
+export var Default = Template.bind({});
+Default.args = {
+    name: "defaultTextArea",
+    title: "Nommer le rendez-vous",
+    placeholder: "Entrez le motif du rendez-vous",
+    style: "default",
+    isRequired: false,
+    maxHeight: 400,
+    variant: "medium",
+    color: "noir",
+};
+export var Variation = Template.bind({});
+Variation.args = {
+    name: "variationTextArea",
+    title: "Adresse e-mail",
+    placeholder: "Entrez le motif du rendez-vous",
+    style: "variation",
+    isRequired: true,
+    maxHeight: 400,
+};
+export var WithValidation = Template.bind({});
+WithValidation.args = {
+    name: "validationTextArea",
+    title: "Email",
+    placeholder: "Entrez votre email",
+    style: "default",
+    isRequired: true,
+    validate: "email",
+    maxHeight: 400,
+};

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

@@ -6,11 +6,10 @@
   justify-content: space-between;
   align-items: center;
   height: 1.5rem;
-  gap: 4rem;
+  gap: 2rem;
+  padding-left: 0.7rem;
 }
 
-
-
 .progress-bar-background.hidden-content {
   visibility: hidden;
 }

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

@@ -8,9 +8,8 @@ var ProgressBar = function (_a) {
     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 },
-                React.createElement("i", { className: "allaw-icon-chevron-left" })))),
+        isWrapperProgressBar && React.createElement("div", { className: "progress-bar-icon-container" }, startIcon && (React.createElement("button", { className: "progress-bar-chevron", onClick: onStartIconClick },
+            React.createElement("i", { className: "allaw-icon-chevron-left" })))),
         React.createElement("div", { className: "progress-bar-background ".concat(showProgressBar ? "" : "hidden-content"), style: {
                 height: isWrapperProgressBar ? "6px" : "8px",
                 width: startIcon ? "calc(100% - 32px)" : "100%",

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

@@ -0,0 +1,83 @@
+export const ActionsData: {};
+declare namespace _default {
+    export let title: string;
+    export { ProgressBar as component };
+    export let tags: string[];
+    export let excludeStories: RegExp;
+    export namespace args {
+        let steps: number;
+        let currentStep: number;
+        let startIcon: boolean;
+        let endIcon: boolean;
+        let showProgressBar: boolean;
+        let barColor: string;
+    }
+    export namespace argTypes {
+        export namespace steps_1 {
+            namespace control {
+                let type: string;
+            }
+        }
+        export { steps_1 as steps };
+        export namespace currentStep_1 {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        export { currentStep_1 as currentStep };
+        export namespace startIcon_1 {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        export { startIcon_1 as startIcon };
+        export namespace endIcon_1 {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+        export { endIcon_1 as endIcon };
+        export namespace showProgressBar_1 {
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+        }
+        export { showProgressBar_1 as showProgressBar };
+        export namespace barColor_1 {
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+                export let options: string[];
+            }
+            export { control_5 as control };
+            export let description: string;
+        }
+        export { barColor_1 as barColor };
+    }
+    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;
+export const FirstStep: any;
+export const Hidden: any;
+export const RedProgress: any;
+export const GreenProgress: any;
+export const GreyProgress: any;
+import ProgressBar from "./ProgressBar";

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

@@ -0,0 +1,88 @@
+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 ProgressBar from "./ProgressBar";
+import "../../../styles/global.css";
+import "../../../styles/icons.css";
+export var ActionsData = {};
+export default {
+    title: "Components/Atoms/ProgressBars/ProgressBar",
+    component: ProgressBar,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign(__assign({}, ActionsData), { steps: 5, currentStep: 2, startIcon: true, endIcon: true, showProgressBar: true, barColor: "blue" }),
+    argTypes: {
+        steps: {
+            control: {
+                type: "number",
+            },
+        },
+        currentStep: {
+            control: {
+                type: "number",
+            },
+        },
+        startIcon: {
+            control: {
+                type: "boolean",
+            },
+        },
+        endIcon: {
+            control: {
+                type: "boolean",
+            },
+        },
+        showProgressBar: {
+            control: {
+                type: "boolean",
+            },
+        },
+        barColor: {
+            control: {
+                type: "select",
+                options: ["blue", "red", "green", "grey"],
+            },
+            description: "Couleur de la barre de progression",
+        },
+    },
+    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(ProgressBar, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    steps: 5,
+    currentStep: 2,
+    startIcon: true,
+    endIcon: true,
+    showProgressBar: true,
+    barColor: "blue",
+};
+export var FirstStep = Template.bind({});
+FirstStep.args = __assign(__assign({}, Default.args), { currentStep: 1 });
+export var Hidden = Template.bind({});
+Hidden.args = __assign(__assign({}, Default.args), { showProgressBar: false });
+export var RedProgress = Template.bind({});
+RedProgress.args = __assign(__assign({}, Default.args), { barColor: "red" });
+export var GreenProgress = Template.bind({});
+GreenProgress.args = __assign(__assign({}, Default.args), { barColor: "green" });
+export var GreyProgress = Template.bind({});
+GreyProgress.args = __assign(__assign({}, Default.args), { barColor: "grey" });

package/dist/components/atoms/radios/RadioButton.stories.d.ts

@@ -0,0 +1,36 @@
+export namespace ActionsData {
+    namespace onClick {
+        let action: string;
+    }
+}
+declare namespace _default {
+    export let title: string;
+    export { RadioButton as component };
+    export let tags: string[];
+    export let excludeStories: RegExp;
+    export namespace args { }
+    export namespace argTypes {
+        namespace style {
+            namespace control {
+                let type: string;
+                let options: string[];
+            }
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const UserDefault: any;
+export const UserActive: any;
+export const HybrideDefault: any;
+export const HybrideActive: any;
+import RadioButton from "./RadioButton";