feat: render design examples in daffio

angular.json

@@ -820,6 +820,93 @@
         }
       }
     },
+    "documentation": {
+      "root": "libs/documentation",
+      "sourceRoot": "libs/documentation",
+      "projectType": "library",
+      "prefix": "daffodil",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "tsConfig": "libs/documentation/tsconfig.lib.json",
+            "project": "libs/documentation/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "libs/documentation/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "libs/documentation/test.ts",
+            "codeCoverage": true,
+            "tsConfig": "libs/documentation/tsconfig.spec.json",
+            "karmaConfig": "libs/documentation/karma.conf.js",
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "libs/documentation/scss"
+              ]
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/documentation/**/*.ts",
+              "libs/documentation/**/*.html"
+            ]
+          }
+        }
+      }
+    },
+    "docs-components": {
+      "root": "libs/docs-components",
+      "sourceRoot": "libs/docs-components",
+      "projectType": "library",
+      "prefix": "daffodil",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "tsConfig": "libs/docs-components/tsconfig.lib.json",
+            "project": "libs/docs-components/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "libs/docs-components/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "libs/docs-components/test.ts",
+            "codeCoverage": true,
+            "tsConfig": "libs/docs-components/tsconfig.spec.json",
+            "karmaConfig": "libs/docs-components/karma.conf.js",
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "libs/design/scss",
+                "libs/docs-components/scss"
+              ]
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/docs-components/**/*.ts",
+              "libs/docs-components/**/*.html"
+            ]
+          }
+        }
+      }
+    },
     "daffio": {
       "root": "apps/daffio/",
       "sourceRoot": "apps/daffio/src",

apps/daffio/package.json

@@ -31,6 +31,7 @@
   "devDependencies": {
     "@daffodil/branding": "0.0.0-PLACEHOLDER",
     "@daffodil/core": "0.0.0-PLACEHOLDER",
+    "@daffodil/docs-components": "0.0.0-PLACEHOLDER",
     "@daffodil/docs-utils": "0.0.0-PLACEHOLDER",
     "@daffodil/design": "0.0.0-PLACEHOLDER",
     "@daffodil/router": "0.0.0-PLACEHOLDER",

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

@@ -6,6 +6,7 @@ import { DaffArticleModule } from '@daffodil/design/article';
 import { DaffButtonModule } from '@daffodil/design/button';
 import { DaffContainerModule } from '@daffodil/design/container';
 import { DaffSidebarModule } from '@daffodil/design/sidebar';
+import { provideDaffDocsExampleViewerContainerCustomElement } from '@daffodil/docs-components';
 
 import { DaffioDocViewerComponent } from './doc-viewer.component';
 import { DaffioDocsTableOfContentsModule } from '../table-of-contents/table-of-contents.module';
@@ -26,5 +27,8 @@ import { DaffioDocsTableOfContentsModule } from '../table-of-contents/table-of-c
     DaffButtonModule,
     FontAwesomeModule,
   ],
+  providers: [
+    provideDaffDocsExampleViewerContainerCustomElement(),
+  ],
 })
 export class DaffioDocViewerModule { }

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

@@ -4,6 +4,10 @@ import { RouterModule } from '@angular/router';
 
 import { DaffContainerModule } from '@daffodil/design/container';
 import { DaffHeroModule } from '@daffodil/design/hero';
+import {
+  provideDaffDocsDesignExamples,
+  provideDaffDocsLocation,
+} from '@daffodil/docs-components';
 
 import { DaffioDocViewerModule } from './components/doc-viewer/doc-viewer.module';
 import { DaffioDocsRoutingModule } from './docs-routing.module';
@@ -20,5 +24,9 @@ import { DaffioDocsPageComponent } from './pages/docs-page/docs-page.component';
     DaffHeroModule,
     DaffioDocsPageComponent,
   ],
+  providers: [
+    provideDaffDocsDesignExamples(),
+    provideDaffDocsLocation('/assets/daffio/docs/'),
+  ],
 })
 export class DaffioDocsModule {}

