@open-cloud-initiative/editor-x 0.0.1

package/registry/editor/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/registry/editor/components/ui/spinner.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { type VariantProps, cva } from "class-variance-authority";
+import { type LucideProps, Loader2Icon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const spinnerVariants = cva("animate-spin text-muted-foreground", {
+  defaultVariants: {
+    size: "default",
+  },
+  variants: {
+    size: {
+      default: "size-4",
+      icon: "size-10",
+      lg: "size-6",
+      sm: "size-2",
+    },
+  },
+});
+
+export const Spinner = ({
+  className,
+  size,
+  ...props
+}: Partial<LucideProps & VariantProps<typeof spinnerVariants>>) => (
+  <Loader2Icon
+    className={cn(spinnerVariants({ size }), className)}
+    {...props}
+  />
+);

package/registry/editor/components/ui/tabs.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/registry/editor/components/ui/toggle-group.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

package/registry/editor/components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }

package/registry/editor/components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/registry/editor/hooks/use-character-limit.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import { ChangeEvent, useState } from "react";
+
+type UseCharacterLimitProps = {
+  maxLength: number;
+  initialValue?: string;
+};
+
+export function useCharacterLimit({ maxLength, initialValue = "" }: UseCharacterLimitProps) {
+  const [value, setValue] = useState(initialValue);
+  const [characterCount, setCharacterCount] = useState(initialValue.length);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    if (newValue.length <= maxLength) {
+      setValue(newValue);
+      setCharacterCount(newValue.length);
+    }
+  };
+
+  return {
+    value,
+    characterCount,
+    handleChange,
+    maxLength,
+  };
+}

package/registry/editor/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,16 @@
+"use client"
+import { useState, useCallback } from "react"
+
+export function useCopyToClipboard() {
+  const [isCopied, setIsCopied] = useState(false)
+
+  const copyToClipboard = useCallback((text: string) => {
+    if (typeof window === "undefined") return
+    navigator.clipboard.writeText(text).then(() => {
+      setIsCopied(true)
+      setTimeout(() => setIsCopied(false), 2000)
+    })
+  }, [])
+
+  return { copyToClipboard, isCopied }
+} 

