@jmruthers/pace-core 0.5.76 → 0.5.77

package/docs/consuming-app-example.md

@@ -1,290 +0,0 @@
-# Consuming App Example
-
-This example shows how to properly use PACE Core DataTable in a consuming application with CSS-first Tailwind v4 configuration.
-
-## Project Setup
-
-### 1. Create a new React app
-
-```bash
-npx create-react-app my-app --template typescript
-cd my-app
-```
-
-### 2. Install PACE Core
-
-```bash
-npm install @jmruthers/pace-core
-```
-
-### 3. Install required peer dependencies
-
-```bash
-npm install @tanstack/react-table @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-label @radix-ui/react-slot lucide-react class-variance-authority clsx tailwind-merge
-```
-
-### 4. Install Tailwind CSS v4
-
-```bash
-npm install -D @tailwindcss/vite tailwindcss@^4.0.0
-```
-
-## Implementation
-
-### 1. Import PACE Core styles
-
-```tsx
-// src/index.tsx
-// Import the core CSS file - includes everything you need
-import '@jmruthers/pace-core/src/styles/core.css';
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-```
-
-**That's it!** The core.css file includes:
-- Complete color palettes (main, secondary, accent)
-- All fonts (Georama, Open Sans, Reddit Mono)
-- Base element styles and resets
-- Tailwind v4 utility classes
-- Component styling
-
-### 2. Create your DataTable component
-
-```tsx
-// src/App.tsx
-import React, { useMemo } from 'react';
-import { DataTable } from '@jmruthers/pace-core';
-import type { DataTableFeatureConfig } from '@jmruthers/pace-core';
-
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  status: 'active' | 'inactive' | 'pending';
-  priority: 'low' | 'medium' | 'high';
-}
-
-const App: React.FC = () => {
-  const data: User[] = [
-    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active', priority: 'high' },
-    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active', priority: 'medium' },
-    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'pending', priority: 'low' },
-    { id: '4', name: 'Alice Brown', email: 'alice@example.com', role: 'Manager', status: 'inactive', priority: 'high' },
-  ];
-
-  const columns = useMemo(() => [
-    {
-      accessorKey: 'name',
-      header: 'Name',
-      enableSorting: true,
-      enableGrouping: true,
-      enableColumnFilter: true,
-    },
-    {
-      accessorKey: 'email',
-      header: 'Email',
-      enableSorting: true,
-      enableGrouping: true,
-      enableColumnFilter: true,
-    },
-    {
-      accessorKey: 'role',
-      header: 'Role',
-      enableSorting: true,
-      enableGrouping: true,
-      enableColumnFilter: true,
-      cell: ({ row }: { row: { original: User } }) => (
-        <span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold bg-primary text-primary-foreground">
-          {row.original.role}
-        </span>
-      ),
-    },
-    {
-      accessorKey: 'status',
-      header: 'Status',
-      enableSorting: true,
-      enableGrouping: true,
-      enableColumnFilter: true,
-      cell: ({ row }: { row: { original: User } }) => {
-        const status = row.original.status;
-        const badgeClass = status === 'active' ? 'bg-success text-success-foreground' :
-                          status === 'pending' ? 'bg-warning text-warning-foreground' :
-                          'bg-error text-error-foreground';
-        return (
-          <span className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold ${badgeClass}`}>
-            {status}
-          </span>
-        );
-      },
-    },
-    {
-      accessorKey: 'priority',
-      header: 'Priority',
-      enableSorting: true,
-      enableGrouping: true,
-      enableColumnFilter: true,
-      cell: ({ row }: { row: { original: User } }) => {
-        const priority = row.original.priority;
-        const badgeClass = priority === 'high' ? 'bg-error text-error-foreground' :
-                          priority === 'medium' ? 'bg-warning text-warning-foreground' :
-                          'bg-success text-success-foreground';
-        return (
-          <span className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold ${badgeClass}`}>
-            {priority}
-          </span>
-        );
-      },
-    },
-  ], []);
-
-  const features: DataTableFeatureConfig = {
-    search: true,
-    pagination: true,
-    sorting: true,
-    filtering: true,
-    import: false,
-    export: true,
-    selection: true,
-    creation: true,
-    editing: true,
-    deletion: true,
-    deleteSelected: true,
-    grouping: true,
-    columnVisibility: true,
-    columnReordering: true,
-    virtualization: false,
-    performanceMetrics: false,
-    bulkOperations: true,
-    rowActions: true,
-  };
-
-  return (
-    <div className="min-h-screen bg-sec-50 p-8">
-      <div className="max-w-7xl mx-auto">
-        <h1 className="text-3xl font-bold text-sec-900 mb-8">
-          My Application with PACE Core DataTable
-        </h1>
-        
-        <div className="bg-main-50 rounded-lg shadow">
-          <DataTable
-            data={data}
-            columns={columns}
-            title="Users"
-            description="Manage your application users"
-            features={features}
-            onEditRow={(row, data) => {
-              console.log('Edit row:', row, data);
-            }}
-            onDeleteRow={(row) => {
-              console.log('Delete row:', row);
-            }}
-            onCreateRow={(data) => {
-              console.log('Create row:', data);
-            }}
-            onImport={(data) => {
-              console.log('Import data:', data);
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default App;
-```
-
-### 3. Configure Vite with Tailwind CSS v4
-
-```js
-// vite.config.js
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
-
-export default defineConfig({
-  plugins: [
-    react(),
-    tailwindcss()
-  ],
-})
-```
-
-### 4. Alternative: Use PACE Core Vite Plugin
-
-For easier setup, you can use the provided PACE Core Vite plugin:
-
-```js
-// vite.config.js
-import { createPaceCoreViteConfig } from '@jmruthers/pace-core/vite-plugin-tailwind-v4'
-
-export default createPaceCoreViteConfig({
-  // Your custom Vite options here
-})
-```
-
-## Key Points
-
-1. **Import styles**: The CSS file provides all styling out of the box:
-   ```tsx
-   import '@jmruthers/pace-core/src/styles/core.css';
-   ```
-2. **Use native utilities**: Use standard Tailwind utilities like `bg-main-600`, `text-sec-700`, `border-acc-500`, etc.
-3. **Configure features**: Set up the `features` object to enable/disable DataTable functionality
-4. **Component styling**: Components handle their own internal styling - no need for component-specific utility classes
-
-## Expected Result
-
-With this setup, your DataTable should render with:
-- ✅ Proper toolbar with search and action buttons
-- ✅ Styled table headers and rows
-- ✅ Colored badges for status and priority
-- ✅ Hover effects and transitions
-- ✅ Consistent PACE Core design system
-- ✅ All functionality working correctly
-
-## Troubleshooting
-
-If the DataTable doesn't look styled:
-
-1. **Check imports**: Ensure the CSS file is imported at the top of your main file:
-   ```tsx
-   import '@jmruthers/pace-core/src/styles/core.css';
-   ```
-2. **Check dependencies**: Make sure all peer dependencies are installed
-3. **Check Tailwind**: Ensure Tailwind CSS v4 is properly configured
-4. **Check console**: Look for any build or runtime errors
-
-## How It Works
-
-Tailwind v4 automatically scans for utility classes through your build tool configuration:
-
-**Your vite.config.ts handles the scanning:**
-```ts
-// vite.config.ts
-export default defineConfig({
-  plugins: [
-    react(),
-    tailwindcss() // Automatically scans all source files
-  ],
-})
-```
-
-**The core.css file provides:**
-- Complete color palettes and theme definitions
-- Base styles and typography
-- Font definitions
-- Component styling foundation
-
-This means Tailwind automatically detects and includes all utility classes used in your source files, ensuring complete styling coverage without any manual configuration.