Skip to content

Commit 6bba42d

Browse files
griest024xelaint
griest024
and
xelaint
authored
feat: render design examples in daffio (#2909)
- moves the example viewer components to a `docs-components` package - changes the example rendering from a custom element based one to a component outlet one - adds custom element support for the example viewer container so it can be rendered when the markdown is rendered with `innerHtml` - converts example components to standalone so that they can be dynamically rendered - extracts internal package ignore constant in dgeni and adds new packages --------- Co-authored-by: xelaint <[email protected]>
1 parent 06aeb4b commit 6bba42d

File tree

352 files changed

+2169
-2500
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

352 files changed

+2169
-2500
lines changed

‎angular.json

+97-5
Original file line numberDiff line numberDiff line change
@@ -820,6 +820,93 @@
820820
}
821821
}
822822
},
823+
"documentation": {
824+
"root": "libs/documentation",
825+
"sourceRoot": "libs/documentation",
826+
"projectType": "library",
827+
"prefix": "daffodil",
828+
"architect": {
829+
"build": {
830+
"builder": "@angular-devkit/build-angular:ng-packagr",
831+
"options": {
832+
"tsConfig": "libs/documentation/tsconfig.lib.json",
833+
"project": "libs/documentation/ng-package.json"
834+
},
835+
"configurations": {
836+
"production": {
837+
"tsConfig": "libs/documentation/tsconfig.lib.prod.json"
838+
}
839+
}
840+
},
841+
"test": {
842+
"builder": "@angular-devkit/build-angular:karma",
843+
"options": {
844+
"main": "libs/documentation/test.ts",
845+
"codeCoverage": true,
846+
"tsConfig": "libs/documentation/tsconfig.spec.json",
847+
"karmaConfig": "libs/documentation/karma.conf.js",
848+
"stylePreprocessorOptions": {
849+
"includePaths": [
850+
"libs/documentation/scss"
851+
]
852+
}
853+
}
854+
},
855+
"lint": {
856+
"builder": "@angular-eslint/builder:lint",
857+
"options": {
858+
"lintFilePatterns": [
859+
"libs/documentation/**/*.ts",
860+
"libs/documentation/**/*.html"
861+
]
862+
}
863+
}
864+
}
865+
},
866+
"docs-components": {
867+
"root": "libs/docs-components",
868+
"sourceRoot": "libs/docs-components",
869+
"projectType": "library",
870+
"prefix": "daffodil",
871+
"architect": {
872+
"build": {
873+
"builder": "@angular-devkit/build-angular:ng-packagr",
874+
"options": {
875+
"tsConfig": "libs/docs-components/tsconfig.lib.json",
876+
"project": "libs/docs-components/ng-package.json"
877+
},
878+
"configurations": {
879+
"production": {
880+
"tsConfig": "libs/docs-components/tsconfig.lib.prod.json"
881+
}
882+
}
883+
},
884+
"test": {
885+
"builder": "@angular-devkit/build-angular:karma",
886+
"options": {
887+
"main": "libs/docs-components/test.ts",
888+
"codeCoverage": true,
889+
"tsConfig": "libs/docs-components/tsconfig.spec.json",
890+
"karmaConfig": "libs/docs-components/karma.conf.js",
891+
"stylePreprocessorOptions": {
892+
"includePaths": [
893+
"libs/design/scss",
894+
"libs/docs-components/scss"
895+
]
896+
}
897+
}
898+
},
899+
"lint": {
900+
"builder": "@angular-eslint/builder:lint",
901+
"options": {
902+
"lintFilePatterns": [
903+
"libs/docs-components/**/*.ts",
904+
"libs/docs-components/**/*.html"
905+
]
906+
}
907+
}
908+
}
909+
},
823910
"daffio": {
824911
"root": "apps/daffio/",
825912
"sourceRoot": "apps/daffio/src",
@@ -863,7 +950,8 @@
863950
"includePaths": [
864951
"apps/daffio/src/scss",
865952
"dist/design/scss",
866-
"dist/branding/src/scss"
953+
"dist/branding/src/scss",
954+
"dist/docs-components/src/scss"
867955
]
868956
},
869957
"scripts": [],
@@ -933,7 +1021,8 @@
9331021
"includePaths": [
9341022
"apps/daffio/src/scss",
9351023
"dist/design/scss",
936-
"dist/branding/src/scss"
1024+
"dist/branding/src/scss",
1025+
"dist/docs-components/src/scss"
9371026
]
9381027
},
9391028
"scripts": [],
@@ -1034,7 +1123,8 @@
10341123
"includePaths": [
10351124
"apps/daffio/src/scss",
10361125
"libs/design/scss",
1037-
"libs/branding/src/scss"
1126+
"libs/branding/src/scss",
1127+
"dist/docs-components/src/scss"
10381128
]
10391129
},
10401130
"scripts": [],
@@ -1086,7 +1176,8 @@
10861176
"stylePreprocessorOptions": {
10871177
"includePaths": [
10881178
"apps/design-land/src/scss",
1089-
"dist/design/scss"
1179+
"dist/design/scss",
1180+
"dist/docs-components/src/scss"
10901181
]
10911182
},
10921183
"scripts": [],
@@ -1156,7 +1247,8 @@
11561247
"stylePreprocessorOptions": {
11571248
"includePaths": [
11581249
"apps/design-land/src/scss",
1159-
"dist/design/scss"
1250+
"dist/design/scss",
1251+
"dist/docs-components/src/scss"
11601252
]
11611253
},
11621254
"scripts": [],

