@tulip-systems/create-app 0.12.3 → 0.12.4

package/dist/templates/basic/package.json

@@ -25,11 +25,11 @@
     "@orpc/tanstack-query": "^1.14.15",
     "@tailwindcss/typography": "^0.5.20",
     "@tanstack/react-query": "^5.101.4",
-    "@tulip-systems/app": "0.12.3",
-    "@tulip-systems/auth": "0.12.3",
-    "@tulip-systems/commands": "0.12.3",
-    "@tulip-systems/core": "0.12.3",
-    "@tulip-systems/ui": "0.12.3",
+    "@tulip-systems/app": "0.12.4",
+    "@tulip-systems/auth": "0.12.4",
+    "@tulip-systems/commands": "0.12.4",
+    "@tulip-systems/core": "0.12.4",
+    "@tulip-systems/ui": "0.12.4",
     "@vercel/functions": "^3.9.0",
     "better-auth": "^1.6.26",
     "class-variance-authority": "^0.7.1",

package/dist/templates/code/package.json

@@ -30,6 +30,7 @@
     "@dnd-kit/helpers": "^0.5.0",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/react": "^0.5.0",
+    "@dnd-kit/sortable": "^10.0.0",
     "@hookform/resolvers": "^5.7.1",
     "@js-temporal/polyfill": "^0.5.1",
     "@modelcontextprotocol/server": "^2.0.0",
@@ -66,20 +67,21 @@
     "@tiptap/extension-text-style": "^3.29.2",
     "@tiptap/extension-underline": "^3.29.2",
     "@tiptap/extensions": "^3.29.2",
-    "@tulip-systems/ai": "0.12.3",
-    "@tulip-systems/app": "0.12.3",
-    "@tulip-systems/auth": "0.12.3",
-    "@tulip-systems/commands": "0.12.3",
-    "@tulip-systems/core": "0.12.3",
-    "@tulip-systems/data-tables": "0.12.3",
-    "@tulip-systems/drive": "0.12.3",
-    "@tulip-systems/drive-google": "0.12.3",
-    "@tulip-systems/editor": "0.12.3",
-    "@tulip-systems/editor-storage": "0.12.3",
-    "@tulip-systems/inline": "0.12.3",
-    "@tulip-systems/query": "0.12.3",
-    "@tulip-systems/storage": "0.12.3",
-    "@tulip-systems/ui": "0.12.3",
+    "@tulip-systems/ai": "0.12.4",
+    "@tulip-systems/app": "0.12.4",
+    "@tulip-systems/auth": "0.12.4",
+    "@tulip-systems/blocks": "0.12.4",
+    "@tulip-systems/commands": "0.12.4",
+    "@tulip-systems/core": "0.12.4",
+    "@tulip-systems/data-tables": "0.12.4",
+    "@tulip-systems/drive": "0.12.4",
+    "@tulip-systems/drive-google": "0.12.4",
+    "@tulip-systems/editor": "0.12.4",
+    "@tulip-systems/editor-storage": "0.12.4",
+    "@tulip-systems/inline": "0.12.4",
+    "@tulip-systems/query": "0.12.4",
+    "@tulip-systems/storage": "0.12.4",
+    "@tulip-systems/ui": "0.12.4",
     "@uidotdev/usehooks": "^2.4.1",
     "@vercel/functions": "^3.9.0",
     "@vercel/otel": "^2.1.3",

package/dist/templates/code/src/app/admin/quotations/(list)/layout.tsx

@@ -0,0 +1,24 @@
+import { Header, Topbar, TopbarTitle, TopbarTools } from "@tulip-systems/app/components/client";
+import { InlineCommandMenu, InlineCommandMenuLoading } from "@tulip-systems/commands/client";
+import { type PropsWithChildren, Suspense } from "react";
+import { quotationCreateCommand } from "../_config/commands";
+
+export default function QuotationsLayout({ children }: PropsWithChildren) {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle breadcrumbs={[{ label: "Offertes" }]} />
+
+          <TopbarTools>
+            <Suspense fallback={<InlineCommandMenuLoading />}>
+              <InlineCommandMenu data={{}} commands={[quotationCreateCommand]} />
+            </Suspense>
+          </TopbarTools>
+        </Topbar>
+      </Header>
+
+      {children}
+    </>
+  );
+}