apps/design-land/package.json

@@ -32,6 +32,8 @@
   },
   "devDependencies": {
     "@daffodil/design": "0.0.0-PLACEHOLDER",
+    "@daffodil/docs-components": "0.0.0-PLACEHOLDER",
+    "@daffodil/docs-utils": "0.0.0-PLACEHOLDER",
     "@daffodil/tools-dgeni": "0.0.0-PLACEHOLDER"
   }
 }

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

@@ -15,4 +15,4 @@ <h3 id="setting-an-item-to-be-expanded-by-default">Setting an item to be expande
 <h2>Usage</h2>
 
 <h3>Basic Accordion</h3>
-<design-land-example-viewer-container example="basic-accordion"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="basic-accordion"></daff-docs-example-viewer-container>

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

@@ -3,10 +3,10 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { DaffArticleModule } from '@daffodil/design/article';
+import { DaffDocsExampleViewerContainer } from '@daffodil/docs-components';
 
 import { DesignLandAccordionRoutingModule } from './accordion-routing.module';
 import { DesignLandAccordionComponent } from './accordion.component';
-import { DesignLandExampleViewerModule } from '../core/code-preview/container/example-viewer.module';
 
 
 @NgModule({
@@ -18,7 +18,7 @@ import { DesignLandExampleViewerModule } from '../core/code-preview/container/ex
     RouterModule,
 
     DesignLandAccordionRoutingModule,
-    DesignLandExampleViewerModule,
+    DaffDocsExampleViewerContainer,
     DaffArticleModule,
   ],
 })

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

@@ -1,78 +1,8 @@
-import {
-  Component,
-  Injector,
-  ComponentFactoryResolver,
-} from '@angular/core';
-
-import { ACCORDION_EXAMPLES } from '@daffodil/design/accordion/examples';
-import { ARTICLE_EXAMPLES } from '@daffodil/design/article/examples';
-import { BUTTON_EXAMPLES } from '@daffodil/design/button/examples';
-import { CALLOUT_EXAMPLES } from '@daffodil/design/callout/examples';
-import { CARD_EXAMPLES } from '@daffodil/design/card/examples';
-import { CHECKBOX_EXAMPLES } from '@daffodil/design/checkbox/examples';
-import { CONTAINER_EXAMPLES } from '@daffodil/design/container/examples';
-import { HERO_EXAMPLES } from '@daffodil/design/hero/examples';
-import { IMAGE_EXAMPLES } from '@daffodil/design/image/examples';
-import { INPUT_EXAMPLES } from '@daffodil/design/input/examples';
-import { LIST_EXAMPLES } from '@daffodil/design/list/examples';
-import { LOADING_ICON_EXAMPLES } from '@daffodil/design/loading-icon/examples';
-import { MEDIA_GALLERY_EXAMPLES } from '@daffodil/design/media-gallery/examples';
-import { MENU_EXAMPLES } from '@daffodil/design/menu/examples';
-import { MODAL_EXAMPLES } from '@daffodil/design/modal/examples';
-import { NAVBAR_EXAMPLES } from '@daffodil/design/navbar/examples';
-import { NOTIFICATION_EXAMPLES } from '@daffodil/design/notification/examples';
-import { PAGINATOR_EXAMPLES } from '@daffodil/design/paginator/examples';
-import { PROGRESS_BAR_EXAMPLES } from '@daffodil/design/progress-bar/examples';
-import { QUANTITY_FIELD_EXAMPLES } from '@daffodil/design/quantity-field/examples';
-import { RADIO_EXAMPLES } from '@daffodil/design/radio/examples';
-import { SIDEBAR_EXAMPLES } from '@daffodil/design/sidebar/examples';
-import { TOAST_EXAMPLES } from '@daffodil/design/toast/examples';
-import { TREE_EXAMPLES } from '@daffodil/design/tree/examples';
-
-import { createCustomElementFromExample } from './core/elements/create-element-from-example';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'design-land-app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class DesignLandAppComponent {
-  constructor(
-    injector: Injector,
-    private componentFactoryResolver: ComponentFactoryResolver,
-  ) {
-    [
-      ...ARTICLE_EXAMPLES,
-      ...ACCORDION_EXAMPLES,
-      ...BUTTON_EXAMPLES,
-      ...RADIO_EXAMPLES,
-      ...CARD_EXAMPLES,
-      ...CALLOUT_EXAMPLES,
-      ...CHECKBOX_EXAMPLES,
-      ...CONTAINER_EXAMPLES,
-      ...HERO_EXAMPLES,
-      ...LOADING_ICON_EXAMPLES,
-      ...MEDIA_GALLERY_EXAMPLES,
-      ...MENU_EXAMPLES,
-      ...MODAL_EXAMPLES,
-      ...NAVBAR_EXAMPLES,
-      ...NOTIFICATION_EXAMPLES,
-      ...QUANTITY_FIELD_EXAMPLES,
-      ...LIST_EXAMPLES,
-      ...PAGINATOR_EXAMPLES,
-      ...PROGRESS_BAR_EXAMPLES,
-      ...IMAGE_EXAMPLES,
-      ...INPUT_EXAMPLES,
-      ...SIDEBAR_EXAMPLES,
-      ...TOAST_EXAMPLES,
-      ...TREE_EXAMPLES,
-    ].map((componentExample) => createCustomElementFromExample(componentExample, injector))
-      .map((customElement) => {
-        // Register the custom element with the browser.
-        customElements.define(
-          this.componentFactoryResolver.resolveComponentFactory(customElement.class).selector + '-example',
-          customElement.element,
-        );
-      });
-  }
-}
+export class DesignLandAppComponent {}

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

