allaw-ui 0.1.71 → 1.0.2

package/dist/components/molecules/contactCard/ContactCard.js

@@ -0,0 +1,80 @@
+import React from "react";
+import "./ContactCard.css";
+import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
+import IconButton from "../../atoms/buttons/IconButton";
+import Image from "next/image";
+var NoPhoto = "/assets/NoPhoto.png";
+var ContactCard = function (_a) {
+    var size = _a.size, name = _a.name, birthDate = _a.birthDate, avatarUrl = _a.avatarUrl, status = _a.status, address = _a.address, phone = _a.phone, email = _a.email, onEdit = _a.onEdit, gender = _a.gender;
+    var renderContent = function () {
+        switch (size) {
+            case "small":
+                return (React.createElement("div", { className: "contact-card-content" },
+                    React.createElement("div", { className: "profile-picture-container" },
+                        React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 64, height: 64, className: "avatar" })),
+                    React.createElement("div", { className: "contact-info" },
+                        React.createElement("h3", { className: "contact-name" }, name),
+                        React.createElement("p", { className: "contact-details" },
+                            React.createElement("span", null, gender === "male" ? "M" : "F"),
+                            React.createElement("span", { className: "gender-separator" }),
+                            React.createElement("span", null, birthDate)))));
+            case "medium":
+                return (React.createElement("div", { className: "contact-card-content" },
+                    React.createElement("div", { className: "profile-picture-container" },
+                        React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 72, height: 72, className: "avatar" })),
+                    React.createElement("div", { className: "contact-info" },
+                        React.createElement("h3", { className: "contact-name" }, name),
+                        React.createElement("p", { className: "contact-details" },
+                            React.createElement("span", null, gender === "male" ? "M" : "F"),
+                            React.createElement("span", { className: "gender-separator" }),
+                            React.createElement("span", null, birthDate))),
+                    React.createElement("div", { className: "status-container" },
+                        React.createElement(OtherStatusTag, { label: status, type: "readonly" }))));
+            case "large":
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "profile-picture-container" },
+                        React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 94, height: 94, className: "avatar" })),
+                    React.createElement("div", { className: "content-container" },
+                        React.createElement("div", null,
+                            React.createElement("h3", { className: "contact-name" }, name),
+                            React.createElement("p", { className: "contact-details" },
+                                React.createElement("span", null, gender === "male" ? "M" : "F"),
+                                React.createElement("span", { className: "gender-separator" }),
+                                React.createElement("span", null, birthDate))),
+                        React.createElement("div", { className: "contact-additional-info" },
+                            React.createElement("div", { className: "contact-address-container" },
+                                React.createElement("p", { className: "info-label" }, "ADRESSE"),
+                                React.createElement("p", { className: "info-value" }, address)),
+                            React.createElement("div", { className: "contact-telephone-email-container" },
+                                React.createElement("p", { className: "info-label" }, "CONTACT"),
+                                React.createElement("p", { className: "info-value" },
+                                    React.createElement("span", { className: "contact-phone" }, phone)),
+                                React.createElement("p", { className: "info-value" },
+                                    React.createElement("span", { className: "contact-phone" }, email))))),
+                    React.createElement("div", { className: "status-container" },
+                        React.createElement(OtherStatusTag, { label: status, type: "readonly" }))));
+            case "editable":
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "content-container" },
+                        React.createElement("div", { className: "name-tag-container" },
+                            React.createElement("h3", { className: "contact-name" }, name),
+                            React.createElement(OtherStatusTag, { label: status, type: "readonly" })),
+                        React.createElement("div", { className: "info-container" },
+                            React.createElement("div", { className: "info-item" },
+                                React.createElement("i", { className: "allaw-icon-user info-icon" }),
+                                React.createElement("span", { className: "info-text" },
+                                    gender === "male" ? "Client" : "Cliente",
+                                    " de l'\u00E9tude")),
+                            React.createElement("div", { className: "telephone-email-items" },
+                                React.createElement("div", { className: "info-item" },
+                                    React.createElement("i", { className: "allaw-icon-phone info-icon" }),
+                                    React.createElement("span", { className: "info-text contact" }, phone)),
+                                React.createElement("div", { className: "info-item" },
+                                    React.createElement("i", { className: "allaw-icon-mail info-icon" }),
+                                    React.createElement("span", { className: "info-text contact" }, email))))),
+                    React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-edit-2", onClick: onEdit })));
+        }
+    };
+    return React.createElement("div", { className: "contact-card ".concat(size) }, renderContent());
+};
+export default ContactCard;

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

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

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

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

