npm - @oaysus/cli - Versions diffs - 0.1.4 → 0.1.5 - Mend

@oaysus/cli 0.1.4 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/src/templates/react-theme-pack/package.json.template ADDED Viewed

@@ -0,0 +1,51 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "{{DESCRIPTION}}",
+  "author": "{{AUTHOR}}",
+  "license": "MIT",
+  "scripts": {
+    "preview": "node preview/generate.js && node preview/server.js",
+    "preview:build": "node preview/generate.js",
+    "preview:start": "node preview/server.js",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o storybook-static"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^10.1.2",
+    "@storybook/react": "^10.1.2",
+    "@storybook/react-vite": "^10.1.2",
+    "@tailwindcss/cli": "^4.1.17",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.22",
+    "express": "^5.1.0",
+    "postcss": "^8.5.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "storybook": "^10.1.2",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4"
+  },
+  "oaysus": {
+    "theme": {
+      "name": "{{PROJECT_NAME}}-pack",
+      "displayName": "{{DISPLAY_NAME}}",
+      "description": "{{DESCRIPTION}}",
+      "category": "marketing",
+      "isPremium": false,
+      "tags": ["marketing", "components", "theme", "react", "tailwind"]
+    }
+  },
+  "dependencies": {
+    "lucide-react": "^0.555.0"
+  }
+}

package/src/templates/react-theme-pack/preview/generate.js.template ADDED Viewed

