Add risk creation form

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

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

@@ -10,3 +10,9 @@ export default {
 type Story = StoryObj<typeof Input>;
 
 export const Default: Story = {};
+
+export const Disabled: Story = {
+    args: {
+        disabled: true,
+    },
+};

packages/ui/src/Atoms/Input/Input.tsx

@@ -1,12 +1,20 @@
 import type { InputHTMLAttributes } from "react";
 import { tv } from "tailwind-variants";
 
-type Props = InputHTMLAttributes<HTMLInputElement>;
+type Props = {
+    invalid?: boolean;
+    disabled?: boolean;
+} & InputHTMLAttributes<HTMLInputElement>;
 
 export const input = tv({
-    base: "py-[6px] bg-secondary border border-border-mid rounded-[10px] hover:border-border-strong focus:shadow-focus text-sm px-3",
+    base: "py-[6px] bg-secondary border border-border-mid rounded-[10px] hover:border-border-strong focus:shadow-focus text-sm px-3 w-full bg-secondary disabled:bg-transparent",
+    variants: {
+        invalid: {
+            true: "border-border-danger",
+        },
+    },
 });
 
-export function Input(props: Props) {
-    return <input className={input(props)} {...props} />;
+export function Input({ invalid, ...props }: Props) {
+    return <input aria-invalid={invalid} className={input(props)} {...props} />;
 }

packages/ui/src/Atoms/Label/Label.tsx

@@ -1,14 +1,13 @@
-import type { HTMLAttributes } from "react";
+import type { ComponentProps } from "react";
 import { tv } from "tailwind-variants";
+import { Label as RadixLabel } from "@radix-ui/react-label";
 
-type Props = HTMLAttributes<HTMLLabelElement> & {
-    htmlFor?: string;
-};
+type Props = ComponentProps<typeof RadixLabel>;
 
 const label = tv({
-    base: "text-sm font-medium text-txt-primary",
+    base: "block text-sm font-medium text-txt-primary mb-[6px]",
 });
 
 export function Label({ ...props }: Props) {
-    return <label {...props} className={label(props)} />;
+    return <RadixLabel {...props} className={label(props)} />;
 }

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

@@ -0,0 +1,33 @@
+import { Select } from "../Select/Select";
+import { PropertyRow } from "./PropertyRow";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Atoms/PropertyRow",
+    component: PropertyRow,
+    argTypes: {},
+} satisfies Meta<typeof PropertyRow>;
+
+type Story = StoryObj<typeof PropertyRow>;
+
+export const Default: Story = {
+    args: {
+        id: "test",
+        label: "Test",
+        children: <Select variant="editor" placeholder="Select an otion" />,
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        disabled: true,
+    },
+};
+
+export const WithError: Story = {
+    args: {
+        ...Default.args,
+        error: "This is an error",
+    },
+};

packages/ui/src/Atoms/PropertyRow/PropertyRow.tsx

@@ -0,0 +1,29 @@
+import { Children, type ReactNode } from "react";
+import { Label } from "../Label/Label";
+
+type Props = {
+    label: string;
+    id: string;
+    children: ReactNode;
+    error?: string;
+};
+
+export function PropertyRow({ id, label, children, error, ...props }: Props) {
+    const [firstChild, ...restChildren] = Children.toArray(children);
+
+    return (
+        <div className="py-3 border-b border-border-low space-y-2" {...props}>
+            <div className="flex items-center justify-between">
+                <Label
+                    className="text-sm text-txt-secondary font-medium mb-0"
+                    htmlFor={id}
+                >
+                    {label}
+                </Label>
+                <div>{firstChild}</div>
+            </div>
+            {error && <div className="text-xs text-txt-danger">{error}</div>}
+            {restChildren}
+        </div>
+    );
+}

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

@@ -24,8 +24,16 @@ export const Default: Story = {
     },
 };
 
