@aerogel/cli 0.0.0-next.926bde19326fe7b6b24b277666936862b64d8295 → 0.0.0-next.a5b6ecb68fdca29d00c8b8906d00aa5bf64a9d7c

package/src/plugins/Soukai.ts

@@ -0,0 +1,19 @@
+import Plugin from '@/plugins/Plugin';
+import Shell from '@/lib/Shell';
+
+export class Soukai extends Plugin {
+
+    constructor() {
+        super('soukai');
+    }
+
+    protected async installNpmDependencies(): Promise<void> {
+        await Shell.run('npm install soukai@next --save-exact');
+        await super.installNpmDependencies();
+    }
+
+    protected getBootstrapConfig(): string {
+        return 'soukai({ models: import.meta.glob(\'@/models/*\', { eager: true }) })';
+    }
+
+}

package/src/testing/setup.ts

@@ -24,16 +24,46 @@ beforeEach(() => {
     Shell.mock();
 });
 
+vi.mock('@/lib/utils/app', async () => {
+    const original = (await vi.importActual('@/lib/utils/app')) as object;
+
+    return {
+        ...original,
+        isLocalApp: () => false,
+        isLinkedLocalApp: () => false,
+    };
+});
+
+vi.mock('@/lib/utils/edit', async () => {
+    const original = (await vi.importActual('@/lib/utils/edit')) as object;
+
+    return {
+        ...original,
+        editFiles: () => false,
+    };
+});
+
 // TODO find out why these need to be mocked
+vi.mock('@/lib/utils/paths', async () => {
+    const original = (await vi.importActual('@/lib/utils/paths')) as object;
+
+    function basePath(path: string = '') {
+        return resolve(__dirname, '../../', path);
+    }
+
+    function packagePath(packageName: string) {
+        return basePath(`../${packageName}`);
+    }
 
-vi.mock('@/lib/utils', async () => {
-    const utils = (await vi.importActual('@/lib/utils')) as object;
+    function templatePath(name: string = '') {
+        return resolve(__dirname, `../../templates/${name}`);
+    }
 
     return {
-        ...utils,
-        basePath(path: string) {
-            return resolve(__dirname, '../../', path);
-        },
+        ...original,
+        basePath,
+        packagePath,
+        templatePath,
     };
 });
 

package/src/testing/stubs/ProgramStub.ts

@@ -0,0 +1,35 @@
+import type { Command as Program } from 'commander';
+import type { Constructor } from '@noeldemartin/utils';
+
+import type Command from '@/commands/Command';
+
+export default class ProgramStub<T extends Constructor<Command> = Constructor<Command>> {
+
+    private runner?: (...args: ConstructorParameters<T>) => Promise<void>;
+
+    public async run(...args: ConstructorParameters<T>): Promise<void> {
+        await this.runner?.(...args);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public command(): any {
+        return { description: () => this };
+    }
+
+    public argument(): this {
+        return this;
+    }
+
+    public option(): this {
+        return this;
+    }
+
+    public action(runner: Function): this {
+        this.runner = runner as (...args: ConstructorParameters<T>) => Promise<void>;
+
+        return this;
+    }
+
+}
+
+export default interface ProgramStub extends Program {}

package/src/testing/utils.ts

@@ -0,0 +1,14 @@
+import type { Constructor } from '@noeldemartin/utils';
+
+import ProgramStub from '@/testing/stubs/ProgramStub';
+import type Command from '@/commands/Command';
+
+export type StubCommandRunner<T extends Constructor<Command>> = (...args: ConstructorParameters<T>) => Promise<void>;
+
+export function stubCommandRunner<T extends Constructor<Command>>(commandClass: T): StubCommandRunner<T> {
+    const program = new ProgramStub();
+
+    (commandClass as unknown as typeof Command).define(program);
+
+    return (...args) => program.run(...args);
+}

package/templates/app/.github/workflows/ci.yml

@@ -12,6 +12,18 @@ jobs:
                   node-version-file: '.nvmrc'
             - run: npm ci
             - run: npm run lint
-            - run: npm run test:ci
-            - run: npm run cy:test
             - run: npm run build
+            - run: npm run test:ci
+            - run: npm run cy:test-snapshots:ci
+            - name: Upload Cypress screenshots
+              uses: actions/upload-artifact@v3
+              if: ${{ failure() }}
+              with:
+                  name: cypress_screenshots
+                  path: cypress/screenshots
+            - name: Upload Cypress snapshots
+              uses: actions/upload-artifact@v3
+              if: ${{ failure() }}
+              with:
+                  name: cypress_snapshots
+                  path: cypress/snapshots

package/templates/app/.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Debug Current Test File",
+            "autoAttachChildProcesses": true,
+            "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+            "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
+            "args": ["run", "${fileBasenameNoExtension}"],
+            "smartStep": true,
+            "console": "integratedTerminal"
+        }
+    ]
+}