package/registry/editor/hooks/use-debounce.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/registry/editor/hooks/use-image-upload.ts

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface UseImageUploadProps {
+  onUpload?: (url: string) => void;
+}
+
+export function useImageUpload({ onUpload }: UseImageUploadProps = {}) {
+  const previewRef = useRef<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [fileName, setFileName] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Dummy upload function that simulates a delay and returns the local preview URL
+  const dummyUpload = async (file: File, localUrl: string): Promise<string> => {
+    try {
+      setUploading(true);
+      // Simulate network delay
+      await new Promise(resolve => setTimeout(resolve, 1500));
+      
+      // Simulate random upload errors (20% chance)
+      if (Math.random() < 0.2) {
+        throw new Error("Upload failed - This is a demo error");
+      }
+      
+      setError(null);
+      // In a real implementation, this would be the URL from the server
+      return localUrl;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Upload failed";
+      setError(errorMessage);
+      throw new Error(errorMessage);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleThumbnailClick = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
+  const handleFileChange = useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (file) {
+        setFileName(file.name);
+        const localUrl = URL.createObjectURL(file);
+        setPreviewUrl(localUrl);
+        previewRef.current = localUrl;
+
+        try {
+          const uploadedUrl = await dummyUpload(file, localUrl);
+          onUpload?.(uploadedUrl);
+        } catch (err) {
+          URL.revokeObjectURL(localUrl);
+          setPreviewUrl(null);
+          setFileName(null);
+          return console.error(err)
+        }
+      }
+    },
+    [onUpload]
+  );
+
+  const handleRemove = useCallback(() => {
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+    }
+    setPreviewUrl(null);
+    setFileName(null);
+    previewRef.current = null;
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    setError(null);
+  }, [previewUrl]);
+
+  useEffect(() => {
+    return () => {
+      if (previewRef.current) {
+        URL.revokeObjectURL(previewRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    previewUrl,
+    fileName,
+    fileInputRef,
+    handleThumbnailClick,
+    handleFileChange,
+    handleRemove,
+    uploading,
+    error,
+  };
+}

package/registry/editor/hooks/use-media-querry.ts

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react'
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false)
+
+  useEffect(() => {
+    const media = window.matchMedia(query)
+    if (media.matches !== matches) {
+      setMatches(media.matches)
+    }
+    const listener = () => setMatches(media.matches)
+    window.addEventListener('resize', listener)
+    return () => window.removeEventListener('resize', listener)
+  }, [matches, query])
+
+  return matches
+}
+

package/registry/editor/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+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/registry/editor/lib/content.ts

@@ -0,0 +1,39 @@
+export const content = `
+  <h1>Explore the Tiptap rich text editor with Shadcn UI components 📝</h1>
+  <p>This is a powerful editor that supports many features:</p>
+  <ul class="list-disc">
+      <li>
+          <p>
+              Rich text formatting with <strong>bold</strong>, <em>italic</em>, and
+              <u>underline</u>
+          </p>
+      </li>
+      <li>
+          <p>Different heading levels</p>
+      </li>
+      <li>
+          <p>Lists (ordered and unordered)</p>
+      </li>
+      <li>
+          <p>Text alignment options</p>
+      </li>
+      <li>
+          <p>Image uploads and management</p>
+      </li>
+  </ul>
+  <h2>Try It Out!</h2>
+  <p>
+      Type '/' to see available commands or use the toolbar above to format your
+      content.
+  </p>
+  <img src="https://res.cloudinary.com/sham007/image/upload/v1737910103/ProfileImages/724shots_so.jpg" alt="Example image"
+      width="100%" align="center" caption="SAAS landing page template" aspectratio="1.640340218712029" />
+  <p>
+      You can also add links like
+      <a target="_blank" rel="noopener noreferrer nofollow" href="https://ehtisham.vercel.app">this one</a>
+      and use text alignment options.
+  </p>
+  <pre><code class="language-javascript">// Example code block
+const greeting = "Hello, World!";
+console.log(greeting);</code></pre>
+`

package/registry/editor/lib/cookie-client.ts

@@ -0,0 +1,19 @@
+// Client-side cookie utilities.
+// These functions manage cookies in the browser only.
+// Server actions handle cookie updates on the server side.
+
+export function setClientCookie(key: string, value: string, days = 7) {
+    const expires = new Date(Date.now() + days * 864e5).toUTCString()
+    document.cookie = `${key}=${value}; expires=${expires}; path=/`
+}
+
+export function getClientCookie(key: string) {
+    return document.cookie
+        .split('; ')
+        .find((row) => row.startsWith(`${key}=`))
+        ?.split('=')[1]
+}
+
+export function deleteClientCookie(key: string) {
+    document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`
+}

package/registry/editor/lib/localstorage-client.ts

@@ -0,0 +1,19 @@
+'use client'
+
+export function setLocalStorageValue(key: string, value: string) {
+    try {
+        window.localStorage.setItem(key, value)
+    } catch (error) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.error('[localStorage] Failed to write value:', error)
+        }
+    }
+}
+
+export function getLocalStorageValue(key: string): string | null {
+    try {
+        return window.localStorage.getItem(key)
+    } catch {
+        return null
+    }
+}

package/registry/editor/lib/package.ts

@@ -0,0 +1,144 @@
+import { promises as fs, readdirSync } from 'node:fs'
+import { readFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import postcss from 'postcss'
+import postcssNested from 'postcss-nested'
+import type { RegistryItem } from 'shadcn/schema'
+
+type PackageJson = {
+    name: string
+    version: string
+    description: string
+    dependencies?: Record<string, string>
+    devDependencies?: Record<string, string>
+}
+
+export const getPackage = async (packageName: string) => {
+    const packageDir = join(process.cwd())
+    const packagePath = join(packageDir, 'package.json')
+    const packageJson = JSON.parse(await readFile(packagePath, 'utf-8')) as PackageJson
+
+    const kiboDependencies = Object.keys(packageJson.dependencies || {}).filter(
+        (dep) => dep.startsWith('@repo') && dep !== '@repo/shadcn-ui',
+    )
+
+    const dependencies = Object.keys(packageJson.dependencies || {}).filter(
+        (dep) => !['react', 'react-dom', '@repo/shadcn-ui', ...kiboDependencies].includes(dep),
+    )
+
+    const devDependencies = Object.keys(packageJson.devDependencies || {}).filter(
+        (dep) => !['@repo/typescript-config', '@types/react', '@types/react-dom', 'typescript'].includes(dep),
+    )
+
+    const packageFiles = readdirSync(packageDir, { withFileTypes: true })
+    const tsxFiles = packageFiles.filter((file) => file.isFile() && file.name.endsWith('.tsx'))
+
+    const cssFiles = packageFiles.filter((file) => file.isFile() && file.name.endsWith('.css'))
+
+    const files: RegistryItem['files'] = []
+
+    for (const file of tsxFiles) {
+        const filePath = join(packageDir, file.name)
+        const content = await fs.readFile(filePath, 'utf-8')
+
+        files.push({
+            type: 'registry:ui',
+            path: file.name,
+            content,
+            target: `components/${packageName}/${file.name}`,
+        })
+    }
+
+    const registryDependencies =
+        files
+            .map((f) => f.content)
+            .join('\n')
+            .match(/@\/components\/ui\/([a-z-]+)/g)
+            ?.map((path) => path.split('/').pop())
+            .filter((name): name is string => !!name) || []
+
+    const css: RegistryItem['css'] = {}
+
+    for (const file of cssFiles) {
+        const contents = await fs.readFile(join(packageDir, file.name), 'utf-8')
+
+        // Process CSS with PostCSS to handle nested selectors
+        const processed = await postcss([postcssNested]).process(contents, {
+            from: undefined,
+        })
+
+        // Parse the processed CSS and convert to JSON structure
+        const ast = postcss.parse(processed.css)
+
+        ast.walkAtRules('layer', (atRule) => {
+            const layerName = `@layer ${atRule.params}`
+            css[layerName] = {}
+
+            // First pass: process non-media rules
+            atRule.walkRules((rule) => {
+                // Skip rules that are inside media queries
+                if (rule.parent && rule.parent.type === 'atrule' && (rule.parent as any).name === 'media') {
+                    return
+                }
+
+                const selector = rule.selector
+                const ruleObj: Record<string, string> = {}
+
+                // Process all declarations
+                rule.walkDecls((decl) => {
+                    ruleObj[decl.prop] = decl.value
+                })
+
+                if (Object.keys(ruleObj).length > 0) {
+                    css[layerName][selector] = ruleObj
+                }
+            })
+
+            // Second pass: process media query rules as top-level entries
+            atRule.walkAtRules('media', (mediaRule) => {
+                const mediaQuery = `@media ${mediaRule.params}`
+
+                // Create a top-level media query entry if it doesn't exist
+                if (!css[layerName][mediaQuery]) {
+                    css[layerName][mediaQuery] = {}
+                }
+
+                mediaRule.walkRules((rule) => {
+                    const selector = rule.selector
+                    const mediaObj: Record<string, string> = {}
+
+                    rule.walkDecls((decl) => {
+                        mediaObj[decl.prop] = decl.value
+                    })
+
+                    if (Object.keys(mediaObj).length > 0) {
+                        // Store the selector inside the media query
+                        css[layerName][mediaQuery][selector] = mediaObj
+                    }
+                })
+            })
+        })
+    }
+
+    let type: RegistryItem['type'] = 'registry:ui'
+
+    if (!Object.keys(files).length && Object.keys(css).length) {
+        type = 'registry:style'
+    }
+
+    const response: RegistryItem = {
+        $schema: 'https://ui.shadcn.com/schema/registry-item.json',
+        name: packageName,
+        type,
+        title: packageName,
+        description: packageJson.description,
+        author: 'Sebastian Döll (@katallaxie)',
+        dependencies,
+        devDependencies,
+        registryDependencies,
+        files,
+        css,
+    }
+
+    return response
+}