package/dist/templates/code/src/app/admin/quotations/(list)/page.tsx

@@ -0,0 +1,23 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { TableLayout } from "@tulip-systems/data-tables";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { QuotationPaginationTableProvider } from "../_components/tables";
+import { QuotationTableToolbar } from "../_components/toolbars";
+import { quotationColumns } from "../_config/columns-data";
+import { quotationDeleteCommand } from "../_config/commands";
+
+export default function QuotationsPage() {
+  return (
+    <Allowed permission={{ quotation: ["view"] }}>
+      <TableLayout className="p-content">
+        <QuotationPaginationTableProvider
+          columns={quotationColumns}
+          commands={[quotationDeleteCommand]}
+        >
+          <QuotationTableToolbar />
+          <DataTable />
+        </QuotationPaginationTableProvider>
+      </TableLayout>
+    </Allowed>
+  );
+}

package/dist/templates/code/src/app/admin/quotations/[id]/(dashboard)/layout.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Header, Topbar, TopbarTitle, TopbarTools } from "@tulip-systems/app/components/client";
+import { InlineCommandMenu, InlineCommandMenuLoading } from "@tulip-systems/commands/client";
+import { notFound } from "next/navigation";
+import { Suspense, use } from "react";
+import { orpc } from "@/server/router/client";
+import { quotationDeleteCommand, quotationPreviewCommand } from "../../_config/commands";
+
+export default function QuotationsLayout(props: LayoutProps<"/admin/quotations/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.quotations.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle
+            breadcrumbs={[{ label: "Offertes", href: "/admin/quotations" }, { label: data.title }]}
+          />
+
+          <TopbarTools>
+            <Suspense fallback={<InlineCommandMenuLoading />}>
+              <InlineCommandMenu
+                data={data}
+                commands={[quotationPreviewCommand, quotationDeleteCommand]}
+              />
+            </Suspense>
+          </TopbarTools>
+        </Topbar>
+      </Header>
+
+      {props.children}
+    </>
+  );
+}

package/dist/templates/code/src/app/admin/quotations/[id]/(dashboard)/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import {
+  InlineField,
+  InlineFieldError,
+  InlineFieldLabel,
+  InlineStringInput,
+} from "@tulip-systems/inline/client";
+import { DataStackLayout } from "@tulip-systems/ui/data-stack";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { z } from "zod";
+import { orpc } from "@/server/router/client";
+import { CreateQuotationBlock, RenderQuotationInlineBlocks } from "../../_blocks/render";
+
+const quotationMutation = orpc.quotations.update.mutationOptions({
+  meta: { invalidates: [orpc.quotations.key()] },
+});
+
+export default function QuotationDetailPage(props: PageProps<"/admin/quotations/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.quotations.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  return (
+    <Allowed permission={{ quotation: ["view"] }}>
+      <DataStackLayout className="p-content">
+        <InlineField>
+          <InlineFieldLabel>Titel</InlineFieldLabel>
+          <InlineStringInput
+            initialValue={data.title}
+            variables={(value) => ({ id, data: { title: value ?? "" } })}
+            mutation={quotationMutation}
+            strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().min(1) } }}
+          />
+          <InlineFieldError />
+        </InlineField>
+
+        <InlineField>
+          <InlineFieldLabel>Blokken</InlineFieldLabel>
+
+          <div className="flex flex-col gap-2">
+            <RenderQuotationInlineBlocks quotationId={id} />
+            <CreateQuotationBlock quotationId={id} />
+          </div>
+
+          <InlineFieldError />
+        </InlineField>
+      </DataStackLayout>
+    </Allowed>
+  );
+}

