Mouse FX Component

.github/workflows/release-package.yml

@@ -0,0 +1,29 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
+
+      - name: Build library
+        run: npm run build
+
+      - name: Publish
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

.npmrc

@@ -0,0 +1 @@
+@robstarbuck:registry=https://npm.pkg.github.com

.storybook/preview.ts

@@ -2,6 +2,7 @@ import type { Preview } from "@storybook/web-components";
 
 const preview: Preview = {
   parameters: {
+    layout: "fullscreen",
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {

README.md

@@ -0,0 +1,43 @@
+# WBL
+
+```
+WEB-COMPONENTS LIBRARY
+‾ ‾            ‾
+```
+
+A library of [web-components](https://www.webcomponents.org/introduction).
+
+These components have been tested as consumables by Vue, Lit.dev and Svelte.
+
+## Safari
+
+Safari doesn't yet support `document.adoptedStyleSheets` which is required to style the root element (which is only required for autofill on the login page);
+
+For compatibility a polyfill must be included in the consuming code:
+
+```js
+<script
+  async
+  src="https://unpkg.com/construct-style-sheets-polyfill@3.1.0/dist/adoptedStyleSheets.js"
+></script>
+```
+
+# Links
+
+## Design Rules
+
+- [Design Safe Rules](https://anthonyhobday.com/sideprojects/saferules/)
+
+## Designs
+
+- [Login](https://xd.adobe.com/view/dd169958-c008-4db8-a89e-1dab7d445c9e-8845/)
+- [Home Screen](https://xd.adobe.com/view/dd169958-c008-4db8-a89e-1dab7d445c9e-8845)
+
+## Other Storybooks
+
+- [British Gas Lib](https://www.britishgas.co.uk/nucleus/demo/index.html)
+- [Swiss Post Office](https://swisspost-web-frontend.netlify.app/#/bootstrap-samples/buttons)
+
+## Animation
+
+https://open-wc.org/blog/doing-a-flip-with-lit-html-2-0/

package.json

@@ -1,20 +1,20 @@
 {
   "name": "lib-components",
   "private": false,
-  "version": "0.9.39",
+  "version": "0.0.1",
   "type": "module",
-  "main": "dist/lib-components.js",
   "exports": {
-    ".": "./dist/lib-components.js"
+    "mouse-fx": "./dist/mouse-fx.js"
   },
   "types": "types/index.d.ts",
   "files": [
     "dist",
-    "types"
+    "types",
+    "!story"
   ],
   "scripts": {
     "dev": "vite",
-    "build": "eslint \".\\src\\**\\*.ts\" && tsc && vite build && wca analyze \"src/**/index.ts\" --outFile custom-elements.json",
+    "build": "tsc && vite build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build-manifest": "wca analyze \"src/**/index.ts\" --outFile custom-elements.json"

src/_exports/mouse-fx.ts

@@ -0,0 +1 @@
+export { LibMouseFx } from "../components/mouse-fx";

src/components/mouse-fx/TODO.md

@@ -0,0 +1 @@
+- [ ] Use the document.querySelector to pick up on elements that need effects