@umituz/web-design-system 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "private": false,
   "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",

package/src/presentation/organisms/Comments.tsx

@@ -0,0 +1,103 @@
+/**
+ * Comments Component (Organism)
+ * @description Giscus-based GitHub Discussions comment widget
+ */
+
+import { useEffect, useRef } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface GiscusConfig {
+  repo: string;
+  repoId: string;
+  category?: string;
+  mapping?: 'pathname' | 'url' | 'title' | 'og:title' | 'custom';
+  term?: string;
+  strict?: '0' | '1';
+  reactionsEnabled?: '0' | '1';
+  emitMetadata?: '0' | '1';
+  inputPosition?: 'top' | 'bottom';
+  theme?: 'light' | 'dark' | 'dark_dimmed' | 'transparent_dark' | 'preferred_color_scheme';
+  lang?: string;
+}
+
+export interface CommentsProps extends BaseProps {
+  slug: string;
+  config?: Partial<GiscusConfig>;
+  title?: string;
+  description?: string;
+}
+
+declare global {
+  interface Window {
+    giscus?: {
+      render: (element: HTMLElement, config: Record<string, unknown>) => void;
+    };
+  }
+}
+
+export const Comments = ({
+  slug,
+  config,
+  title = 'Comments',
+  description = 'Join the discussion! Share your thoughts and questions below.',
+  className,
+}: CommentsProps) => {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Load Giscus script dynamically
+    const script = document.createElement('script');
+    script.src = 'https://giscus.app/client.js';
+    script.async = true;
+    script.crossOrigin = 'anonymous';
+
+    script.addEventListener('load', () => {
+      if (window.giscus && rootRef.current) {
+        const defaultConfig: GiscusConfig = {
+          repo: 'umituz/umituz-apps',
+          repoId: 'R_kgDONJ7RJw',
+          category: 'Announcements',
+          mapping: 'pathname',
+          term: slug,
+          strict: '0',
+          reactionsEnabled: '1',
+          emitMetadata: '0',
+          inputPosition: 'top',
+          theme: 'dark',
+          lang: 'en',
+          ...config,
+        };
+
+        window.giscus.render(rootRef.current, defaultConfig);
+      }
+    });
+
+    document.head.appendChild(script);
+
+    return () => {
+      // Only remove if script exists and is in DOM
+      if (script.parentNode === document.head) {
+        document.head.removeChild(script);
+      }
+    };
+  }, [slug, config]);
+
+  return (
+    <div className={cn('mt-8', className)}>
+      <div className="bg-bg-card rounded-xl p-6 border border-border transition-theme">
+        <h3 className="text-xl font-bold text-text-primary mb-4">{title}</h3>
+        <p className="text-text-secondary text-sm mb-4">
+          {description}
+        </p>
+        <div
+          ref={rootRef}
+          id="giscus-comments"
+          className="min-h-[200px]"
+        />
+      </div>
+    </div>
+  );
+};
+
+Comments.displayName = 'Comments';

package/src/presentation/organisms/NewsletterSignup.tsx

