@tulip-systems/core 0.5.2 → 0.5.4

package/src/components/editor/lib/extensions.ts

@@ -4,7 +4,6 @@ import { HardBreakOptions } from "@tiptap/extension-hard-break";
 import { HeadingOptions } from "@tiptap/extension-heading";
 import { HighlightOptions } from "@tiptap/extension-highlight";
 import { HorizontalRuleOptions } from "@tiptap/extension-horizontal-rule";
-import { ImageOptions } from "@tiptap/extension-image";
 import { ItalicOptions } from "@tiptap/extension-italic";
 import { LinkOptions } from "@tiptap/extension-link";
 import {
@@ -20,6 +19,8 @@ import { UnderlineOptions } from "@tiptap/extension-underline";
 import { DropcursorOptions, TrailingNodeOptions, UndoRedoOptions } from "@tiptap/extensions";
 import { Extension } from "@tiptap/react";
 import deepmerge from "deepmerge";
+import { FileHandlerOptions } from "../extensions/file-handler/extension";
+import { ImageOptions } from "../extensions/image/extension";
 import {
   EDITOR_EXTENSIONS,
   EDITOR_EXTENSIONS_CONFIG,
@@ -48,6 +49,8 @@ export type EditorExtensionsConfig = {
   paragraph: Partial<ParagraphOptions> | boolean;
   text: Partial<TextStyleOptions> | boolean;
   image: Partial<ImageOptions> | boolean;
+  fileHandler: Partial<FileHandlerOptions> | boolean;
+  skeleton: boolean;
   /**
    * Marks
    */

package/src/components/editor/lib/helpers.ts

@@ -1,17 +1,53 @@
+import Blockquote from "@tiptap/extension-blockquote";
+import Bold from "@tiptap/extension-bold";
+import Document from "@tiptap/extension-document";
+import HardBreak from "@tiptap/extension-hard-break";
+import Heading from "@tiptap/extension-heading";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import Italic from "@tiptap/extension-italic";
+import Link from "@tiptap/extension-link";
+import { BulletList, ListItem, ListKeymap, OrderedList } from "@tiptap/extension-list";
+import Paragraph from "@tiptap/extension-paragraph";
+import Strike from "@tiptap/extension-strike";
+import Text from "@tiptap/extension-text";
+import Underline from "@tiptap/extension-underline";
+import { Dropcursor, Gapcursor, TrailingNode, UndoRedo } from "@tiptap/extensions";
 import { generateHTML, generateJSON } from "@tiptap/html";
-import { EDITOR_EXTENSIONS_VALUES } from "./constants";
 import { EditorJSONContent } from "./types";
 
+const EXTENSIONS_FOR_GENERATION = [
+  Blockquote,
+  BulletList,
+  Document,
+  HardBreak,
+  Heading,
+  HorizontalRule,
+  ListItem,
+  OrderedList,
+  Paragraph,
+  Text,
+  Bold,
+  Italic,
+  Link,
+  Strike,
+  Underline,
+  Dropcursor,
+  Gapcursor,
+  UndoRedo,
+  ListKeymap,
+  TrailingNode,
+];
+
 /**
  * Convert text to editor content
  */
 export function convertHTMLToEditorContent(html: string): EditorJSONContent {
-  return generateJSON(html, EDITOR_EXTENSIONS_VALUES);
+  return generateJSON(html, EXTENSIONS_FOR_GENERATION);
 }
 
 /**
  * Convert editor content to text
  */
 export function convertEditorContentToHTML(content: EditorJSONContent): string {
-  return generateHTML(content, EDITOR_EXTENSIONS_VALUES);
+  return generateHTML(content, EXTENSIONS_FOR_GENERATION);
 }

package/src/components/editor/lib/utils.ts

@@ -1,3 +1,5 @@
+import type { Node as PMNode } from "@tiptap/pm/model";
+
 type ShortcutKeyResult = {
   symbol: string;
   readable: string;
@@ -199,3 +201,33 @@ export const filterFiles = <T extends FileInput>(
 
   return [validFiles, errors];
 };
+
+/**
+ * Helper for iterating through the nodes in a document that changed compared
+ * to the given previous document. Useful for avoiding duplicate work on each transaction.
+ * Source: https://github.com/ProseMirror/prosemirror-tables/blob/master/src/fixtables.js
+ */
+export function changedDescendants(
+  old: PMNode,
+  cur: PMNode,
+  offset: number,
+  f: (node: PMNode, pos: number) => void,
+) {
+  const oldSize = old.childCount,
+    curSize = cur.childCount;
+  outer: for (let i = 0, j = 0; i < curSize; i++) {
+    const child = cur.child(i);
+    for (let scan = j, e = Math.min(oldSize, i + 3); scan < e; scan++) {
+      if (old.child(scan) == child) {
+        j = scan + 1;
+        offset += child.nodeSize;
+        continue outer;
+      }
+    }
+    f(child, offset);
+    if (j < oldSize && old.child(j).sameMarkup(child))
+      changedDescendants(old.child(j), child, offset + 1, f);
+    else child.nodesBetween(0, child.content.size, f, offset + 1);
+    offset += child.nodeSize;
+  }
+}

package/src/components/editor/lib/variants.ts

@@ -1,5 +1,76 @@
+import { cn } from "@/lib/utils/cn";
 import { cva } from "class-variance-authority";
 
+/**
+ * Prose variants
+ */
 export const editorProseVariants = cva(
-  "prose dark:prose-invert prose-a:text-primary prose-li:marker:text-primary",
+  cn(
+    "prose dark:prose-invert",
+    "prose-a:text-primary",
+    "prose-headings:scroll-mt-20",
+    "prose-h1:mt-6 prose-h1:mb-3",
+    "prose-h2:mt-6 prose-h2:mb-3",
+    "prose-h3:mt-5 prose-h3:mb-2",
+    "prose-h4:mt-4 prose-h4:mb-2",
+    "prose-ul:my-3 prose-ol:my-3",
+    "prose-ul:pl-6 prose-ol:pl-6",
+    "prose-li:my-1",
+    "prose-li:marker:text-primary",
+    "prose-li:p-0",
+    "prose-img:my-0 prose-img:rounded-lg",
+    "prose-blockquote:my-4 prose-blockquote:py-1",
+    "prose-hr:my-6",
+    "prose-pre:my-4",
+  ),
+);
+
+/**
+ * Image variants
+ */
+export const editorImageVariants = cva(
+  cn(
+    // wrapper (TipTap sets display:block inline → override with !)
+    "[&_[data-resize-wrapper]]:!inline-block",
+    "[&_[data-resize-wrapper]]:!relative",
+    "[&_[data-resize-wrapper]]:max-w-full",
+    "[&_[data-resize-wrapper]]:overflow-hidden",
+
+    // handle base
+    "[&_[data-resize-handle]]:absolute",
+    "[&_[data-resize-handle]]:z-10",
+    "[&_[data-resize-handle]]:rounded-full",
+    "[&_[data-resize-handle]]:bg-muted/40",
+    "[&_[data-resize-handle]]:w-1.5",
+    "[&_[data-resize-handle]]:cursor-ew-resize",
+    "[&_[data-resize-handle]]:opacity-0",
+    "[&_[data-resize-handle]]:transition-opacity",
+
+    // show on hover / active
+    "[&:hover_[data-resize-handle]]:opacity-100",
+    "[&_[data-resize-state='true']_[data-resize-handle]]:opacity-100",
+
+    // ✅ override TipTap inline: top:0; bottom:0;
+    "[&_[data-resize-handle]]:!top-1/2",
+    "[&_[data-resize-handle]]:!bottom-auto",
+    "[&_[data-resize-handle]]:!-translate-y-1/2",
+
+    // ✅ half height (also must beat inline)
+    "[&_[data-resize-handle]]:!h-1/2",
+
+    // ✅ spacing from edge (beat inline left:0 / right:0)
+    "[&_[data-resize-handle='left']]:!left-2",
+    "[&_[data-resize-handle='right']]:!right-2",
+
+    // ✅ override inline visibility:hidden on the resize container while pending
+    "[&_[data-resize-container]:has(img[data-pending='true'])]:[visibility:visible!important]",
+    "[&_[data-resize-container]:has(img[data-pending='true'])]:[pointer-events:auto!important]",
+
+    // Pending img should behave like a skeleton block (even before wrapper exists)
+    "[&_img[data-pending='true']]:bg-primary/10",
+    "[&_img[data-pending='true']]:animate-pulse",
+    "[&_img[data-pending='true']]:rounded-md",
+    "[&_img[data-pending='true']]:opacity-0",
+    "[&_img[data-pending='true']]:min-h-[500px]",
+  ),
 );

package/src/components/entry.ts

@@ -3,15 +3,18 @@
  */
 export * from "./common/icons";
 export * from "./common/status";
-export * from "./editor/lib/types";
+export * from "./editor/extensions/file-handler/strategy";
 export * from "./editor/lib/helpers";
+export * from "./editor/lib/types";
 
 /**
  * Components Layouts
  */
 export * from "./layouts/admin-loading";
 export * from "./layouts/empty-page";
+export * from "./layouts/error-page";
 export * from "./layouts/list-layout";
+export * from "./layouts/not-allowed-page";
 export * from "./layouts/not-found-page";
 export * from "./layouts/root-loading";
 export * from "./layouts/tab-layout";

package/src/components/layouts/error-page.tsx

@@ -0,0 +1,61 @@
+import { cn } from "@/lib/utils/cn";
+import { ServerError } from "@/modules/router/lib/error.server";
+import { CommonORPCErrorCode } from "@orpc/client";
+import { BugIcon } from "lucide-react";
+import { ComponentProps } from "react";
+import { NotAllowedPage } from "./not-allowed-page";
+import { NotFoundSection } from "./not-found-section";
+
+/**
+ * ErrorPage
+ */
+export function ErrorPage({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div {...props} className={cn("relative z-0 grid h-dvh w-full place-items-center", className)}>
+      <div className="flex flex-col items-center gap-12 text-center">
+        <span className="text-destructive flex flex-col items-center gap-2">
+          <BugIcon className="size-20 xl:size-32" />
+          <h1 className="text-2xl font-bold lg:text-3xl">Oeps, er is iets fout gegaan.</h1>
+        </span>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * ErrorPage
+ * - If the error is a ServerError and the code is "UNAUTHORIZED", show the NotAllowedPage
+ * - If the error is a ServerError and the code is "NOT_FOUND", show the NotFoundSection
+ * - Else show the ErrorPage
+ */
+export function AdminErrorPage(props: { error: Error }) {
+  const serverErrorCode: CommonORPCErrorCode =
+    props.error instanceof ServerError ? props.error.code : undefined;
+
+  /**
+   * If the error is a ServerError and the code is "UNAUTHORIZED", show the NotAllowedPage
+   */
+  if (serverErrorCode === "UNAUTHORIZED") {
+    return (
+      <div className="p-content h-dvh">
+        <NotAllowedPage className="h-full" />
+      </div>
+    );
+  }
+
+  /**
+   * If the error is a ServerError and the code is "UNAUTHORIZED", show the NotAllowedPage
+   */
+  if (serverErrorCode === "NOT_FOUND") {
+    return (
+      <div className="relative z-0 grid h-dvh w-full place-items-center">
+        <NotFoundSection href="/admin" />
+      </div>
+    );
+  }
+
+  /**
+   * Else show the ErrorPage
+   */
+  return <ErrorPage />;
+}

package/src/components/layouts/not-allowed-page.tsx

@@ -14,7 +14,7 @@ export type NotAllowedPageProps = HTMLAttributes<HTMLDivElement> & {
   };
 };
 
-export default function NotAllowedPage({
+export function NotAllowedPage({
   title,
   description,
   callToAction,

package/src/components/navigation/admin-sidebar-paths.client.tsx

@@ -51,8 +51,24 @@ export function Paths({ children, ...props }: React.ComponentProps<typeof Sideba
 /**
  * Path Group
  */
-export function PathGroup(props: React.ComponentProps<"div">) {
-  return <SidebarGroup {...props} />;
+export type PathGroupProps = React.ComponentProps<"div"> & {
+  /**
+   * Permission to check with the any strategy for displaying the group
+   * @example { project: ["view", "create"], client: ["view"], drive: ["view"] }
+   */
+  permission?: Permission[];
+};
+
+export function PathGroup({ permission, ...props }: PathGroupProps) {
+  if (!permission) {
+    return <SidebarGroup {...props} />;
+  }
+
+  return (
+    <Allowed permission={permission} strategy="any">
+      <SidebarGroup {...props} />
+    </Allowed>
+  );
 }
 
 /**

package/src/components/ui/tooltip.client.tsx

@@ -48,7 +48,7 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );

package/src/lib/hooks/use-indicator.tsx

@@ -9,25 +9,9 @@ import { createContext, useContext, useEffect, useState, useTransition } from "r
 export type IndicatorStatus = "idle" | "pending" | "success" | "error";
 
 /**
- * Indicator context
+ * Use local indicator
  */
-type IndicatorContextType = {
-  status: IndicatorStatus;
-  setStatus: React.Dispatch<React.SetStateAction<IndicatorStatus>>;
-  startTransition: React.TransitionStartFunction;
-};
-
-export const IndicatorContext = createContext<IndicatorContextType>({} as IndicatorContextType);
-
-/**
- * Inline edit indicator context
- */
-export const useIndicator = () => useContext(IndicatorContext);
-
-/**
- * Indicator context provider
- */
-export function IndicatorContextProvider({ children }: { children: React.ReactNode }) {
+export function useLocalIndicator() {
   /**
    * Start transition
    */
@@ -54,6 +38,31 @@ export function IndicatorContextProvider({ children }: { children: React.ReactNo
     if (status === "error") setTimeout(() => setStatus("idle"), 2000);
   }, [status]);
 
+  return { status, setStatus, startTransition };
+}
+
+/**
+ * Indicator context
+ */
+type IndicatorContextType = {
+  status: IndicatorStatus;
+  setStatus: React.Dispatch<React.SetStateAction<IndicatorStatus>>;
+  startTransition: React.TransitionStartFunction;
+};
+
+export const IndicatorContext = createContext<IndicatorContextType>({} as IndicatorContextType);
+
+/**
+ * Inline edit indicator context
+ */
+export const useIndicator = () => useContext(IndicatorContext);
+
+/**
+ * Indicator context provider
+ */
+export function IndicatorContextProvider({ children }: { children: React.ReactNode }) {
+  const { status, setStatus, startTransition } = useLocalIndicator();
+
   return (
     <IndicatorContext.Provider value={{ status, setStatus, startTransition }}>
       {children}

package/src/modules/auth/components/allowed.client.tsx

@@ -1,20 +1,48 @@
 "use client";
 
 import { JSX } from "react";
-import { usePermission } from "../hooks/use-permission";
-import { type Permission } from "../lib/permissions";
+import { usePermission, UsePermissionProps } from "../hooks/use-permission";
 
 /**
- * Allowed
+ * Allowed types
  */
-type AllowedProps = {
-  permission: Permission;
+export type AllowedStrategy = "all" | "any";
+
+/**
+ * Allowed props
+ */
+export type AllowedProps = UsePermissionProps & {
+  // /**
+  //  * Permission to check
+  //  * @example { project: ["view", "create"] }
+  //  */
+  // permission: Permission;
+
+  // /**
+  //  * Strategy to use when checking multiple permissions
+  //  * - "all": all permissions must be allowed
+  //  * - "any": at least one permission must be allowed
+  //  * @default "all"
+  //  */
+  // strategy?: AllowedStrategy;
+
+  /**
+   * Fallback component to render if the user doesn't have the permission
+   * @default null
+   */
   fallback?: JSX.Element | string;
+
+  /**
+   * Children to render if the user has the permission
+   */
   children: React.ReactNode;
 };
 
-export function Allowed({ permission, fallback, children }: AllowedProps) {
-  const { data } = usePermission(permission);
+/**
+ * Allowed
+ */
+export function Allowed({ permission, strategy, fallback, children }: AllowedProps) {
+  const { data } = usePermission({ permission, strategy } as UsePermissionProps);
 
   if (data?.success) return <>{children}</>;
 

package/src/modules/auth/hooks/use-permission.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useSuspenseQueries } from "@tanstack/react-query";
+import { useSuspenseQueries, useSuspenseQuery } from "@tanstack/react-query";
 import { authClient } from "../handler/client.client";
 import { type Permission } from "../lib/permissions";
 import { useSession } from "./use-session";
@@ -8,7 +8,93 @@ import { useSession } from "./use-session";
 /**
  * UsePermission
  */
-export function usePermission(permission?: Permission) {
+export type UsePermissionProps =
+  | {
+      /**
+       * Strategy to use when checking multiple permissions
+       * - "all": all permissions must be allowed
+       * - "any": at least one permission must be allowed
+       * @default "all"
+       */
+      strategy?: "all";
+
+      /**
+       * Permission to check
+       * @example { project: ["view", "create"] }
+       */
+      permission?: Permission;
+    }
+  | {
+      /**
+       * Strategy to use when checking multiple permissions
+       * - "all": all permissions must be allowed
+       * - "any": at least one permission must be allowed
+       * @default "all"
+       */
+      strategy?: "any";
+
+      /**
+       * Permission to check
+       * @example [{ project: ["view", "create"] }, { client: ["view"] }, { drive: ["view"] }]
+       */
+      permission?: Permission[];
+    };
+
+export function usePermission({ permission, strategy = "all" }: UsePermissionProps) {
+  const sessionQuery = useSession();
+
+  return useSuspenseQuery({
+    queryKey: ["permission", { permission, strategy }],
+    queryFn: async () => {
+      // If no permission is provided, allow by default
+      if (!permission) return { permission, success: true };
+
+      // If no user is logged in, deny by default
+      if (!sessionQuery.data) return { permission, success: false };
+      const userId = sessionQuery.data?.user.id;
+      if (!userId) return { permission, success: false };
+
+      // If the strategy is "any", check if the user has any of the permissions
+      const permissions = Array.isArray(permission) ? permission : [permission];
+
+      // Check if the user has the permission
+      const results = await Promise.all(
+        permissions.map((permission) => authClient.admin.hasPermission({ permission, userId })),
+      );
+
+      const data = results.map(({ data }) => data).filter((data) => !!data);
+      const errors = results.filter(({ error }) => !!error).map(({ error }) => error);
+
+      // If there is an error, log it and return false
+      if (errors.length > 0) {
+        console.error(...errors);
+        return { permission, success: false };
+      }
+
+      // Determine if the user has the permission based on the strategy
+      const success =
+        strategy === "all"
+          ? data.every(({ success }) => success)
+          : data.some(({ success }) => success);
+
+      // Return the result
+      return {
+        permission,
+        success,
+      };
+    },
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+}
+
+/**
+ * Check multiple permissions in parallel
+ * @param permission
+ * @param strategy
+ * @returns
+ * @deprecated Use `usePermission` with strategy "any" or "all" instead
+ */
+export function usePermissions(permission?: Permission) {
   const sessionQuery = useSession();
 
   const keys = Object.entries(permission ?? {}).flatMap(([resource, permissions]) =>

package/src/modules/commands/hooks/use-command-menu.client.tsx

@@ -1,8 +1,5 @@
 "use client";
 
-import { Permission } from "@/modules/auth/entry";
-import { usePermission } from "@/modules/auth/hooks/use-permission";
-import { mergePermissions } from "@/modules/auth/lib/utils";
 import {
   type BulkCommandDefRenderParams,
   type CommandDef,
@@ -115,8 +112,8 @@ export function useSingleCommandMenu<TData, TMeta>({
   commands,
   meta,
 }: SingleCommandMenuProps<TData, TMeta> & { data: TData }) {
-  const permissions = commands.map((command) => command.permission).filter(Boolean) as Permission[];
-  usePermission(mergePermissions(permissions));
+  // const permissions = commands.map((command) => command.permission).filter(Boolean) as Permission[];
+  // usePermission(mergePermissions(permissions));
 
   // filter out commands that don't have valid conditions
   const validCommands = commands.filter((command) =>
@@ -142,8 +139,8 @@ export function useBulkCommandMenu<TData, TMeta>({
   commands,
   meta,
 }: BulkCommandMenuProps<TData, TMeta>) {
-  const permissions = commands.map((command) => command.permission).filter(Boolean) as Permission[];
-  usePermission(mergePermissions(permissions));
+  // const permissions = commands.map((command) => command.permission).filter(Boolean) as Permission[];
+  // usePermission(mergePermissions(permissions));
 
   /**
    * Filter out commands that don't have valid conditions

package/src/modules/data-tables/lib/filters/parsers.ts

@@ -65,6 +65,20 @@ export const parseFilterBoolean = <TSchema extends z.ZodType<boolean>>(
   encode: (decoded) => (decoded ? "true" : "false"),
 });
 
+/**
+ * Filter datetime value
+ */
+export type ParseFilterDatetimeSchema = z.ZodDate;
+
+export const parseFilterDatetime = <TSchema extends ParseFilterDatetimeSchema>(
+  schema: TSchema,
+): ParseFilter<TSchema> => ({
+  schema: schema.nullable(),
+  decode: (encoded) => (encoded ? new Date(encoded) : null) as unknown as z.input<TSchema>,
+  encode: (decoded) => (decoded ? decoded.toISOString() : ""),
+});
+
+
 /**
  * Filter range value
  */

package/src/modules/inline-edit/components/combobox-dropdown.client.tsx

@@ -9,14 +9,19 @@ import { cn } from "@/lib/utils/cn";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-export type InlineEditComboboxDropdownProps<TValue extends ComboboxDropdownItem> =
-  useInlineEditOptions<string> &
-    InlineEditVariantsProps &
-    Omit<ComboboxDropdownProps<TValue>, "onSelect"> & {
-      onSelect?: ComboboxDropdownProps<TValue>["onSelect"];
-    };
+export type InlineEditComboboxDropdownProps<
+  TValue extends ComboboxDropdownItem,
+  Required extends boolean = false,
+> = useInlineEditOptions<string, Required> &
+  InlineEditVariantsProps &
+  Omit<ComboboxDropdownProps<TValue>, "onSelect"> & {
+    onSelect?: ComboboxDropdownProps<TValue>["onSelect"];
+  };
 
-export function InlineComboboxDropdown<TValue extends ComboboxDropdownItem>({
+export function InlineComboboxDropdown<
+  TValue extends ComboboxDropdownItem,
+  Required extends boolean,
+>({
   selectedItem,
   variant,
   className,
@@ -24,13 +29,17 @@ export function InlineComboboxDropdown<TValue extends ComboboxDropdownItem>({
   initialValue,
   action,
   permission,
+  updateStrategy,
+  isRequired,
   disabled,
   ...props
-}: InlineEditComboboxDropdownProps<TValue>) {
-  const { setValue, handleUpdate, isAllowed } = useInlineEdit({
+}: InlineEditComboboxDropdownProps<TValue, Required>) {
+  const { handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   const initialSelectedItem = props.items.find((item) => item.id === initialValue);
@@ -38,12 +47,12 @@ export function InlineComboboxDropdown<TValue extends ComboboxDropdownItem>({
   return (
     <ComboboxDropdown
       {...props}
-      className={cn(inlineEditVariants({ variant }), className)}
+      className={cn(inlineEditVariants({ variant, status }), className)}
       disabled={disabled || !isAllowed}
       selectedItem={selectedItem ?? initialSelectedItem}
       onSelect={(event) => {
-        setValue(event.id);
-        handleUpdate(event.id);
+        handleChange(event.id ?? null);
+        handleBlur(event.id ?? null);
         onSelect?.(event);
       }}
     />