kaddidlehopper 0.5.0 → 0.6.0

package/examples/calculator/assets/src/components/Calculator.tsx

@@ -1,238 +0,0 @@
-import { useReducer } from 'react'
-
-interface State {
-  display: string
-  previousValue: string | null
-  operation: string | null
-  overwrite: boolean
-}
-
-type Action =
-  | { type: 'ADD_DIGIT'; digit: string }
-  | { type: 'CHOOSE_OPERATION'; operation: string }
-  | { type: 'EVALUATE' }
-  | { type: 'CLEAR' }
-  | { type: 'DELETE_DIGIT' }
-  | { type: 'PERCENT' }
-  | { type: 'TOGGLE_SIGN' }
-
-function evaluate(previousValue: string, currentValue: string, operation: string): string {
-  const prev = parseFloat(previousValue)
-  const current = parseFloat(currentValue)
-  if (isNaN(prev) || isNaN(current)) return 'Error'
-
-  let result: number
-  switch (operation) {
-    case '+':
-      result = prev + current
-      break
-    case '-':
-      result = prev - current
-      break
-    case '*':
-      result = prev * current
-      break
-    case '/':
-      if (current === 0) return 'Error'
-      result = prev / current
-      break
-    default:
-      return currentValue
-  }
-  return String(result)
-}
-
-function reducer(state: State, action: Action): State {
-  switch (action.type) {
-    case 'ADD_DIGIT': {
-      if (state.display === 'Error') {
-        return { ...state, display: action.digit, overwrite: false }
-      }
-      if (state.overwrite) {
-        return { ...state, display: action.digit, overwrite: false }
-      }
-      if (action.digit === '.' && state.display.includes('.')) return state
-      if (state.display === '0' && action.digit !== '.') {
-        return { ...state, display: action.digit }
-      }
-      return { ...state, display: state.display + action.digit }
-    }
-    case 'CHOOSE_OPERATION': {
-      if (state.display === 'Error') return state
-      if (state.previousValue != null && !state.overwrite) {
-        const result = evaluate(state.previousValue, state.display, state.operation!)
-        return {
-          display: result,
-          previousValue: result,
-          operation: action.operation,
-          overwrite: true,
-        }
-      }
-      return {
-        ...state,
-        previousValue: state.display,
-        operation: action.operation,
-        overwrite: true,
-      }
-    }
-    case 'EVALUATE': {
-      if (state.previousValue == null || state.operation == null || state.overwrite) return state
-      const result = evaluate(state.previousValue, state.display, state.operation)
-      return {
-        display: result,
-        previousValue: null,
-        operation: null,
-        overwrite: true,
-      }
-    }
-    case 'CLEAR':
-      return { display: '0', previousValue: null, operation: null, overwrite: false }
-    case 'DELETE_DIGIT': {
-      if (state.display === 'Error') {
-        return { display: '0', previousValue: null, operation: null, overwrite: false }
-      }
-      if (state.overwrite) return { ...state, display: '0', overwrite: false }
-      if (state.display.length === 1) return { ...state, display: '0' }
-      return { ...state, display: state.display.slice(0, -1) }
-    }
-    case 'PERCENT': {
-      if (state.display === 'Error') return state
-      const val = parseFloat(state.display)
-      if (isNaN(val)) return state
-      return { ...state, display: String(val / 100), overwrite: true }
-    }
-    case 'TOGGLE_SIGN': {
-      if (state.display === 'Error' || state.display === '0') return state
-      return {
-        ...state,
-        display: state.display.startsWith('-') ? state.display.slice(1) : '-' + state.display,
-      }
-    }
-    default:
-      return state
-  }
-}
-
-const initialState: State = {
-  display: '0',
-  previousValue: null,
-  operation: null,
-  overwrite: false,
-}
-
-export default function Calculator() {
-  const [state, dispatch] = useReducer(reducer, initialState)
-
-  const addDigit = (digit: string) => dispatch({ type: 'ADD_DIGIT', digit })
-  const chooseOperation = (operation: string) => dispatch({ type: 'CHOOSE_OPERATION', operation })
-
-  const formatDisplay = (value: string) => {
-    if (value === 'Error') return value
-    if (value.includes('.') && value.endsWith('.')) return value
-    const num = parseFloat(value)
-    if (isNaN(num)) return value
-    if (value.includes('.')) {
-      const [int, dec] = value.split('.')
-      return parseFloat(int).toLocaleString('en-US') + '.' + dec
-    }
-    return num.toLocaleString('en-US', { maximumFractionDigits: 10 })
-  }
-
-  const isActive = (op: string) => state.operation === op && state.overwrite
-
-  return (
-    <div className="w-full max-w-sm mx-auto bg-gray-900 rounded-2xl shadow-2xl overflow-hidden">
-      {/* Display */}
-      <div className="p-6 pb-4">
-        <div className="text-right min-h-[24px] text-gray-400 text-sm mb-1">
-          {state.previousValue != null && state.operation
-            ? `${formatDisplay(state.previousValue)} ${state.operation}`
-            : '\u00A0'}
-        </div>
-        <div className="text-right text-white text-5xl font-light tracking-tight overflow-hidden">
-          {formatDisplay(state.display)}
-        </div>
-      </div>
-
-      {/* Buttons */}
-      <div className="grid grid-cols-4 gap-[1px] p-2 pt-0">
-        {/* Row 1: C, +/-, %, / */}
-        <button
-          onClick={() => dispatch({ type: 'CLEAR' })}
-          className="h-16 rounded-xl text-lg font-medium bg-gray-500 hover:bg-gray-400 text-white transition-colors"
-        >
-          C
-        </button>
-        <button
-          onClick={() => dispatch({ type: 'TOGGLE_SIGN' })}
-          className="h-16 rounded-xl text-lg font-medium bg-gray-500 hover:bg-gray-400 text-white transition-colors"
-        >
-          +/-
-        </button>
-        <button
-          onClick={() => dispatch({ type: 'PERCENT' })}
-          className="h-16 rounded-xl text-lg font-medium bg-gray-500 hover:bg-gray-400 text-white transition-colors"
-        >
-          %
-        </button>
-        <button
-          onClick={() => chooseOperation('/')}
-          className={`h-16 rounded-xl text-lg font-medium transition-colors ${
-            isActive('/') ? 'bg-white text-orange-500 ring-2 ring-orange-400' : 'bg-orange-500 hover:bg-orange-400 text-white'
-          }`}
-        >
-          ÷
-        </button>
-
-        {/* Row 2: 7, 8, 9, * */}
-        <button onClick={() => addDigit('7')} className="h-16 rounded-xl text-lg font-medium bg-gray-700 hover:bg-gray-600 text-white transition-colors">7</button>
-        <button onClick={() => addDigit('8')} className="h-16 rounded-xl text-lg font-medium bg-gray-700 hover:bg-gray-600 text-white transition-colors">8</button>
-        <button onClick={() => addDigit('9')} className="h-16 rounded-xl text-lg font-medium bg-gray-700 hover:bg-gray-600 text-white transition-colors">9</button>
-        <button
-          onClick={() => chooseOperation('*')}
-          className={`h-16 rounded-xl text-lg font-medium transition-colors ${
-            isActive('*') ? 'bg-white text-orange-500 ring-2 ring-orange-400' : 'bg-orange-500 hover:bg-orange-400 text-white'
-          }`}
-        >
-          ×
-        </button>
-
-        {/* Row 3: 4, 5, 6, - */}
-        <button onClick={() => addDigit('4')} className="h-16 rounded-xl text-lg font-medium bg-gray-700 hover:bg-gray-600 text-white transition-colors">4</button>
-        <button onClick={() => addDigit('5')} className="h-16 rounded-xl text-lg font-medium bg-gray-700 hover:bg-gray-600 text-white transition-colors">5</button>
-        <button onClick={() => addDigit('6')} className="h-16 rounded-xl text-lg font-medium bg-gray-700 hover:bg-gray-600 text-white transition-colors">6</button>
-        <button
-          onClick={() => chooseOperation('-')}
-          className={`h-16 rounded-xl text-lg font-medium transition-colors ${
-            isActive('-') ? 'bg-white text-orange-500 ring-2 ring-orange-400' : 'bg-orange-500 hover:bg-orange-400 text-white'
-          }`}
-        >
-          −
-        </button>
-
-        {/* Row 4: 1, 2, 3, + */}
-        <button onClick={() => addDigit('1')} className="h-16 rounded-xl text-lg font-medium bg-gray-700 hover:bg-gray-600 text-white transition-colors">1</button>
-        <button onClick={() => addDigit('2')} className="h-16 rounded-xl text-lg font-medium bg-gray-700 hover:bg-gray-600 text-white transition-colors">2</button>
-        <button onClick={() => addDigit('3')} className="h-16 rounded-xl text-lg font-medium bg-gray-700 hover:bg-gray-600 text-white transition-colors">3</button>
-        <button
-          onClick={() => chooseOperation('+')}
-          className={`h-16 rounded-xl text-lg font-medium transition-colors ${
-            isActive('+') ? 'bg-white text-orange-500 ring-2 ring-orange-400' : 'bg-orange-500 hover:bg-orange-400 text-white'
-          }`}
-        >
-          +
-        </button>
-
-        {/* Row 5: 0 (span 2), ., = */}
-        <button onClick={() => addDigit('0')} className="h-16 rounded-xl text-lg font-medium bg-gray-700 hover:bg-gray-600 text-white transition-colors col-span-2">0</button>
-        <button onClick={() => addDigit('.')} className="h-16 rounded-xl text-lg font-medium bg-gray-700 hover:bg-gray-600 text-white transition-colors">.</button>
-        <button
-          onClick={() => dispatch({ type: 'EVALUATE' })}
-          className="h-16 rounded-xl text-lg font-medium bg-orange-500 hover:bg-orange-400 text-white transition-colors"
-        >
-          =
-        </button>
-      </div>
-    </div>
-  )
-}

