@tulip-systems/core 0.2.0

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

@@ -0,0 +1,173 @@
+"use client";
+
+import { ItemInstance } from "@headless-tree/core";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronDownIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils/cn";
+
+interface TreeContextValue<T = any> {
+  indent: number;
+  currentItem?: ItemInstance<T>;
+  tree?: any;
+}
+
+const TreeContext = React.createContext<TreeContextValue>({
+  indent: 20,
+  currentItem: undefined,
+  tree: undefined,
+});
+
+function useTreeContext<T = any>() {
+  return React.useContext(TreeContext) as TreeContextValue<T>;
+}
+
+interface TreeProps extends React.HTMLAttributes<HTMLDivElement> {
+  indent?: number;
+  tree?: any;
+}
+
+function Tree({ indent = 20, tree, className, ...props }: TreeProps) {
+  const containerProps =
+    tree && typeof tree.getContainerProps === "function" ? tree.getContainerProps() : {};
+  const mergedProps = { ...props, ...containerProps };
+
+  // Extract style from mergedProps to merge with our custom styles
+  const { style: propStyle, ...otherProps } = mergedProps;
+
+  // Merge styles
+  const mergedStyle = {
+    ...propStyle,
+    "--tree-indent": `${indent}px`,
+  } as React.CSSProperties;
+
+  return (
+    <TreeContext.Provider value={{ indent, tree }}>
+      <div
+        data-slot="tree"
+        style={mergedStyle}
+        className={cn("flex flex-col", className)}
+        {...otherProps}
+      />
+    </TreeContext.Provider>
+  );
+}
+
+interface TreeItemProps<T = any> extends React.HTMLAttributes<HTMLButtonElement> {
+  item: ItemInstance<T>;
+  indent?: number;
+  asChild?: boolean;
+}
+
+function TreeItem<T = any>({
+  item,
+  className,
+  asChild,
+  children,
+  ...props
+}: Omit<TreeItemProps<T>, "indent">) {
+  const { indent } = useTreeContext<T>();
+
+  const itemProps = typeof item.getProps === "function" ? item.getProps() : {};
+  const mergedProps = { ...props, ...itemProps };
+
+  // Extract style from mergedProps to merge with our custom styles
+  const { style: propStyle, ...otherProps } = mergedProps;
+
+  // Merge styles
+  const mergedStyle = {
+    ...propStyle,
+    "--tree-padding": `${item.getItemMeta().level * indent}px`,
+  } as React.CSSProperties;
+
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <TreeContext.Provider value={{ indent, currentItem: item }}>
+      <Comp
+        data-slot="tree-item"
+        style={mergedStyle}
+        className={cn(
+          "ps-(--tree-padding) outline-hidden not-last:pb-0.5 z-10 select-none focus:z-20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          className,
+        )}
+        data-focus={typeof item.isFocused === "function" ? item.isFocused() || false : undefined}
+        data-folder={typeof item.isFolder === "function" ? item.isFolder() || false : undefined}
+        data-selected={
+          typeof item.isSelected === "function" ? item.isSelected() || false : undefined
+        }
+        data-drag-target={
+          typeof item.isDragTarget === "function" ? item.isDragTarget() || false : undefined
+        }
+        data-search-match={
+          typeof item.isMatchingSearch === "function" ? item.isMatchingSearch() || false : undefined
+        }
+        aria-expanded={item.isExpanded()}
+        {...otherProps}
+      >
+        {children}
+      </Comp>
+    </TreeContext.Provider>
+  );
+}
+
+interface TreeItemLabelProps<T = any> extends React.HTMLAttributes<HTMLSpanElement> {
+  item?: ItemInstance<T>;
+}
+
+function TreeItemLabel<T = any>({
+  item: propItem,
+  children,
+  className,
+  ...props
+}: TreeItemLabelProps<T>) {
+  const { currentItem } = useTreeContext<T>();
+  const item = propItem || currentItem;
+
+  if (!item) {
+    console.warn("TreeItemLabel: No item provided via props or context");
+    return null;
+  }
+
+  return (
+    <span
+      data-slot="tree-item-label"
+      className={cn(
+        "in-focus-visible:ring-ring/50 bg-background hover:bg-accent in-data-[selected=true]:bg-accent in-data-[selected=true]:text-accent-foreground in-data-[drag-target=true]:bg-accent in-focus-visible:ring-[3px] in-data-[search-match=true]:bg-blue-400/20! not-in-data-[folder=true]:ps-7 flex items-center gap-1 rounded-sm px-2 py-1.5 text-sm transition-colors [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      {item.isFolder() && (
+        <ChevronDownIcon className="text-muted-foreground in-aria-[expanded=false]:-rotate-90 size-4" />
+      )}
+      {children || (typeof item.getItemName === "function" ? item.getItemName() : null)}
+    </span>
+  );
+}
+
+function TreeDragLine({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  const { tree } = useTreeContext();
+
+  if (!tree || typeof tree.getDragLineStyle !== "function") {
+    console.warn(
+      "TreeDragLine: No tree provided via context or tree does not have getDragLineStyle method",
+    );
+    return null;
+  }
+
+  const dragLine = tree.getDragLineStyle();
+  return (
+    <div
+      style={dragLine}
+      className={cn(
+        "bg-primary before:bg-background before:border-primary absolute z-30 -mt-px h-0.5 w-[unset] before:absolute before:-top-[3px] before:left-0 before:size-2 before:rounded-full before:border-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Tree, TreeDragLine, TreeItem, TreeItemLabel };

package/src/entry.ts

@@ -0,0 +1,104 @@
+/**
+ * Entrypoints for Vite
+ */
+export const entry = {
+  /**
+   * Components
+   */
+  components: "./src/components/entry.ts",
+  "components/client": "./src/components/entry.client.ts",
+  "components/server": "./src/components/entry.server.ts",
+  /**
+   * Lib
+   */
+  lib: "./src/lib/entry.ts",
+  "lib/client": "./src/lib/entry.client.ts",
+  "lib/server": "./src/lib/entry.server.ts",
+  /**
+   * Auth Module
+   */
+  auth: "./src/modules/auth/entry.ts",
+  "auth/client": "./src/modules/auth/entry.client.ts",
+  "auth/server": "./src/modules/auth/entry.server.ts",
+  /**
+   * Commands Module
+   */
+  commands: "./src/modules/commands/entry.ts",
+  "commands/client": "./src/modules/commands/entry.client.ts",
+  "commands/server": "./src/modules/commands/entry.server.ts",
+  /**
+   * Config Module
+   */
+  config: "./src/modules/config/entry.ts",
+  "config/client": "./src/modules/config/entry.client.ts",
+  "config/server": "./src/modules/config/entry.server.ts",
+  /**
+   * Data Table Module
+   */
+  "data-tables": "./src/modules/data-tables/entry.ts",
+  "data-tables/client": "./src/modules/data-tables/entry.client.ts",
+  "data-tables/server": "./src/modules/data-tables/entry.server.ts",
+  /**
+   * Inline Edit Module
+   */
+  "inline-edit": "./src/modules/inline-edit/entry.ts",
+  "inline-edit/client": "./src/modules/inline-edit/entry.client.ts",
+  "inline-edit/server": "./src/modules/inline-edit/entry.server.ts",
+  /**
+   * Uploads Module
+   */
+  uploads: "./src/modules/uploads/entry.ts",
+  "uploads/client": "./src/modules/uploads/entry.client.ts",
+  "uploads/server": "./src/modules/uploads/entry.server.ts",
+};
+
+// export const entry = [
+//   /**
+//    * Components
+//    */
+//   "./src/components/entry.ts",
+//   "./src/components/entry.client.ts",
+//   "./src/components/entry.server.ts",
+//   /**
+//    * Lib
+//    */
+//   "./src/lib/entry.ts",
+//   "./src/lib/entry.client.ts",
+//   "./src/lib/entry.server.ts",
+//   /**
+//    * Auth Module
+//    */
+//   "./src/modules/auth/entry.ts",
+//   "./src/modules/auth/entry.client.ts",
+//   "./src/modules/auth/entry.server.ts",
+//   /**
+//    * Commands Module
+//    */
+//   "./src/modules/commands/entry.ts",
+//   "./src/modules/commands/entry.client.ts",
+//   "./src/modules/commands/entry.server.ts",
+//   /**
+//    * Config Module
+//    */
+//   "./src/modules/config/entry.ts",
+//   "./src/modules/config/entry.client.ts",
+//   "./src/modules/config/entry.server.ts",
+//   /**
+//    * Data Table Module
+//    */
+//   "./src/modules/data-tables/entry.ts",
+//   "./src/modules/data-tables/entry.client.ts",
+//   "./src/modules/data-tables/entry.server.ts",
+//   /**
+//    * Inline Edit Module
+//    */
+//   "./src/modules/inline-edit/entry.ts",
+//   "./src/modules/inline-edit/entry.client.ts",
+//   "./src/modules/inline-edit/entry.server.ts",
+//   /**
+//    * Uploads Module
+//    */
+//   "./src/modules/uploads/entry.ts",
+//   "./src/modules/uploads/entry.client.ts",
+//   "./src/modules/uploads/entry.server.ts",
+// ];

package/src/lib/config/constants.ts

@@ -0,0 +1 @@
+export const BUCKET_NAME = process.env.S3_BUCKET ?? "";

package/src/lib/entry.client.ts

@@ -0,0 +1,6 @@
+/**
+ * Hooks
+ */
+export * from "./hooks/use-action";
+export * from "./hooks/use-indicator";
+export * from "./hooks/use-mobile.client";

package/src/lib/entry.ts

@@ -0,0 +1,19 @@
+/**
+ * Config
+ */
+export * from "./config/constants";
+
+/**
+ * Types
+ */
+export * from "./types/config";
+
+/**
+ * Utils
+ */
+export * from "./utils/array-move";
+export * from "./utils/cn";
+export * from "./utils/fonts";
+export * from "./utils/format";
+export * from "./utils/manifest";
+export * from "./utils/url";

package/src/lib/hooks/use-action.ts

@@ -0,0 +1,54 @@
+import "client-only";
+
+import {
+  DefaultError,
+  MutationFunctionContext,
+  useMutation,
+  UseMutationOptions,
+} from "@tanstack/react-query";
+import { isRedirectError } from "next/dist/client/components/redirect-error";
+import { toast } from "sonner";
+import { useIndicator } from "./use-indicator";
+
+/**
+ * Hook for handling form actions
+ * @param {HookSafeActionFn} action
+ * @param {HookCallbacks} options
+ * @returns
+ */
+export function useAction<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TContext = MutationFunctionContext,
+>(options?: UseMutationOptions<TData, TError, TVariables, TContext> & { onRedirect?: () => void }) {
+  const indicator = useIndicator();
+
+  return useMutation({
+    ...options,
+    onMutate: (...params) => {
+      indicator.setStatus("pending");
+      return options?.onMutate?.(...params) as TContext | Promise<TContext>;
+    },
+    onSuccess: (...params) => {
+      indicator.setStatus("success");
+      return options?.onSuccess?.(...params);
+    },
+    onError: (...params) => {
+      const [err] = params;
+
+      if (isRedirectError(err)) {
+        indicator.setStatus("success");
+        options?.onRedirect?.();
+        throw err;
+      }
+
+      indicator.setStatus("error");
+      toast.error("Er ging iets mis", {
+        description: err instanceof Error ? err.message : undefined,
+      });
+
+      return options?.onError?.(...params);
+    },
+  });
+}

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

@@ -0,0 +1,62 @@
+"use client";
+
+import type React from "react";
+import { createContext, useContext, useEffect, useState, useTransition } from "react";
+
+/**
+ * Indicator status
+ */
+export type IndicatorStatus = "idle" | "pending" | "success" | "error";
+
+/**
+ * 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 }) {
+  /**
+   * Start transition
+   */
+  const [isPending, startTransition] = useTransition();
+
+  /**
+   * Status of the inline edit indicator
+   */
+  const [status, setStatus] = useState<IndicatorStatus>("idle");
+
+  /**
+   * Set status to pending when isPending is true
+   */
+  useEffect(() => {
+    if (isPending) setStatus("pending");
+  }, [isPending]);
+
+  /**
+   * Set status back to idle after 1.5 seconds when status is succes
+   * Set status back to idle after 3 seconds when status is error
+   */
+  useEffect(() => {
+    if (status === "success") setTimeout(() => setStatus("idle"), 1000);
+    if (status === "error") setTimeout(() => setStatus("idle"), 2000);
+  }, [status]);
+
+  return (
+    <IndicatorContext.Provider value={{ status, setStatus, startTransition }}>
+      {children}
+    </IndicatorContext.Provider>
+  );
+}

package/src/lib/hooks/use-mobile.client.tsx

@@ -0,0 +1,21 @@
+import "client-only";
+
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return isMobile;
+}

package/src/lib/types/config.ts

@@ -0,0 +1,8 @@
+import { type LucideIcon } from "lucide-react";
+
+export type ConfigWithIcon<TValue> = {
+  value: TValue;
+  label: string;
+  icon: LucideIcon;
+  className: string;
+};

package/src/lib/utils/array-move.ts

@@ -0,0 +1,8 @@
+/**
+ * Move an array item to a different position. Returns a new array with the item moved to the new position.
+ */
+export function arrayMove<T>(array: T[], params: { fromIndex: number; toIndex: number }): T[] {
+  const [item] = array.slice(params.fromIndex, params.fromIndex + 1);
+  if (!item) return array;
+  return array.toSpliced(params.fromIndex, 1).toSpliced(params.toIndex, 0, item);
+}

package/src/lib/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/utils/fonts.ts

@@ -0,0 +1,8 @@
+import { Inter } from "next/font/google";
+
+export const fontSans = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+export const registerFonts = () => fontSans.variable;

package/src/lib/utils/format.ts

@@ -0,0 +1,104 @@
+/**
+ * Format date to locale string
+ * @param date: string | null | undefined
+ * @returns Date in format: 01/01/2021
+ */
+export function formatDate(date: string | Date | null | undefined): string {
+  if (!date) return "";
+
+  return new Date(date).toLocaleDateString("nl-BE", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  });
+}
+
+/**
+ * Format date to locale string
+ * @param date: string | null | undefined
+ * @returns Date in format: 01/01/2021 01:01:01
+ */
+export function formatDateTime(date: string | Date | null | undefined): string {
+  if (!date) return "";
+
+  return new Date(date).toLocaleDateString("nl-BE", {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+}
+
+/**
+ * Format currency to locale string
+ * @param amount: number | null | undefined
+ * @returns Currency in format: € 1.000,00
+ */
+export function formatCurrency(amount: number | string | null | undefined): string {
+  if (amount == null) return "";
+
+  const formatter = new Intl.NumberFormat("nl-BE", {
+    style: "currency",
+    currency: "EUR",
+  });
+
+  return formatter.format(Number(amount.toString()));
+}
+
+/**
+ * Format Time to locale string
+ * @param date: string | null | undefined
+ * @returns Time in format: 01:01:01
+ */
+export function formatTime(date: string | Date | null | undefined): string {
+  if (!date) return "";
+
+  return new Date(date).toLocaleString("nl-BE", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+}
+
+/**
+ * Format duration to locale string
+ * @param duration number | null | undefined
+ * @returns Duration in format: 01:01:01
+ */
+export function formatDuration(durationInSeconds: number | null | undefined): string {
+  if (durationInSeconds == null) return "";
+
+  const hours = Math.floor(durationInSeconds / 3600);
+  const minutes = Math.floor((durationInSeconds % 3600) / 60);
+  const seconds = durationInSeconds % 60;
+
+  const formatted = [
+    hours.toString().padStart(2, "0"),
+    minutes.toString().padStart(2, "0"),
+    seconds.toString().padStart(2, "0"),
+  ];
+
+  return formatted.join(":");
+}
+
+/**
+ * Format phone number
+ * @param phone string | null | undefined
+ * @returns Phone number in format: +32 000 00 00 00
+ */
+export function formatPhone(phone: string | null | undefined): string {
+  if (!phone) return "";
+
+  return phone.toString().replace(/(\d{2})(\d{3})(\d{2})(\d{2})(\d{2})/, "$1 $2 $3 $4 $5");
+}
+
+export function formatAssetSize(size: number | null | undefined) {
+  if (size == null) return "";
+
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const index = Math.floor(Math.log(size) / Math.log(1024));
+  const newSize = +(size / 1024 ** index).toFixed(2);
+  return `${newSize} ${units[index]}`;
+}

package/src/lib/utils/manifest.ts

@@ -0,0 +1,35 @@
+import { type TDatabaseSchema } from "@/modules/config/db/types";
+import { type TulipConfig } from "@/modules/config/lib/config.server";
+import { MetadataRoute } from "next";
+
+export function generateManifest<TSchema extends TDatabaseSchema>(config: TulipConfig<TSchema>) {
+  return (): MetadataRoute.Manifest => ({
+    name: config.general.name,
+    short_name: config.general.shortName,
+    description: "Developed by NewCode",
+    theme_color: "#ffffff",
+    background_color: "#ffffff",
+    display: "standalone",
+    display_override: ["tabbed" as any],
+    orientation: "portrait",
+    start_url: "/",
+    icons: [
+      {
+        src: "/icons/icon-x192.png",
+        sizes: "192x192",
+        type: "image/png",
+      },
+      {
+        src: "/icons/icon-x512.png",
+        sizes: "512x512",
+        type: "image/png",
+      },
+      {
+        src: "/icons/icon-x512.png",
+        type: "image/png",
+        sizes: "512x512",
+        purpose: "maskable",
+      },
+    ],
+  });
+}