docs(modal): adapted preview examples for angular modal (#1478)

siemens · Sep 19, 2024 · 24dbdee · 24dbdee
1 parent cc6091f
commit 24dbdee
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 32 deletions.
diff --git a/packages/angular-test-app/src/preview-examples/echarts-empty-state.ts b/packages/angular-test-app/src/preview-examples/echarts-empty-state.ts
@@ -16,7 +16,7 @@ import { EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-empty-state.html',
-  styleUrls: ["./styles/charts.css"],
+  styleUrls: ["./styles/charts-empty-state.css"],
 })
 export default class EchartsLineSimple implements OnInit {
   theme = convertThemeName(themeSwitcher.getCurrentTheme());

diff --git a/packages/angular-test-app/src/preview-examples/modal-by-instance-content.ts b/packages/angular-test-app/src/preview-examples/modal-by-instance-content.ts
@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
 import { IxActiveModal } from '@siemens/ix-angular';
 
 @Component({
-  selector: 'app-example',
+  selector: 'app-example-content',
   template: `
     <ix-modal-header> Message headline </ix-modal-header>
     <ix-modal-content>

diff --git a/packages/angular-test-app/src/preview-examples/modal-by-instance.ts b/packages/angular-test-app/src/preview-examples/modal-by-instance.ts
@@ -12,7 +12,7 @@ import { ModalService } from '@siemens/ix-angular';
 import ModalByInstanceExample from './modal-by-instance-content';
 
 @Component({
-  selector: 'app-example-instance',
+  selector: 'app-example',
   template: '<ix-button (click)="openModal()">Show modal</ix-button>',
 })
 export default class ModalByInstance {

diff --git a/packages/angular-test-app/src/preview-examples/modal-sizes.html b/packages/angular-test-app/src/preview-examples/modal-sizes.html
@@ -20,24 +20,5 @@
 </div>
 
 <ng-template #customModal let-modal>
-  <div style="display: flex; margin-top: 60px; margin-bottom: 60px">
-    <input checked id="checkbox_1_1" name="group_1" type="checkbox" />
-    <label for="checkbox_1_1">
-      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-      voluptuad. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-      amet.</label
-    >
-    <div id="test">
-      <ix-icon size="24" name="name" name="info"></ix-icon>
-    </div>
-    <ix-tooltip style="align-self: flex-start" for="#test"
-    >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-      amet.
-    </ix-tooltip>
-  </div>
+  <ix-button (click)="modal.dismiss('dismiss')">Modal with size {{ modal.data }}</ix-button>
 </ng-template>
diff --git a/packages/documentation/docs/controls/modal.md b/packages/documentation/docs/controls/modal.md
@@ -38,18 +38,35 @@ Select the appropriate section below for the respective usage information.
 
 ### Angular
 
+#### By template
+
+<Playground
+name="modal"
+height="18rem"
+preventDefaultExample
+frameworks={['angular']}
+deviantRootFileName="modal-by-template"
+additionalFiles={{
+angular: [
+'modal-by-template.ts',
+],
+}}>
+</Playground>
+
+#### By instance
+
 <Playground
 name="modal"
 height="18rem"
 preventDefaultExample
 frameworks={['angular']}
+deviantRootFileName="modal-by-instance"
 additionalFiles={{
-    angular: [
-      'modal-by-template.ts',
-      "modal-by-instance.ts",
-      "modal-by-instance-content.ts",
-      ],
-  }}>
+angular: [
+"modal-by-instance.ts",
+"modal-by-instance-content.ts",
+],
+}}>
 </Playground>
 
 `@siemens/ix-angular` provides an injectable service that allows to open modal dialogs based on a `ng-template` reference or by component type.

diff --git a/packages/documentation/src/components/PlaygroundV3/index.tsx b/packages/documentation/src/components/PlaygroundV3/index.tsx
@@ -204,6 +204,7 @@ function SnippetPreview(props: { snippets: Record<string, string> }) {
 
 function ToolbarButtons(props: {
   name: string;
+  deviantRootFileName: string;
   activeFramework: TargetFramework;
   noMargin: boolean;
   snippets: Record<string, string>;
@@ -235,7 +236,7 @@ function ToolbarButtons(props: {
                 baseUrl: baseUrl,
                 framework: props.activeFramework,
                 snippets: props.snippets,
-                name: props.name,
+                name: props.deviantRootFileName ? props.deviantRootFileName : props.name,
                 version: 'latest',
               })
             }
@@ -272,6 +273,7 @@ export type PlaygroundV3Props = {
   frameworks?: TargetFramework[];
   preventDefaultExample?: boolean;
   additionalFiles?: Record<TargetFramework, string[]>;
+  deviantRootFileName?: string;
 } & DemoProps;
 
 export default function PlaygroundV3(props: PlaygroundV3Props) {
@@ -332,6 +334,7 @@ export default function PlaygroundV3(props: PlaygroundV3Props) {
 
         <ToolbarButtons
           name={props.name}
+          deviantRootFileName={props.deviantRootFileName}
           activeFramework={activeFramework}
           noMargin={false}
           snippets={snippets}

diff --git a/packages/documentation/src/utils/stackblitz.ts b/packages/documentation/src/utils/stackblitz.ts
@@ -123,6 +123,23 @@ async function createReactProjectFiles(
   return project;
 }
 
+function getAdditionalAngularComponents(
+  snippets: Record<string, string>,
+  rootFileName: string
+) {
+  const componentRegex = /@Component\(/;
+
+  return Object.keys(snippets)
+    .filter((key) => {
+      return (
+        key.endsWith('.ts') &&
+        key !== `${rootFileName}.ts` &&
+        componentRegex.test(snippets[key])
+      );
+    })
+    .map((key) => key.replace('.ts', ''));
+}
+
 async function createAngularProjectFiles(
   baseUrl: string,
   snippets: Record<string, string>,
@@ -138,14 +155,34 @@ async function createAngularProjectFiles(
     project[`src/${key.replace('./', '')}`] = snippets[key];
   });
 
+  const additionalAngularComponents = getAdditionalAngularComponents(
+    snippets,
+    name
+  );
+
+  const importsString = additionalAngularComponents
+    .map(
+      (file) => `import ${fromKebabCaseToCamelCase(file)} from './../${file}';`
+    )
+    .join('\n');
+
   project['src/app/app.module.ts'] = project['src/app/app.module.ts'].replace(
     "import ExampleComponent from './example.component';",
-    `import ${fromKebabCaseToCamelCase(name)} from './../${name}';`
+    [
+      `import ${fromKebabCaseToCamelCase(name)} from './../${name}';`,
+      importsString,
+    ].join('\n')
   );
 
+  const importComponent = additionalAngularComponents
+    .map((file) => fromKebabCaseToCamelCase(file))
+    .join(', ');
+
   project['src/app/app.module.ts'] = project['src/app/app.module.ts'].replace(
     'declarations: [AppComponent, ExampleComponent],',
-    `declarations: [AppComponent, ${fromKebabCaseToCamelCase(name)}],`
+    `declarations: [AppComponent, ${fromKebabCaseToCamelCase(
+      name
+    )}, ${importComponent}],`
   );
 
   return project;