Add risk forms

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

packages/ui/package.json

@@ -15,6 +15,7 @@
         "@probo/helpers": "1.0.0",
         "@probo/i18n": "1.0.0",
         "@radix-ui/react-dropdown-menu": "^2.1.14",
+        "@radix-ui/react-portal": "^1.1.9",
         "@radix-ui/react-scroll-area": "^1.2.9",
         "@tailwindcss/vite": "^4.1.7",
         "class-variance-authority": "^0.7.1",

packages/ui/src/Atoms/Badge/Badge.stories.tsx

@@ -0,0 +1,31 @@
+import { Badge } from "./Badge";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Atoms/Badge",
+    component: Badge,
+    argTypes: {},
+} satisfies Meta<typeof Badge>;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+    render: () => (
+        <>
+            {(
+                [
+                    "success",
+                    "warning",
+                    "danger",
+                    "info",
+                    "neutral",
+                    "outline",
+                ] as const
+            ).map((variant) => (
+                <Badge key={variant} variant={variant}>
+                    {variant}
+                </Badge>
+            ))}
+        </>
+    ),
+};

packages/ui/src/Atoms/Badge/Badge.tsx

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from "react";
+import { tv } from "tailwind-variants";
+
+type Props = {
+    variant?: "success" | "warning" | "danger" | "info" | "neutral" | "outline";
+} & HTMLAttributes<HTMLDivElement>;
+
+const badge = tv({
+    base: "text-xs font-medium py-[2px] px-[6px] rounded-lg w-max",
+    variants: {
+        variant: {
+            success: "bg-success text-txt-success",
+            warning: "bg-warning text-txt-warning",
+            danger: "bg-danger text-txt-danger",
+            info: "bg-info text-txt-info",
+            neutral: "bg-subtle text-txt-secondary",
+            outline: "text-txt-tertiary border border-border-low",
+        },
+    },
+});
+
+export function Badge(props: Props) {
+    return <div className={badge(props)} {...props} />;
+}

packages/ui/src/Atoms/Dropdown/Dropdown.tsx

@@ -1,8 +1,10 @@
-import type { FC, PropsWithChildren, ReactNode } from "react";
+import type { ComponentProps, FC, PropsWithChildren, ReactNode } from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { clsx } from "clsx";
 import type { IconProps } from "../Icons/type.ts";
 import { tv } from "tailwind-variants";
