@tulip-systems/core 0.2.0

package/src/components/editor/components/fixed-menu.client.tsx

@@ -0,0 +1,143 @@
+import { ColorPicker } from "@/components/ui/color-picker.client";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import {
+  BaselineIcon,
+  BoldIcon,
+  EraserIcon,
+  ItalicIcon,
+  PaintBucketIcon,
+  RedoIcon,
+  StrikethroughIcon,
+  UnderlineIcon,
+  UndoIcon,
+} from "lucide-react";
+import { useContext } from "react";
+import { EditorContext } from "../context.client";
+import { BlockDropdown } from "./block-dropdown";
+
+export function FixedMenu() {
+  const { editor } = useContext(EditorContext);
+
+  return (
+    <div className="border-input bg-muted/30 z-10 flex items-center gap-3 overflow-auto border-b p-2">
+      <div className="flex items-center gap-1">
+        <Button
+          onClick={() => editor.commands.undo()}
+          disabled={!editor?.can().undo()}
+          type="button"
+          aria-label="Undo"
+          size="icon"
+          className="p-2"
+          variant="outline"
+        >
+          <UndoIcon className="size-3.5" />
+        </Button>
+
+        <Button
+          onClick={() => editor.commands.redo()}
+          disabled={!editor?.can().redo()}
+          type="button"
+          aria-label="Redo"
+          size="icon"
+          className="p-2"
+          variant="outline"
+        >
+          <RedoIcon className="size-3.5" />
+        </Button>
+      </div>
+
+      <Separator orientation="vertical" className="h-8" />
+
+      <BlockDropdown />
+
+      <Separator orientation="vertical" className="h-8" />
+
+      <div className="flex items-center gap-1">
+        <Button
+          type="button"
+          size="icon"
+          variant={editor?.isActive("bold") ? "secondary" : "outline"}
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          className="border"
+        >
+          <BoldIcon className="h-3.5 w-3.5" />
+        </Button>
+
+        <Button
+          type="button"
+          size="icon"
+          variant={editor?.isActive("italic") ? "secondary" : "outline"}
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          className="border"
+        >
+          <ItalicIcon className="size-3.5" />
+        </Button>
+
+        <Button
+          type="button"
+          size="icon"
+          variant={editor?.isActive("underline") ? "secondary" : "outline"}
+          onClick={() => editor.chain().focus().toggleUnderline().run()}
+          className="border"
+        >
+          <UnderlineIcon className="size-3.5" />
+        </Button>
+
+        <Button
+          type="button"
+          size="icon"
+          variant={editor?.isActive("strike") ? "secondary" : "outline"}
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          className="border"
+        >
+          <StrikethroughIcon className="size-3.5" />
+        </Button>
+      </div>
+
+      <Separator orientation="vertical" className="h-8" />
+
+      <div className="flex items-center gap-1">
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button size="icon" variant="outline">
+              <BaselineIcon className="size-3.5" />
+            </Button>
+          </PopoverTrigger>
+
+          <PopoverContent className="w-fit p-0">
+            <ColorPicker onValueChange={(color) => editor.chain().focus().setColor(color).run()} />
+          </PopoverContent>
+        </Popover>
+
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button size="icon" variant="outline" disabled={!editor?.can().setHighlight()}>
+              <PaintBucketIcon className="size-3.5" />
+            </Button>
+          </PopoverTrigger>
+
+          <PopoverContent className="w-fit p-0">
+            <ColorPicker
+              onValueChange={(color) => editor.chain().focus().setHighlight({ color }).run()}
+            />
+          </PopoverContent>
+        </Popover>
+
+        <Button
+          type="button"
+          size="icon"
+          variant="outline"
+          className="border"
+          onClick={() => {
+            editor.commands.unsetColor();
+            editor.commands.unsetHighlight();
+          }}
+        >
+          <EraserIcon className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/editor/components/spinner.tsx

@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils/cn";
+
+export function SpinnerComponent({ ref, className, ...props }: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      className={cn("animate-spin", className)}
+      {...props}
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  );
+}

package/src/components/editor/context.client.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { cn } from "@/lib/utils/cn";
+import { createContext, PropsWithChildren } from "react";
+
+import { Color } from "@tiptap/extension-color";
+import Highlight from "@tiptap/extension-highlight";
+import Link from "@tiptap/extension-link";
+import { TextStyle } from "@tiptap/extension-text-style";
+import Underline from "@tiptap/extension-underline";
+import { Content, Editor, JSONContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+
+/**
+ * Editor context
+ */
+type EditorContextValue = {
+  editor: Editor;
+};
+
+export const EditorContext = createContext({} as EditorContextValue);
+
+/**
+ * Editor context provider
+ */
+type EditorContextProviderProps = PropsWithChildren<{
+  value?: Content;
+  onChange?: (value: JSONContent) => void;
+  disabled?: boolean;
+  className?: string;
+}>;
+
+export function EditorContextProvider({
+  value,
+  onChange,
+  disabled,
+  className,
+  children,
+}: EditorContextProviderProps) {
+  // const { uploadImage } = useUploadEditor();
+
+  const editor = useEditor({
+    extensions: [
+      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();
+      //       };
+      //     });
+      //   },
+      // }),
+    ],
+    content: value,
+    onUpdate: ({ editor }) => onChange?.(editor.getJSON()),
+    editable: !disabled,
+    injectCSS: false,
+    immediatelyRender: false,
+    editorProps: {
+      transformPastedHTML: (html) => html.replace(/<img.*?>/g, ""),
+      attributes: {
+        class: cn(
+          "prose max-w-full min-h-96 dark:prose-invert p-5 focus:outline-none prose-a:text-primary prose-li:marker:text-primary",
+          className,
+        ),
+      },
+    },
+  });
+
+  if (!editor) return null;
+
+  return <EditorContext.Provider value={{ editor }}>{children}</EditorContext.Provider>;
+}

package/src/components/editor/index.client.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils/cn";
+import { type HTMLAttributes } from "react";
+import { EditorContent } from "./components/content.client";
+import { FixedMenu } from "./components/fixed-menu.client";
+
+export function Editor({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("border-input rounded-lg border", className)} {...props}>
+      <FixedMenu />
+      <EditorContent />
+    </div>
+  );
+}

package/src/components/editor/preview.client.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { Content } from "@tiptap/react";
+import { EditorContent } from "./components/content.client";
+import { EditorContextProvider } from "./context.client";
+
+export function EditorPreview({ value }: { value?: Content }) {
+  return (
+    <EditorContextProvider value={value} className="min-h-0 p-0" disabled>
+      <EditorContent />
+    </EditorContextProvider>
+  );
+}

package/src/components/editor/utils.ts

@@ -0,0 +1,201 @@
+type ShortcutKeyResult = {
+  symbol: string;
+  readable: string;
+};
+
+export type FileError = {
+  file: File | string;
+  reason: "type" | "size" | "invalidBase64" | "base64NotAllowed";
+};
+
+export type FileValidationOptions = {
+  allowedMimeTypes: string[];
+  maxFileSize?: number;
+  allowBase64: boolean;
+};
+
+type FileInput = File | { src: string | File; alt?: string; title?: string };
+
+export const isClient = (): boolean => typeof window !== "undefined";
+export const isServer = (): boolean => !isClient();
+export const isMacOS = (): boolean => isClient() && window.navigator.platform === "MacIntel";
+
+const shortcutKeyMap: Record<string, ShortcutKeyResult> = {
+  mod: isMacOS() ? { symbol: "⌘", readable: "Command" } : { symbol: "Ctrl", readable: "Control" },
+  alt: isMacOS() ? { symbol: "⌥", readable: "Option" } : { symbol: "Alt", readable: "Alt" },
+  shift: { symbol: "⇧", readable: "Shift" },
+};
+
+export const getShortcutKey = (key: string): ShortcutKeyResult =>
+  shortcutKeyMap[key.toLowerCase()] || { symbol: key, readable: key };
+
+export const getShortcutKeys = (keys: string[]): ShortcutKeyResult[] => keys.map(getShortcutKey);
+
+export const isUrl = (
+  text: string,
+  options: { requireHostname: boolean; allowBase64?: boolean } = { requireHostname: false },
+): boolean => {
+  if (text.includes("\n")) return false;
+
+  try {
+    const url = new URL(text);
+    const blockedProtocols = [
+      "javascript:",
+      "file:",
+      "vbscript:",
+      ...(options.allowBase64 ? [] : ["data:"]),
+    ];
+
+    if (blockedProtocols.includes(url.protocol)) return false;
+    if (options.allowBase64 && url.protocol === "data:")
+      return /^data:image\/[a-z]+;base64,/.test(text);
+    if (url.hostname) return true;
+
+    return (
+      url.protocol !== "" &&
+      (url.pathname.startsWith("//") || url.pathname.startsWith("http")) &&
+      !options.requireHostname
+    );
+  } catch {
+    return false;
+  }
+};
+
+export const sanitizeUrl = (
+  url: string | null | undefined,
+  options: { allowBase64?: boolean } = {},
+): string | undefined => {
+  if (!url) return undefined;
+
+  if (options.allowBase64 && url.startsWith("data:image")) {
+    return isUrl(url, { requireHostname: false, allowBase64: true }) ? url : undefined;
+  }
+
+  return isUrl(url, { requireHostname: false, allowBase64: options.allowBase64 }) ||
+    /^(\/|#|mailto:|sms:|fax:|tel:)/.test(url)
+    ? url
+    : `https://${url}`;
+};
+
+export const blobUrlToBase64 = async (blobUrl: string): Promise<string> => {
+  const response = await fetch(blobUrl);
+  const blob = await response.blob();
+
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      if (typeof reader.result === "string") {
+        resolve(reader.result);
+      } else {
+        reject(new Error("Failed to convert Blob to base64"));
+      }
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+};
+
+export const randomId = (): string => Math.random().toString(36).slice(2, 11);
+
+export const fileToBase64 = (file: File | Blob): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      if (typeof reader.result === "string") {
+        resolve(reader.result);
+      } else {
+        reject(new Error("Failed to convert File to base64"));
+      }
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+};
+
+const validateFileOrBase64 = <T extends FileInput>(
+  input: File | string,
+  options: FileValidationOptions,
+  originalFile: T,
+  validFiles: T[],
+  errors: FileError[],
+): void => {
+  const { isValidType, isValidSize } = checkTypeAndSize(input, options);
+
+  if (isValidType && isValidSize) {
+    validFiles.push(originalFile);
+  } else {
+    if (!isValidType) errors.push({ file: input, reason: "type" });
+    if (!isValidSize) errors.push({ file: input, reason: "size" });
+  }
+};
+
+const checkTypeAndSize = (
+  input: File | string,
+  { allowedMimeTypes, maxFileSize }: FileValidationOptions,
+): { isValidType: boolean; isValidSize: boolean } => {
+  const mimeType = input instanceof File ? input.type : base64MimeType(input);
+  const size = input instanceof File ? input.size : atob(input.split(",")[1] ?? "").length;
+
+  const isValidType =
+    allowedMimeTypes.length === 0 ||
+    allowedMimeTypes.includes(mimeType) ||
+    allowedMimeTypes.includes(`${mimeType.split("/")[0]}/*`);
+
+  const isValidSize = !maxFileSize || size <= maxFileSize;
+
+  return { isValidType, isValidSize };
+};
+
+const base64MimeType = (encoded: string): string => {
+  const result = encoded.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/);
+  return result && result.length > 1 && result[1] ? result[1] : "unknown";
+};
+
+const isBase64 = (str: string): boolean => {
+  if (str.startsWith("data:")) {
+    const matches = str.match(/^data:[^;]+;base64,(.+)$/);
+    if (matches && matches[1]) {
+      str = matches[1];
+    } else {
+      return false;
+    }
+  }
+
+  try {
+    return btoa(atob(str)) === str;
+  } catch {
+    return false;
+  }
+};
+
+export const filterFiles = <T extends FileInput>(
+  files: T[],
+  options: FileValidationOptions,
+): [T[], FileError[]] => {
+  const validFiles: T[] = [];
+  const errors: FileError[] = [];
+
+  files.forEach((file) => {
+    const actualFile = "src" in file ? file.src : file;
+
+    if (actualFile instanceof File) {
+      validateFileOrBase64(actualFile, options, file, validFiles, errors);
+    } else if (typeof actualFile === "string") {
+      if (isBase64(actualFile)) {
+        if (options.allowBase64) {
+          validateFileOrBase64(actualFile, options, file, validFiles, errors);
+        } else {
+          errors.push({ file: actualFile, reason: "base64NotAllowed" });
+        }
+      } else {
+        if (!sanitizeUrl(actualFile, { allowBase64: options.allowBase64 })) {
+          errors.push({ file: actualFile, reason: "invalidBase64" });
+        } else {
+          validFiles.push(file);
+        }
+      }
+    }
+  });
+
+  return [validFiles, errors];
+};

