Migrate to vite & new structure

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/ui/src/Layouts/AuthLayout.stories.tsx

@@ -0,0 +1,19 @@
+import { AuthLayout } from "./AuthLayout";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Layouts/AuthLayout",
+    component: AuthLayout,
+    argTypes: {},
+    parameters: {
+        layout: "full",
+    },
+} satisfies Meta<typeof AuthLayout>;
+
+type Story = StoryObj<typeof AuthLayout>;
+
+export const Default: Story = {
+    args: {
+        children: "Text goes here",
+    },
+};

packages/ui/src/Layouts/AuthLayout.tsx

@@ -0,0 +1,27 @@
+import logo from "../assets/android-chrome-512x512.png";
+import { useTranslate } from "@probo/i18n";
+import { Outlet } from "react-router";
+import { Toasts } from "../Atoms/Toasts/Toasts";
+
+export function AuthLayout() {
+    const { __ } = useTranslate();
+    return (
+        <div className="grid grid-cols-1 lg:grid-cols-2 min-h-screen">
+            <div className="bg-surface-0 flex flex-col items-center justify-center">
+                <div className="max-w-112">
+                    <Outlet />
+                </div>
+            </div>
+            <div className="hidden lg:flex bg-dialog text-invert text-5xl font-bold flex flex-col items-center justify-center p-8 text-balance lg:p-10">
+                <div className="flex flex-col 2xl:flex-row-reverse items-center justify-center gap-4">
+                    <img src={logo} alt="Probo logo" className="h-auto w-96" />
+                    <span>
+                        {__("Navigate compliance with confidence thanks to")}
+                        <span className="text-txt-accent"> probo</span>
+                    </span>
+                </div>
+            </div>
+            <Toasts />
+        </div>
+    );
+}

packages/ui/src/Layouts/ErrorLayout.stories.tsx

@@ -0,0 +1,17 @@
+import { ErrorLayout } from "./ErrorLayout";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Layouts/ErrorLayout",
+    component: ErrorLayout,
+    argTypes: {},
+} satisfies Meta<typeof ErrorLayout>;
+
+type Story = StoryObj<typeof ErrorLayout>;
+
+export const Default: Story = {
+    args: {
+        title: "Something went wrong",
+        description: "An unexpected error occurred. Please try again later.",
+    },
+};

packages/ui/src/Layouts/ErrorLayout.tsx

@@ -0,0 +1,18 @@
+import type { PropsWithChildren } from "react";
+import { IconCircleInfo } from "../Atoms/Icons";
+
+type Props = PropsWithChildren<{
+    title?: string;
+    description?: string;
+}>;
+
+export function ErrorLayout({ title, description, children }: Props) {
+    return (
+        <div className="min-h-screen w-full gap-2 flex flex-col items-center justify-center">
+            <IconCircleInfo className="text-txt-danger" size={40} />
+            <h1 className="text-4xl font-bold">{title}</h1>
+            <p className="text-txt-secondary">{description}</p>
+            {children}
+        </div>
+    );
+}

packages/ui/src/Layouts/Layout.stories.tsx

@@ -0,0 +1,15 @@
+import { Layout } from "./Layout";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+    title: "Layouts/Base",
+    component: Layout,
+    parameters: {
+        layout: "full",
+    },
+} satisfies Meta<typeof Layout>;
+
+export default meta;
+type Story = StoryObj<typeof Layout>;
+
+export const Default: Story = {};

packages/ui/src/Layouts/Layout.tsx

@@ -0,0 +1,27 @@
+import type { PropsWithChildren, ReactNode } from "react";
+import { Sidebar } from "../Atoms/Sidebar/Sidebar.tsx";
+import { Logo } from "../Atoms/Logo/Logo.tsx";
+import { Toasts } from "../Atoms/Toasts/Toasts.tsx";
+
+type Props = PropsWithChildren<{
+    header: ReactNode;
+    sidebar: ReactNode;
+}>;
+
+export function Layout({ header, sidebar, children }: Props) {
+    return (
+        <div>
+            <header className="absolute left-0 right-0 px-4 flex items-center border-b border-border-solid h-12">
+                <Logo className="w-12 h-5" />
+                {header}
+            </header>
+            <div className="flex h-screen">
+                <Sidebar>{sidebar}</Sidebar>
+                <main className="p-12 pt-24 max-w-[1200px] w-full mx-auto overflow-y-auto">
+                    {children}
+                </main>
+            </div>
+            <Toasts />
+        </div>
+    );
+}