+
+
+
+
+ );
+}
diff --git a/apps/console2/src/pages/__generated__/OrganizationSelectionPageQuery.graphql.ts b/apps/console2/src/pages/__generated__/OrganizationSelectionPageQuery.graphql.ts
new file mode 100644
index 000000000..d67cd011f
--- /dev/null
+++ b/apps/console2/src/pages/__generated__/OrganizationSelectionPageQuery.graphql.ts
@@ -0,0 +1,150 @@
+/**
+ * @generated SignedSource<<282a94b76fe5e17bd40b45ced6445ef3>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type OrganizationSelectionPageQuery$variables = Record+ {__("Select an organization")} +
+
+ {organizations.map((organization) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+ {organization.name}
++ {__("Create an organization")} +
++ {__("Add a new organization to your account")} +
+ +
+
+
+
+
+ );
+}
diff --git a/apps/console2/src/pages/organizations/__generated__/NewOrganizationPageMutation.graphql.ts b/apps/console2/src/pages/organizations/__generated__/NewOrganizationPageMutation.graphql.ts
new file mode 100644
index 000000000..3c6b66094
--- /dev/null
+++ b/apps/console2/src/pages/organizations/__generated__/NewOrganizationPageMutation.graphql.ts
@@ -0,0 +1,174 @@
+/**
+ * @generated SignedSource<
+
+ {__("New Risk")}}
+ />
+
+
+ );
+}
diff --git a/apps/console2/src/routes.tsx b/apps/console2/src/routes.tsx
index 855d23aef..660adf21e 100644
--- a/apps/console2/src/routes.tsx
+++ b/apps/console2/src/routes.tsx
@@ -1,10 +1,14 @@
-import { createBrowserRouter, useRouteError } from "react-router";
+import {
+ createBrowserRouter,
+ useRouteError,
+ type RouteObject,
+} from "react-router";
import { MainLayout } from "./layouts/MainLayout";
+import { AuthLayout, CenteredLayout, CenteredLayoutSkeleton } from "@probo/ui";
+import { lazy, Suspense, type FC } from "react";
import { UnAuthenticatedError } from "./providers/RelayProviders";
-import { AuthLayout } from "@probo/ui";
-import { LoginPage } from "./pages/auth/LoginPage";
-function Demo() {
+function ErrorBoundary() {
const error = useRouteError();
if (error instanceof UnAuthenticatedError) {
return ;
@@ -13,26 +17,71 @@ function Demo() {
return error
;
}
-export const routes = createBrowserRouter([
+type Route = {
+ path: string;
+ Component: FC;
+ children?: Route[];
+ ErrorBoundary?: FC;
+ fallback?: FC;
+};
+
+const routes = [
{
path: "/auth",
Component: AuthLayout,
children: [
{
path: "login",
- element: Home
,
+ path: "",
+ Component: lazy(() => import("./pages/OrganizationsPage")),
+ },
+ {
+ path: "organizations/new",
+ Component: lazy(
+ () => import("./pages/organizations/NewOrganizationPage")
+ ),
},
],
},
-]);
+ {
+ path: "/organizations/:organizationId",
+ Component: MainLayout,
+ ErrorBoundary: ErrorBoundary,
+ children: [
+ {
+ path: "risks",
+ Component: lazy(() => import("./pages/organizations/risks/RisksPage")),
+ },
+ ],
+ },
+] satisfies Route[];
+
+/**
+ * Wrap component with a suspense to handle lazy loading & relay loading states
+ */
+function routeTransformer(route: Route): RouteObject {
+ if ("fallback" in route && route.fallback) {
+ return {
+ ...route,
+ children: route.children?.map(routeTransformer),
+ Component: () => (
+ {extractInitials(fullName)}
;
+export function Avatar({ name, src, size = "m" }: Props) {
+ if (src) {
+ return {extractInitials(name ?? "")}
+ );
}
function extractInitials(name: string) {
diff --git a/packages/ui/src/Atoms/Breadcrumb/Breadcrumb.stories.tsx b/packages/ui/src/Atoms/Breadcrumb/Breadcrumb.stories.tsx
new file mode 100644
index 000000000..467350fef
--- /dev/null
+++ b/packages/ui/src/Atoms/Breadcrumb/Breadcrumb.stories.tsx
@@ -0,0 +1,29 @@
+import { Breadcrumb } from "./Breadcrumb";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+ title: "Atoms/Breadcrumb",
+ component: Breadcrumb,
+ argTypes: {},
+} satisfies Meta
+ {items.map((item, index) => (
+ <>
+ {index > 0 &&
+ );
+}
+
+function BreadcrumbItem({ label, to, active }: ItemProps) {
+ const className = clsx(
+ "text-sm px-1 rounded-sm h-5",
+ active && "text-txt-primary font-medium",
+ );
+ if (to) {
+ return (
+
+ {label}
+
+ );
+ }
+ return {label};
+}
diff --git a/packages/ui/src/Atoms/Card/Card.stories.tsx b/packages/ui/src/Atoms/Card/Card.stories.tsx
new file mode 100644
index 000000000..02d07eaab
--- /dev/null
+++ b/packages/ui/src/Atoms/Card/Card.stories.tsx
@@ -0,0 +1,17 @@
+import { Card } from "./Card";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+ title: "Atoms/Card",
+ component: Card,
+ argTypes: {},
+} satisfies Meta
-
);
}
diff --git a/packages/ui/src/Layouts/CenteredLayout.stories.tsx b/packages/ui/src/Layouts/CenteredLayout.stories.tsx
new file mode 100644
index 000000000..54880c75e
--- /dev/null
+++ b/packages/ui/src/Layouts/CenteredLayout.stories.tsx
@@ -0,0 +1,16 @@
+import { CenteredLayout } from "./CenteredLayout";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+ title: "Layouts/CenteredLayout",
+ component: CenteredLayout,
+ argTypes: {},
+} satisfies Meta
+
-
+
+ );
+}
+
+export function CenteredLayoutSkeleton() {
+ return (
+
+ {children ??
+
+
+
-
+
diff --git a/packages/ui/src/Molecules/Dialog/Dialog.stories.tsx b/packages/ui/src/Molecules/Dialog/Dialog.stories.tsx
new file mode 100644
index 000000000..1e442949c
--- /dev/null
+++ b/packages/ui/src/Molecules/Dialog/Dialog.stories.tsx
@@ -0,0 +1,37 @@
+import { Button } from "../../Atoms/Button/Button";
+import { Dialog, DialogContent, DialogFooter } from "./Dialog";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+ title: "Atoms/Dialog",
+ component: Dialog,
+ argTypes: {},
+} satisfies Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ render: (args) => {
+ return (
+
+ );
+ },
+};
diff --git a/packages/ui/src/Molecules/Dialog/Dialog.tsx b/packages/ui/src/Molecules/Dialog/Dialog.tsx
new file mode 100644
index 000000000..908605996
--- /dev/null
+++ b/packages/ui/src/Molecules/Dialog/Dialog.tsx
@@ -0,0 +1,72 @@
+import {
+ Root,
+ Trigger,
+ Portal,
+ Overlay,
+ Content,
+ Title,
+ Close,
+} from "@radix-ui/react-dialog";
+import { IconCrossLargeX } from "../../Atoms/Icons";
+import type { ReactNode } from "react";
+import { Button } from "../../Atoms/Button/Button";
+import { useTranslate } from "@probo/i18n";
+
+type Props = {
+ onClose: () => void;
+ trigger: ReactNode;
+ title: ReactNode;
+ children?: ReactNode;
+};
+
+export function Dialog({ onClose, trigger, title, children }: Props) {
+ return (
+
+ {trigger}
+
+
+
+ );
+}
+
+export function DialogFooter({ children }: { children?: ReactNode }) {
+ const { __ } = useTranslate();
+ return (
+
+ );
+}
+
+export function DialogContent({ children }: { children: ReactNode }) {
+ return (
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+ {children}
+
+ {children}
+
+ );
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index ecf9336e6..ec2f3e122 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -2,12 +2,18 @@
export { Layout } from "./Layouts/Layout";
export { AuthLayout } from "./Layouts/AuthLayout";
export { ErrorLayout } from "./Layouts/ErrorLayout";
+export {
+ CenteredLayout,
+ CenteredLayoutSkeleton,
+} from "./Layouts/CenteredLayout";
// Atoms
export * from "./Atoms/Icons";
export { Logo } from "./Atoms/Logo/Logo";
export { SidebarItem } from "./Atoms/Sidebar/SidebarItem";
export { Button } from "./Atoms/Button/Button";
+export { Card } from "./Atoms/Card/Card";
+export { Breadcrumb } from "./Atoms/Breadcrumb/Breadcrumb";
export {
Dropdown,
DropdownSeparator,
@@ -22,6 +28,8 @@ export {
UserDropdownItem,
} from "./Molecules/UserDropdown/UserDropdown";
export { PageHeader } from "./Molecules/PageHeader/PageHeader";
+export { Skeleton } from "./Atoms/Skeleton/Skeleton";
+export { Dialog, DialogContent, DialogFooter } from "./Molecules/Dialog/Dialog";
// Hooks
-export { useToast } from "./Atoms/Toasts/Toasts";
+export { useToast, Toasts } from "./Atoms/Toasts/Toasts";
diff --git a/packages/ui/src/theme.css b/packages/ui/src/theme.css
index ed52f748b..7a88ab6d2 100644
--- a/packages/ui/src/theme.css
+++ b/packages/ui/src/theme.css
@@ -10,6 +10,7 @@
/* Text colors */
--color-txt-primary: #141e12;
--color-invert: #fcfdfc;
+ --color-txt-invert: var(--color-invert);
--color-txt-secondary: #6b716a;
--color-txt-tertiary: #818780;
--color-txt-quaternary: #d8dcd8;
@@ -162,5 +163,3 @@
0px 2px 4px 0px rgba(0, 0, 0, 0.08),
0px 2px 12px 0px rgba(0, 0, 0, 0.06);
}
-
-@import "tw-animate-css";
diff --git a/relay.config.json b/relay.config.json
new file mode 100644
index 000000000..dced57dd9
--- /dev/null
+++ b/relay.config.json
@@ -0,0 +1,6 @@
+{
+ "src": "./apps/console2/src",
+ "schema": "./pkg/server/api/console/v1/schema.graphql",
+ "language": "typescript",
+ "eagerEsModules": true
+}