Add risk creation form

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

apps/console2/package.json

@@ -12,18 +12,22 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.0.1",
     "@probo/hooks": "1.0.0",
     "@probo/i18n": "1.0.0",
     "@probo/ui": "1.0.0",
     "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-select": "^2.2.5",
     "@tanstack/react-query": "^5.76.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-error-boundary": "^6.0.0",
+    "react-hook-form": "^7.56.4",
     "react-relay": "^19.0.0",
     "react-router": "^7.6.0",
-    "relay-runtime": "^19.0.0"
+    "relay-runtime": "^19.0.0",
+    "zod": "^3.25.17"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

apps/console2/src/components/form/ControlledField.tsx

@@ -0,0 +1,47 @@
+import type { ComponentProps, JSXElementConstructor } from "react";
+import { Field } from "@probo/ui";
+import { Controller, type Control } from "react-hook-form";
+import { Select } from "@probo/ui";
+
+type Props<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> =
+  ComponentProps<T> & {
+    control: Control<any>;
+    name: string;
+  };
+
+export function ControlledField({
+  control,
+  name,
+  ...props
+}: Props<typeof Field>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <Field {...props} {...field} onValueChange={field.onChange} />
+      )}
+    />
+  );
+}
+
+export function ControlledSelect({
+  control,
+  name,
+  ...props
+}: Props<typeof Select>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <Select
+          id={name}
+          {...props}
+          {...field}
+          onValueChange={field.onChange}
+        />
+      )}
+    />
+  );
+}

apps/console2/src/components/form/UserSelect.tsx