@@ -11,6 +11,10 @@ import { DaffLinkSetModule } from '@daffodil/design/link-set';
 import { DaffNavbarModule } from '@daffodil/design/navbar';
 import { DaffSidebarModule } from '@daffodil/design/sidebar';
 import { DaffToastModule } from '@daffodil/design/toast';
+import {
+  provideDaffDocsDesignExamples,
+  provideDaffDocsLocation,
+} from '@daffodil/docs-components';
 import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch';
 
 import { DesignLandAppRoutingModule } from './app-routing.module';
@@ -43,6 +47,8 @@ import { DesignLandTemplateModule } from './core/template/template.module';
   ],
   providers: [
     DAFF_THEME_INITIALIZER,
+    provideDaffDocsDesignExamples(),
+    provideDaffDocsLocation('/assets/'),
   ],
 })
 export class AppModule { }

apps/design-land/src/app/article/article.component.html

@@ -5,37 +5,37 @@ <h2>Overview</h2>
 <p>Article can be used on any content page that displays large blocks of text-driven information. It's meant to be used as a standalone element and should not be nested inside any other components that may change the background color from the anticipated one. In the event that you must nest an article inside another component, please ensure that you set the article's background color to the default body color.</p>
 
 <h2>Headings</h2>
-<design-land-example-viewer-container example="article-headings"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="article-headings"></daff-docs-example-viewer-container>
 
 <h2>Article Meta</h2>
 <p>Meta is used if there is metadata information about your article (i.e. author name, date, etc). Meta is a custom directive of article and is not a native element selector. To use it, add <code>daffArticleMeta</code> to a paragraph (<code>&lt;p&gt;</code>).</p>
-<design-land-example-viewer-container example="article-meta"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="article-meta"></daff-docs-example-viewer-container>
 
 <h2>Link</h2>
 <p>The link style in an article uses the default browser link style.</p>
-<design-land-example-viewer-container example="article-link"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="article-link"></daff-docs-example-viewer-container>
 
 <h2>Table</h2>
-<design-land-example-viewer-container example="article-table"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="article-table"></daff-docs-example-viewer-container>
 
 <h2>Lists</h2>
 <h3>Unordered List</h3>
-<design-land-example-viewer-container example="article-ul"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="article-ul"></daff-docs-example-viewer-container>
 
 <h3>Ordered List</h3>