‎apps/daffio/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"devDependencies": {
3232
"@daffodil/branding": "0.0.0-PLACEHOLDER",
3333
"@daffodil/core": "0.0.0-PLACEHOLDER",
34+
"@daffodil/docs-components": "0.0.0-PLACEHOLDER",
3435
"@daffodil/docs-utils": "0.0.0-PLACEHOLDER",
3536
"@daffodil/design": "0.0.0-PLACEHOLDER",
3637
"@daffodil/router": "0.0.0-PLACEHOLDER",

‎apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.module.ts

+4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { DaffArticleModule } from '@daffodil/design/article';
66
import { DaffButtonModule } from '@daffodil/design/button';
77
import { DaffContainerModule } from '@daffodil/design/container';
88
import { DaffSidebarModule } from '@daffodil/design/sidebar';
9+
import { provideDaffDocsExampleViewerContainerCustomElement } from '@daffodil/docs-components';
910

1011
import { DaffioDocViewerComponent } from './doc-viewer.component';
1112
import { DaffioDocsTableOfContentsModule } from '../table-of-contents/table-of-contents.module';
@@ -26,5 +27,8 @@ import { DaffioDocsTableOfContentsModule } from '../table-of-contents/table-of-c
2627
DaffButtonModule,
2728
FontAwesomeModule,
2829
],
30+
providers: [
31+
provideDaffDocsExampleViewerContainerCustomElement(),
32+
],
2933
})
3034
export class DaffioDocViewerModule { }

‎apps/daffio/src/app/docs/docs.module.ts

+8
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ import { RouterModule } from '@angular/router';
44

55
import { DaffContainerModule } from '@daffodil/design/container';
66
import { DaffHeroModule } from '@daffodil/design/hero';
7+
import {
8+
provideDaffDocsDesignExamples,
9+
provideDaffDocsLocation,
10+
} from '@daffodil/docs-components';
711

812
import { DaffioDocViewerModule } from './components/doc-viewer/doc-viewer.module';
913
import { DaffioDocsRoutingModule } from './docs-routing.module';
@@ -20,5 +24,9 @@ import { DaffioDocsPageComponent } from './pages/docs-page/docs-page.component';
2024
DaffHeroModule,
2125
DaffioDocsPageComponent,
2226
],
27+
providers: [
28+
provideDaffDocsDesignExamples(),
29+
provideDaffDocsLocation('/assets/daffio/docs/'),
30+
],
2331
})
2432
export class DaffioDocsModule {}

‎apps/daffio/src/scss/styles.scss

+5-3
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,15 @@
99
// @daffodil/branding
1010
@use 'daff-branding-theme' as branding;
1111