package/templates/app/.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "emeraldwalk.runonsave": {
+        "commands": [
+            {
+                "match": ".*",
+                "cmd": "npx prettier-eslint ${file} --write"
+            }
+        ]
+    }
+}

package/templates/app/README.md

@@ -0,0 +1,3 @@
+# <% app.name %>
+
+App created with [AerogelJS](https://aerogel.js.org)

package/templates/app/cypress/cypress.config.ts

@@ -0,0 +1,16 @@
+import install from '@aerogel/cypress/dist/plugin';
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+    e2e: {
+        baseUrl: 'http://localhost:5001',
+        video: false,
+        retries: {
+            runMode: 3,
+            openMode: 0,
+        },
+        setupNodeEvents(on) {
+            install(on);
+        },
+    },
+});

package/templates/app/index.html

@@ -3,10 +3,11 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title><% app.name %></title>
+        <title>{{ app.name }}</title>
+        {{ socialMeta() }}
     </head>
-    <body class="h-full w-full">
-        <div id="app" class="h-full"></div>
+    <body class="h-full w-full text-base font-normal leading-tight text-gray-900 antialiased">
+        <div id="app" class="loading h-full"></div>
         <script type="module" src="./src/main.ts"></script>
     </body>
 </html>

package/templates/app/package.json

@@ -5,9 +5,11 @@
     "scripts": {
         "build": "vite build",
         "cy:dev": "concurrently --kill-others \"npm run test:serve-app\" \"npm run cy:open\"",
-        "cy:open": "cypress open --e2e --browser chromium",
-        "cy:run": "cypress run",
+        "cy:open": "cypress open --config-file ./cypress/cypress.config.ts --e2e --browser chromium",
+        "cy:run": "cypress run --config-file ./cypress/cypress.config.ts",
         "cy:test": "start-server-and-test test:serve-app http-get://localhost:5001 cy:run",
+        "cy:test-snapshots": "docker run -it -u `id -u ${whoami}` -e CYPRESS_SNAPSHOTS=true -v ./:/app -w /app cypress/base:18.16.0 sh -c \"npx cypress install && npm run cy:test\"",
+        "cy:test-snapshots:ci": "docker run -e CYPRESS_SNAPSHOTS=true -v ./:/app -w /app cypress/base:18.16.0 sh -c \"npx cypress install && npm run cy:test\"",
         "dev": "vite",
         "lint": "noeldemartin-lint src",
         "test": "vitest --run",
@@ -15,28 +17,50 @@
         "test:serve-app": "vite --port 5001"
     },
     "dependencies": {
-        "@aerogel/core": "next",
-        "@aerogel/plugin-i18n": "next",
+        "@aerogel/core": "<% &dependencies.aerogelCore %>",
+        "@aerogel/plugin-i18n": "<% &dependencies.aerogelPluginI18n %>",
+        "@aerogel/plugin-soukai": "<% &dependencies.aerogelPluginSoukai %>",
         "@intlify/unplugin-vue-i18n": "^0.12.2",
+        "@noeldemartin/utils": "next",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/typography": "^0.5.9",
+        "soukai": "next",
         "tailwindcss": "^3.3.2",
         "vue": "^3.3.0",
         "vue-i18n": "9.3.0-beta.19"
     },
     "devDependencies": {
-        "@aerogel/cli": "next",
-        "@aerogel/cypress": "next",
-        "@aerogel/vite": "next",
-        "@noeldemartin/utils": "0.4.0-next.ac00beaecf32bb02ed8e335225d7948d946d73bd",
+        "@aerogel/cli": "<% &dependencies.aerogelCli %>",
+        "@aerogel/cypress": "<% &dependencies.aerogelCypress %>",
+        "@aerogel/vite": "<% &dependencies.aerogelVite %>",
+        "@iconify/json": "^2.2.134",
+        "@noeldemartin/eslint-config-vue": "next",
+        "@noeldemartin/scripts": "next",
         "@total-typescript/ts-reset": "^0.4.2",
         "@types/node": "^20.3.1",
         "autoprefixer": "^10.4.14",
         "concurrently": "^8.2.0",
         "cypress": "^12.17.0",
+        "eslint": "^8.40.0",
+        "prettier": "^2.8.8",
+        "prettier-eslint-cli": "^7.1.0",
+        "prettier-plugin-tailwindcss": "^0.2.8",
         "start-server-and-test": "^2.0.0",
+        "unplugin-icons": "^0.16.3",
         "unplugin-vue-components": "^0.24.1",
         "vite": "^4.3.0",
-        "vitest": "^0.33.0"
+        "vitest": "^0.33.0",
+        "vue-tsc": "^1.8.15"
+    },
+    "eslintConfig": {
+        "extends": [
+            "@noeldemartin/eslint-config-vue"
+        ]
+    },
+    "prettier": {
+        "plugins": [
+            "prettier-plugin-tailwindcss"
+        ],
+        "printWidth": 120
     }
 }