package/dist/components/molecules/documentCard/DocumentCard.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "./DocumentCard.css";
+export interface DocumentCardProps {
+    type: "document" | "note" | "invoice" | "waiting";
+    title: string;
+    date: Date;
+    status: "sent" | "received" | "internal";
+    documents?: {
+        [key: string]: boolean;
+    };
+    onCardClick?: () => any;
+    documentCount?: string;
+}
+declare const DocumentCard: React.FC<DocumentCardProps>;
+export default DocumentCard;

package/dist/components/molecules/documentCard/DocumentCard.js

@@ -0,0 +1,72 @@
+import React from "react";
+import "./DocumentCard.css";
+import IconButton from "../../atoms/buttons/IconButton";
+import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
+import { Paragraph } from "../../atoms/typography";
+var DocumentCard = function (_a) {
+    var type = _a.type, title = _a.title, date = _a.date, onCardClick = _a.onCardClick, status = _a.status, _b = _a.documents, documents = _b === void 0 ? {} : _b, _c = _a.documentCount, documentCount = _c === void 0 ? "" : _c;
+    var getIconName = function () {
+        switch (type) {
+            case "document":
+                return "allaw-icon-edit-2";
+            case "note":
+                return "allaw-icon-document";
+            case "invoice":
+                return "allaw-icon-file";
+            case "waiting":
+                return "allaw-icon-clock";
+            default:
+                return "allaw-icon-document";
+        }
+    };
+    var getStatusName = function () {
+        switch (status) {
+            case "internal":
+                return "INTERNE";
+            case "received":
+                return "REÇU";
+            case "sent":
+                return "ENVOYÉ";
+            default:
+                return "INTERNE";
+        }
+    };
+    var getDisplayType = function (type) {
+        if (type === "invoice") {
+            return "FACTURE";
+        }
+        return type.toUpperCase();
+    };
+    var formatDate = function (date) {
+        return date.toLocaleDateString("fr-FR", {
+            day: "2-digit",
+            month: "2-digit",
+            year: "2-digit",
+        });
+    };
+    if (type === "waiting") {
+        var documentList = Object.keys(documents);
+        return (React.createElement("div", { className: "document-card waiting", style: { cursor: onCardClick ? "pointer" : "default" }, onClick: function () { return onCardClick && onCardClick(); } },
+            React.createElement("div", { className: "document-card-left" },
+                React.createElement(OtherStatusTag, { type: "information", label: "Documents demand\u00E9s pour ce rendez-vous" }),
+                React.createElement("h3", { className: "document-card-title" }, title),
+                React.createElement("div", { className: "document-list" },
+                    React.createElement("ul", null, documentList.map(function (doc, index) { return (React.createElement("li", { key: index, className: "document-label" },
+                        React.createElement("span", { className: "document-bullet" }),
+                        " ",
+                        doc)); })))),
+            React.createElement("div", { className: "document-card-right" },
+                React.createElement(IconButton, { style: "smallFilled", iconName: "allaw-icon-document" }),
+                React.createElement("span", { className: "document-count" }, documentCount))));
+    }
+    return (React.createElement("div", { className: "document-card", onClick: function () { return onCardClick && onCardClick(); }, style: { cursor: onCardClick ? "pointer" : "default" } },
+        React.createElement("div", { className: "document-card-left" },
+            React.createElement(IconButton, { style: "largeFilled", iconName: getIconName() }),
+            React.createElement("div", { className: "document-card-info" },
+                React.createElement("span", { className: "document-card-type" }, getDisplayType(type)),
+                React.createElement(Paragraph, { text: title, variant: "semiBold", size: "default", maxLines: 1, color: "noir" }),
+                React.createElement("span", { className: "document-card-date" }, formatDate(date)))),
+        React.createElement("div", { className: "document-card-right" },
+            React.createElement(OtherStatusTag, { type: "information", label: getStatusName() }))));
+};
+export default DocumentCard;

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

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

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

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

