@tulip-systems/create-app 0.12.2 → 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.2",
-    "@tulip-systems/auth": "0.12.2",
-    "@tulip-systems/commands": "0.12.2",
-    "@tulip-systems/core": "0.12.2",
-    "@tulip-systems/ui": "0.12.2",
+    "@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",
@@ -49,20 +50,38 @@
     "@tanstack/react-query": "^5.101.4",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.14.9",
-    "@tulip-systems/ai": "0.12.2",
-    "@tulip-systems/app": "0.12.2",
-    "@tulip-systems/auth": "0.12.2",
-    "@tulip-systems/commands": "0.12.2",
-    "@tulip-systems/core": "0.12.2",
-    "@tulip-systems/data-tables": "0.12.2",
-    "@tulip-systems/drive": "0.12.2",
-    "@tulip-systems/drive-google": "0.12.2",
-    "@tulip-systems/editor": "0.12.2",
-    "@tulip-systems/editor-storage": "0.12.2",
-    "@tulip-systems/inline": "0.12.2",
-    "@tulip-systems/query": "0.12.2",
-    "@tulip-systems/storage": "0.12.2",
-    "@tulip-systems/ui": "0.12.2",
+    "@tiptap/core": "^3.29.2",
+    "@tiptap/extension-blockquote": "^3.29.2",
+    "@tiptap/extension-bold": "^3.29.2",
+    "@tiptap/extension-document": "^3.29.2",
+    "@tiptap/extension-hard-break": "^3.29.2",
+    "@tiptap/extension-heading": "^3.29.2",
+    "@tiptap/extension-highlight": "^3.29.2",
+    "@tiptap/extension-horizontal-rule": "^3.29.2",
+    "@tiptap/extension-italic": "^3.29.2",
+    "@tiptap/extension-link": "^3.29.2",
+    "@tiptap/extension-list": "^3.29.2",
+    "@tiptap/extension-paragraph": "^3.29.2",
+    "@tiptap/extension-strike": "^3.29.2",
+    "@tiptap/extension-text": "^3.29.2",
+    "@tiptap/extension-text-style": "^3.29.2",
+    "@tiptap/extension-underline": "^3.29.2",
+    "@tiptap/extensions": "^3.29.2",
+    "@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/customers/[id]/(default)/@dashboard/page.tsx

@@ -11,6 +11,7 @@ import {
 import { DataList, DataListItem, DataListTitle, DataListValue } from "@tulip-systems/ui/data-list";
 import { use } from "react";
 import { z } from "zod";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 
 const customerMutation = orpc.customers.update.mutationOptions();
@@ -130,6 +131,7 @@ export default function CustomerDetailPage(props: { params: Promise<{ id: string
               mutation={customerMutation}
               strategy={{ mutate: { on: "blur" }, validate: { blur: z.any().nullable() } }}
               className="min-h-40"
+              extensions={richTextEditorPreset}
             >
               <EditorMenuBubble />
               <EditorContent />

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

@@ -26,6 +26,7 @@ import { use } from "react";
 import { z } from "zod";
 import { InitiativeStatusField } from "@/app/admin/initiatives/_config/status";
 import { Icons } from "@/components/icons";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import { projectKeySchema } from "../../_lib/validators";
 
@@ -144,6 +145,7 @@ export default function ProjectDetailPage(props: PageProps<"/admin/projects/[id]
             mutation={projectMutation}
             strategy={{ mutate: { on: "change", debounceMs: 700 }, validate: { change: z.any() } }}
             className="min-h-80"
+            extensions={richTextEditorPreset}
           >
             <EditorMenuFixed />
             <EditorContent />

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

@@ -11,6 +11,7 @@ import {
 import { DataList, DataListItem, DataListTitle, DataListValue } from "@tulip-systems/ui/data-list";
 import { notFound } from "next/navigation";
 import { use } from "react";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import { updateProspectSchema } from "../../../_lib/validators";
 
@@ -164,6 +165,7 @@ export default function ProspectDashboardPage(props: { params: Promise<{ id: str
                 validate: { change: updateProspectSchema.shape.notes },
               }}
               className="min-h-40"
+              extensions={richTextEditorPreset}
             >
               <EditorMenuBubble />
               <EditorContent />

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>
+  );
+}