nitrostack 1.0.0 → 1.0.2

package/templates/typescript-starter/src/widgets/app/calculator-operations/page.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { withToolData } from 'nitrostack/widgets';
+
+/**
+ * Widget Metadata (stored in widget-manifest.json)
+ * 
+ * This widget lists all available calculator operations.
+ * 
+ * Example includes all four operations: add, subtract, multiply, divide
+ * 
+ * Frontend developers: Edit widget-manifest.json to update examples
+ */
+
+interface Operation {
+  name: string;
+  symbol: string;
+  description: string;
+  example: string;
+}
+
+interface OperationsData {
+  operations: Operation[];
+}
+
+function CalculatorOperations({ data }: { data: OperationsData }) {
+  const getOperationColor = (name: string) => {
+    const colors: Record<string, string> = {
+      add: '#10b981',
+      subtract: '#f59e0b',
+      multiply: '#3b82f6',
+      divide: '#8b5cf6'
+    };
+    return colors[name] || '#6b7280';
+  };
+
+  return (
+    <div style={{
+      padding: '24px',
+      background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
+      borderRadius: '16px',
+      maxWidth: '500px'
+    }}>
+      <h3 style={{
+        margin: '0 0 20px 0',
+        fontSize: '24px',
+        color: '#1f2937',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px'
+      }}>
+        <span style={{ fontSize: '32px' }}>🔢</span>
+        Calculator Operations
+      </h3>
+
+      <div style={{ display: 'grid', gap: '12px' }}>
+        {data.operations.map((op) => (
+          <div
+            key={op.name}
+            style={{
+              background: 'white',
+              borderRadius: '12px',
+              padding: '16px',
+              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+              borderLeft: `4px solid ${getOperationColor(op.name)}`
+            }}
+          >
+            <div style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '12px',
+              marginBottom: '8px'
+            }}>
+              <div style={{
+                width: '40px',
+                height: '40px',
+                borderRadius: '10px',
+                background: getOperationColor(op.name),
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: 'white',
+                fontSize: '24px',
+                fontWeight: 'bold'
+              }}>
+                {op.symbol}
+              </div>
+              <div>
+                <div style={{
+                  fontSize: '16px',
+                  fontWeight: 'bold',
+                  color: '#1f2937',
+                  textTransform: 'capitalize'
+                }}>
+                  {op.name}
+                </div>
+                <div style={{
+                  fontSize: '14px',
+                  color: '#6b7280'
+                }}>
+                  {op.description}
+                </div>
+              </div>
+            </div>
+            <div style={{
+              marginTop: '12px',
+              padding: '8px 12px',
+              background: '#f9fafb',
+              borderRadius: '8px',
+              fontFamily: 'monospace',
+              fontSize: '14px',
+              color: '#374151'
+            }}>
+              {op.example}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div style={{
+        marginTop: '16px',
+        textAlign: 'center',
+        fontSize: '12px',
+        color: '#6b7280'
+      }}>
+        ✨ Use the 'calculate' tool to perform these operations
+      </div>
+    </div>
+  );
+}
+
+export default withToolData(CalculatorOperations);
+

package/templates/typescript-starter/src/widgets/app/calculator-result/page.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { withToolData } from 'nitrostack/widgets';
+
+/**
+ * Widget Metadata (stored in widget-manifest.json)
+ * 
+ * This widget displays calculation results with operation details.
+ * 
+ * Examples defined in manifest:
+ * - Addition: 5 + 3 = 8
+ * - Multiplication: 6 × 7 = 42
+ * - Division: 20 ÷ 4 = 5
+ * 
+ * Frontend developers: Edit widget-manifest.json to update examples
+ */
+
+interface CalculatorData {
+  operation: string;
+  a: number;
+  b: number;
+  result: number;
+  expression: string;
+}
+
+function CalculatorResult({ data }: { data: CalculatorData }) {
+  const getOperationColor = (op: string) => {
+    const colors: Record<string, string> = {
+      add: '#10b981',
+      subtract: '#f59e0b',
+      multiply: '#3b82f6',
+      divide: '#8b5cf6'
+    };
+    return colors[op] || '#6b7280';
+  };
+
+  const getOperationIcon = (op: string) => {
+    const icons: Record<string, string> = {
+      add: '➕',
+      subtract: '➖',
+      multiply: '✖️',
+      divide: '➗'
+    };
+    return icons[op] || '🔢';
+  };
+
+  const color = getOperationColor(data.operation);
+
+  return (
+    <div style={{
+      padding: '24px',
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      borderRadius: '16px',
+      color: 'white',
+      maxWidth: '400px',
+      boxShadow: '0 10px 30px rgba(0,0,0,0.2)'
+    }}>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        marginBottom: '20px'
+      }}>
+        <span style={{ fontSize: '32px' }}>
+          {getOperationIcon(data.operation)}
+        </span>
+        <div>
+          <h3 style={{ margin: 0, fontSize: '18px', opacity: 0.9 }}>
+            Calculator Result
+          </h3>
+          <p style={{ margin: '4px 0 0 0', fontSize: '14px', opacity: 0.7 }}>
+            {data.operation.charAt(0).toUpperCase() + data.operation.slice(1)}
+          </p>
+        </div>
+      </div>
+
+      <div style={{
+        background: 'rgba(255, 255, 255, 0.15)',
+        borderRadius: '12px',
+        padding: '20px',
+        backdropFilter: 'blur(10px)',
+        marginBottom: '16px'
+      }}>
+        <div style={{
+          fontSize: '28px',
+          fontWeight: 'bold',
+          textAlign: 'center',
+          marginBottom: '12px',
+          fontFamily: 'monospace'
+        }}>
+          {data.expression}
+        </div>
+        
+        <div style={{
+          display: 'flex',
+          justifyContent: 'space-around',
+          fontSize: '14px',
+          opacity: 0.9,
+          marginTop: '16px'
+        }}>
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ fontSize: '12px', opacity: 0.7 }}>First</div>
+            <div style={{ fontWeight: 'bold', fontSize: '20px' }}>{data.a}</div>
+          </div>
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ fontSize: '12px', opacity: 0.7 }}>Second</div>
+            <div style={{ fontWeight: 'bold', fontSize: '20px' }}>{data.b}</div>
+          </div>
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ fontSize: '12px', opacity: 0.7 }}>Result</div>
+            <div style={{ 
+              fontWeight: 'bold', 
+              fontSize: '24px',
+              color: '#fbbf24'
+            }}>
+              {data.result}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div style={{
+        fontSize: '12px',
+        textAlign: 'center',
+        opacity: 0.7
+      }}>
+        ✨ NitroStack Calculator
+      </div>
+    </div>
+  );
+}
+
+export default withToolData(CalculatorResult);
+

