@djangocfg/ui-core 1.0.1

package/src/hooks/useToast.ts

@@ -0,0 +1,194 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from 'react';
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "../components/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }

package/src/index.ts

@@ -0,0 +1,14 @@
+// ============================================================================
+// @djangocfg/ui-core - Main Export File
+// Pure React components without Next.js/Browser Storage dependencies
+// For use in Electron, Vite, CRA apps
+// ============================================================================
+
+// Re-export everything from components
+export * from './components';
+
+// Re-export hooks
+export * from './hooks';
+
+// Re-export lib utilities
+export * from './lib';

package/src/lib/index.ts

@@ -0,0 +1,2 @@
+export * from "./utils";
+export * from "./og-image";

package/src/lib/og-image.ts

@@ -0,0 +1,151 @@
+/**
+ * OG Image URL Generation Utilities
+ *
+ * Client-side utilities for generating OG image URLs.
+ */
+
+/** Default OG Image API base URL */
+const DEFAULT_OG_IMAGE_BASE_URL = 'https://djangocfg.com/api/og';
+
+/**
+ * Encode string to base64 with Unicode support
+ * Works in both browser and Node.js environments
+ */
+function encodeBase64(str: string): string {
+  // Node.js environment
+  if (typeof Buffer !== 'undefined') {
+    return Buffer.from(str, 'utf-8').toString('base64');
+  }
+  // Browser environment - handle Unicode via UTF-8 encoding
+  const utf8Bytes = new TextEncoder().encode(str);
+  const binaryString = Array.from(utf8Bytes, byte => String.fromCharCode(byte)).join('');
+  return btoa(binaryString);
+}
+
+/**
+ * OG Image URL parameters
+ */
+export interface OgImageUrlParams {
+  /** Page title */
+  title: string;
+  /** Page description (optional) */
+  description?: string;
+  /** Site name (optional) */
+  siteName?: string;
+  /** Logo URL (optional) */
+  logo?: string;
+  /** Background type: 'gradient' or 'solid' */
+  backgroundType?: 'gradient' | 'solid';
+  /** Gradient start color (hex) */
+  gradientStart?: string;
+  /** Gradient end color (hex) */
+  gradientEnd?: string;
+  /** Background color (for solid type) */
+  backgroundColor?: string;
+  /** Title font size (px) */
+  titleSize?: number;
+  /** Title font weight */
+  titleWeight?: number;
+  /** Title text color */
+  titleColor?: string;
+  /** Description font size (px) */
+  descriptionSize?: number;
+  /** Description text color */
+  descriptionColor?: string;
+  /** Site name font size (px) */
+  siteNameSize?: number;
+  /** Site name text color */
+  siteNameColor?: string;
+  /** Padding (px) */
+  padding?: number;
+  /** Logo size (px) */
+  logoSize?: number;
+  /** Show logo flag */
+  showLogo?: boolean;
+  /** Show site name flag */
+  showSiteName?: boolean;
+  /** Additional custom parameters */
+  [key: string]: string | number | boolean | undefined;
+}
+
+/**
+ * Options for generating OG image URL
+ */
+export interface GenerateOgImageUrlOptions {
+  /**
+   * Base URL of the OG image API route
+   * @default 'https://djangocfg.com/api/og'
+   */
+  baseUrl?: string;
+  /**
+   * If true, encode params as base64 for safer URLs
+   * @default true
+   */
+  useBase64?: boolean;
+}
+
+/**
+ * Generate OG image URL with query parameters or base64 encoding
+ *
+ * @example
+ * ```typescript
+ * // Using default baseUrl (https://djangocfg.com/api/og)
+ * const url = generateOgImageUrl({ title: 'My Page Title' });
+ *
+ * // With custom baseUrl
+ * const url = generateOgImageUrl({ title: 'My Page' }, { baseUrl: '/api/og' });
+ * ```
+ */
+export function generateOgImageUrl(
+  params: OgImageUrlParams,
+  options: GenerateOgImageUrlOptions = {}
+): string {
+  const { baseUrl = DEFAULT_OG_IMAGE_BASE_URL, useBase64 = true } = options;
+
+  if (useBase64) {
+    const cleanParams: Record<string, string | number | boolean> = {};
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== '') {
+        cleanParams[key] = value;
+      }
+    });
+
+    const jsonString = JSON.stringify(cleanParams);
+    const base64Data = encodeBase64(jsonString);
+    return `${baseUrl}/${base64Data}`;
+  } else {
+    const searchParams = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== '') {
+        searchParams.append(key, String(value));
+      }
+    });
+    const query = searchParams.toString();
+    return query ? `${baseUrl}?${query}` : baseUrl;
+  }
+}
+
+/**
+ * Get absolute OG image URL from relative path
+ */
+export function getAbsoluteOgImageUrl(relativePath: string, siteUrl: string): string {
+  // If path is already an absolute URL, return as-is
+  if (relativePath.startsWith('http://') || relativePath.startsWith('https://')) {
+    return relativePath;
+  }
+  const cleanSiteUrl = siteUrl.replace(/\/$/, '');
+  const cleanPath = relativePath.startsWith('/') ? relativePath : `/${relativePath}`;
+  return `${cleanSiteUrl}${cleanPath}`;
+}
+
+/**
+ * Create OG image URL builder with preset configuration
+ */
+export function createOgImageUrlBuilder(
+  defaults: Partial<OgImageUrlParams> = {},
+  options: GenerateOgImageUrlOptions = {}
+) {
+  return (params: OgImageUrlParams): string => {
+    return generateOgImageUrl({ ...defaults, ...params }, options);
+  };
+}