package/src/components/emails/forget-password-email.tsx

@@ -0,0 +1,70 @@
+import { url } from "@/lib/utils/url";
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from "@react-email/components";
+import { Icons } from "../common/icons";
+
+interface ForgetPasswordEmailProps {
+  resetPasswordHref: string;
+}
+
+export function ForgetPasswordEmail({ resetPasswordHref }: ForgetPasswordEmailProps) {
+  return (
+    <Html>
+      <Head />
+      <Preview>Herstel je wachtwoord</Preview>
+
+      <Tailwind>
+        <Body className="mx-auto my-auto bg-white px-2 font-sans">
+          <Container className="mx-auto my-[40px] max-w-[465px] rounded border border-solid border-[#eaeaea] p-[20px]">
+            <Icons.logo className="w-8" />
+
+            <Section className="my-[15px]">
+              <Heading className="mx-0 my-[20px] p-0 text-[24px] font-bold text-black">
+                Herstel uw wachtwoord
+              </Heading>
+
+              <Text className="text-[14px] leading-[24px] text-black">
+                Iemand heeft onlangs een wachtwoordwijziging voor uw account gevraagd. Als u dit
+                was, kunt u hier een nieuw wachtwoord instellen:
+              </Text>
+
+              <Button
+                className="rounded bg-[#000000] px-5 py-3 text-center text-[12px] font-semibold text-white no-underline"
+                href={resetPasswordHref}
+              >
+                Reset password
+              </Button>
+            </Section>
+
+            <Section>
+              <Text className="text-[12px] leading-[20px] text-black">
+                Als u uw wachtwoord niet wilt wijzigen of dit niet heeft gevraagd, negeer en
+                verwijder dit bericht gewoon en verwijdert u.
+              </Text>
+
+              <Text className="text-[12px] leading-[20px] text-black">
+                Stuur deze e-mail niet door om uw account veilig te houden.
+              </Text>
+            </Section>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+}
+
+ForgetPasswordEmail.PreviewProps = {
+  resetPasswordHref: url("/auth/reset-password"),
+} as ForgetPasswordEmailProps;
+
+export default ForgetPasswordEmail;

package/src/components/entry.client.ts

@@ -0,0 +1,48 @@
+/**
+ * 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";
+
+/**
+ * Components headers
+ */
+export * from "./header/back-button.client";
+export * from "./header/bottom-bar.client";
+export * from "./header/breadcrumbs.client";
+export * from "./header/header.client";
+export * from "./header/mobile-nav-switcher.client";
+export * from "./header/top-bar.client";
+
+/**
+ * Components Layouts
+ */
+export * from "./layouts/providers.client";
+
+/**
+ * Components UI
+ */
+export * from "./ui/avatar.client";
+export * from "./ui/chart.client";
+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/dialog.client";
+export * from "./ui/drawer.client";
+export * from "./ui/form.client";
+export * from "./ui/hover-card.client";
+export * from "./ui/progress.client";
+export * from "./ui/resizable.client";
+export * from "./ui/select.client";
+export * from "./ui/sheet.client";
+export * from "./ui/sidebar.client";
+export * from "./ui/sonner.client";
+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.server.ts

@@ -0,0 +1,5 @@
+/**
+ * Components Layouts
+ */
+export * from "./layouts/admin-layout.server";
+export * from "./layouts/root-layout.server";

package/src/components/entry.ts

@@ -0,0 +1,52 @@
+/**
+ * Components
+ */
+export * from "./common/icons";
+export * from "./common/status";
+
+/**
+ * Components Layouts
+ */
+export * from "./layouts/admin-loading";
+export * from "./layouts/empty-page";
+export * from "./layouts/list-layout";
+export * from "./layouts/not-found-page";
+export * from "./layouts/tab-layout";
+
+/**
+ * Components Lists
+ */
+export * from "./lists/data-list";
+export * from "./lists/data-stack";
+
+/**
+ * Components UI
+ */
+export * from "./ui/accordion";
+export * from "./ui/alert";
+export * from "./ui/alert-dialog";
+export * from "./ui/aspect-ratio";
+export * from "./ui/badge";
+export * from "./ui/breadcrumb";
+export * from "./ui/button";
+export * from "./ui/calendar";
+export * from "./ui/card";
+export * from "./ui/carousel";
+export * from "./ui/checkbox";
+export * from "./ui/command";
+export * from "./ui/context-menu";
+export * from "./ui/dropdown-menu";
+export * from "./ui/input";
+export * from "./ui/label";
+export * from "./ui/navigation-menu";
+export * from "./ui/pagination";
+export * from "./ui/popover";
+export * from "./ui/radio-group";
+export * from "./ui/scroll-area";
+export * from "./ui/separator";
+export * from "./ui/skeleton";
+export * from "./ui/slider";
+export * from "./ui/switch";
+export * from "./ui/tabs";
+export * from "./ui/textarea";
+export * from "./ui/toggle";