@imjp/writenex-astro 0.1.0

package/src/client/components/CreateContentModal/CreateContentModal.css

@@ -0,0 +1,327 @@
+/**
+ * @fileoverview CreateContentModal styles
+ *
+ * Modal styling for create new content dialog.
+ */
+
+/* ============================================================================
+   MODAL OVERLAY
+   ============================================================================ */
+
+.wn-create-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--wn-z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--wn-backdrop);
+  animation: wn-create-modal-fadeIn var(--wn-transition-fast) ease-out;
+}
+
+@keyframes wn-create-modal-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ============================================================================
+   MODAL CONTAINER
+   ============================================================================ */
+
+.wn-create-modal {
+  width: 100%;
+  max-width: var(--wn-modal-md);
+  overflow: hidden;
+  border-radius: var(--wn-radius-lg);
+  border: 1px solid var(--wn-zinc-700);
+  background-color: var(--wn-zinc-900);
+  animation: wn-create-modal-zoomIn var(--wn-transition-fast) ease-out;
+}
+
+@keyframes wn-create-modal-zoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* ============================================================================
+   MODAL HEADER
+   ============================================================================ */
+
+.wn-create-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--wn-space-5) var(--wn-space-6);
+  border-bottom: 1px solid var(--wn-zinc-700);
+}
+
+.wn-create-modal-header-content {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-4);
+}
+
+.wn-create-modal-icon {
+  color: var(--wn-brand-500);
+}
+
+.wn-create-modal-title {
+  font-size: var(--wn-font-md);
+  font-weight: 600;
+  color: var(--wn-zinc-50);
+  margin: 0;
+}
+
+.wn-create-modal-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wn-icon-btn-md);
+  height: var(--wn-icon-btn-md);
+  padding: 0;
+  border: none;
+  border-radius: var(--wn-radius-md);
+  background-color: transparent;
+  color: var(--wn-zinc-400);
+  cursor: pointer;
+  transition:
+    background-color var(--wn-transition-fast),
+    color var(--wn-transition-fast);
+}
+
+.wn-create-modal-close:hover:not(:disabled) {
+  background-color: var(--wn-overlay-10);
+  color: var(--wn-zinc-50);
+}
+
+.wn-create-modal-close:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ============================================================================
+   MODAL BODY
+   ============================================================================ */
+
+.wn-create-modal-body {
+  padding: var(--wn-space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-5);
+}
+
+/* Collection indicator */
+.wn-create-modal-collection {
+  font-size: var(--wn-font-xs);
+  color: var(--wn-zinc-500);
+}
+
+.wn-create-modal-collection-name {
+  color: var(--wn-zinc-400);
+  font-weight: 500;
+}
+
+/* Form field */
+.wn-create-modal-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-3);
+}
+
+.wn-create-modal-label {
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  color: var(--wn-zinc-400);
+}
+
+.wn-create-modal-input {
+  width: 100%;
+  padding: var(--wn-space-3) var(--wn-space-4);
+  border-radius: var(--wn-radius-md);
+  border: 1px solid var(--wn-zinc-700);
+  background-color: var(--wn-zinc-950);
+  font-size: var(--wn-font-base);
+  color: var(--wn-zinc-50);
+  outline: none;
+  transition:
+    border-color var(--wn-transition-fast),
+    box-shadow var(--wn-transition-fast);
+}
+
+.wn-create-modal-input::placeholder {
+  color: var(--wn-zinc-600);
+}
+
+.wn-create-modal-input:focus {
+  border-color: var(--wn-brand-500);
+  box-shadow: 0 0 0 2px var(--wn-brand-alpha-20);
+}
+
+.wn-create-modal-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Slug preview */
+.wn-create-modal-slug {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+  padding: var(--wn-space-3) var(--wn-space-4);
+  border-radius: var(--wn-radius-md);
+  background-color: var(--wn-zinc-950);
+  border: 1px solid var(--wn-zinc-800);
+}
+
+.wn-create-modal-slug-label {
+  font-size: var(--wn-font-xs);
+  color: var(--wn-zinc-500);
+}
+
+.wn-create-modal-slug-value {
+  font-family: ui-monospace, monospace;
+  font-size: var(--wn-font-xs);
+  color: var(--wn-brand-400);
+  background: none;
+  padding: 0;
+}
+
+/* ============================================================================
+   MODAL FOOTER
+   ============================================================================ */
+
+.wn-create-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--wn-space-4);
+  padding-top: var(--wn-space-3);
+}
+
+/* Buttons */
+.wn-create-modal-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wn-space-3);
+  padding: var(--wn-space-3) var(--wn-space-5);
+  border-radius: var(--wn-radius-md);
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color var(--wn-transition-fast),
+    color var(--wn-transition-fast),
+    border-color var(--wn-transition-fast);
+}
+
+.wn-create-modal-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.wn-create-modal-btn--secondary {
+  background-color: transparent;
+  border: 1px solid var(--wn-zinc-700);
+  color: var(--wn-zinc-400);
+}
+
+.wn-create-modal-btn--secondary:hover:not(:disabled) {
+  background-color: var(--wn-zinc-800);
+  color: var(--wn-zinc-50);
+}
+
+.wn-create-modal-btn--primary {
+  background-color: var(--wn-brand-500);
+  border: 1px solid var(--wn-brand-500);
+  color: white;
+}
+
+.wn-create-modal-btn--primary:hover:not(:disabled) {
+  background-color: var(--wn-brand-600);
+  border-color: var(--wn-brand-600);
+}
+
+/* ============================================================================
+   LIGHT MODE OVERRIDES
+   ============================================================================ */
+
+.wn-light .wn-create-modal-overlay {
+  background-color: var(--wn-backdrop-light);
+}
+
+.wn-light .wn-create-modal {
+  border-color: var(--wn-zinc-200);
+  background-color: #fff;
+}
+
+.wn-light .wn-create-modal-header {
+  border-bottom-color: var(--wn-zinc-200);
+}
+
+.wn-light .wn-create-modal-title {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-create-modal-close {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-create-modal-close:hover:not(:disabled) {
+  background-color: var(--wn-overlay-light-5);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-create-modal-collection {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-create-modal-collection-name {
+  color: var(--wn-zinc-600);
+}
+
+.wn-light .wn-create-modal-label {
+  color: var(--wn-zinc-600);
+}
+
+.wn-light .wn-create-modal-input {
+  border-color: var(--wn-zinc-200);
+  background-color: var(--wn-zinc-50);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-create-modal-input::placeholder {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-create-modal-slug {
+  background-color: var(--wn-zinc-50);
+  border-color: var(--wn-zinc-200);
+}
+
+.wn-light .wn-create-modal-slug-label {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-create-modal-slug-value {
+  color: var(--wn-brand-600);
+}
+
+.wn-light .wn-create-modal-btn--secondary {
+  border-color: var(--wn-zinc-200);
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-create-modal-btn--secondary:hover:not(:disabled) {
+  background-color: var(--wn-zinc-100);
+  color: var(--wn-zinc-900);
+}

package/src/client/components/CreateContentModal/CreateContentModal.tsx

@@ -0,0 +1,216 @@
+/**
+ * @fileoverview Create content modal component
+ *
+ * Modal dialog for creating new content with title input and slug preview.
+ * Replaces the native window.prompt for a better user experience.
+ * Includes focus trap for accessibility compliance.
+ *
+ * @module @writenex/astro/client/components/CreateContentModal
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { X, FileText } from "lucide-react";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
+import "./CreateContentModal.css";
+
+/**
+ * Props for CreateContentModal component
+ */
+interface CreateContentModalProps {
+  /** Whether the modal is open */
+  isOpen: boolean;
+  /** Callback to close the modal */
+  onClose: () => void;
+  /** Callback when content is created */
+  onCreate: (title: string) => void;
+  /** Collection name for display */
+  collectionName: string;
+  /** Whether creation is in progress */
+  isCreating?: boolean;
+}
+
+/**
+ * Generate a URL-safe slug from a title
+ *
+ * @param title - The title to slugify
+ * @returns URL-safe slug
+ */
+function generateSlug(title: string): string {
+  return title
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, "")
+    .replace(/[\s_-]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+/**
+ * Modal dialog for creating new content
+ *
+ * Features:
+ * - Title input with auto-focus
+ * - Real-time slug preview
+ * - Keyboard navigation (Enter to create, Escape to close)
+ * - Loading state during creation
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CreateContentModal
+ *   isOpen={showCreateModal}
+ *   onClose={() => setShowCreateModal(false)}
+ *   onCreate={handleCreate}
+ *   collectionName="blog"
+ * />
+ * ```
+ */
+export function CreateContentModal({
+  isOpen,
+  onClose,
+  onCreate,
+  collectionName,
+  isCreating = false,
+}: CreateContentModalProps): React.ReactElement | null {
+  const [title, setTitle] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
+
+  // Store the trigger element when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      triggerRef.current = document.activeElement as HTMLElement;
+    }
+  }, [isOpen]);
+
+  // Focus trap for accessibility
+  const { containerRef } = useFocusTrap({
+    enabled: isOpen,
+    onEscape: isCreating ? undefined : onClose,
+    returnFocusTo: triggerRef.current,
+  });
+
+  // Reset title and focus input when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      setTitle("");
+      // Small delay to ensure modal is rendered and focus trap is active
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 50);
+    }
+  }, [isOpen]);
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      const trimmedTitle = title.trim();
+      if (trimmedTitle && !isCreating) {
+        onCreate(trimmedTitle);
+      }
+    },
+    [title, isCreating, onCreate]
+  );
+
+  const handleOverlayClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === e.currentTarget && !isCreating) {
+        onClose();
+      }
+    },
+    [onClose, isCreating]
+  );
+
+  const slug = generateSlug(title);
+  const isValid = title.trim().length > 0;
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="wn-create-modal-overlay"
+      onClick={handleOverlayClick}
+      role="presentation"
+    >
+      <div
+        ref={containerRef}
+        className="wn-create-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="create-modal-title"
+      >
+        {/* Header */}
+        <div className="wn-create-modal-header">
+          <div className="wn-create-modal-header-content">
+            <FileText size={18} className="wn-create-modal-icon" />
+            <h2 id="create-modal-title" className="wn-create-modal-title">
+              Create New Content
+            </h2>
+          </div>
+          <button
+            className="wn-create-modal-close"
+            onClick={onClose}
+            disabled={isCreating}
+            title="Close (Esc)"
+            aria-label="Close modal"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <form onSubmit={handleSubmit} className="wn-create-modal-body">
+          <div className="wn-create-modal-collection">
+            Creating in{" "}
+            <span className="wn-create-modal-collection-name">
+              {collectionName}
+            </span>
+          </div>
+
+          <div className="wn-create-modal-field">
+            <label htmlFor="content-title" className="wn-create-modal-label">
+              Title
+            </label>
+            <input
+              ref={inputRef}
+              id="content-title"
+              type="text"
+              className="wn-create-modal-input"
+              placeholder="Enter content title..."
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              disabled={isCreating}
+              autoComplete="off"
+              spellCheck="false"
+            />
+          </div>
+
+          {slug && (
+            <div className="wn-create-modal-slug">
+              <span className="wn-create-modal-slug-label">Slug:</span>
+              <code className="wn-create-modal-slug-value">{slug}</code>
+            </div>
+          )}
+
+          {/* Footer */}
+          <div className="wn-create-modal-footer">
+            <button
+              type="button"
+              className="wn-create-modal-btn wn-create-modal-btn--secondary"
+              onClick={onClose}
+              disabled={isCreating}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="wn-create-modal-btn wn-create-modal-btn--primary"
+              disabled={!isValid || isCreating}
+            >
+              {isCreating ? "Creating..." : "Create"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/client/components/CreateContentModal/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @fileoverview CreateContentModal component exports
+ *
+ * @module @writenex/astro/client/components/CreateContentModal
+ */
+
+export { CreateContentModal } from "./CreateContentModal";