@@ -0,0 +1,85 @@
+import { Avatar, Option, Select } from "@probo/ui";
+import { Suspense } from "react";
+import { useLazyLoadQuery } from "react-relay";
+import { graphql } from "relay-runtime";
+import type { UserSelectQuery as UserSelectQueryType } from "./__generated__/UserSelectQuery.graphql";
+import { useTranslate } from "@probo/i18n";
+import { Controller, type Control } from "react-hook-form";
+
+const usersQuery = graphql`
+  query UserSelectQuery($organizationId: ID!) {
+    organization: node(id: $organizationId) {
+      ... on Organization {
+        users(first: 100, orderBy: { direction: ASC, field: CREATED_AT }) {
+          edges {
+            node {
+              id
+              fullName
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export function UserSelect({
+  organization,
+  name,
+  control,
+}: {
+  organization: string;
+  name: string;
+  control: Control<any>;
+}) {
+  return (
+    <Suspense
+      fallback={<Select variant="editor" disabled placeholder="Loading..." />}
+    >
+      <UserSelectWithQuery
+        organization={organization}
+        name={name}
+        control={control}
+      />
+    </Suspense>
+  );
+}
+
+function UserSelectWithQuery({
+  organization,
+  name,
+  control,
+}: {
+  organization: string;
+  name: string;
+  control: Control;
+}) {
+  const { __ } = useTranslate();
+  const data = useLazyLoadQuery<UserSelectQueryType>(usersQuery, {
+    organizationId: organization,
+  });
+
+  const users = data.organization?.users?.edges.map((edge) => edge.node);
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <Select
+          id={name}
+          variant="editor"
+          placeholder={__("Select an user")}
+          {...field}
+        >
+          {users?.map((user) => (
+            <Option key={user.id} value={user.id}>
+              <Avatar name={user.fullName} />
+              {user.fullName}
+            </Option>
+          ))}
+        </Select>
+      )}
+    />
+  );
+}

apps/console2/src/components/form/__generated__/UserSelectQuery.graphql.ts

@@ -0,0 +1,180 @@
+/**
+ * @generated SignedSource<<45329c77cfacf0f653adac2e9172b371>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type UserSelectQuery$variables = {
+  organizationId: string;
+};
+export type UserSelectQuery$data = {
+  readonly organization: {
+    readonly users?: {
+      readonly edges: ReadonlyArray<{
+        readonly node: {
+          readonly fullName: string;
+          readonly id: string;
+        };
+      }>;
+    };
+  };
+};
+export type UserSelectQuery = {
+  response: UserSelectQuery$data;
+  variables: UserSelectQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "organizationId"
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
+    "name": "id",
+    "variableName": "organizationId"
+  }
+],
+v2 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+},
+v3 = {
+  "kind": "InlineFragment",
+  "selections": [
+    {
+      "alias": null,
+      "args": [
+        {
+          "kind": "Literal",
+          "name": "first",
+          "value": 100
+        },
+        {
+          "kind": "Literal",
+          "name": "orderBy",
+          "value": {
+            "direction": "ASC",
+            "field": "CREATED_AT"
+          }
+        }
+      ],
+      "concreteType": "UserConnection",
+      "kind": "LinkedField",
+      "name": "users",
+      "plural": false,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "concreteType": "UserEdge",
+          "kind": "LinkedField",
+          "name": "edges",
+          "plural": true,
+          "selections": [
+            {
+              "alias": null,
+              "args": null,
+              "concreteType": "User",
+              "kind": "LinkedField",
+              "name": "node",
+              "plural": false,
+              "selections": [
+                (v2/*: any*/),
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "fullName",
+                  "storageKey": null
+                }
+              ],
+              "storageKey": null
+            }
+          ],
+          "storageKey": null
+        }
+      ],
+      "storageKey": "users(first:100,orderBy:{\"direction\":\"ASC\",\"field\":\"CREATED_AT\"})"
+    }
+  ],
+  "type": "Organization",
+  "abstractKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "UserSelectQuery",
+    "selections": [
+      {
+        "alias": "organization",
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "UserSelectQuery",
+    "selections": [
+      {
+        "alias": "organization",
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "__typename",
+            "storageKey": null
+          },
+          (v3/*: any*/),
+          (v2/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "795bb4c1131f2cacedb1ab8faf9f10ed",
+    "id": null,
+    "metadata": {},
+    "name": "UserSelectQuery",
+    "operationKind": "query",
+    "text": "query UserSelectQuery(\n  $organizationId: ID!\n) {\n  organization: node(id: $organizationId) {\n    __typename\n    ... on Organization {\n      users(first: 100, orderBy: {direction: ASC, field: CREATED_AT}) {\n        edges {\n          node {\n            id\n            fullName\n          }\n        }\n      }\n    }\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "f2a6754264e15c49c53a9ac9fa60264e";
+
+export default node;

apps/console2/src/hooks/useFormWithSchema.ts

@@ -0,0 +1,13 @@
+import { useForm } from "react-hook-form";
+import type { z, ZodType } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+export function useFormWithSchema<T extends ZodType<any, any, any>>(
+  schema: T,
+  options: Parameters<typeof useForm<z.infer<T>>>[0]
+) {
+  return useForm<z.infer<T>>({
+    ...options,
+    resolver: zodResolver(schema),
+  });
+}

apps/console2/src/hooks/useOrganizationId.ts

@@ -0,0 +1,9 @@
+import { useParams } from "react-router";
+
+export function useOrganizationId(): string {
+  const { organizationId } = useParams<{ organizationId?: string }>();
+  if (!organizationId) {
+    throw new Error("Cannot resolve organizationId in route params");
+  }
+  return organizationId;
+}

apps/console2/src/pages/OrganizationsPage.tsx

@@ -1,13 +1,13 @@
 import { useTranslate } from "@probo/i18n";
 import { useLazyLoadQuery } from "react-relay";
 import { graphql } from "relay-runtime";
-import type { OrganizationSelectionPageQuery as OrganizationSelectionPageQueryType } from "./__generated__/OrganizationSelectionPageQuery.graphql";
+import type { OrganizationsPageQuery as OrganizationsPageQueryType } from "./__generated__/OrganizationsPageQuery.graphql";
 import { useEffect } from "react";
 import { Link, useNavigate } from "react-router";
 import { Avatar, Button, Card, IconPlusLarge } from "@probo/ui";
 
-const OrganizationSelectionPageQuery = graphql`
+const OrganizationsPageQuery = graphql`
-  query OrganizationSelectionPageQuery {
+  query OrganizationsPageQuery {
     viewer {
       organizations(first: 25) {
         edges {
@@ -22,11 +22,11 @@ const OrganizationSelectionPageQuery = graphql`
   }
 `;
 
-export default function OrganizationSelectionPage() {
+export default function OrganizationsPage() {
   const { __ } = useTranslate();
   const navigate = useNavigate();
-  const data = useLazyLoadQuery<OrganizationSelectionPageQueryType>(
+  const data = useLazyLoadQuery<OrganizationsPageQueryType>(
-    OrganizationSelectionPageQuery,
+    OrganizationsPageQuery,
     {}
   );
 

apps/console2/src/pages/__generated__/OrganizationsPageQuery.graphql.ts

@@ -0,0 +1,150 @@
+/**
+ * @generated SignedSource<<91cc89e5e07572ab16c7bc9b8443fcd6>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type OrganizationsPageQuery$variables = Record<PropertyKey, never>;
+export type OrganizationsPageQuery$data = {
+  readonly viewer: {
+    readonly organizations: {
+      readonly edges: ReadonlyArray<{
+        readonly node: {
+          readonly id: string;
+          readonly logoUrl: string | null | undefined;
+          readonly name: string;
+        };
+      }>;
+    };
+  };
+};
+export type OrganizationsPageQuery = {
+  response: OrganizationsPageQuery$data;
+  variables: OrganizationsPageQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+},
+v1 = {
+  "alias": null,
+  "args": [
+    {
+      "kind": "Literal",
+      "name": "first",
+      "value": 25
+    }
+  ],
+  "concreteType": "OrganizationConnection",
+  "kind": "LinkedField",
+  "name": "organizations",
+  "plural": false,
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "concreteType": "OrganizationEdge",
+      "kind": "LinkedField",
+      "name": "edges",
+      "plural": true,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "concreteType": "Organization",
+          "kind": "LinkedField",
+          "name": "node",
+          "plural": false,
+          "selections": [
+            (v0/*: any*/),
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "name",
+              "storageKey": null
+            },
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "logoUrl",
+              "storageKey": null
+            }
+          ],
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    }
+  ],
+  "storageKey": "organizations(first:25)"
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "OrganizationsPageQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [
+          (v1/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "OrganizationsPageQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [
+          (v1/*: any*/),
+          (v0/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "e771f8e44e9f9224d9cbe0f271b096ed",
+    "id": null,
+    "metadata": {},
+    "name": "OrganizationsPageQuery",
+    "operationKind": "query",
+    "text": "query OrganizationsPageQuery {\n  viewer {\n    organizations(first: 25) {\n      edges {\n        node {\n          id\n          name\n          logoUrl\n        }\n      }\n    }\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "457b1b8b28355830d77458bab7af23f2";
+
+export default node;

apps/console2/src/pages/organizations/risks/NewRiskDialog.tsx

@@ -9,9 +9,24 @@ import {
   Select,
   Option,
   Field,
+  Card,
+  PropertyRow,
+  IconPlusLarge,
+  Textarea,
+  useToast,
 } from "@probo/ui";
 import { useMemo, useState, type ReactNode } from "react";
 import { useFetchQuery } from "../../../hooks/useFetchQuery";
+import { graphql } from "relay-runtime";
+import { UserSelect } from "../../../components/form/UserSelect";
+import { useOrganizationId } from "../../../hooks/useOrganizationId";
+import { useToggle } from "@probo/hooks";
+import {
+  ControlledField,
+  ControlledSelect,
+} from "../../../components/form/ControlledField";
+import { useRiskForm, type RiskForm } from "./forms/useRiskForm";
+import { useMutation } from "react-relay";
 
 type Props = {
   trigger: ReactNode;
@@ -23,50 +38,243 @@ type Risk = {
   description: string;
 };
 
+const createRiskMutation = graphql`
+  mutation NewRiskDialogMutation(
+    $input: CreateRiskInput!
+    $connections: [ID!]!
+  ) {
+    createRisk(input: $input) {
+      riskEdge @prependEdge(connections: $connections) {
+        node {
+          id
+          name
+          description
+          category
+          inherentLikelihood
+          inherentImpact
+          residualLikelihood
+          residualImpact
+          treatment
+          createdAt
+          updatedAt
+        }
+      }
+    }
+  }
+`;
+
 export default function NewRiskDialog({ trigger }: Props) {
   const { __ } = useTranslate();
+  const organizationId = useOrganizationId();
+
+  const { control, handleSubmit, setValue, register, watch, formState } =
+    useRiskForm(organizationId);
+  const errors = formState.errors ?? {};
+  const [createRisk, isLoading] = useMutation(createRiskMutation);
+  const { toast } = useToast();
 
   const onTemplateChange = (risk: Risk) => {
-    console.log(risk);
+    setValue("name", risk.name);
+    setValue("description", risk.description);
   };
 
+  const onSubmit = handleSubmit((data) => {
+    createRisk({
+      variables: {
+        input: data,
+      },
+      onCompleted: (response, error) => {
+        if (error) {
+          toast({
+            title: __("Error"),
+            description: __("Failed to create risk. Please try again."),
+            variant: "error",
+          });
+          return;
+        }
+
+        toast({
+          title: __("Success"),
+          description: __("Risk created successfully."),
+          variant: "success",
+        });
+
+        setOpen(false);
+      },
+    });
+  });
+
+  const [showNote, toggleNote] = useToggle(false);
+  const [open, setOpen] = useState(false);
+
   return (
     <Dialog
-      open
+      open={open}
-      onClose={() => {}}
+      onOpenChange={setOpen}
       trigger={trigger}
       title={<Breadcrumb items={[__("Risks"), __("New Risk")]}></Breadcrumb>}
     >
-      <form>
+      <form onSubmit={onSubmit}>
         <DialogContent className="grid grid-cols-[1fr_420px]">
           {/* Main form */}
           <div className="py-8 px-12 space-y-6">
-            <TemplateSelector onChange={onTemplateChange} />
+            <TemplateSelector
+              onChange={onTemplateChange}
+              control={control}
+              watch={watch}
+            />
             <Field
+              {...register("name")}
+              error={errors.name?.message}
               label={__("Risk name")}
-              name="name"
               placeholder={__("Service Outage")}
             />
             <Field
+              {...register("description")}
+              error={errors.description?.message}
               label={__("Description")}
-              name="description"
               placeholder={__("Type your description here")}
               type="textarea"
             />
+
+            <div className="grid grid-cols-2 gap-6">
+              <ImpactAndLikelihood
+                errors={errors}
+                control={control}
+                label={__("Inherent Risk")}
+                prefix="inherent"
+              />
+              <ImpactAndLikelihood
+                errors={errors}
+                control={control}
+                label={__("Residual Risk")}
+                prefix="residual"
+              />
+            </div>
           </div>
 
           {/* Properties form */}
-          <div className="py-5 px-6 bg-subtle"></div>
+          <div className="py-5 px-6 bg-subtle">
+            <Label>{__("Properties")}</Label>
+
+            <PropertyRow
+              id="ownerId"
+              label={__("Owner")}
+              error={errors.ownerId?.message}
+            >
+              <UserSelect
+                name="ownerId"
+                control={control}
+                organization={organizationId}
+              />
+            </PropertyRow>
+
+            <PropertyRow
+              id="treatment"
+              label={__("Treatment strategy")}
+              error={errors.treatment?.message}
+            >
+              <ControlledSelect
+                control={control}
+                name="treatment"
+                variant="editor"
+                placeholder={__("Select a treatment strategy")}
+              >
+                <Option value="AVOIDED">Avoid</Option>
+                <Option value="MITIGATED">Mitigate</Option>
+                <Option value="TRANSFERRED">Transfer</Option>
+                <Option value="ACCEPTED">Accept</Option>
+              </ControlledSelect>
+            </PropertyRow>
+
+            <PropertyRow
+              id="note"
+              label={__("Note")}
+              error={errors.note?.message}
+            >
+              <Button
+                type="button"
+                variant="quaternary"
+                icon={IconPlusLarge}
+                onClick={toggleNote}
+              />
+              {showNote && (
+                <Textarea
+                  className="animate-in slide-in-from-top-2"
+                  placeholder={__("Add any additional notes about this risk")}
+                />
+              )}
+            </PropertyRow>
+          </div>
         </DialogContent>
         <DialogFooter>
-          <Button type="submit">{__("Create risk")}</Button>
+          <Button type="submit" disabled={isLoading}>
+            {__("Create risk")}
+          </Button>
         </DialogFooter>
       </form>
     </Dialog>
   );
 }
 
-function TemplateSelector({ onChange }: { onChange: (risk: Risk) => void }) {
+function ImpactAndLikelihood({
+  label,
+  prefix,
+  control,
+  errors,
+}: {
+  label: string;
+  prefix: string;
+  control: RiskForm["control"];
+  errors: Record<string, { message: string }>;
+}) {
+  const { __ } = useTranslate();
+  return (
+    <div>
+      <Label>{label}</Label>
+      <Card padded className="space-y-4 p-4">
+        <ControlledField
+          control={control}
+          name={`${prefix}Impact`}
+          type="select"
+          label={__("Impact")}
+          placeholder={__("Select impact level")}
+          error={errors?.[`${prefix}Impact`]?.message}
+        >
+          <Option value="1">1 - Negligible</Option>
+          <Option value="2">2 - Low</Option>
+          <Option value="3">3 - Moderate</Option>
+          <Option value="4">4 - Significant</Option>
+          <Option value="5">5 - Catastrophic</Option>
+        </ControlledField>
+        <ControlledField
+          control={control}
+          name={`${prefix}Likelihood`}
+          type="select"
+          label={__("Likelihood")}
+          placeholder={__("Select likelihood level")}
+          error={errors?.[`${prefix}Likelihood`]?.message}
+        >
+          <Option value="1">1 - Improbable</Option>
+          <Option value="2">2 - Remote</Option>
+          <Option value="3">3 - Occasional</Option>
+          <Option value="4">4 - Probable</Option>
+          <Option value="5">5 - Frequent</Option>
+        </ControlledField>
+      </Card>
+    </div>
+  );
+}
+
+function TemplateSelector({
+  onChange,
+  control,
+  watch,
+}: {
+  onChange: (risk: Risk) => void;
+  control: RiskForm["control"];
+  watch: RiskForm["watch"];
+}) {
   const { __ } = useTranslate();
   const { data: risks } = useFetchQuery<Risk[]>("/data/risks/risks.json", {
     staleTime: 100_000,
@@ -77,7 +285,7 @@ function TemplateSelector({ onChange }: { onChange: (risk: Risk) => void }) {
     [risks]
   );
 
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const selectedCategory = watch("category");
 
   const templates = useMemo(
     () => risks?.filter((r) => r.category === selectedCategory) ?? [],
@@ -94,21 +302,22 @@ function TemplateSelector({ onChange }: { onChange: (risk: Risk) => void }) {
   return (
     <div>
       <Label>{__("Risk category")}</Label>
-      <div className="grid grid-cols-2 gap-2 mt-[6px]">
+      <div className="grid grid-cols-2 gap-2">
-        <Select
+        <ControlledSelect
+          control={control}
+          name="category"
           placeholder={__("Select a category")}
-          onChange={setSelectedCategory}
         >
           {categories.map((category) => (
             <Option key={category} value={category}>
               {category}
             </Option>
           ))}
-        </Select>
+        </ControlledSelect>
         <Select
-          empty={templates?.length === 0}
+          variant={templates?.length === 0 ? "dashed" : "default"}
           placeholder={__("Select template")}
-          onChange={onTemplateChange}
+          onValueChange={onTemplateChange}
         >
           {templates?.map((template) => (
             <Option key={template.name} value={template.name}>

apps/console2/src/pages/organizations/risks/__generated__/NewRiskDialogMutation.graphql.ts

@@ -0,0 +1,249 @@
+/**
+ * @generated SignedSource<<3577f9a5c1b1f5b26dcac244a9a55fc5>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type RiskTreatment = "ACCEPTED" | "AVOIDED" | "MITIGATED" | "TRANSFERRED" | "%future added value";
+export type CreateRiskInput = {
+  category: string;
+  description: string;
+  inherentImpact: number;
+  inherentLikelihood: number;
+  name: string;
+  note?: string | null | undefined;
+  organizationId: string;
+  ownerId?: string | null | undefined;
+  residualImpact?: number | null | undefined;
+  residualLikelihood?: number | null | undefined;
+  treatment: RiskTreatment;
+};
+export type NewRiskDialogMutation$variables = {
+  connections: ReadonlyArray<string>;
+  input: CreateRiskInput;
+};
+export type NewRiskDialogMutation$data = {
+  readonly createRisk: {
+    readonly riskEdge: {
+      readonly node: {
+        readonly category: string;
+        readonly createdAt: any;
+        readonly description: string;
+        readonly id: string;
+        readonly inherentImpact: number;
+        readonly inherentLikelihood: number;
+        readonly name: string;
+        readonly residualImpact: number;
+        readonly residualLikelihood: number;
+        readonly treatment: RiskTreatment;
+        readonly updatedAt: any;
+      };
+    };
+  };
+};
+export type NewRiskDialogMutation = {
+  response: NewRiskDialogMutation$data;
+  variables: NewRiskDialogMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "connections"
+},
+v1 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "input"
+},
+v2 = [
+  {
+    "kind": "Variable",
+    "name": "input",
+    "variableName": "input"
+  }
+],
+v3 = {
+  "alias": null,
+  "args": null,
+  "concreteType": "RiskEdge",
+  "kind": "LinkedField",
+  "name": "riskEdge",
+  "plural": false,
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "concreteType": "Risk",
+      "kind": "LinkedField",
+      "name": "node",
+      "plural": false,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "id",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "name",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "description",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "category",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "inherentLikelihood",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "inherentImpact",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "residualLikelihood",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "residualImpact",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "treatment",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "createdAt",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "updatedAt",
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    }
+  ],
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [
+      (v0/*: any*/),
+      (v1/*: any*/)
+    ],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "NewRiskDialogMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "CreateRiskPayload",
+        "kind": "LinkedField",
+        "name": "createRisk",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [
+      (v1/*: any*/),
+      (v0/*: any*/)
+    ],
+    "kind": "Operation",
+    "name": "NewRiskDialogMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "CreateRiskPayload",
+        "kind": "LinkedField",
+        "name": "createRisk",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "filters": null,
+            "handle": "prependEdge",
+            "key": "",
+            "kind": "LinkedHandle",
+            "name": "riskEdge",
+            "handleArgs": [
+              {
+                "kind": "Variable",
+                "name": "connections",
+                "variableName": "connections"
+              }
+            ]
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "e9b461ea2a98edd7d4a1b289d5d4673f",
+    "id": null,
+    "metadata": {},
+    "name": "NewRiskDialogMutation",
+    "operationKind": "mutation",
+    "text": "mutation NewRiskDialogMutation(\n  $input: CreateRiskInput!\n) {\n  createRisk(input: $input) {\n    riskEdge {\n      node {\n        id\n        name\n        description\n        category\n        inherentLikelihood\n        inherentImpact\n        residualLikelihood\n        residualImpact\n        treatment\n        createdAt\n        updatedAt\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "532223f85627f715a9a457680073f358";
+
+export default node;

apps/console2/src/pages/organizations/risks/forms/useRiskForm.tsx

@@ -0,0 +1,38 @@
+import { z } from "zod";
+import { useFormWithSchema } from "../../../../hooks/useFormWithSchema";
+
+// Export the schema so it can be used elsewhere
+export const riskSchema = z.object({
+  category: z.string(),
+  name: z.string(),
+  description: z.string(),
+  organizationId: z.string(),
+  ownerId: z.string(),
+  treatment: z.enum(["AVOIDED", "MITIGATED", "TRANSFERRED", "ACCEPTED"]),
+  inherentLikelihood: z.number().min(1).max(5),
+  inherentImpact: z.number().min(1).max(5),
+  residualLikelihood: z.number().min(1).max(5),
+  residualImpact: z.number().min(1).max(5),
+  note: z.string(),
+});
+
+export const useRiskForm = (organizationId: string) => {
+  return useFormWithSchema(riskSchema, {
+    defaultValues: {
+      category: "Compliance & Legal",
+      name: "Contractual risk due to poorly drafted agreements",
+      description:
+        "Weak contracts leads to disputes, missed deliverables, or revenue leakage",
+      organizationId: organizationId,
+      ownerId: "a_YJLJ5RAAIACAAAAZbuSmzPhFPhoMEQ",
+      treatment: "MITIGATED",
+      inherentLikelihood: 5,
+      inherentImpact: 5,
+      residualLikelihood: 5,
+      residualImpact: 5,
+      note: "Hello worlds this is a test",
+    },
+  });
+};
+
+export type RiskForm = ReturnType<typeof useRiskForm>;

bun.lock

@@ -11,18 +11,22 @@
       "name": "console2",
       "version": "0.0.0",
       "dependencies": {
+        "@hookform/resolvers": "^5.0.1",
         "@probo/hooks": "1.0.0",
         "@probo/i18n": "1.0.0",
         "@probo/ui": "1.0.0",
         "@radix-ui/react-dialog": "^1.1.14",
+        "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-select": "^2.2.5",
         "@tanstack/react-query": "^5.76.1",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-error-boundary": "^6.0.0",
+        "react-hook-form": "^7.56.4",
         "react-relay": "^19.0.0",
         "react-router": "^7.6.0",
         "relay-runtime": "^19.0.0",
+        "zod": "^3.25.17",
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
@@ -288,6 +292,8 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.9", "", {}, "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="],
 
+    "@hookform/resolvers": ["@hookform/resolvers@5.0.1", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-u/+Jp83luQNx9AdyW2fIPGY6Y7NG68eN2ZW8FOJYL+M0i4s49+refdJdOp/A9n9HFQtQs3HIDHQvX3ZET2o7YA=="],
+
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
 
     "@humanfs/node": ["@humanfs/node@0.16.6", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.3.0" } }, "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw=="],
@@ -370,6 +376,8 @@
 
     "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
 
+    "@radix-ui/react-label": ["@radix-ui/react-label@2.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ=="],
+
     "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.10", "@radix-ui/react-focus-guards": "1.1.2", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.7", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.10", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew=="],
 
     "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.7", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ=="],
@@ -450,6 +458,8 @@
 
     "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.41.0", "", { "os": "win32", "cpu": "x64" }, "sha512-h1J+Yzjo/X+0EAvR2kIXJDuTuyT7drc+t2ALY0nIcGPbTatNOf0VWdhEA2Z4AAjv6X1NJV7SYo5oCTYRJhSlVA=="],
 
+    "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
+
     "@storybook/addon-actions": ["@storybook/addon-actions@8.6.14", "", { "dependencies": { "@storybook/global": "^5.0.0", "@types/uuid": "^9.0.1", "dequal": "^2.0.2", "polished": "^4.2.2", "uuid": "^9.0.0" }, "peerDependencies": { "storybook": "^8.6.14" } }, "sha512-mDQxylxGGCQSK7tJPkD144J8jWh9IU9ziJMHfB84PKpI/V5ZgqMDnpr2bssTrUaGDqU5e1/z8KcRF+Melhs9pQ=="],
 
     "@storybook/addon-backgrounds": ["@storybook/addon-backgrounds@8.6.14", "", { "dependencies": { "@storybook/global": "^5.0.0", "memoizerific": "^1.11.3", "ts-dedent": "^2.0.0" }, "peerDependencies": { "storybook": "^8.6.14" } }, "sha512-l9xS8qWe5n4tvMwth09QxH2PmJbCctEvBAc1tjjRasAfrd69f7/uFK4WhwJAstzBTNgTc8VXI4w8ZR97i1sFbg=="],
@@ -1096,6 +1106,8 @@
 
     "react-error-boundary": ["react-error-boundary@6.0.0", "", { "dependencies": { "@babel/runtime": "^7.12.5" }, "peerDependencies": { "react": ">=16.13.1" } }, "sha512-gdlJjD7NWr0IfkPlaREN2d9uUZUlksrfOx7SX62VRerwXbMY6ftGCIZua1VG1aXFNOimhISsTq+Owp725b9SiA=="],
 
+    "react-hook-form": ["react-hook-form@7.56.4", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-Rob7Ftz2vyZ/ZGsQZPaRdIefkgOSrQSPXfqBdvOPwJfoGnjwRJUs7EM7Kc1mcoDv3NOtqBzPGbcMB8CGn9CKgw=="],
+
     "react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
 
     "react-refresh": ["react-refresh@0.17.0", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],
@@ -1298,6 +1310,8 @@
 
     "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
 
+    "zod": ["zod@3.25.17", "", {}, "sha512-8hQzQ/kMOIFbwOgPrm9Sf9rtFHpFUMy4HvN0yEB0spw14aYi0uT5xG5CE2DB9cd51GWNsz+DNO7se1kztHMKnw=="],
+
     "zustand": ["zustand@5.0.4", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-39VFTN5InDtMd28ZhjLyuTnlytDr9HfwO512Ai4I8ZABCoyAj4F1+sr7sD1jP/+p7k77Iko0Pb5NhgBFDCX0kQ=="],
 
     "@babel/traverse/globals": ["globals@11.12.0", "", {}, "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="],

package.json

@@ -13,7 +13,8 @@
     "dev": "turbo run dev",
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
-    "check": "turbo run check"
+    "check": "turbo run check",
+    "relay": "turbo run relay"
   },
   "devDependencies": {
     "turbo": "^2.5.3"

packages/hooks/src/index.ts

@@ -1 +1,2 @@
 export { usePageTitle } from "./usePageTitle";
+export { useToggle } from "./useToggle";

packages/hooks/src/useToggle.tsx

@@ -0,0 +1,7 @@
+import { useCallback, useState } from "react";
+
+export function useToggle(initialValue: boolean) {
+    const [value, setValue] = useState(initialValue);
+    const toggle = useCallback(() => setValue((prev) => !prev), []);
+    return [value, toggle] as const;
+}

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) {
+export function Input({ invalid, ...props }: Props) {
-    return <input className={input(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> & {
+type Props = ComponentProps<typeof RadixLabel>;
-    htmlFor?: string;
-};
 
 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;
+        onValueChange?: (s: string) => void;
-        empty?: boolean;
+        variant?: "default" | "editor" | "dashed";
-    } & Omit<ComponentProps<typeof Trigger>, "onChange">
+        invalid?: boolean;
+        disabled?: boolean;
+    } & Omit<ComponentProps<typeof Root>, "onChange">
 >;
 
 const select = tv({
     slots: {
-        trigger: input({
+        trigger:
-            className:
+            "flex justify-between items-center data-placeholder:text-txt-tertiary whitespace-nowrap cursor-pointer",
-                "flex justify-between items-center gap-4 data-placeholder:text-txt-tertiary w-full whitespace-nowrap",
-        }),
         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,
+    onValueChange,
-    empty,
+    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}>
+        <Root onValueChange={onValueChange} value={value}>
-            <Trigger className={trigger({ ...props, empty })}>
+            <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) {
+export function Dialog({
-    const onOpenChange = (open: boolean) => {
+    trigger,
-        if (!open) {
+    title,
-            onClose();
+    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" />
+                <Overlay
-                <div className="fixed grid place-items-center inset-0 z-50">
+                    className={clsx(
-                    <Content
+                        "fixed inset-0 z-50 bg-dialog/40",
-                        aria-describedby={undefined}
+                        `duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,
-                        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">
+                <Content
-                            <Title className="text-sm font-medium">
+                    aria-describedby={undefined}
-                                {title}
+                    className={clsx(
-                            </Title>
+                        "fixed inset-0 m-auto z-50 w-full h-max bg-level-2 rounded-2xl max-w-5xl w-[95%]",
-                            <Close asChild>
+                        `duration-200
-                                <Button
+                            data-[state=open]:animate-in data-[state=closed]:animate-out
-                                    variant="tertiary"
+                            data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
-                                    icon={IconCrossLargeX}
+                            data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
-                                />
+                            data-[state=closed]:slide-out-to-top-5
-                            </Close>
+                            data-[state=open]:slide-in-from-top-5`,
-                        </div>
+                    )}
-                        {children}
+                >
-                    </Content>
+                    <div className="flex justify-between items-center p-3 border-b border-b-border-low">
-                </div>
+                        <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;
+    error?: string;
-    placeholder?: string;
+    onValueChange?: (s: string) => void;
-    type?: string;
+    type: T;
-    required?: boolean;
+} & 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({
+export function Field(props: Props) {
-    label,
+    const showHelp = props.help && !props.error;
-    help,
-    name,
-    placeholder,
-    type,
-    required,
-}: Props) {
-    const Comp = type === "textarea" ? Textarea : Input;
     return (
         <div className={baseClass()}>
-            {label && (
+            {props.label && (
-                <Label htmlFor={name} className={labelClass()}>
+                <Label htmlFor={props.name} className={labelClass()}>
-                    {label}
+                    {props.label}
                 </Label>
             )}
-            <Comp
+            {getInput(props)}
-                name={name}
+            {showHelp && <span className={helpClass()}>{props.help}</span>}
-                id={name}
+            {props.error && (
-                placeholder={placeholder}
+                <span className="text-txt-danger text-sm mt-1">
-                type={type}
+                    {props.error}
-                required={required}
+                </span>
-            />
+            )}
-            {help && <span className={helpClass()}>{help}</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 {

turbo.json

@@ -16,6 +16,9 @@
     "dev": {
       "cache": false,
       "persistent": true
+    },
+    "relay": {
+      "cache": false
     }
   }
 }