-export const NoChildren: Story = {
+export const Dashed: Story = {
     args: {
-        placeholder: "Select an option",
+        ...Default.args,
+        variant: "dashed",
+    },
+};
+
+export const Invalid: Story = {
+    args: {
+        ...Default.args,
+        invalid: true,
     },
 };

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

@@ -13,51 +13,116 @@ import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { input } from "../Input/Input.tsx";
 import { IconChevronGrabberVertical } from "../Icons/IconChevronGrabberVertical.tsx";
 import { tv } from "tailwind-variants";
-import type { ComponentProps, PropsWithChildren } from "react";
+import {
+    Children,
+    isValidElement,
+    type ComponentProps,
+    type PropsWithChildren,
+    type ReactNode,
+} from "react";
 
 type Props = PropsWithChildren<
     {
+        id?: string;
         placeholder?: string;
-        onChange?: (s: string) => void;
-        empty?: boolean;
-    } & Omit<ComponentProps<typeof Trigger>, "onChange">
+        onValueChange?: (s: string) => void;
+        variant?: "default" | "editor" | "dashed";
+        invalid?: boolean;
+        disabled?: boolean;
+    } & Omit<ComponentProps<typeof Root>, "onChange">
 >;
 
 const select = tv({
     slots: {
-        trigger: input({
-            className:
-                "flex justify-between items-center gap-4 data-placeholder:text-txt-tertiary w-full whitespace-nowrap",
-        }),
+        trigger:
+            "flex justify-between items-center data-placeholder:text-txt-tertiary whitespace-nowrap cursor-pointer",
         content:
             "z-100 shadow-mid rounded-[10px] bg-level-1 p-1 animate-in fade-in slide-in-from-top-2 overflow-y-auto overflow-y-auto",
-        option: "flex items-center gap-2 h-8 text-sm font-medium text-txt-primary hover:bg-tertiary-hover active:bg-tertiary-pressed cursor-pointer px-[10px]",
+        option: "flex items-center h-8 text-sm font-medium text-txt-primary hover:bg-tertiary-hover active:bg-tertiary-pressed cursor-pointer px-[10px]",
+        icon: "-mr-1",
     },
     variants: {
-        empty: {
+        invalid: {
             true: {
-                trigger: "border-dashed pointer-events-none",
+                trigger: "border-border-danger",
+            },
+        },
+        variant: {
+            dashed: {
+                trigger: input({
+                    class: "w-full gap-4 border-dashed pointer-events-none",
+                }),
+            },
+            editor: {
+                trigger:
+                    "bg-highlight hover:bg-highlight-hover active:bg-highlight-pressed text-txt-primary text-sm px-[10px] py-[6px] rounded-lg w-max gap-2",
+            },
+            default: {
+                trigger: input({ class: "w-full gap-4 " }),
             },
         },
     },
+    compoundVariants: [
+        {
+            invalid: true,
+            variant: "default",
+            class: {
+                trigger: "border-border-danger",
+            },
+        },
+    ],
+    defaultVariants: {
+        variant: "default",
+    },
 });
 
-const { trigger, option, content } = select();
+const { trigger, option, content, icon } = select();
+
+/**
+ * To display the selected value we need to find the selected option among children
+ */
+const findSelectedOption = (
+    children: unknown[],
+    condition: (c: { props: Record<string, unknown> }) => boolean,
+): ReactNode => {
+    const selectedOptions = children.find(
+        // @ts-expect-error We know that the children are ReactElements with props
+        (c) => isValidElement(c) && condition(c),
+    );
+    if (!isValidElement(selectedOptions)) {
+        return null;
+    }
+    return (selectedOptions.props as { children: ReactNode }).children;
+};
 
 export function Select({
     placeholder,
     children,
-    onChange,
-    empty,
+    onValueChange,
+    value,
     ...props
 }: Props) {
+    const childrenArr = Children.toArray(children);
+    const valueNode = value
+        ? findSelectedOption(
+              childrenArr,
+              (c) => c.props.value?.toString() === value?.toString(),
+          )
+        : undefined;
+
     return (
-        <Root onValueChange={onChange}>
-            <Trigger className={trigger({ ...props, empty })}>
+        <Root onValueChange={onValueChange} value={value}>
+            <Trigger className={trigger({ ...props })} {...props}>
                 <div className="text-ellipsis overflow-hidden">
-                    <Value placeholder={placeholder} />
+                    <Value placeholder={placeholder}>
+                        {valueNode ? (
+                            <span className="flex items-center gap-2">
+                                {valueNode}
+                            </span>
+                        ) : null}
+                    </Value>
                 </div>
-                <Icon className="SelectIcon">
+                <Icon className={icon()}>
                     <IconChevronGrabberVertical size={16} />
                 </Icon>
             </Trigger>
@@ -88,7 +153,9 @@ export function Select({
 export function Option({ children, ...props }: ComponentProps<typeof Item>) {
     return (
         <Item {...props} className={option(props)}>
-            <ItemText>{children}</ItemText>
+            <ItemText asChild>
+                <span className="flex items-center gap-2">{children}</span>
+            </ItemText>
         </Item>
     );
 }

packages/ui/src/Atoms/Textarea/Textarea.tsx

@@ -1,15 +1,13 @@
-import type { InputHTMLAttributes } from "react";
+import type { TextareaHTMLAttributes } from "react";
 import { tv } from "tailwind-variants";
 import { input } from "../Input/Input";
 
-type Props = InputHTMLAttributes<HTMLTextAreaElement>;
+type Props = TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 export const textarea = tv({
     base: input({ class: "min-h-20" }),
 });
 
-console.log(input({ class: "min-h-20" }));
-
 export function Textarea(props: Props) {
-    return <textarea className={textarea(props)} {...props} />;
+    return <textarea {...props} className={textarea(props)} />;
 }

packages/ui/src/Atoms/Toasts/Toasts.tsx

@@ -40,7 +40,7 @@ export function useToast() {
 export function Toasts() {
     const { toasts, remove } = useToasts();
     return (
-        <div className="fixed bottom-4 right-4 space-y-2 w-85">
+        <div className="fixed z-100 bottom-4 right-4 space-y-2 w-85">
             {toasts.map((toast) => (
                 <div key={toast.id}>
                     <Toast {...toast} onClose={() => remove(toast.id)} />