@bernierllc/email 1.0.0 → 1.1.0

package/packages/react/README.md

@@ -1,13 +0,0 @@
-## Monorepo Workspaces & Dependency Management
-
-This package is part of a monorepo using npm workspaces. All dependencies are hoisted to the root. Always run `npm install` from the root directory.
-
-## React 19 and Testing Library Compatibility
-
-This package uses React 19.1.0. If you see peer dependency warnings with Testing Library, use:
-
-```bash
-npm install --legacy-peer-deps
-```
-
-This is a temporary workaround until official support is released. 

package/packages/react/package.json

@@ -1,105 +0,0 @@
-{
-  "name": "@email-template-manager/react",
-  "version": "1.0.0",
-  "description": "React components for email template management",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "scripts": {
-    "build": "rollup -c",
-    "build:watch": "rollup -c -w",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "lint": "eslint src --ext .ts,.tsx",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
-    "type-check": "tsc --noEmit",
-    "clean": "rimraf dist",
-    "dev": "npm run build:watch",
-    "prepublishOnly": "npm run clean && npm run build",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "keywords": [
-    "react",
-    "email",
-    "templates",
-    "components",
-    "ui",
-    "typescript"
-  ],
-  "author": "Matt Bernier <matt@example.com>",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mattbernier/email-template-manager.git",
-    "directory": "packages/react"
-  },
-  "homepage": "https://github.com/mattbernier/email-template-manager#readme",
-  "bugs": {
-    "url": "https://github.com/mattbernier/email-template-manager/issues"
-  },
-  "dependencies": {
-    "@email-template-manager/core": "^1.0.0",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toast": "^1.1.5",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "lucide-react": "^0.294.0",
-    "react-hook-form": "^7.48.2",
-    "tailwind-merge": "^2.0.0"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-vite": "^7.5.3",
-    "@storybook/testing-library": "^0.2.2",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.8",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
-    "eslint": "^8.54.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.4.31",
-    "rimraf": "^5.0.5",
-    "rollup": "^4.5.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^7.5.3",
-    "tailwindcss": "^3.3.6",
-    "ts-jest": "^29.1.1",
-    "typescript": "^5.2.2"
-  },
-  "peerDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
-  },
-  "engines": {
-    "node": ">=16.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}

package/packages/react/rollup.config.js

@@ -1,37 +0,0 @@
-/*
-Copyright (c) 2025 Bernier LLC
-
-This file is licensed to the client under a limited-use license.
-The client may use and modify this code *only within the scope of the project it was delivered for*.
-Redistribution or use in other products or commercial offerings is not permitted without written consent from Bernier LLC.
-*/
-
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import typescript from '@rollup/plugin-typescript';
-
-export default {
-  input: 'src/index.ts',
-  output: [
-    {
-      file: 'dist/index.js',
-      format: 'cjs',
-      sourcemap: true,
-    },
-    {
-      file: 'dist/index.esm.js',
-      format: 'esm',
-      sourcemap: true,
-    },
-  ],
-  external: ['react', 'react-dom', '@email-template-manager/core'],
-  plugins: [
-    resolve(),
-    commonjs(),
-    typescript({
-      tsconfig: './tsconfig.json',
-      declaration: true,
-      declarationDir: './dist',
-    }),
-  ],
-}; 

package/packages/react/specification.md

@@ -1,569 +0,0 @@
-# @email-template-manager/react - React Components Specification
-
-## Overview
-
-A comprehensive React component library for email template management, providing ready-to-use UI components that integrate with the core library. Built with TypeScript, Tailwind CSS, and modern React patterns.
-
-## Component Architecture
-
-### Core Components
-
-#### EmailTemplateEditor
-
-```typescript
-interface EmailTemplateEditorProps {
-  template?: EmailTemplate;
-  onSave: (template: EmailTemplate) => Promise<void>;
-  onCancel: () => void;
-  variables?: TemplateVariable[];
-  previewData?: Record<string, any>;
-  readOnly?: boolean;
-  className?: string;
-}
-
-const EmailTemplateEditor: React.FC<EmailTemplateEditorProps>;
-```
-
-**Features:**
-
-- Rich HTML editor with WYSIWYG capabilities
-- Side-by-side HTML/preview layout
-- Variable insertion UI with autocomplete
-- Liquid template syntax highlighting
-- Real-time preview with test data
-- Validation feedback
-- Mobile-responsive design
-
-#### TemplateVariableManager
-
-```typescript
-interface TemplateVariableManagerProps {
-  variables: TemplateVariable[];
-  onChange: (variables: TemplateVariable[]) => void;
-  availableTypes: string[];
-  readOnly?: boolean;
-  className?: string;
-}
-
-const TemplateVariableManager: React.FC<TemplateVariableManagerProps>;
-```
-
-**Features:**
-
-- Add/remove/edit template variables
-- Variable type selection with validation
-- Default value configuration
-- Required field toggles
-- Drag-and-drop reordering
-
-#### EmailTemplateList
-
-```typescript
-interface EmailTemplateListProps {
-  templates: EmailTemplate[];
-  onSelect: (template: EmailTemplate) => void;
-  onEdit: (template: EmailTemplate) => void;
-  onDelete: (templateId: string) => Promise<void>;
-  onDuplicate: (template: EmailTemplate) => Promise<void>;
-  searchQuery?: string;
-  onSearchChange: (query: string) => void;
-  filters?: TemplateFilters;
-  onFiltersChange: (filters: TemplateFilters) => void;
-  loading?: boolean;
-  className?: string;
-}
-
-const EmailTemplateList: React.FC<EmailTemplateListProps>;
-```
-
-**Features:**
-
-- Sortable table with template details
-- Search and filtering capabilities
-- Bulk actions (delete, export)
-- Template status indicators
-- Pagination support
-- Empty state handling
-
-#### ScheduledEmailsManager
-
-```typescript
-interface ScheduledEmailsManagerProps {
-  scheduledEmails: ScheduledEmail[];
-  onPause: (emailId: string) => Promise<void>;
-  onResume: (emailId: string) => Promise<void>;
-  onCancel: (emailId: string) => Promise<void>;
-  onRetry: (emailId: string) => Promise<void>;
-  onRefresh: () => Promise<void>;
-  filters?: SchedulingFilters;
-  onFiltersChange: (filters: SchedulingFilters) => void;
-  className?: string;
-}
-
-const ScheduledEmailsManager: React.FC<ScheduledEmailsManagerProps>;
-```
-
-**Features:**
-
-- Email queue visualization
-- Status filtering and search
-- Bulk pause/resume/cancel actions
-- Retry failed emails
-- Real-time status updates
-- Timeline view option
-
-### Form Components
-
-#### EmailTemplateForm
-
-```typescript
-interface EmailTemplateFormProps {
-  initialValues?: Partial<EmailTemplate>;
-  onSubmit: (values: EmailTemplate) => Promise<void>;
-  onCancel: () => void;
-  validationSchema?: any;
-  children?: React.ReactNode;
-  className?: string;
-}
-
-const EmailTemplateForm: React.FC<EmailTemplateFormProps>;
-```
-
-#### ScheduleEmailForm
-
-```typescript
-interface ScheduleEmailFormProps {
-  templates: EmailTemplate[];
-  initialValues?: Partial<ScheduledEmail>;
-  onSubmit: (values: ScheduledEmail) => Promise<void>;
-  onCancel: () => void;
-  className?: string;
-}
-
-const ScheduleEmailForm: React.FC<ScheduleEmailFormProps>;
-```
-
-#### MagicLinkForm
-
-```typescript
-interface MagicLinkFormProps {
-  onGenerate: (
-    email: string,
-    type: string,
-    payload: Record<string, any>
-  ) => Promise<MagicLink>;
-  linkTypes: Array<{ value: string; label: string }>;
-  className?: string;
-}
-
-const MagicLinkForm: React.FC<MagicLinkFormProps>;
-```
-
-### UI Components (Based on shadcn/ui)
-
-#### Button Variants
-
-```typescript
-interface ButtonProps {
-  variant: "primary" | "secondary" | "danger" | "ghost" | "outline";
-  size: "sm" | "md" | "lg";
-  loading?: boolean;
-  disabled?: boolean;
-  children: React.ReactNode;
-  className?: string;
-  onClick?: () => void;
-}
-
-const Button: React.FC<ButtonProps>;
-```
-
-#### StatusBadge
-
-```typescript
-interface StatusBadgeProps {
-  status:
-    | "pending"
-    | "sent"
-    | "failed"
-    | "cancelled"
-    | "paused"
-    | "active"
-    | "inactive";
-  size?: "sm" | "md" | "lg";
-  showIcon?: boolean;
-  className?: string;
-}
-
-const StatusBadge: React.FC<StatusBadgeProps>;
-```
-
-#### DataTable
-
-```typescript
-interface DataTableProps<T> {
-  data: T[];
-  columns: Column<T>[];
-  pagination?: PaginationOptions;
-  sorting?: SortingOptions;
-  selection?: SelectionOptions;
-  loading?: boolean;
-  emptyMessage?: string;
-  className?: string;
-}
-
-const DataTable: React.FC<DataTableProps<T>>;
-```
-
-#### Modal Components
-
-```typescript
-const ConfirmDialog: React.FC<{
-  open: boolean;
-  title: string;
-  message: string;
-  confirmText?: string;
-  cancelText?: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-  variant?: "danger" | "warning" | "info";
-}>;
-
-const Dialog: React.FC<{
-  open: boolean;
-  onClose: () => void;
-  title: string;
-  children: React.ReactNode;
-  size?: "sm" | "md" | "lg" | "xl";
-}>;
-```
-
-### Specialized Components
-
-#### RichTextEditor
-
-```typescript
-interface RichTextEditorProps {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  readOnly?: boolean;
-  toolbar?: ToolbarConfig;
-  variables?: TemplateVariable[];
-  onInsertVariable?: (variable: string) => void;
-  className?: string;
-}
-
-const RichTextEditor: React.FC<RichTextEditorProps>;
-```
-
-**Features:**
-
-- Rich text editing with formatting toolbar
-- Variable insertion with autocomplete
-- HTML source code view
-- Undo/redo functionality
-- Custom toolbar configuration
-
-#### EmailPreview
-
-```typescript
-interface EmailPreviewProps {
-  template: EmailTemplate;
-  variables: Record<string, any>;
-  mode: "html" | "text" | "both";
-  onModeChange: (mode: "html" | "text" | "both") => void;
-  className?: string;
-}
-
-const EmailPreview: React.FC<EmailPreviewProps>;
-```
-
-#### VariableInserter
-
-```typescript
-interface VariableInserterProps {
-  variables: TemplateVariable[];
-  onInsert: (variable: string) => void;
-  searchable?: boolean;
-  grouped?: boolean;
-  className?: string;
-}
-
-const VariableInserter: React.FC<VariableInserterProps>;
-```
-
-## Hooks
-
-### Core Hooks
-
-#### useEmailTemplates
-
-```typescript
-interface UseEmailTemplatesResult {
-  templates: EmailTemplate[];
-  loading: boolean;
-  error: Error | null;
-  createTemplate: (template: Partial<EmailTemplate>) => Promise<EmailTemplate>;
-  updateTemplate: (
-    id: string,
-    updates: Partial<EmailTemplate>
-  ) => Promise<EmailTemplate>;
-  deleteTemplate: (id: string) => Promise<void>;
-  duplicateTemplate: (id: string) => Promise<EmailTemplate>;
-  refetch: () => Promise<void>;
-}
-
-function useEmailTemplates(filters?: TemplateFilters): UseEmailTemplatesResult;
-```
-
-#### useScheduledEmails
-
-```typescript
-interface UseScheduledEmailsResult {
-  scheduledEmails: ScheduledEmail[];
-  loading: boolean;
-  error: Error | null;
-  scheduleEmail: (email: Partial<ScheduledEmail>) => Promise<ScheduledEmail>;
-  pauseEmail: (id: string) => Promise<void>;
-  resumeEmail: (id: string) => Promise<void>;
-  cancelEmail: (id: string) => Promise<void>;
-  retryEmail: (id: string) => Promise<void>;
-  refetch: () => Promise<void>;
-}
-
-function useScheduledEmails(
-  filters?: SchedulingFilters
-): UseScheduledEmailsResult;
-```
-
-#### useMagicLinks
-
-```typescript
-interface UseMagicLinksResult {
-  generateLink: (
-    email: string,
-    type: string,
-    payload: Record<string, any>
-  ) => Promise<MagicLink>;
-  validateLink: (token: string) => Promise<MagicLink | null>;
-  revokeLink: (token: string) => Promise<void>;
-  loading: boolean;
-  error: Error | null;
-}
-
-function useMagicLinks(): UseMagicLinksResult;
-```
-
-### Utility Hooks
-
-#### useTemplateValidation
-
-```typescript
-function useTemplateValidation(template: EmailTemplate): {
-  isValid: boolean;
-  errors: ValidationError[];
-  warnings: ValidationWarning[];
-  validateVariable: (name: string, value: any) => ValidationResult;
-};
-```
-
-#### useEmailPreview
-
-```typescript
-function useEmailPreview(
-  template: EmailTemplate,
-  variables: Record<string, any>
-): {
-  htmlPreview: string;
-  textPreview: string;
-  loading: boolean;
-  error: Error | null;
-};
-```
-
-#### useDebounce
-
-```typescript
-function useDebounce<T>(value: T, delay: number): T;
-```
-
-## Context Providers
-
-### EmailTemplateProvider
-
-```typescript
-interface EmailTemplateContextValue {
-  manager: EmailTemplateManager;
-  scheduler: EmailScheduler;
-  magicLinkManager: MagicLinkManager;
-  config: EmailManagerConfig;
-}
-
-const EmailTemplateProvider: React.FC<{
-  config: EmailManagerConfig;
-  children: React.ReactNode;
-}>;
-
-function useEmailTemplateContext(): EmailTemplateContextValue;
-```
-
-### NotificationProvider
-
-```typescript
-interface NotificationContextValue {
-  showNotification: (
-    message: string,
-    type: "success" | "error" | "warning" | "info"
-  ) => void;
-  hideNotification: (id: string) => void;
-  notifications: Notification[];
-}
-
-const NotificationProvider: React.FC<{ children: React.ReactNode }>;
-```
-
-## Styling and Theming
-
-### Theme Configuration
-
-```typescript
-interface EmailManagerTheme {
-  colors: {
-    primary: string;
-    secondary: string;
-    success: string;
-    warning: string;
-    error: string;
-    info: string;
-    background: string;
-    surface: string;
-    text: string;
-    textMuted: string;
-  };
-  fonts: {
-    body: string;
-    heading: string;
-    mono: string;
-  };
-  spacing: Record<string, string>;
-  borderRadius: Record<string, string>;
-  shadows: Record<string, string>;
-}
-
-const ThemeProvider: React.FC<{
-  theme: EmailManagerTheme;
-  children: React.ReactNode;
-}>;
-```
-
-### CSS Classes and Tailwind Integration
-
-```css
-/* Base utility classes */
-.email-manager-container {
-  /* ... */
-}
-.email-template-editor {
-  /* ... */
-}
-.email-preview {
-  /* ... */
-}
-.variable-inserter {
-  /* ... */
-}
-
-/* Component-specific styles */
-.email-template-list {
-  /* ... */
-}
-.scheduled-emails-table {
-  /* ... */
-}
-.rich-text-editor {
-  /* ... */
-}
-```
-
-## Integration Examples
-
-### Basic Setup
-
-```typescript
-import {
-  EmailTemplateProvider,
-  EmailTemplateList,
-  EmailTemplateEditor,
-} from "@email-template-manager/react";
-import { EmailTemplateManager } from "@email-template-manager/core";
-
-function App() {
-  const config = {
-    // ... configuration
-  };
-
-  return (
-    <EmailTemplateProvider config={config}>
-      <div className="email-manager-app">
-        <EmailTemplateList />
-        <EmailTemplateEditor />
-      </div>
-    </EmailTemplateProvider>
-  );
-}
-```
-
-### Custom Component
-
-```typescript
-import {
-  useEmailTemplates,
-  Button,
-  Dialog,
-} from "@email-template-manager/react";
-
-function CustomTemplateManager() {
-  const { templates, createTemplate, loading } = useEmailTemplates();
-
-  return (
-    <div>
-      {templates.map((template) => (
-        <div key={template.id}>
-          <h3>{template.name}</h3>
-          <Button onClick={() => editTemplate(template)}>Edit Template</Button>
-        </div>
-      ))}
-    </div>
-  );
-}
-```
-
-## Testing Support
-
-### Test Utilities
-
-```typescript
-// Testing utilities and mock components
-export const MockEmailTemplateProvider: React.FC<{ children: React.ReactNode }>;
-export const mockEmailTemplate: (
-  overrides?: Partial<EmailTemplate>
-) => EmailTemplate;
-export const mockScheduledEmail: (
-  overrides?: Partial<ScheduledEmail>
-) => ScheduledEmail;
-
-// Component testing helpers
-export function renderWithEmailManager(
-  component: React.ReactElement,
-  options?: { config?: EmailManagerConfig }
-): RenderResult;
-```
-
-## Bundle Size Optimization
-
-- Tree-shakable exports
-- Lazy loading for heavy components
-- Optional dependencies for different editors
-- Minimal core bundle with plugin architecture
-
-This React package provides a complete UI solution for email template management while maintaining flexibility and customization options for different use cases.