package/dist/templates/code/src/app/admin/quotations/[id]/preview/page.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { orpc } from "@/server/router/client";
+import { RenderQuotationPreview } from "../../_blocks/render";
+
+export default function QuotationPreviewPage(props: PageProps<"/admin/quotations/[id]/preview">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.quotations.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  return <RenderQuotationPreview quotationId={id} />;
+}

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

@@ -0,0 +1,24 @@
+"use client";
+
+import { commandBuilder } from "@tulip-systems/commands";
+import { DeleteCommand } from "@tulip-systems/commands/client";
+import { toast } from "@tulip-systems/ui/sonner";
+import { orpc } from "@/server/router/client";
+import type { QuotationBlock } from "./registry";
+
+type QuotationBlockCommandItem = Pick<QuotationBlock, "id">;
+
+export const quotationBlockDeleteCommand = commandBuilder
+  .$type<QuotationBlockCommandItem>()
+  .permission({ quotation: ["update"] })
+  .render(({ data }) => (
+    <DeleteCommand
+      variables={{ id: data.id }}
+      mutation={orpc.quotationBlocks.delete.mutationOptions({
+        meta: { invalidates: [orpc.quotationBlocks.key()] },
+        onSuccess: () => toast.success("Blok succesvol verwijderd"),
+      })}
+    />
+  ));
+
+export const quotationInlineBlockCommands = [quotationBlockDeleteCommand];

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

@@ -0,0 +1,14 @@
+import type { BlockDefinition } from "@tulip-systems/blocks";
+import { z } from "zod";
+
+export const quotationHeroBlock = {
+  slug: "hero",
+  label: "Hero",
+  description: "Homepage hero title, subtitle, and supporting copy.",
+  schema: z.object({
+    media: z.unknown().optional(),
+    titlePart1: z.string().min(1),
+    titlePart2: z.string().optional(),
+    description: z.string().optional(),
+  }),
+} as const satisfies BlockDefinition;

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