package/dist/components/molecules/employeeCard/EmployeeCard.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "./EmployeeCard.css";
+export interface EmployeeCardProps {
+    name: string;
+    role: string;
+    contactNumber: string;
+    email1: string;
+    email2: string;
+    profileImage: string;
+    isVerified: boolean;
+    size: "small" | "large";
+    onEdit: () => void;
+}
+declare const EmployeeCard: React.FC<EmployeeCardProps>;
+export default EmployeeCard;

package/dist/components/molecules/employeeCard/EmployeeCard.js

@@ -0,0 +1,34 @@
+import React from "react";
+import "./EmployeeCard.css";
+import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
+import IconButton from "../../atoms/buttons/IconButton";
+import Image from "next/image";
+var NoPhoto = "/assets/NoPhoto.png";
+var EmployeeCard = function (_a) {
+    var name = _a.name, role = _a.role, contactNumber = _a.contactNumber, email1 = _a.email1, email2 = _a.email2, profileImage = _a.profileImage, isVerified = _a.isVerified, size = _a.size, onEdit = _a.onEdit;
+    var renderProfileImage = function () { return (React.createElement("div", { className: "profile-image-container" },
+        React.createElement(Image, { src: profileImage || NoPhoto, alt: name, width: size === "small" ? 64 : 94, height: size === "small" ? 64 : 94, className: "profile-image" }),
+        isVerified && (React.createElement("span", { className: "verified-icon allaw-icon-verified" })))); };
+    var renderNameAndRole = function () { return (React.createElement("div", { className: "name-tag-container" },
+        React.createElement("h3", { className: "name" }, name),
+        React.createElement("div", { className: "role-container" },
+            React.createElement(OtherStatusTag, { label: role, type: "information" })))); };
+    var renderContactInfo = function () { return (React.createElement("div", { className: "contact-container" },
+        React.createElement("span", { className: "contact-label" }, "CONTACT"),
+        React.createElement("div", { className: "phone-email-container" },
+            React.createElement("span", { className: "phone-number" }, contactNumber),
+            React.createElement("span", { className: "email" }, email1),
+            React.createElement("span", { className: "email" }, email2)))); };
+    var renderSmallCard = function () { return (React.createElement("div", { className: "content" },
+        renderProfileImage(),
+        renderNameAndRole())); };
+    var renderLargeCard = function () { return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "content" },
+            renderProfileImage(),
+            React.createElement("div", { className: "content-main-container" },
+                renderNameAndRole(),
+                React.createElement("div", { className: "content-container" }, renderContactInfo()))),
+        React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-edit-2", onClick: onEdit }))); };
+    return (React.createElement("div", { className: "employee-card ".concat(size) }, size === "small" ? renderSmallCard() : renderLargeCard()));
+};
+export default EmployeeCard;

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

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

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

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

package/dist/components/molecules/loadingBox/LoadingBox.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./LoadingBox.css";
+export type LoadingBoxProps = {
+    boxHeigth: string;
+    boxWidth: string;
+    boxRadius: string;
+};
+declare function LoadingBox({ boxHeigth, boxWidth, boxRadius }: LoadingBoxProps): React.JSX.Element;
+export default LoadingBox;

package/dist/components/molecules/loadingBox/LoadingBox.js

@@ -0,0 +1,7 @@
+import React from "react";
+import "./LoadingBox.css";
+function LoadingBox(_a) {
+    var boxHeigth = _a.boxHeigth, boxWidth = _a.boxWidth, boxRadius = _a.boxRadius;
+    return React.createElement("div", { className: "loading-box", style: { minHeight: boxHeigth, minWidth: boxWidth, borderRadius: boxRadius } });
+}
+export default LoadingBox;

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

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

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

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