12+
@use 'docs-components-theme' as docs-components;
13+
1214
.daff-theme-light {
1315
@import 'highlight.js/scss/a11y-light.scss';
1416

1517
@include branding.daff-branding-theme(daff-theme.$theme);
1618
@include daff-theme.daff-theme(daff-theme.$theme);
1719
@include daffio-components.component-themes(daff-theme.$theme);
18-
20+
@include docs-components.daff-docs-components-themes(daff-theme.$theme);
1921
background: var(--daff-base-background);
2022
color: var(--daff-base-text);
2123
}
@@ -26,12 +28,12 @@
2628
@include branding.daff-branding-theme(daff-theme.$theme-dark);
2729
@include daff-theme.daff-theme(daff-theme.$theme-dark);
2830
@include daffio-components.component-themes(daff-theme.$theme-dark);
29-
31+
@include docs-components.daff-docs-components-themes(daff-theme.$theme-dark);
3032
background: var(--daff-base-background);
3133
color: var(--daff-base-text);
3234
}
3335

3436

3537
body {
3638
--daff-sidebar-side-fixed-top-shift: 64px;
37-
}
39+
}

‎apps/design-land/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@
3232
},
3333
"devDependencies": {
3434
"@daffodil/design": "0.0.0-PLACEHOLDER",
35+
"@daffodil/docs-components": "0.0.0-PLACEHOLDER",
36+
"@daffodil/docs-utils": "0.0.0-PLACEHOLDER",
3537
"@daffodil/tools-dgeni": "0.0.0-PLACEHOLDER"
3638
}
3739
}

‎apps/design-land/src/app/accordion/accordion.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@ <h3 id="setting-an-item-to-be-expanded-by-default">Setting an item to be expande
1515
<h2>Usage</h2>
1616

1717
<h3>Basic Accordion</h3>
18-
<design-land-example-viewer-container example="basic-accordion"></design-land-example-viewer-container>
18+
<daff-docs-example-viewer-container example="basic-accordion"></daff-docs-example-viewer-container>

‎apps/design-land/src/app/accordion/accordion.module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { NgModule } from '@angular/core';
33
import { RouterModule } from '@angular/router';
44

55
import { DaffArticleModule } from '@daffodil/design/article';
6+
import { DaffDocsExampleViewerContainer } from '@daffodil/docs-components';
67

78
import { DesignLandAccordionRoutingModule } from './accordion-routing.module';
89
import { DesignLandAccordionComponent } from './accordion.component';
9-
import { DesignLandExampleViewerModule } from '../core/code-preview/container/example-viewer.module';
1010

1111

1212
@NgModule({
@@ -18,7 +18,7 @@ import { DesignLandExampleViewerModule } from '../core/code-preview/container/ex
1818
RouterModule,
1919

2020
DesignLandAccordionRoutingModule,
21-
DesignLandExampleViewerModule,
21+
DaffDocsExampleViewerContainer,
2222
DaffArticleModule,
2323
],
2424
})

‎apps/design-land/src/app/app.component.ts

+2-72
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,8 @@
1-
import {
2-
Component,
3-
Injector,
4-
ComponentFactoryResolver,
5-
} from '@angular/core';
6-
7-
import { ACCORDION_EXAMPLES } from '@daffodil/design/accordion/examples';
8-
import { ARTICLE_EXAMPLES } from '@daffodil/design/article/examples';
9-
import { BUTTON_EXAMPLES } from '@daffodil/design/button/examples';
10-
import { CALLOUT_EXAMPLES } from '@daffodil/design/callout/examples';
11-
import { CARD_EXAMPLES } from '@daffodil/design/card/examples';
12-
import { CHECKBOX_EXAMPLES } from '@daffodil/design/checkbox/examples';
13-
import { CONTAINER_EXAMPLES } from '@daffodil/design/container/examples';
14-
import { HERO_EXAMPLES } from '@daffodil/design/hero/examples';
15-
import { IMAGE_EXAMPLES } from '@daffodil/design/image/examples';
16-
import { INPUT_EXAMPLES } from '@daffodil/design/input/examples';
17-
import { LIST_EXAMPLES } from '@daffodil/design/list/examples';
18-
import { LOADING_ICON_EXAMPLES } from '@daffodil/design/loading-icon/examples';
19-
import { MEDIA_GALLERY_EXAMPLES } from '@daffodil/design/media-gallery/examples';
20-
import { MENU_EXAMPLES } from '@daffodil/design/menu/examples';
21-
import { MODAL_EXAMPLES } from '@daffodil/design/modal/examples';
22-
import { NAVBAR_EXAMPLES } from '@daffodil/design/navbar/examples';
23-
import { NOTIFICATION_EXAMPLES } from '@daffodil/design/notification/examples';
24-
import { PAGINATOR_EXAMPLES } from '@daffodil/design/paginator/examples';
25-
import { PROGRESS_BAR_EXAMPLES } from '@daffodil/design/progress-bar/examples';
26-
import { QUANTITY_FIELD_EXAMPLES } from '@daffodil/design/quantity-field/examples';
27-
import { RADIO_EXAMPLES } from '@daffodil/design/radio/examples';
28-
import { SIDEBAR_EXAMPLES } from '@daffodil/design/sidebar/examples';
29-
import { TOAST_EXAMPLES } from '@daffodil/design/toast/examples';
30-
import { TREE_EXAMPLES } from '@daffodil/design/tree/examples';
31-
32-
import { createCustomElementFromExample } from './core/elements/create-element-from-example';
1+
import { Component } from '@angular/core';
332

