@pattern-stack/frontend-patterns 0.0.3 → 0.0.4

package/src/templates/factory.tsx

@@ -0,0 +1,169 @@
+import React from 'react'
+import type { ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { AuthProvider } from '../features/auth'
+import { SidebarProvider } from '../molecules/layout'
+import { AppLayout } from '../molecules/layout'
+import { DashboardTemplate } from './DashboardTemplate'
+import type { AuthConfig } from '../atoms/types'
+
+// App configuration interface
+export interface AppConfig {
+  title: string
+  description?: string
+  version?: string
+  enableAuth?: boolean
+  enableQuery?: boolean
+  enableTheming?: boolean
+  enableRouting?: boolean
+  apiUrl?: string
+  apiTimeout?: number
+  theme?: string
+  darkMode?: boolean
+  auth?: AuthConfig
+  customProviders?: React.ComponentType<{ children: ReactNode }>[]
+}
+
+// App instance interface
+export interface AppInstance {
+  render: () => ReactNode
+  addRoutes: (path: string, component: ReactNode) => void
+  mount: (elementId?: string) => void
+}
+
+// Main app factory function
+export function createReactApp(config: AppConfig | string): AppInstance {
+  // Handle simple string config
+  const appConfig: AppConfig = typeof config === 'string' 
+    ? { title: config }
+    : config
+
+  // Set defaults
+  const {
+    title,
+    description = `${title} Application`,
+    version = '1.0.0',
+    enableAuth = true,
+    enableQuery = true,
+    enableRouting = true,
+    auth,
+    customProviders = []
+  } = appConfig
+
+  // Initialize query client
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: 1,
+        refetchOnWindowFocus: false,
+        staleTime: 5 * 60 * 1000, // 5 minutes
+      },
+    },
+  })
+
+  // Store routes
+  const routes: Array<{ path: string; component: ReactNode }> = []
+
+  // Default home page
+  const DefaultHome = () => (
+    <DashboardTemplate title={title} description={description}>
+      <div className="flex flex-col items-center justify-center min-h-[400px] text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">🌿 {title}</h1>
+        <p className="text-lg text-gray-600 mb-6">{description}</p>
+        <div className="space-y-2 text-sm text-gray-500">
+          <p>✅ Template integration successful</p>
+          <p>🔧 Version: {version}</p>
+          <p>🚀 Ready for development</p>
+        </div>
+      </div>
+    </DashboardTemplate>
+  )
+
+  // Build provider tree
+  const createProviderTree = (children: ReactNode): ReactNode => {
+    let tree = children
+
+    // Wrap with custom providers (in reverse order)
+    customProviders.reverse().forEach((Provider) => {
+      tree = <Provider key={Provider.name}>{tree}</Provider>
+    })
+
+    // Wrap with layout providers
+    if (enableRouting) {
+      tree = (
+        <SidebarProvider>
+          {tree}
+        </SidebarProvider>
+      )
+    }
+
+    // Wrap with auth provider
+    if (enableAuth) {
+      tree = <AuthProvider config={auth}>{tree}</AuthProvider>
+    }
+
+    // Wrap with query provider
+    if (enableQuery) {
+      tree = (
+        <QueryClientProvider client={queryClient}>
+          {tree}
+          {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
+        </QueryClientProvider>
+      )
+    }
+
+    // Wrap with router
+    if (enableRouting) {
+      tree = <BrowserRouter>{tree}</BrowserRouter>
+    }
+
+    return tree
+  }
+
+  // Create app instance
+  const appInstance: AppInstance = {
+    addRoutes(path: string, component: ReactNode) {
+      routes.push({ path, component })
+    },
+
+    render() {
+      const AppContent = () => (
+        <Routes>
+          <Route path="/" element={<AppLayout />}>
+            <Route index element={<DefaultHome />} />
+            {routes.map(({ path, component }, index) => (
+              <Route key={index} path={path} element={component} />
+            ))}
+          </Route>
+        </Routes>
+      )
+
+      return createProviderTree(<AppContent />)
+    },
+
+    mount(elementId = 'root') {
+      const element = document.getElementById(elementId)
+      if (!element) {
+        throw new Error(`Element with id "${elementId}" not found`)
+      }
+
+      const root = createRoot(element)
+      root.render(
+        <React.StrictMode>
+          {this.render()}
+        </React.StrictMode>
+      )
+    }
+  }
+
+  return appInstance
+}
+
+// Convenience function for simple apps
+export function createSimpleApp(title: string): AppInstance {
+  return createReactApp({ title })
+}
+

package/src/templates/index.ts

@@ -0,0 +1,37 @@
+// Page templates for common layout patterns
+export { ComponentShowcaseTemplate } from './ComponentShowcaseTemplate';
+export { 
+  DashboardTemplate, 
+  DashboardGrid, 
+  DashboardCard,
+  type DashboardTemplateProps,
+  type DashboardGridProps,
+  type DashboardCardProps 
+} from './DashboardTemplate';
+export { 
+  AuthTemplate, 
+  AuthFormField, 
+  AuthLink, 
+  AuthDivider,
+  type AuthTemplateProps,
+  type AuthFormFieldProps,
+  type AuthLinkProps,
+  type AuthDividerProps 
+} from './AuthTemplate';
+export { 
+  DataTemplate, 
+  DataDetailTemplate,
+  type DataTemplateProps,
+  type DataDetailTemplateProps 
+} from './DataTemplate';
+
+// Admin templates for administrative interfaces
+export * from './admin';
+
+// React App Factory
+export { 
+  createReactApp, 
+  createSimpleApp,
+  type AppConfig,
+  type AppInstance 
+} from './factory';

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />