@tulip-systems/create-app 0.11.1

package/dist/templates/spark/src/components/pdf/pdf-richtext.tsx

@@ -0,0 +1,138 @@
+import { Text, View, type ViewProps } from "@react-pdf/renderer";
+import type { EditorJSONContent } from "@tulip-systems/editor";
+import { cn } from "@tulip-systems/ui/cn";
+import type { JSX } from "react";
+import { tw } from "./pdf-config";
+import { PDFList, PDFListItem } from "./pdf-list";
+
+/**
+ * Map of mark types to renderers
+ */
+const markRenderers: Record<string, (children: React.ReactNode) => JSX.Element> = {
+  bold: (children) => <Text style={{ fontWeight: "bold" }}>{children}</Text>,
+  italic: (children) => <Text style={{ fontStyle: "italic" }}>{children}</Text>,
+  underline: (children) => <Text style={{ textDecoration: "underline" }}>{children}</Text>,
+};
+
+/**
+ * Recursively render a mark and its children
+ */
+function renderMarks(node: EditorJSONContent): JSX.Element | null {
+  if (!node.marks?.length) return <Text>{node.text}</Text>;
+
+  const [firstMark, ...restMarks] = node.marks;
+
+  const child = renderMarks({
+    ...node,
+    marks: restMarks,
+  });
+
+  const markRenderer = markRenderers[firstMark?.type ?? ""];
+  if (!markRenderer) {
+    console.warn(`No renderer found for mark type: ${firstMark?.type}`);
+    return child;
+  }
+
+  return markRenderer(child);
+}
+
+/**
+ * Map of node types to renderers
+ */
+const nodeRenderers: Record<
+  string,
+  (node: EditorJSONContent, index: number) => JSX.Element | null
+> = {
+  /**
+   * Parent nodes
+   */
+  paragraph: (node, index) => (
+    <View key={index} style={tw("flex flex-row flex-wrap mb-1.5")}>
+      {node.content?.map((child, index) => renderNode(child, index))}
+    </View>
+  ),
+  bulletList: (node, index) => (
+    <PDFList key={index} type="unordered">
+      {node.content?.map((child, index) => renderNode(child, index))}
+    </PDFList>
+  ),
+  orderedList: (node, index) => (
+    <PDFList key={index} type="ordered">
+      {node.content?.map((child, index) => renderNode(child, index))}
+    </PDFList>
+  ),
+  listItem: (node, index) => (
+    <PDFListItem key={index}>{node.content?.map((child) => renderNode(child, index))}</PDFListItem>
+  ),
+  /**
+   * Leaf nodes
+   */
+  text: (node, index) => <Text key={index}>{renderMarks(node)}</Text>,
+  hardBreak: (_, index) => <View key={index} style={tw("w-full h-0.5")} />,
+};
+
+/**
+ * Recursively render a node and its children
+ */
+function renderNode(node: EditorJSONContent, index: number): JSX.Element | null {
+  const renderer = nodeRenderers[node?.type ?? ""];
+
+  if (!renderer) {
+    console.warn(`No renderer found for node type: ${node.type}`);
+    return null;
+  }
+
+  return renderer(node, index);
+}
+
+/**
+ * PDF Richtext component
+ */
+export type PDFRichtextProps = ViewProps & {
+  className?: string;
+  content: EditorJSONContent;
+};
+
+export function PDFRichtext({ content, className, ...props }: PDFRichtextProps) {
+  return (
+    <View {...props} style={tw(cn("flex flex-col", className))}>
+      {content?.content?.map(renderNode)}
+    </View>
+  );
+}
+
+// {
+//   json: {
+//     type: "doc",
+//     content: [
+//       {
+//         type: "paragraph",
+//         content: [
+//           { text: "1. De plaatsing ", type: "text", marks: [{ type: "bold" }] },
+//           { type: "hardBreak" },
+//           { text: "dit is een test", type: "text", marks: [{ type: "bold" }] },
+//         ],
+//       },
+//       {
+//         type: "bulletList",
+//         content: [
+//           {
+//             type: "listItem",
+//             content: [
+//               {
+//                 type: "paragraph",
+//                 content: [{ text: "Levering en plaatsing van laadpaal", type: "text" }],
+//               },
+//             ],
+//           },
+//           {
+//             type: "listItem",
+//             content: [
+//               { type: "paragraph", content: [{ text: "Aansluiting op het net", type: "text" }] },
+//             ],
+//           },
+//         ],
+//       },
+//     ],
+//   },
+// };