package/src/lib/utils.ts

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

package/src/styles/base.css

@@ -0,0 +1,20 @@
+/**
+ * Base Styles
+ * Foundation styles that apply to the entire application
+ * Compatible with Tailwind CSS v4
+ */
+
+/* Base element styles */
+* {
+  border-color: hsl(var(--border));
+}
+
+html {
+  font-weight: 500;
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-feature-settings: "rlig" 1, "calt" 1;
+}

package/src/styles/globals.css

@@ -0,0 +1,12 @@
+/**
+ * @deprecated
+ * This file is kept for backward compatibility.
+ * Please import from './index.css' instead.
+ *
+ * The styles are now modular and split into:
+ * - theme.css (CSS variables)
+ * - base.css (base styles)
+ * - utilities.css (custom utilities)
+ */
+
+@import "./index.css";

package/src/styles/index.css

@@ -0,0 +1,25 @@
+/**
+ * Unrealon UI Styles
+ * Main entry point for @djangocfg/ui package styles
+ *
+ * Import order (critical for Tailwind v4):
+ * 1. Theme variables FIRST (so Tailwind can use them)
+ * 2. Tailwind CSS v4 (compiles with access to theme variables)
+ * 3. Animation utilities (tw-animate-css for Tailwind v4)
+ * 4. Base styles (override Tailwind defaults)
+ * 5. Custom utilities (extend Tailwind utilities)
+ *
+ * Usage: Import this file in your app's main CSS or _app.tsx
+ */
+
+/* 1. Theme variables MUST come first */
+@import "./theme.css";
+
+/* 2. Source detection for Tailwind v4 monorepo */
+@import "./sources.css";
+
+/* 3. Base styles */
+@import "./base.css";
+
+/* 5. Custom utilities */
+@import "./utilities.css";

package/src/styles/sources.css

@@ -0,0 +1,11 @@
+/**
+ * Tailwind v4 Source Detection for UI Package
+ *
+ * @source directive tells Tailwind v4 where to scan for utility classes.
+ * In monorepo, this is critical because automatic detection may not work.
+ *
+ * "./" scans the entire UI package starting from this file's location.
+ */
+@source "../components";
+@source "../layouts";
+@source "../blocks";

package/src/styles/theme/animations.css

