@fuma-content/studio 0.1.0

package/src/components/json-schema-editor/schema.tsx

@@ -0,0 +1,206 @@
+import { Ajv2020 } from "ajv/dist/2020";
+import { createContext, ReactNode, use, useMemo, useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { getDefaultValue } from "./get-default-values";
+import { mergeAllOf } from "./utils/merge-schema";
+import type { JSONSchema } from "json-schema-typed/draft-2020-12";
+
+export interface SchemaContextType extends EditorContextType {
+  /**
+   * client-side attached state of a specific field
+   */
+  fieldInfoMap: Map<string, FieldInfo>;
+  ajv: Ajv2020;
+}
+
+export interface EditorContextType {
+  schema: JSONSchema;
+
+  /**
+   * show write only fields
+   */
+  writeOnly: boolean;
+
+  /**
+   * show read only fields
+   */
+  readOnly: boolean;
+}
+
+type UnionField = "anyOf" | "oneOf";
+
+export interface FieldInfo {
+  selectedType?: string;
+  oneOf: number;
+
+  /**
+   * The actual field that represents union members.
+   */
+  unionField?: UnionField;
+
+  intersection?: {
+    merged: Exclude<JSONSchema, boolean>;
+  };
+}
+
+const SchemaContext = createContext<SchemaContextType | undefined>(undefined);
+export const anyFields = {
+  type: ["string", "number", "boolean", "array", "object"],
+  items: true,
+  additionalProperties: true,
+} satisfies JSONSchema;
+
+export function SchemaProvider({
+  schema,
+  readOnly,
+  writeOnly,
+  children,
+}: EditorContextType & { children: ReactNode }) {
+  const fieldInfoMap = useMemo(() => new Map<string, FieldInfo>(), []);
+  const ajv = useMemo(
+    () =>
+      new Ajv2020({
+        strict: false,
+        validateSchema: false,
+        validateFormats: false,
+        schemas: [schema],
+      }),
+    [schema],
+  );
+
+  return (
+    <SchemaContext
+      value={useMemo(
+        () => ({ schema, fieldInfoMap, ajv, readOnly, writeOnly }),
+        [schema, fieldInfoMap, ajv, readOnly, writeOnly],
+      )}
+    >
+      {children}
+    </SchemaContext>
+  );
+}
+
+export function useSchema(): SchemaContextType {
+  return use(SchemaContext)!;
+}
+
+/**
+ * A hook to store dynamic info of a field, such as selected schema of `oneOf`.
+ *
+ * @param fieldName - field name of form.
+ * @param schema - The JSON Schema to generate initial values.
+ * @param depth - The depth to avoid duplicated field name with same schema (e.g. nested `oneOf`).
+ */
+export function useFieldInfo(
+  fieldName: string,
+  schema: Exclude<JSONSchema, boolean>,
+  depth: number,
+): {
+  info: FieldInfo;
+  updateInfo: (value: Partial<FieldInfo>) => void;
+} {
+  const { fieldInfoMap, ajv } = use(SchemaContext)!;
+  const form = useFormContext();
+  const keyName = `${fieldName}:${depth}`;
+  const [info, setInfo] = useState<FieldInfo>(() => {
+    const value = form.getValues(fieldName as "body");
+    const initialInfo = fieldInfoMap.get(keyName);
+    if (initialInfo) return initialInfo;
+
+    const out: FieldInfo = {
+      oneOf: -1,
+    };
+    const union = getUnion(schema);
+    if (union) {
+      const [members, field] = union;
+
+      out.oneOf = members.findIndex((item) => ajv.validate(item, value));
+      if (out.oneOf === -1) out.oneOf = 0;
+      out.unionField = field;
+    }
+
+    if (Array.isArray(schema.type)) {
+      const types = schema.type;
+
+      out.selectedType =
+        types.find((type) => {
+          schema.type = type;
+          const match = ajv.validate(schema, value);
+          schema.type = types;
+
+          return match;
+        }) ?? types.at(0);
+    }
+
+    if (schema.allOf) {
+      const merged = mergeAllOf(schema);
+
+      if (typeof merged !== "boolean")
+        out.intersection = {
+          merged,
+        };
+    }
+
+    return out;
+  });
+
+  fieldInfoMap.set(keyName, info);
+
+  return {
+    info,
+    updateInfo(value) {
+      const updated = {
+        ...info,
+        ...value,
+      };
+
+      if (updated.oneOf === info.oneOf && updated.selectedType === info.selectedType) return;
+
+      setInfo(updated);
+
+      let valueSchema: JSONSchema = schema;
+      if (updated.unionField) {
+        valueSchema = schema[updated.unionField]![updated.oneOf];
+      } else if (updated.selectedType) {
+        valueSchema = { ...schema, type: updated.selectedType };
+      }
+
+      form.setValue(fieldName, getDefaultValue(valueSchema));
+    },
+  };
+}
+
+/**
+ * Resolve `$ref` in the schema, **not recursive**.
+ */
+export function useResolvedSchema(schema: JSONSchema): Exclude<JSONSchema, boolean> {
+  const { ajv } = use(SchemaContext)!;
+
+  return useMemo(() => fallbackAny(dereference(schema, { ajv })), [ajv, schema]);
+}
+
+export function fallbackAny(schema: JSONSchema): Exclude<JSONSchema, boolean> {
+  return typeof schema === "boolean" ? anyFields : schema;
+}
+
+function getUnion(
+  schema: Exclude<JSONSchema, boolean>,
+): [readonly JSONSchema[], UnionField] | undefined {
+  if (schema.anyOf) {
+    return [schema.anyOf, "anyOf"];
+  }
+
+  if (schema.oneOf) return [schema.oneOf, "oneOf"];
+}
+
+/**
+ * resolve refs (non-recursive)
+ */
+export function dereference(
+  schema: JSONSchema,
+  { ajv }: Pick<SchemaContextType, "ajv">,
+): JSONSchema {
+  if (typeof schema === "boolean") return schema;
+  if (schema.$ref) return ajv.getSchema(schema.$ref)?.schema ?? false;
+  return schema;
+}

package/src/components/json-schema-editor/utils/merge-schema.ts

@@ -0,0 +1,167 @@
+import type { JSONSchema } from "json-schema-typed/draft-2020-12";
+import { deepEqual } from "../../../lib/utils/deep-equal";
+
+/**
+ * Merge `allOf` object schema
+ */
+export function mergeAllOf(schema: JSONSchema): JSONSchema {
+  if (typeof schema === "boolean" || !schema.allOf) return schema;
+
+  const { allOf, ...rest } = schema;
+  let result: JSONSchema = rest;
+  for (const item of allOf) {
+    result = intersection(result, item);
+  }
+  return result;
+}
+
+export function intersection(a: JSONSchema, b: JSONSchema): JSONSchema {
+  a = mergeAllOf(a);
+  b = mergeAllOf(b);
+  if (typeof a === "boolean" && typeof b === "boolean") return a && b;
+  if (typeof a === "boolean") return a;
+  if (typeof b === "boolean") return b;
+
+  const result: JSONSchema = { ...a };
+  for (const _k in b) {
+    const key = _k as keyof typeof b;
+
+    switch (key) {
+      case "$id":
+      case "$comment":
+      case "description":
+      case "additionalItems":
+      case "examples":
+      case "allOf":
+      case "writeOnly":
+      case "readOnly":
+        // ignored
+        break;
+      case "title": {
+        const value = b[key];
+        if (value === undefined) break;
+        if (result[key]) {
+          result[key] = `${result[key]} & ${value}`;
+        } else {
+          result[key] = value;
+        }
+        break;
+      }
+      case "minItems":
+      case "minimum":
+      case "exclusiveMinimum":
+      case "minProperties":
+      case "minContains":
+      case "minLength": {
+        const value = b[key];
+        if (value === undefined) break;
+        result[key] = result[key] === undefined ? value : Math.max(result[key], value);
+        break;
+      }
+      case "maxContains":
+      case "maxItems":
+      case "maxLength":
+      case "maxProperties":
+      case "maximum":
+      case "exclusiveMaximum": {
+        const value = b[key];
+        if (value === undefined) break;
+        result[key] = result[key] === undefined ? value : Math.min(result[key], value);
+        break;
+      }
+      // intersection
+      case "enum":
+      case "anyOf":
+      case "oneOf": {
+        const value = b[key];
+        if (value === undefined) break;
+
+        result[key] = result[key] === undefined ? value : intersectArray(result[key], value);
+        break;
+      }
+      // require same
+      case "format":
+      case "const":
+      case "type": {
+        const value = b[key];
+        if (value === undefined) break;
+        result[key] ??= value;
+
+        if (!deepEqual(result[key], value)) return false;
+        break;
+      }
+      // add
+      case "required": {
+        const value = b[key];
+        if (value === undefined) break;
+        result[key] = [...(result[key] ?? []), ...value];
+        break;
+      }
+      case "properties":
+      case "patternProperties": {
+        const value = b[key];
+        if (value === undefined) break;
+
+        if (result[key] === undefined) {
+          result[key] = value;
+          break;
+        }
+
+        const out: Record<string, JSONSchema> = {};
+        const allProps = new Set<string>();
+        for (const k in result[key]) allProps.add(k);
+        for (const k in value) allProps.add(k);
+
+        for (const prop of allProps) {
+          const aProp = result[key][prop];
+          const bProp = value[prop];
+          if (aProp === undefined) {
+            out[prop] = bProp;
+          } else if (bProp === undefined) {
+            out[prop] = aProp;
+          } else {
+            out[prop] = intersection(aProp, bProp);
+          }
+        }
+
+        result[key] = out;
+        break;
+      }
+      case "additionalProperties":
+      case "contains":
+      case "items": {
+        const value = b[key];
+        if (value === undefined) break;
+
+        result[key] = result[key] === undefined ? value : intersection(result[key], value);
+        break;
+      }
+      case "not": {
+        const value = b[key];
+        if (value === undefined) break;
+
+        if (result[key] && value) {
+          result.not = { anyOf: [result[key], value] };
+        } else if (value) {
+          result.not = value;
+        }
+        break;
+      }
+      default:
+        result[key] = b[key];
+    }
+  }
+
+  return result;
+}
+
+function intersectArray<T>(a: readonly T[], b: readonly T[]): T[] {
+  const out = new Set<T>();
+  for (const item of a) {
+    if (b.includes(item)) out.add(item);
+  }
+  for (const item of b) {
+    if (a.includes(item)) out.add(item);
+  }
+  return Array.from(out);
+}

package/src/components/json-schema-editor/utils/schema-to-string.ts

@@ -0,0 +1,87 @@
+import type { JSONSchema } from "json-schema-typed/draft-2020-12";
+import { dereference, type SchemaContextType } from "../schema";
+
+export enum FormatFlags {
+  None = 0,
+  UseAlias = 1 << 0,
+}
+
+/**
+ * generate text representation of a schema, handle recursive refs.
+ */
+export function schemaToString(
+  value: JSONSchema,
+  ctx: SchemaContextType,
+  flags: FormatFlags = FormatFlags.None,
+): string {
+  function union(union: readonly JSONSchema[], sep: string, flags: FormatFlags) {
+    const members = new Set<string>();
+    let nullable = false;
+
+    for (const item of union) {
+      const result = run(item, flags | FormatFlags.UseAlias);
+
+      if (result === "null") {
+        nullable = true;
+      } else if (result !== "unknown") {
+        members.add(result);
+      }
+    }
+
+    const result = Array.from(members).join(sep);
+    return nullable ? `${result} | null` : result;
+  }
+
+  function run(schema: JSONSchema, flags: FormatFlags): string {
+    if (schema === true) return "any";
+    else if (schema === false) return "never";
+
+    if ((flags & FormatFlags.UseAlias) === FormatFlags.UseAlias) {
+      if (schema.title) return schema.title;
+
+      const ref = schema.$ref?.split("/");
+      if (ref && ref.length > 0) return ref[ref.length - 1];
+    } else if (schema.$ref) {
+      const out = dereference(schema, ctx);
+      if (typeof out !== "boolean") schema = out;
+    }
+
+    if (Array.isArray(schema.type)) {
+      return union(
+        schema.type.map((type) => ({
+          ...schema,
+          type,
+        })),
+        " | ",
+        flags,
+      );
+    }
+
+    if (schema.type === "array")
+      return `array<${schema.items ? run(schema.items, flags | FormatFlags.UseAlias) : "unknown"}>`;
+
+    const or = schema.oneOf ?? schema.anyOf;
+    if (schema.oneOf && schema.anyOf) {
+      return `(${union(schema.oneOf, " | ", flags)}) & (${union(schema.anyOf, " | ", flags)})`;
+    } else if (or) {
+      return union(or, " | ", flags);
+    }
+
+    if (schema.allOf) {
+      return union(schema.allOf, " & ", flags);
+    }
+
+    if (schema.not) return `not ${run(schema.not, flags)}`;
+    if (schema.type === "string" && schema.format === "binary") return "file";
+
+    if (schema.type) {
+      return Array.isArray(schema.type)
+        ? schema.type.filter((v) => v !== "null").join(" | ")
+        : (schema.type as string);
+    }
+
+    return "unknown";
+  }
+
+  return run(value, flags);
+}

package/src/components/nav-user.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import {
+  BellIcon,
+  CreditCardIcon,
+  LogOutIcon,
+  MoreVerticalIcon,
+  UserCircleIcon,
+} from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string;
+    email: string;
+    avatar: string;
+  };
+}) {
+  const { isMobile } = useSidebar();
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg grayscale">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-muted-foreground text-xs">{user.email}</span>
+              </div>
+              <MoreVerticalIcon className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-muted-foreground text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <UserCircleIcon />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCardIcon />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <BellIcon />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOutIcon />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/src/components/site-header.tsx

@@ -0,0 +1,13 @@
+import { Separator } from "@/components/ui/separator";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { ReactNode } from "react";
+
+export function SiteHeader({ children }: { children?: ReactNode }) {
+  return (
+    <header className="flex h-10 m-2 top-2 shrink-0 items-center gap-2 border rounded-lg sticky bg-card text-card-foreground z-30 px-3 shadow-md">
+      <SidebarTrigger className="-mx-2" />
+      <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
+      {children}
+    </header>
+  );
+}