@tulip-systems/core 0.4.0 → 0.5.0

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

@@ -0,0 +1,195 @@
+import { BlockquoteOptions } from "@tiptap/extension-blockquote";
+import { BoldOptions } from "@tiptap/extension-bold";
+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 {
+  BulletListOptions,
+  ListItemOptions,
+  ListKeymapOptions,
+  OrderedListOptions,
+} from "@tiptap/extension-list";
+import { ParagraphOptions } from "@tiptap/extension-paragraph";
+import { StrikeOptions } from "@tiptap/extension-strike";
+import { ColorOptions, TextStyleOptions } from "@tiptap/extension-text-style";
+import { UnderlineOptions } from "@tiptap/extension-underline";
+import { DropcursorOptions, TrailingNodeOptions, UndoRedoOptions } from "@tiptap/extensions";
+import { Extension } from "@tiptap/react";
+import deepmerge from "deepmerge";
+import {
+  EDITOR_EXTENSIONS,
+  EDITOR_EXTENSIONS_CONFIG,
+  EDITOR_EXTENSIONS_KEYS,
+  EditorExtensions,
+} from "./constants";
+
+/**
+ * Editor extensions defaults
+ */
+/**
+ * Editor extensions map
+ */
+export type EditorExtensionsConfig = {
+  /**
+   * Nodes
+   */
+  blockquote: Partial<BlockquoteOptions> | boolean;
+  bulletList: Partial<BulletListOptions> | boolean;
+  document: boolean;
+  hardBreak: Partial<HardBreakOptions> | boolean;
+  heading: Partial<HeadingOptions> | boolean;
+  horizontalRule: Partial<HorizontalRuleOptions> | boolean;
+  listItem: Partial<ListItemOptions> | boolean;
+  orderedList: Partial<OrderedListOptions> | boolean;
+  paragraph: Partial<ParagraphOptions> | boolean;
+  text: Partial<TextStyleOptions> | boolean;
+  image: Partial<ImageOptions> | boolean;
+  // /**
+  //  * Marks
+  //  */
+  bold: Partial<BoldOptions> | boolean;
+  italic: Partial<ItalicOptions> | boolean;
+  link: Partial<LinkOptions> | boolean;
+  strike: Partial<StrikeOptions> | boolean;
+  underline: Partial<UnderlineOptions> | boolean;
+  highlight: Partial<HighlightOptions> | boolean;
+  /**
+   * Extensions
+   */
+  dropcursor: Partial<DropcursorOptions> | boolean;
+  gapcursor: boolean;
+  undoRedo: Partial<UndoRedoOptions> | boolean;
+  listKeymap: Partial<ListKeymapOptions> | boolean;
+  trailingNode: Partial<TrailingNodeOptions> | boolean;
+  textStyle: Partial<TextStyleOptions> | boolean;
+  color: Partial<ColorOptions> | boolean;
+};
+
+/**
+ * Create extension config
+ * @param name
+ * @param defaultOptions
+ * @returns
+ */
+export function createExtensionConfig<TName extends keyof EditorExtensionsConfig>(
+  name: TName,
+  defaultOptions: Partial<Exclude<EditorExtensionsConfig[TName], boolean>> = {},
+) {
+  return {
+    name,
+    configure: (options: EditorExtensionsConfig[TName]) => {
+      // Get extension
+      const extension = EDITOR_EXTENSIONS[name];
+
+      // If no options or no extension, return undefined
+      if (!options || !extension) return undefined;
+
+      // If no options are provided, return extension
+      if (typeof options === "boolean") return extension.configure(defaultOptions);
+
+      const extensionOptions = deepmerge(defaultOptions, options as object);
+
+      // If no options are provided, return extension else configure
+      return extension.configure(extensionOptions);
+    },
+  };
+}
+
+/**
+ *  Editor extensions config to extensions
+ */
+export function editorExtensionsConfigToExtensions(extensions?: Partial<EditorExtensionsConfig>) {
+  return EDITOR_EXTENSIONS_CONFIG.flatMap(({ name, configure }) => {
+    // Get the extension config
+    const value = extensions?.[name];
+
+    // if no value is provided, return extension
+    if (value === undefined) return configure(true) as Extension;
+
+    // If value is boolean, return extension
+    return configure(value as any) as Extension;
+  });
+}
+
+/**
+ * Editor extensions config result
+ */
+export function flattenEditorExtensionsConfig(
+  extensions?: Partial<EditorExtensionsConfig>,
+): EditorExtensionsConfigResult {
+  return EDITOR_EXTENSIONS_KEYS.reduce((acc, key) => {
+    const value = extensions?.[key as keyof EditorExtensionsConfig];
+
+    if (value === undefined) {
+      return {
+        ...acc,
+        [key]: true,
+      };
+    }
+
+    return {
+      ...acc,
+      [key]: typeof value === "boolean" ? value : true,
+    };
+  }, {} as EditorExtensionsConfigResult);
+}
+
+export type EditorExtensionsConfigResult = Record<keyof EditorExtensions, boolean>;
+
+// const { uploadImage } = useUploadEditor();
+// StarterKit,
+// Underline,
+// Link,
+// TextStyle,
+// Color,
+// Highlight.configure({ multicolor: true }),
+// Image.configure({
+//   allowBase64: false,
+// }),
+// FileHandler.configure({
+//   allowedMimeTypes: ["image/png", "image/jpeg", "image/gif", "image/webp"],
+//   onDrop: (currentEditor, files, pos) => {
+//     files.forEach((file) => {
+//       const fileReader = new FileReader();
+
+//       fileReader.readAsArrayBuffer(file);
+//       fileReader.onload = async () => {
+//         const response = await uploadImage(file);
+//         if (!response) return;
+
+//         currentEditor
+//           .chain()
+//           .insertContentAt(pos, {
+//             type: "image",
+//             attrs: { src: response.url },
+//           })
+//           .focus()
+//           .run();
+//       };
+//     });
+//   },
+//   onPaste: (currentEditor, files) => {
+//     files.forEach((file) => {
+//       const fileReader = new FileReader();
+
+//       fileReader.readAsArrayBuffer(file);
+//       fileReader.onload = async () => {
+//         const response = await uploadImage(file);
+//         if (!response) return;
+
+//         currentEditor
+//           .chain()
+//           .insertContentAt(currentEditor.state.selection.anchor, {
+//             type: "image",
+//             attrs: { src: response.url },
+//           })
+//           .focus()
+//           .run();
+//       };
+//     });
+//   },
+// }),

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

