diff --git a/.github/workflows/build-and-release.yml b/.github/workflows/build-and-release.yml index 7e91afc..c5f7280 100644 --- a/.github/workflows/build-and-release.yml +++ b/.github/workflows/build-and-release.yml @@ -5,8 +5,7 @@ on: types: [published] jobs: - build: - + build_and_publish: runs-on: ubuntu-latest steps: @@ -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 + diff --git a/README.md b/README.md index f13b322..fb5ed52 100644 --- a/README.md +++ b/README.md @@ -26,20 +26,7 @@ import ReactTwitchEmbedVideo from "react-twitch-embed-video" ``` -## 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` diff --git a/package.json b/package.json index 2cab203..de8711f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-twitch-embed-video", - "version": "3.0.3", + "version": "3.1.0", "author": "Erik Guzman ", "description": "Allows you to easily embed a twitch video in your ReactJS application", "bugs": { @@ -31,6 +31,7 @@ "build": "vite build", "dev": "storybook dev -p 9001", "lint": "eslint --color --ext .js,.md,.ts,.tsx src", + "lint:fix": "eslint --fix --color --ext .js,.md,.ts,.tsx src", "release-storybook": "storybook build -o .out", "release": "vite build", "test": "vitest",