@tulip-systems/core 0.2.0

package/src/modules/config/router/init.server.ts

@@ -0,0 +1,77 @@
+import "server-cli-only";
+
+import { Permission } from "@/modules/auth/lib/permissions";
+import { os } from "@orpc/server";
+import { TDatabaseSchema } from "../entry";
+import { ProtectedRPCContext, RPCContext } from "./context.server";
+import { ServerError } from "./error.server";
+
+/**
+ * Initialize TRPC
+ */
+export function initRPC<TSchema extends TDatabaseSchema>() {
+  /**
+   * Create the router
+   */
+  const o = os.$context<RPCContext<TSchema>>();
+
+  /**
+   * Middleware function to check if the user is authenticated
+   */
+  const authMiddleware = o.middleware(async (opts) => {
+    if (!opts.context.session) {
+      throw new ServerError("UNAUTHORIZED", {
+        message: "Jou hebt geen toegang om deze actie uit te voeren",
+      });
+    }
+
+    return opts.next({
+      context: { ...opts.context, session: opts.context.session } as ProtectedRPCContext<TSchema>,
+    });
+  });
+
+  /**
+   * Middleware function to check if the user has the required permission
+   */
+  function permissionMiddleware(permission: Permission) {
+    /**
+     * Middleware function to check if the user has the required permission
+     */
+    return os.$context<ProtectedRPCContext<TSchema>>().middleware(async (opts) => {
+      const { success, error } = await opts.context.auth.api.userHasPermission({
+        body: {
+          userId: opts.context.session.user.id,
+          permission,
+        },
+      });
+
+      if (error || !success) {
+        throw new ServerError("UNAUTHORIZED", {
+          message: "Jou hebt geen toegang om deze actie uit te voeren",
+        });
+      }
+
+      return opts.next({ context: { ...opts.context } as ProtectedRPCContext<TSchema> });
+    });
+  }
+
+  /**
+   * Public procedures
+   */
+  const publicProcedure = o;
+
+  /**
+   * Protected procedures
+   */
+  const protectedProcedure = o.use(authMiddleware);
+
+  /**
+   * Export
+   */
+  return {
+    publicProcedure,
+    protectedProcedure,
+    authMiddleware,
+    permissionMiddleware,
+  };
+}

package/src/modules/config/router/query-client.ts

@@ -0,0 +1,63 @@
+import { isServer, MutationCache, QueryClient } from "@tanstack/react-query";
+import { serializer } from "./helpers";
+
+/**
+ * Create a new query client
+ */
+export function createQueryClient() {
+  // eslint-disable-next-line prefer-const
+  let queryClient: QueryClient;
+
+  const mutationCache = new MutationCache({
+    onSuccess: () => {
+      // Invalidate all queries in the react-query cache:
+      queryClient.invalidateQueries();
+    },
+  });
+
+  queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        queryKeyHashFn(queryKey) {
+          const [json, meta] = serializer.serialize(queryKey);
+          return JSON.stringify({ json, meta });
+        },
+        staleTime: 60 * 1000, // > 0 to prevent immediate refetching on mount
+      },
+      dehydrate: {
+        serializeData(data) {
+          const [json, meta] = serializer.serialize(data);
+          return { json, meta };
+        },
+      },
+      hydrate: {
+        deserializeData(data) {
+          return serializer.deserialize(data.json, data.meta);
+        },
+      },
+    },
+    mutationCache,
+  });
+
+  return queryClient;
+}
+
+/**
+ *  Create a stable getter for the query client that will return the same client during the same request.
+ */
+let browserQueryClient: QueryClient;
+
+export function getQueryClient() {
+  if (isServer) {
+    // Server: always make a new query client
+    return createQueryClient();
+  }
+
+  // Browser: make a new query client if we don't already have one
+  // This is very important, so we don't re-make a new client if React
+  // suspends during the initial render. This may not be needed if we
+  // have a suspense boundary BELOW the creation of the query client
+  if (!browserQueryClient) browserQueryClient = createQueryClient();
+
+  return browserQueryClient;
+}

