@oaysus/cli 0.1.4 → 0.1.6

package/src/templates/svelte-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/svelte-theme-pack/components/example.stories.ts.template

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import {{COMPONENT_NAME}} from './{{COMPONENT_NAME}}.svelte';
+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/svelte-theme-pack/components/example.svelte.template

@@ -0,0 +1,29 @@
+<script lang="ts">
+  // Svelte 5 runes mode - use $props() instead of export let
+  interface Props {
+    heading?: string;
+    subheading?: string;
+    buttonText?: string;
+    buttonLink?: string;
+  }
+
+  let {
+    heading = 'Welcome',
+    subheading = 'Your amazing tagline',
+    buttonText = 'Get Started',
+    buttonLink = '#'
+  }: Props = $props();
+</script>
+
+<div class="bg-linear-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-linear-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>

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

@@ -0,0 +1,45 @@
+{
+  "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": {
+    "svelte": "^5.43.14"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^10.1.2",
+    "@storybook/svelte": "^10.1.2",
+    "@storybook/svelte-vite": "^10.1.2",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tailwindcss/cli": "^4.1.17",
+    "@tailwindcss/postcss": "^4.1.17",
+    "autoprefixer": "^10.4.22",
+    "express": "^5.1.0",
+    "postcss": "^8.5.6",
+    "storybook": "^10.1.2",
+    "svelte": "^5.43.14",
+    "svelte-check": "^3.6.0",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3",
+    "vite": "^6.0.0"
+  },
+  "oaysus": {
+    "theme": {
+      "name": "{{PROJECT_NAME}}-pack",
+      "displayName": "{{DISPLAY_NAME}}",
+      "description": "{{DESCRIPTION}}",
+      "category": "marketing",
+      "isPremium": false,
+      "tags": ["marketing", "components", "theme", "svelte", "performance"]
+    }
+  }
+}

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

@@ -0,0 +1,221 @@
+/**
+ * Preview HTML Generator - Svelte
+ * 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/svelte@4.2.0/index.js → /build/deps/svelte@4.2.0/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 Svelte mount function
+    let mount;
+
+    async function loadSvelte() {
+      try {
+        const svelteModule = await import('svelte');
+        mount = svelteModule.mount;
+
+        if (!mount) {
+          throw new Error('mount not found in svelte module');
+        }
+
+        console.log('✅ Svelte mount function loaded');
+      } catch (error) {
+        console.error('❌ Failed to load Svelte:', error);
+        throw error;
+      }
+    }
+
+    // Load and render a Svelte 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 - Svelte 5 uses default export
+        const Component = module.default;
+
+        if (!Component || typeof Component !== 'function') {
+          throw new Error('Component must be exported as default and must be a function');
+        }
+
+        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);
+
+        // Mount Svelte 5 component using mount() function
+        const app = mount(Component, {
+          target: container,
+          props: defaultProps
+        });
+
+        console.log(\`✅ Successfully mounted \${comp.displayName}\`, app);
+        return app;
+      } 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 Svelte legacy adapter first
+        await loadSvelte();
+
+        // 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/svelte-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/svelte-theme-pack/shared/types.ts.template

@@ -0,0 +1,31 @@
+/**
+ * Shared TypeScript types for Svelte 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/svelte-theme-pack/shared/utils.ts.template

@@ -0,0 +1,37 @@
+/**
+ * Shared utility functions for Svelte 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/svelte-theme-pack/styles/tailwind.css.template

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

package/src/templates/svelte-theme-pack/svelte.config.js.template

@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+  preprocess: vitePreprocess()
+};

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

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

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

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

package/src/templates/vue-theme-pack/.storybook/main.ts.template

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

package/src/templates/vue-theme-pack/.storybook/preview.ts.template

@@ -0,0 +1,40 @@
+import type { Preview } from '@storybook/vue3';
+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/vue-theme-pack/.storybook/utils/schemaToArgTypes.ts.template

@@ -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;
+}