@@ -0,0 +1,17 @@
+import { generateHTML, generateJSON } from "@tiptap/html";
+import { EDITOR_EXTENSIONS_VALUES } from "./constants";
+import { EditorJSONContent } from "./types";
+
+/**
+ * Convert text to editor content
+ */
+export function convertHTMLToEditorContent(html: string): EditorJSONContent {
+  return generateJSON(html, EDITOR_EXTENSIONS_VALUES);
+}
+
+/**
+ * Convert editor content to text
+ */
+export function convertEditorContentToHTML(content: EditorJSONContent): string {
+  return generateHTML(content, EDITOR_EXTENSIONS_VALUES);
+}

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

@@ -0,0 +1,6 @@
+import type { JSONContent } from "@tiptap/react";
+
+/**
+ * Types
+ */
+export type EditorJSONContent = JSONContent;

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

@@ -0,0 +1,5 @@
+import { cva } from "class-variance-authority";
+
+export const editorProseVariants = cva(
+  "prose dark:prose-invert prose-a:text-primary prose-li:marker:text-primary",
+);

package/src/components/entry.client.ts

@@ -2,10 +2,8 @@
  * Components editor
  */
 export * from "./editor/components/content.client";
-export * from "./editor/components/fixed-menu.client";
-export * from "./editor/context.client";
-export * from "./editor/index.client";
-export * from "./editor/preview.client";
+export * from "./editor/components/editor.client";
+export * from "./editor/components/menu-fixed.client";
 
 /**
  * Components headers
@@ -37,6 +35,7 @@ export * from "./ui/collapsible.client";
 export * from "./ui/color-picker.client";
 export * from "./ui/combobox-dropdown.client";
 export * from "./ui/combobox.client";
+export * from "./ui/date-picker.client";
 export * from "./ui/dialog.client";
 export * from "./ui/drawer.client";
 export * from "./ui/form.client";
@@ -51,4 +50,3 @@ export * from "./ui/time-input.client";
 export * from "./ui/time-picker-input.client";
 export * from "./ui/toggle-group.client";
 export * from "./ui/tooltip.client";
-export * from "./ui/tree.client";

package/src/components/entry.ts

@@ -3,6 +3,8 @@
  */
 export * from "./common/icons";
 export * from "./common/status";
