crepes-demo/lib/catalog.ts

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react";
import { z } from "zod";

export const catalog = defineCatalog(schema, {
  components: {
    RecipeHeader: {
      props: z.object({
        title: z.string(),
        chef: z.string(),
        origin: z.string(),
        prepTime: z.string(),
        servings: z.number(),
      }),
      description: "Header with recipe title, chef name, origin, and key info",
    },
    ChefInfo: {
      props: z.object({
        name: z.string(),
        bio: z.string(),
        sourceUrl: z.string(),
        imageUrl: z.string().optional(),
      }),
      description: "Chef information card with bio and source link",
    },
    IngredientList: {
      props: z.object({
        title: z.string(),
        ingredients: z.array(
          z.object({
            name: z.string(),
            quantity: z.string(),
          })
        ),
      }),
      description: "List of ingredients with quantities",
    },
    InstructionSteps: {
      props: z.object({
        steps: z.array(
          z.object({
            number: z.number(),
            instruction: z.string(),
          })
        ),
      }),
      description: "Step-by-step cooking instructions",
    },
    TipCard: {
      props: z.object({
        tip: z.string(),
        author: z.string(),
      }),
      description: "Chef's tip or pro advice",
    },
    RecipeCard: {
      props: z.object({
        title: z.string(),
        description: z.string(),
        imageUrl: z.string().optional(),
      }),
      description: "Card container for a recipe",
    },
  },
  actions: {},
});

export type Catalog = typeof catalog;