edu-webcomponents 1.11.0 → 1.14.0

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

@@ -1,28 +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
+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

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

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

@@ -1,19 +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
+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/.ncurc.js

@@ -1,17 +1,17 @@
-/** Upgrade major version zero to the next minor version, and everything else to latest.
-  @param dependencyName The name of the dependency.
-  @param parsedVersion A parsed Semver object of the upgraded version.
-    (See: https://git.coolaj86.com/coolaj86/semver-utils.js#semverutils-parse-semverstring)
-  @returns One of the valid target values (specified in the table above).
-*/
-module.exports = {
-  target: (
-    dependencyName,
-    [{ semver, version, operator, major, minor, patch, release, build }],
-  ) => {
-    if (dependencyName === 'lit') {
-      return 'minor';
-    }
-    return 'latest';
-  },
-};
+/** Upgrade major version zero to the next minor version, and everything else to latest.
+  @param dependencyName The name of the dependency.
+  @param parsedVersion A parsed Semver object of the upgraded version.
+    (See: https://git.coolaj86.com/coolaj86/semver-utils.js#semverutils-parse-semverstring)
+  @returns One of the valid target values (specified in the table above).
+*/
+module.exports = {
+  target: (
+    dependencyName,
+    [{ semver, version, operator, major, minor, patch, release, build }],
+  ) => {
+    if (dependencyName === 'lit') {
+      return 'minor';
+    }
+    return 'latest';
+  },
+};

package/CHANGELOG.md

@@ -1,37 +1,46 @@
-# 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
-
-## 1.8.0 - 2024-06-15
-- Setup [npm-check-updates](https://www.npmjs.com/package/npm-check-updates) to manage updates of dependencies of package.json
-
-## 1.9.0 - 2024-06-16
-- Update dependencies
-
-## 1.10.0 - 2024-06-17
-- Add keywords to the repository
-
-## 1.11.0 - 2024-06-19
-- Add provenance to packages in npm registry
+# 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
+
+## 1.8.0 - 2024-06-15
+- Setup [npm-check-updates](https://www.npmjs.com/package/npm-check-updates) to manage updates of dependencies of package.json
+
+## 1.9.0 - 2024-06-16
+- Update dependencies
+
+## 1.10.0 - 2024-06-17
+- Add keywords to the repository
+
+## 1.11.0 - 2024-06-19
+- Add provenance to packages in npm registry
+
+## 1.12.0 - 2024-06-20
+- Update dependencies
+
+## 1.13.0 - 2024-06-20
+- Fix provenance when publishing packages to npm registry
+
+## 1.14.0 - 2024-06-21
+- Update docs of publishing packages to npm registry with provenance

package/README.md

@@ -1,62 +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`
+# 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

@@ -1,29 +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>
+<!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-docs.md

@@ -1,4 +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
+# 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

@@ -1,12 +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
+# 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/npm-check-updates-docs.md

@@ -1,11 +1,11 @@
-# npm-check-updates
-npm-check-updates is to manage updates of dependencies of package.json.
-
-Follow docs in npm registry to install and use: [npm-check-updates](https://www.npmjs.com/package/npm-check-updates).
-
-Useful commands:
-- check: ncu
-- check and upgrade: ncu -u
-
-Config file .ncurc.js:
+# npm-check-updates
+npm-check-updates is to manage updates of dependencies of package.json.
+
+Follow docs in npm registry to install and use: [npm-check-updates](https://www.npmjs.com/package/npm-check-updates).
+
+Useful commands:
+- check: ncu
+- check and upgrade: ncu -u
+
+Config file .ncurc.js:
 - Hook into npm-check-updates commands to manage, e.g. filtering.

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

@@ -1,5 +1,46 @@
-# 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)
-
+# 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)
+
+## Provenance
+
+### What is is?
+
+You can generate provenance statements for the packages you publish. This allows you to publicly establish where a package was built and who published a package, which can increase supply-chain security for your packages.
+
+More info: [https://docs.npmjs.com/generating-provenance-statements](https://docs.npmjs.com/generating-provenance-statements).
+
+### How to
+Add permissions and provenance flag to the workflow job that publishes packages to npm registry, as you can see here:
+```
+name: Publish Package to npmjs
+on:
+  release:
+    types: [published]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm install -g npm
+      - run: npm ci
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+```
+
+Add repository object with type and url properties to the package.json, as you can see here:
+```
+ "repository": {
+    "type": "git",
+    "url": "https://github.com/eduardocruzpalacios/edu-webcomponents"
+  },
+```

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

@@ -1,4 +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
+# 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/package.json

@@ -1,69 +1,73 @@
-{
-  "name": "edu-webcomponents",
-  "description": "Webcomponent edu-webcomponents following open-wc recommendations",
-    "keywords": [
-      "web components library",
-      "web components catalog",
-      "webcomponents library",
-      "webcomponents catalog",
-      "web components",
-      "webcomponents"
-    ],
-  "license": "MIT",
-  "author": "edu-webcomponents",
-  "version": "1.11.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.8.0"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.5.0",
-    "@custom-elements-manifest/analyzer": "^0.10.2",
-    "@open-wc/eslint-config": "^9.2.2",
-    "@open-wc/testing": "^3.2.2",
-    "@storybook/addon-essentials": "^8.1.9",
-    "@storybook/addon-links": "^8.1.9",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.3",
-    "@storybook/blocks": "^8.1.9",
-    "@storybook/test": "^8.1.9",
-    "@storybook/web-components": "^8.1.9",
-    "@storybook/web-components-webpack5": "^8.1.9",
-    "@web/dev-server": "^0.4.5",
-    "@web/test-runner": "^0.18.2",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.8.8",
-    "storybook": "^8.1.9"
-  },
-  "customElements": "custom-elements.json",
-  "eslintConfig": {
-    "extends": [
-      "@open-wc",
-      "prettier",
-      "plugin:storybook/recommended"
-    ]
-  },
-  "prettier": {
-    "singleQuote": true,
-    "arrowParens": "avoid"
-  }
-}
+{
+  "name": "edu-webcomponents",
+  "description": "Webcomponent edu-webcomponents following open-wc recommendations",
+  "keywords": [
+    "web components library",
+    "web components catalog",
+    "webcomponents library",
+    "webcomponents catalog",
+    "web components",
+    "webcomponents"
+  ],
+  "license": "MIT",
+  "author": "edu-webcomponents",
+  "version": "1.14.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eduardocruzpalacios/edu-webcomponents"
+  },
+  "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.8.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",
+    "@custom-elements-manifest/analyzer": "^0.10.2",
+    "@open-wc/eslint-config": "^9.2.2",
+    "@open-wc/testing": "^3.2.2",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/test": "^8.1.10",
+    "@storybook/web-components": "^8.1.10",
+    "@storybook/web-components-webpack5": "^8.1.10",
+    "@web/dev-server": "^0.4.5",
+    "@web/test-runner": "^0.18.2",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.8.8",
+    "storybook": "^8.1.10"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "extends": [
+      "@open-wc",
+      "prettier",
+      "plugin:storybook/recommended"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  }
+}