+import { IconDotGrid1x3Horizontal } from "../Icons/IconDotGrid1x3Horizontal.tsx";
+import { Button } from "../Button/Button.tsx";
 
 type Props = PropsWithChildren<{
     toggle: ReactNode;
@@ -38,7 +40,8 @@ type DropdownItemProps = PropsWithChildren<{
     icon?: FC<IconProps>;
     asChild?: boolean;
     variant?: "primary" | "tertiary" | "danger";
-}>;
+}> &
+    ComponentProps<typeof DropdownMenu.Item>;
 
 const dropdownItem = tv({
     base: "text-txt-primary flex items-center gap-2 hover:bg-tertiary-hover active:bg-tertiary-pressed cursor-pointer p-2",
@@ -54,15 +57,28 @@ const dropdownItem = tv({
     },
 });
 
+export function ActionDropdown(props: Omit<Props, "toggle">) {
+    return (
+        <Dropdown
+            {...props}
+            toggle={
+                <Button variant="tertiary" icon={IconDotGrid1x3Horizontal} />
+            }
+        />
+    );
+}
+
 export function DropdownItem({
     icon: IconComponent,
     variant,
     className,
     children,
     asChild,
+    ...props
 }: DropdownItemProps) {
     return (
         <DropdownMenu.Item
+            {...props}
             className={clsx(dropdownItem({ variant }), className)}
             asChild={asChild}
         >

packages/ui/src/Atoms/Select/Select.tsx

@@ -85,6 +85,9 @@ const findSelectedOption = (
     children: unknown[],
     condition: (c: { props: Record<string, unknown> }) => boolean,
 ): ReactNode => {
+    if (children.length === 1) {
+        debugger;
+    }
     const selectedOptions = children.find(
         // @ts-expect-error We know that the children are ReactElements with props
         (c) => isValidElement(c) && condition(c),
@@ -109,7 +112,7 @@ export function Select({
               (c) => c.props.value?.toString() === value?.toString(),
           )
         : undefined;
-
+    console.log(childrenArr, valueNode);
     return (
         <Root onValueChange={onValueChange} value={value}>
             <Trigger className={trigger({ ...props })} {...props}>

packages/ui/src/Atoms/Table/Table.stories.tsx

@@ -0,0 +1,12 @@
+import { Table } from "./Table";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Atoms/Table",
+    component: Table,
+    argTypes: {},
+} satisfies Meta<typeof Table>;
+
+type Story = StoryObj<typeof Table>;
+
+export const Default: Story = {};

packages/ui/src/Atoms/Table/Table.tsx

@@ -0,0 +1,64 @@
+import { createContext, useContext, type PropsWithChildren } from "react";
+import { Card } from "../Card/Card";
+import { Link } from "react-router";
+import clsx from "clsx";
+
+export function Table({ children }: PropsWithChildren) {
+    return (
+        <Card className="relative w-full overflow-auto">
+            <table className="w-full text-left">{children}</table>
+        </Card>
+    );
+}
+
+export function Thead({ children }: PropsWithChildren) {
+    return (
+        <thead className="text-xs text-txt-tertiary font-semibold">
+            {children}
+        </thead>
+    );
+}
+
+export function Th({ children }: PropsWithChildren) {
+    return <th className="first:pl-6 last:pr-6 py-3">{children}</th>;
+}
+
+const TrContext = createContext({} as { to?: string });
+
+export function Tr({ children, to }: PropsWithChildren<{ to?: string }>) {
+    return (
+        <TrContext value={{ to }}>
+            <tr
+                className={clsx(
+                    "border-border-low border",
+                    to && "hover:bg-subtle",
+                )}
+            >
+                {children}
+            </tr>
+        </TrContext>
+    );
+}
+
+export function Tbody({ children }: PropsWithChildren) {
+    return (
+        <tbody className="text-sm text-txt-primary bg-tertiary">
+            {children}
+        </tbody>
+    );
+}
+
+export function Td({
+    children,
+    noLink,
+}: PropsWithChildren<{ noLink?: boolean }>) {
+    const { to } = useContext(TrContext);
+    if (!to || noLink) {
+        return <td className="first:pl-6 last:pr-6 py-3">{children}</td>;
+    }
+    return (
+        <td className="first:*:pl-6 *:block last:*:pr-6 py-3">
+            <Link to={to}>{children}</Link>
+        </td>
+    );
+}

packages/ui/src/Molecules/Badge/RiskBadge.stories.tsx

@@ -0,0 +1,20 @@
+import { RiskBadge } from "./RiskBadge";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Molecules/Badges/RiskBadge",
+    component: RiskBadge,
+    argTypes: {},
+} satisfies Meta<typeof RiskBadge>;
+
+type Story = StoryObj<typeof RiskBadge>;
+
+export const Default: Story = {
+    render: () => (
+        <div className="space-y-2">
+            <RiskBadge score={10} />
+            <RiskBadge score={8} />
+            <RiskBadge score={0} />
+        </div>
+    ),
+};

packages/ui/src/Molecules/Badge/RiskBadge.tsx

@@ -0,0 +1,30 @@
+import { useTranslate } from "@probo/i18n";
+import { Badge } from "../../Atoms/Badge/Badge";
+
+type Props = {
+    score: number;
+};
+
+const badgeVariant = (score: number) => {
+    if (score >= 15) {
+        return "danger";
+    }
+    if (score >= 8) {
+        return "warning";
+    }
+    return "success";
+};
+
+export function RiskBadge({ score }: Props) {
+    const { __ } = useTranslate();
+    const label = () => {
+        if (score >= 15) {
+            return __("High");
+        }
+        if (score >= 8) {
+            return __("Medium");
+        }
+        return __("Low");
+    };
+    return <Badge variant={badgeVariant(score)}>{label()}</Badge>;
+}

packages/ui/src/Molecules/Badge/SeverityBadge.stories.tsx

@@ -0,0 +1,21 @@
+import { SeverityBadge } from "./SeverityBadge.tsx";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Molecules/Badges/SeverityBadge",
+    component: SeverityBadge,
+    argTypes: {},
+} satisfies Meta<typeof SeverityBadge>;
+
+type Story = StoryObj<typeof SeverityBadge>;
+
+export const Default: Story = {
+    render: () => (
+        <div className="space-y-2">
+            <SeverityBadge severity={75} />
+            <SeverityBadge severity={50} />
+            <SeverityBadge severity={25} />
+            <SeverityBadge severity={0} />
+        </div>
+    ),
+};

packages/ui/src/Molecules/Badge/SeverityBadge.tsx

@@ -0,0 +1,36 @@
+import { useTranslate } from "@probo/i18n";
+import { Badge } from "../../Atoms/Badge/Badge.tsx";
+
+type Props = {
+    severity: number;
+};
+
+const badgeVariant = (severity: number) => {
+    if (severity >= 75) {
+        return "danger";
+    }
+    if (severity >= 50) {
+        return "warning";
+    }
+    if (severity >= 25) {
+        return "info";
+    }
+    return "success";
+};
+
+export function SeverityBadge({ severity }: Props) {
+    const { __ } = useTranslate();
+    const label = () => {
+        if (severity >= 75) {
+            return __("Critical");
+        }
+        if (severity >= 50) {
+            return __("High");
+        }
+        if (severity >= 25) {
+            return __("Low");
+        }
+        return __("None");
+    };
+    return <Badge variant={badgeVariant(severity)}>{label()}</Badge>;
+}

packages/ui/src/Molecules/Dialog/ConfirmDialog.stories.tsx

@@ -0,0 +1,28 @@
+import { Button } from "../../Atoms/Button/Button";
+import { ConfirmDialog } from "./ConfirmDialog";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Atoms/ConfirmDialog",
+    component: ConfirmDialog,
+    argTypes: {},
+} satisfies Meta<typeof ConfirmDialog>;
+
+type Story = StoryObj<typeof ConfirmDialog>;
+
+export const Default: Story = {
+    args: {
+        message:
+            'This will permanently delete the risk "Demo". This action cannot be undone.',
+    },
+    render() {
+        return (
+            <ConfirmDialog
+                message="Are you sure you want to delete this risk?"
+                onConfirm={() => {}}
+            >
+                <Button variant="danger">Delete this</Button>
+            </ConfirmDialog>
+        );
+    },
+};

packages/ui/src/Molecules/Dialog/ConfirmDialog.tsx

@@ -0,0 +1,66 @@
+import { useTranslate } from "@probo/i18n";
+import { Dialog, DialogContent, DialogFooter } from "./Dialog";
+import {
+    Children,
+    cloneElement,
+    isValidElement,
+    useState,
+    type ComponentProps,
+    type MouseEvent,
+    type ReactNode,
+} from "react";
+import { Button } from "../../Atoms/Button/Button";
+import { Root as Portal } from "@radix-ui/react-portal";
+
+type Props = {
+    children?: ReactNode;
+    title?: ReactNode;
+    message: string;
+    variant?: ComponentProps<typeof Button>["variant"];
+    label?: string;
+    onConfirm?: () => void;
+};
+
+export function ConfirmDialog(props: Props) {
+    const { __ } = useTranslate();
+    const title = props.title ?? __("Are you sure ?");
+    const variant = props.variant ?? "danger";
+    const label = variant === "danger" ? __("Delete") : props.label;
+    const [open, setOpen] = useState(false);
+    const onConfirm = () => {
+        setOpen(false);
+        props.onConfirm?.();
+        document.body.click();
+    };
+    const children = Children.map(props.children, (child) => {
+        if (!isValidElement(child)) {
+            throw new Error("Cannot use non element children");
+        }
+        return cloneElement(child, {
+            // @ts-expect-error We inject a handler on an unknown element
+            onClick: (e: MouseEvent) => {
+                e.preventDefault();
+                setOpen(true);
+            },
+        });
+    });
+    return (
+        <>
+            {children}
+            <Portal>
+                <Dialog open={open} onOpenChange={setOpen} title={title}>
+                    <DialogContent>
+                        <p className="text-sm text-txt-secondary p-4">
+                            {props.message}
+                        </p>
+                    </DialogContent>
+                    <DialogFooter>
+                        <Button variant={variant} onClick={onConfirm}>
+                            {label}
+                        </Button>
+                    </DialogFooter>
+                </Dialog>
+            </Portal>
+        </>
+    );
+}

packages/ui/src/Molecules/Dialog/Dialog.tsx

@@ -14,7 +14,7 @@ import { useTranslate } from "@probo/i18n";
 import clsx from "clsx";
 
 type Props = {
-    trigger: ReactNode;
+    trigger?: ReactNode;
     title: ReactNode;
     children?: ReactNode;
     onOpenChange?: (open: boolean) => void;
@@ -30,7 +30,7 @@ export function Dialog({
 }: Props) {
     return (
         <Root open={open} onOpenChange={onOpenChange}>
-            <Trigger asChild>{trigger}</Trigger>
+            {trigger && <Trigger asChild>{trigger}</Trigger>}
             <Portal>
                 <Overlay
                     className={clsx(

packages/ui/src/Molecules/Field/Field.tsx

@@ -16,6 +16,8 @@ type BaseProps<T extends string, P> = {
 type Props =
     | BaseProps<never, ComponentProps<typeof Input>>
     | BaseProps<"text", ComponentProps<typeof Input>>
+    | BaseProps<"email", ComponentProps<typeof Input>>
+    | BaseProps<"password", ComponentProps<typeof Input>>
     | BaseProps<"textarea", ComponentProps<typeof Textarea>>
     | BaseProps<"select", ComponentProps<typeof Select>>;
 

packages/ui/src/index.ts

@@ -16,6 +16,7 @@ export { Card } from "./Atoms/Card/Card";
 export { Breadcrumb } from "./Atoms/Breadcrumb/Breadcrumb";
 export {
     Dropdown,
+    ActionDropdown,
     DropdownSeparator,
     DropdownItem,
 } from "./Atoms/Dropdown/Dropdown";
@@ -26,6 +27,7 @@ export { Textarea } from "./Atoms/Textarea/Textarea.tsx";
 export { Select, Option } from "./Atoms/Select/Select.tsx";
 export { Label } from "./Atoms/Label/Label";
 export { PropertyRow } from "./Atoms/PropertyRow/PropertyRow";
+export { Table, Thead, Tr, Tbody, Td, Th } from "./Atoms/Table/Table";
 
 // Molecules
 export {
@@ -35,6 +37,9 @@ export {
 export { PageHeader } from "./Molecules/PageHeader/PageHeader";
 export { Skeleton } from "./Atoms/Skeleton/Skeleton";
 export { Dialog, DialogContent, DialogFooter } from "./Molecules/Dialog/Dialog";
+export { RiskBadge } from "./Molecules/Badge/RiskBadge";
+export { SeverityBadge } from "./Molecules/Badge/SeverityBadge.tsx";
+export { ConfirmDialog } from "./Molecules/Dialog/ConfirmDialog.tsx";
 
 // Hooks
 export { useToast, Toasts } from "./Atoms/Toasts/Toasts";

packages/ui/tsconfig.app.json

@@ -23,6 +23,6 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src"],
+  "include": ["src", "../../apps/console2/src/types.ts"],
   "exclude": ["src/Atoms/Icons/generator.ts"]
 }