@@ -0,0 +1,165 @@
+/**
+ * NewsletterSignup Component (Organism)
+ * @description Newsletter subscription form with email validation
+ */
+
+import { useState, useEffect, useMemo } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+import { Icon } from '../atoms/Icon';
+
+const SUBSCRIBER_COUNT_MIN = 1000;
+const SUBSCRIBER_COUNT_MAX = 6000;
+
+export interface NewsletterSignupProps extends BaseProps {
+  onSubscribe?: (email: string) => Promise<void>;
+  subscriberCountMin?: number;
+  subscriberCountMax?: number;
+}
+
+export const NewsletterSignup = ({
+  onSubscribe,
+  subscriberCountMin = SUBSCRIBER_COUNT_MIN,
+  subscriberCountMax = SUBSCRIBER_COUNT_MAX,
+  className,
+}: NewsletterSignupProps) => {
+  const [email, setEmail] = useState('');
+  const [isSubscribed, setIsSubscribed] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  // FIXED: Generate random count per component instance, not at module load
+  const subscriberCount = useMemo(
+    () => Math.floor(Math.random() * (subscriberCountMax - subscriberCountMin + 1)) + subscriberCountMin,
+    [subscriberCountMin, subscriberCountMax]
+  );
+
+  const validateEmail = (email: string) => {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(email);
+  };
+
+  // Reset success message after 5 seconds with cleanup
+  useEffect(() => {
+    if (isSubscribed) {
+      const timeout = setTimeout(() => {
+        setIsSubscribed(false);
+      }, 5000);
+      return () => clearTimeout(timeout);
+    }
+  }, [isSubscribed]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    // Validate email
+    if (!email) {
+      setError('Please enter your email address');
+      return;
+    }
+
+    if (!validateEmail(email)) {
+      setError('Please enter a valid email address');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      // Call the subscribe function if provided
+      if (onSubscribe) {
+        await onSubscribe(email);
+      } else {
+        // Simulate API call for demo purposes
+        await new Promise(resolve => setTimeout(resolve, 1000));
+      }
+
+      setIsLoading(false);
+      setIsSubscribed(true);
+      setEmail('');
+    } catch (err) {
+      setIsLoading(false);
+      setError('Failed to subscribe. Please try again.');
+    }
+  };
+
+  if (isSubscribed) {
+    return (
+      <div className={cn('bg-bg-card rounded-xl p-4 border border-border', className)}>
+        <div className="flex items-center gap-3 text-green-600">
+          <Icon className="text-green-600" size="lg">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </Icon>
+          <div>
+            <div className="font-semibold text-sm">Thanks for subscribing!</div>
+            <div className="text-xs text-text-secondary">Check your inbox to confirm your subscription</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('bg-bg-card rounded-xl p-4 border border-border', className)}>
+      <div className="flex items-center gap-2 mb-3">
+        <Icon className="text-primary-light" size="lg">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M3 8l7.89 5.26a2 2 0 002.22 0l7.89-5.26a2 2 0 002.22 0L21 8V5a2 2 0 00-2-2H5a2 2 0 00-2 2v3a2 2 0 002.22 0z"
+          />
+        </Icon>
+        <h3 className="text-sm font-semibold text-text-primary">Newsletter</h3>
+      </div>
+      <p className="text-xs text-text-secondary mb-3">
+        Get the latest articles delivered straight to your inbox. No spam, ever.
+      </p>
+      <form onSubmit={handleSubmit} className="space-y-2">
+        <input
+          type="email"
+          placeholder="your@email.com"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="w-full px-3 py-2 bg-bg-secondary text-text-primary rounded-lg border border-border focus:border-primary-light focus:outline-none placeholder-text-secondary/50 transition-theme text-sm"
+          disabled={isLoading}
+        />
+        {error && (
+          <p className="text-xs text-red-500">{error}</p>
+        )}
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary-gradient text-text-primary rounded-lg font-medium hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+        >
+          {isLoading ? (
+            <>Subscribing...</>
+          ) : (
+            <>
+              <Icon size="sm">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M22 2L11 13M22 2l-7 20M2 2l15 15L2 2l15-15"
+                />
+              </Icon>
+              Subscribe
+            </>
+          )}
+        </button>
+      </form>
+      <p className="text-xs text-text-secondary mt-2">
+        Join {subscriberCount.toLocaleString()}+ subscribers
+      </p>
+    </div>
+  );
+};
+
+NewsletterSignup.displayName = 'NewsletterSignup';

package/src/presentation/organisms/index.ts

@@ -135,3 +135,10 @@ export { ToggleGroup, ToggleGroupItem } from './ToggleGroup';
 // NEW: Media & Content Components
 export { ImageLightbox } from './ImageLightbox';
 export type { ImageLightboxProps, ImageLightboxImage } from './ImageLightbox';
+
+// NEW: Content & Engagement Components
+export { NewsletterSignup } from './NewsletterSignup';
+export type { NewsletterSignupProps } from './NewsletterSignup';
+
+export { Comments } from './Comments';
+export type { CommentsProps, GiscusConfig } from './Comments';