edu-webcomponents 1.7.0

package/.editorconfig

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

package/.github/workflows/deploy-storybook-build-to-github-pages.yaml

@@ -0,0 +1,28 @@
+name: Build and Publish Storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - 'main'
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+
+      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
+        with:
+          install_command: npm install
+          build_command: npm run build-storybook
+          path: storybook-static
+          checkout: false

package/.github/workflows/publish-packages-to-npm-registry.yaml

@@ -0,0 +1,17 @@
+name: Publish Package to npmjs
+on:
+  release:
+    types: [published]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/release-packages-to-github.yaml

@@ -0,0 +1,19 @@
+on: 
+  push:
+    branches:
+      - main
+      
+jobs:
+  release-on-merge:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    env:
+      GITHUB_TOKEN: ${{ secrets.RELEASE }}
+    steps:
+      - name: release
+        uses: dexwritescode/release-on-merge-action@v1
+        with:
+          version-increment-strategy: minor
+          initial-version: '1.6.0'
+          tag-prefix: v

package/.storybook/main.js

@@ -0,0 +1,15 @@
+/** @type { import('@storybook/web-components-webpack5').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+  ],
+  framework: {
+    name: '@storybook/web-components-webpack5',
+    options: {},
+  },
+};
+export default config;

package/.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/web-components').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Change Log
+
+## 1.0.0 - 2024-05-25
+- (Initial commit) run npm init @open-wc and select these options: Scaffold a new project, scaffold a Web Component, add Linting (eslint & prettier) and Testing (web-test-runner), do not use typescript, use edu-webcomponents as tag name
+
+## 1.1.0 - 2024-05-26
+- Setup Husky
+
+## 1.2.0 - 2024-05-27
+- Setup the repository to be a library of web components
+
+## 1.3.0 - 2024-05-28
+- Setup Storybook
+
+## 1.4.0 - 2024-05-30
+- Setup GitHub Actions to publish Storybook built artifacts in GitHub Pages
+
+## 1.5.0 - 2024-05-30
+- Add docs to enable the deployment of GitHub Actions artifacts into GitHub Pages
+
+## 1.6.0 - 2024-06-01
+- Setup GitHub Actions to tag and release after merge into main
+
+## 1.7.0 - 2024-06-02
+- Setup GitHub Actions to publish packages in npm registry

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 edu-webcomponents
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,62 @@
+# Edu web components library
+
+This web components library follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i edu-webcomponents
+```
+
+## Usage
+
+```html
+<script type="module">
+  import 'edu-webcomponents/index.js';
+</script>
+
+<webcomponent-tagname></webcomponent-tagname>
+```
+
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Testing with Web Test Runner
+
+To execute a single test run:
+
+```bash
+npm run test
+```
+
+To run the tests in interactive watch mode run:
+
+```bash
+npm run test:watch
+```
+
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/demo/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <style>
+    body {
+      background: #fafafa;
+    }
+  </style>
+</head>
+<body>
+  <div id="demo"></div>
+
+  <script type="module">
+    import { html, render } from 'lit';
+    import '../index.js';
+
+    const textButton = 'This is a button';
+    render(
+      html`
+        <h1>Edu web components library</h1>
+        <edu-button .text=${textButton}>
+        </edu-button>
+      `,
+      document.querySelector('#demo')
+    );
+  </script>
+</body>
+</html>

package/docs/deploy-storybook-build-to-github-pages.md

@@ -0,0 +1,4 @@
+# Deploy Storybook build to GitHub Pages by using GitHub Actions
+- Select "GitHub Actions" option as source below "Build and deployment" in your repository's Settings (see Pages in menu)
+- Use this workflow: https://storybook.js.org/docs/sharing/publish-storybook#github-pages
+- After that, deployment should work when running the ad hoc job

package/docs/husky-docs.md

@@ -0,0 +1,12 @@
+# Husky docs
+
+## Setup
+
+### Required
+- Node.js package: https://www.npmjs.com/package/husky
+- Version: 9.0.11
+
+### How to
+- Documentation followed: https://github.com/typicode/husky/blob/main/docs/get-started.md
+- Run this command to setup: npx husky init
+- Delete content in .husky/pre-commit and write: npm run format

package/docs/publish-packages-to-npm-registry.md

@@ -0,0 +1,5 @@
+# Publish packages to npm registry by using GitHub Actions
+- Have an account in npm.com and create a PAT with write permissions
+- Add PAT created to GitHub secrets
+- Use workflow from [here](https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages#publishing-packages-to-the-npm-registry)
+

package/docs/release-packages-to-github.md

@@ -0,0 +1,4 @@
+# Release and tag to GitHub by using GitHub Actions
+Use workflow from [here](https://github.com/marketplace/actions/release-on-merge-action) and:
+- Add corresponding inputs
+- Create the needed token and add it to GitHub secrets

package/index.js

@@ -0,0 +1 @@
+export { EduButton } from './src/EduButton.js';

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "edu-webcomponents",
+  "description": "Webcomponent edu-webcomponents following open-wc recommendations",
+  "license": "MIT",
+  "author": "edu-webcomponents",
+  "version": "1.7.0",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "web-dev-server",
+    "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.js\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore",
+    "test": "web-test-runner --coverage",
+    "test:watch": "web-test-runner --watch",
+    "prepare": "husky",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "lit": "^2.0.2"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.4.0",
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@open-wc/eslint-config": "^9.2.1",
+    "@open-wc/testing": "^3.1.6",
+    "@storybook/addon-essentials": "^8.1.4",
+    "@storybook/addon-links": "^8.1.4",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/blocks": "^8.1.4",
+    "@storybook/test": "^8.1.4",
+    "@storybook/web-components": "^8.1.4",
+    "@storybook/web-components-webpack5": "^8.1.4",
+    "@web/dev-server": "^0.1.34",
+    "@web/test-runner": "^0.14.0",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "storybook": "^8.1.4"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "extends": [
+      "@open-wc",
+      "prettier",
+      "plugin:storybook/recommended"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  }
+}

package/src/EduButton.js

@@ -0,0 +1,24 @@
+import { html, css, LitElement } from 'lit';
+
+export class EduButton extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  static properties = {
+    text: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.text = 'Default text';
+  }
+
+  render() {
+    return html` <button>${this.text}</button> `;
+  }
+}
+
+window.customElements.define('edu-button', EduButton);

package/src/stories/EduButton.stories.js

@@ -0,0 +1,28 @@
+import { html } from 'lit';
+import '../EduButton.js';
+
+export default {
+  title: 'Edu web components/EduButton',
+  tags: ['autodocs'],
+  render: ({ text }) => html`<edu-button .text=${text}></edu-button>`,
+  argTypes: {
+    text: {
+      control: 'text',
+      description: 'Overwritten button text',
+      name: 'text',
+    },
+  },
+  args: {
+    text: 'Default text',
+  },
+};
+
+export const DefaultButton = {
+  args: {},
+};
+
+export const ButtonWithTextChanged = {
+  args: {
+    text: 'Custom text',
+  },
+};

package/test/EduButton.test.js

@@ -0,0 +1,28 @@
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+
+import '../src/EduButton.js';
+
+const textDefault = 'Default text';
+
+const textOther = 'bla bla';
+
+describe('EduButton', () => {
+  it(`has a default text ${textDefault}`, async () => {
+    const el = await fixture(html`<edu-button></edu-button>`);
+
+    expect(el.text).to.equal(textDefault);
+  });
+
+  it('can override the text via attribute', async () => {
+    const el = await fixture(html`<edu-button text=${textOther}></edu-button>`);
+
+    expect(el.text).to.equal(textOther);
+  });
+
+  it('passes the a11y audit', async () => {
+    const el = await fixture(html`<edu-button></edu-button>`);
+
+    await expect(el).shadowDom.to.be.accessible();
+  });
+});

package/web-dev-server.config.mjs

@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.mjs

@@ -0,0 +1,41 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});