create-ui0 0.0.0-stage → 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}

package/dist/index.js

@@ -0,0 +1,168 @@
+import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import prompts from 'prompts';
+/**
+ * create-ui0 - scaffolds a ui0 (Vue + @ui0 packages) app.
+ * Usage: npm create ui0 [dir]
+ */
+const templateDir = fileURLToPath(new URL('../template', import.meta.url));
+const componentTemplateDir = fileURLToPath(new URL('../template-component', import.meta.url));
+const toKebab = (s) => s
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase();
+const toPascal = (s) => s.split(/[-\s_]+/).map((w) => w[0].toUpperCase() + w.slice(1)).join('');
+const toCamel = (s) => {
+    const p = toPascal(s);
+    return p[0].toLowerCase() + p.slice(1);
+};
+/** substitutes {%kebab%} / {%Pascal%} / {%camel%} in a template file's content */
+const substitute = (content, name) => content
+    .replaceAll('{%kebab%}', toKebab(name))
+    .replaceAll('{%Pascal%}', toPascal(name))
+    .replaceAll('{%camel%}', toCamel(name));
+/** selectable template features - each adds deps (and a demo section) */
+const FEATURES = [
+    {
+        id: 'flex',
+        title: 'Flex layout',
+        deps: { '@ui0/flex': '^0.1.1' },
+        importLine: "import Flex from '@ui0/flex'",
+        section: `      <section>
+        <h2>Flex</h2>
+        <Flex items="center">
+          <div :class="$style.box">one</div>
+          <div :class="$style.box">two</div>
+          <div :class="$style.box">three</div>
+        </Flex>
+      </section>`
+    },
+    {
+        id: 'button',
+        title: 'Button component',
+        deps: { '@ui0/button': '^0.1.1' },
+        importLine: "import Button from '@ui0/button'",
+        section: `      <section>
+        <h2>Button</h2>
+        <Button>default</Button>
+      </section>`
+    },
+    {
+        id: 'icon',
+        title: 'Icon component + ui0 icon pack',
+        deps: { '@ui0/icon': '^0.1.1', '@ui0/icons': '^0.1.1' },
+        importLine: "import { Icon } from '@ui0/icon'",
+        section: `      <section>
+        <h2>Icon</h2>
+        <Icon value="ui0/heart-alt" />
+      </section>`
+    }
+];
+const onCancel = () => {
+    console.log('aborted');
+    process.exit(0);
+};
+/**
+ * `create-ui0 component [Name]` - scaffolds a single component folder from
+ * template-component/ into the project at cwd (src/components/<kebab>/).
+ */
+const runComponent = async () => {
+    const argName = process.argv[3];
+    const { name } = await prompts({ type: argName ? null : 'text', name: 'name', message: 'Component name (PascalCase, e.g. MyButton)' }, { onCancel });
+    const componentName = argName ?? name;
+    if (!componentName)
+        onCancel();
+    const kebab = toKebab(componentName);
+    const { target } = await prompts({
+        type: 'text',
+        name: 'target',
+        message: 'Target directory',
+        initial: path.join('src', 'components', kebab)
+    }, { onCancel });
+    const { spec } = await prompts({ type: 'confirm', name: 'spec', message: 'Include a vitest spec (adds vitest + @vue/test-utils to devDependencies)?', initial: false }, { onCancel });
+    const dir = path.resolve(process.cwd(), target);
+    if (existsSync(dir)) {
+        console.error(`${target} already exists`);
+        process.exit(1);
+    }
+    mkdirSync(dir, { recursive: true });
+    const files = readdirSync(componentTemplateDir).filter((f) => spec || f !== 'name.spec.ts');
+    for (const file of files) {
+        const content = substitute(readFileSync(path.join(componentTemplateDir, file), 'utf8'), componentName);
+        writeFileSync(path.join(dir, file.replace(/^name\./, `${kebab}.`)), content);
+    }
+    if (spec) {
+        const manifestPath = path.join(process.cwd(), 'package.json');
+        if (existsSync(manifestPath)) {
+            const manifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
+            manifest.devDependencies = {
+                ...manifest.devDependencies,
+                '@vue/test-utils': '^2.4.6',
+                'happy-dom': '^15.0.0',
+                vitest: '^5.0.5'
+            };
+            writeFileSync(manifestPath, JSON.stringify(manifest, null, 2) + '\n');
+        }
+    }
+    console.log(`\nCreated ${target}:`);
+    for (const file of files)
+        console.log(`  ${file.replace(/^name\./, `${kebab}.`)}`);
+};
+const run = async () => {
+    if (process.argv[2] === 'component') {
+        await runComponent();
+        return;
+    }
+    const argDir = process.argv[2];
+    const { dir } = await prompts({
+        type: argDir ? null : 'text',
+        name: 'dir',
+        message: 'Project directory',
+        initial: 'ui0-app'
+    }, { onCancel });
+    const target = path.resolve(process.cwd(), argDir ?? dir);
+    const name = path.basename(target);
+    if (existsSync(target)) {
+        const { overwrite } = await prompts({ type: 'confirm', name: 'overwrite', message: `${name} exists - continue and fill missing files?`, initial: false }, { onCancel });
+        if (!overwrite)
+            process.exit(0);
+    }
+    const { features } = (await prompts({
+        type: 'multiselect',
+        name: 'features',
+        message: 'Packages to include',
+        choices: FEATURES.map((f) => ({ title: f.title, value: f.id, selected: f.id !== 'icon' })),
+        instructions: false
+    }, { onCancel }));
+    mkdirSync(target, { recursive: true });
+    cpSync(templateDir, target, { recursive: true });
+    rmSync(path.join(target, 'package.json.tpl'));
+    const picked = FEATURES.filter((f) => features.includes(f.id));
+    // package.json from the template manifest + chosen deps
+    const manifest = JSON.parse(readFileSync(path.join(templateDir, 'package.json.tpl'), 'utf8'));
+    manifest.name = name;
+    Object.assign(manifest.dependencies, ...picked.map((f) => f.deps));
+    writeFileSync(path.join(target, 'package.json'), JSON.stringify(manifest, null, 2) + '\n');
+    // App.vue: inject the demo sections of the picked features
+    const appVue = path.join(target, 'src/App.vue');
+    let app = readFileSync(appVue, 'utf8');
+    app = app
+        .replace('/* FEATURE_IMPORTS */', picked.map((f) => f.importLine).join('\n'))
+        .replace('/* FEATURE_SECTIONS */', picked.map((f) => f.section).join('\n\n'));
+    writeFileSync(appVue, app);
+    // the icon pack registers itself as a vue plugin
+    const mainTs = path.join(target, 'src/main.ts');
+    let main = readFileSync(mainTs, 'utf8');
+    if (features.includes('icon')) {
+        main = main
+            .replace("import { createUi0 } from '@ui0/core'", "import Icons from '@ui0/icons'\nimport { createUi0 } from '@ui0/core'")
+            .replace('app.use(ui0)', 'app.use(ui0)\napp.use(Icons)');
+    }
+    writeFileSync(mainTs, main);
+    console.log(`\nScaffolded ${name}:\n`);
+    console.log(`  cd ${path.relative(process.cwd(), target)}`);
+    console.log('  npm install');
+    console.log('  npm run dev');
+};
+run();