package/templates/typescript-starter/src/widgets/app/layout.tsx

@@ -0,0 +1,14 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body style={{ margin: 0, padding: 0, fontFamily: 'system-ui, sans-serif' }}>
+        {children}
+      </body>
+    </html>
+  );
+}
+

package/templates/typescript-starter/src/widgets/next.config.js

@@ -0,0 +1,37 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ['nitrostack'],
+  
+  // Development optimizations to prevent cache corruption
+  ...(process.env.NODE_ENV === 'development' && {
+    // Use memory cache instead of filesystem cache in dev to avoid stale chunks
+    webpack: (config, { isServer }) => {
+      // Disable persistent caching in development to prevent chunk reference errors
+      if (config.cache && config.cache.type === 'filesystem') {
+        config.cache = {
+          type: 'memory',
+        };
+      }
+      
+      // Improve cache busting for new files
+      if (!isServer) {
+        config.cache = false; // Disable cache completely on client in dev
+      }
+      
+      return config;
+    },
+    
+    // Disable build activity indicator which can cause issues
+    devIndicators: {
+      buildActivity: false,
+      buildActivityPosition: 'bottom-right',
+    },
+    
+    // Faster dev server
+    compress: false,
+  }),
+};
+
+export default nextConfig;
+

package/templates/typescript-starter/src/widgets/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "calculator-widgets",
+  "version": "1.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3001",
+    "build": "next build",
+    "start": "next start -p 3001"
+  },
+  "dependencies": {
+    "next": "^14.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "nitrostack": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5"
+  }
+}
+

package/templates/typescript-starter/src/widgets/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+

package/templates/typescript-starter/src/widgets/widget-manifest.json

@@ -0,0 +1,48 @@
+{
+  "version": "1.0.0",
+  "widgets": [
+    {
+      "uri": "/calculator-result",
+      "name": "Calculator Result",
+      "description": "Displays the result of a calculation with operation details",
+      "examples": [
+        {
+          "name": "Addition Example",
+          "description": "Shows the result of adding 5 + 3",
+          "data": {
+            "operation": "add",
+            "a": 5,
+            "b": 3,
+            "result": 8,
+            "expression": "5 + 3 = 8"
+          }
+        },
+        {
+          "name": "Multiplication Example",
+          "description": "Shows the result of multiplying 6 × 7",
+          "data": {
+            "operation": "multiply",
+            "a": 6,
+            "b": 7,
+            "result": 42,
+            "expression": "6 × 7 = 42"
+          }
+        },
+        {
+          "name": "Division Example",
+          "description": "Shows the result of dividing 20 ÷ 4",
+          "data": {
+            "operation": "divide",
+            "a": 20,
+            "b": 4,
+            "result": 5,
+            "expression": "20 ÷ 4 = 5"
+          }
+        }
+      ],
+      "tags": ["calculator", "math", "result"]
+    }
+  ],
+  "generatedAt": "2025-01-01T00:00:00.000Z"
+}
+

package/templates/typescript-starter/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022"],
+    "moduleResolution": "node",
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "src/widgets"]
+}
+