@@ -0,0 +1,65 @@
+/**
+ * Custom Animations
+ *
+ * Smooth, professional animations for UI elements
+ * Optimized for performance with transform and opacity only
+ */
+
+/* Smooth Floating Animation - Multi-directional movement */
+@keyframes float {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(30px, -30px) scale(1.05); }
+  66% { transform: translate(-20px, 20px) scale(0.95); }
+}
+
+/* Slow Vertical Float - Gentle up/down movement */
+@keyframes float-slow {
+  0%, 100% { transform: translate(0, 0); }
+  50% { transform: translate(0, -50px); }
+}
+
+/* Horizontal Float with Rotation */
+@keyframes float-x {
+  0%, 100% { transform: translate(0, 0) rotate(0deg); }
+  50% { transform: translate(100px, 0) rotate(180deg); }
+}
+
+/* Diagonal Float - Complex multi-point movement */
+@keyframes float-diagonal {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  25% { transform: translate(50px, 50px) scale(1.1); }
+  50% { transform: translate(100px, -50px) scale(0.9); }
+  75% { transform: translate(-50px, 50px) scale(1.05); }
+}
+
+/* Morph - Organic shape transformation */
+@keyframes morph {
+  0%, 100% {
+    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+    opacity: 0.3;
+  }
+  25% {
+    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
+    opacity: 0.5;
+  }
+  50% {
+    border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%;
+    opacity: 0.4;
+  }
+  75% {
+    border-radius: 60% 40% 60% 30% / 60% 30% 60% 40%;
+    opacity: 0.6;
+  }
+}
+
+/* Gradient Shift - Color animation with hue rotation */
+@keyframes gradient-shift {
+  0%, 100% {
+    background-position: 0% 50%;
+    filter: hue-rotate(0deg);
+  }
+  50% {
+    background-position: 100% 50%;
+    filter: hue-rotate(45deg);
+  }
+}

package/src/styles/theme/dark.css

@@ -0,0 +1,49 @@
+/**
+ * Dark Theme Colors
+ *
+ * Vercel-inspired dark theme with true black backgrounds
+ * High contrast with subtle grays for comfortable viewing
+ */
+
+.dark {
+  /* Base colors - True black background with subtle grays */
+  --background: 0 0% 4%;
+  --foreground: 0 0% 98%;
+  --card: 0 0% 8%;
+  --card-foreground: 0 0% 98%;
+  --popover: 0 0% 12%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 217 91% 60%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 98%;
+  --secondary-foreground: 0 0% 9%;
+  --muted: 0 0% 10%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 15%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 15%;
+  --input: 0 0% 15%;
+  --ring: 217 91% 60%;
+
+  /* Sidebar Dark Theme - Darker black sidebar */
+  --sidebar-background: 0 0% 0%;
+  --sidebar-foreground: 0 0% 98%;
+  --sidebar-primary: 217 91% 60%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 0 0% 10%;
+  --sidebar-accent-foreground: 0 0% 98%;
+  --sidebar-border: 0 0% 15%;
+  --sidebar-ring: 217 91% 60%;
+
+  /* Surface gradient dark */
+  --surface-gradient: linear-gradient(to bottom, hsl(var(--background)), hsl(var(--background) / 0.8));
+
+  /* Chart colors - same as light theme for consistency */
+  --chart-1: 217 91% 60%;  /* Blue - CPU */
+  --chart-2: 142 76% 36%;  /* Green - Memory */
+  --chart-3: 262 83% 58%;  /* Purple - Disk */
+  --chart-4: 26 90% 57%;   /* Orange */
+  --chart-5: 346 77% 50%;  /* Red */
+}

package/src/styles/theme/light.css

@@ -0,0 +1,50 @@
+/**
+ * Light Theme Colors
+ *
+ * Vercel-inspired light theme with clean whites and subtle grays
+ * High contrast for optimal readability
+ */
+
+:root {
+  /* Base colors - Clean white with neutral grays */
+  --background: 0 0% 96%;
+  --foreground: 0 0% 9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 9%;
+  --primary: 217 91% 60%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 96%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 0 0% 92%;
+  --accent-foreground: 0 0% 9%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 217 91% 60%;
+  --radius: 0.5rem;
+
+  /* Sidebar Light Theme - Subtle gray background */
+  --sidebar-background: 0 0% 98%;
+  --sidebar-foreground: 0 0% 9%;
+  --sidebar-primary: 217 91% 60%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 0 0% 94%;
+  --sidebar-accent-foreground: 0 0% 9%;
+  --sidebar-border: 0 0% 90%;
+  --sidebar-ring: 217 91% 60%;
+
+  /* Surface gradient */
+  --surface-gradient: linear-gradient(to bottom, hsl(var(--background)), hsl(var(--background) / 0.8));
+
+  /* Chart colors - vibrant and distinct */
+  --chart-1: 217 91% 60%;  /* Blue - CPU */
+  --chart-2: 142 76% 36%;  /* Green - Memory */
+  --chart-3: 262 83% 58%;  /* Purple - Disk */
+  --chart-4: 26 90% 57%;   /* Orange */
+  --chart-5: 346 77% 50%;  /* Red */
+}