@gravitee/ui-schematics 12.10.0 → 12.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/ui-schematics",
-  "version": "12.10.0",
+  "version": "12.11.0",
   "description": "Gravitee.io - UI Schematics",
   "repository": {
     "type": "git",

package/schematics/collection.json

@@ -18,6 +18,12 @@
       "factory": "./components/component-with-table/index#createComponentWithTable",
       "schema": "./components/component-with-table/schema.json",
       "aliases": ["cwt"]
+    },
+    "component-for-dialog": {
+      "description": "Generate a component to use with MatDialog in the project.",
+      "factory": "./components/component-for-dialog/index#createComponentForDialog",
+      "schema": "./components/component-for-dialog/schema.json",
+      "aliases": ["cfd"]
     }
   }
 }

package/schematics/components/component-for-dialog/files/__name@dasherize__-dialog.component.html.template

@@ -0,0 +1,28 @@
+<!--
+
+    Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<span mat-dialog-title><%= name %> Dialog</span>
+
+<mat-dialog-content>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel odio nec mi
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-flat-button [mat-dialog-close]="false">Close</button>
+    <button mat-raised-button [mat-dialog-close]="true">My action</button>
+</mat-dialog-actions>
+

package/schematics/components/component-for-dialog/files/__name@dasherize__-dialog.component.scss.template

@@ -0,0 +1,15 @@
+/*
+ * Copyright (C) 2021 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */

package/schematics/components/component-for-dialog/files/__name@dasherize__-dialog.component.spec.ts.template

@@ -0,0 +1,109 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Component } from '@angular/core';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { MatIconTestingModule } from '@angular/material/icon/testing';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+
+import { <%= classify(name) %>DialogHarness } from './<%= dasherize(name) %>-dialog.harness';
+import { <%= classify(name) %>DialogComponent, <%= classify(name) %>DialogData, <%= classify(name) %>DialogResult } from './<%= dasherize(name) %>-dialog.component';
+
+@Component({
+  selector: 'test-component',
+  template: ``,
+  imports: [<%= classify(name) %>DialogComponent, MatDialogModule, MatIconTestingModule],
+  standalone: true,
+})
+class SpecDialogComponent {
+  constructor(private readonly matDialog: MatDialog) {}
+
+  public open(data?: <%= classify(name) %>DialogData) {
+    return this.matDialog.open<<%= classify(name) %>DialogComponent, <%= classify(name) %>DialogData, <%= classify(name) %>DialogResult>(<%= classify(name) %>DialogComponent, {
+      data,
+      role: 'dialog',
+      id: 'test-dialog',
+    });
+  }
+}
+
+describe('<%= classify(name) %>DialogComponent', () => {
+  let fixture: ComponentFixture<SpecDialogComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SpecDialogComponent);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+  });
+
+  it('should open dialog', async () => {
+    fixture.componentInstance.open();
+
+    const dialog = await loader.getHarness(<%= classify(name) %>DialogHarness);
+
+    expect(await dialog.getTitleText()).toEqual('<%= classify(name) %> Dialog');
+    expect(await dialog.getContentText()).toContain('Lorem');
+    expect(await dialog.getActionsText()).toContain('My action');
+  });
+
+  it('should close dialog', async () => {
+    let dialogResult: undefined | boolean;
+    fixture.componentInstance
+      .open()
+      .afterClosed()
+      .subscribe(result => (dialogResult = result));
+
+    const dialog = await loader.getHarness(<%= classify(name) %>DialogHarness);
+
+    await dialog.close();
+    expect(dialogResult).toEqual(false);
+  });
+
+  it('should validate & close dialog', async () => {
+    let dialogResult: undefined | boolean;
+    fixture.componentInstance
+      .open()
+      .afterClosed()
+      .subscribe(result => (dialogResult = result));
+
+    const dialog = await loader.getHarness(<%= classify(name) %>DialogHarness);
+
+    await dialog.confirmMyAction();
+    expect(dialogResult).toEqual(true);
+  });
+});

package/schematics/components/component-for-dialog/files/__name@dasherize__-dialog.component.ts.template

@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Component, Inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+
+export interface <%= classify(name) %>DialogData {}
+
+export type <%= classify(name) %>DialogResult = boolean;
+
+@Component({
+  selector: '<%= dasherize(name) %>-dialog',
+  templateUrl: './<%= dasherize(name) %>-dialog.component.html',
+  styleUrls: ['./<%= dasherize(name) %>-dialog.component.scss'],
+  standalone: true,
+  imports: [MatDialogModule, MatButtonModule],
+})
+export class <%= classify(name) %>DialogComponent {
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public data: <%= classify(name) %>DialogData,
+    public dialogRef: MatDialogRef<<%= classify(name) %>DialogComponent, <%= classify(name) %>DialogResult>,
+  ) {}
+}

package/schematics/components/component-for-dialog/files/__name@dasherize__-dialog.harness.ts.template