@@ -0,0 +1,152 @@
+"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 { Textarea } from "@tulip-systems/ui/textarea";
+import { BlocksIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import type { z } from "zod";
+import { quotationHeroBlock } from "./config";
+
+export type QuotationHeroCreateValues = z.input<typeof quotationHeroBlock.schema>;
+
+type QuotationHeroCreateBlockInput = {
+  slug: typeof quotationHeroBlock.slug;
+  data: QuotationHeroCreateValues;
+};
+
+type QuotationHeroCreateBlockProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = BlockCreateComponentProps<
+  QuotationHeroCreateBlockInput,
+  TData,
+  TError,
+  TVariables,
+  TOnMutateResult
+>;
+
+export function QuotationHeroCreateBlock<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+}: QuotationHeroCreateBlockProps<TData, TError, TVariables, TOnMutateResult>) {
+  const form = useForm<QuotationHeroCreateValues>({
+    resolver: standardSchemaResolver(quotationHeroBlock.schema),
+  });
+
+  return (
+    <CreateBlock>
+      <CreateBlockTrigger>
+        <CreateBlockTriggerIcon>
+          <BlocksIcon />
+        </CreateBlockTriggerIcon>
+
+        <CreateBlockTriggerContent>
+          <CreateBlockTriggerTitle>{quotationHeroBlock.label}</CreateBlockTriggerTitle>
+          <CreateBlockTriggerDescription>
+            {quotationHeroBlock.description}
+          </CreateBlockTriggerDescription>
+        </CreateBlockTriggerContent>
+      </CreateBlockTrigger>
+
+      <Form {...form}>
+        <CreateBlockContent
+          className="sm:max-w-xl"
+          variables={(data: QuotationHeroCreateValues) =>
+            variables({ slug: quotationHeroBlock.slug, data })
+          }
+          mutation={mutation}
+        >
+          <CreateBlockHeader>
+            <CreateBlockTitle>{quotationHeroBlock.label} toevoegen</CreateBlockTitle>
+            <CreateBlockDescription>
+              Vul de verplichte velden in om het blok toe te voegen.
+            </CreateBlockDescription>
+          </CreateBlockHeader>
+
+          <CreateBlockFields className="grid gap-4 md:grid-cols-2">
+            <FormField
+              control={form.control}
+              name="titlePart1"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Titel deel 1</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="titlePart2"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Titel deel 2</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem className="md:col-span-2">
+                  <FormLabel>Beschrijving</FormLabel>
+                  <FormControl>
+                    <Textarea {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CreateBlockFields>
+
+          <CreateBlockFooter>
+            <CreateBlockCancel>Annuleren</CreateBlockCancel>
+            <CreateBlockSubmit>Blok toevoegen</CreateBlockSubmit>
+          </CreateBlockFooter>
+        </CreateBlockContent>
+      </Form>
+    </CreateBlock>
+  );
+}

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

@@ -0,0 +1,90 @@
+"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,
+  InlineTextarea,
+} from "@tulip-systems/inline/client";
+import { DataStackLayout, DataStackRow } from "@tulip-systems/ui/data-stack";
+import { GripIcon } from "lucide-react";
+import { z } from "zod";
+import { orpc } from "@/server/router/client";
+import { quotationInlineBlockCommands } from "../commands";
+import { quotationHeroBlock } from "./config";
+
+const heroMutation = orpc.quotationBlocks.update.mutationOptions({
+  meta: { invalidates: [orpc.quotationBlocks.key()] },
+});
+
+export function QuotationHeroInlineBlock({
+  block,
+}: BlockComponentProps<typeof quotationHeroBlock>) {
+  return (
+    <InlineBlockSortable id={block.id}>
+      <InlineBlock>
+        <InlineBlockHeader>
+          <InlineBlockDragHandle>
+            <GripIcon className="h-4 w-4" />
+            <span className="sr-only">Blok verplaatsen</span>
+          </InlineBlockDragHandle>
+          <InlineBlockTrigger>{quotationHeroBlock.label}</InlineBlockTrigger>
+          <DropdownCommandMenu
+            data={{ id: block.id }}
+            commands={quotationInlineBlockCommands}
+            className="ml-2 size-7"
+          />
+        </InlineBlockHeader>
+
+        <InlineBlockContent>
+          <DataStackLayout>
+            <DataStackRow>
+              <InlineField>
+                <InlineFieldLabel>Titel deel 1</InlineFieldLabel>
+                <InlineTextarea
+                  initialValue={block.data.titlePart1}
+                  variables={(value) => ({ id: block.id, data: { titlePart1: value ?? "" } })}
+                  mutation={heroMutation}
+                  strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().min(1) } }}
+                />
+                <InlineFieldError />
+              </InlineField>
+
+              <InlineField>
+                <InlineFieldLabel>Titel deel 2</InlineFieldLabel>
+                <InlineTextarea
+                  initialValue={block.data.titlePart2 ?? ""}
+                  variables={(value) => ({ id: block.id, data: { titlePart2: value ?? "" } })}
+                  mutation={heroMutation}
+                  strategy={{ mutate: { on: "blur" }, validate: { blur: z.string() } }}
+                />
+                <InlineFieldError />
+              </InlineField>
+            </DataStackRow>
+
+            <InlineField className="md:col-span-2">
+              <InlineFieldLabel>Beschrijving</InlineFieldLabel>
+              <InlineTextarea
+                initialValue={block.data.description ?? ""}
+                variables={(value) => ({ id: block.id, data: { description: value ?? "" } })}
+                mutation={heroMutation}
+                strategy={{ mutate: { on: "blur" }, validate: { blur: z.string() } }}
+              />
+              <InlineFieldError />
+            </InlineField>
+          </DataStackLayout>
+        </InlineBlockContent>
+      </InlineBlock>
+    </InlineBlockSortable>
+  );
+}

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