343
@Component({
354
selector: 'design-land-app-root',
365
templateUrl: './app.component.html',
376
styleUrls: ['./app.component.scss'],
387
})
39-
export class DesignLandAppComponent {
40-
constructor(
41-
injector: Injector,
42-
private componentFactoryResolver: ComponentFactoryResolver,
43-
) {
44-
[
45-
...ARTICLE_EXAMPLES,
46-
...ACCORDION_EXAMPLES,
47-
...BUTTON_EXAMPLES,
48-
...RADIO_EXAMPLES,
49-
...CARD_EXAMPLES,
50-
...CALLOUT_EXAMPLES,
51-
...CHECKBOX_EXAMPLES,
52-
...CONTAINER_EXAMPLES,
53-
...HERO_EXAMPLES,
54-
...LOADING_ICON_EXAMPLES,
55-
...MEDIA_GALLERY_EXAMPLES,
56-
...MENU_EXAMPLES,
57-
...MODAL_EXAMPLES,
58-
...NAVBAR_EXAMPLES,
59-
...NOTIFICATION_EXAMPLES,
60-
...QUANTITY_FIELD_EXAMPLES,
61-
...LIST_EXAMPLES,
62-
...PAGINATOR_EXAMPLES,
63-
...PROGRESS_BAR_EXAMPLES,
64-
...IMAGE_EXAMPLES,
65-
...INPUT_EXAMPLES,
66-
...SIDEBAR_EXAMPLES,
67-
...TOAST_EXAMPLES,
68-
...TREE_EXAMPLES,
69-
].map((componentExample) => createCustomElementFromExample(componentExample, injector))
70-
.map((customElement) => {
71-
// Register the custom element with the browser.
72-
customElements.define(
73-
this.componentFactoryResolver.resolveComponentFactory(customElement.class).selector + '-example',
74-
customElement.element,
75-
);
76-
});
77-
}
78-
}
8+
export class DesignLandAppComponent {}

‎apps/design-land/src/app/app.module.ts

+6
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ import { DaffLinkSetModule } from '@daffodil/design/link-set';
1111
import { DaffNavbarModule } from '@daffodil/design/navbar';
1212
import { DaffSidebarModule } from '@daffodil/design/sidebar';
1313
import { DaffToastModule } from '@daffodil/design/toast';
14+
import {
15+
provideDaffDocsDesignExamples,
16+
provideDaffDocsLocation,
17+
} from '@daffodil/docs-components';
1418
import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch';
1519

1620
import { DesignLandAppRoutingModule } from './app-routing.module';
@@ -43,6 +47,8 @@ import { DesignLandTemplateModule } from './core/template/template.module';
4347
],
4448
providers: [
4549
DAFF_THEME_INITIALIZER,
50+
provideDaffDocsDesignExamples(),
51+
provideDaffDocsLocation('/assets/'),
4652
],
4753
})
4854
export class AppModule { }

0 commit comments

Comments
 (0)