migrating uvalib-analytics (older js repo) to site-analytics (ts and …

…newer lit)

packages/site-analytics/.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 = */

packages/site-analytics/.gitignore

@@ -0,0 +1,24 @@
+## editors
+/.idea
+/.vscode
+
+## system files
+.DS_Store
+
+## npm
+/node_modules/
+/npm-debug.log
+
+## testing
+/coverage/
+
+## temp folders
+/.tmp/
+
+# build
+/_site/
+/dist/
+/out-tsc/
+
+storybook-static
+custom-elements.json

packages/site-analytics/.storybook/main.js

@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
+};

packages/site-analytics/.storybook/server.mjs

@@ -0,0 +1,8 @@
+import { storybookPlugin } from '@web/dev-server-storybook';
+import baseConfig from '../web-dev-server.config.mjs';
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  ...baseConfig,
+  open: '/',
+  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
+});

packages/site-analytics/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 site-analytics
+
+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.

packages/site-analytics/README.md

@@ -0,0 +1,76 @@
+# \<site-analytics>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i site-analytics
+```
+
+## Usage
+
+```html
+<script type="module">
+  import 'site-analytics/site-analytics.js';
+</script>
+
+<site-analytics></site-analytics>
+```
+
+## 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
+```
+
+## Demoing with Storybook
+
+To run a local instance of Storybook for your component, run
+
+```bash
+npm run storybook
+```
+
+To build a production version of Storybook, run
+
+```bash
+npm run storybook:build
+```
+
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce 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`

packages/site-analytics/demo/index.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <style>
+    body {
+      background: #fafafa;
+    }
+  </style>
+  <title>Demo site-analytics page</title>
+</head>
+<body>
+  <button>Click me to trigger an event</button><br />
+  <input placeholder="fake search field to log site search" /><br />
+  <a href="somepage.html">Log page view</a><br />
+  <a href="anotherpage.html">Log another page view with custom title</a>
+  <site-analytics variables='{"1":"foo", "2":"bar"}' spa matomoId="23"></site-analytics>
+
+  <script type="module">
+    import '../dist/site-analytics.js';
+
+    document.querySelector('button').addEventListener('click',(e)=>{
+      e.target.dispatchEvent(new CustomEvent("site-analytics-event", {
+        detail: {event:["foo","bar","test","me"]},
+        bubbles: true
+      }));
+    });
+
+    document.querySelector('input').addEventListener('keypress',(e)=>{
+      if (e.key === 'Enter') {
+        let searchQuery = e.target.value;
+        e.target.dispatchEvent(new CustomEvent("site-analytics-search", {
+          detail: {searchQuery:searchQuery, searchCategory:"testSearch", resultCount: 55555},
+          bubbles: true
+        }));
+      }
+    });
+
+    let links = document.querySelectorAll('a');
+    links[0].addEventListener('click',(e)=>{
+      e.preventDefault();
+      e.target.dispatchEvent(new CustomEvent("site-analytics-pageview", { bubbles: true }));
+    });
+    links[1].addEventListener('click',(e)=>{
+      e.preventDefault();
+      e.target.dispatchEvent(new CustomEvent("site-analytics-pageview", { bubbles: true, detail: {customTitle:"foobar"} }));
+    });
+  </script>
+</body>
+</html>

packages/site-analytics/demo/page1.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <style>
+    body {
+      background: #fafafa;
+    }
+  </style>
+  <title>Demo uvalib-analytics page 1</title>
+</head>
+<body>
+  <a href="page2.html">Page 2</a><br />
+  <uvalib-analytics matomoId="23"></uvalib-analytics>
+
+  <script type="module">
+    import '../uvalib-analytics.js';
+  </script>
+</body>
+</html>

packages/site-analytics/demo/page2.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <style>
+    body {
+      background: #fafafa;
+    }
+  </style>
+  <title>Demo site-analytics page 2</title>
+</head>
+<body>
+  <a href="page1.html">Page 1</a><br />
+  <site-analytics matomoId="23"></site-analytics>
+
+  <script type="module">
+    import '../site-analytics.js';
+  </script>
+</body>
+</html>

packages/site-analytics/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@uvalib/site-analytics",
+  "description": "Webcomponent site-analytics following open-wc recommendations",
+  "license": "MIT",
+  "author": "site-analytics",
+  "version": "0.0.0",
+  "type": "module",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./site-analytics.js": "./dist/src/site-analytics.js"
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc && npm run analyze -- --exclude dist",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "storybook": "tsc && npm run analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
+    "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
+  },
+  "dependencies": {
+    "lit": "^2.0.2"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@open-wc/eslint-config": "^9.2.1",
+    "@open-wc/testing": "^3.1.6",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "@web/dev-server": "^0.1.34",
+    "@web/dev-server-storybook": "^0.5.4",
+    "@web/test-runner": "^0.14.0",
+    "concurrently": "^5.3.0",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ],
+      "import/no-unresolved": "off",
+      "import/extensions": [
+        "error",
+        "always",
+        {
+          "ignorePackages": true
+        }
+      ]
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  }
+}