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)} />

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

@@ -6,53 +6,58 @@ import {
     Content,
     Title,
     Close,
-    Description,
 } from "@radix-ui/react-dialog";
 import { IconCrossLargeX } from "../../Atoms/Icons";
-import type { HTMLAttributes, ReactNode } from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
 import { Button } from "../../Atoms/Button/Button";
 import { useTranslate } from "@probo/i18n";
 import clsx from "clsx";
 
 type Props = {
-    onClose: () => void;
     trigger: ReactNode;
     title: ReactNode;
     children?: ReactNode;
+    onOpenChange?: (open: boolean) => void;
     open?: boolean;
 };
 
-export function Dialog({ onClose, trigger, title, children, open }: Props) {
-    const onOpenChange = (open: boolean) => {
-        if (!open) {
-            onClose();
-        }
-    };
-
+export function Dialog({
+    trigger,
+    title,
+    children,
+    onOpenChange,
+    open,
+}: Props) {
     return (
         <Root open={open} onOpenChange={onOpenChange}>
             <Trigger asChild>{trigger}</Trigger>
             <Portal>
-                <Overlay className="fixed inset-0 z-50 bg-dialog/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
-                <div className="fixed grid place-items-center inset-0 z-50">
-                    <Content
-                        aria-describedby={undefined}
-                        className="bg-level-2 rounded-2xl max-w-5xl w-[95%]"
-                    >
-                        <div className="flex justify-between items-center p-3 border-b border-b-border-low">
-                            <Title className="text-sm font-medium">
-                                {title}
-                            </Title>
-                            <Close asChild>
-                                <Button
-                                    variant="tertiary"
-                                    icon={IconCrossLargeX}
-                                />
-                            </Close>
-                        </div>
-                        {children}
-                    </Content>
-                </div>
+                <Overlay
+                    className={clsx(
+                        "fixed inset-0 z-50 bg-dialog/40",
+                        `duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,
+                    )}
+                />
+                <Content
+                    aria-describedby={undefined}
+                    className={clsx(
+                        "fixed inset-0 m-auto z-50 w-full h-max bg-level-2 rounded-2xl max-w-5xl w-[95%]",
+                        `duration-200
+                            data-[state=open]:animate-in data-[state=closed]:animate-out
+                            data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
+                            data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
+                            data-[state=closed]:slide-out-to-top-5
+                            data-[state=open]:slide-in-from-top-5`,
+                    )}
+                >
+                    <div className="flex justify-between items-center p-3 border-b border-b-border-low">
+                        <Title className="text-sm font-medium">{title}</Title>
+                        <Close asChild>
+                            <Button variant="tertiary" icon={IconCrossLargeX} />
+                        </Close>
+                    </div>
+                    {children}
+                </Content>
             </Portal>
         </Root>
     );

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

@@ -16,3 +16,10 @@ export const Default: Story = {
         help: "e.g. This is a hint",
     },
 };
+
+export const Invalid: Story = {
+    args: {
+        ...Default.args,
+        error: "This is an error",
+    },
+};

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

@@ -2,50 +2,89 @@ import { tv } from "tailwind-variants";
 import { Label } from "../../Atoms/Label/Label";
 import { Input } from "../../Atoms/Input/Input";
 import { Textarea } from "../../Atoms/Textarea/Textarea";
+import { type ComponentProps } from "react";
+import { Select } from "../../Atoms/Select/Select";
 
-type Props = {
+type BaseProps<T extends string, P> = {
     label?: string;
     help?: string;
-    name?: string;
-    placeholder?: string;
-    type?: string;
-    required?: boolean;
-};
+    error?: string;
+    onValueChange?: (s: string) => void;
+    type: T;
+} & P;
+
+type Props =
+    | BaseProps<never, ComponentProps<typeof Input>>
+    | BaseProps<"text", ComponentProps<typeof Input>>
+    | BaseProps<"textarea", ComponentProps<typeof Textarea>>
+    | BaseProps<"select", ComponentProps<typeof Select>>;
 
 const field = tv({
     slots: {
         base: "flex flex-col",
         label: "mb-[6px]",
-        help: "text-xs font-semibold text-txt-tertiary mt-1",
+        help: "text-xs text-txt-tertiary mt-1",
     },
 });
 
 const { base: baseClass, label: labelClass, help: helpClass } = field();
 
-export function Field({
-    label,
-    help,
-    name,
-    placeholder,
-    type,
-    required,
-}: Props) {
-    const Comp = type === "textarea" ? Textarea : Input;
+export function Field(props: Props) {
+    const showHelp = props.help && !props.error;
     return (
         <div className={baseClass()}>
-            {label && (
-                <Label htmlFor={name} className={labelClass()}>
-                    {label}
+            {props.label && (
+                <Label htmlFor={props.name} className={labelClass()}>
+                    {props.label}
                 </Label>
             )}
-            <Comp
-                name={name}
-                id={name}
-                placeholder={placeholder}
-                type={type}
-                required={required}
-            />
-            {help && <span className={helpClass()}>{help}</span>}
+            {getInput(props)}
+            {showHelp && <span className={helpClass()}>{props.help}</span>}
+            {props.error && (
+                <span className="text-txt-danger text-sm mt-1">
+                    {props.error}
+                </span>
+            )}
         </div>
     );
 }
+
+function getInput(props: Props) {
+    const { label, error, onValueChange, type, ...restProps } = props;
+    const baseProps = {
+        ["aria-invalid"]: !!error,
+        name: props.name,
+        id: props.name,
+        placeholder: props.placeholder,
+    };
+    switch (type) {
+        case "select":
+            return (
+                // @ts-expect-error Select is too dynamic
+                <Select
+                    {...baseProps}
+                    {...restProps}
+                    onValueChange={onValueChange}
+                />
+            );
+        case "textarea":
+            return (
+                <Textarea
+                    // @ts-expect-error Textarea is too dynamic
+                    onChange={(e) => onValueChange?.(e.target.value)}
+                    {...baseProps}
+                    {...restProps}
+                />
+            );
+        default:
+            return (
+                <Input
+                    type={type}
+                    // @ts-expect-error Input is too dynamic
+                    onChange={(e) => onValueChange?.(e.target.value)}
+                    {...baseProps}
+                    {...restProps}
+                />
+            );
+    }
+}

packages/ui/src/index.ts

@@ -22,8 +22,10 @@ export {
 export { Avatar } from "./Atoms/Avatar/Avatar";
 export { Field } from "./Molecules/Field/Field.tsx";
 export { Input } from "./Atoms/Input/Input.tsx";
+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";
 
 // Molecules
 export {