package/dist/components/molecules/proCard/ProCard.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "./ProCard.css";
+export interface ProCardProps {
+    imageUrl?: string;
+    job: string;
+    firstName: string;
+    lastName: string;
+    address: string;
+    profileUrl: string;
+    isPro?: boolean;
+}
+declare const ProCard: React.FC<ProCardProps>;
+export default ProCard;

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

@@ -0,0 +1,25 @@
+import React from "react";
+import "./ProCard.css";
+import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
+import Image from "next/image";
+var NoPhoto = "/assets/NoPhoto.png";
+var ProCard = function (_a) {
+    var imageUrl = _a.imageUrl, job = _a.job, firstName = _a.firstName, lastName = _a.lastName, address = _a.address, profileUrl = _a.profileUrl, _b = _a.isPro, isPro = _b === void 0 ? false : _b;
+    var uppercaseJob = job.toUpperCase();
+    return (React.createElement("div", { className: "pro-card" },
+        React.createElement("div", { className: "pro-card-content" },
+            React.createElement("div", { className: "pro-card-top" },
+                React.createElement("div", { className: "pro-card-image-container" },
+                    React.createElement(Image, { src: imageUrl || NoPhoto, alt: "".concat(firstName, " ").concat(lastName), width: 74, height: 74, className: "pro-card-avatar" }),
+                    isPro && (React.createElement("div", { className: "pro-card-verified-icon-container" },
+                        React.createElement("div", { className: "pro-card-verified-icon-background" }),
+                        React.createElement("i", { className: "icon allaw-icon-verified pro-card-verified-icon" })))),
+                React.createElement("div", { className: "pro-card-job-name" },
+                    React.createElement(OtherStatusTag, { label: uppercaseJob, type: "information" }),
+                    React.createElement("h3", { className: "pro-card-name" },
+                        React.createElement("a", { href: profileUrl }, "".concat(firstName, " ").concat(lastName))))),
+            address && /[a-zA-Z0-9]/.test(address) && (React.createElement("div", { className: "pro-card-address" },
+                React.createElement("i", { className: "icon allaw-icon-map-pin" }),
+                React.createElement("span", null, address))))));
+};
+export default ProCard;

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

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

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

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

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

@@ -0,0 +1,12 @@
+import React from "react";
+import "./RadioForm.css";
+import "../../../styles/global.css";
+export interface RadioFormProps {
+    label: string;
+    isRequired: boolean;
+    options: string[];
+    defaultSelected?: string;
+    onChange?: (selectedOption: string | null) => void;
+}
+declare const RadioForm: React.FC<RadioFormProps>;
+export default RadioForm;

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

@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from "react";
+import "./RadioForm.css";
+import "../../../styles/global.css";
+import Paragraph from "../../atoms/typography/Paragraph";
+import RadioButton from "../../atoms/radios/RadioButton";
+var RadioForm = function (_a) {
+    var label = _a.label, isRequired = _a.isRequired, options = _a.options, defaultSelected = _a.defaultSelected, onChange = _a.onChange;
+    var _b = useState(defaultSelected || null), selectedOption = _b[0], setSelectedOption = _b[1];
+    useEffect(function () {
+        if (defaultSelected) {
+            setSelectedOption(defaultSelected);
+        }
+    }, [defaultSelected]);
+    var handleOptionChange = function (option) {
+        setSelectedOption(option);
+        if (onChange) {
+            onChange(option);
+        }
+    };
+    return (React.createElement("div", { className: "radio-form" },
+        React.createElement(Paragraph, { variant: "medium", color: "noir", text: React.createElement(React.Fragment, null,
+                label,
+                " ",
+                isRequired && React.createElement("span", { className: "radio-form-required" }, "*")), size: "default" }),
+        React.createElement("div", { className: "radio-form-options" }, options.map(function (option, index) { return (React.createElement(RadioButton, { key: index, label: option, style: "hybride", isActive: selectedOption === option, onClick: function () { return handleOptionChange(option); } })); }))));
+};
+export default RadioForm;

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

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

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

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

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