@@ -0,0 +1,218 @@
+/**
+ * Preview HTML Generator - React
+ * Generates a local preview page that mimics the dashboard's preview-shell.html
+ */
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const BUILD_DIR = path.join(__dirname, '../.oaysus-build');
+const PREVIEW_DIST = path.join(__dirname, 'dist');
+const OUTPUT_HTML = path.join(PREVIEW_DIST, 'index.html');
+// Ensure preview/dist directory exists
+if (!fs.existsSync(PREVIEW_DIST)) {
+  fs.mkdirSync(PREVIEW_DIST, { recursive: true });
+}
+// Check if build exists
+if (!fs.existsSync(BUILD_DIR)) {
+  console.error('❌ Error: .oaysus-build directory not found!');
+  console.error('   Run "oaysus build" first to build your components.');
+  process.exit(1);
+}
+// Read all components
+const components = [];
+const componentDirs = fs.readdirSync(BUILD_DIR).filter(dir => {
+  const fullPath = path.join(BUILD_DIR, dir);
+  return fs.statSync(fullPath).isDirectory() && dir !== 'deps';
+});
+for (const dir of componentDirs) {
+  const schemaPath = path.join(BUILD_DIR, dir, 'schema.json');
+  const jsPath = path.join(BUILD_DIR, dir, 'index.js');
+  if (fs.existsSync(schemaPath) && fs.existsSync(jsPath)) {
+    const schema = JSON.parse(fs.readFileSync(schemaPath, 'utf-8'));
+    components.push({
+      name: dir,
+      displayName: schema.displayName || dir,
+      schema,
+      jsPath: `/build/${dir}/index.js`
+    });
+  }
+}
+// Read import map
+let importMap = { imports: {} };
+const importMapPath = path.join(BUILD_DIR, 'import-map.json');
+if (fs.existsSync(importMapPath)) {
+  importMap = JSON.parse(fs.readFileSync(importMapPath, 'utf-8'));
+}
+// Convert R2 URLs to local URLs
+const localImportMap = { imports: {} };
+for (const [key, value] of Object.entries(importMap.imports)) {
+  // Convert R2 URL to local path
+  // Example: https://r2.dev/.../deps/react@18.3.1/index.js → /build/deps/react@18.3.1/index.js
+  const match = value.match(/deps\/(.*)/);
+  if (match) {
+    localImportMap.imports[key] = `/build/deps/${match[1]}`;
+  } else {
+    localImportMap.imports[key] = value;
+  }
+}
+// Generate HTML
+const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Component Preview - {{PROJECT_NAME}}</title>
+  <link rel="stylesheet" href="/build/theme.css">
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+<body>
+  ${components.map(comp => `<div id="preview-${comp.name}"></div>`).join('\n  ')}
+  <!-- Import Map -->
+  <script type="importmap">
+${JSON.stringify(localImportMap, null, 2)}
+  </script>
+  <!-- Component Loading Script -->
+  <script type="module">
+    // Component configurations
+    const components = ${JSON.stringify(components, null, 2)};
+    // Load React and ReactDOM
+    let React, ReactDOM;
+    async function loadReact() {
+      try {
+        const reactModule = await import('react');
+        const reactDomModule = await import('react-dom/client');
+        React = reactModule.default || reactModule;
+        ReactDOM = reactDomModule.default || reactDomModule;
+        console.log('✅ React loaded:', React);
+        console.log('✅ ReactDOM loaded:', ReactDOM);
+      } catch (error) {
+        console.error('❌ Failed to load React:', error);
+        throw error;
+      }
+    }
+    // Load and render a component
+    async function loadComponent(comp) {
+      const container = document.getElementById(\`preview-\${comp.name}\`);
+      try {
+        console.log(\`Loading component: \${comp.displayName}\`);
+        // Import the component module
+        const module = await import(comp.jsPath);
+        console.log(\`✅ Loaded module for \${comp.displayName}:\`, module);
+        // Get the component (try default export first, then named)
+        const Component = module.default || module[Object.keys(module)[0]];
+        if (!Component) {
+          throw new Error('No component export found in module');
+        }
+        console.log(\`✅ Component function for \${comp.displayName}:\`, Component);
+        // Get default props from schema
+        const defaultProps = {};
+        if (comp.schema.props) {
+          for (const [key, prop] of Object.entries(comp.schema.props)) {
+            if (prop.default !== undefined) {
+              defaultProps[key] = prop.default;
+            } else if (prop.type === 'object' && prop.properties) {
+              // Build nested object from properties
+              const nestedObj = {};
+              for (const [nestedKey, nestedProp] of Object.entries(prop.properties)) {
+                if (nestedProp.default !== undefined) {
+                  nestedObj[nestedKey] = nestedProp.default;
+                }
+              }
+              if (Object.keys(nestedObj).length > 0) {
+                defaultProps[key] = nestedObj;
+              }
+            }
+          }
+        }
+        console.log(\`📝 Rendering \${comp.displayName} with props:\`, defaultProps);
+        // Create root and render
+        const root = ReactDOM.createRoot(container);
+        root.render(React.createElement(Component, defaultProps));
+        console.log(\`✅ Successfully rendered \${comp.displayName}\`);
+      } catch (error) {
+        console.error(\`❌ Failed to load \${comp.displayName}:\`, error);
+        container.innerHTML = \`
+          <div class="error">
+            <strong>Error loading \${comp.displayName}:</strong><br>
+            \${error.message}
+          </div>
+        \`;
+      }
+    }
+    // Main execution
+    async function main() {
+      try {
+        console.log('🚀 Starting component preview...');
+        // Load React first
+        await loadReact();
+        // Load all components
+        for (const comp of components) {
+          await loadComponent(comp);
+        }
+        console.log('✅ All components loaded successfully!');
+      } catch (error) {
+        console.error('❌ Preview failed:', error);
+      }
+    }
+    main();
+  </script>
+</body>
+</html>
+`;
+// Write HTML file
+fs.writeFileSync(OUTPUT_HTML, html);
+console.log(`
+✅ Preview HTML generated successfully!
+📁 Location: ${OUTPUT_HTML}
+🎯 Components found: ${components.length}
+${components.map(c => `   • ${c.displayName} (${c.name})`).join('\n')}
+🚀 Start the preview server with:
+   pnpm run preview:start
+   Or run the full preview (generate + serve):
+   pnpm run preview
+`);

package/src/templates/react-theme-pack/preview/server.js.template ADDED Viewed

@@ -0,0 +1,40 @@
+/**
+ * Local Preview Server
+ * Serves the built components for local testing without uploading to R2
+ */
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const app = express();
+const PORT = 4000;
+// Serve .oaysus-build directory (component bundles and dependencies)
+app.use('/build', express.static(path.join(__dirname, '../.oaysus-build')));
+// Serve preview directory (HTML and assets)
+app.use(express.static(path.join(__dirname, 'dist')));
+// Handle 404s
+app.use((req, res) => {
+  res.status(404).send('File not found');
+});
+// Start server
+app.listen(PORT, () => {
+  console.log(`
+╔════════════════════════════════════════════════════════════╗
+║                                                            ║
+║  🎨  Component Preview Server                              ║
+║                                                            ║
+║  Running at: http://localhost:${PORT}                          ║
+║                                                            ║
+║  Press Ctrl+C to stop the server                          ║
+║                                                            ║
+╚════════════════════════════════════════════════════════════╝
+  `);
+});

package/src/templates/react-theme-pack/shared/types.ts.template ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * Shared TypeScript types for {{DISPLAY_NAME}}
+ */
+export interface BaseComponentProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+export interface ButtonProps extends BaseComponentProps {
+  text: string;
+  link: string;
+  variant?: 'primary' | 'secondary';
+}
+export interface HeadingProps extends BaseComponentProps {
+  heading: string;
+  subheading?: string;
+}

package/src/templates/react-theme-pack/shared/utils.ts.template ADDED Viewed

@@ -0,0 +1,30 @@
+/**
+ * Shared utility functions for {{DISPLAY_NAME}}
+ */
+/**
+ * Combine class names
+ */
+export function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+/**
+ * Format a date string
+ */
+export function formatDate(date: Date | string): string {
+  const d = typeof date === 'string' ? new Date(date) : date;
+  return d.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+}
+/**
+ * Truncate text to a maximum length
+ */
+export function truncate(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength - 3) + '...';
+}

package/src/templates/react-theme-pack/styles/tailwind.css.template ADDED Viewed

	@@ -0,0 +1 @@
1	+ @import "tailwindcss";

package/src/templates/react-theme-pack/tsconfig.json.template ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": false,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

package/src/templates/react-theme-pack/vite.config.ts.template ADDED Viewed

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './')
+    }
+  }
+});

