@aerogel/cli 0.0.0-next.33c058471a47b828f174aca4d2b5aeadfeb2c627 → 0.0.0-next.3e4851f6fd2a4f0f0362da0c88820a5f4b082052

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);
@@ -30,14 +30,22 @@ export default class Command {
         program = program.action((...args) => this.run.call(this, ...args));
     }
 
-    public static async run<T extends CommandConstructor>(this: T, ...args: ConstructorParameters<T>): Promise<void> {
+    protected 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.test.ts

@@ -1,21 +1,29 @@
-import { describe, it } from 'vitest';
+import { beforeEach, describe, it } from 'vitest';
 
 import FileMock from '@/lib/File.mock';
 import ShellMock from '@/lib/Shell.mock';
+import { stubCommandRunner } from '@/testing/utils';
+import type { StubCommandRunner } from '@/testing/utils';
 
 import { CreateCommand } from './create';
 
 describe('Create command', () => {
 
+    let run: StubCommandRunner<typeof CreateCommand>;
+
+    beforeEach(() => {
+        run = stubCommandRunner(CreateCommand);
+    });
+
     it('creates apps', async () => {
         // Act
-        await CreateCommand.run('./app', { name: 'My App' });
+        await run('./app', { name: 'My App' });
 
         // Assert
         FileMock.expectCreated('./app/.gitignore').toContain('node_modules');
         FileMock.expectCreated('./app/package.json').toContain('"name": "my-app"');
         FileMock.expectCreated('./app/package.json').toContain('"@aerogel/core": "next"');
-        FileMock.expectCreated('./app/index.html').toContain('My App');
+        FileMock.expectCreated('./app/index.html').toContain('{{ app.name }}');
         FileMock.expectCreated('./app/README.md').toContain('My App');
         FileMock.expectCreated('./app/src/App.vue').toContain('<h1 class="text-4xl font-semibold">');
         FileMock.expectCreated('./app/src/App.vue').toContain('{{ $t(\'home.title\') }}');
@@ -26,7 +34,7 @@ describe('Create command', () => {
 
     it('creates apps for local core development', async () => {
         // Act
-        await CreateCommand.run('./app', { name: 'My App', local: true });
+        await run('./app', { name: 'My App', local: true });
 
         // Assert
         FileMock.expectCreated('./app/package.json').toMatch(/"@aerogel\/core": "file:[^"]+\/packages\/core"/);
@@ -34,11 +42,10 @@ describe('Create command', () => {
 
     it('infers app name from path', async () => {
         // Act
-        await CreateCommand.run('./my-app');
+        await run('./my-app');
 
         // Assert
         FileMock.expectCreated('./my-app/package.json').toContain('"name": "my-app"');
-        FileMock.expectCreated('./my-app/index.html').toContain('My App');
     });
 
 });

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

@@ -1,17 +1,25 @@
-import { describe, it } from 'vitest';
+import { beforeEach, describe, it } from 'vitest';
 
 import FileMock from '@/lib/File.mock';
+import { stubCommandRunner } from '@/testing/utils';
+import type { StubCommandRunner } from '@/testing/utils';
 
 import { GenerateComponentCommand } from './generate-component';
 
 describe('Generate Component command', () => {
 
+    let run: StubCommandRunner<typeof GenerateComponentCommand>;
+
+    beforeEach(() => {
+        run = stubCommandRunner(GenerateComponentCommand);
+    });
+
     it('generates components', async () => {
         // Arrange
         FileMock.stub('package.json', '@aerogel/core');
 
         // Act
-        await GenerateComponentCommand.run('FooBar');
+        await run('FooBar');
 
         // Assert
         FileMock.expectCreated('src/components/FooBar.vue').toContain('<div>FooBar</div>');
@@ -22,7 +30,7 @@ describe('Generate Component command', () => {
         FileMock.stub('package.json', '@aerogel/core');
 
         // Act
-        await GenerateComponentCommand.run('module/FooBar');
+        await run('module/FooBar');
 
         // Assert
         FileMock.expectCreated('src/components/module/FooBar.vue').toContain('<div>FooBar</div>');
@@ -30,15 +38,60 @@ describe('Generate Component command', () => {
 
     it('generates components with stories', async () => {
         // Arrange
-        FileMock.stub('package.json', '@aerogel/core');
-        FileMock.stub('src/main.histoire.ts');
+        FileMock.stub(
+            'package.json',
+            `
+                "@aerogel/core": "*",
+                "histoire": "*"
+            `,
+        );
 
         // Act
-        await GenerateComponentCommand.run('FooBar', { story: true });
+        await run('FooBar', { story: true });
 
         // Assert
         FileMock.expectCreated('src/components/FooBar.vue').toContain('<div>FooBar</div>');
         FileMock.expectCreated('src/components/FooBar.story.vue').toContain('<FooBar />');
     });
 
+    it('generates input components with stories', async () => {
+        // Arrange
+        FileMock.stub(
+            'package.json',
+            `
+                "@aerogel/core": "*",
+                "histoire": "*"
+            `,
+        );
+
+        // Act
+        await run('FooBar', { input: true, story: true });
+
+        // Assert
+        FileMock.expectCreated('src/components/FooBar.vue').toContain('<AGHeadlessInputInput v-bind="attrs" />');
+        FileMock.expectCreated('src/components/FooBar.story.vue').toContain('.story-foobar .variant-playground');
+        FileMock.expectCreated('src/components/FooBar.story.vue').toContain(
+            '<FooBar name="food" :label="label" :placeholder="placeholder" />',
+        );
+    });
+
+    it('generates button components with stories', async () => {
+        // Arrange
+        FileMock.stub(
+            'package.json',
+            `
+                "@aerogel/core": "*",
+                "histoire": "*"
+            `,
+        );
+
+        // Act
+        await run('FooBar', { button: true, story: true });
+
+        // Assert
+        FileMock.expectCreated('src/components/FooBar.vue').toContain('<AGHeadlessButton :class="colorClasses">');
+        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

@@ -1,4 +1,4 @@
-import { arrayFrom } from '@noeldemartin/utils';
+import { arrayFrom, stringToSlug } from '@noeldemartin/utils';
 import { Node, SyntaxKind } from 'ts-morph';
 import type { ArrayLiteralExpression, CallExpression, SourceFile } from 'ts-morph';
 
@@ -12,18 +12,28 @@ import { templatePath } from '@/lib/utils/paths';
 import type { CommandOptions } from '@/commands/Command';
 
 export interface Options {
+    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 = {
+    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',
@@ -40,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();
 
@@ -48,7 +64,7 @@ export class GenerateComponentCommand extends Command {
         const [directoryName, componentName] = this.parsePathComponents();
 
         await this.createComponent(directoryName, componentName, files);
-        await this.createStory(componentName, files);
+        await this.createStory(directoryName, componentName, files);
         await this.declareComponents();
 
         const filesList = arrayFrom(files)
@@ -63,8 +79,11 @@ export class GenerateComponentCommand extends Command {
             return;
         }
 
-        if (!File.exists('src/main.histoire.ts')) {
-            Log.fail('Histoire is not installed yet!');
+        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
+            `);
         }
     }
 
@@ -74,22 +93,38 @@ export class GenerateComponentCommand extends Command {
                 Log.fail(`${this.path} component already exists!`);
             }
 
-            const componentFiles = Template.instantiate(templatePath('component'), `src/components/${directoryName}`, {
-                component: { name: componentName },
+            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,
+                    slug: stringToSlug(componentName),
+                },
             });
 
             componentFiles.forEach((file) => files.add(file));
         });
     }
 
-    protected async createStory(componentName: string, files: Set<string>): Promise<void> {
+    protected async createStory(directoryName: string, componentName: string, files: Set<string>): Promise<void> {
         if (!this.options.story) {
             return;
         }
 
         await Log.animate('Creating story', async () => {
-            const storyFiles = Template.instantiate(templatePath('component-story'), 'src/components', {
-                component: { name: componentName },
+            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,
+                    slug: stringToSlug(componentName),
+                },
             });
 
             storyFiles.forEach((file) => files.add(file));

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

@@ -1,12 +1,20 @@
-import { describe, it } from 'vitest';
+import { beforeEach, describe, it } from 'vitest';
+import { formatCodeBlock } from '@noeldemartin/utils';
 
 import FileMock from '@/lib/File.mock';
-import { formatCodeBlock } from '@/lib/utils/format';
+import { stubCommandRunner } from '@/testing/utils';
+import type { StubCommandRunner } from '@/testing/utils';
 
 import { GenerateModelCommand } from './generate-model';
 
 describe('Generate Model command', () => {
 
+    let run: StubCommandRunner<typeof GenerateModelCommand>;
+
+    beforeEach(() => {
+        run = stubCommandRunner(GenerateModelCommand);
+    });
+
     it('generates models', async () => {
         // Arrange
         FileMock.stub(
@@ -20,7 +28,7 @@ describe('Generate Model command', () => {
         );
 
         // Act
-        await GenerateModelCommand.run('FooBar', {
+        await run('FooBar', {
             fields: 'name:string:required,age:number,birth:Date',
         });
 

package/src/commands/generate-model.ts

@@ -1,11 +1,10 @@
-import { stringToStudlyCase } from '@noeldemartin/utils';
+import { formatCodeBlock, stringToStudlyCase } 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 { formatCodeBlock } from '@/lib/utils/format';
 import type { CommandOptions } from '@/commands/Command';
 
 interface Options {
@@ -14,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',
     };
 
@@ -31,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`)) {
@@ -91,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.test.ts

@@ -1,17 +1,25 @@
-import { describe, it } from 'vitest';
+import { beforeEach, describe, it } from 'vitest';
 
 import FileMock from '@/lib/File.mock';
+import { stubCommandRunner } from '@/testing/utils';
+import type { StubCommandRunner } from '@/testing/utils';
 
 import { GenerateServiceCommand } from './generate-service';
 
 describe('Generate Service command', () => {
 
+    let run: StubCommandRunner<typeof GenerateServiceCommand>;
+
+    beforeEach(() => {
+        run = stubCommandRunner(GenerateServiceCommand);
+    });
+
     it('generates services', async () => {
         // Arrange
         FileMock.stub('package.json', '@aerogel/core');
 
         // Act
-        await GenerateServiceCommand.run('FooBar');
+        await run('FooBar');
 
         // Assert
         FileMock.expectCreated('src/services/FooBar.ts').toContain('class FooBarService extends Service');

package/src/commands/generate-service.ts

@@ -1,4 +1,4 @@
-import { arrayFrom, stringToCamelCase } from '@noeldemartin/utils';
+import { arrayFrom, formatCodeBlock, stringToCamelCase } from '@noeldemartin/utils';
 import { Node, SyntaxKind } from 'ts-morph';
 import type { ObjectLiteralExpression, SourceFile } from 'ts-morph';
 
@@ -9,14 +9,13 @@ import Template from '@/lib/Template';
 import { app } from '@/lib/utils/app';
 import { templatePath } from '@/lib/utils/paths';
 import { editFiles, findDescendant } from '@/lib/utils/edit';
-import { formatCodeBlock } from '@/lib/utils/format';
 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;
 
@@ -26,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>();
@@ -123,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.test.ts

@@ -1,18 +1,49 @@
-import { describe, it } from 'vitest';
+import { beforeEach, describe, it } from 'vitest';
 
+import FileMock from '@/lib/File.mock';
 import ShellMock from '@/lib/Shell.mock';
+import { stubCommandRunner } from '@/testing/utils';
+import type { StubCommandRunner } from '@/testing/utils';
 
 import { InstallCommand } from './install';
 
 describe('Install plugin command', () => {
 
-    it('installs plugins', async () => {
+    let run: StubCommandRunner<typeof InstallCommand>;
+
+    beforeEach(() => {
+        run = stubCommandRunner(InstallCommand);
+    });
+
+    it('installs solid', async () => {
         // Act
-        await InstallCommand.run('solid');
+        await run('solid');
 
         // Assert
         ShellMock.expectRan('npm install soukai-solid@next --save-exact');
         ShellMock.expectRan('npm install @aerogel/plugin-solid@next --save-exact');
     });
 
+    it('installs soukai', async () => {
+        // Act
+        await run('soukai');
+
+        // Assert
+        ShellMock.expectRan('npm install soukai@next --save-exact');
+        ShellMock.expectRan('npm install @aerogel/plugin-soukai@next --save-exact');
+    });
+
+    it('installs histoire', async () => {
+        // Arrange
+        FileMock.stub('package.json', '"@aerogel/core"');
+
+        // Act
+        await run('histoire');
+
+        // Assert
+        ShellMock.expectRan('npm install histoire@0.17.6 --save-dev');
+        ShellMock.expectRan('npm install @aerogel/histoire@next --save-exact --save-dev');
+        ShellMock.expectRan('npm install patch-package --save-dev');
+    });
+
 });

package/src/commands/install.ts

@@ -1,19 +1,20 @@
 import Command from '@/commands/Command';
 import Log from '@/lib/Log';
+import { Histoire } from '@/plugins/Histoire';
 import { Solid } from '@/plugins/Solid';
 import { Soukai } from '@/plugins/Soukai';
 import type Plugin from '@/plugins/Plugin';
 
-const plugins = [new Soukai(), new Solid()].reduce(
+const plugins = [new Soukai(), new Solid(), new Histoire()].reduce(
     (pluginsObject, plugin) => Object.assign(pluginsObject, { [plugin.name]: plugin }),
     {} as Record<string, Plugin>,
 );
 
 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;
 
@@ -25,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();
     }