@oaysus/cli 0.1.4 → 0.1.5

package/src/templates/vue-theme-pack/README.md.template

@@ -0,0 +1,69 @@
+# {{DISPLAY_NAME}}
+
+{{DESCRIPTION}}
+
+## Installation
+
+```bash
+pnpm install
+```
+
+## Components
+
+This theme pack includes the following Vue 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
+
+```vue
+<template>
+  <Hero
+    heading="Welcome"
+    subheading="Build amazing things"
+    buttonText="Get Started"
+    buttonLink="/start"
+  />
+  <Testimonials />
+  <CTA />
+</template>
+
+<script setup>
+import Hero from './components/Hero';
+import CTA from './components/CTA';
+import Testimonials from './components/Testimonials';
+</script>
+```
+
+## 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

package/src/templates/vue-theme-pack/components/example-schema.json.template

@@ -0,0 +1,24 @@
+{
+  "type": "{{COMPONENT_TYPE}}",
+  "displayName": "{{COMPONENT_NAME}}",
+  "description": "{{DESCRIPTION}}",
+  "category": "{{CATEGORY}}",
+  "props": {
+    "heading": {
+      "type": "string",
+      "default": "Welcome"
+    },
+    "subheading": {
+      "type": "string",
+      "default": "Your amazing tagline"
+    },
+    "buttonText": {
+      "type": "string",
+      "default": "Get Started"
+    },
+    "buttonLink": {
+      "type": "string",
+      "default": "#"
+    }
+  }
+}

package/src/templates/vue-theme-pack/components/example.stories.ts.template

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import {{COMPONENT_NAME}} from './{{COMPONENT_NAME}}.vue';
+import { schemaToArgTypes, schemaToDefaultArgs } from '../.storybook/utils/schemaToArgTypes';
+import schema from './schema.json';
+
+const meta: Meta<typeof {{COMPONENT_NAME}}> = {
+  title: 'Components/{{COMPONENT_NAME}}',
+  component: {{COMPONENT_NAME}},
+  argTypes: schemaToArgTypes(schema),
+  args: schemaToDefaultArgs(schema),
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_NAME}}>;
+
+/**
+ * Default story using schema defaults
+ */
+export const Default: Story = {};
+
+/**
+ * Custom example with modified props
+ */
+export const CustomExample: Story = {
+  args: {
+    heading: 'Custom Heading',
+    subheading: 'This is a custom subheading',
+    buttonText: 'Click Me',
+    buttonLink: '/custom-link'
+  }
+};

package/src/templates/vue-theme-pack/components/example.vue.template

@@ -0,0 +1,32 @@
+<template>
+  <div class="bg-gradient-to-r from-orange-500 via-pink-500 to-purple-600 text-white py-24 px-4 min-h-[500px] flex items-center justify-center border-8 border-yellow-400 shadow-2xl">
+    <div class="max-w-4xl mx-auto text-center">
+      <h1 class="text-6xl font-black mb-6 text-white drop-shadow-lg">{{ heading }}</h1>
+      <p class="text-2xl mb-10 text-yellow-200 font-semibold">{{ subheading }}</p>
+      <a
+        :href="buttonLink"
+        class="inline-block bg-gradient-to-r from-green-400 to-cyan-500 text-white px-8 py-4 rounded-full text-xl font-bold shadow-xl hover:scale-110 hover:rotate-2 transition-all duration-300 cursor-pointer no-underline"
+      >
+        {{ buttonText }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue';
+
+interface Props {
+  heading?: string;
+  subheading?: string;
+  buttonText?: string;
+  buttonLink?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  heading: 'Welcome',
+  subheading: 'Your amazing tagline',
+  buttonText: 'Get Started',
+  buttonLink: '#'
+});
+</script>

package/src/templates/vue-theme-pack/package.json.template

@@ -0,0 +1,44 @@
+{
+  "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": {
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^10.1.2",
+    "@storybook/vue3": "^10.1.2",
+    "@storybook/vue3-vite": "^10.1.2",
+    "@tailwindcss/cli": "^4.1.17",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "autoprefixer": "^10.4.22",
+    "express": "^5.1.0",
+    "postcss": "^8.5.6",
+    "storybook": "^10.1.2",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3",
+    "vite": "^6.0.0",
+    "vue": "^3.5.24"
+  },
+  "oaysus": {
+    "theme": {
+      "name": "{{PROJECT_NAME}}-pack",
+      "displayName": "{{DISPLAY_NAME}}",
+      "description": "{{DESCRIPTION}}",
+      "category": "marketing",
+      "isPremium": false,
+      "tags": ["marketing", "components", "theme", "vue", "composition-api"]
+    }
+  }
+}

package/src/templates/vue-theme-pack/preview/generate.js.template

@@ -0,0 +1,218 @@
+/**
+ * Preview HTML Generator - Vue
+ * 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/vue@3.3.4/index.js → /build/deps/vue@3.3.4/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 Vue
+    let createApp;
+
+    async function loadVue() {
+      try {
+        const vueModule = await import('vue');
+        createApp = vueModule.createApp || vueModule.default?.createApp;
+
+        if (!createApp) {
+          throw new Error('createApp not found in Vue module');
+        }
+
+        console.log('✅ Vue loaded:', vueModule);
+      } catch (error) {
+        console.error('❌ Failed to load Vue:', error);
+        throw error;
+      }
+    }
+
+    // Load and render a Vue 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 definition 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 Vue app and mount
+        const app = createApp(Component, defaultProps);
+        app.mount(container);
+
+        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 Vue first
+        await loadVue();
+
+        // 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/vue-theme-pack/preview/server.js.template

@@ -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/vue-theme-pack/shared/types.ts.template

@@ -0,0 +1,31 @@
+/**
+ * Shared TypeScript types for Vue components
+ */
+
+export interface BaseComponentProps {
+  class?: string;
+}
+
+export interface ButtonProps extends BaseComponentProps {
+  text: string;
+  link: string;
+  variant?: 'primary' | 'secondary';
+}
+
+export interface HeadingProps extends BaseComponentProps {
+  heading: string;
+  subheading?: string;
+}
+
+export interface ImageProps {
+  src: string;
+  alt: string;
+  width?: number;
+  height?: number;
+}
+
+export interface LinkProps {
+  text: string;
+  href: string;
+  target?: '_blank' | '_self';
+}

package/src/templates/vue-theme-pack/shared/utils.ts.template

@@ -0,0 +1,37 @@
+/**
+ * Shared utility functions for Vue components
+ */
+
+/**
+ * Combine class names, filtering out falsy values
+ */
+export function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+/**
+ * Format a date to a readable 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).trim() + '...';
+}
+
+/**
+ * Generate a unique ID
+ */
+export function generateId(prefix: string = 'id'): string {
+  return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+}

package/src/templates/vue-theme-pack/styles/tailwind.css.template

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

package/src/templates/vue-theme-pack/tsconfig.json.template

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.vue"],
+  "exclude": ["node_modules", "dist", ".oaysus-build"]
+}

package/src/templates/vue-theme-pack/vite.config.ts.template

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