package/src/templates/shared/.gitignore.template ADDED Viewed

@@ -0,0 +1,46 @@
+# Dependencies
+node_modules/
+pnpm-lock.yaml
+yarn.lock
+package-lock.json
+# Build outputs
+dist/
+build/
+.next/
+.nuxt/
+.output/
+.oaysus-build/
+storybook-static/
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+# OS
+.DS_Store
+Thumbs.db
+# Environment
+.env
+.env.local
+.env.*.local
+# Testing
+coverage/
+.nyc_output/
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+# Misc
+.cache/
+*.tgz
+*.zip

package/src/templates/shared/postcss.config.js.template ADDED Viewed

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+}

package/src/templates/shared/tailwind.config.js.template ADDED Viewed

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./components/**/*.{js,ts,jsx,tsx,vue,svelte}",
+    "./shared/**/*.{js,ts,jsx,tsx,vue,svelte}"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

package/src/templates/svelte-theme-pack/.storybook/main.ts.template ADDED Viewed

@@ -0,0 +1,13 @@
+import type { StorybookConfig } from '@storybook/svelte-vite';
+const config: StorybookConfig = {
+  stories: ['../components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-a11y'],
+  framework: {
+    name: '@storybook/svelte-vite',
+    options: {}
+  },
+  docs: {}
+};
+export default config;

package/src/templates/svelte-theme-pack/.storybook/preview.ts.template ADDED Viewed

@@ -0,0 +1,40 @@
+import type { Preview } from '@storybook/svelte';
+import '../styles/tailwind.css';
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    },
+    viewport: {
+      viewports: {
+        mobile: {
+          name: 'Mobile',
+          styles: { width: '375px', height: '667px' }
+        },
+        tablet: {
+          name: 'Tablet',
+          styles: { width: '768px', height: '1024px' }
+        },
+        desktop: {
+          name: 'Desktop',
+          styles: { width: '1280px', height: '800px' }
+        }
+      }
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+        { name: 'dark', value: '#1f2937' },
+        { name: 'gray', value: '#f3f4f6' }
+      ]
+    },
+    layout: 'fullscreen'
+  }
+};
+export default preview;

