stackkit 0.3.4 → 0.3.6

package/modules/components/files/shared/shadcn/global/form-field/textarea-field.tsx

@@ -0,0 +1,277 @@
+"use client";
+
+import {
+    Field,
+    FieldContent,
+    FieldDescription,
+    FieldError,
+    FieldLabel,
+} from "@/components/ui/field";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import * as React from "react";
+import type { FieldPath, FieldValues } from "react-hook-form";
+import { Controller } from "react-hook-form";
+
+type BaseProps = {
+  id?: string;
+  icon?: LucideIcon;
+  label?: React.ReactNode;
+  placeholder?: string;
+  description?: React.ReactNode;
+  className?: string;
+  wrapperClassName?: string;
+  textareaClassName?: string;
+  rows?: number;
+  minHeight?: string;
+  maxLength?: number;
+  showCount?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  autoResize?: boolean;
+  trimOnBlur?: boolean;
+  readOnly?: boolean;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+  onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+  onPaste?: React.ClipboardEventHandler<HTMLTextAreaElement>;
+  onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+  defaultValue?: string;
+  error?: React.ReactNode;
+};
+
+export type TextareaFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = BaseProps & { name?: TName };
+
+const TextareaField = React.forwardRef<
+  HTMLTextAreaElement,
+  TextareaFieldProps<FieldValues, string>
+>((props, ref) => {
+  const {
+    name,
+    id,
+    icon: Icon,
+    label,
+    placeholder,
+    description,
+    className,
+    wrapperClassName,
+    textareaClassName,
+    rows = 4,
+    minHeight,
+    maxLength,
+    showCount = false,
+    disabled = false,
+    required = false,
+    autoResize = false,
+    trimOnBlur = false,
+    readOnly = false,
+    value: externalValue,
+    onValueChange,
+    onChange,
+    onKeyUp,
+    onPaste,
+    onBlur,
+    defaultValue,
+    error,
+  } = props;
+  const innerRef = React.useRef<HTMLTextAreaElement | null>(null);
+  const setMergedRef = React.useCallback(
+    (el: HTMLTextAreaElement | null) => {
+      innerRef.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref)
+        (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current =
+          el;
+    },
+    [ref]
+  );
+
+  const autoId = React.useId();
+  const textareaId = id ?? autoId;
+
+  const [internal, setInternal] = React.useState<string>(defaultValue ?? "");
+  const standaloneValue = externalValue ?? internal;
+
+  const resizeNow = React.useCallback(() => {
+    if (!autoResize || !innerRef.current) return;
+    const el = innerRef.current;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [autoResize]);
+
+  React.useEffect(() => {
+    resizeNow();
+  }, [resizeNow]);
+
+  if (!name) {
+    const value = standaloneValue ?? "";
+
+    const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = (e) => {
+      const next = e.target.value;
+      void (onValueChange ? onValueChange(next) : setInternal(next));
+      onChange?.(e);
+      resizeNow();
+    };
+
+    const handleBlur: React.FocusEventHandler<HTMLTextAreaElement> = (e) => {
+      if (trimOnBlur) {
+        const trimmed = e.target.value.trim();
+        if (trimmed !== e.target.value) {
+          void (onValueChange ? onValueChange(trimmed) : setInternal(trimmed));
+        }
+      }
+      onBlur?.(e);
+    };
+
+    const count = typeof value === "string" ? value.length : 0;
+
+    return (
+      <div className={className}>
+        {label ? (
+          <FieldLabel htmlFor={textareaId} className="mb-2 inline-flex items-center gap-2">
+            {Icon && <Icon className="w-4 h-4" />}
+            {label}
+            {required && <span className="ml-0.5 text-destructive">*</span>}
+          </FieldLabel>
+        ) : null}
+
+        <div
+          className={cn(
+            "overflow-hidden rounded-md dark:bg-transparent",
+            wrapperClassName
+          )}
+        >
+          <Textarea
+            ref={setMergedRef}
+            id={textareaId}
+            placeholder={placeholder}
+            value={value}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onKeyUp={onKeyUp}
+            onPaste={onPaste}
+            disabled={disabled}
+            readOnly={readOnly}
+            rows={rows}
+            maxLength={maxLength}
+            className={cn("w-full", minHeight, textareaClassName)}
+            aria-required={required || undefined}
+          />
+        </div>
+
+        {description ? (
+          <FieldDescription>{description}</FieldDescription>
+        ) : null}
+
+        {showCount && (
+          <div
+            className={cn(
+              "mt-1 text-right text-xs",
+              maxLength && count >= maxLength * 0.95
+                ? "text-destructive"
+                : "text-muted-foreground"
+            )}
+          >
+            {count}
+            {maxLength ? ` / ${maxLength}` : ""}
+          </div>
+        )}
+
+        {error ? (
+          <p className="text-[0.8rem] font-medium text-destructive">{error}</p>
+        ) : null}
+      </div>
+    );
+  }
+
+  return (
+    <Controller
+      name={name}
+      render={({ field, fieldState }) => {
+        const value = externalValue ?? field.value ?? "";
+        const count = typeof value === "string" ? value.length : 0;
+
+        return (
+          <Field className={className} data-invalid={fieldState.invalid}>
+            {label ? (
+              <FieldLabel className="mb-2 inline-flex items-center gap-2" htmlFor={textareaId}>
+                {Icon && <Icon className="w-4 h-4" />}
+                {label}
+                {required && <span className="ml-0.5 text-destructive">*</span>}
+              </FieldLabel>
+            ) : null}
+
+            <FieldContent>
+              <div
+                className={cn(
+                  "overflow-hidden rounded-md bg-light dark:bg-transparent",
+                  wrapperClassName
+                )}
+              >
+                <Textarea
+                  ref={setMergedRef}
+                  id={textareaId}
+                  placeholder={placeholder}
+                  value={value}
+                  onChange={(e) => {
+                    field.onChange(e.target.value);
+                    onValueChange?.(e.target.value);
+                    onChange?.(e);
+                    resizeNow();
+                  }}
+                  onBlur={(e) => {
+                    if (trimOnBlur) {
+                      const trimmed = e.target.value.trim();
+                      if (trimmed !== e.target.value) {
+                        field.onChange(trimmed);
+                        onValueChange?.(trimmed);
+                      }
+                    }
+                    field.onBlur();
+                    onBlur?.(e);
+                  }}
+                  onKeyUp={onKeyUp}
+                  onPaste={onPaste}
+                  disabled={disabled || field.disabled}
+                  readOnly={readOnly}
+                  rows={rows}
+                  maxLength={maxLength}
+                  className={cn("w-full", minHeight, textareaClassName)}
+                  aria-required={required || undefined}
+                />
+              </div>
+            </FieldContent>
+
+            {description ? (
+              <FieldDescription>{description}</FieldDescription>
+            ) : null}
+
+            {showCount && (
+              <div
+                className={cn(
+                  "mt-1 text-right text-xs",
+                  maxLength && count >= maxLength * 0.95
+                    ? "text-destructive"
+                    : "text-muted-foreground"
+                )}
+              >
+                {count}
+                {maxLength ? ` / ${maxLength}` : ""}
+              </div>
+            )}
+
+            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+          </Field>
+        );
+      }}
+    />
+  );
+});
+
+TextareaField.displayName = "TextareaField";
+export default TextareaField;

package/modules/components/files/shared/shadcn/global/form-field/tiptap-editor-field.tsx

@@ -0,0 +1,35 @@
+import TiptapEditor from "@/components/tiptap-editor/tiptap-editor";
+import {
+    Field,
+    FieldContent,
+    FieldError,
+    FieldLabel,
+} from "@/components/ui/field";
+import { Controller } from "react-hook-form";
+
+interface Props {
+  name: string;
+  label: string;
+  className?: string;
+}
+
+export default function TiptapEditorField({ name, label, className }: Props) {
+  return (
+    <Controller
+      name={name}
+      render={({ field, fieldState }) => (
+        <Field className={className} data-invalid={fieldState.invalid}>
+          <FieldLabel>{label}</FieldLabel>
+          <FieldContent>
+            <TiptapEditor
+              content={field.value}
+              onChange={field.onChange}
+              className="min-h-50 bg-input/50 rounded-md border px-3 py-2 focus:border-primary"
+            />
+          </FieldContent>
+          {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
+        </Field>
+      )}
+    />
+  );
+}

package/modules/components/files/shared/shadcn/global/no-results.tsx

@@ -0,0 +1,41 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { SearchX } from "lucide-react";
+
+interface NoResultsProps {
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+export default function NoResults({
+  title = "No Results Found",
+  description = "We couldn't find what you're looking for. Try adjusting your search or filters.",
+  className,
+}: NoResultsProps) {
+  return (
+    <Card className={cn("relative", className)}>
+      <CardContent className="flex min-h-[400px] flex-col items-center justify-center p-6">
+        {/* Main content */}
+        <div className="relative flex flex-col items-center">
+          {/* Icon with modern styling */}
+          <div className="group relative mb-8">
+            <div className="bg-card ring-border/50 relative flex h-16 w-16 items-center justify-center rounded-2xl shadow-sm ring-1 transition-all duration-300 group-hover:scale-105">
+              <SearchX className="text-muted-foreground group-hover:text-foreground h-8 w-8 transition-colors duration-300" />
+            </div>
+          </div>
+
+          {/* Text content */}
+          <div className="text-center">
+            <h3 className="text-foreground mb-3 text-2xl font-semibold">
+              {title}
+            </h3>
+            <p className="text-muted-foreground mx-auto max-w-md text-base">
+              {description}
+            </p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/modules/components/files/shared/shadcn/tiptap-editor/editor-menu-bar.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import type { Editor } from "@tiptap/core";
+import {
+    AlignCenter,
+    AlignLeft,
+    AlignRight,
+    Bold as BoldIcon,
+    Columns,
+    Columns3,
+    Heading1,
+    Heading2,
+    Heading3,
+    Highlighter,
+    Italic as ItalicIcon,
+    Link as LinkIcon,
+    List,
+    ListOrdered,
+    ListPlus,
+    ListX,
+    Quote,
+    Redo,
+    Strikethrough as StrikeIcon,
+    Table as TableIcon,
+    Type,
+    Underline as UnderlineIcon,
+    Undo,
+} from "lucide-react";
+import { Toggle } from "../ui/toggle";
+
+import "@tiptap/extension-blockquote";
+import "@tiptap/extension-bold";
+import "@tiptap/extension-bullet-list";
+import "@tiptap/extension-code";
+import "@tiptap/extension-heading";
+import "@tiptap/extension-highlight";
+import "@tiptap/extension-history";
+import "@tiptap/extension-horizontal-rule";
+import "@tiptap/extension-italic";
+import "@tiptap/extension-link";
+import "@tiptap/extension-list-item";
+import "@tiptap/extension-ordered-list";
+import "@tiptap/extension-strike";
+import "@tiptap/extension-table";
+import "@tiptap/extension-table/cell";
+import "@tiptap/extension-table/header";
+import "@tiptap/extension-table/row";
+import "@tiptap/extension-text-align";
+import "@tiptap/extension-underline";
+
+export default function MenuBar({ editor }: { editor: Editor | null }) {
+  if (!editor) return null;
+
+  const opts = [
+    // Headings
+    {
+      icon: <Heading1 className="h-4 w-4" />,
+      action: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+      pressed: editor.isActive("heading", { level: 1 }),
+    },
+    {
+      icon: <Heading2 className="h-4 w-4" />,
+      action: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+      pressed: editor.isActive("heading", { level: 2 }),
+    },
+    {
+      icon: <Heading3 className="h-4 w-4" />,
+      action: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+      pressed: editor.isActive("heading", { level: 3 }),
+    },
+
+    // Marks
+    {
+      icon: <BoldIcon className="h-4 w-4" />,
+      action: () => editor.chain().focus().toggleBold().run(),
+      pressed: editor.isActive("bold"),
+    },
+    {
+      icon: <ItalicIcon className="h-4 w-4" />,
+      action: () => editor.chain().focus().toggleItalic().run(),
+      pressed: editor.isActive("italic"),
+    },
+    {
+      icon: <UnderlineIcon className="h-4 w-4" />,
+      action: () => editor.chain().focus().toggleUnderline().run(),
+      pressed: editor.isActive("underline"),
+    },
+    {
+      icon: <StrikeIcon className="h-4 w-4" />,
+      action: () => editor.chain().focus().toggleStrike().run(),
+      pressed: editor.isActive("strike"),
+    },
+    {
+      icon: <Highlighter className="h-4 w-4" />,
+      action: () => editor.chain().focus().toggleHighlight().run(),
+      pressed: editor.isActive("highlight"),
+    },
+
+    // Link
+    {
+      icon: <LinkIcon className="h-4 w-4" />,
+      action: () => {
+        if (editor.isActive("link")) {
+          editor.chain().focus().unsetLink().run();
+          return;
+        }
+        const url =
+          typeof window !== "undefined" ? window.prompt("Enter URL") : null;
+        if (url) editor.chain().focus().setLink({ href: url }).run();
+      },
+      pressed: editor.isActive("link"),
+    },
+
+    // Blockquote / HR
+    {
+      icon: <Quote className="h-4 w-4" />,
+      action: () => editor.chain().focus().toggleBlockquote().run(),
+      pressed: editor.isActive("blockquote"),
+    },
+    {
+      icon: <Type className="h-4 w-4" />,
+      action: () => editor.chain().focus().setHorizontalRule().run(),
+      pressed: false,
+    },
+
+    // Align
+    {
+      icon: <AlignLeft className="h-4 w-4" />,
+      action: () => editor.chain().focus().setTextAlign("left").run(),
+      pressed: editor.isActive({ textAlign: "left" }),
+    },
+    {
+      icon: <AlignCenter className="h-4 w-4" />,
+      action: () => editor.chain().focus().setTextAlign("center").run(),
+      pressed: editor.isActive({ textAlign: "center" }),
+    },
+    {
+      icon: <AlignRight className="h-4 w-4" />,
+      action: () => editor.chain().focus().setTextAlign("right").run(),
+      pressed: editor.isActive({ textAlign: "right" }),
+    },
+
+    // Lists
+    {
+      icon: <List className="h-4 w-4" />,
+      action: () => editor.chain().focus().toggleBulletList().run(),
+      pressed: editor.isActive("bulletList"),
+    },
+    {
+      icon: <ListOrdered className="h-4 w-4" />,
+      action: () => editor.chain().focus().toggleOrderedList().run(),
+      pressed: editor.isActive("orderedList"),
+    },
+
+    // Table controls
+    {
+      icon: <TableIcon className="h-4 w-4" />,
+      action: () =>
+        editor.isActive("table")
+          ? editor.chain().focus().deleteTable().run()
+          : editor
+              .chain()
+              .focus()
+              .insertTable({ rows: 3, cols: 2, withHeaderRow: true })
+              .run(),
+      pressed: editor.isActive("table"),
+    },
+    {
+      icon: <ListPlus className="h-4 w-4" />,
+      action: () => editor.chain().focus().addRowAfter().run(),
+      pressed: false,
+    },
+    {
+      icon: <Columns className="h-4 w-4" />,
+      action: () => editor.chain().focus().addColumnAfter().run(),
+      pressed: false,
+    },
+    {
+      icon: <ListX className="h-4 w-4" />,
+      action: () => editor.chain().focus().deleteRow().run(),
+      pressed: false,
+    },
+    {
+      icon: <Columns3 className="h-4 w-4" />,
+      action: () => editor.chain().focus().deleteColumn().run(),
+      pressed: false,
+    },
+
+    // History
+    {
+      icon: <Undo className="h-4 w-4" />,
+      action: () => editor.chain().focus().undo().run(),
+      pressed: false,
+    },
+    {
+      icon: <Redo className="h-4 w-4" />,
+      action: () => editor.chain().focus().redo().run(),
+      pressed: false,
+    },
+  ];
+
+  return (
+    <div className="flex flex-wrap gap-1 rounded-md border border-border p-1">
+      {opts.map((o, i) => (
+        <Toggle
+          key={i as number}
+          pressed={o.pressed}
+          onPressedChange={() => o.action()}
+          aria-pressed={o.pressed}
+          className="data-[state=on]:bg-primary/10"
+        >
+          {o.icon}
+        </Toggle>
+      ))}
+    </div>
+  );
+}

package/modules/components/files/shared/shadcn/tiptap-editor/tiptap-editor.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import Blockquote from "@tiptap/extension-blockquote";
+import HardBreak from "@tiptap/extension-hard-break";
+import Highlight from "@tiptap/extension-highlight";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import Link from "@tiptap/extension-link";
+import { Table } from "@tiptap/extension-table";
+import { TableCell } from "@tiptap/extension-table/cell";
+import { TableHeader } from "@tiptap/extension-table/header";
+import { TableRow } from "@tiptap/extension-table/row";
+import TextAlign from "@tiptap/extension-text-align";
+import Underline from "@tiptap/extension-underline";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import MenuBar from "./editor-menu-bar";
+
+type EditorProps = {
+  content: string;
+  onChange: (content: string) => void;
+  editable?: boolean;
+  className?: string;
+};
+
+export default function TiptapEditor({
+  content,
+  onChange,
+  editable = true,
+  className,
+}: EditorProps) {
+  const editor = useEditor({
+    editable,
+    content,
+    immediatelyRender: false,
+    extensions: [
+      StarterKit.configure({
+        bulletList: { HTMLAttributes: { class: "list-disc ml-4" } },
+        orderedList: { HTMLAttributes: { class: "list-decimal ml-4" } },
+        link: false,
+        underline: false,
+        blockquote: false,
+        horizontalRule: false,
+        hardBreak: false,
+        codeBlock: false,
+        code: false,
+      }),
+
+      Table.configure({
+        resizable: true,
+        HTMLAttributes: { class: "w-full table-auto border border-border" },
+      }),
+      TableRow,
+      TableHeader.configure({
+        HTMLAttributes: {
+          class:
+            "border border-border bg-muted text-foreground font-semibold px-2 py-1",
+        },
+      }),
+      TableCell.configure({
+        HTMLAttributes: { class: "border border-border px-2 py-1 text-sm" },
+      }),
+
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+
+      Highlight,
+      Underline,
+      Link.configure({
+        openOnClick: false,
+        autolink: true,
+        HTMLAttributes: { class: "text-primary underline" },
+      }),
+
+      Blockquote.configure({
+        HTMLAttributes: {
+          class: "border-l-4 border-border pl-4 italic text-muted-foreground",
+        },
+      }),
+      HorizontalRule,
+      HardBreak,
+    ],
+    editorProps: {
+      attributes: {
+        class: cn(
+          "prose dark:prose-invert max-w-none focus:outline-none min-h-[200px]",
+          className,
+        ),
+      },
+    },
+    onUpdate({ editor }) {
+      onChange(editor.getHTML());
+    },
+    autofocus: true,
+  });
+
+  return (
+    <>
+      <div className="sticky top-1 z-50 backdrop-blur-sm shadow-md">
+        {editable && <MenuBar editor={editor} />}
+      </div>
+      <EditorContent className="focus:border-primary" editor={editor} />
+    </>
+  );
+}