@@ -0,0 +1,54 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import { MatDialogSection } from '@angular/material/dialog/testing';
+import { MatButtonHarness } from '@angular/material/button/testing';
+
+export interface <%= classify(name) %>DialogHarnessOptions extends BaseHarnessFilters {}
+
+export class <%= classify(name) %>DialogHarness extends ComponentHarness {
+  public static readonly hostSelector = `<%= dasherize(name) %>-dialog`;
+
+  public static with(options: <%= classify(name) %>DialogHarnessOptions): HarnessPredicate<<%= classify(name) %>DialogHarness> {
+    return new HarnessPredicate(<%= classify(name) %>DialogHarness, options);
+  }
+
+  protected _title = this.locatorForOptional(MatDialogSection.TITLE);
+  protected _content = this.locatorForOptional(MatDialogSection.CONTENT);
+  protected _actions = this.locatorForOptional(MatDialogSection.ACTIONS);
+
+  public async getTitleText(): Promise<string> {
+    return (await this._title())?.text() ?? '';
+  }
+
+  public async getContentText(): Promise<string> {
+    return (await this._content())?.text() ?? '';
+  }
+
+  public async getActionsText(): Promise<string> {
+    return (await this._actions())?.text() ?? '';
+  }
+
+  public async close(): Promise<void> {
+    const closeButton = await this.locatorFor(MatButtonHarness.with({ text: /Close/ }))();
+    await closeButton.click();
+  }
+
+  public async confirmMyAction(): Promise<void> {
+    const confirmButton = await this.locatorFor(MatButtonHarness.with({ text: /My action/ }))();
+    await confirmButton.click();
+  }
+}

package/schematics/components/component-for-dialog/files/__name@dasherize__-dialog.stories.ts.template

@@ -0,0 +1,57 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Meta, StoryObj } from '@storybook/angular';
+import { Component } from '@angular/core';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatIconTestingModule } from '@angular/material/icon/testing';
+import { action } from '@storybook/addon-actions';
+
+import { <%= classify(name) %>DialogComponent, <%= classify(name) %>DialogData, <%= classify(name) %>DialogResult } from './<%= dasherize(name) %>-dialog.component';
+
+@Component({
+  selector: 'story-component',
+  template: `<button id="open-dialog" (click)="open()">Open dialog</button>`,
+  imports: [<%= classify(name) %>DialogComponent, MatDialogModule, MatIconTestingModule],
+  standalone: true,
+})
+class StoryDialogComponent {
+  constructor(private readonly matDialog: MatDialog) {}
+
+  public open(data?: <%= classify(name) %>DialogData) {
+    return this.matDialog
+      .open<<%= classify(name) %>DialogComponent, <%= classify(name) %>DialogData, <%= classify(name) %>DialogResult>(<%= classify(name) %>DialogComponent, {
+        data,
+        role: 'dialog',
+        id: 'test-story-dialog',
+      })
+      .afterClosed()
+      .subscribe(result => {
+        action('Close')({ result });
+      });
+  }
+}
+
+export default {
+  title: '<%= classify(name) %>DialogComponent story',
+  component: StoryDialogComponent,
+} as Meta;
+
+export const Default: StoryObj = {
+  play: context => {
+    const button = context.canvasElement.querySelector('#open-dialog') as HTMLButtonElement;
+    button.click();
+  },
+};

package/schematics/components/component-for-dialog/index.d.ts

@@ -0,0 +1,3 @@
+import { Rule } from '@angular-devkit/schematics';
+import { Schema } from '../schema';
+export declare function createComponentForDialog(options: Schema): Rule;

package/schematics/components/component-for-dialog/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createComponentForDialog = void 0;
+const utils_1 = require("../utils");
+function createComponentForDialog(options) {
+    return (0, utils_1.createComponent)(options);
+}
+exports.createComponentForDialog = createComponentForDialog;
+//# sourceMappingURL=index.js.map

package/schematics/components/component-for-dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../projects/ui-schematics/schematics/components/component-for-dialog/index.ts"],"names":[],"mappings":";;;AAiBA,oCAA2C;AAG3C,SAAgB,wBAAwB,CAAC,OAAe;IACtD,OAAO,IAAA,uBAAe,EAAC,OAAO,CAAC,CAAC;AAClC,CAAC;AAFD,4DAEC"}

package/schematics/components/component-for-dialog/schema.json

@@ -0,0 +1,63 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "GioComponentForDialog",
+  "title": "A Component for dialog use",
+  "type": "object",
+  "properties": {
+    "module": {
+      "type": "string",
+      "description": "The declaring NgModule."
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component. (without `-dialog` suffix)",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use for the component? (without `-dialog` suffix)"
+    },
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path at which to create the component file, relative to the current workspace. Default is a folder with the same name as the component in the project root.",
+      "visible": false
+    },
+    "prefix": {
+      "type": "string",
+      "description": "The prefix to apply to the generated component selector.",
+      "oneOf": [
+        {
+          "maxLength": 0
+        },
+        {
+          "minLength": 1,
+          "format": "html-selector"
+        }
+      ]
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "selector": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The HTML selector to use for this component."
+    },
+    "skipImport": {
+      "type": "boolean",
+      "description": "Do not import this component into the owning NgModule.",
+      "default": false
+    },
+    "skipStories": {
+      "type": "boolean",
+      "description": "Do not create \"stories.ts\" storybook file for the new component.",
+      "default": false
+    }
+  },
+  "required": ["name"]
+}