package/src/templates/svelte-theme-pack/.storybook/utils/schemaToArgTypes.ts.template ADDED Viewed

@@ -0,0 +1,107 @@
+/**
+ * Converts a component schema.json to Storybook ArgTypes
+ * This enables automatic control generation from Oaysus component schemas
+ */
+interface SchemaProp {
+  type: string;
+  displayName?: string;
+  description?: string;
+  default?: unknown;
+  min?: number;
+  max?: number;
+  step?: number;
+  properties?: Record<string, SchemaProp>;
+  fields?: Array<{ name: string; type: string; default?: unknown }>;
+}
+interface ComponentSchema {
+  type: string;
+  displayName: string;
+  description?: string;
+  category?: string;
+  props: Record<string, SchemaProp>;
+}
+interface ArgType {
+  name?: string;
+  description?: string;
+  control: { type: string; [key: string]: unknown };
+  table?: {
+    category?: string;
+    defaultValue?: { summary: string };
+  };
+}
+/**
+ * Map schema prop type to Storybook control type
+ */
+function propTypeToControl(prop: SchemaProp): ArgType['control'] {
+  switch (prop.type) {
+    case 'color':
+      return {
+        type: 'color',
+        presetColors: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899']
+      };
+    case 'range':
+      return {
+        type: 'range',
+        min: prop.min ?? 0,
+        max: prop.max ?? 100,
+        step: prop.step ?? 1
+      };
+    case 'number':
+      return { type: 'number' };
+    case 'boolean':
+      return { type: 'boolean' };
+    case 'textarea':
+    case 'string':
+    case 'text':
+    case 'link':
+      return { type: 'text' };
+    case 'image':
+    case 'array':
+    case 'object':
+      return { type: 'object' };
+    default:
+      return { type: 'text' };
+  }
+}
+/**
+ * Convert full schema to Storybook ArgTypes object
+ */
+export function schemaToArgTypes(schema: ComponentSchema): Record<string, ArgType> {
+  const argTypes: Record<string, ArgType> = {};
+  for (const [propName, propDef] of Object.entries(schema.props)) {
+    argTypes[propName] = {
+      name: propDef.displayName || propName,
+      description: propDef.description || '',
+      control: propTypeToControl(propDef),
+      table: {
+        category: 'Props',
+        defaultValue: propDef.default !== undefined
+          ? { summary: JSON.stringify(propDef.default) }
+          : undefined
+      }
+    };
+  }
+  return argTypes;
+}
+/**
+ * Extract default args from schema for story initialization
+ */
+export function schemaToDefaultArgs(schema: ComponentSchema): Record<string, unknown> {
+  const args: Record<string, unknown> = {};
+  for (const [propName, propDef] of Object.entries(schema.props)) {
+    if (propDef.default !== undefined) {
+      args[propName] = propDef.default;
+    }
+  }
+  return args;
+}

package/src/templates/svelte-theme-pack/README.md.template ADDED Viewed

@@ -0,0 +1,67 @@
+# {{DISPLAY_NAME}}
+{{DESCRIPTION}}
+## Installation
+```bash
+pnpm install
+```
+## Components
+This theme pack includes the following Svelte components:
+### Hero
+A hero section component with heading, subheading, and CTA button.
+### CTA
+A call-to-action component for conversions.
+### Testimonials
+A testimonials section to showcase customer reviews.
+## Usage
+```svelte
+<script>
+  import Hero from './components/Hero';
+  import CTA from './components/CTA';
+  import Testimonials from './components/Testimonials';
+</script>
+<Hero
+  heading="Welcome"
+  subheading="Build amazing things"
+  buttonText="Get Started"
+  buttonLink="/start"
+/>
+<Testimonials />
+<CTA />
+```
+## Adding New Components
+To add a new component to this theme pack:
+```bash
+oaysus create component MyComponent
+```
+## Development
+This theme pack was created using the Oaysus CLI.
+To validate and package for upload:
+```bash
+oaysus validate
+```
+## Author
+{{AUTHOR}}
+## License
+MIT