allaw-ui 3.4.0 → 3.4.2

package/dist/components/molecules/modal/Modal.stories.d.ts

@@ -1,87 +0,0 @@
-declare namespace _default {
-    export let title: string;
-    export { Modal as component };
-    export let tags: string[];
-    export namespace argTypes {
-        export namespace verticalOffset {
-            namespace control {
-                let type: string;
-            }
-            let description: string;
-        }
-        export namespace horizontalOffset {
-            export namespace control_1 {
-                let type_1: string;
-                export { type_1 as type };
-            }
-            export { control_1 as control };
-            let description_1: string;
-            export { description_1 as description };
-        }
-        export namespace show {
-            let control_2: string;
-            export { control_2 as control };
-            let description_2: string;
-            export { description_2 as description };
-        }
-        export namespace title_1 {
-            let control_3: string;
-            export { control_3 as control };
-            let description_3: string;
-            export { description_3 as description };
-        }
-        export { title_1 as title };
-        export namespace description_4 {
-            let control_4: string;
-            export { control_4 as control };
-            let description_5: string;
-            export { description_5 as description };
-        }
-        export { description_4 as description };
-        export namespace confirmLabel {
-            let control_5: string;
-            export { control_5 as control };
-            let description_6: string;
-            export { description_6 as description };
-        }
-        export namespace cancelLabel {
-            let control_6: string;
-            export { control_6 as control };
-            let description_7: string;
-            export { description_7 as description };
-        }
-        export namespace imageConfig {
-            export namespace control_7 {
-                let type_2: string;
-                export { type_2 as type };
-            }
-            export { control_7 as control };
-            let description_8: string;
-            export { description_8 as description };
-        }
-        export namespace isDanger {
-            let control_8: string;
-            export { control_8 as control };
-            let description_9: string;
-            export { description_9 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;
-export const DangerModal: any;
-export const WithLargeOffset: any;
-export const WithImageConfig: any;
-export const WithoutCancel: any;
-export const OffsetBothWays: any;
-import Modal from "./Modal";

package/dist/components/molecules/modal/Modal.stories.js

@@ -1,126 +0,0 @@
-// src/components/molecules/modal/Modal.stories.jsx
-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 { action } from "@storybook/addon-actions";
-import Modal from "./Modal";
-import "../../../styles/global.css";
-export default {
-    title: "Components/Molecules/Modal",
-    component: Modal,
-    tags: ["autodocs"],
-    argTypes: {
-        verticalOffset: {
-            control: { type: "object" },
-            description: "Décalage vertical du modal (en px) pour éviter les barres de navigation",
-        },
-        horizontalOffset: {
-            control: { type: "object" },
-            description: "Décalage horizontal du modal (en px) pour éviter les éléments latéraux",
-        },
-        show: {
-            control: "boolean",
-            description: "Affiche ou masque la modal",
-        },
-        title: {
-            control: "text",
-            description: "Titre de la modal",
-        },
-        description: {
-            control: "text",
-            description: "Description de la modal",
-        },
-        confirmLabel: {
-            control: "text",
-            description: "Texte du bouton principal",
-        },
-        cancelLabel: {
-            control: "text",
-            description: "Texte du bouton secondaire (optionnel)",
-        },
-        imageConfig: {
-            control: { type: "object" },
-            description: "Configuration de l'image à afficher (url, alt, dimensions, styles, padding, className)",
-        },
-        isDanger: {
-            control: "boolean",
-            description: "Applique le style d'alerte au bouton principal",
-        },
-    },
-    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(args.show), isVisible = _a[0], setIsVisible = _a[1];
-    return (React.createElement("div", null,
-        React.createElement("button", { onClick: function () { return setIsVisible(true); } }, "Ouvrir la modal"),
-        React.createElement(Modal, __assign({}, args, { show: isVisible, onConfirm: function () {
-                action("Confirm clicked")();
-                setIsVisible(false);
-            }, onCancel: function () {
-                action("Cancel clicked")();
-                setIsVisible(false);
-            } }))));
-};
-export var Default = Template.bind({});
-Default.args = {
-    show: false,
-    title: "Confirmation",
-    description: "Êtes-vous sûr de vouloir effectuer cette action ?",
-    confirmLabel: "Confirmer",
-    cancelLabel: "Annuler",
-    isDanger: false,
-    verticalOffset: { top: 64, bottom: 0 },
-    horizontalOffset: { left: 0, right: 0 },
-    imageConfig: {
-        url: "https://cdn.iconscout.com/icon/free/png-512/free-checkmark-icon-download-in-svg-png-gif-file-formats--done-approved-check-tick-user-interface-pack-icons-1502470.png?f=webp&w=512",
-        alt: "Checkmark",
-        width: 64,
-        height: 64,
-        padding: "0px, 0px, 250px, 300px",
-        className: "",
-        style: {
-            backgroundColor: "#ffffff",
-        },
-    },
-};
-export var DangerModal = Template.bind({});
-DangerModal.args = __assign(__assign({}, Default.args), { title: "Attention", description: "Cette action est irréversible. Voulez-vous continuer ?", confirmLabel: "Supprimer", isDanger: true });
-export var WithLargeOffset = Template.bind({});
-WithLargeOffset.args = __assign(__assign({}, Default.args), { verticalOffset: { top: 120, bottom: 80 } });
-export var WithImageConfig = Template.bind({});
-WithImageConfig.args = __assign(__assign({}, Default.args), { title: "Image personnalisée", description: "Cette modal affiche une image avec dimensions et styles personnalisés.", imageConfig: {
-        url: Default.args.imageConfig.url,
-        alt: "Custom checkmark",
-        width: 200,
-        height: 200,
-        padding: "24px",
-        className: "border-circle",
-        style: {
-            border: "4px dashed #007bff",
-            borderRadius: "50%",
-            backgroundColor: "#e9f5ff",
-        },
-    }, confirmLabel: "Valider", cancelLabel: "Annuler" });
-export var WithoutCancel = Template.bind({});
-WithoutCancel.args = __assign(__assign({}, Default.args), { title: "Information", description: "Cette action a été effectuée avec succès.", confirmLabel: "OK", cancelLabel: undefined });
-export var OffsetBothWays = Template.bind({});
-OffsetBothWays.args = __assign(__assign({}, Default.args), { title: "Modal avec décalages", description: "Décalages verticaux et horizontaux appliqués.", verticalOffset: { top: 100, bottom: 50 }, horizontalOffset: { left: 80, right: 80 } });

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

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

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

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

package/dist/components/molecules/pagination/Pagination.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import "./pagination.css";
-import "../../../styles/global.css";
-export interface PaginationProps {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
-}
-declare const Pagination: React.FC<PaginationProps>;
-export default Pagination;

package/dist/components/molecules/pagination/Pagination.js

@@ -1,64 +0,0 @@
-import React, { useState, useEffect } from "react";
-import "./pagination.css";
-import "../../../styles/global.css";
-var Pagination = function (_a) {
-    var currentPage = _a.currentPage, totalPages = _a.totalPages, onPageChange = _a.onPageChange;
-    var _b = useState(window.innerWidth), setWindowWidth = _b[1];
-    var _c = useState(2), range = _c[0], setRange = _c[1];
-    useEffect(function () {
-        var handleResize = function () {
-            setWindowWidth(window.innerWidth);
-            // Ajuster le range en fonction de la largeur
-            setRange(window.innerWidth < 480 ? 1 : 2);
-        };
-        window.addEventListener("resize", handleResize);
-        handleResize(); // Initialisation
-        return function () { return window.removeEventListener("resize", handleResize); };
-    }, []);
-    // Validation des props
-    if (currentPage < 1 || currentPage > totalPages) {
-        console.error("Current page must be between 1 and total pages");
-        return null;
-    }
-    var handlePageChange = function (newPage) {
-        if (newPage >= 1 && newPage <= totalPages) {
-            onPageChange(newPage);
-        }
-    };
-    var renderPageNumbers = function () {
-        var items = [];
-        // Bouton Previous
-        items.push(React.createElement("button", { key: "prev", className: "pagination-nav-button pagination-prev-button", onClick: function () { return handlePageChange(currentPage - 1); }, disabled: currentPage === 1, "aria-label": "Page pr\u00E9c\u00E9dente", type: "button" },
-            React.createElement("span", { className: "allaw-icon-chevron-left pagination-icon", "aria-hidden": "true" }),
-            React.createElement("span", { className: "pagination-nav-text" }, "Pr\u00E9c\u00E9dent")));
-        // Première page
-        items.push(React.createElement("button", { key: 1, className: "pagination-number ".concat(currentPage === 1 ? "active" : ""), onClick: function () { return handlePageChange(1); }, "aria-label": "Page 1", "aria-current": currentPage === 1 ? "page" : undefined, type: "button" }, "1"));
-        // Points de suspension gauche
-        if (currentPage - range > 2) {
-            items.push(React.createElement("span", { key: "ellipsis-left", className: "pagination-ellipsis", "aria-hidden": "true" }, "..."));
-        }
-        var _loop_1 = function (i) {
-            items.push(React.createElement("button", { key: i, className: "pagination-number ".concat(currentPage === i ? "active" : ""), onClick: function () { return handlePageChange(i); }, "aria-label": "Page ".concat(i), "aria-current": currentPage === i ? "page" : undefined, type: "button" }, i));
-        };
-        // Pages autour de la page courante
-        for (var i = Math.max(2, currentPage - range); i <= Math.min(totalPages - 1, currentPage + range); i++) {
-            _loop_1(i);
-        }
-        // Points de suspension droite
-        if (currentPage + range < totalPages - 1) {
-            items.push(React.createElement("span", { key: "ellipsis-right", className: "pagination-ellipsis", "aria-hidden": "true" }, "..."));
-        }
-        // Dernière page
-        if (totalPages > 1) {
-            items.push(React.createElement("button", { key: totalPages, className: "pagination-number ".concat(currentPage === totalPages ? "active" : ""), onClick: function () { return handlePageChange(totalPages); }, "aria-label": "Page ".concat(totalPages), "aria-current": currentPage === totalPages ? "page" : undefined, type: "button" }, totalPages));
-        }
-        // Bouton Next
-        items.push(React.createElement("button", { key: "next", className: "pagination-nav-button pagination-next-button", onClick: function () { return handlePageChange(currentPage + 1); }, disabled: currentPage === totalPages, "aria-label": "Page suivante", type: "button" },
-            React.createElement("span", { className: "pagination-nav-text" }, "Suivant"),
-            React.createElement("span", { className: "allaw-icon-chevron-right pagination-icon", "aria-hidden": "true" })));
-        return items;
-    };
-    return (React.createElement("nav", { "aria-label": "Navigation des pages" },
-        React.createElement("div", { className: "pagination-container", role: "navigation" }, renderPageNumbers())));
-};
-export default Pagination;

package/dist/components/molecules/pagination/Pagination.stories.d.ts

@@ -1,44 +0,0 @@
-declare namespace _default {
-    export let title: string;
-    export { Pagination as component };
-    export let tags: string[];
-    export namespace args {
-        let currentPage: number;
-        let totalPages: number;
-        function onPageChange(page: any): void;
-    }
-    export namespace argTypes {
-        export namespace currentPage_1 {
-            namespace control {
-                let type: string;
-                let min: number;
-            }
-            let description: string;
-        }
-        export { currentPage_1 as currentPage };
-        export namespace totalPages_1 {
-            export namespace control_1 {
-                let type_1: string;
-                export { type_1 as type };
-                let min_1: number;
-                export { min_1 as min };
-            }
-            export { control_1 as control };
-            let description_1: string;
-            export { description_1 as description };
-        }
-        export { totalPages_1 as totalPages };
-        export namespace onPageChange_1 {
-            export let action: string;
-            let description_2: string;
-            export { description_2 as description };
-        }
-        export { onPageChange_1 as onPageChange };
-    }
-}
-export default _default;
-export const Default: any;
-export const FirstPage: any;
-export const LastPage: any;
-export const FewPages: any;
-import Pagination from "./Pagination";

package/dist/components/molecules/pagination/Pagination.stories.js

@@ -1,59 +0,0 @@
-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 Pagination from "./Pagination";
-import "../../../styles/global.css";
-export default {
-    title: "Components/Molecules/Pagination",
-    component: Pagination,
-    tags: ["autodocs"],
-    args: {
-        currentPage: 21,
-        totalPages: 42,
-        onPageChange: function (page) { return console.log("Page changed to ".concat(page)); },
-    },
-    argTypes: {
-        currentPage: {
-            control: { type: "number", min: 1 },
-            description: "La page actuellement sélectionnée",
-        },
-        totalPages: {
-            control: { type: "number", min: 1 },
-            description: "Le nombre total de pages",
-        },
-        onPageChange: {
-            action: "page changed",
-            description: "Fonction appelée lors du changement de page",
-        },
-    },
-};
-var Template = function (args) { return React.createElement(Pagination, __assign({}, args)); };
-export var Default = Template.bind({});
-Default.args = {
-    currentPage: 21,
-    totalPages: 42,
-};
-export var FirstPage = Template.bind({});
-FirstPage.args = {
-    currentPage: 1,
-    totalPages: 42,
-};
-export var LastPage = Template.bind({});
-LastPage.args = {
-    currentPage: 42,
-    totalPages: 42,
-};
-export var FewPages = Template.bind({});
-FewPages.args = {
-    currentPage: 3,
-    totalPages: 5,
-};

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

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

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

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

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

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

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

@@ -1,30 +0,0 @@
-import React from "react";
-import "./ProCard.css";
-import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
-import Image from "next/image";
-import Link from "next/link";
-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, _c = _a.showButton, showButton = _c === void 0 ? false : _c;
-    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)))),
-        showButton &&
-            React.createElement(Link, { href: profileUrl || "#", className: "pro-card-button-action" },
-                React.createElement("i", { className: "allaw-icon-calendar" }),
-                " Prendre rendez-vous ")));
-};
-export default ProCard;

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

