@aerogel/cli 0.0.0-next.13b88f634a31caf3669d61e53e7d3fa95e20488c → 0.0.0-next.24ed4c26fdb36195386fee4a81543fb84f51c979

package/src/plugins/Histoire.ts

@@ -1,113 +0,0 @@
-import File from '@/lib/File';
-import Log from '@/lib/Log';
-import Plugin from '@/plugins/Plugin';
-import Shell from '@/lib/Shell';
-import Template from '@/lib/Template';
-import { isLinkedLocalApp } from '@/lib/utils/app';
-import { packagePath, templatePath } from '@/lib/utils/paths';
-import type { Editor } from '@/lib/Editor';
-import { formatCodeBlock } from '@noeldemartin/utils';
-
-export class Histoire extends Plugin {
-
-    private installedPatchPackage: boolean = false;
-    private installedPostCSSPseudoClasses: boolean = false;
-
-    constructor() {
-        super('histoire');
-    }
-
-    public async beforeInstall(): Promise<void> {
-        this.installedPatchPackage = false;
-        this.installedPostCSSPseudoClasses = false;
-    }
-
-    protected async afterInstall(): Promise<void> {
-        if (!this.installedPatchPackage) {
-            return;
-        }
-
-        await Log.animate('Patching dependencies', async () => {
-            await Shell.run('npx patch-package');
-        });
-    }
-
-    protected async updateFiles(editor: Editor): Promise<void> {
-        await this.updateTailwindConfig(editor, {
-            content: isLinkedLocalApp()
-                ? `'${packagePath('histoire')}/dist/**/*.js'`
-                : '\'./node_modules/@aerogel/histoire/dist/**/*.js\'',
-        });
-
-        await this.updateNpmScripts(editor);
-        await this.createConfigFiles();
-        await super.updateFiles(editor);
-    }
-
-    protected async installNpmDependencies(): Promise<void> {
-        // We need this specific version because we're patching it using patch-package
-        await Shell.run('npm install histoire@0.17.6 --save-dev');
-
-        if (!File.contains('package.json', '"patch-package"')) {
-            await Shell.run('npm install patch-package --save-dev');
-
-            this.installedPatchPackage = true;
-        }
-
-        if (!File.contains('package.json', '"postcss-pseudo-classes"')) {
-            await Shell.run('npm install postcss-pseudo-classes --save-dev');
-
-            this.installedPostCSSPseudoClasses = true;
-        }
-
-        await super.installNpmDependencies();
-    }
-
-    protected getLocalPackageName(): string {
-        return this.name;
-    }
-
-    protected async updateNpmScripts(editor: Editor): Promise<void> {
-        Log.info('Updating npm scripts...');
-
-        const packageJson = File.read('package.json');
-
-        if (!packageJson) {
-            return Log.fail('Could not find package.json file');
-        }
-
-        File.write(
-            'package.json',
-            packageJson.replace(
-                '"lint": "noeldemartin-lint src cypress",',
-                this.installedPatchPackage
-                    ? formatCodeBlock(`
-                        "histoire": "histoire dev",
-                        "lint": "noeldemartin-lint cypress src",
-                        "postinstall": "patch-package",
-                    `)
-                    : formatCodeBlock(`
-                        "histoire": "histoire dev",
-                        "lint": "noeldemartin-lint cypress src",
-                    `),
-            ),
-        );
-
-        editor.addModifiedFile('package.json');
-    }
-
-    protected async createConfigFiles(): Promise<void> {
-        Log.info('Creating config files...');
-
-        Template.instantiate(templatePath('histoire'));
-
-        if (this.installedPostCSSPseudoClasses) {
-            Template.instantiate(templatePath('postcss-pseudo-classes'));
-        }
-    }
-
-    protected isForDevelopment(): boolean {
-        return true;
-    }
-
-}

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

@@ -1,29 +0,0 @@
-name: CI
-
-on: [push, pull_request]
-
-jobs:
-    ci:
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v4
-            - uses: actions/setup-node@v4
-              with:
-                  node-version-file: '.nvmrc'
-            - run: npm ci
-            - run: npm run lint
-            - run: npm run build
-            - run: npm run test:ci
-            - run: npm run cy:test-snapshots:ci
-            - name: Upload Cypress screenshots
-              uses: actions/upload-artifact@v4
-              if: ${{ failure() }}
-              with:
-                  name: cypress_screenshots
-                  path: cypress/screenshots
-            - name: Upload Cypress snapshots
-              uses: actions/upload-artifact@v4
-              if: ${{ failure() }}
-              with:
-                  name: cypress_snapshots
-                  path: cypress/snapshots

package/templates/app/.gitignore.template

@@ -1,2 +0,0 @@
-/dist
-/node_modules

package/templates/app/.nvmrc

@@ -1 +0,0 @@
-lts/hydrogen

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

@@ -1,16 +0,0 @@
-{
-    "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

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

package/templates/app/README.md

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

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

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

package/templates/app/cypress/e2e/app.cy.ts

@@ -1,9 +0,0 @@
-describe('App', () => {
-
-    beforeEach(() => cy.visit('/'));
-
-    it('Shows get started link', () => {
-        cy.see('Get started');
-    });
-
-});

package/templates/app/cypress/support/e2e.ts

@@ -1 +0,0 @@
-import '@aerogel/cypress/support';

package/templates/app/cypress/tsconfig.json

@@ -1,14 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "es5",
-        "lib": ["es5", "dom"],
-        "types": ["cypress", "node"],
-        "strict": true,
-        "baseUrl": ".",
-        "paths": {
-            "@/*": ["../src/*"],
-            "@cy/*": ["./*"]
-        }
-    },
-    "include": ["**/*.ts", "../src/**/*.ts"]
-}

