allaw-ui 0.1.71 → 1.0.0

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.css

@@ -4,7 +4,7 @@
 .text-area {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 11px;
   /* field-sizing: content; */
 }
 

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

@@ -0,0 +1,23 @@
+import React from "react";
+import "./TextArea.css";
+import "../../../styles/global.css";
+import { commonRegex } from "../../../utils/regex";
+export interface TextAreaProps {
+    title: string;
+    style?: "default" | "variation";
+    placeholder: string;
+    isRequired?: boolean;
+    validate?: RegExp | keyof typeof commonRegex;
+    onError?: (error: string) => void;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    value?: string;
+    error?: string;
+    maxHeight?: number;
+    variant?: "bold" | "semiBold" | "medium";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
+}
+export interface TextAreaRef {
+    validate: () => boolean;
+}
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<TextAreaRef>>;
+export default TextArea;

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

@@ -0,0 +1,66 @@
+// TextArea.tsx
+import React, { useState, useEffect, useCallback, forwardRef, useImperativeHandle, useRef, } from "react";
+import "./TextArea.css";
+import "../../../styles/global.css";
+import { commonRegex } from "../../../utils/regex";
+import TinyInfo from "../typography/TinyInfo";
+import Paragraph from "../typography/Paragraph";
+var TextArea = forwardRef(function (_a, ref) {
+    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.maxHeight, maxHeight = _d === void 0 ? 400 : _d, _e = _a.variant, variant = _e === void 0 ? "medium" : _e, _f = _a.color, color = _f === void 0 ? "noir" : _f;
+    var _g = useState(propValue || ""), value = _g[0], setValue = _g[1];
+    var _h = useState(propError || ""), error = _h[0], setError = _h[1];
+    var _j = useState(false), isTouched = _j[0], setIsTouched = _j[1];
+    var textareaRef = useRef(null);
+    useEffect(function () {
+        setValue(propValue || "");
+    }, [propValue]);
+    useEffect(function () {
+        setError(propError || "");
+    }, [propError]);
+    var validateTextArea = useCallback(function () {
+        var _a;
+        var currentValue = ((_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.value) || value;
+        var errorMessage = "";
+        if (isRequired && currentValue.trim() === "") {
+            errorMessage = "Ce champ est requis";
+        }
+        else if (validate && currentValue) {
+            var regex = typeof validate === "string" ? commonRegex[validate] : validate;
+            if (!regex.test(currentValue)) {
+                errorMessage = "Veuillez vérifier votre saisie";
+            }
+        }
+        setError(errorMessage);
+        setIsTouched(true);
+        onError === null || onError === void 0 ? void 0 : onError(errorMessage);
+        return !errorMessage;
+    }, [isRequired, value, validate, onError]);
+    useImperativeHandle(ref, function () { return ({
+        validate: validateTextArea,
+    }); });
+    var handleChange = function (e) {
+        var newValue = e.target.value;
+        setValue(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+        if (isTouched) {
+            validateTextArea();
+        }
+    };
+    var handleBlur = function () {
+        setIsTouched(true);
+        validateTextArea();
+    };
+    return (React.createElement("div", { className: "TextArea text-area-".concat(style) },
+        React.createElement("div", { className: "text-area-title-container" },
+            React.createElement(Paragraph, { variant: variant, color: color, text: title }),
+            isRequired && title && (React.createElement("span", { className: "text-area-required" },
+                "\u00A0",
+                "*"))),
+        React.createElement("div", { className: "text-area-container" },
+            React.createElement("div", { className: "text-area-input" },
+                React.createElement("textarea", { ref: textareaRef, placeholder: placeholder, className: "text-area-placeholder", value: value, onChange: handleChange, onBlur: handleBlur, style: { maxHeight: "".concat(maxHeight, "px") } })),
+            error && isTouched && (React.createElement("div", { className: "error-message" },
+                React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))))));
+});
+TextArea.displayName = "TextArea";
+export default TextArea;

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/inputs/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Input } from "./Input";
+export { default as TextArea } from "./TextArea";
+export { default as SearchBar } from "./SearchBar";
+export type { InputProps, InputRef } from "./Input";
+export type { SearchBarProps } from "./SearchBar";
+export type { TextAreaProps, TextAreaRef } from "./TextArea";

package/dist/components/atoms/inputs/index.js

@@ -0,0 +1,3 @@
+export { default as Input } from "./Input";
+export { default as TextArea } from "./TextArea";
+export { default as SearchBar } from "./SearchBar";

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

@@ -6,17 +6,8 @@
   justify-content: space-between;
   align-items: center;
   height: 1.5rem;
-  gap: 4rem;
-}
-
-.progress-bar-background {
-  display: flex;
-  width: 100%;
-  height: 8px;
-  align-items: center;
-  border-radius: 8px;
-  background: var(--venom-grey, #e6edf5);
-  margin: 0 10px;
+  gap: 2rem;
+  padding-left: 0.7rem;
 }
 
 .progress-bar-background.hidden-content {
@@ -58,7 +49,7 @@
 .progress-bar-background {
   display: flex;
   width: 100%;
-  height: 8px;
+  height: 6px;
   align-items: center;
   border-radius: 8px;
   background: var(--venom-grey, #e6edf5);
@@ -66,12 +57,27 @@
 }
 
 .progress-bar-fill {
-  height: 8px;
+  height: 6px;
   border-radius: 8px;
-  background: var(--primary-blue, #25beeb);
   transition: width 0.35s ease;
 }
 
+.progress-bar-fill-blue {
+  background: var(--primary-blue, #25beeb);
+}
+
+.progress-bar-fill-red {
+  background: var(--actions-error, #e15151);
+}
+
+.progress-bar-fill-green {
+  background: var(--actions-valid, #29a36a);
+}
+
+.progress-bar-fill-grey {
+  background: var(--mid-grey, #728ea7);
+}
+
 .progress-bar-close {
   display: flex;
   flex-direction: row;
@@ -79,7 +85,6 @@
   align-items: center;
   width: 32px;
   height: 32px;
-  /* padding: 5px; */
   padding-right: 2px;
   flex-shrink: 0;
   cursor: pointer;

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

@@ -0,0 +1,18 @@
+import React from "react";
+import "./ProgressBar.css";
+import "../../../styles/global.css";
+import "../../../styles/icons.css";
+export type BarColor = "blue" | "red" | "green" | "grey";
+export interface ProgressBarProps {
+    steps: number;
+    currentStep: number;
+    startIcon?: boolean;
+    endIcon?: boolean;
+    onStartIconClick?: () => void;
+    onEndIconClick?: () => void;
+    showProgressBar?: boolean;
+    barColor?: BarColor;
+    isWrapperProgressBar?: boolean;
+}
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

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

@@ -0,0 +1,25 @@
+import React from "react";
+import "./ProgressBar.css";
+import "../../../styles/global.css";
+import "../../../styles/icons.css";
+var ProgressBar = function (_a) {
+    var steps = _a.steps, currentStep = _a.currentStep, _b = _a.startIcon, startIcon = _b === void 0 ? true : _b, _c = _a.endIcon, endIcon = _c === void 0 ? true : _c, onStartIconClick = _a.onStartIconClick, onEndIconClick = _a.onEndIconClick, _d = _a.showProgressBar, showProgressBar = _d === void 0 ? true : _d, _e = _a.barColor, barColor = _e === void 0 ? "blue" : _e, _f = _a.isWrapperProgressBar, isWrapperProgressBar = _f === void 0 ? true : _f;
+    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" },
+        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%",
+                margin: noIconsMargin,
+            } },
+            React.createElement("div", { className: "progress-bar-fill progress-bar-fill-".concat(barColor), style: {
+                    width: "".concat(progressWidth, "%"),
+                    height: isWrapperProgressBar ? "6px" : "8px",
+                } })),
+        endIcon && (React.createElement("button", { className: "progress-bar-close", onClick: onEndIconClick },
+            React.createElement("i", { className: "allaw-icon-close" })))));
+};
+export default ProgressBar;

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/progressBars/index.d.ts

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

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

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

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

@@ -0,0 +1,11 @@
+import React from "react";
+import "./RadioButton.css";
+import "../../../styles/global.css";
+export interface RadioButtonProps {
+    label: string;
+    style?: "user" | "hybride";
+    isActive: boolean;
+    onClick: () => void;
+}
+declare const RadioButton: React.FC<RadioButtonProps>;
+export default RadioButton;

package/dist/components/atoms/radios/RadioButton.js

@@ -0,0 +1,10 @@
+import React from "react";
+import "./RadioButton.css";
+import "../../../styles/global.css";
+var RadioButton = function (_a) {
+    var label = _a.label, _b = _a.style, style = _b === void 0 ? "user" : _b, isActive = _a.isActive, onClick = _a.onClick;
+    return (React.createElement("button", { className: "radio-button radio-button-".concat(style, " ").concat(isActive ? "radio-button-".concat(style, "-active") : ""), onClick: onClick },
+        React.createElement("span", { className: "radio-button-icon" }, isActive && React.createElement("span", { className: "radio-button-icon-inner" })),
+        React.createElement("span", { className: "radio-button-label" }, label)));
+};
+export default RadioButton;