package/dist/templates/spark/src/components/pdf/pdf-table.tsx

@@ -0,0 +1,118 @@
+import { Text, type TextProps, View, type ViewProps } from "@react-pdf/renderer";
+import { cn } from "@tulip-systems/ui/cn";
+import type React from "react";
+import { tw } from "./pdf-config";
+import { PDFRichtext, type PDFRichtextProps } from "./pdf-richtext";
+
+/**
+ * Table
+ */
+export type PDFTableProps = ViewProps & {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function PDFTable({ children, className, ...props }: PDFTableProps) {
+  return (
+    <View {...props} style={tw(cn("w-full", className))}>
+      {children}
+    </View>
+  );
+}
+
+/**
+ * Table header
+ */
+export type PDFTableHeaderProps = ViewProps & {
+  children: React.ReactNode;
+  className?: string;
+  fixed?: boolean;
+  spacing?: boolean;
+};
+
+export function PDFTableHeader({
+  children,
+  className,
+  fixed = true,
+  spacing = true,
+  ...props
+}: PDFTableHeaderProps) {
+  return (
+    <>
+      {spacing && (
+        <View
+          fixed
+          render={({ pageNumber }) =>
+            pageNumber !== 1 && <View style={tw("w-full min-h-[100px]")} />
+          }
+        />
+      )}
+
+      <View
+        {...props}
+        fixed={fixed}
+        style={tw(
+          cn(
+            "flex flex-row w-full py-2.5 border-y-[0.5px] px-8 justify-center items-center font-semibold",
+            className,
+          ),
+        )}
+      >
+        {children}
+      </View>
+    </>
+  );
+}
+
+/**
+ * Table header title
+ */
+export type PDFTableHeaderTitleProps = TextProps & {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function PDFTableHeaderTitle({ children, className, ...props }: PDFTableHeaderTitleProps) {
+  return (
+    <Text {...props} style={tw(cn("text-[7px] flex-1", className))}>
+      {children}
+    </Text>
+  );
+}
+
+/**
+ * Table row
+ *  */
+export type PDFTableRowsProps = ViewProps & {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function PDFTableRow({ children, wrap = false, className, ...props }: PDFTableRowsProps) {
+  return (
+    <View {...props} wrap={wrap} style={tw(cn("flex flex-row w-full px-8", className))}>
+      {children}
+    </View>
+  );
+}
+
+/**
+ * Table cell
+ */
+
+export type PDFTableCellTextProps = TextProps & {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function PDFTableCellText({ children, className, ...props }: PDFTableCellTextProps) {
+  return (
+    <Text {...props} style={tw(cn("flex-1 text-[7px] py-2 pr-4", className))}>
+      {children}
+    </Text>
+  );
+}
+
+export function PDFTableCellRichtext({ content, className, ...props }: PDFRichtextProps) {
+  return <PDFRichtext {...props} content={content} className={cn("flex-1 py-2 pr-4", className)} />;
+}

package/dist/templates/spark/src/components/pdf/pdf-typography.tsx

@@ -0,0 +1,79 @@
+import { Text, type TextProps, View } from "@react-pdf/renderer";
+import { cn } from "@tulip-systems/ui/cn";
+import { cva, type VariantProps } from "class-variance-authority";
+import { tw } from "./pdf-config";
+
+/**
+ * PDF Title
+ */
+
+export type PDFTitleProps = TextProps & {
+  number: number;
+  title: string;
+  className?: string;
+};
+
+export function PDFTitle({ number, title, className, ...props }: PDFTitleProps) {
+  return (
+    <View id={number.toString()} style={tw("flex flex-row items-center")}>
+      <Text style={tw("font-bold font-george text-[90pt] text-primary-300")}>
+        {number.toString().padStart(2, "0")}{" "}
+      </Text>
+
+      <Text
+        {...props}
+        style={tw(cn("font-semibold font-george text-[28pt] text-primary-500", className))}
+      >
+        {title}
+      </Text>
+    </View>
+  );
+}
+
+/**
+ * PDF Heading
+ */
+const pdfHeadingVariants = cva("", {
+  variants: {
+    variant: {
+      h1: "text-[28pt] font-george font-bold text-primary-500 mb-4",
+      h2: "text-[16pt] font-george font-semibold text-secondary-500 mb-2",
+      h3: "text-[12pt] font-george font-normal text-primary-500 mb-2",
+    },
+  },
+});
+
+export type PDFHeadingProps = TextProps &
+  VariantProps<typeof pdfHeadingVariants> & {
+    children: React.ReactNode;
+    className?: string;
+  };
+
+export function PDFHeading({ variant, children, className, ...props }: PDFHeadingProps) {
+  return (
+    <Text {...props} style={tw(cn(pdfHeadingVariants({ variant }), className))}>
+      {children}
+    </Text>
+  );
+}
+
+/**
+ * PDF Paragraph
+ */
+export type PDFParagraphProps = TextProps & {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function PDFParagraph({ children, className, ...props }: PDFParagraphProps) {
+  return (
+    <Text {...props} style={tw(cn("text-[7px] leading-relaxed font-light", className))}>
+      {children}
+    </Text>
+  );
+}
+
+/**
+ * PDF Break
+ */
+export const PDFBreak = () => "\n";

package/dist/templates/spark/src/env.ts

@@ -0,0 +1,20 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  server: {
+    BETTER_AUTH_SECRET: z.string().min(1),
+    DATABASE_URL: z.url(),
+    RESEND_API_KEY: z.string().min(1),
+    S3_BUCKET: z.string().min(1),
+    S3_ENDPOINT: z.string().min(1),
+    S3_ACCESS_KEY_ID: z.string().min(1),
+    S3_SECRET_ACCESS_KEY: z.string().min(1),
+  },
+  client: {
+    NEXT_PUBLIC_HOST: z.string().min(1),
+  },
+  experimental__runtimeEnv: {
+    NEXT_PUBLIC_HOST: process.env.NEXT_PUBLIC_HOST ?? process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL,
+  },
+});

package/dist/templates/spark/src/instrumentation.ts

@@ -0,0 +1,5 @@
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("./server/router/register");
+  }
+}

package/dist/templates/spark/src/lib/config/base.ts

@@ -0,0 +1,31 @@
+import { defineTulipConfig } from "@tulip-systems/core";
+import type { Address } from "@/app/admin/addresses/_lib/validators";
+
+export const config = defineTulipConfig({
+  general: {
+    name: "Tulip",
+    shortName: "Tulip",
+  },
+  email: {
+    defaultFrom: "Tulip <info@tulip.systems>",
+  },
+  organisation: {
+    name: "Tulip BV",
+    vatNumber: "BE0769775667",
+    email: "info@tulip.systems",
+    phone: "+32 471 492 451",
+    website: "www.tulip.be",
+    address: {
+      type: "default" as const,
+      street: "Tessenderlosesteenweg 5 bus 2",
+      postalCode: "3583",
+      city: "Paal",
+      countryCode: "BE",
+    } satisfies Pick<Address, "type" | "street" | "postalCode" | "city" | "countryCode">,
+    bank: {
+      name: "Tulip Bank",
+      iban: "BE12 3456 7890 1234",
+      bic: "TULIBEBB",
+    },
+  },
+});

package/dist/templates/spark/src/lib/config/hotkeys.ts

@@ -0,0 +1,8 @@
+import type { TableHotkeysConfig } from "@tulip-systems/data-tables/client";
+
+export const inlineDataTableDefaultHotkeys: TableHotkeysConfig = {
+  moveLeft: ["ArrowLeft"],
+  moveRight: ["ArrowRight"],
+  moveUp: ["ArrowUp"],
+  moveDown: ["ArrowDown"],
+};

package/dist/templates/spark/src/lib/config/paths.tsx

@@ -0,0 +1,263 @@
+import {
+  DefaultSidebarAccountMenu,
+  Path,
+  PathGroup,
+  PathGroupItems,
+  PathGroupTitle,
+  PathItems,
+  PathLink,
+  PathSubItem,
+  PathSubItemLink,
+} from "@tulip-systems/app/components/client";
+import { Sidebar, SidebarContent, SidebarHeader, SidebarRail } from "@tulip-systems/ui/sidebar";
+import {
+  BadgeEuroIcon,
+  BuildingIcon,
+  CalendarIcon,
+  ClipboardCheckIcon,
+  FoldersIcon,
+  GitCompareArrowsIcon,
+  Grid3X3Icon,
+  HomeIcon,
+  PackageIcon,
+  Repeat2Icon,
+  ScrollTextIcon,
+  Table2Icon,
+  TagsIcon,
+  TruckIcon,
+  UsersIcon,
+} from "lucide-react";
+import { Icons } from "@/components/icons";
+import { DRIVE_NAMESPACES } from "../../app/admin/drive/_config/namespaces";
+
+export function AdminSidebar() {
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <DefaultSidebarAccountMenu />
+      </SidebarHeader>
+
+      <SidebarContent>
+        <PathGroup>
+          <PathGroupItems>
+            <Path segment="(dashboard)">
+              <PathLink href="/admin">
+                <Icons.dashboard />
+                Dashboard
+              </PathLink>
+            </Path>
+
+            <Path permission={{ schedule: ["view"] }} segment="schedule">
+              <PathLink href="/admin/schedule">
+                <CalendarIcon />
+                Planning
+              </PathLink>
+            </Path>
+
+            <Path segment="emails" permission={{ email: ["view"] }}>
+              <PathLink href="/admin/emails">
+                <Icons.mail />
+                Emails
+              </PathLink>
+            </Path>
+
+            <Path permission={{ drive: ["view"] }} segment="drive">
+              <PathLink href="/admin/drive">
+                <FoldersIcon />
+                Drive
+              </PathLink>
+
+              <PathItems>
+                {Object.values(DRIVE_NAMESPACES).flatMap((drive) =>
+                  drive.namespace === "global"
+                    ? []
+                    : [
+                        <PathSubItem
+                          key={drive.namespace}
+                          permission={drive.permission ?? { drive: ["view"] }}
+                          segment={drive.namespace}
+                        >
+                          <PathSubItemLink href={`/admin/drive/${drive.namespace}`}>
+                            {drive.label}
+                          </PathSubItemLink>
+                        </PathSubItem>,
+                      ],
+                )}
+              </PathItems>
+            </Path>
+          </PathGroupItems>
+        </PathGroup>
+
+        <PathGroup
+          permission={[{ project: ["view"] }, { run: ["view"] }, { assignment: ["view"] }]}
+        >
+          <PathGroupTitle>Projecten</PathGroupTitle>
+
+          <PathGroupItems>
+            <Path permission={{ project: ["view"] }} segment="projects">
+              <PathLink href="/admin/projects">
+                <Table2Icon />
+                Projecten
+              </PathLink>
+
+              <PathItems>
+                <PathSubItem permission={{ project: ["view.drive"] }} segment="drive">
+                  <PathSubItemLink href="/admin/projects/drive">Drive</PathSubItemLink>
+                </PathSubItem>
+              </PathItems>
+            </Path>
+
+            <Path permission={{ run: ["view"] }} segment="runs">
+              <PathLink href="/admin/runs">
+                <Repeat2Icon />
+                Runs
+              </PathLink>
+            </Path>
+
+            <Path permission={{ assignment: ["view"] }} segment="assignments">
+              <PathLink href="/admin/assignments">
+                <GitCompareArrowsIcon />
+                Opdrachten
+              </PathLink>
+            </Path>
+          </PathGroupItems>
+        </PathGroup>
+
+        <PathGroup permission={[{ client: ["view"] }]}>
+          <PathGroupTitle>Klanten</PathGroupTitle>
+
+          <PathGroupItems>
+            <Path permission={{ client: ["view"] }} segment="customers">
+              <PathLink href="/admin/customers">
+                <HomeIcon />
+                Particulieren
+              </PathLink>
+            </Path>
+
+            <Path permission={{ client: ["view"] }} segment="companies">
+              <PathLink href="/admin/companies">
+                <BuildingIcon />
+                Bedrijven
+              </PathLink>
+            </Path>
+          </PathGroupItems>
+        </PathGroup>
+
+        <PathGroup permission={[{ employee: ["view"] }]}>
+          <PathGroupTitle>Mangement</PathGroupTitle>
+
+          <PathGroupItems>
+            <Path permission={{ employee: ["view"] }} segment="employees">
+              <PathLink href="/admin/employees">
+                <UsersIcon />
+                Medewerkers
+              </PathLink>
+
+              <PathItems>
+                <PathSubItem permission={{ employee: ["view.drive"] }} segment="drive">
+                  <PathSubItemLink href="/admin/employees/drive">Drive</PathSubItemLink>
+                </PathSubItem>
+              </PathItems>
+            </Path>
+          </PathGroupItems>
+        </PathGroup>
+
+        <PathGroup
+          permission={[
+            { quotation: ["view"] },
+            { salesOrder: ["view"] },
+            { salesInvoice: ["view"] },
+            { template: ["view"] },
+          ]}
+        >
+          <PathGroupTitle>Verkoop</PathGroupTitle>
+
+          <PathGroupItems>
+            <Path permission={{ quotation: ["view"] }} segment="quotations">
+              <PathLink href="/admin/quotations">
+                <ScrollTextIcon />
+                Offertes
+              </PathLink>
+
+              <PathItems>
+                <PathSubItem permission={{ quotation: ["view.emails"] }} segment="emails">
+                  <PathSubItemLink href="/admin/quotations/emails">Emails</PathSubItemLink>
+                </PathSubItem>
+              </PathItems>
+            </Path>
+
+            <Path permission={{ salesOrder: ["view"] }} segment="sales-orders">
+              <PathLink href="/admin/sales-orders">
+                <ClipboardCheckIcon />
+                Verkoopbonnen
+              </PathLink>
+
+              <PathItems>
+                <PathSubItem permission={{ salesOrder: ["view.emails"] }} segment="emails">
+                  <PathSubItemLink href="/admin/sales-orders/emails">Emails</PathSubItemLink>
+                </PathSubItem>
+              </PathItems>
+            </Path>
+
+            <Path permission={{ salesInvoice: ["view"] }} segment="sales-invoices">
+              <PathLink href="/admin/sales-invoices">
+                <BadgeEuroIcon />
+                Facturen
+              </PathLink>
+            </Path>
+
+            <Path permission={{ template: ["view"] }} segment="templates">
+              <PathLink href="/admin/templates">
+                <Grid3X3Icon />
+                Templates
+              </PathLink>
+            </Path>
+          </PathGroupItems>
+        </PathGroup>
+
+        <PathGroup
+          permission={[{ purchaseOrder: ["view"] }, { supplier: ["view"] }, { product: ["view"] }]}
+        >
+          <PathGroupTitle>Bestellingen</PathGroupTitle>
+
+          <PathGroupItems>
+            <Path permission={{ purchaseOrder: ["view"] }} segment="purchase-orders">
+              <PathLink href="/admin/purchase-orders">
+                <PackageIcon />
+                Bestellingen
+              </PathLink>
+
+              <PathItems>
+                <PathSubItem permission={{ purchaseOrder: ["view.emails"] }} segment="emails">
+                  <PathSubItemLink href="/admin/purchase-orders/emails">Emails</PathSubItemLink>
+                </PathSubItem>
+              </PathItems>
+            </Path>
+
+            <Path permission={{ supplier: ["view"] }} segment="suppliers">
+              <PathLink href="/admin/suppliers">
+                <TruckIcon />
+                Leveranciers
+              </PathLink>
+            </Path>
+
+            <Path permission={{ product: ["view"] }} segment="products">
+              <PathLink href="/admin/products">
+                <TagsIcon />
+                Producten
+              </PathLink>
+
+              <PathItems>
+                <PathSubItem permission={{ product: ["view.drive"] }} segment="drive">
+                  <PathSubItemLink href="/admin/products/drive">Drive</PathSubItemLink>
+                </PathSubItem>
+              </PathItems>
+            </Path>
+          </PathGroupItems>
+        </PathGroup>
+      </SidebarContent>
+
+      <SidebarRail />
+    </Sidebar>
+  );
+}