@@ -1,49 +0,0 @@
-declare namespace _default {
-    export let title: string;
-    export { ProCard as component };
-    export let tags: string[];
-    export namespace argTypes {
-        namespace imageUrl {
-            let control: string;
-        }
-        namespace job {
-            let control_1: string;
-            export { control_1 as control };
-        }
-        namespace firstName {
-            let control_2: string;
-            export { control_2 as control };
-        }
-        namespace lastName {
-            let control_3: string;
-            export { control_3 as control };
-        }
-        namespace address {
-            let control_4: string;
-            export { control_4 as control };
-        }
-        namespace profileUrl {
-            let control_5: string;
-            export { control_5 as control };
-        }
-        namespace isPro {
-            let control_6: string;
-            export { control_6 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 NoImage: any;
-export const ProUser: any;
-import ProCard from "./ProCard";

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

@@ -1,69 +0,0 @@
-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/proCard/index.d.ts

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

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

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

package/dist/components/molecules/questionAnswer/QuestionAnswer.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-export type QuestionAnswerProps = {
-    questions: {
-        question: string;
-        answer: string;
-    }[];
-    title?: string;
-};
-declare const QuestionAnswer: React.FC<QuestionAnswerProps>;
-export default QuestionAnswer;

package/dist/components/molecules/questionAnswer/QuestionAnswer.js

@@ -1,33 +0,0 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import React, { useState } from "react";
-import styles from "./questionAnswer.module.css";
-var QuestionAnswer = function (_a) {
-    var questions = _a.questions, title = _a.title;
-    var _b = useState([]), openIndices = _b[0], setOpenIndices = _b[1];
-    var toggleAnswer = function (index) {
-        if (openIndices.includes(index)) {
-            setOpenIndices(openIndices.filter(function (i) { return i !== index; }));
-        }
-        else {
-            setOpenIndices(__spreadArray(__spreadArray([], openIndices, true), [index], false));
-        }
-    };
-    return (React.createElement("section", { className: styles.questionAnswerContainer, "aria-labelledby": "faq-title" },
-        React.createElement("div", { className: styles.questionAnswerContent },
-            React.createElement("h2", { className: styles.questionAnswerTitle }, title ? title : "Questions Fréquemment Posées"),
-            React.createElement("ul", { className: styles.questionAnswerListContent }, questions.map(function (item, index) { return (React.createElement("li", { key: index, className: styles.questionAnswerItem, onClick: function () { return toggleAnswer(index); } },
-                React.createElement("div", { className: styles.questionContainer },
-                    React.createElement("h3", { className: styles.questionTitle }, item.question),
-                    React.createElement("i", { className: !openIndices.includes(index) ? "allaw-icon-chevron-down" : "allaw-icon-chevron-up", style: { color: "#171E25" } })),
-                React.createElement("div", { id: "answer-".concat(index), className: "".concat(styles.answerContainer, " ").concat(openIndices.includes(index) ? styles.open : "") },
-                    React.createElement("p", { className: styles.answer }, item.answer)))); })))));
-};
-export default QuestionAnswer;

package/dist/components/molecules/questionAnswer/QuestionAnswer.stories.d.ts

@@ -1,17 +0,0 @@
-declare namespace _default {
-    export let title: string;
-    export { QuestionAnswer as component };
-    export namespace argTypes {
-        export namespace title_1 {
-            let control: string;
-        }
-        export { title_1 as title };
-        export namespace questions {
-            let control_1: string;
-            export { control_1 as control };
-        }
-    }
-}
-export default _default;
-export const Default: any;
-import QuestionAnswer from "./QuestionAnswer";