@tulip-systems/create-app 0.12.3 → 0.13.0

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;

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

@@ -0,0 +1,177 @@
+"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,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@tulip-systems/ui/react-hook-form";
+import { BlocksIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { quotationTotalsBlock } from "./config";
+
+export type QuotationTotalsCreateValues = z.input<typeof quotationTotalsBlock.schema>;
+
+const totalsCreateFormSchema = z.object({
+  currency: quotationTotalsBlock.schema.shape.currency,
+  itemLabel: quotationTotalsBlock.schema.shape.items.element.shape.label,
+  itemAmount: quotationTotalsBlock.schema.shape.items.element.shape.amount,
+});
+
+type QuotationTotalsFormValues = z.input<typeof totalsCreateFormSchema>;
+
+type QuotationTotalsCreateBlockInput = {
+  slug: typeof quotationTotalsBlock.slug;
+  data: QuotationTotalsCreateValues;
+};
+
+type QuotationTotalsCreateBlockProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = BlockCreateComponentProps<
+  QuotationTotalsCreateBlockInput,
+  TData,
+  TError,
+  TVariables,
+  TOnMutateResult
+>;
+
+export function QuotationTotalsCreateBlock<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+}: QuotationTotalsCreateBlockProps<TData, TError, TVariables, TOnMutateResult>) {
+  const form = useForm<QuotationTotalsFormValues>({
+    resolver: standardSchemaResolver(totalsCreateFormSchema),
+    defaultValues: {
+      currency: "EUR",
+      itemLabel: "Implementatie",
+      itemAmount: 0,
+    },
+  });
+
+  return (
+    <CreateBlock>
+      <CreateBlockTrigger>
+        <CreateBlockTriggerIcon>
+          <BlocksIcon />
+        </CreateBlockTriggerIcon>
+
+        <CreateBlockTriggerContent>
+          <CreateBlockTriggerTitle>{quotationTotalsBlock.label}</CreateBlockTriggerTitle>
+          <CreateBlockTriggerDescription>
+            {quotationTotalsBlock.description}
+          </CreateBlockTriggerDescription>
+        </CreateBlockTriggerContent>
+      </CreateBlockTrigger>
+
+      <Form {...form}>
+        <CreateBlockContent
+          className="sm:max-w-xl"
+          variables={(values: QuotationTotalsFormValues) =>
+            variables({
+              slug: quotationTotalsBlock.slug,
+              data: {
+                currency: values.currency,
+                items: [{ label: values.itemLabel, amount: values.itemAmount }],
+                total: values.itemAmount,
+              },
+            })
+          }
+          mutation={mutation}
+        >
+          <CreateBlockHeader>
+            <CreateBlockTitle>{quotationTotalsBlock.label} toevoegen</CreateBlockTitle>
+            <CreateBlockDescription>
+              Vul de verplichte velden in om het blok toe te voegen.
+            </CreateBlockDescription>
+          </CreateBlockHeader>
+
+          <CreateBlockFields>
+            <FormField
+              control={form.control}
+              name="currency"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Valuta</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid gap-4 md:grid-cols-2">
+              <FormField
+                control={form.control}
+                name="itemLabel"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Regel</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="itemAmount"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Bedrag</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        type="number"
+                        onChange={(event) => field.onChange(event.currentTarget.valueAsNumber || 0)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          </CreateBlockFields>
+
+          <CreateBlockFooter>
+            <CreateBlockCancel>Annuleren</CreateBlockCancel>
+            <CreateBlockSubmit>Blok toevoegen</CreateBlockSubmit>
+          </CreateBlockFooter>
+        </CreateBlockContent>
+      </Form>
+    </CreateBlock>
+  );
+}

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

@@ -0,0 +1,96 @@
+"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,
+  InlineNumberInput,
+  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 { quotationTotalsBlock } from "./config";
+
+const totalsMutation = orpc.quotationBlocks.update.mutationOptions({
+  meta: { invalidates: [orpc.quotationBlocks.key()] },
+});
+
+export function QuotationTotalsInlineBlock({
+  block,
+}: BlockComponentProps<typeof quotationTotalsBlock>) {
+  return (
+    <InlineBlockSortable id={block.id}>
+      <InlineBlock>
+        <InlineBlockHeader>
+          <InlineBlockDragHandle>
+            <GripIcon className="h-4 w-4" />
+            <span className="sr-only">Blok verplaatsen</span>
+          </InlineBlockDragHandle>
+          <InlineBlockTrigger>{quotationTotalsBlock.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>Valuta</InlineFieldLabel>
+            <InlineStringInput
+              initialValue={block.data.currency}
+              variables={(value) => ({ id: block.id, data: { currency: value ?? "EUR" } })}
+              mutation={totalsMutation}
+              strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().min(1) } }}
+            />
+            <InlineFieldError />
+          </InlineField>
+
+          <InlineField>
+            <InlineFieldLabel>Totaal</InlineFieldLabel>
+            <InlineNumberInput
+              initialValue={block.data.total}
+              variables={(value) => ({ id: block.id, data: { total: value ?? 0 } })}
+              mutation={totalsMutation}
+              strategy={{ mutate: { on: "blur" }, validate: { blur: z.number().min(0) } }}
+            />
+            <InlineFieldError />
+          </InlineField>
+
+          {block.data.items.slice(0, 2).map((item, index) => (
+            <InlineField key={item.label}>
+              <InlineFieldLabel>Regel {index + 1}</InlineFieldLabel>
+              <InlineStringInput
+                initialValue={`${item.label}: ${item.amount}`}
+                variables={(value) => ({
+                  id: block.id,
+                  data: {
+                    items: block.data.items.with(index, {
+                      ...item,
+                      label: value?.split(":")[0]?.trim() || item.label,
+                    }),
+                  },
+                })}
+                mutation={totalsMutation}
+                strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().min(1) } }}
+              />
+              <InlineFieldError />
+            </InlineField>
+          ))}
+        </InlineBlockContent>
+      </InlineBlock>
+    </InlineBlockSortable>
+  );
+}

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

@@ -0,0 +1,32 @@
+import type { BlockComponentProps } from "@tulip-systems/blocks";
+import type { quotationTotalsBlock } from "./config";
+
+function formatCurrency(value: number, currency: string) {
+  return new Intl.NumberFormat("nl-BE", { style: "currency", currency }).format(value);
+}
+
+export function QuotationTotalsPreview({
+  block,
+}: BlockComponentProps<typeof quotationTotalsBlock>) {
+  const { currency, items, total } = block.data;
+
+  return (
+    <section className="rounded-3xl border bg-card p-8 shadow-sm">
+      <h2 className="font-semibold text-2xl tracking-tight">Prijsopbouw</h2>
+
+      <div className="mt-6 divide-y rounded-2xl border">
+        {items.map((item) => (
+          <div key={item.label} className="flex items-center justify-between gap-4 p-4">
+            <span className="text-muted-foreground">{item.label}</span>
+            <span className="font-medium">{formatCurrency(item.amount, currency)}</span>
+          </div>
+        ))}
+
+        <div className="flex items-center justify-between gap-4 bg-muted/40 p-4 font-semibold text-lg">
+          <span>Totaal</span>
+          <span>{formatCurrency(total, currency)}</span>
+        </div>
+      </div>
+    </section>
+  );
+}