Switch to using Vite for building source, upgrade ESlint, and add tests

.eslintrc.json

@@ -1,6 +1,7 @@
 {
     "extends": [
-        "auto"
+        "auto",
+        "plugin:storybook/recommended"
     ],
     "parser": "@typescript-eslint/parser",
     "rules": {
@@ -9,6 +10,9 @@
         "@typescript-eslint/no-unused-expressions": "off",
         "consistent-return": "off",
         "@typescript-eslint/explicit-function-return-type": "off",
-        "@typescript-eslint/explicit-module-boundary-types": "off"
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "pii/no-phone-number": "off",
+        "react/function-component-definition": "off",
+        "import/no-extraneous-dependencies": "off"
     }
 }

.github/workflows/build-and-lint.yml

@@ -0,0 +1,34 @@
+name: Lint Code and Verify
+
+on:
+  push:
+    branches:
+      - development
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        registry-url: 'https://registry.npmjs.org'
+        cache: 'yarn'
+    - name: yarn install
+      run: |
+        yarn install
+
+    - name: yarn lint
+      run: |
+        yarn lint
+
+    - name: Build Storybook
+      run: |
+        yarn release-storybook
+
+    - name: Build Package Release
+      run: |
+        yarn release

.github/workflows/build-and-release.yml

@@ -5,15 +5,14 @@ on:
     types: [published]
 
 jobs:
-  build:
-
+  build_and_publish:
     runs-on: ubuntu-latest
 
     steps:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: '16'
+        node-version: '20'
         registry-url: 'https://registry.npmjs.org'
         cache: 'yarn'
     - name: yarn install
@@ -24,16 +23,6 @@ jobs:
       run: |
         yarn lint
 
-    - name: Build Storybook
-      run: |
-        yarn release-storybook
-    # Switch to use https://github.com/actions/deploy-pages
-    # - name: Publish to Github Pages
-    #   uses: maxheld83/ghpages@v0.2.1
-    #   env:
-    #     GH_PAT: ${{ secrets.GH_PAT }}
-    #     BUILD_DIR: ".out/"
-
     - name: Build Package Release
       run: |
         yarn release
@@ -42,3 +31,31 @@ jobs:
       env:
         NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN}}
 
+  deploy:
+    # Add a dependency to the build job
+    needs: build_and_publish
+
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write      # to deploy to Pages
+      id-token: write   # to verify the deployment originates from an appropriate source
+
+    # Deploy to the github-pages environment
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    # Specify runner + deployment step
+    runs-on: ubuntu-latest
+    steps:
+      - name: Build Storybook
+        run: |
+          yarn release-storybook
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: '.out/'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+

.storybook/main.js → .storybook/main.mjs

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   typescript: {
     check: false,
     checkOptions: {},
@@ -8,11 +8,20 @@ module.exports = {
       propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
     },
   },
+
   "stories": [
     "../src/**/*.stories.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
-  "addons": [
-    "@storybook/addon-essentials"
-  ]
+
+  "addons": ["@storybook/addon-essentials", "@storybook/addon-mdx-gfm"],
+
+  framework: {
+    name: "@storybook/react-vite",
+    options: {}
+  },
+
+  docs: {
+    autodocs: true
+  }
 }

README.md

@@ -26,20 +26,7 @@ import ReactTwitchEmbedVideo from "react-twitch-embed-video"
 <ReactTwitchEmbedVideo channel="talk2megooseman" />
 ```
 
-## Version 2 Notes
-
-### Updates/Changes
-- Refactor all code to use React Hooks instead of a class based component.
-- Lowest version of React supported is now 16.8 (version React Hooks was introduced in)
-- Removed onUserLogin, it appears Twitch stopped supporting this all together based off the docs
-- Added targetId property for defining mutiple video players
-- `onPlayerReady` renamed to `onReady`
-- `onVideoPlay` renamed to `onPlay`
-
-### Breaking Changes
-In version one I was mistakenly using `targetClass` prop for populating the `id` attribute for the Twitch Player. So I created a new prop called `targetId` to use to define more then one Twitch Player on your page. `targetClass` now properly sets the class for the player for proper styling.
-If you were one of the users the was creating more then on Twitch player on your page, just switch from using `targetClass` to `targetId` and things should still work properly.
-If you're using `onPlayerReady` or `onVideoPlay`, make sure to rename them to the new prop names.
+For full documentation on how to use React Twitch Embed Video visit: https://talk2megooseman.github.io/react-twitch-embed-video/
 
 ## Troubleshooting
 
@@ -53,26 +40,26 @@ If you're using `onPlayerReady` or `onVideoPlay`, make sure to rename them to th
 1. Install modules
     > yarn
 
-2. Check **_package.json_** so that the information is correct.
-3. Start storybook and start coding!
-    > yarn start
+1. Start storybook and start coding!
+    > yarn dev
 
-4. Bundle with `yarn build --watch`
-5. Make project available locally by using `npm link`
-6. To test if it works correctly in another project you can use npm `npm link react-twitch-embed-video`
+1. Make project available locally by using `npm link`
+1. To test if it works correctly in another project you can use npm `npm link react-twitch-embed-video`
+1. Verify all tests are passing
+    > yarn test
 
 #### Extra
-* If you want to run eslint:
-    > yarn lint
 
 * If you want to automatically fix lint problems run :
-    > yarn lint-fix
+    > yarn lint:fix
 
 Commands
 ----
 - `yarn`
 - `yarn build`
+- `yarn test`
+- `yarn coverage`
 - `yarn start`
 - `yarn release`
 - `yarn lint`
-- `yarn lint-fix`
+- `yarn lint:fix`