Chore/design system poc

.github/workflows/ci.yml

@@ -23,6 +23,12 @@ jobs:
     - name: Lint
       run: |
         yarn lint
+    - name: Test
+      run: |
+        yarn test
     - name: Build
       run: |
-        yarn clean && yarn build
+        yarn clean && yarn build
+    - name: Storybook
+      run: |
+        yarn storybook:build

.github/workflows/main.yml

@@ -26,6 +26,9 @@ jobs:
     - name: Lint
       run: |
         yarn lint
+    - name: Test
+      run: |
+        yarn test
     - name: Build
       run: |
         yarn clean && yarn build

.gitignore

@@ -1,4 +1,6 @@
 *.log
 .greenwood/
 node_modules/
-public/
+public/
+reports/
+storybook-static/

.storybook/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)",
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,12 @@
+// import CSS custom properties
+import '../src/theme.css';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

README.md

@@ -35,7 +35,9 @@ Then run `yarn install` to install the project's dependencies.
 After installing the above, you can run the following commands:
 
 - `yarn lint` - Lint all files in the project (JS , CSS, naming)
-- `yarn start` - starts the locaol development server
-- `yarn build` - generate a procuction build
+- `yarn start` - Starts **Greenwood**'s local development server
+- `yarn build` - Runs **Greenwood** to generate a production build
+- `yarn storybook:deveop` - Runs [**Storybook**](https://storybook.js.org/) in development mode
+- `yarn test:tdd` - Runs unit tests in `watch` mode using [**@web/test-runner**](https://modern-web.dev/docs/test-runner/overview/)
 
-> _See other [supported commands](https://www.greenwoodjs.io/docs/#cli) in Greenwood's CLI documentation._
+> _See `package.json#scripts` for a full list of available commands._

package.json

@@ -19,20 +19,38 @@
   "author": "Owen Buckley <[email protected]>",
   "license": "Apache-2.0",
   "scripts": {
-    "clean": "rimraf .greenwood/ public/",
-    "lint": "eslint \"*.js\" \"./src/**/*.js\" && ls-lint && stylelint \"./src/**/*.css\"",
+    "clean": "rimraf .greenwood/ public/ reports/ storybook-static/",
+    "lint": "eslint \"*.js\" \"./src/**/*.js\" && ls-lint && stylelint \"./src/**/*.css\" \"./src/**/*.js\"",
     "develop": "greenwood develop",
     "build": "greenwood build",
     "start": "yarn develop",
-    "serve": "greenwood serve"
+    "serve": "yarn clean && greenwood serve",
+    "storybook:develop": "start-storybook -p 6006",
+    "storybook:build": "build-storybook",
+    "storybook:serve": "yarn clean && yarn storybook:build && npx http-server ./storybook-static",
+    "test": "wtr",
+    "test:tdd": "yarn test --watch"
+  },
+  "dependencies": {
+    "lit": "^2.0.0-rc.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@esm-bundle/chai": "^4.3.4",
     "@greenwood/cli": "^0.13.0",
     "@ls-lint/ls-lint": "^1.9.2",
+    "@storybook/addon-actions": "^6.3.2",
+    "@storybook/addon-essentials": "^6.3.2",
+    "@storybook/addon-links": "^6.3.2",
+    "@storybook/web-components": "^6.3.2",
+    "@web/test-runner": "^0.13.13",
+    "@web/test-runner-junit-reporter": "^0.4.4",
+    "@web/test-runner-puppeteer": "^0.10.0",
+    "babel-loader": "^8.2.2",
     "eslint": "^6.8.0",
     "rimraf": "^2.6.3",
     "stylelint": "^13.8.0",
     "stylelint-a11y": "^1.2.3",
     "stylelint-config-standard": "^20.0.0"
   }
-}
+}

src/components/footer/footer.js

@@ -0,0 +1,30 @@
+import { css, html, LitElement } from 'lit';
+
+class FooterComponent extends LitElement {
+  constructor() {
+    super();
+
+    this.startingYear = 2007;
+    this.currentYear = new Date().getFullYear(); 
+  }
+
+  static get styles() {
+    return css`
+      h5 {
+        text-decoration: underline;
+        text-align: center;
+      }`;
+  }
+
+  render() {
+    const { currentYear, startingYear } = this;
+
+    return html`
+      <footer>
+        <h5 class="copyright-text">&copy; ${startingYear} - ${currentYear} Analog Studios</h5>
+      </footer>
+    `;
+  }
+}
+
+customElements.define('app-footer', FooterComponent);

src/components/footer/footer.spec.js

@@ -0,0 +1,40 @@
+import { expect } from '@esm-bundle/chai';
+import './footer.js';
+
+describe('Footer Component', () => {
+  let footer;
+
+  beforeEach(async () => {
+    footer = document.createElement('app-footer');
+
+    document.body.appendChild(footer);
+
+    await footer.updateComplete;
+  });
+
+  afterEach(() => {
+    footer.remove();
+    footer = null;
+  });
+
+  describe('Default Behavior', () => {
+    it('should not be null', () => {
+      expect(footer).not.equal('<app-footer></app-footer>');
+      expect(footer.shadowRoot.querySelectorAll('footer').length).equal(1);
+    });
+
+    it('should have expected copyright elements', () => {
+      const elements = footer.shadowRoot.querySelectorAll('h5');
+
+      expect(elements.length).equal(1);
+    });
+
+    it('should have expected copyright text', () => {
+      const text = footer.shadowRoot.querySelector('h5').textContent;
+      const currentYear = new Date().getFullYear();
+
+      expect(text).equal(`© 2007 - ${currentYear} Analog Studios`);
+    });
+  });
+
+});

src/components/footer/footer.stories.js

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+import './footer.js';
+
+export default {
+  title: 'Components/Footer'
+};
+
+export const Primary = () => html`
+  <app-footer></app-footer>
+`;

src/components/header/header.js

@@ -0,0 +1,25 @@
+import { css, html, LitElement } from 'lit';
+
+class HeaderComponent extends LitElement {
+  constructor() {
+    super();
+  }
+
+  static get styles() {
+    return css`
+      h1 {
+        color: var(--primary);
+        text-align: center;
+      }`;
+  }
+
+  render() {
+    return html`
+      <header>
+        <h1>Welcome to Analog Studios!</h1>
+      </header>
+    `;
+  }
+}
+
+customElements.define('app-header', HeaderComponent);

src/components/header/header.spec.js

@@ -0,0 +1,39 @@
+import { expect } from '@esm-bundle/chai';
+import './header.js';
+
+describe('Header Component', () => {
+  let header;
+
+  beforeEach(async () => {
+    header = document.createElement('app-header');
+
+    document.body.appendChild(header);
+
+    await header.updateComplete;
+  });
+
+  afterEach(() => {
+    header.remove();
+    header = null;
+  });
+
+  describe('Default Behavior', () => {
+    it('should not be null', () => {
+      expect(header).not.equal('<app-header></app-header>');
+      expect(header.shadowRoot.querySelectorAll('header').length).equal(1);
+    });
+
+    it('should have expected heading', () => {
+      const elements = header.shadowRoot.querySelectorAll('h1');
+
+      expect(elements.length).equal(1);
+    });
+
+    it('should have expected greeting text', () => {
+      const text = header.shadowRoot.querySelector('h1').textContent;
+
+      expect(text).equal('Welcome to Analog Studios!');
+    });
+  });
+
+});

src/components/header/header.stories.js

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+import './header.js';
+
+export default {
+  title: 'Components/Header'
+};
+
+export const Primary = () => html`
+  <app-header></app-header>
+`;

src/index.html

@@ -1,7 +1,7 @@
 <html>
 
   <head>
-    <title>Analog Studios</title>
+    <title>Analog Studios - Music and Recordings</title>
 
     <meta name="description" content="A project for helping connect open source with the open source community." />
     <meta property="og:title" content="Analog Studios" />
@@ -12,12 +12,28 @@
     <link rel="shortcut icon" href="/assets/favicon-bg-fill.png"/>
     <link rel="icon" href="/assets/favicon-bg-fill.png"/> -->
 
-    <script type="module" src="./index.js"></script>
+    <script type="module" src="./components/footer/footer.js"></script>
+    <script type="module" src="./components/header/header.js"></script>
+
+    <link rel="stylesheet" href="./theme.css"></script>
     <link rel="stylesheet" href="./styles.css"></script>
   </head>
 
   <body>
-    <h1>Hello World!</h1>
+
+      <section>
+        <app-header></app-header>
+      </section>
+
+      <section>
+        <main>
+          <h2>Coming Soon!</h2>
+        </main>
+      </section>
+
+      <section>
+        <app-footer></app-footer>
+      </section>
+
   </body>
-
 </html>

src/styles.css

@@ -1,3 +1,9 @@
 * {
-  color: blue;
+  background-color: var(--secondary);
+}
+
+main {
+  margin: 0 auto;
+  width: 80%;
+  text-align: center;
 }

src/theme.css

@@ -0,0 +1,4 @@
+:root {
+  --primary: gray;
+  --secondary: #a48f65;
+}