chore(demo): add Stackblitz integration for documentation examples (#…

…158)

projects/demo/src/app/app.providers.ts

@@ -1,16 +1,19 @@
 import {isPlatformBrowser, LocationStrategy, PathLocationStrategy} from '@angular/common';
 import {inject, PLATFORM_ID, Provider} from '@angular/core';
 import {
+    TUI_DOC_CODE_EDITOR,
     TUI_DOC_DEFAULT_TABS,
     TUI_DOC_LOGO,
     TUI_DOC_PAGES,
     TUI_DOC_SOURCE_CODE,
     TUI_DOC_TITLE,
+    tuiDocExampleOptionsProvider,
     TuiDocSourceCodePathOptions,
 } from '@taiga-ui/addon-doc';
 import {HIGHLIGHT_OPTIONS} from 'ngx-highlightjs';
 
 import {DEMO_PAGES} from '../pages/pages';
+import {StackblitzService} from '../pages/stackblitz/stackblitz.service';
 import {LOGO_CONTENT} from './modules/logo/logo.component';
 
 export const APP_PROVIDERS: Provider[] = [
@@ -52,6 +55,14 @@ export const APP_PROVIDERS: Provider[] = [
             ).replace(/[A-Z]/g, m => `-${m.toLowerCase()}`)}`;
         },
     },
+    {
+        provide: TUI_DOC_CODE_EDITOR,
+        useClass: StackblitzService,
+    },
+    tuiDocExampleOptionsProvider({
+        codeEditorVisibilityHandler: files =>
+            Object.keys(files).length === 1 && Boolean(files['MaskitoOptions']),
+    }),
     {
         provide: HIGHLIGHT_OPTIONS,
         useFactory: () => {

projects/demo/src/app/app.routes.ts

@@ -178,7 +178,7 @@ export const appRoutes: Routes = [
     {
         path: DemoPath.Stackblitz,
         loadChildren: async () =>
-            import(`../pages/stackblitz-starter/stackblitz-starter.module`).then(
+            import(`../pages/stackblitz/stackblitz-starter.module`).then(
                 m => m.StackblitzStarterModule,
             ),
         data: {

projects/demo/src/pages/stackblitz/files/example.ts.md

@@ -0,0 +1,13 @@
+```ts
+import './styles.css';
+import {Maskito} from '@maskito/core';
+import mask from './mask';
+
+const element: HTMLInputElement | HTMLTextAreaElement | null = document.querySelector('input, textarea');
+
+if (element) {
+  const maskedElement = new Maskito(element, mask);
+
+  console.info('Call this function when the element is detached from DOM', maskedElement.destroy);
+}
+```

projects/demo/src/pages/stackblitz-starter/stackblitz-starter.component.ts → projects/demo/src/pages/stackblitz/stackblitz-starter.component.ts

@@ -25,12 +25,10 @@ export class StackblitzStarterComponent implements OnInit {
     }
 
     async openStackblitz(): Promise<void> {
-        const [html, ts, css] = await Promise.all(
-            [
-                import('./files/index.html?raw'),
-                import('./files/index.ts?raw'),
-                import('./files/styles.css?raw'),
-            ].map(tuiRawLoad),
+        const [ts, css] = await Promise.all(
+            [import('./files/starter.ts?raw'), import('./files/styles.css?raw')].map(
+                tuiRawLoad,
+            ),
         );
 
         return this.stackblitz.openStarter(
@@ -39,7 +37,7 @@ export class StackblitzStarterComponent implements OnInit {
                 description:
                     'A starter with Maskito library\nDocumentation: https://tinkoff.github.io/maskito',
                 files: {
-                    'index.html': html,
+                    'index.html': `<input />`,
                     'index.ts': ts,
                     'styles.css': css,
                 },

projects/demo/src/pages/stackblitz/stackblitz.service.ts

@@ -0,0 +1,64 @@
+import {Injectable} from '@angular/core';
+import stackblitz, {OpenOptions, Project} from '@stackblitz/sdk';
+import {
+    TuiCodeEditor,
+    tuiRawLoad,
+    tuiTryParseMarkdownCodeBlock,
+} from '@taiga-ui/addon-doc';
+
+@Injectable()
+export class StackblitzService implements TuiCodeEditor {
+    private readonly baseProjectConfigs: Pick<Project, 'dependencies' | 'template'> = {
+        template: `typescript`,
+        dependencies: {
+            '@maskito/core': '*',
+            '@maskito/kit': '*',
+        },
+    };
+
+    readonly name = 'Stackblitz';
+
+    async edit(
+        component: string,
+        id: string,
+        files: Record<string, string>,
+    ): Promise<void> {
+        const [tsMd, css] = await Promise.all(
+            [import('./files/example.ts.md?raw'), import('./files/styles.css?raw')].map(
+                tuiRawLoad,
+            ),
+        );
+
+        return stackblitz.openProject(
+            {
+                ...this.baseProjectConfigs,
+                title: `maskito/${component}/${id}`,
+                description: `Maskito example of the component ${component}`,
+                files: {
+                    'index.html': component.includes('textarea')
+                        ? `<textarea></textarea>`
+                        : `<input />`,
+                    'styles.css': css,
+                    'index.ts': tuiTryParseMarkdownCodeBlock(tsMd)[0],
+                    'mask.ts': files['MaskitoOptions'],
+                },
+            },
+            {openFile: 'index.ts,mask.ts'},
+        );
+    }
+
+    openStarter(
+        {title, description, files}: Pick<Project, 'description' | 'files' | 'title'>,
+        openOptions?: OpenOptions,
+    ): void {
+        return stackblitz.openProject(
+            {
+                ...this.baseProjectConfigs,
+                title,
+                description,
+                files,
+            },
+            openOptions,
+        );
+    }
+}