@aerogel/cli 0.0.0-next.5953e1862a7c89a8fc80da087467d67d4f4e8c73 → 0.0.0-next.702e17f12493b62feba1d0af54d7c3b1d07f934c

package/src/cli.ts

@@ -1,8 +1,12 @@
 import { Command } from 'commander';
+import { facade, fail } from '@noeldemartin/utils';
+import { resolve } from 'path';
+import { existsSync, readFileSync } from 'fs';
+
 import { CreateCommand } from '@/commands/create';
-import { facade } from '@noeldemartin/utils';
 import { GenerateComponentCommand } from '@/commands/generate-component';
 import { GenerateModelCommand } from '@/commands/generate-model';
+import { GenerateOverridesCommand } from '@/commands/generate-overrides';
 import { GenerateServiceCommand } from '@/commands/generate-service';
 import { InstallCommand } from '@/commands/install';
 
@@ -11,17 +15,31 @@ export class CLIService {
     public run(argv?: string[]): void {
         const program = new Command();
 
-        program.name('ag').description('AerogelJS CLI').version('0.0.0');
+        program.name('gel').description('AerogelJS CLI').version(this.getVersion());
 
         CreateCommand.define(program);
         GenerateComponentCommand.define(program);
         GenerateModelCommand.define(program);
+        GenerateOverridesCommand.define(program);
         GenerateServiceCommand.define(program);
         InstallCommand.define(program);
 
         program.parse(argv);
     }
 
+    public getVersion(): string {
+        const errorMessage = 'Could not find CLI\'s version, please report this bug.';
+        const packageJsonPath = resolve(__dirname, '../package.json');
+
+        if (!existsSync(packageJsonPath)) {
+            throw new Error(errorMessage);
+        }
+
+        const packageJson = JSON.parse(readFileSync(packageJsonPath).toString()) as { version?: string };
+
+        return packageJson.version ?? fail(errorMessage);
+    }
+
 }
 
 export default facade(new CLIService());

package/src/commands/Command.ts

