@fuma-content/studio 1.0.0 → 1.0.2

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

@@ -1,206 +0,0 @@
-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

@@ -1,167 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,102 +0,0 @@
-"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

@@ -1,13 +0,0 @@
-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>
-  );
-}