package/package.json

@@ -1,6 +1,26 @@
 {
   "name": "create-ui0",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Scaffold a ui0 (Vue + @ui0) app - npm create ui0",
+  "type": "module",
+  "bin": {
+    "create-ui0": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "template",
+    "template-component"
+  ],
+  "scripts": {
+    "create:build": "tsc -p tsconfig.json",
+    "create:publish": "npm publish --access public"
+  },
+  "dependencies": {
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.8",
+    "@types/prompts": "^2.4.9",
+    "typescript": "~6.0.3"
+  }
+}

package/template/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ui0 app</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/package.json.tpl

@@ -0,0 +1,23 @@
+{
+  "name": "ui0-app",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.45",
+    "@ui0/core": "^0.1.2",
+    "@ui0/theme": "^0.1.1"
+  },
+  "devDependencies": {
+    "@ui0/types": "^0.1.2",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "sass-embedded": "^1.80.0",
+    "typescript": "~6.0.3",
+    "vite": "^8.3.5"
+  }
+}

package/template/src/App.vue

@@ -0,0 +1,44 @@
+<template>
+  <ThemeProvider preset="app">
+    <App
+      title="ui0 app"
+      name="app"
+    >
+      <main :class="$style.page">
+        <h1>ui0 app</h1>
+
+/* FEATURE_SECTIONS */
+      </main>
+    </App>
+  </ThemeProvider>
+</template>
+
+<script setup lang="ts">
+  import { App } from '@ui0/core'
+  import { ThemeProvider } from '@ui0/theme'
+/* FEATURE_IMPORTS */
+</script>
+
+<style module lang="scss">
+  .page {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding: 32px;
+    font-family: system-ui, sans-serif;
+
+    h1 {
+      font-size: 20px;
+    }
+    h2 {
+      font-size: 14px;
+      opacity: 0.7;
+      margin-bottom: 8px;
+    }
+  }
+  .box {
+    padding: 12px 16px;
+    border: 1px solid rgba(127, 127, 127, 0.4);
+    border-radius: 6px;
+  }
+</style>