package/examples/calculator/assets/src/components/Header.tsx

@@ -1,17 +0,0 @@
-import { Link } from '@tanstack/react-router'
-import HeaderNav from './HeaderNav'
-
-interface HeaderProps {
-  children?: React.ReactNode
-}
-
-export default function Header({ children }: HeaderProps) {
-  return (
-    <header className="p-4 flex items-center justify-between bg-gray-800 text-white shadow-lg">
-      <nav className="flex items-center gap-4">{children ?? <HeaderNav />}</nav>
-      <Link to="/" className="text-xl font-semibold">
-        Calculator
-      </Link>
-    </header>
-  )
-}

package/examples/calculator/assets/src/routes/__root.tsx

@@ -1,57 +0,0 @@
-import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-import { TanStackDevtools } from '@tanstack/react-devtools'
-
-import Header from '../components/Header'
-
-import appCss from '../styles.css?url'
-
-export const Route = createRootRoute({
-  head: () => ({
-    meta: [
-      {
-        charSet: 'utf-8',
-      },
-      {
-        name: 'viewport',
-        content: 'width=device-width, initial-scale=1',
-      },
-      {
-        title: 'Calculator',
-      },
-    ],
-    links: [
-      {
-        rel: 'stylesheet',
-        href: appCss,
-      },
-    ],
-  }),
-  shellComponent: RootDocument,
-})
-
-function RootDocument({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <HeadContent />
-      </head>
-      <body>
-        <Header />
-        {children}
-        <TanStackDevtools
-          config={{
-            position: 'bottom-right',
-          }}
-          plugins={[
-            {
-              name: 'Tanstack Router',
-              render: <TanStackRouterDevtoolsPanel />,
-            },
-          ]}
-        />
-        <Scripts />
-      </body>
-    </html>
-  )
-}