@@ -0,0 +1,15 @@
+import React from "react";
+import "./SelectForm.css";
+import "../../../styles/global.css";
+import { SelectItem } from "../../atoms/selects/Select";
+export interface SelectFormProps {
+    label: string;
+    isRequired: boolean;
+    options: SelectItem[];
+    isMultiple: boolean;
+    width?: number;
+    selectedItem?: string | string[];
+    onChange?: (selected: string | string[]) => void;
+}
+declare const SelectForm: React.FC<SelectFormProps>;
+export default SelectForm;

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

@@ -0,0 +1,15 @@
+import React from "react";
+import "./SelectForm.css";
+import "../../../styles/global.css";
+import Paragraph from "../../atoms/typography/Paragraph";
+import Select from "../../atoms/selects/Select";
+var SelectForm = function (_a) {
+    var label = _a.label, isRequired = _a.isRequired, options = _a.options, isMultiple = _a.isMultiple, _b = _a.width, width = _b === void 0 ? 100 : _b, selectedItem = _a.selectedItem, onChange = _a.onChange;
+    return (React.createElement("div", { className: "select-form" },
+        React.createElement(Paragraph, { variant: "medium", color: "noir", text: React.createElement(React.Fragment, null,
+                label,
+                " ",
+                isRequired && React.createElement("span", { className: "select-form-required" }, "*")), size: "default" }),
+        React.createElement(Select, { items: options, multiple: isMultiple, isRequired: isRequired, width: width, selectedItem: selectedItem, onChange: onChange })));
+};
+export default SelectForm;

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

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

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

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

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

@@ -0,0 +1,34 @@
+import React from "react";
+import "./Stepper.css";
+import "../../../styles/global.css";
+import "../../../styles/icons.css";
+export interface StepperProps {
+    steps: number;
+    currentStep: number;
+    startIcon?: boolean[];
+    endIcon?: boolean;
+    children: React.ReactNode[];
+    secondaryButton?: {
+        show: boolean;
+        label: string;
+        startIcon?: React.ReactNode;
+        endIcon?: React.ReactNode;
+        startIconName?: string;
+        endIconName?: string;
+        onSecondaryButtonClick?: (step: number) => void;
+    }[];
+    primaryButton?: {
+        show: boolean;
+        label: string;
+        startIcon?: React.ReactNode;
+        endIcon?: React.ReactNode;
+        startIconName?: string;
+        endIconName?: string;
+        onPrimaryButtonClick?: (step: number) => void;
+    }[];
+    showProgressBar?: boolean[];
+    onClose?: () => void;
+    validateStep?: (step: number) => boolean | Promise<boolean>;
+}
+declare const Stepper: React.FC<StepperProps>;
+export default Stepper;

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

