allaw-ui 4.7.1 → 4.7.2

package/dist/components/molecules/AiText/aiText.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface AiTextProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const AiText: React.FC<AiTextProps>;
+export default AiText;

package/dist/components/molecules/AiText/aiText.js

@@ -0,0 +1,17 @@
+"use client";
+import React from "react";
+import styles from "./aiText.module.css";
+var AiText = function (_a) {
+    var children = _a.children, className = _a.className;
+    return (React.createElement("div", { className: "".concat(styles.wrapper, " ").concat(className || "") },
+        React.createElement("div", { className: styles.glowContainer },
+            React.createElement("div", { className: "".concat(styles.glowLayer, " ").concat(styles.glowLayer1) }),
+            React.createElement("div", { className: "".concat(styles.glowLayer, " ").concat(styles.glowLayer2) }),
+            React.createElement("div", { className: "".concat(styles.glowLayer, " ").concat(styles.glowLayer3) }),
+            React.createElement("div", { className: "".concat(styles.glowLayer, " ").concat(styles.glowLayer4) }),
+            React.createElement("div", { className: "".concat(styles.glowLayer, " ").concat(styles.glowLayer5) }),
+            React.createElement("div", { className: "".concat(styles.glowLayer, " ").concat(styles.glowLayer6) }),
+            React.createElement("div", { className: styles.aiTextContainer },
+                React.createElement("div", { className: styles.content }, children)))));
+};
+export default AiText;

package/dist/components/molecules/AiText/aiText.module.css