package/examples/calculator/assets/src/routes/index.tsx

@@ -1,14 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import Calculator from '../components/Calculator'
-
-export const Route = createFileRoute('/')({
-  component: Home,
-})
-
-function Home() {
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center p-4">
-      <Calculator />
-    </div>
-  )
-}

package/examples/calculator/info.json

@@ -1,20 +0,0 @@
-{
-  "name": "Calculator",
-  "description": "A sleek iOS-style calculator built with TanStack Start and Tailwind CSS for Netlify.",
-  "phase": "example",
-  "modes": ["file-router"],
-  "type": "example",
-  "priority": 10,
-  "link": "",
-  "routes": [{"url": "/", "path": "src/routes/index.tsx", "jsName": "Home"}],
-  "features": ["tanstack-start"],
-  "integrations": [],
-  "dependsOn": [],
-  "variables": [],
-  "packageFileDescriptions": {
-    "src/routes/index.tsx": "Home route: renders Calculator component.",
-    "src/routes/__root.tsx": "Root layout: HTML shell, styles.",
-    "src/components/Calculator.tsx": "iOS-style calculator: digits, operations, evaluate, clear, percent.",
-    "src/components/Header.tsx": "Header component."
-  }
-}

package/examples/calculator/package.json

@@ -1 +0,0 @@
-{}

