@springmicro/forms 0.7.15 → 0.7.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springmicro/forms",
-  "version": "0.7.15",
+  "version": "0.7.16",
   "type": "module",
   "private": false,
   "publishConfig": {
@@ -20,16 +20,17 @@
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.20",
-    "@rjsf/core": "^5.10.0",
-    "@rjsf/utils": "^5.10.0",
-    "@rjsf/validator-ajv8": "^5.10.0",
-    "@springmicro/utils": "^0.7.15",
+    "@rjsf/core": "^6.2.5",
+    "@rjsf/shadcn": "^6.2.5",
+    "@rjsf/utils": "^6.2.5",
+    "@rjsf/validator-ajv8": "^6.2.5",
+    "@springmicro/utils": "^0.7.16",
     "lodash": "^4.17.21",
     "nanoid": "^5.0.7",
-    "react": "^18.2.0",
+    "react": "^19.2.4",
     "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^4.16.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.2.4",
     "react-select": "^5.7.4",
     "uuid": "^9.0.1"
   },
@@ -49,5 +50,5 @@
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.9.0"
   },
-  "gitHead": "999f4d500555ee2474404a1baa353945a82781db"
+  "gitHead": "3969208c879eb53f646849f05369b1ee2811f8ac"
 }

package/src/FormRenderer.tsx

@@ -0,0 +1,184 @@
+import React from "react";
+import Form from "@rjsf/shadcn";
+import validator from "@rjsf/validator-ajv8";
+import type { RJSFSchema, SubmitButtonProps } from "@rjsf/utils";
+import { getSubmitButtonOptions } from "@rjsf/utils";
+import type { FormProps, IChangeEvent } from "@rjsf/core";
+import { Button } from "./ui/button";
+import { Spinner } from "./ui/spinner";
+
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
+import { AlertTriangleIcon, CheckCircle2Icon } from "lucide-react";
+
+type FormResult = {
+  has_error: boolean;
+  detail: string;
+};
+
+type FormStateContextProps = {
+  isSubmitting: boolean;
+  formResult: FormResult | null;
+};
+
+const FormStateContext = React.createContext<FormStateContextProps>({
+  isSubmitting: false,
+  formResult: null,
+});
+
+const SubmissionProvider = ({
+  children,
+  isSubmitting,
+  formResult,
+}: React.PropsWithChildren<FormStateContextProps>) => {
+  return (
+    <FormStateContext.Provider value={{ isSubmitting, formResult }}>
+      {children}
+    </FormStateContext.Provider>
+  );
+};
+
+const useSubmission = () => {
+  return React.useContext(FormStateContext);
+};
+
+function FormAlert(formResult: FormResult) {
+  const classes = formResult.has_error
+    ? "mt-2 max-w-md border-red-200 bg-red-50 text-red-900"
+    : "mt-2 max-w-md border-green-200 bg-green-50 text-green-900";
+  return (
+    <Alert className={classes}>
+      {formResult.has_error ? <AlertTriangleIcon /> : <CheckCircle2Icon />}
+      <AlertTitle>{formResult.detail}</AlertTitle>
+    </Alert>
+  );
+}
+
+// https://rjsf-team.github.io/react-jsonschema-form/docs/advanced-customization/custom-templates/#submitbutton
+function SubmitButton(props: SubmitButtonProps) {
+  const { uiSchema } = props;
+  const { norender } = getSubmitButtonOptions(uiSchema);
+  const { isSubmitting, formResult } = useSubmission();
+  if (norender) {
+    return null;
+  }
+  if (formResult !== null) {
+    return <FormAlert {...formResult} />;
+  }
+  return (
+    <Button
+      type="submit"
+      className="mt-2 cursor-pointer"
+      disabled={isSubmitting || formResult !== null}
+    >
+      {isSubmitting ? (
+        <>
+          <Spinner /> Submitting...
+        </>
+      ) : (
+        "Submit"
+      )}
+    </Button>
+  );
+}
+
+const requestAQuote_HARDCODED = {
+  schema: {
+    $id: "94648a2a-7561-4082-b4d9-31e7a71bceb4",
+    type: "object",
+    properties: {
+      name: { type: "string", maxLength: 70, title: "Name" },
+      email: {
+        type: "string",
+        format: "email",
+        maxLength: 255,
+        title: "Email",
+      },
+      message: { type: "string", title: "Message" },
+      phone: { type: "string" },
+    },
+    required: ["name", "email", "message"],
+  },
+  uiSchema: {
+    name: { "ui:autofocus": true },
+    email: {},
+    message: { "ui:options": { widget: "textarea", rows: 3 } },
+    phone: { "ui:widget": "hidden" },
+  },
+  formData: {},
+};
+
+export function FormRenderer({
+  id,
+  test = false,
+}: {
+  id: string;
+  test?: boolean;
+}) {
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [formResult, setFormResult] = React.useState<FormResult | null>(null);
+  const [form, setForm] = React.useState<
+    Omit<FormProps<any, RJSFSchema, any>, "validator"> | undefined
+  >();
+
+  React.useEffect(() => {
+    if (id === null) return;
+    if (test) {
+      // @ts-ignore
+      setForm(requestAQuote_HARDCODED);
+      return;
+    }
+
+    fetch(`/api/forms/forms/${id}`).then((res) => {
+      res.json().then((data) => {
+        data.schema = data.jsonSchema;
+        delete data.jsonSchema;
+        setForm(data);
+      });
+    });
+  }, [test, id]);
+
+  const onSubmit = (
+    data: IChangeEvent<any, RJSFSchema, any>,
+    event: React.FormEvent<any>,
+  ) => {
+    setIsSubmitting(true);
+    fetch(`/api/forms/submit/${id}`, {
+      headers: {
+        "content-type": "application/json",
+      },
+      method: "POST",
+      body: JSON.stringify({ data: data.formData }),
+    })
+      .then((res) => {
+        setIsSubmitting(false);
+        // console.log(res);
+        res.json().then((data) => [
+          setFormResult({
+            has_error: !res.ok,
+            detail: data.detail,
+          }),
+        ]);
+      })
+      .catch((err) => {
+        setIsSubmitting(false);
+        // console.error(err);
+        setFormResult({
+          has_error: true,
+          detail: err,
+        });
+      });
+  };
+
+  if (id === null) return <>No form selected.</>;
+  else if (form === undefined) return <></>;
+  return (
+    <SubmissionProvider isSubmitting={isSubmitting} formResult={formResult}>
+      <Form
+        {...form}
+        validator={validator}
+        onSubmit={onSubmit}
+        templates={{ ButtonTemplates: { SubmitButton } }}
+      />
+    </SubmissionProvider>
+  );
+}

package/src/index.tsx

@@ -6,6 +6,7 @@ import type { IChangeEvent } from "@rjsf/core";
 import type { RJSFSchema } from "@rjsf/utils";
 import validator from "@rjsf/validator-ajv8";
 import { emailOnlySG, emailOnlySGJSON } from "@springmicro/utils/forms";
+import { FormRenderer } from "./FormRenderer";
 
 const rjsfDaisyUiTheme: ThemeProps = {
   fields,
@@ -23,4 +24,5 @@ export {
   BaseForm,
   emailOnlySG,
   emailOnlySGJSON,
+  FormRenderer,
 };

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/src/ui/button.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/src/ui/spinner.tsx

@@ -0,0 +1,16 @@
+import { Loader2Icon } from "lucide-react";
+
+import { cn } from "../lib/utils";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };