@tulip-systems/create-app 0.12.3 → 0.12.4

package/dist/templates/code/src/app/admin/quotations/_blocks/render.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import type { InferBlockComponents, InferBlockCreateComponents } from "@tulip-systems/blocks";
+import { RenderBlocks, RenderCreateBlocks, SortableBlocks } from "@tulip-systems/blocks/client";
+import { Button } from "@tulip-systems/ui/button";
+import { cn } from "@tulip-systems/ui/cn";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@tulip-systems/ui/dialog";
+import { toast } from "@tulip-systems/ui/sonner";
+import { type CSSProperties, useState } from "react";
+import { Icons } from "@/components/icons";
+import { fontNeueHaas } from "@/lib/utils/fonts";
+import { orpc } from "@/server/router/client";
+import { QuotationHeroCreateBlock } from "./hero/create";
+import { QuotationHeroInlineBlock } from "./hero/inline";
+import { QuotationHeroPreview } from "./hero/preview";
+import { quotationBlocks } from "./registry";
+import { QuotationSummaryCreateBlock } from "./summary/create";
+import { QuotationSummaryInlineBlock } from "./summary/inline";
+import { QuotationSummaryPreview } from "./summary/preview";
+import { QuotationTotalsCreateBlock } from "./totals/create";
+import { QuotationTotalsInlineBlock } from "./totals/inline";
+import { QuotationTotalsPreview } from "./totals/preview";
+
+const quotationInlineBlockComponents = {
+  hero: QuotationHeroInlineBlock,
+  summary: QuotationSummaryInlineBlock,
+  totals: QuotationTotalsInlineBlock,
+} satisfies InferBlockComponents<typeof quotationBlocks>;
+
+const quotationPreviewComponents = {
+  hero: QuotationHeroPreview,
+  summary: QuotationSummaryPreview,
+  totals: QuotationTotalsPreview,
+} satisfies InferBlockComponents<typeof quotationBlocks>;
+
+const quotationCreateBlockComponents = {
+  hero: QuotationHeroCreateBlock,
+  summary: QuotationSummaryCreateBlock,
+  totals: QuotationTotalsCreateBlock,
+} satisfies InferBlockCreateComponents<typeof quotationBlocks>;
+
+/**
+ * Renders the quotation inline blocks by fetching the block data and rendering them using the appropriate components.
+ *
+ * @remarks
+ * This function uses the `useSuspenseQuery` hook to fetch the block data for a specific quotation (with id "quotation-demo").
+ * It then renders the blocks using the `RenderBlocks` component, passing in the fetched data and the corresponding inline block components for each block type.
+ */
+export function RenderQuotationInlineBlocks({ quotationId }: { quotationId: string }) {
+  const blocksQueryOptions = orpc.quotationBlocks.list.queryOptions({ input: { quotationId } });
+  const { data } = useSuspenseQuery(blocksQueryOptions);
+
+  return (
+    <SortableBlocks
+      data={data}
+      variables={({ activeBlock, toIndex }) => ({
+        quotationId,
+        id: activeBlock.id,
+        toIndex,
+      })}
+      mutation={orpc.quotationBlocks.move.mutationOptions({
+        meta: { invalidates: [orpc.quotationBlocks.key()] },
+      })}
+      queryKey={blocksQueryOptions.queryKey}
+    >
+      <RenderBlocks data={data} components={quotationInlineBlockComponents} />
+    </SortableBlocks>
+  );
+}
+
+/**
+ * Renders a dialog for creating a new block for a specific quotation.
+ *
+ * @remarks
+ * This function uses the `Dialog` component to render a modal dialog that allows the user to select the type of block they want to create for the specified quotation.
+ * It provides options for creating hero, summary, and totals blocks, and handles the creation process using the `orpc.quotationBlocks.create` mutation.
+ *
+ * @param quotationId - The ID of the quotation for which a new block is being created.
+ */
+type CreateQuotationBlockCommandProps = {
+  quotationId: string;
+};
+
+export function CreateQuotationBlock({ quotationId }: CreateQuotationBlockCommandProps) {
+  const [open, setOpen] = useState(false);
+
+  const createBlockMutation = orpc.quotationBlocks.create.mutationOptions({
+    meta: { invalidates: [orpc.quotationBlocks.key()] },
+    onSuccess: () => {
+      toast.success("Blok succesvol toegevoegd");
+      setOpen(false);
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" className="h-10">
+          <Icons.add className="size-4" />
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Blok toevoegen</DialogTitle>
+          <DialogDescription>
+            Kies het type blok dat je aan de offerte wilt toevoegen.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-2 py-4">
+          <RenderCreateBlocks
+            registry={quotationBlocks}
+            components={quotationCreateBlockComponents}
+            variables={(block) => ({ block, quotationId })}
+            mutation={createBlockMutation}
+          />
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="ghost" className="w-full">
+              Annuleren
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/**
+ * Renders the quotation preview by fetching the block data and rendering them using the appropriate preview components.
+ *
+ * @remarks
+ * This function uses the `useSuspenseQuery` hook to fetch the block data for a specific quotation (with id "quotation-demo").
+ * It then renders the blocks using the `RenderBlocks` component, passing in the fetched data and the corresponding preview components for each block type.
+ */
+export function RenderQuotationPreview({ quotationId }: { quotationId: string }) {
+  const { data } = useSuspenseQuery(
+    orpc.quotationBlocks.list.queryOptions({ input: { quotationId } }),
+  );
+
+  return (
+    <main
+      className={cn(
+        fontNeueHaas.variable,
+        "min-h-svh bg-background font-sans text-foreground",
+      )}
+      style={
+        {
+          "--background": "oklch(10.396% 0.02936 272.582)",
+          "--foreground": "oklch(92.021% 0.02815 62.204)",
+          "--primary": "oklch(62.793% 0.25768 29.223)",
+          "--primary-foreground": "oklch(92.021% 0.02815 62.204)",
+          "--secondary": "oklch(27.55% 0.02031 293.331)",
+          "--secondary-foreground": "oklch(92.021% 0.02815 62.204)",
+          "--muted": "oklch(54.214% 0.02484 291.243)",
+          "--muted-foreground": "oklch(92.021% 0.02815 62.204)",
+          "--accent": "oklch(62.793% 0.25768 29.223)",
+          "--accent-foreground": "oklch(92.021% 0.02815 62.204)",
+          "--destructive": "oklch(62.793% 0.25768 29.223)",
+          "--destructive-foreground": "oklch(92.021% 0.02815 62.204)",
+          "--card": "oklch(27.55% 0.02031 293.331)",
+          "--card-foreground": "oklch(92.021% 0.02815 62.204)",
+          "--popover": "oklch(100% 0.00011 271.152)",
+          "--popover-foreground": "oklch(14.479% 0.00002 271.152)",
+          "--border": "oklch(11.786% 0.03271 343.321)",
+          "--input": "oklch(11.786% 0.03271 343.321)",
+          "--ring": "oklch(62.793% 0.25768 29.223)",
+          "--radius": "0.5rem",
+          "--page-spacing": "7vw",
+          "--page-spacing-xl": "20vw",
+        } as CSSProperties
+      }
+    >
+      <RenderBlocks data={data} components={quotationPreviewComponents} />
+    </main>
+  );
+}

package/dist/templates/code/src/app/admin/quotations/_blocks/styles.ts

@@ -0,0 +1,24 @@
+import { cva } from "class-variance-authority";
+
+/**
+ * Typography scale.
+ *
+ * Font-family: Neue Haas Grotesk Display Pro (de app-sans, via `font-sans`).
+ *
+ * Responsive: mobile/kleine schermen (< md, 768px) krijgen een kleinere basis,
+ * `md:` herstelt de desktopgrootte. Titels schalen sterker af dan body-tekst,
+ * zodat kleine tekst niet onleesbaar wordt.
+ */
+export const typographyVariants = cva("whitespace-pre-line font-sans text-foreground", {
+  variants: {
+    variant: {
+      "title-large": "text-6xl md:text-8xl font-[450] leading-none", // 72px → 100px (−25%) / Roman 55 (Figma "500" = afgerond 450) / 100%
+      "title-semi-large": "text-5xl md:text-6xl font-[450] leading-none", // 48px → 60px (−20%) / Roman 55 / 100%
+      "title-medium": "text-3xl md:text-4xl font-[450] leading-normal", // 30px → 40px (−17%) / Roman 55 / normal
+      "body-large": "text-2xl md:text-3xl font-normal leading-[1.2]", // 26px → 30px (−13%) / 400 / 120%
+      "body-medium": "text-xl md:text-2xl font-normal leading-[1.2]", // 22px → 25px (−8%) / 400 / 120%
+      "body-small": "text-lg md:text-xl font-normal leading-[1.2]", // 18px → 20px (−10%) / 400 / 120%
+      button: "text-base md:text-lg font-normal leading-[1.2]", // 16px → 18px (−11%) / 400 / 120%
+    },
+  },
+});

package/dist/templates/code/src/app/admin/quotations/_blocks/summary/config.ts

@@ -0,0 +1,13 @@
+import type { BlockDefinition } from "@tulip-systems/blocks";
+import { z } from "zod";
+
+export const quotationSummaryBlock = {
+  slug: "summary",
+  label: "Summary",
+  description: "Short commercial summary for the quotation.",
+  schema: z.object({
+    heading: z.string().min(1),
+    body: z.string().min(1),
+    highlights: z.array(z.string().min(1)),
+  }),
+} as const satisfies BlockDefinition;

package/dist/templates/code/src/app/admin/quotations/_blocks/summary/create.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import type { DefaultError } from "@tanstack/react-query";
+import type { BlockCreateComponentProps } from "@tulip-systems/blocks";
+import {
+  CreateBlock,
+  CreateBlockCancel,
+  CreateBlockContent,
+  CreateBlockDescription,
+  CreateBlockFields,
+  CreateBlockFooter,
+  CreateBlockHeader,
+  CreateBlockSubmit,
+  CreateBlockTitle,
+  CreateBlockTrigger,
+  CreateBlockTriggerContent,
+  CreateBlockTriggerDescription,
+  CreateBlockTriggerIcon,
+  CreateBlockTriggerTitle,
+} from "@tulip-systems/blocks/client";
+import { Input } from "@tulip-systems/ui/input";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@tulip-systems/ui/react-hook-form";
+import { Textarea } from "@tulip-systems/ui/textarea";
+import { BlocksIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import type { z } from "zod";
+import { quotationSummaryBlock } from "./config";
+
+export type QuotationSummaryCreateValues = z.input<typeof quotationSummaryBlock.schema>;
+
+type QuotationSummaryFormValues = Omit<QuotationSummaryCreateValues, "highlights"> & {
+  highlights: string;
+};
+
+type QuotationSummaryCreateBlockInput = {
+  slug: typeof quotationSummaryBlock.slug;
+  data: QuotationSummaryCreateValues;
+};
+
+type QuotationSummaryCreateBlockProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = BlockCreateComponentProps<
+  QuotationSummaryCreateBlockInput,
+  TData,
+  TError,
+  TVariables,
+  TOnMutateResult
+>;
+
+export function QuotationSummaryCreateBlock<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+}: QuotationSummaryCreateBlockProps<TData, TError, TVariables, TOnMutateResult>) {
+  const form = useForm<QuotationSummaryFormValues>({
+    resolver: standardSchemaResolver(
+      quotationSummaryBlock.schema.extend({ highlights: quotationSummaryBlock.schema.shape.body }),
+    ),
+    defaultValues: {
+      heading: "Heldere scope, snelle oplevering",
+      body: "Beschrijf hier kort de waarde en scope van deze offerte.",
+      highlights: "Vaste opleverdatum, Duidelijke scope, Transparante prijs",
+    },
+  });
+
+  return (
+    <CreateBlock>
+      <CreateBlockTrigger>
+        <CreateBlockTriggerIcon>
+          <BlocksIcon />
+        </CreateBlockTriggerIcon>
+
+        <CreateBlockTriggerContent>
+          <CreateBlockTriggerTitle>{quotationSummaryBlock.label}</CreateBlockTriggerTitle>
+          <CreateBlockTriggerDescription>
+            {quotationSummaryBlock.description}
+          </CreateBlockTriggerDescription>
+        </CreateBlockTriggerContent>
+      </CreateBlockTrigger>
+
+      <Form {...form}>
+        <CreateBlockContent
+          className="sm:max-w-xl"
+          variables={(values: QuotationSummaryFormValues) =>
+            variables({
+              slug: quotationSummaryBlock.slug,
+              data: {
+                heading: values.heading,
+                body: values.body,
+                highlights: values.highlights
+                  .split(",")
+                  .map((item) => item.trim())
+                  .filter(Boolean),
+              },
+            })
+          }
+          mutation={mutation}
+        >
+          <CreateBlockHeader>
+            <CreateBlockTitle>{quotationSummaryBlock.label} toevoegen</CreateBlockTitle>
+            <CreateBlockDescription>
+              Vul de verplichte velden in om het blok toe te voegen.
+            </CreateBlockDescription>
+          </CreateBlockHeader>
+
+          <CreateBlockFields>
+            <FormField
+              control={form.control}
+              name="heading"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Kop</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="body"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Beschrijving</FormLabel>
+                  <FormControl>
+                    <Textarea {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="highlights"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Highlights</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormDescription>Komma-gescheiden lijst.</FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CreateBlockFields>
+
+          <CreateBlockFooter>
+            <CreateBlockCancel>Annuleren</CreateBlockCancel>
+            <CreateBlockSubmit>Blok toevoegen</CreateBlockSubmit>
+          </CreateBlockFooter>
+        </CreateBlockContent>
+      </Form>
+    </CreateBlock>
+  );
+}

package/dist/templates/code/src/app/admin/quotations/_blocks/summary/inline.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import type { BlockComponentProps } from "@tulip-systems/blocks";
+import {
+  InlineBlock,
+  InlineBlockContent,
+  InlineBlockDragHandle,
+  InlineBlockHeader,
+  InlineBlockSortable,
+  InlineBlockTrigger,
+} from "@tulip-systems/blocks/client";
+import { DropdownCommandMenu } from "@tulip-systems/commands/client";
+import {
+  InlineField,
+  InlineFieldError,
+  InlineFieldLabel,
+  InlineStringInput,
+} from "@tulip-systems/inline/client";
+import { GripIcon } from "lucide-react";
+import { z } from "zod";
+import { orpc } from "@/server/router/client";
+import { quotationInlineBlockCommands } from "../commands";
+import { quotationSummaryBlock } from "./config";
+
+const summaryMutation = orpc.quotationBlocks.update.mutationOptions({
+  meta: { invalidates: [orpc.quotationBlocks.key()] },
+});
+
+export function QuotationSummaryInlineBlock({
+  block,
+}: BlockComponentProps<typeof quotationSummaryBlock>) {
+  return (
+    <InlineBlockSortable id={block.id}>
+      <InlineBlock>
+        <InlineBlockHeader>
+          <InlineBlockDragHandle>
+            <GripIcon className="h-4 w-4" />
+            <span className="sr-only">Blok verplaatsen</span>
+          </InlineBlockDragHandle>
+          <InlineBlockTrigger>{quotationSummaryBlock.label}</InlineBlockTrigger>
+          <DropdownCommandMenu
+            data={{ id: block.id }}
+            commands={quotationInlineBlockCommands}
+            className="ml-2 size-7"
+          />
+        </InlineBlockHeader>
+
+        <InlineBlockContent className="grid gap-4 md:grid-cols-2">
+          <InlineField>
+            <InlineFieldLabel>Kop</InlineFieldLabel>
+            <InlineStringInput
+              initialValue={block.data.heading}
+              variables={(value) => ({ id: block.id, data: { heading: value ?? "" } })}
+              mutation={summaryMutation}
+              strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().min(1) } }}
+            />
+            <InlineFieldError />
+          </InlineField>
+
+          <InlineField className="md:col-span-2">
+            <InlineFieldLabel>Beschrijving</InlineFieldLabel>
+            <InlineStringInput
+              initialValue={block.data.body}
+              variables={(value) => ({ id: block.id, data: { body: value ?? "" } })}
+              mutation={summaryMutation}
+              strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().min(1) } }}
+            />
+            <InlineFieldError />
+          </InlineField>
+
+          <InlineField className="md:col-span-2">
+            <InlineFieldLabel>Highlights</InlineFieldLabel>
+            <InlineStringInput
+              initialValue={block.data.highlights.join(", ")}
+              variables={(value) => ({
+                id: block.id,
+                data: {
+                  highlights: (value ?? "")
+                    .split(",")
+                    .map((item) => item.trim())
+                    .filter(Boolean),
+                },
+              })}
+              mutation={summaryMutation}
+              strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().min(1) } }}
+            />
+            <InlineFieldError />
+          </InlineField>
+        </InlineBlockContent>
+      </InlineBlock>
+    </InlineBlockSortable>
+  );
+}

package/dist/templates/code/src/app/admin/quotations/_blocks/summary/preview.tsx

@@ -0,0 +1,25 @@
+import type { BlockComponentProps } from "@tulip-systems/blocks";
+import type { quotationSummaryBlock } from "./config";
+
+export function QuotationSummaryPreview({
+  block,
+}: BlockComponentProps<typeof quotationSummaryBlock>) {
+  const { body, heading, highlights } = block.data;
+
+  return (
+    <section className="grid gap-6 rounded-3xl border bg-background p-8 md:grid-cols-[1fr_18rem]">
+      <div>
+        <h2 className="font-semibold text-2xl tracking-tight">{heading}</h2>
+        <p className="mt-4 text-muted-foreground leading-7">{body}</p>
+      </div>
+
+      <ul className="space-y-3">
+        {highlights.map((highlight) => (
+          <li key={highlight} className="rounded-2xl bg-muted/50 px-4 py-3 text-sm">
+            {highlight}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

package/dist/templates/code/src/app/admin/quotations/_blocks/totals/config.ts

@@ -0,0 +1,18 @@
+import type { BlockDefinition } from "@tulip-systems/blocks";
+import { z } from "zod";
+
+export const quotationTotalsBlock = {
+  slug: "totals",
+  label: "Totals",
+  description: "Line totals and final quotation amount.",
+  schema: z.object({
+    currency: z.string().min(1),
+    items: z.array(
+      z.object({
+        label: z.string().min(1),
+        amount: z.number(),
+      }),
+    ),
+    total: z.number(),
+  }),
+} as const satisfies BlockDefinition;