package/templates/app/src/App.vue

@@ -1,7 +1,9 @@
 <template>
-    <AGAppLayout>
-        <main class="flex flex-grow flex-col items-center justify-center bg-blue-50">
-            <h1 class="text-4xl font-semibold">{{ $t('home.title') }}</h1>
+    <AGAppLayout class="bg-blue-50">
+        <main class="flex flex-grow flex-col items-center justify-center">
+            <h1 class="text-4xl font-semibold">
+                {{ $t('home.title') }}
+            </h1>
             <a href="https://aerogel.js.org" target="_blank" class="mt-2 underline opacity-75 hover:opacity-100">
                 {{ $t('home.getStarted') }}
             </a>

package/templates/app/src/assets/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

package/templates/app/src/main.ts

@@ -1,9 +1,13 @@
 import i18n from '@aerogel/plugin-i18n';
+import soukai from '@aerogel/plugin-soukai';
 import { bootstrapApplication } from '@aerogel/core';
 
-import './assets/styles.css';
+import './assets/css/styles.css';
 import App from './App.vue';
 
 bootstrapApplication(App, {
-    plugins: [i18n({ messages: import.meta.glob('@/lang/*.yaml') })],
+    plugins: [
+        i18n({ messages: import.meta.glob('@/lang/*.yaml') }),
+        soukai({ models: import.meta.glob('@/models/*', { eager: true }) }),
+    ],
 });

package/templates/app/src/types/globals.d.ts

@@ -1,3 +1,2 @@
 /// <reference types="vite/client" />
-/// <reference types="vue-router" />
 /// <reference types="vue-i18n" />

package/templates/app/tailwind.config.js

@@ -1,5 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ['./index.html', './src/**/*.{vue,ts}', './node_modules/@aerogel/core/dist/**/*.js'],
+    content: ['./index.html', './src/**/*.{vue,ts}', '<% &contentPath %>'],
     plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
 };

package/templates/app/tsconfig.json

@@ -6,6 +6,7 @@
         "strict": true,
         "jsx": "preserve",
         "noUncheckedIndexedAccess": true,
+        "skipLibCheck": true,
         "resolveJsonModule": true,
         "esModuleInterop": true,
         "lib": ["esnext", "dom"],

package/templates/app/vite.config.ts

@@ -1,16 +1,24 @@
 import Aerogel, { AerogelResolver } from '@aerogel/vite';
 import Components from 'unplugin-vue-components/vite';
 import I18n from '@intlify/unplugin-vue-i18n/vite';
+import Icons from 'unplugin-icons/vite';
+import IconsResolver from 'unplugin-icons/resolver';
+import { defineConfig } from 'vitest/config';
 import { resolve } from 'path';
 