package/examples/dashboard/README.md

@@ -1,17 +0,0 @@
-# Dashboard Example
-
-An analytics dashboard built with TanStack Start, Chart.js, and Tailwind CSS for Netlify deployment.
-
-## Features
-
-- **Stat Cards**: Revenue, users, orders, and conversion rate with change indicators
-- **Bar Chart**: Monthly revenue visualization
-- **Line Chart**: User growth over time with area fill
-- **Doughnut Chart**: Sales breakdown by category
-- **Responsive Layout**: Adapts to all screen sizes
-
-## Development
-
-```bash
-npm run dev
-```

package/examples/dashboard/assets/AGENTS.md.append

@@ -1,12 +0,0 @@
-### Chart.js Dashboard
-
-Analytics dashboard with Chart.js and react-chartjs-2.
-
-**Dependencies:** chart.js, react-chartjs-2
-
-**Chart types:**
-- Bar - Revenue by month
-- Line - User growth
-- Doughnut - Sales by category
-
-**Setup:** Register Chart.js components before use (CategoryScale, LinearScale, BarElement, LineElement, PointElement, ArcElement, Title, Tooltip, Legend, Filler).

package/examples/dashboard/assets/src/components/Header.tsx

@@ -1,17 +0,0 @@
-import { Link } from '@tanstack/react-router'
-import HeaderNav from './HeaderNav'
-
-interface HeaderProps {
-  children?: React.ReactNode
-}
-
-export default function Header({ children }: HeaderProps) {
-  return (
-    <header className="p-4 flex items-center justify-between bg-gray-800 text-white shadow-lg">
-      <nav className="flex items-center gap-4">{children ?? <HeaderNav />}</nav>
-      <Link to="/" className="text-xl font-semibold">
-        Dashboard
-      </Link>
-    </header>
-  )
-}

package/examples/dashboard/assets/src/routes/__root.tsx

@@ -1,57 +0,0 @@
-import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-import { TanStackDevtools } from '@tanstack/react-devtools'
-
-import Header from '../components/Header'
-
-import appCss from '../styles.css?url'
-
-export const Route = createRootRoute({
-  head: () => ({
-    meta: [
-      {
-        charSet: 'utf-8',
-      },
-      {
-        name: 'viewport',
-        content: 'width=device-width, initial-scale=1',
-      },
-      {
-        title: 'Dashboard',
-      },
-    ],
-    links: [
-      {
-        rel: 'stylesheet',
-        href: appCss,
-      },
-    ],
-  }),
-  shellComponent: RootDocument,
-})
-
-function RootDocument({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <HeadContent />
-      </head>
-      <body>
-        <Header />
-        {children}
-        <TanStackDevtools
-          config={{
-            position: 'bottom-right',
-          }}
-          plugins={[
-            {
-              name: 'Tanstack Router',
-              render: <TanStackRouterDevtoolsPanel />,
-            },
-          ]}
-        />
-        <Scripts />
-      </body>
-    </html>
-  )
-}

package/examples/dashboard/assets/src/routes/index.tsx

