-
+
error
;
+}
+
+export const routes = createBrowserRouter([
+ {
+ path: "/auth",
+ Component: AuthLayout,
+ children: [
+ {
+ path: "login",
+ element: Home
,
+ },
+ ],
+ },
+]);
diff --git a/apps/console2/src/vite-env.d.ts b/apps/console2/src/vite-env.d.ts
new file mode 100644
index 000000000..5697923dd
--- /dev/null
+++ b/apps/console2/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// {extractInitials(fullName)}
;
+}
+
+function extractInitials(name: string) {
+ const words = name.split(" ");
+ if (words.length === 2) {
+ return words
+ .map((word) => word[0])
+ .join("")
+ .toUpperCase();
+ }
+ return name.substring(0, 2).toUpperCase();
+}
diff --git a/packages/ui/src/Atoms/Button/Button.stories.tsx b/packages/ui/src/Atoms/Button/Button.stories.tsx
new file mode 100644
index 000000000..02b602457
--- /dev/null
+++ b/packages/ui/src/Atoms/Button/Button.stories.tsx
@@ -0,0 +1,54 @@
+import { IconPlusLarge } from "../Icons";
+import { Button } from "./Button";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+ title: "Atoms/Button",
+ component: Button,
+ argTypes: {},
+} satisfies Meta
+ {variants.map((variant) => (
+
+ );
+ },
+};
diff --git a/packages/ui/src/Atoms/Button/Button.tsx b/packages/ui/src/Atoms/Button/Button.tsx
new file mode 100644
index 000000000..ba5945cb5
--- /dev/null
+++ b/packages/ui/src/Atoms/Button/Button.tsx
@@ -0,0 +1,83 @@
+import type {
+ AnchorHTMLAttributes,
+ ButtonHTMLAttributes,
+ FC,
+ PropsWithChildren,
+} from "react";
+import { forwardRef } from "react";
+import { Link } from "react-router";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const button = tv({
+ base: "flex items-center justify-center gap-[6px] px-3 py-2 rounded-full cursor-pointer text-sm font-medium h-8",
+ variants: {
+ variant: {
+ primary:
+ "bg-primary text-invert hover:bg-primary-hover shadow-base hover:shadow-hover active:bg-primary-pressed focus:shadow-focus",
+ secondary:
+ "bg-secondary text-txt-primary hover:bg-secondary-hover shadow-base hover:shadow-hover active:bg-secondary-pressed focus:shadow-focus border border-border-low",
+ tertiary:
+ "bg-tertiary text-txt-primary hover:bg-tertiary-hover active:bg-tertiary-pressed focus:shadow-focus",
+ quaternary:
+ "bg-highlight text-txt-primary hover:bg-highlight-hover active:bg-highlight-pressed",
+ danger: "bg-danger-plain text-invert hover:bg-danger-hover shadow-base hover:shadow-hover active:bg-danger-pressed focus:shadow-focus border border-border-danger",
+ },
+ disabled: {
+ true: "opacity-60 cursor-default",
+ },
+ empty: {
+ true: "p-2 size-8",
+ },
+ },
+ defaultVariants: {
+ variant: "primary",
+ icon: false,
+ children: undefined,
+ },
+});
+
+type Props = PropsWithChildren<
+ {
+ icon?: FC<{ size: number }>;
+ iconAfter?: FC<{ size: number }>;
+ disabled?: boolean;
+ onClick?: () => void;
+ variant?:
+ | "primary"
+ | "secondary"
+ | "tertiary"
+ | "quaternary"
+ | "danger";
+ to?: string;
+ } & VariantProps
+
+
+
+
+ ))}
+
+ {label && (
+
+ )}
+
+ {help && {help}}
+
+ );
+}
diff --git a/packages/ui/src/Atoms/Link/Link.tsx b/packages/ui/src/Atoms/Link/Link.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/ui/src/Atoms/Logo/Logo.stories.tsx b/packages/ui/src/Atoms/Logo/Logo.stories.tsx
new file mode 100644
index 000000000..c47a92c45
--- /dev/null
+++ b/packages/ui/src/Atoms/Logo/Logo.stories.tsx
@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Logo } from "./Logo";
+
+const meta = {
+ title: "Atoms/Logo",
+ component: Logo,
+} satisfies Meta- {props.children}
+ {(["success", "error", "warning", "info"] as const).map(
+ (variant) => (
+ {}}
+ />
+ ),
+ )}
+
+
+ {toasts.map((toast) => (
+
+ );
+}
+
+const toast = tv({
+ base: "p-2 border rounded relative animate-in slide-in-from-right w-full cursor-pointer",
+ variants: {
+ variant: {
+ success:
+ "bg-success text-invert text-txt-success border-border-success",
+ error: "bg-danger text-invert text-txt-danger border-border-danger",
+ warning:
+ "bg-warning text-invert text-txt-warning border-border-warning",
+ info: "bg-info text-invert text-txt-info border-border-info",
+ },
+ },
+ defaultVariants: {
+ variant: "success",
+ },
+});
+
+export function Toast({ onClose, ...props }: Toast & { onClose: () => void }) {
+ return (
+
+ remove(toast.id)} />
+
+ ))}
+
+
+ );
+}
diff --git a/packages/ui/src/Foundation.stories.tsx b/packages/ui/src/Foundation.stories.tsx
new file mode 100644
index 000000000..c5b20205d
--- /dev/null
+++ b/packages/ui/src/Foundation.stories.tsx
@@ -0,0 +1,185 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import * as icons from "./Atoms/Icons";
+import { objectKeys } from "@probo/helpers";
+
+const meta = {
+ title: "Foundations",
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj{props.title}
+ {props.description}
+
+ {colors.map(([name, variants]) => (
+
+ );
+ },
+};
+
+export const Typography: Story = {
+ render() {
+ const textVariants = [
+ "text-5xl",
+ "text-4xl",
+ "text-3xl",
+ "text-2xl",
+ "text-xl",
+ "text-xl-medium",
+ "text-lg",
+ "text-lg-bold",
+ "text-base",
+ "text-base-link",
+ "text-sm",
+ "text-xs",
+ "text-xxs",
+ ];
+ return (
+
+
+ ))}
+ {name}
+
+ {variants.map((variant) => (
+
+
+
+
+ ))}
+
+ {variant}
+
+
+ {textVariants.map((variant) => (
+
+ );
+ },
+};
+
+export const Icons: Story = {
+ render() {
+ console.log();
+ return (
+
+
+ ))}
+
+ {variant}
+
+ This is a text {variant}
+
+ {objectKeys(icons).map((k) => {
+ const IconComponent = icons[k];
+ return (
+
+ );
+ })}
+
+ );
+ },
+};
diff --git a/packages/ui/src/Layouts/AuthLayout.stories.tsx b/packages/ui/src/Layouts/AuthLayout.stories.tsx
new file mode 100644
index 000000000..01631acc4
--- /dev/null
+++ b/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
+
+ );
+}
diff --git a/packages/ui/src/Layouts/ErrorLayout.stories.tsx b/packages/ui/src/Layouts/ErrorLayout.stories.tsx
new file mode 100644
index 000000000..0bf06ab5f
--- /dev/null
+++ b/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
+
+
+
+
+
+
+ 
+
+ {__("Navigate compliance with confidence thanks to")}
+ probo
+
+
+
+
+ );
+}
diff --git a/packages/ui/src/Layouts/Layout.stories.tsx b/packages/ui/src/Layouts/Layout.stories.tsx
new file mode 100644
index 000000000..97aa3dd45
--- /dev/null
+++ b/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{title}
+{description}
+ {children} +
+
+
+
+ );
+}
diff --git a/packages/ui/src/Molecules/PageHeader/PageHeader.stories.tsx b/packages/ui/src/Molecules/PageHeader/PageHeader.stories.tsx
new file mode 100644
index 000000000..db8fca6d4
--- /dev/null
+++ b/packages/ui/src/Molecules/PageHeader/PageHeader.stories.tsx
@@ -0,0 +1,19 @@
+import { Button } from "../../Atoms/Button/Button.tsx";
+import { PageHeader } from "./PageHeader";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+ title: "Molecules/PageHeader",
+ component: PageHeader,
+ argTypes: {},
+} satisfies Meta
+ {sidebar}
+
+ {children}
+
+
+
+
+ );
+}
diff --git a/packages/ui/src/Molecules/UserDropdown/UserDropdown.stories.tsx b/packages/ui/src/Molecules/UserDropdown/UserDropdown.stories.tsx
new file mode 100644
index 000000000..85f0b1c78
--- /dev/null
+++ b/packages/ui/src/Molecules/UserDropdown/UserDropdown.stories.tsx
@@ -0,0 +1,47 @@
+import { DropdownSeparator } from "../../Atoms/Dropdown/Dropdown";
+import {
+ IconArrowBoxLeft,
+ IconCircleQuestionmark,
+ IconSettingsGear2,
+} from "../../Atoms/Icons";
+import { UserDropdown, UserDropdownItem } from "./UserDropdown";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+ title: "Molecules/UserDropdown",
+ component: UserDropdown,
+ argTypes: {},
+ subcomponents: {
+ UserDropdownItem,
+ },
+} satisfies Meta
+
+ {title}
+ {description && ( +{description}
+ )} +{children}
+
+
+
+
+ + {fullName} +
+{email}
+