-export default {
+export default defineConfig({
+    publicDir: resolve(__dirname, './src/assets/public/'),
     plugins: [
-        I18n({ include: resolve(__dirname, './src/lang/**/*.yaml') }),
-        Aerogel(),
+        Aerogel({ name: '<% app.name %>' }),
         Components({
-            dirs: ['src/pages'],
             dts: false,
-            resolvers: [AerogelResolver()],
+            resolvers: [AerogelResolver(), IconsResolver()],
+        }),
+        I18n({ include: resolve(__dirname, './src/lang/**/*.yaml') }),
+        Icons({
+            iconCustomizer(_, __, props) {
+                props['aria-hidden'] = 'true';
+            },
         }),
     ],
     resolve: {
@@ -18,4 +26,4 @@ export default {
             '@': resolve(__dirname, './src'),
         },
     },
-};
+});

package/templates/component-button/[component.name].vue

@@ -0,0 +1,32 @@
+<template>
+    <AGHeadlessButton :class="colorClasses">
+        <slot />
+    </AGHeadlessButton>
+</template>
+
+<script setup lang="ts">
+import { Colors, enumProp } from '@aerogel/core';
+import { computed } from 'vue';
+
+const props = defineProps({
+    color: enumProp(Colors, Colors.Primary),
+});
+
+const colorClasses = computed(() => {
+    switch (props.color) {
+        case Colors.Secondary:
+            // Add your custom color classes here.
+            return '';
+        case Colors.Clear:
+            // Add your custom color classes here.
+            return '';
+        case Colors.Danger:
+            // Add your custom color classes here.
+            return '';
+        case Colors.Primary:
+        default:
+            // Add your custom color classes here.
+            return '';
+    }
+});
+</script>

package/templates/component-button-story/[component.name].story.vue

@@ -0,0 +1,71 @@
+<template>
+    <Story :layout="{ type: 'grid' }">
+        <Variant title="Playground">
+            <<% component.name %> :color="color">
+                {{ content }}
+            </<% component.name %>>
+
+            <template #controls>
+                <HstText v-model="content" title="Content" />
+                <HstSelect v-model="color" title="Color" :options="colorOptions" />
+            </template>
+        </Variant>
+
+        <Variant title="Default">
+            <<% component.name %>>
+                Click me!
+            </<% component.name %>>
+        </Variant>
+
+        <Variant title="Hover">
+            <<% component.name %> class=":hover">
+                Click me!
+            </<% component.name %>>
+        </Variant>
+
+        <Variant title="Focus">
+            <<% component.name %> class=":focus :focus-visible">
+                Click me!
+            </<% component.name %>>
+        </Variant>
+
+        <Variant title="Colors" :layout="{ width: '300px' }">
+            <div class="flex items-center gap-2">
+                <<% component.name %> color="primary">
+                    Primary
+                </<% component.name %>>
+                <<% component.name %> color="secondary">
+                    Secondary
+                </<% component.name %>>
+                <<% component.name %> color="danger">
+                    Danger
+                </<% component.name %>>
+                <<% component.name %> color="clear">
+                    Clear
+                </<% component.name %>>
+            </div>
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { Colors } from '@aerogel/core';
+import { invert } from '@noeldemartin/utils';
+import { ref } from 'vue';
+import type { Color } from '@aerogel/core';
+
+const content = ref('Click me!');
+const color = ref<Color>(Colors.Primary);
+const colorOptions = invert(Colors);
+</script>
+
+<style>
+.story-<% component.slug %> {
+    grid-template-columns: repeat(3, 200px) !important;
+}
+
+.story-<% component.slug %> .variant-playground,
+.story-<% component.slug %> .variant-colors{
+    grid-column: 1 / -1;
+}
+</style>

package/templates/component-input/[component.name].vue

@@ -0,0 +1,16 @@
+<template>
+    <AGHeadlessInput v-bind="props">
+        <AGHeadlessInputLabel />
+        <AGHeadlessInputInput v-bind="attrs" />
+        <AGHeadlessInputError />
+    </AGHeadlessInput>
+</template>
+
+<script setup lang="ts">
+import { useInputAttrs, useInputProps } from '@aerogel/core';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps(useInputProps());
+const [attrs] = useInputAttrs();
+</script>

package/templates/component-input-story/[component.name].story.vue