+export * from "./editor/lib/types";
+export * from "./editor/lib/helpers";
 
 /**
  * Components Layouts

package/src/components/header/bottom-bar.client.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils/cn";
+import { Allowed } from "@/modules/auth/components/allowed.client";
 import { Path } from "@/modules/config/paths/types";
 import Link from "next/link";
 import { useSelectedLayoutSegment } from "next/navigation";
@@ -38,18 +39,30 @@ export function BottomBarLinks({ paths, className, ...props }: BottomBarLinksPro
       {...props}
       className={cn("px-content flex flex-row items-center gap-6 text-sm font-medium", className)}
     >
-      {paths.map(({ href, name, segment }) => (
-        <Link
-          key={href}
-          href={href}
-          className={cn(
-            "text-muted-foreground hover:text-foreground w-fit text-nowrap break-keep transition-colors",
-            currentSegment === segment && "text-primary",
-          )}
-        >
-          {name}
-        </Link>
-      ))}
+      {paths.map(({ href, name, segment, permission }) => {
+        const children = (
+          <Link
+            key={href}
+            href={href}
+            className={cn(
+              "text-muted-foreground hover:text-foreground w-fit text-nowrap break-keep transition-colors",
+              currentSegment === segment && "text-primary",
+            )}
+          >
+            {name}
+          </Link>
+        );
+
+        if (permission) {
+          return (
+            <Allowed key={href} permission={permission}>
+              {children}
+            </Allowed>
+          );
+        }
+
+        return children;
+      })}
     </ul>
   );
 }

package/src/components/header/top-bar.client.tsx

@@ -26,7 +26,7 @@ export type TopbarProps = {
 
 export function Topbar({ children }: TopbarProps) {
   return (
-    <nav className="flex h-[var(--header-top-bar-height)] items-center justify-between overflow-x-auto border-b">
+    <nav className="flex h-(--header-top-bar-height) items-center justify-between overflow-x-auto border-b">
       <Indicator />
 
       {children}
@@ -52,7 +52,7 @@ export function TopbarTitle({
 }: TopbarTitleProps) {
   return (
     <div {...props} className={cn("flex h-full items-center gap-4", className)}>
-      <div className="h-full">
+      <div className="h-full min-w-fit">
         <HeaderTopbarBackButton />
         <HeaderTopbarMobileNavSwitcher />
       </div>

package/src/components/layouts/admin-content.client.tsx

@@ -9,7 +9,7 @@ export function AdminContent({ children, className, ...props }: ComponentProps<t
   const { isMobile, open } = useSidebar();
 
   return (
-    <ScrollArea {...props} className={cn("h-[100dvh] basis-full", className)}>
+    <ScrollArea {...props} className={cn("h-dvh basis-full", className)}>
       <div
         className={cn(
           "h-full max-w-[100vw]",

package/src/components/layouts/admin-layout.tsx

@@ -1,13 +1,10 @@
-import { AuthGuard } from "@/modules/auth/components/guard.client";
 import { PropsWithChildren } from "react";
 import { SidebarProvider } from "../ui/sidebar.client";
 
 export function AdminLayout(props: PropsWithChildren) {
   return (
-    <AuthGuard>
-      <SidebarProvider className="max-h-[100dvh] overflow-hidden border">
-        {props.children}
-      </SidebarProvider>
-    </AuthGuard>
+    <SidebarProvider className="max-h-[100dvh] overflow-hidden border">
+      {props.children}
+    </SidebarProvider>
   );
 }

package/src/components/layouts/providers.client.tsx

@@ -2,7 +2,7 @@
 
 import { Toaster } from "@/components/ui/sonner.client";
 import { IndicatorContextProvider } from "@/lib/hooks/use-indicator";
-import { getQueryClient } from "@/modules/config/router/query-client";
+import { getQueryClient } from "@/modules/router/lib/query-client";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ThemeProvider } from "next-themes";

package/src/components/layouts/root-layout.server.tsx

@@ -2,17 +2,14 @@ import "server-cli-only";
 
 import { cn } from "@/lib/utils/cn";
 import { registerFonts } from "@/lib/utils/fonts";
-import { TDatabaseSchema } from "@/modules/config/db/types";
-import { TulipConfig } from "@/modules/config/lib/config.server";
+import { TulipConfig } from "@/modules/config/lib/config";
 import type { Metadata, Viewport } from "next";
 import { PropsWithChildren } from "react";
 
 /**
  * Root layout metadata
  */