package/template/src/main.ts

@@ -0,0 +1,14 @@
+import { createUi0 } from '@ui0/core'
+import { createUi0Theme } from '@ui0/theme'
+import { createApp } from 'vue'
+
+import './assets/theme.css'
+import config from '../ui0.config'
+import App from './App.vue'
+
+const ui0 = createUi0(config)
+ui0.use(createUi0Theme(config.theme!))
+
+const app = createApp(App)
+app.use(ui0)
+app.mount('#app')

package/template/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "preserve",
+    "types": ["vue"],
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "vite.config.ts", "ui0.config.ts"]
+}

package/template/ui0.config.ts

@@ -0,0 +1,23 @@
+import type { Ui0CoreConfig } from '@ui0/types'
+
+const config: Ui0CoreConfig = {
+  theme: {
+    default: 'app',
+    contracts: {
+      display: {}
+    },
+    presets: {
+      app: {
+        default: {
+          color: {
+            brand: ['rgb(86 59 177)', 4],
+            foreground: '#111',
+            background: '#fff'
+          }
+        }
+      }
+    }
+  }
+}
+
+export default config

package/template/vite.config.ts

@@ -0,0 +1,7 @@
+import ui0Theme from '@ui0/theme/vite'
+import Vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [ui0Theme({ out: 'src/assets/theme.css' }), Vue()]
+})

package/template-component/name.module.css

@@ -0,0 +1,3 @@
+.{%camel%} {
+  /* component base styles */
+}

package/template-component/name.spec.ts

@@ -0,0 +1,12 @@
+// @vitest-environment happy-dom
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import {%Pascal%} from './{%kebab%}.vue'
+
+describe('{%kebab%}', () => {
+  it('renders', () => {
+    const wrapper = mount({%Pascal%})
+    expect(wrapper.find('[data-0="{%kebab%}"]').exists()).toBe(true)
+  })
+})

package/template-component/name.types.ts

@@ -0,0 +1,7 @@
+export interface {%Pascal%}Props {
+  // add props here
+}
+
+export interface {%Pascal%}Slots {
+  default: () => void
+}

package/template-component/name.vue

@@ -0,0 +1,17 @@
+<template>
+  <div
+    data-0="{%kebab%}"
+    :class="$styles.{%camel%}">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useCssModule } from 'vue'
+
+  import type { {%Pascal%}Props } from './{%kebab%}.types'
+  import './{%kebab%}.module.css'
+
+  const props = withDefaults(defineProps<{%Pascal%}Props>(), {})
+  const $styles = useCssModule()
+</script>

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.