package/templates/app/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="h-full w-full">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>{{ app.name }}</title>
-        {{ socialMeta() }}
-    </head>
-    <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

@@ -1,67 +0,0 @@
-{
-    "name": "<% app.slug %>",
-    "version": "0.0.0",
-    "private": true,
-    "scripts": {
-        "build": "vite build",
-        "cy:dev": "concurrently --kill-others \"npm run test:serve-app\" \"npm run cy:open\"",
-        "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 cypress",
-        "test": "vitest --run",
-        "test:ci": "vitest --run --reporter verbose",
-        "test:serve-app": "vite --port 5001 --mode testing"
-    },
-    "dependencies": {
-        "@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": "<% &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",
-        "typescript": "~5.4",
-        "unplugin-icons": "^0.16.3",
-        "unplugin-vue-components": "^0.24.1",
-        "vite": "^4.3.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/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-    },
-};

package/templates/app/src/App.vue

@@ -1,12 +0,0 @@
-<template>
-    <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>
-        </main>
-    </AGAppLayout>
-</template>

package/templates/app/src/assets/css/styles.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

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

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

package/templates/app/src/lang/en.yaml

@@ -1,3 +0,0 @@
-home:
-  title: Aerogel
-  getStarted: Get started

package/templates/app/src/main.test.ts

@@ -1,9 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-describe('App', () => {
-
-    it('works', () => {
-        expect(true).toBe(true);
-    });
-
-});

package/templates/app/src/main.ts

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

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

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

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

@@ -1,7 +0,0 @@
-declare module '*.vue' {
-    import type { ComponentOptions } from 'vue';
-
-    const component: ComponentOptions;
-
-    export default component;
-}

package/templates/app/src/types/ts-reset.d.ts

@@ -1 +0,0 @@
-/// <reference types="@total-typescript/ts-reset" />

package/templates/app/tailwind.config.js

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

package/templates/app/tsconfig.json

@@ -1,19 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "esnext",
-        "module": "esnext",
-        "moduleResolution": "node",
-        "strict": true,
-        "jsx": "preserve",
-        "noUncheckedIndexedAccess": true,
-        "skipLibCheck": true,
-        "resolveJsonModule": true,
-        "esModuleInterop": true,
-        "lib": ["esnext", "dom"],
-        "baseUrl": ".",
-        "paths": {
-            "@/*": ["./src/*"]
-        }
-    },
-    "include": ["src/**/*.ts", "src/**/*.vue"]
-}

package/templates/app/vite.config.ts

@@ -1,30 +0,0 @@
-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 defineConfig({
-    build: { sourcemap: true },
-    publicDir: resolve(__dirname, './src/assets/public/'),
-    plugins: [
-        Aerogel({ name: '<% app.name %>' }),
-        Components({
-            dts: false,
-            resolvers: [AerogelResolver(), IconsResolver()],
-        }),
-        I18n({ include: resolve(__dirname, './src/lang/**/*.yaml') }),
-        Icons({
-            iconCustomizer(_, __, props) {
-                props['aria-hidden'] = 'true';
-            },
-        }),
-    ],
-    resolve: {
-        alias: {
-            '@': resolve(__dirname, './src'),
-        },
-    },
-});

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

@@ -1,3 +0,0 @@
-<template>
-    <div><% component.name %></div>
-</template>

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

@@ -1,42 +0,0 @@
-<template>
-    <AGHeadlessButton :class="variantClasses" :disabled="disabled">
-        <slot />
-    </AGHeadlessButton>
-</template>
-
-<script setup lang="ts">
-import { Colors, booleanProp, enumProp, removeInteractiveClasses } from '@aerogel/core';
-import { computed } from 'vue';
-
-const props = defineProps({
-    color: enumProp(Colors, Colors.Primary),
-    disabled: booleanProp(),
-});
-
-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 '';
-    }
-});
-
-const variantClasses = computed(() => {
-    if (props.disabled) {
-        // Add additional classes for disabled state here.
-        return removeInteractiveClasses(colorClasses.value);
-    }
-
-    return colorClasses.value;
-});
-</script>

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

@@ -1,77 +0,0 @@
-<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="Disabled">
-            <<% component.name %> disabled>
-                You can't 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(2, 300px) !important;
-}
-
-.story-<% component.slug %> .variant-playground,
-.story-<% component.slug %> .variant-colors{
-    grid-column: 1 / -1;
-}
-</style>

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

@@ -1,34 +0,0 @@
-<template>
-    <AGHeadlessInput
-        ref="$input"
-        :name="name"
-        :class="className"
-        :label="label"
-    >
-        <AGHeadlessInputInput
-            v-bind="attrs"
-            type="checkbox"
-        />
-        <div v-if="$slots.default">
-            <AGHeadlessInputLabel>
-                <slot />
-            </AGHeadlessInputLabel>
-            <AGHeadlessInputError />
-        </div>
-    </AGHeadlessInput>
-</template>
-
-<script setup lang="ts">
-import { AGHeadlessInputLabel, componentRef, stringProp, useInputAttrs } from '@aerogel/core';
-import type { IAGHeadlessInput } from '@aerogel/core';
-
-defineOptions({ inheritAttrs: false });
-defineProps({
-    name: stringProp(),
-    label: stringProp(),
-    inputClass: stringProp(''),
-});
-
-const $input = componentRef<IAGHeadlessInput>();
-const [attrs, className] = useInputAttrs();
-</script>