-export const generateRootLayoutMetadata = <TSchema extends TDatabaseSchema>(
-  config: TulipConfig<TSchema>,
-) => ({
+export const generateRootLayoutMetadata = (config: TulipConfig) => ({
   metadata: {
     title: config.general.name,
     description: "Developed by NewCode",

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

@@ -15,22 +15,34 @@ import {
 import { cn } from "@/lib/utils/cn";
 import { authClient } from "@/modules/auth/handler/client.client";
 import { useSession } from "@/modules/auth/hooks/use-session";
-import { ChevronsUpDownIcon, LaptopIcon, LogOutIcon, MoonIcon, SunIcon } from "lucide-react";
+import {
+  ChevronsUpDownIcon,
+  LaptopIcon,
+  LogOutIcon,
+  MoonIcon,
+  SettingsIcon,
+  SunIcon,
+  SunMoonIcon,
+} from "lucide-react";
 import { useTheme } from "next-themes";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { SidebarHeader, useSidebar } from "../entry.client";
+import React from "react";
+import { SidebarHeader, useSidebar } from "../ui/sidebar.client";
 
 export function AdminSidebarHeader() {
   const router = useRouter();
   const { theme, setTheme } = useTheme();
 
+  const [open, setOpen] = React.useState(false);
+
   const { setOpenMobile } = useSidebar();
 
   const sessionQuery = useSession();
 
   return (
     <SidebarHeader>
-      <DropdownMenu>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
         <DropdownMenuTrigger asChild>
           <Button variant="outline" className="items-center justify-between py-3.5">
             <div className="flex items-center gap-4">
@@ -51,8 +63,18 @@ export function AdminSidebarHeader() {
         </DropdownMenuTrigger>
 
         <DropdownMenuContent className="w-44">
+          <DropdownMenuItem asChild>
+            <Link href="/admin/settings" onClick={() => setOpenMobile(false)}>
+              <SettingsIcon className="mr-2 h-4 w-4" />
+              <span>Instellingen</span>
+            </Link>
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator />
+
           <DropdownMenuSub>
             <DropdownMenuSubTrigger>
+              <SunMoonIcon className="mr-2 h-4 w-4" />
               <span>Thema</span>
             </DropdownMenuSubTrigger>
 
@@ -83,13 +105,35 @@ export function AdminSidebarHeader() {
             </DropdownMenuSubContent>
           </DropdownMenuSub>
 
-          <DropdownMenuSeparator />
+          {/* 
+          <DropdownMenuItem
+            onClick={() => {
+              setOpenMobile(false);
+              setOpen(false);
+              authClient.passkey.addPasskey({
+                fetchOptions: {
+                  onSuccess: () => {
+                    toast.success("Passkey succesvol toegevoegd");
+                  },
+                },
+              });
+            }}
+          >
+            <Icons.add className="mr-2 h-4 w-4" />
+            <span>Passkey</span>
+          </DropdownMenuItem> */}
 
           <DropdownMenuItem
             onClick={() => {
               setOpenMobile(false);
+              setOpen(false);
+
               authClient.signOut({
-                fetchOptions: { onSuccess: () => router.replace("/auth/login") },
+                fetchOptions: {
+                  onSuccess: () => {
+                    router.replace("/auth/login");
+                  },
+                },
               });
             }}
           >

package/src/components/ui/accordion.tsx

@@ -38,8 +38,8 @@ function AccordionTrigger({
         )}
         {...props}
       >
+        {/* <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" /> */}
         {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   );