@@ -0,0 +1,123 @@
+"use client";
+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 React, { useState, useEffect, useCallback, useRef } from "react";
+import ReactDOM from "react-dom";
+import "./Stepper.css";
+import "../../../styles/global.css";
+import "../../../styles/icons.css";
+import ProgressBar from "../../atoms/progressBars/ProgressBar";
+import PrimaryButton from "../../atoms/buttons/PrimaryButton";
+import SecondaryButton from "../../atoms/buttons/SecondaryButton";
+var Stepper = function (_a) {
+    var steps = _a.steps, currentStep = _a.currentStep, _b = _a.startIcon, startIcon = _b === void 0 ? [] : _b, _c = _a.endIcon, endIcon = _c === void 0 ? true : _c, children = _a.children, _d = _a.secondaryButton, secondaryButton = _d === void 0 ? [] : _d, _e = _a.primaryButton, primaryButton = _e === void 0 ? [] : _e, _f = _a.showProgressBar, showProgressBar = _f === void 0 ? [] : _f, onClose = _a.onClose, validateStep = _a.validateStep;
+    var _g = useState(currentStep || 1), step = _g[0], setStep = _g[1];
+    var _h = useState(false), isVisible = _h[0], setIsVisible = _h[1];
+    var portalContainerRef = useRef(null);
+    useEffect(function () {
+        var container = document.createElement("div");
+        document.body.appendChild(container);
+        portalContainerRef.current = container;
+        setIsVisible(true);
+        return function () {
+            setIsVisible(false);
+            if (portalContainerRef.current &&
+                document.body.contains(portalContainerRef.current)) {
+                document.body.removeChild(portalContainerRef.current);
+            }
+        };
+    }, []);
+    useEffect(function () {
+        setStep(currentStep || 1);
+    }, [currentStep]);
+    var handleNext = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var currentPrimaryButton, isValid;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    currentPrimaryButton = primaryButton[step - 1];
+                    if (currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.onPrimaryButtonClick) {
+                        currentPrimaryButton.onPrimaryButtonClick(step);
+                    }
+                    if (!validateStep) return [3 /*break*/, 2];
+                    return [4 /*yield*/, validateStep(step)];
+                case 1:
+                    isValid = _a.sent();
+                    if (!isValid) {
+                        return [2 /*return*/];
+                    }
+                    _a.label = 2;
+                case 2:
+                    if (step < steps) {
+                        setStep(step + 1);
+                    }
+                    else if (step === steps && onClose) {
+                        onClose();
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [step, steps, validateStep, primaryButton, onClose]);
+    var handlePrevious = useCallback(function () {
+        if (step > 1) {
+            setStep(step - 1);
+        }
+    }, [step]);
+    var currentSecondaryButton = secondaryButton[step - 1] || {};
+    var currentPrimaryButton = primaryButton[step - 1] || {};
+    var currentShowProgressBar = showProgressBar[step - 1] !== false;
+    var currentShowStartIcon = startIcon[step - 1];
+    var handleClose = useCallback(function () {
+        setIsVisible(false);
+        if (onClose) {
+            onClose();
+        }
+    }, [onClose]);
+    var stepperContent = (React.createElement("div", { className: "stepper-overlay ".concat(isVisible ? "visible" : ""), onClick: handleClose },
+        React.createElement("div", { className: "stepper-container", onClick: function (e) { return e.stopPropagation(); } },
+            React.createElement(ProgressBar, { steps: steps, currentStep: step, startIcon: currentShowStartIcon, endIcon: endIcon, onStartIconClick: handlePrevious, onEndIconClick: handleClose, showProgressBar: currentShowProgressBar }),
+            React.createElement("div", { className: "stepper-content" }, children[step - 1]),
+            React.createElement("div", { className: "stepper-buttons ".concat(!(currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && !(currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show) ? "no-buttons" : "") },
+                (currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && (React.createElement("div", { className: "stepper-button-container secondary-button-container" },
+                    React.createElement(SecondaryButton, { fullWidth: true, label: currentSecondaryButton.label, startIcon: currentSecondaryButton.startIconName ? true : undefined, endIcon: currentSecondaryButton.endIconName ? true : undefined, startIconName: currentSecondaryButton.startIconName, endIconName: currentSecondaryButton.endIconName, onClick: function () { var _a; return (_a = currentSecondaryButton.onSecondaryButtonClick) === null || _a === void 0 ? void 0 : _a.call(currentSecondaryButton, step); } }))),
+                (currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show) && (React.createElement("div", { className: "stepper-button-container primary-button-container" },
+                    React.createElement(PrimaryButton, { fullWidth: true, label: currentPrimaryButton.label, startIcon: currentPrimaryButton.startIconName ? true : undefined, endIcon: currentPrimaryButton.endIconName ? true : undefined, startIconName: currentPrimaryButton.startIconName, endIconName: currentPrimaryButton.endIconName, onClick: handleNext })))))));
+    return portalContainerRef.current && isVisible
+        ? ReactDOM.createPortal(stepperContent, portalContainerRef.current)
+        : null;
+};
+export default Stepper;

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

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

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

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