@@ -0,0 +1,63 @@
+<template>
+    <Story :layout="{ type: 'grid' }">
+        <Variant title="Playground">
+            <AGForm :form="form">
+                <<% component.name %> name="food" :label="label" :placeholder="placeholder" />
+            </AGForm>
+
+            <template #controls>
+                <HstText v-model="label" title="Label" />
+                <HstText v-model="placeholder" title="Placeholder" />
+                <HstCheckbox v-model="hasErrors" title="Errors" />
+            </template>
+        </Variant>
+
+        <Variant title="Default">
+            <<% component.name %> label="What's the best food?" placeholder="Ramen" />
+        </Variant>
+
+        <Variant title="Hover">
+            <<% component.name %> label="What's the best food?" placeholder="Ramen" input-class=":hover" />
+        </Variant>
+
+        <Variant title="Focus">
+            <<% component.name %> label="What's the best food?" placeholder="Ramen" input-class=":focus :focus-visible" />
+        </Variant>
+
+        <Variant title="Error">
+            <AGForm :form="errorForm">
+                <<% component.name %>
+                    name="food"
+                    label="What's the best food?"
+                    placeholder="Ramen"
+                    class=":focus :focus-visible"
+                />
+            </AGForm>
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { requiredStringInput, useForm } from '@aerogel/core';
+import { ref, watchEffect } from 'vue';
+
+const form = useForm({ food: requiredStringInput() });
+const errorForm = useForm({ food: requiredStringInput() });
+const label = ref('What\'s the best food?');
+const placeholder = ref('Ramen');
+const hasErrors = ref(false);
+
+errorForm.submit();
+
+watchEffect(() => (hasErrors.value ? form.submit() : form.reset()));
+</script>
+
+<style>
+.story-<% component.slug %> {
+    grid-template-columns: repeat(2, 300px) !important;
+}
+
+.story-<% component.slug %> .variant-playground {
+    grid-column: 1 / -1;
+}
+</style>

package/templates/histoire/histoire.config.ts

@@ -0,0 +1,7 @@
+import HstAerogel from '@aerogel/histoire/dist/plugin';
+import { defineConfig } from 'histoire';
+
+export default defineConfig({
+    setupFile: '/src/main.histoire.ts',
+    plugins: [HstAerogel()],
+});

package/templates/histoire/patches/histoire+0.17.6.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/histoire/dist/node/collect/index.js b/node_modules/histoire/dist/node/collect/index.js
+index 8ffd507..37be43e 100644
+--- a/node_modules/histoire/dist/node/collect/index.js
++++ b/node_modules/histoire/dist/node/collect/index.js
+@@ -22,7 +22,7 @@ export function useCollectStories(options, ctx) {
+                 /vite\w*\/dist\/client\/(client|env).mjs/,
+                 ...ctx.config.viteNodeInlineDeps ?? [],
+             ],
+-            fallbackCJS: true,
++            fallbackCJS: false,
+         },
+         transformMode: ctx.config.viteNodeTransformMode,
+     });

package/templates/histoire/src/main.histoire.ts

@@ -0,0 +1,8 @@
+import '@aerogel/histoire/dist/styles.css';
+import { defineSetupAerogel } from '@aerogel/histoire';
+
+import './assets/css/styles.css';
+
+export const setupVue3 = defineSetupAerogel({
+    messages: import.meta.glob('@/lang/*.yaml'),
+});

package/templates/postcss-pseudo-classes/postcss.config.js

@@ -0,0 +1,15 @@
+const plugins = {
+    tailwindcss: {},
+    autoprefixer: {},
+};
+
+if (process.env.NODE_ENV === 'development') {
+    plugins['postcss-pseudo-classes'] = {
+        blacklist: [],
+        restrictTo: ['hover', 'focus-visible', 'focus'],
+        allCombinations: true,
+        preserveBeforeAfter: false,
+    };
+}
+
+module.exports = { plugins };

package/templates/service/[service.name].ts

@@ -0,0 +1,8 @@
+import { Service } from '@aerogel/core';
+import { facade } from '@noeldemartin/utils';
+
+export class <% service.name %>Service extends Service {
+
+}
+
+export default facade(new <% service.name %>Service());

package/.eslintrc.js

@@ -1,7 +0,0 @@
-module.exports = {
-    env: {
-        browser: true,
-        es2021: true,
-    },
-    extends: ['@noeldemartin/eslint-config-typescript'],
-};

package/noeldemartin.config.js

@@ -1,4 +0,0 @@
-/** @type {import('@noeldemartin/scripts').Config} */
-module.exports = {
-    external: ['fs', '@noeldemartin/utils', 'chalk', 'child_process', 'commander', 'mustache', 'path', 'readline'],
-};