@@ -0,0 +1,90 @@
+import type { BlockComponentProps } from "@tulip-systems/blocks";
+import { cn } from "@tulip-systems/ui/cn";
+import Image from "next/image";
+import { typographyVariants } from "../styles";
+import type { quotationHeroBlock } from "./config";
+
+export async function QuotationHeroPreview({
+  block,
+}: BlockComponentProps<typeof quotationHeroBlock>) {
+  const { titlePart1, titlePart2, description } = block.data;
+
+  const fullTitle = [titlePart1, titlePart2].filter(Boolean).join(" ");
+
+  return (
+    <section className="relative flex min-h-svh items-stretch overflow-hidden bg-background px-5 pt-10 pb-10 md:gap-27 md:px-10 lg:items-stretch">
+      {fullTitle && <h1 className="sr-only">{fullTitle}</h1>}
+
+      <div className="absolute inset-0 z-0">
+        <Image
+          src="/images/preview/hero-home.webp"
+          alt="Hero home"
+          className="object-cover"
+          fill
+          sizes="100vw"
+          preload
+        />
+      </div>
+
+      <div className="relative z-10 flex w-full flex-col gap-2 lg:flex-row lg:justify-between lg:gap-10">
+        {/* Right Side — `grow lg:grow-0` on mobile so this column fills the
+            inner div's vertical space (inner div itself is stretched by the
+            section's `items-stretch`), which lets `justify-between` actually
+            push the title-group to the top and the description+buttons to
+            the bottom. On desktop the parent is `flex-row`; there we don't
+            want horizontal growth so we reset with `lg:grow-0`. */}
+        <div className="flex grow flex-col justify-between gap-5 lg:grow-0 lg:gap-0">
+          {/* Title group — subTitle + both title parts stack here so that the
+              right side div only sees TWO children (title-group and the
+              description+buttons block). With 3 children, `justify-between`
+              would strand titlePart2 in the middle. */}
+          <div className="flex flex-col gap-5 lg:gap-7.5">
+            {titlePart1 && (
+              <p
+                aria-hidden="true"
+                className={cn("lg:wrap-anywhere", typographyVariants({ variant: "title-large" }))}
+              >
+                {titlePart1}
+              </p>
+            )}
+
+            {titlePart2 && (
+              <p
+                aria-hidden="true"
+                className={cn(
+                  "lg:wrap-anywhere text-right lg:hidden",
+                  typographyVariants({ variant: "title-large" }),
+                )}
+              >
+                {titlePart2}
+              </p>
+            )}
+          </div>
+
+          <div className="flex flex-col gap-10 pt-5 lg:pt-0">
+            {description && (
+              <p className={cn("max-w-md", typographyVariants({ variant: "body-small" }))}>
+                {description}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Left Side - Desktop */}
+        <div className="hidden flex-col gap-27.5 lg:flex lg:items-end lg:self-end">
+          {titlePart2 && (
+            <p
+              aria-hidden="true"
+              className={cn(
+                "lg:wrap-anywhere text-right",
+                typographyVariants({ variant: "title-large" }),
+              )}
+            >
+              {titlePart2}
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { createBlockRegistry, type InferBlock, type InferBlockInput } from "@tulip-systems/blocks";
+import { quotationHeroBlock } from "./hero/config";
+import { quotationSummaryBlock } from "./summary/config";
+import { quotationTotalsBlock } from "./totals/config";
+
+export const quotationBlocks = createBlockRegistry([
+  quotationHeroBlock,
+  quotationSummaryBlock,
+  quotationTotalsBlock,
+]);
+
+export type QuotationBlock = InferBlock<typeof quotationBlocks>;
+export type QuotationBlockInput = InferBlockInput<typeof quotationBlocks>;