package/src/modules/config/router/validators.ts

@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+/**
+ * Bulk action schema
+ */
+export const bulkActionSchema = z.object({
+  ids: z.array(z.string()),
+});
+
+export type BulkActionSchema = z.infer<typeof bulkActionSchema>;

package/src/modules/data-tables/components/cell/common.client.tsx

@@ -0,0 +1,35 @@
+import { cn } from "@/lib/utils/cn";
+import { TableCell } from "@/modules/data-tables/components/table";
+import { ComponentProps } from "react";
+
+export function TableTextCell({ children, className, ...props }: ComponentProps<typeof TableCell>) {
+  return (
+    <TableCell {...props} className={cn("text-left", className)}>
+      {children}
+    </TableCell>
+  );
+}
+
+export function TableNumberCell({
+  children,
+  className,
+  ...props
+}: ComponentProps<typeof TableCell>) {
+  return (
+    <TableCell {...props} className={cn("text-left", className)}>
+      {children}
+    </TableCell>
+  );
+}
+
+export function TableDateCell({ children, className, ...props }: ComponentProps<typeof TableCell>) {
+  return (
+    <TableCell {...props} className={cn("text-left", className)}>
+      {children}
+    </TableCell>
+  );
+}
+
+export function TableStatusCell({ children, ...props }: ComponentProps<typeof TableCell>) {
+  return <TableCell {...props}>{children}</TableCell>;
+}

package/src/modules/data-tables/components/cell/index.client.tsx

@@ -0,0 +1,13 @@
+import { createTableCell } from "../../lib/helpers/create-column";
+import { TableColumnHeader } from "../column-header";
+import { TableNumberCell } from "./common.client";
+
+/**
+ * Create a new column with a row index
+ */
+export const createTableIndexCell = createTableCell({
+  accessorKey: "index",
+  permissions: { developer: ["debug"] },
+  header: ({ column }) => <TableColumnHeader column={column} title="Index" />,
+  cell: ({ row }) => <TableNumberCell className="w-10">{row.getValue("index")}</TableNumberCell>,
+});

package/src/modules/data-tables/components/cell/select.client.tsx

@@ -0,0 +1,32 @@
+import { Checkbox } from "@/components/ui/checkbox";
+import { TableCell } from "@/modules/data-tables/components/table";
+import { createTableCell } from "../../lib/helpers/create-column";
+
+/**
+ * Create a new column with the select checkbox
+ */
+export const createTableSelectCell = createTableCell({
+  id: "select",
+  header: ({ table }) => (
+    <div className="flex w-full items-center justify-center">
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected()}
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    </div>
+  ),
+  cell: ({ row }) => (
+    <TableCell className="w-8">
+      <div className="flex w-full items-center justify-center">
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      </div>
+    </TableCell>
+  ),
+  enableHiding: false,
+  enableSorting: false,
+});

package/src/modules/data-tables/components/column-header.tsx