@@ -0,0 +1,201 @@
+/* Wrapper principal */
+.wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Container pour l'effet glowing */
+.glowContainer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Couches d'effet glowing */
+.glowLayer {
+  position: absolute;
+  z-index: -1;
+  overflow: hidden;
+  border-radius: 16px;
+}
+
+.glowLayer::before {
+  content: "";
+  position: absolute;
+  z-index: -2;
+  background-repeat: no-repeat;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transition: all 2s ease;
+}
+
+/* Couche 1 - Effet principal */
+.glowLayer1 {
+  height: 100%;
+  width: 100%;
+  filter: blur(3px);
+}
+
+.glowLayer1::before {
+  width: 999px;
+  height: 999px;
+  background: conic-gradient(
+    #000,
+    #402fb5 5%,
+    #000 38%,
+    #000 50%,
+    #cf30aa 60%,
+    #000 87%
+  );
+  transform: translate(-50%, -50%) rotate(60deg);
+  animation: glowRotate1 4s linear infinite;
+}
+
+/* Couche 2-4 - Effets secondaires */
+.glowLayer2,
+.glowLayer3,
+.glowLayer4 {
+  height: calc(100% - 5px);
+  width: calc(100% - 2px);
+  filter: blur(3px);
+}
+
+.glowLayer2::before,
+.glowLayer3::before,
+.glowLayer4::before {
+  width: 600px;
+  height: 600px;
+  background: conic-gradient(
+    rgba(0, 0, 0, 0),
+    #18116a,
+    rgba(0, 0, 0, 0) 10%,
+    rgba(0, 0, 0, 0) 50%,
+    #6e1b60,
+    rgba(0, 0, 0, 0) 60%
+  );
+  transform: translate(-50%, -50%) rotate(82deg);
+  animation: glowRotate2 4s linear infinite;
+}
+
+/* Couche 5 - Effet lumineux */
+.glowLayer5 {
+  height: calc(100% - 8px);
+  width: calc(100% - 5px);
+  border-radius: 12px;
+  filter: blur(2px);
+}
+
+.glowLayer5::before {
+  width: 600px;
+  height: 600px;
+  background: conic-gradient(
+    rgba(0, 0, 0, 0) 0%,
+    #a099d8,
+    rgba(0, 0, 0, 0) 8%,
+    rgba(0, 0, 0, 0) 50%,
+    #dfa2da,
+    rgba(0, 0, 0, 0) 58%
+  );
+  transform: translate(-50%, -50%) rotate(83deg);
+  filter: brightness(1.4);
+  animation: glowRotate3 4s linear infinite;
+}
+
+/* Couche 6 - Effet final */
+.glowLayer6 {
+  height: calc(100% - 12px);
+  width: calc(100% - 8px);
+  filter: blur(0.5px);
+}
+
+.glowLayer6::before {
+  width: 600px;
+  height: 600px;
+  background: conic-gradient(
+    #1c191c,
+    #402fb5 5%,
+    #1c191c 14%,
+    #1c191c 50%,
+    #cf30aa 60%,
+    #1c191c 64%
+  );
+  transform: translate(-50%, -50%) rotate(70deg);
+  filter: brightness(1.3);
+  animation: glowRotate4 4s linear infinite;
+}
+
+/* Animations de rotation */
+@keyframes glowRotate1 {
+  from {
+    transform: translate(-50%, -50%) rotate(60deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(420deg);
+  }
+}
+
+@keyframes glowRotate2 {
+  from {
+    transform: translate(-50%, -50%) rotate(82deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(442deg);
+  }
+}
+
+@keyframes glowRotate3 {
+  from {
+    transform: translate(-50%, -50%) rotate(83deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(443deg);
+  }
+}
+
+@keyframes glowRotate4 {
+  from {
+    transform: translate(-50%, -50%) rotate(70deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(430deg);
+  }
+}
+
+/* Container principal du contenu */
+.aiTextContainer {
+  position: relative;
+  padding: 24px;
+  border: 2px solid #fff;
+  border-radius: 16px;
+  background: #ffffff;
+  z-index: 1;
+}
+
+/* Contenu */
+.content {
+  position: relative;
+  z-index: 1;
+}
+
+/* Support pour prefers-reduced-motion */
+@media (prefers-reduced-motion: reduce) {
+  .glowLayer::before {
+    animation: none;
+  }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .glowLayer {
+    border-radius: 12px;
+  }
+
+  .aiTextContainer {
+    padding: 16px;
+    border-radius: 12px;
+  }
+}

package/dist/components/molecules/AiText/aiText.stories.d.ts

@@ -0,0 +1,43 @@
+declare namespace _default {
+    export let title: string;
+    export { AiText as component };
+    export namespace argTypes {
+        namespace children {
+            namespace control {
+                let type: string;
+            }
+            let description: string;
+        }
+    }
+    export namespace parameters {
+        namespace docs {
+            export namespace description_1 {
+                let component: string;
+            }
+            export { description_1 as description };
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const WithButton: any;
+export const WithForm: any;
+export const WithList: any;
+export const WithImage: any;
+export const ComplexContent: any;
+export function MultipleContainers(): React.JSX.Element;
+export namespace MultipleContainers {
+    export namespace parameters_1 {
+        export namespace docs_1 {
+            export namespace description_2 {
+                let story: string;
+            }
+            export { description_2 as description };
+        }
+        export { docs_1 as docs };
+    }
+    export { parameters_1 as parameters };
+}
+export const CustomClassName: any;
+import AiText from "./aiText";
+import React from "react";

package/dist/components/molecules/AiText/aiText.stories.js

@@ -0,0 +1,216 @@
+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 { Meta, StoryFn } from "@storybook/react";
+import AiText, { AiTextProps } from "./aiText";
+import Paragraph from "../../atoms/typography/Paragraph";
+export default {
+    title: "Components/Molecules/AiText",
+    component: AiText,
+    argTypes: {
+        children: {
+            control: { type: "text" },
+            description: "Contenu à afficher dans le container avec effet glowing",
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "Composant AiText - Container réutilisable avec effet glowing animé. Accepte n'importe quel contenu via children.",
+            },
+        },
+    },
+};
+var Template = function (args) { return React.createElement(AiText, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    children: (React.createElement(Paragraph, { text: "L'intelligence artificielle a analys\u00E9 votre demande et g\u00E9n\u00E8re automatiquement une r\u00E9ponse personnalis\u00E9e pour vous aider dans vos d\u00E9marches juridiques.", variant: "medium", size: "default" })),
+};
+Default.parameters = {
+    docs: {
+        description: {
+            story: "Container par défaut avec un composant Paragraph à l'intérieur.",
+        },
+    },
+};
+export var WithButton = Template.bind({});
+WithButton.args = {
+    children: (React.createElement("div", { style: { textAlign: "center" } },
+        React.createElement("h3", { style: { margin: "0 0 16px 0", color: "#25beeb" } }, "Action requise"),
+        React.createElement("p", { style: { margin: "0 0 20px 0", color: "#666" } }, "Confirmez-vous cette action ?"),
+        React.createElement("button", { style: {
+                padding: "12px 24px",
+                backgroundColor: "#25beeb",
+                color: "white",
+                border: "none",
+                borderRadius: "8px",
+                cursor: "pointer",
+            } }, "Confirmer"))),
+};
+WithButton.parameters = {
+    docs: {
+        description: {
+            story: "Container avec du contenu interactif : titre, texte et bouton.",
+        },
+    },
+};
+export var WithForm = Template.bind({});
+WithForm.args = {
+    children: (React.createElement("form", { style: { display: "flex", flexDirection: "column", gap: "16px" } },
+        React.createElement("h4", { style: { margin: "0 0 8px 0" } }, "Formulaire IA"),
+        React.createElement("input", { type: "text", placeholder: "Votre question...", style: {
+                padding: "12px",
+                border: "1px solid #ddd",
+                borderRadius: "6px",
+                fontSize: "14px",
+            } }),
+        React.createElement("textarea", { placeholder: "D\u00E9tails suppl\u00E9mentaires...", rows: 3, style: {
+                padding: "12px",
+                border: "1px solid #ddd",
+                borderRadius: "6px",
+                fontSize: "14px",
+                resize: "vertical",
+            } }),
+        React.createElement("button", { type: "submit", style: {
+                padding: "12px",
+                backgroundColor: "#25beeb",
+                color: "white",
+                border: "none",
+                borderRadius: "6px",
+                cursor: "pointer",
+            } }, "Analyser avec l'IA"))),
+};
+WithForm.parameters = {
+    docs: {
+        description: {
+            story: "Container avec un formulaire complet : inputs, textarea et bouton de soumission.",
+        },
+    },
+};
+export var WithList = Template.bind({});
+WithList.args = {
+    children: (React.createElement("div", null,
+        React.createElement("h4", { style: { margin: "0 0 16px 0", color: "#25beeb" } }, "R\u00E9sultats de l'analyse IA"),
+        React.createElement("ul", { style: { margin: 0, paddingLeft: "20px", lineHeight: "1.6" } },
+            React.createElement("li", null, "\u2705 Document analys\u00E9 avec succ\u00E8s"),
+            React.createElement("li", null, "\uD83D\uDCCA 3 points d'attention identifi\u00E9s"),
+            React.createElement("li", null, "\uD83D\uDCA1 2 recommandations g\u00E9n\u00E9r\u00E9es"),
+            React.createElement("li", null, "\u2696\uFE0F Conformit\u00E9 juridique v\u00E9rifi\u00E9e")))),
+};
+WithList.parameters = {
+    docs: {
+        description: {
+            story: "Container avec une liste de résultats et des emojis pour l'illustration.",
+        },
+    },
+};
+export var WithImage = Template.bind({});
+WithImage.args = {
+    children: (React.createElement("div", { style: { textAlign: "center" } },
+        React.createElement("div", { style: {
+                width: "80px",
+                height: "80px",
+                backgroundColor: "#f0f8ff",
+                borderRadius: "50%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                margin: "0 auto 16px auto",
+                fontSize: "32px",
+            } }, "\uD83E\uDD16"),
+        React.createElement("h4", { style: { margin: "0 0 8px 0" } }, "Assistant IA"),
+        React.createElement("p", { style: { margin: 0, color: "#666", fontSize: "14px" } }, "Pr\u00EAt \u00E0 analyser vos documents"))),
+};
+WithImage.parameters = {
+    docs: {
+        description: {
+            story: "Container avec un avatar circulaire, titre et description centrés.",
+        },
+    },
+};
+export var ComplexContent = Template.bind({});
+ComplexContent.args = {
+    children: (React.createElement("div", null,
+        React.createElement("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "12px",
+                marginBottom: "16px",
+            } },
+            React.createElement("div", { style: { fontSize: "24px" } }, "\uD83C\uDF86"),
+            React.createElement("h3", { style: { margin: 0, color: "#25beeb" } }, "Analyse Compl\u00E8te")),
+        React.createElement("div", { style: {
+                padding: "16px",
+                backgroundColor: "#f8f9fa",
+                borderRadius: "8px",
+                marginBottom: "16px",
+            } },
+            React.createElement("p", { style: { margin: "0 0 12px 0", fontWeight: "bold" } }, "R\u00E9sultats de l'IA :"),
+            React.createElement("ul", { style: { margin: 0, paddingLeft: "20px" } },
+                React.createElement("li", null, "Analyse des clauses contractuelles"),
+                React.createElement("li", null, "\u00C9valuation des risques juridiques"),
+                React.createElement("li", null, "Propositions de solutions adapt\u00E9es"))),
+        React.createElement("div", { style: { display: "flex", gap: "12px", justifyContent: "flex-end" } },
+            React.createElement("button", { style: {
+                    padding: "8px 16px",
+                    backgroundColor: "transparent",
+                    color: "#666",
+                    border: "1px solid #ddd",
+                    borderRadius: "6px",
+                    cursor: "pointer",
+                } }, "Annuler"),
+            React.createElement("button", { style: {
+                    padding: "8px 16px",
+                    backgroundColor: "#25beeb",
+                    color: "white",
+                    border: "none",
+                    borderRadius: "6px",
+                    cursor: "pointer",
+                } }, "Valider")))),
+};
+ComplexContent.parameters = {
+    docs: {
+        description: {
+            story: "Exemple avec du contenu complexe : titre, zone d'information et boutons d'action.",
+        },
+    },
+};
+export var MultipleContainers = function () { return (React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "24px" } },
+    React.createElement(AiText, null,
+        React.createElement(Paragraph, { text: "Premier container avec du texte simple", variant: "bold", color: "bleu-allaw" })),
+    React.createElement(AiText, null,
+        React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } },
+            React.createElement("span", { style: { fontSize: "20px" } }, "\u26A1"),
+            React.createElement(Paragraph, { text: "Container avec ic\u00F4ne et texte", variant: "medium" }))),
+    React.createElement(AiText, null,
+        React.createElement("div", { style: { textAlign: "center" } },
+            React.createElement("div", { style: { fontSize: "32px", marginBottom: "8px" } }, "\uD83C\uDFAF"),
+            React.createElement(Paragraph, { text: "Container centr\u00E9 avec emoji", variant: "semiBold", size: "small" }))))); };
+MultipleContainers.parameters = {
+    docs: {
+        description: {
+            story: "Exemple avec plusieurs containers AiText montrant la flexibilité du composant avec différents types de contenu.",
+        },
+    },
+};
+export var CustomClassName = Template.bind({});
+CustomClassName.args = {
+    children: (React.createElement(Paragraph, { text: "Container avec une classe CSS personnalis\u00E9e", variant: "medium" })),
+    className: "my-custom-class",
+};
+CustomClassName.parameters = {
+    docs: {
+        description: {
+            story: "Exemple montrant l'utilisation de la prop className pour personnaliser le style.",
+        },
+    },
+};

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

@@ -0,0 +1,2 @@
+export { default as AiText } from "./aiText";
+export type { AiTextProps } from "./aiText";

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

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

package/dist/index.d.ts

@@ -127,3 +127,5 @@ export type { FileUploaderProps } from "./components/molecules/fileUploader/File
 export { default as AvatarBubble } from "./components/molecules/proSwitch/AvatarBubble";
 export { default as EmptyMessage } from "./components/molecules/emptyMessage/EmptyMessage";
 export type { EmptyMessageProps } from "./components/molecules/emptyMessage/EmptyMessage";
+export { default as AiText } from "./components/molecules/AiText/aiText";
+export type { AiTextProps } from "./components/molecules/AiText/aiText";

package/dist/index.js

@@ -122,3 +122,5 @@ export { default as FileUploader } from "./components/molecules/fileUploader/Fil
 export { default as AvatarBubble } from "./components/molecules/proSwitch/AvatarBubble";
 // Empty Message
 export { default as EmptyMessage } from "./components/molecules/emptyMessage/EmptyMessage";
+// AiText
+export { default as AiText } from "./components/molecules/AiText/aiText";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "4.7.1",
+  "version": "4.7.2",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",