From 0815b8ebdc5adffb502b09d0c6315e3167d18ef2 Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Wed, 1 Mar 2023 12:35:28 +0300 Subject: [PATCH] chore(demo): add `Stackblitz` integration for documentation examples (#158) --- projects/demo/src/app/app.providers.ts | 11 ++++ projects/demo/src/app/app.routes.ts | 2 +- .../pages/stackblitz-starter/files/index.html | 1 - .../stackblitz-starter/stackblitz.service.ts | 28 -------- .../src/pages/stackblitz/files/example.ts.md | 13 ++++ .../index.ts => stackblitz/files/starter.ts} | 0 .../files/styles.css | 0 .../stackblitz-starter.component.ts | 12 ++-- .../stackblitz-starter.module.ts | 0 .../stackblitz-starter.style.less | 0 .../pages/stackblitz/stackblitz.service.ts | 64 +++++++++++++++++++ 11 files changed, 94 insertions(+), 37 deletions(-) delete mode 100644 projects/demo/src/pages/stackblitz-starter/files/index.html delete mode 100644 projects/demo/src/pages/stackblitz-starter/stackblitz.service.ts create mode 100644 projects/demo/src/pages/stackblitz/files/example.ts.md rename projects/demo/src/pages/{stackblitz-starter/files/index.ts => stackblitz/files/starter.ts} (100%) rename projects/demo/src/pages/{stackblitz-starter => stackblitz}/files/styles.css (100%) rename projects/demo/src/pages/{stackblitz-starter => stackblitz}/stackblitz-starter.component.ts (82%) rename projects/demo/src/pages/{stackblitz-starter => stackblitz}/stackblitz-starter.module.ts (100%) rename projects/demo/src/pages/{stackblitz-starter => stackblitz}/stackblitz-starter.style.less (100%) create mode 100644 projects/demo/src/pages/stackblitz/stackblitz.service.ts diff --git a/projects/demo/src/app/app.providers.ts b/projects/demo/src/app/app.providers.ts index 47a86cc01..5d36d4329 100644 --- a/projects/demo/src/app/app.providers.ts +++ b/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: () => { diff --git a/projects/demo/src/app/app.routes.ts b/projects/demo/src/app/app.routes.ts index b1ee862cb..16567eeb4 100644 --- a/projects/demo/src/app/app.routes.ts +++ b/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: { diff --git a/projects/demo/src/pages/stackblitz-starter/files/index.html b/projects/demo/src/pages/stackblitz-starter/files/index.html deleted file mode 100644 index 4cf679efe..000000000 --- a/projects/demo/src/pages/stackblitz-starter/files/index.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/projects/demo/src/pages/stackblitz-starter/stackblitz.service.ts b/projects/demo/src/pages/stackblitz-starter/stackblitz.service.ts deleted file mode 100644 index d40f170f6..000000000 --- a/projects/demo/src/pages/stackblitz-starter/stackblitz.service.ts +++ /dev/null @@ -1,28 +0,0 @@ -import {Injectable} from '@angular/core'; -import stackblitz, {OpenOptions, Project} from '@stackblitz/sdk'; - -@Injectable() -export class StackblitzService { - private readonly baseProjectConfigs: Pick = { - template: `typescript`, - dependencies: { - '@maskito/core': '*', - '@maskito/kit': '*', - }, - }; - - openStarter( - {title, description, files}: Pick, - openOptions?: OpenOptions, - ): void { - return stackblitz.openProject( - { - ...this.baseProjectConfigs, - title, - description, - files, - }, - openOptions, - ); - } -} diff --git a/projects/demo/src/pages/stackblitz/files/example.ts.md b/projects/demo/src/pages/stackblitz/files/example.ts.md new file mode 100644 index 000000000..a068b1d0d --- /dev/null +++ b/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); +} +``` diff --git a/projects/demo/src/pages/stackblitz-starter/files/index.ts b/projects/demo/src/pages/stackblitz/files/starter.ts similarity index 100% rename from projects/demo/src/pages/stackblitz-starter/files/index.ts rename to projects/demo/src/pages/stackblitz/files/starter.ts diff --git a/projects/demo/src/pages/stackblitz-starter/files/styles.css b/projects/demo/src/pages/stackblitz/files/styles.css similarity index 100% rename from projects/demo/src/pages/stackblitz-starter/files/styles.css rename to projects/demo/src/pages/stackblitz/files/styles.css diff --git a/projects/demo/src/pages/stackblitz-starter/stackblitz-starter.component.ts b/projects/demo/src/pages/stackblitz/stackblitz-starter.component.ts similarity index 82% rename from projects/demo/src/pages/stackblitz-starter/stackblitz-starter.component.ts rename to projects/demo/src/pages/stackblitz/stackblitz-starter.component.ts index 5f13764de..d79410428 100644 --- a/projects/demo/src/pages/stackblitz-starter/stackblitz-starter.component.ts +++ b/projects/demo/src/pages/stackblitz/stackblitz-starter.component.ts @@ -25,12 +25,10 @@ export class StackblitzStarterComponent implements OnInit { } async openStackblitz(): Promise { - 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': ``, 'index.ts': ts, 'styles.css': css, }, diff --git a/projects/demo/src/pages/stackblitz-starter/stackblitz-starter.module.ts b/projects/demo/src/pages/stackblitz/stackblitz-starter.module.ts similarity index 100% rename from projects/demo/src/pages/stackblitz-starter/stackblitz-starter.module.ts rename to projects/demo/src/pages/stackblitz/stackblitz-starter.module.ts diff --git a/projects/demo/src/pages/stackblitz-starter/stackblitz-starter.style.less b/projects/demo/src/pages/stackblitz/stackblitz-starter.style.less similarity index 100% rename from projects/demo/src/pages/stackblitz-starter/stackblitz-starter.style.less rename to projects/demo/src/pages/stackblitz/stackblitz-starter.style.less diff --git a/projects/demo/src/pages/stackblitz/stackblitz.service.ts b/projects/demo/src/pages/stackblitz/stackblitz.service.ts new file mode 100644 index 000000000..9596c8f53 --- /dev/null +++ b/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 = { + template: `typescript`, + dependencies: { + '@maskito/core': '*', + '@maskito/kit': '*', + }, + }; + + readonly name = 'Stackblitz'; + + async edit( + component: string, + id: string, + files: Record, + ): Promise { + 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') + ? `` + : ``, + 'styles.css': css, + 'index.ts': tuiTryParseMarkdownCodeBlock(tsMd)[0], + 'mask.ts': files['MaskitoOptions'], + }, + }, + {openFile: 'index.ts,mask.ts'}, + ); + } + + openStarter( + {title, description, files}: Pick, + openOptions?: OpenOptions, + ): void { + return stackblitz.openProject( + { + ...this.baseProjectConfigs, + title, + description, + files, + }, + openOptions, + ); + } +}