@@ -0,0 +1,65 @@
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils/cn";
+import type { Column } from "@tanstack/react-table";
+import { ChevronsUpDown, RotateCcwIcon, SortAsc, SortDesc } from "lucide-react";
+
+interface TableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  title: string;
+}
+
+export function TableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: TableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>;
+  }
+
+  return (
+    <div className={cn("flex items-center space-x-2", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            size="sm"
+            type="button"
+            variant="ghost"
+            className="data-[state=open]:bg-accent -ml-3 h-8"
+          >
+            <span>{title}</span>
+            {column.getIsSorted() === "desc" ? (
+              <SortDesc className="ml-2 h-4 w-4" />
+            ) : column.getIsSorted() === "asc" ? (
+              <SortAsc className="ml-2 h-4 w-4" />
+            ) : (
+              <ChevronsUpDown className="ml-2 h-4 w-4" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <SortAsc className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <SortDesc className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+            Desc
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.clearSorting()}>
+            <RotateCcwIcon className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+            Clear
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/src/modules/data-tables/components/filters/combobox.client.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils/cn";
+import { Check, PlusCircle, type LucideIcon } from "lucide-react";
+import { ParserBuilder, useQueryState } from "nuqs";
+import { startTransition, useOptimistic } from "react";
+
+export type TableFilterComboboxOption = {
+  label: string;
+  value: string;
+  className?: string;
+  icon?: LucideIcon;
+  total?: number;
+};
+
+export type TableFilterComboboxProps<TValue extends string = string> = {
+  title?: string;
+  filter: { name: string; parser: ParserBuilder<TValue[] | null> };
+  options: TableFilterComboboxOption[];
+};
+
+export function TableFilterCombobox<TValue extends string>({
+  title,
+  filter,
+  options,
+}: TableFilterComboboxProps<TValue>) {
+  const [query, setQuery] = useQueryState(filter.name, filter.parser);
+
+  const [selectedValues, setSelectedValues] = useOptimistic(
+    new Set<string>(Array.isArray(query) ? query : []),
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button type="button" variant="outline" size="sm" className="h-8 border-dashed">
+          <PlusCircle className="mr-2 h-4 w-4" />
+          {title}
+          {selectedValues?.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge variant="secondary" className="rounded-sm px-1 font-normal lg:hidden">
+                {selectedValues.size}
+              </Badge>
+              <div className="hidden space-x-1 lg:flex">
+                {selectedValues.size > 2 ? (
+                  <Badge variant="secondary" className="rounded-sm px-1 font-normal">
+                    {selectedValues.size} selected
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selectedValues.has(option.value))
+                    .map((option) => (
+                      <Badge
+                        variant="secondary"
+                        key={option.value}
+                        className="rounded-sm px-1 font-normal"
+                      >
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[20rem] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const Icon = option.icon;
+
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() =>
+                      startTransition(() => {
+                        const newSelectedValues = new Set(selectedValues);
+
+                        const isSelected = newSelectedValues.has(option.value);
+
+                        if (isSelected) newSelectedValues.delete(option.value);
+                        else newSelectedValues.add(option.value);
+                        setSelectedValues(newSelectedValues);
+
+                        const filterValues = Array.from(newSelectedValues) as TValue[];
+                        setQuery(filterValues.length ? filterValues : null);
+                      })
+                    }
+                  >
+                    <div
+                      data-active={selectedValues.has(option.value)}
+                      className={cn(
+                        "border-primary data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:[&>svg]:text-primary-foreground mr-2 flex h-4 w-4 items-center justify-center rounded-sm border opacity-50 data-[active=true]:opacity-100 [&>svg]:invisible data-[active=true]:[&>svg]:visible",
+                      )}
+                    >
+                      <Check className="text-foreground h-4 w-4" />
+                    </div>
+
+                    <div className={cn("flex flex-1 items-center gap-2", option.className)}>
+                      {Icon && <Icon className="size-4" />}
+                      <span>{option.label}</span>
+                    </div>
+
+                    {option.total != undefined && (
+                      <span className="text-muted-foreground/50 size-4 justify-self-end font-mono text-xs">
+                        {option.total}
+                      </span>
+                    )}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => setQuery(null)}
+                    className="justify-center text-center"
+                  >
+                    Clear filters
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/modules/data-tables/components/filters/slider.client.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { Slider } from "@/components/ui/slider";
+import { PlusCircle } from "lucide-react";
+import { ParserBuilder, useQueryState } from "nuqs";
+import { startTransition, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+export type TableFilterSliderProps = {
+  title?: string;
+  filter: { name: string; parser: ParserBuilder<[number, number] | null> };
+  options?: { min: number; max: number };
+};
+
+export function TableFilterSlider({
+  title,
+  filter,
+  options = { min: 0, max: 100 },
+}: TableFilterSliderProps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useQueryState(filter.name, filter.parser);
+
+  const [selectedValues, setSelectedValues] = useState(query);
+
+  const handleSliderChange = useDebouncedCallback(
+    (values: [number, number] | null) => setQuery(values, { startTransition }),
+    300,
+  );
+
+  const { min, max } = options;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button type="button" variant="outline" size="sm" className="h-8 border-dashed">
+          <PlusCircle className="mr-2 h-4 w-4" />
+          {title}
+          {selectedValues && selectedValues?.length > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge variant="secondary" className="rounded-sm px-1 font-normal lg:hidden">
+                {selectedValues && selectedValues.length}
+              </Badge>
+
+              <div className="hidden space-x-1 lg:flex">
+                <Badge variant="secondary" className="rounded-sm px-1 font-normal">
+                  {query?.[0]} tot {query?.[1]}
+                </Badge>
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[20rem] p-0" align="start">
+        <div className="space-y-8 p-4">
+          <div className="flex items-center gap-2">
+            <Input
+              type="number"
+              value={selectedValues?.[0] ?? undefined}
+              placeholder="Min"
+              onChange={(e) => {
+                startTransition(() => {
+                  const newValues = e.target.value
+                    ? ([Number(e.target.value), selectedValues?.[1] ?? max] as [number, number])
+                    : null;
+
+                  setSelectedValues(newValues);
+                });
+              }}
+              onBlur={() => handleSliderChange(selectedValues)}
+            />
+            <Input
+              type="number"
+              value={selectedValues?.[1] ?? undefined}
+              placeholder="Max"
+              max={max}
+              onChange={(e) => {
+                startTransition(() => {
+                  const newValues = e.target.value
+                    ? ([selectedValues?.[0] ?? min, Number(e.target.value)] as [number, number])
+                    : null;
+
+                  setSelectedValues(newValues);
+                });
+              }}
+              onBlur={() => handleSliderChange(selectedValues)}
+            />
+          </div>
+
+          <div className="space-y-3">
+            <Slider
+              value={selectedValues ?? [min, max]}
+              onValueChange={(values: [number, number]) =>
+                startTransition(() => {
+                  setSelectedValues(values);
+                  handleSliderChange(values);
+                })
+              }
+              step={1}
+              min={min}
+              max={max}
+            />
+
+            <div className="text-muted-foreground flex justify-between text-xs">
+              <span>{min}</span>
+              <span>{max}</span>
+            </div>
+          </div>
+        </div>
+
+        {selectedValues && selectedValues.length > 0 && (
+          <div className="w-full space-y-2 p-1.5">
+            <Separator />
+
+            <Button
+              size="sm"
+              type="button"
+              variant="ghost"
+              onClick={() => {
+                setOpen(false);
+                setSelectedValues(null);
+                handleSliderChange(null);
+              }}
+              className="w-full text-center"
+            >
+              Clear filters
+            </Button>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/modules/data-tables/components/footer.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Table } from "@tanstack/react-table";
+import { TableMeta } from "../lib/types";
+import { InfinteTableBottombar, InfinteTableFooter } from "../strategies/infinite/components";
+import { PaginationTableFooter } from "../strategies/pagination/components";
+
+/**
+ * Table bottombar
+ */
+export function TableFooter<TData extends { id: string }>({ table }: { table: Table<TData> }) {
+  const meta = table.options.meta as TableMeta<TData>;
+
+  if (meta.strategy.name === "pagination") {
+    return null;
+  }
+
+  if (meta.strategy.name === "infinite") {
+    return <InfinteTableFooter table={table} />;
+  }
+
+  throw new Error(`Unknown strategy: ${meta.strategy.name}`);
+}
+
+/**
+ * Table bottombar
+ */
+export function TableBottombar<TData extends { id: string }>({ table }: { table: Table<TData> }) {
+  const meta = table.options.meta as TableMeta<TData>;
+
+  if (meta.strategy.name === "pagination") {
+    return <PaginationTableFooter table={table} />;
+  }
+
+  if (meta.strategy.name === "infinite") {
+    return <InfinteTableBottombar table={table} />;
+  }
+
+  throw new Error(`Unknown strategy: ${meta.strategy.name}`);
+}