-<design-land-example-viewer-container example="article-ol"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="article-ol"></daff-docs-example-viewer-container>
 
 <h2>Code</h2>
 <p>These are styles for inline and multiline blocks of code.</p>
 
 <h3>Inline code</h3>
-<design-land-example-viewer-container example="article-code-inline"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="article-code-inline"></daff-docs-example-viewer-container>
 
 <h3>Code blocks</h3>
-<design-land-example-viewer-container example="article-code-block"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="article-code-block"></daff-docs-example-viewer-container>
 
 <h2>Horizontal Rules</h2>
-<design-land-example-viewer-container example="article-hr"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="article-hr"></daff-docs-example-viewer-container>
 
 <h2>Blockquote</h2>
-<design-land-example-viewer-container example="article-blockquote"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="article-blockquote"></daff-docs-example-viewer-container>

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

@@ -2,10 +2,10 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { DaffArticleModule } from '@daffodil/design/article';
+import { DaffDocsExampleViewerContainer } from '@daffodil/docs-components';
 
 import { DesignLandArticleRoutingModule } from './article-routing.module';
 import { DesignLandArticleComponent } from './article.component';
-import { DesignLandExampleViewerModule } from '../core/code-preview/container/example-viewer.module';
 
 @NgModule({
   declarations: [
@@ -15,7 +15,7 @@ import { DesignLandExampleViewerModule } from '../core/code-preview/container/ex
     CommonModule,
     DaffArticleModule,
     DesignLandArticleRoutingModule,
-    DesignLandExampleViewerModule,
+    DaffDocsExampleViewerContainer,
   ],
 })
 export class DesignLandArticleModule {

apps/design-land/src/app/button/button.component.html

@@ -16,28 +16,28 @@ <h2>Types</h2>
 <p><code>daff-stroked-button</code> — Rectangular outlined button with no background color</p>
 
 <h3>Basic Button</h3>
-<design-land-example-viewer-container example="basic-button"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="basic-button"></daff-docs-example-viewer-container>
 
 <h3>Flat Button</h3>
-<design-land-example-viewer-container example="flat-button"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="flat-button"></daff-docs-example-viewer-container>
 
 <h3>Stroked Button</h3>
-<design-land-example-viewer-container example="stroked-button"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="stroked-button"></daff-docs-example-viewer-container>
 
 <h3>Raised Button</h3>
-<design-land-example-viewer-container example="raised-button"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="raised-button"></daff-docs-example-viewer-container>
 
 <h3>Icon Button</h3>
-<design-land-example-viewer-container example="icon-button"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="icon-button"></daff-docs-example-viewer-container>
 
 <h3>Underline Button</h3>
-<design-land-example-viewer-container example="underline-button"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="underline-button"></daff-docs-example-viewer-container>
 
 <h3>Sizes</h3>
 <p>The size of a button can be updated by using the <code>size</code> property. The size of all the button variants will default to <code>md</code> if no size is defined. This can be updated to the three sizes buttons support.</p>
 <p>Supported Sizes: <code>sm | md | lg</code></p>
 
-<design-land-example-viewer-container example="sizeable-button"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="sizeable-button"></daff-docs-example-viewer-container>
 
 <h3>Theming</h3>
 <p>The default color of a button is light gray, but it can be updated to one of the supported colors by using the <code>color</code> property.</p>
@@ -49,7 +49,7 @@ <h3>Status Indicators</h3>
 
 <p>Supported statuses: <code>warn | danger | success</code></p>
 
-<design-land-example-viewer-container example="statusable-button"></design-land-example-viewer-container>
+<daff-docs-example-viewer-container example="statusable-button"></daff-docs-example-viewer-container>
 
 <h3>Accessibility</h3>
 <p>Daffodil uses native <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> HTML elements to ensure an accessible experience by default. The <code>&lt;button&gt;</code> element should be used when a clickable action is performed within the same page. The <code>&lt;a&gt;</code> element should be used to navigate users to a new page or to a different target on the same page.</p>