check

.storybook/main.ts

@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/core-common';
+
+export const rootMain: StorybookConfig = {
+  stories: [],
+  addons: ['@storybook/addon-essentials'],
+  // webpackFinal: async (config, { configType }) => {
+  //   // Make whatever fine-grained changes you need that should apply to all storybook configs
+
+  //   // Return the altered config
+  //   return config;
+  // },
+};

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#660a74",
+    "activityBar.background": "#660a74",
+    "activityBar.foreground": "#e7e7e7",
+    "activityBar.inactiveForeground": "#e7e7e799",
+    "activityBarBadge.background": "#93810d",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "commandCenter.border": "#e7e7e799",
+    "sash.hoverBorder": "#660a74",
+    "statusBar.background": "#3d0645",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#660a74",
+    "statusBarItem.remoteBackground": "#3d0645",
+    "statusBarItem.remoteForeground": "#e7e7e7",
+    "titleBar.activeBackground": "#3d0645",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#3d064599",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  },
+  "peacock.color": "#3d0645"
+}

README.md

@@ -4,18 +4,25 @@
 
 ✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨
 
-## Development server
-
-Run `nx serve master-wc-app` for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
-
-## Understand this workspace
-
-Run `nx graph` to see a diagram of the dependencies of the projects.
-
-## Remote caching
-
-Run `npx nx connect-to-nx-cloud` to enable [remote caching](https://nx.app) and make CI faster.
-
-## Further help
-
-Visit the [Nx Documentation](https://nx.dev) to learn more.
+## Setup
+```
+npx create-nx-workspace --preset=web-components
+```
+- Add the Storybook plugin
+  ```
+  yarn add --dev @nrwl/storybook
+  ```
+- Generating Storybook Configuration
+  ```
+  nx g @nrwl/storybook:configuration --tsConfiguration=true
+  ```
+
+## Run App
+```
+npm start
+```
+
+## Run Storybook
+```
+nx storybook
+```

apps/master-wc-app/.storybook/main.ts

@@ -0,0 +1,16 @@
+import { rootMain } from '../../../.storybook/main';
+
+import type { StorybookConfig, Options } from '@storybook/core-common';
+
+const config: StorybookConfig = {
+  ...rootMain,
+  core: { ...rootMain.core, builder: '@storybook/builder-vite' },
+  stories: [
+    ...rootMain.stories,
+    '../src/app/**/*.stories.mdx',
+    '../src/app/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [...(rootMain.addons || [])],
+};
+
+module.exports = config;

apps/master-wc-app/.storybook/preview.ts

@@ -0,0 +1 @@
+import './../src/styles.css';

apps/master-wc-app/.storybook/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true
+  },
+
+  "exclude": ["../**/*.spec.ts"],
+  "include": [
+    "../src/**/*.stories.ts",
+    "../src/**/*.stories.js",
+    "../src/**/*.stories.jsx",
+    "../src/**/*.stories.tsx",
+    "../src/**/*.stories.mdx",
+    "*.ts",
+    "*.js"
+  ]
+}

apps/master-wc-app/project.json

@@ -47,6 +47,37 @@
       "options": {
         "lintFilePatterns": ["apps/master-wc-app/**/*.ts"]
       }
+    },
+    "storybook": {
+      "executor": "@nrwl/storybook:storybook",
+      "options": {
+        "uiFramework": "@storybook/web-components",
+        "port": 4400,
+        "config": {
+          "configFolder": "apps/master-wc-app/.storybook"
+        }
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nrwl/storybook:build",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "uiFramework": "@storybook/web-components",
+        "outputPath": "dist/storybook/master-wc-app",
+        "config": {
+          "configFolder": "apps/master-wc-app/.storybook"
+        }
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
     }
   }
 }

apps/master-wc-app/src/app/stories/card-layout/CardLayout.stories.js

@@ -0,0 +1,52 @@
+import './CardLayout'
+
+export default {
+  title: 'Components/CardLayout',
+  // ? Create controls for the story
+  argTypes: {
+    image: {
+      control: { type: 'text' }, // ? make storybook display text field in the Controls section
+    },
+    headline: {
+      control: { type: 'text' },
+    },
+    content: {
+      control: { type: 'text' },
+    },
+    link: {
+      control: { type: 'text' },
+    },
+  }
+}
+
+// const image = "http://unsplash.it/g/500/500?random&blur&gravity=center"
+const image = "https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3569&q=80"
+
+/* const PrimaryTemplate = () => `
+<wc-card-layout>
+  <img slot="image" src="${image}" alt="Image" />
+  <h4 slot="header">Food</h4>
+  <p slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  <a href="#" slot="footer">Read</a>
+</wc-card-layout>`; */
+
+
+
+const PrimaryTemplate = ({ images, headline, content, link }) => `
+<wc-card-layout>
+  <img slot="header" src="${image}">
+  <h4 slot="header">${headline}</h4>
+  <p slot="content">${content}</p>
+  <a href="#" slot="footer">${link}</a>
+</wc-card-layout>;
+`
+
+export const LayoutCard = PrimaryTemplate.bind({});
+
+// ? Set default values for control
+LayoutCard.args = {
+  images: image,
+  headline: 'Food',
+  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  link: 'Read'
+}

apps/master-wc-app/src/app/stories/card-layout/CardLayout.ts

@@ -0,0 +1,21 @@
+export class CardLayoutComponent extends HTMLElement {
+  constructor() {
+    super()
+    const shadowRoot = this.attachShadow({ mode: 'open' })
+    const template = document.createElement('template')
+    template.innerHTML = `
+      <header>
+        <slot name="header"></slot>
+      </header>
+      <section>
+        <slot name="content"></slot>
+      </section>
+      <footer>
+        <slot name="footer"></slot>
+      </footer>
+    `
+    shadowRoot.appendChild(template.content.cloneNode(true))
+  }
+}
+
+customElements.define('wc-card-layout', CardLayoutComponent)

apps/master-wc-app/src/app/stories/card/Card.stories.js

@@ -0,0 +1,8 @@
+import { CardComponent } from './Card';
+
+export default {
+  title: 'Components/Card',// ? displayed in the Storybook sidebar
+}
+
+const PrimaryTemplate = () => `<wc-card></wc-card>`;
+export const ImageCard = PrimaryTemplate.bind({});

apps/master-wc-app/src/app/stories/card/Card.ts

@@ -0,0 +1,22 @@
+//NOTE - Autonomous Custom Element
+
+export class CardComponent extends HTMLElement {
+  constructor() {
+    super(); // ? establish the proper prototype chain
+
+    // ? instantiate the shadow DOM
+    // ? attachShadow() open will returns a ShadowRoot object
+    // ? allowing access to the shadow DOM via JavaScript
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+
+    // ? HTML template = Reuseable DOM tree that are not parsed until they are instantiated.
+    const template = document.createElement('template');
+    template.innerHTML = `
+      <span>Hello world</span>
+    `
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+
+// ? Register the custom element with the CustomElementRegistry
+customElements.define('wc-card', CardComponent); // ! kebab-case with at least one dash