@aerogel/cli 0.0.0-next.a56c0f4966eb71571173f8502f3f36d357ceebc7 → 0.0.0-next.a5b6ecb68fdca29d00c8b8906d00aa5bf64a9d7c

package/src/commands/create.test.ts

@@ -1,15 +1,23 @@
-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');
@@ -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,7 +42,7 @@ 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"');

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 ag 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 { 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

@@ -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`)) {

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

@@ -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>();

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();
     }
 

package/src/lib/Editor.ts

@@ -33,13 +33,15 @@ export class Editor {
         await Log.animate('Formatting modified files', async () => {
             const usingPrettier = File.exists('prettier.config.js') || File.contains('package.json', '"prettier": {');
             const usingESLint = File.exists('.eslintrc.js') || File.contains('package.json', '"eslintConfig"');
-
-            await Promise.all(
-                arrayFrom(this.modifiedFiles).map(async (file) => {
+            const usingPrettierESLint = File.contains('package.json', '"prettier-eslint-cli"');
+            const formatFile = usingPrettierESLint
+                ? (file: string) => Shell.run(`npx prettier-eslint ${file} --write`)
+                : async (file: string) => {
                     usingPrettier && (await Shell.run(`npx prettier ${file} --write`));
                     file.match(/\.(ts|js|vue)$/) && usingESLint && (await Shell.run(`npx eslint ${file} --fix`));
-                }),
-            );
+                };
+
+            await Promise.all(arrayFrom(this.modifiedFiles).map(async (file) => formatFile(file)));
         });
     }
 

package/src/lib/Shell.mock.ts

@@ -8,7 +8,7 @@ export class ShellServiceMock extends ShellService {
     private history: string[] = [];
 
     public async run(command: string): Promise<void> {
-        this.history.push(command);
+        this.history.push(command.trim());
     }
 
     public expectRan(command: string): void {

package/src/lib/Template.ts

@@ -6,7 +6,11 @@ import File from '@/lib/File';
 
 export default class Template {
 
-    public static instantiate(path: string, destination: string, replacements: Record<string, unknown>): string[] {
+    public static instantiate(
+        path: string,
+        destination: string = './',
+        replacements: Record<string, unknown> = {},
+    ): string[] {
         const template = new Template(path);
 
         return template.instantiate(destination, replacements);

package/src/lib/utils/app.ts

@@ -7,7 +7,7 @@ export function app(): App {
 }
 
 export function isLocalApp(): boolean {
-    return File.contains('package.json', 'file');
+    return File.contains('package.json', '"@aerogel/core": "file:');
 }
 
 export function isLinkedLocalApp(): boolean {

package/src/lib/utils/paths.ts

@@ -10,7 +10,7 @@ export function basePath(path: string = ''): string {
     }
 
     const packageJson = File.read(resolve(__dirname, '../../../../package.json'));
-    const matches = stringMatch<2>(packageJson ?? '', /"@aerogel\/cli": "file:(.*)\/aerogel-cli-[\d.]*\.tgz"/);
+    const matches = stringMatch<2>(packageJson ?? '', /"@aerogel\/core": "file:(.*)\/aerogel-core-[\d.]*\.tgz"/);
     const cliPath = matches?.[1] ?? Log.fail<string>('Could not determine base path');
 
     return resolve(cliPath, path);

package/src/plugins/Histoire.ts

@@ -0,0 +1,105 @@
+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';
+
+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",',
+                this.installedPatchPackage
+                    ? '"histoire": "histoire dev", "lint": "noeldemartin-lint src", "postinstall": "patch-package",'
+                    : '"histoire": "histoire dev", "lint": "noeldemartin-lint 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;
+    }
+
+}