@@ -1,158 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { useState, useEffect } from 'react'
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  LineElement,
-  PointElement,
-  ArcElement,
-  Title,
-  Tooltip,
-  Legend,
-  Filler,
-} from 'chart.js'
-import { Bar, Line, Doughnut } from 'react-chartjs-2'
-import { DollarSign, Users, ShoppingCart, TrendingUp } from 'lucide-react'
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  LineElement,
-  PointElement,
-  ArcElement,
-  Title,
-  Tooltip,
-  Legend,
-  Filler
-)
-
-export const Route = createFileRoute('/')({
-  component: Home,
-})
-
-const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const revenueData = {
-  labels: months,
-  datasets: [
-    {
-      label: 'Revenue ($)',
-      data: [12000, 19000, 15000, 22000, 18000, 24000, 20000, 27000, 23000, 29000, 25000, 32000],
-      backgroundColor: 'rgba(59, 130, 246, 0.7)',
-      borderRadius: 6,
-    },
-  ],
-}
-
-const userGrowthData = {
-  labels: months,
-  datasets: [
-    {
-      label: 'Users',
-      data: [1200, 1900, 2400, 2800, 3200, 3900, 4100, 4800, 5200, 5900, 6400, 7200],
-      borderColor: 'rgb(16, 185, 129)',
-      backgroundColor: 'rgba(16, 185, 129, 0.1)',
-      fill: true,
-      tension: 0.4,
-      pointBackgroundColor: 'rgb(16, 185, 129)',
-    },
-  ],
-}
-
-const salesCategoryData = {
-  labels: ['Electronics', 'Clothing', 'Home & Garden', 'Books', 'Sports'],
-  datasets: [
-    {
-      data: [35, 25, 20, 12, 8],
-      backgroundColor: [
-        'rgba(59, 130, 246, 0.8)',
-        'rgba(16, 185, 129, 0.8)',
-        'rgba(245, 158, 11, 0.8)',
-        'rgba(239, 68, 68, 0.8)',
-        'rgba(139, 92, 246, 0.8)',
-      ],
-      borderWidth: 0,
-    },
-  ],
-}
-
-const stats = [
-  { title: 'Total Revenue', value: '$266,000', change: '+12.5%', icon: DollarSign, color: 'bg-blue-500' },
-  { title: 'Total Users', value: '7,200', change: '+8.2%', icon: Users, color: 'bg-emerald-500' },
-  { title: 'Orders', value: '1,840', change: '+5.1%', icon: ShoppingCart, color: 'bg-amber-500' },
-  { title: 'Conversion Rate', value: '3.24%', change: '+1.8%', icon: TrendingUp, color: 'bg-violet-500' },
-]
-
-function Home() {
-  const [mounted, setMounted] = useState(false)
-  useEffect(() => setMounted(true), [])
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <h1 className="text-3xl font-bold text-gray-900 mb-8">Analytics Dashboard</h1>
-
-        {/* Stat Cards */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-          {stats.map((stat) => (
-            <div key={stat.title} className="bg-white rounded-xl shadow-sm p-6 flex items-center gap-4">
-              <div className={`${stat.color} p-3 rounded-lg`}>
-                <stat.icon className="w-6 h-6 text-white" />
-              </div>
-              <div>
-                <p className="text-sm text-gray-500">{stat.title}</p>
-                <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
-                <p className="text-sm text-emerald-600 font-medium">{stat.change}</p>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Charts */}
-        {mounted && (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <div className="bg-white rounded-xl shadow-sm p-6">
-              <h2 className="text-lg font-semibold text-gray-900 mb-4">Monthly Revenue</h2>
-              <Bar
-                data={revenueData}
-                options={{
-                  responsive: true,
-                  plugins: { legend: { display: false } },
-                  scales: { y: { beginAtZero: true } },
-                }}
-              />
-            </div>
-
-            <div className="bg-white rounded-xl shadow-sm p-6">
-              <h2 className="text-lg font-semibold text-gray-900 mb-4">User Growth</h2>
-              <Line
-                data={userGrowthData}
-                options={{
-                  responsive: true,
-                  plugins: { legend: { display: false } },
-                  scales: { y: { beginAtZero: true } },
-                }}
-              />
-            </div>
-
-            <div className="bg-white rounded-xl shadow-sm p-6">
-              <h2 className="text-lg font-semibold text-gray-900 mb-4">Sales by Category</h2>
-              <div className="max-w-sm mx-auto">
-                <Doughnut
-                  data={salesCategoryData}
-                  options={{
-                    responsive: true,
-                    plugins: { legend: { position: 'bottom' } },
-                  }}
-                />
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

package/examples/dashboard/info.json

@@ -1,19 +0,0 @@
-{
-  "name": "Dashboard",
-  "description": "An analytics dashboard with charts built with Chart.js, TanStack Start, and Tailwind CSS for Netlify.",
-  "phase": "example",
-  "modes": ["file-router"],
-  "type": "example",
-  "priority": 10,
-  "link": "",
-  "routes": [{"url": "/", "path": "src/routes/index.tsx", "jsName": "Home"}],
-  "features": ["tanstack-start", "chart.js"],
-  "integrations": [],
-  "dependsOn": [],
-  "variables": [],
-  "packageFileDescriptions": {
-    "src/routes/index.tsx": "Dashboard home: Bar, Line, Doughnut charts (revenue, users, sales).",
-    "src/routes/__root.tsx": "Root layout: Header, styles.",
-    "src/components/Header.tsx": "Header component."
-  }
-}

package/examples/dashboard/package.json

@@ -1,6 +0,0 @@
-{
-  "dependencies": {
-    "chart.js": "^4.5.1",
-    "react-chartjs-2": "^5.3.1"
-  }
-}