@@ -8,10 +8,10 @@ export type CommandOptions = Record<string, string | { description: string; type
 
 export default class Command {
 
-    public static command: string = '';
-    public static description: string = '';
-    public static parameters: [string, string][] = [];
-    public static options: CommandOptions = {};
+    protected static command: string = '';
+    protected static description: string = '';
+    protected static parameters: [string, string][] = [];
+    protected static options: CommandOptions = {};
 
     public static define(program: CommanderCommand): void {
         program = program.command(this.command).description(this.description);
@@ -33,11 +33,16 @@ export default class Command {
     public static async run<T extends CommandConstructor>(this: T, ...args: ConstructorParameters<T>): Promise<void> {
         const instance = new this(...args);
 
+        await instance.validate();
         await instance.run();
     }
 
-    public async run(): Promise<void> {
-        //
+    protected async validate(): Promise<void> {
+        // Placeholder for overrides, don't place any functionality here.
+    }
+
+    protected async run(): Promise<void> {
+        // Placeholder for overrides, don't place any functionality here.
     }
 
     protected assertAerogelOrDirectory(path?: string): void {

package/src/commands/create.ts

@@ -15,10 +15,10 @@ export interface Options {
 
 export class CreateCommand extends Command {
 
-    public static command: string = 'create';
-    public static description: string = 'Create AerogelJS app';
-    public static parameters: [string, string][] = [['path', 'Application path']];
-    public static options: CommandOptions = {
+    protected static command: string = 'create';
+    protected static description: string = 'Create AerogelJS app';
+    protected static parameters: [string, string][] = [['path', 'Application path']];
+    protected static options: CommandOptions = {
         name: 'Application name',
         local: {
             type: 'boolean',
@@ -40,7 +40,7 @@ export class CreateCommand extends Command {
         this.options = options;
     }
 
-    public async run(): Promise<void> {
+    protected async run(): Promise<void> {
         const path = this.path;
         const name = this.options.name ?? stringToTitleCase(basename(path));
 

package/src/commands/generate-component.test.ts

@@ -67,4 +67,25 @@ describe('Generate Component command', () => {
         );
     });
 
+    it('generates button components with stories', async () => {
+        // Arrange
+        FileMock.stub(
+            'package.json',
+            `
+                "@aerogel/core": "*",
+                "histoire": "*"
+            `,
+        );
+
+        // Act
+        await GenerateComponentCommand.run('FooBar', { button: true, story: true });
+
+        // Assert
+        FileMock.expectCreated('src/components/FooBar.vue').toContain(
+            '<AGHeadlessButton :class="variantClasses" :disabled="disabled">',
+        );
+        FileMock.expectCreated('src/components/FooBar.story.vue').toContain('.story-foobar .variant-playground');
+        FileMock.expectCreated('src/components/FooBar.story.vue').toContain('<FooBar :color="color">');
+    });
+
 });

package/src/commands/generate-component.ts

@@ -12,27 +12,32 @@ import { templatePath } from '@/lib/utils/paths';
 import type { CommandOptions } from '@/commands/Command';
 
 export interface Options {
-    story?: boolean;
+    button?: boolean;
     input?: boolean;
+    story?: boolean;
 }
 
 export class GenerateComponentCommand extends Command {
 
-    public static command: string = 'generate:component';
-    public static description: string = 'Generate an AerogelJS Component';
-    public static parameters: [string, string][] = [
+    protected static command: string = 'generate:component';
+    protected static description: string = 'Generate an AerogelJS Component';
+    protected static parameters: [string, string][] = [
         ['path', 'Component path (relative to components folder; extension not necessary)'],
     ];
 
-    public static options: CommandOptions = {
-        story: {
-            description: 'Create component story using Histoire',
+    protected static options: CommandOptions = {
+        button: {
+            description: 'Create a custom button',
             type: 'boolean',
         },
         input: {
             description: 'Create a custom input',
             type: 'boolean',
         },
+        story: {
+            description: 'Create component story using Histoire',
+            type: 'boolean',
+        },
     };
 
     private path: string;
@@ -45,7 +50,13 @@ export class GenerateComponentCommand extends Command {
         this.options = options;
     }
 
-    public async run(): Promise<void> {
+    protected async validate(): Promise<void> {
+        if (this.options.button && this.options.input) {
+            Log.fail('Cannot use both \'button\' and \'input\' flags!');
+        }
+    }
+
+    protected async run(): Promise<void> {
         this.assertAerogelOrDirectory('src/components');
         this.assertHistoireInstalled();
 
@@ -71,7 +82,7 @@ export class GenerateComponentCommand extends Command {
         if (!File.contains('package.json', '"histoire"') && !File.contains('package.json', '"@aerogel/histoire"')) {
             Log.fail(`
                 Histoire is not installed yet! You can install it running:
-                npx ag install histoire
+                npx gel install histoire
             `);
         }
     }
@@ -82,7 +93,11 @@ export class GenerateComponentCommand extends Command {
                 Log.fail(`${this.path} component already exists!`);
             }
 
-            const templateName = this.options.input ? 'component-input' : 'component';
+            const templateName = this.options.input
+                ? 'component-input'
+                : this.options.button
+                    ? 'component-button'
+                    : 'component';
             const componentFiles = Template.instantiate(templatePath(templateName), `src/components/${directoryName}`, {
                 component: {
                     name: componentName,
@@ -100,7 +115,11 @@ export class GenerateComponentCommand extends Command {
         }
 
         await Log.animate('Creating story', async () => {
-            const templateName = this.options.input ? 'component-input-story' : 'component-story';
+            const templateName = this.options.input
+                ? 'component-input-story'
+                : this.options.button
+                    ? 'component-button-story'
+                    : 'component-story';
             const storyFiles = Template.instantiate(templatePath(templateName), `src/components/${directoryName}`, {
                 component: {
                     name: componentName,

package/src/commands/generate-model.ts

@@ -13,10 +13,10 @@ interface Options {
 
 export class GenerateModelCommand extends Command {
 
-    public static command: string = 'generate:model';
-    public static description: string = 'Generate an AerogelJS Model';
-    public static parameters: [string, string][] = [['name', 'Model name']];
-    public static options: CommandOptions = {
+    protected static command: string = 'generate:model';
+    protected static description: string = 'Generate an AerogelJS Model';
+    protected static parameters: [string, string][] = [['name', 'Model name']];
+    protected static options: CommandOptions = {
         fields: 'Create model with the given fields',
     };
 
@@ -30,7 +30,7 @@ export class GenerateModelCommand extends Command {
         this.options = options;
     }
 
-    public async run(): Promise<void> {
+    protected async run(): Promise<void> {
         this.assertAerogelOrDirectory('src/models');
 
         if (File.exists(`src/models/${this.name}.ts`)) {
@@ -90,7 +90,7 @@ export class GenerateModelCommand extends Command {
         if (!File.contains('package.json', '"soukai"') && !File.contains('package.json', '"@aerogel/plugin-soukai"')) {
             Log.fail(`
                 Soukai is not installed yet! You can install it running:
-                npx ag install soukai
+                npx gel install soukai
             `);
         }
     }

package/src/commands/generate-overrides.ts

@@ -0,0 +1,85 @@
+import { arrayFrom } from '@noeldemartin/utils';
+
+import Command from '@/commands/Command';
+import File from '@/lib/File';
+import Log from '@/lib/Log';
+import Template from '@/lib/Template';
+import { templatePath } from '@/lib/utils/paths';
+import type { CommandOptions } from '@/commands/Command';
+
+export interface Options {
+    story?: boolean;
+}
+
+export class GenerateOverridesCommand extends Command {
+
+    protected static command: string = 'generate:overrides';
+    protected static description: string = 'Generate AerogelJS component overrides';
+
+    protected static options: CommandOptions = {
+        story: {
+            description: 'Create overrides story using Histoire',
+            type: 'boolean',
+        },
+    };
+
+    private options: Options;
+
+    constructor(options: Options = {}) {
+        super();
+
+        this.options = options;
+    }
+
+    protected async run(): Promise<void> {
+        this.assertAerogelOrDirectory('src/components');
+        this.assertHistoireInstalled();
+
+        const files = new Set<string>();
+
+        await this.createComponents(files);
+        await this.createStory(files);
+
+        const filesList = arrayFrom(files)
+            .map((file) => `- ${file}`)
+            .join('\n');
+
+        Log.info(`Overrides created successfully! The following files were created:\n\n${filesList}`);
+        Log.info('\nRemember to declare your components in main.ts and main.histoire.ts!');
+    }
+
+    protected assertHistoireInstalled(): void {
+        if (!this.options.story) {
+            return;
+        }
+
+        if (!File.contains('package.json', '"histoire"') && !File.contains('package.json', '"@aerogel/histoire"')) {
+            Log.fail(`
+                Histoire is not installed yet! You can install it running:
+                npx gel install histoire
+            `);
+        }
+    }
+
+    protected async createComponents(files: Set<string>): Promise<void> {
+        await Log.animate('Creating components', async () => {
+            if (File.exists('src/components/ModalWrapper.vue')) {
+                Log.fail('ModalWrapper component already exists!');
+            }
+
+            Template.instantiate(templatePath('overrides'), 'src').forEach((file) => files.add(file));
+        });
+    }
+
+    protected async createStory(files: Set<string>): Promise<void> {
+        if (!this.options.story) {
+            return;
+        }
+
+        await Log.animate('Creating story', async () => {
+            Template.instantiate(templatePath('overrides-story'), 'src/components/overrides/').forEach((file) =>
+                files.add(file));
+        });
+    }
+
+}

package/src/commands/generate-service.ts

@@ -13,9 +13,9 @@ import type { Editor } from '@/lib/Editor';
 
 export class GenerateServiceCommand extends Command {
 
-    public static command: string = 'generate:service';
-    public static description: string = 'Generate an AerogelJS Service';
-    public static parameters: [string, string][] = [['name', 'Service name']];
+    protected static command: string = 'generate:service';
+    protected static description: string = 'Generate an AerogelJS Service';
+    protected static parameters: [string, string][] = [['name', 'Service name']];
 
     private name: string;
 
@@ -25,7 +25,7 @@ export class GenerateServiceCommand extends Command {
         this.name = name;
     }
 
-    public async run(): Promise<void> {
+    protected async run(): Promise<void> {
         this.assertAerogelOrDirectory('src/services');
 
         const files = new Set<string>();
@@ -122,7 +122,7 @@ export class GenerateServiceCommand extends Command {
     protected getBootstrapOptions(mainConfig: SourceFile): ObjectLiteralExpression | null {
         const bootstrapAppCall = findDescendant(mainConfig, {
             guard: Node.isCallExpression,
-            validate: (callExpression) => callExpression.getExpression().getText() === 'bootstrapApplication',
+            validate: (callExpression) => callExpression.getExpression().getText() === 'bootstrap',
             skip: SyntaxKind.ImportDeclaration,
         });
         const bootstrapOptions = bootstrapAppCall?.getArguments()[1];

package/src/commands/install.ts

@@ -12,9 +12,9 @@ const plugins = [new Soukai(), new Solid(), new Histoire()].reduce(
 
 export class InstallCommand extends Command {
 
-    public static command: string = 'install';
-    public static description: string = 'Install an AerogelJS plugin';
-    public static parameters: [string, string][] = [['plugin', 'Plugin to install']];
+    protected static command: string = 'install';
+    protected static description: string = 'Install an AerogelJS plugin';
+    protected static parameters: [string, string][] = [['plugin', 'Plugin to install']];
 
     private plugin: Plugin;
 
@@ -26,7 +26,7 @@ export class InstallCommand extends Command {
             Log.fail(`Plugin '${plugin}' doesn't exist. Available plugins: ${Object.keys(plugins).join(', ')}`);
     }
 
-    public async run(): Promise<void> {
+    protected async run(): Promise<void> {
         await this.plugin.install();
     }
 

package/src/plugins/Histoire.ts

@@ -10,6 +10,7 @@ import type { Editor } from '@/lib/Editor';
 export class Histoire extends Plugin {
 
     private installedPatchPackage: boolean = false;
+    private installedPostCSSPseudoClasses: boolean = false;
 
     constructor() {
         super('histoire');
@@ -17,6 +18,7 @@ export class Histoire extends Plugin {
 
     public async beforeInstall(): Promise<void> {
         this.installedPatchPackage = false;
+        this.installedPostCSSPseudoClasses = false;
     }
 
     protected async afterInstall(): Promise<void> {
@@ -51,6 +53,12 @@ export class Histoire extends Plugin {
             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();
     }
 
@@ -84,6 +92,10 @@ export class Histoire extends Plugin {
         Log.info('Creating config files...');
 
         Template.instantiate(templatePath('histoire'));
+
+        if (this.installedPostCSSPseudoClasses) {
+            Template.instantiate(templatePath('postcss-pseudo-classes'));
+        }
     }
 
     protected isForDevelopment(): boolean {

package/src/plugins/Plugin.ts

@@ -123,7 +123,7 @@ export default abstract class Plugin {
     protected getBootstrapPluginsDeclaration(mainConfig: SourceFile): ArrayLiteralExpression | null {
         const bootstrapAppCall = findDescendant(mainConfig, {
             guard: Node.isCallExpression,
-            validate: (callExpression) => callExpression.getExpression().getText() === 'bootstrapApplication',
+            validate: (callExpression) => callExpression.getExpression().getText() === 'bootstrap',
             skip: SyntaxKind.ImportDeclaration,
         });
         const bootstrapOptions = bootstrapAppCall?.getArguments()[1];

package/src/plugins/Solid.ts

@@ -26,6 +26,7 @@ export class Solid extends Plugin {
 
     protected async installNpmDependencies(): Promise<void> {
         await Shell.run('npm install soukai-solid@next --save-exact');
+        await Shell.run('npm install @noeldemartin/solid-utils@next --save-exact');
         await Shell.run('npm install @solid/community-server@7 --save');
         await super.installNpmDependencies();
     }
@@ -50,17 +51,16 @@ export class Solid extends Plugin {
                 .replace(
                     '"cy:test": "start-server-and-test test:serve-app http-get://localhost:5001 cy:run",',
                     '"cy:test": "start-server-and-test ' +
-                        'test:serve-app http-get://localhost:5001 test:serve-pod http-get://localhost:4000 cy:run",',
+                        'test:serve-app http-get://localhost:5001 test:serve-pod http-get://localhost:3000 cy:run",',
                 )
                 .replace(
                     '"dev": "vite",',
                     '"dev": "vite",\n' +
-                        '"dev:serve-pod": "community-solid-server -c @css:config/file.json -p 4000 -f ./solid-data",',
+                        '"dev:serve-pod": "community-solid-server -c @css:config/file.json -f ./solid-data",',
                 )
                 .replace(
                     '"test:serve-app": "vite --port 5001"',
-                    '"test:serve-app": "vite --port 5001",\n' +
-                        '"test:serve-pod": "community-solid-server -p 4000 -l warn"',
+                    '"test:serve-app": "vite --port 5001",\n"test:serve-pod": "community-solid-server -l warn"',
                 ),
         );
 

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

@@ -1,4 +1,4 @@
-import install from '@aerogel/cypress/dist/plugin';
+import { setupAerogelNodeEvents } from '@aerogel/cypress/config';
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
@@ -9,8 +9,6 @@ export default defineConfig({
             runMode: 3,
             openMode: 0,
         },
-        setupNodeEvents(on) {
-            install(on);
-        },
+        setupNodeEvents: setupAerogelNodeEvents,
     },
 });

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

@@ -1,3 +1 @@
-import install from '@aerogel/cypress';
-
-install();
+import '@aerogel/cypress/support';

package/templates/app/src/main.ts

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

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

@@ -0,0 +1,42 @@
+<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

@@ -0,0 +1,77 @@
+<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/overrides/components/index.ts

@@ -0,0 +1,15 @@
+import { UIComponents } from '@aerogel/core';
+
+import AlertModal from './overrides/AlertModal.vue';
+import ConfirmModal from './overrides/ConfirmModal.vue';
+import ErrorReportModal from './overrides/ErrorReportModal.vue';
+import LoadingModal from './overrides/LoadingModal.vue';
+import SnackbarNotification from './overrides/SnackbarNotification.vue';
+
+export const components = {
+    [UIComponents.AlertModal]: AlertModal,
+    [UIComponents.ConfirmModal]: ConfirmModal,
+    [UIComponents.ErrorReportModal]: ErrorReportModal,
+    [UIComponents.LoadingModal]: LoadingModal,
+    [UIComponents.Snackbar]: SnackbarNotification,
+};

package/templates/overrides/components/overrides/AlertModal.vue

@@ -0,0 +1,11 @@
+<template>
+    <ModalWrapper :title="title">
+        <AGMarkdown :text="message" />
+    </ModalWrapper>
+</template>
+
+<script setup lang="ts">
+import { useAlertModalProps } from '@aerogel/core';
+
+defineProps(useAlertModalProps());
+</script>