create-next-release.yml

#
# This workflow follows the following steps:
#  1. Checkout the main branch (see line 27)
#  1. Get the version from the package.json file and store it as environment
#     variable for this job
#  1. Build the Storybook and publish it to the GitHub pages
#     https://epfl-si.github.io/epfl-elements-react/
#  1. Build the epfl-elements-react library
#    - add the package.json and run npm pack
#  1. Archive production artifacts (not used right now but might be useful later)
#  1. Create a release (with a proper Tag based on the version) →
#     duplicated tag are not allowed and will fail!
#  1. Upload both epfl-elements-react-v${{ env.EER_VERSION }}.tgz and
#     epfl-elements-react.tgz to the release
#
#
#  Note:
#    - One might want to split the steps in different jobs: environment
#      variables will not work in this case and you will have to use artifacts
#      https://docs.github.com/en/actions/using-workflows/storing-workflow-data-as-artifacts#passing-data-between-jobs-in-a-workflow
#    - GitHub propose a Packages registry that stores npm packages — we rather
#      want to use nomjs but it still need an extra step. For now we can work
#      with referencing to this package with its URL in package.json:
#        [...]
#        "epfl-elements-react": "https://github.com/epfl-si/epfl-elements-react/releases/latest/download/epfl-elements-react.tgz",
#        [...]
#
name: Deploy Storybook to GitHub Pages and release epfl-elements-react library

on:
  push:
    branches:
      - main
      - next

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

jobs:
  epfl-elements-react:
    runs-on: ubuntu-latest
    steps:
      # Setup Node.js on ubuntu-latest
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          registry-url: 'https://registry.npmjs.org'

      # Checkout the 'next' branch
      - name: Checkout the 'next' branch
        uses: actions/checkout@v4
        with:
          ref: 'next'

      # Get the version from package.json and export it to 
      # EER_VERSION environment variable
      - name: Export Elements React Version (EER_VERSION)
        shell: bash
        run: |
          echo "EER_VERSION=$(cat package.json | grep version | cut -d'"' -f4)" >> $GITHUB_ENV
          echo "EER_VERSION=${{ env.EER_VERSION }}"

      # Install npm dependencies (run npm install)
      - name: Install npm dependencies
        run: npm install

      # Build Storybook (run npx storybook build)
      - name: Build Storybook
        run: npx storybook build

      # Deploy to GitHub Pages → https://epfl-si.github.io/epfl-elements-react/
      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          ACCESS_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages
          FOLDER: storybook-static

      # Build the epfl-elements-react library (npm run build)
      - name: Build the epfl-elements-react library
        run: npm run build

      # Create the package.json that is needed to create a package
      - name: Create the package.json
        run: jq -n --arg version v${{ env.EER_VERSION }} '{"name":"epfl-elements-react","version":$version,"description":"EPFL Elements React Library","main":"index.js","repository":"github:epfl-si/epfl-elements-react","keywords":["epfl-elements-react"],"author":"EPFL ISAS-FSD","contributors":["Amine672 (https://github.com/Amine672)","Azecko (https://github.com/Azecko)","domq (https://github.com/domq)","GoldenCorgo (https://github.com/GoldenCorgo)","ponsfrilus (https://github.com/ponsfrilus)","rosamaggi (https://github.com/rosamaggi)","webdacjs (https://github.com/webdacjs)"],"license":"MIT","types":"./index.d.ts","dependencies":{"epfl-elements":"^4.7.0"},"bugs":{"url":"https://github.com/epfl-si/epfl-elements-react/issues"},"homepage":"https://github.com/epfl-si/epfl-elements-react#readme"}' > dist/package.json

      # Create the epfl-elements-react package
      - name: Create the epfl-elements-react package
        run: |
          cp README.md ./dist/
          npm pack ./dist/
          ls -al
          cp epfl-elements-react-v${{ env.EER_VERSION }}.tgz epfl-elements-react.tgz

      # Archive production artifacts
      - name: Archive production artifacts
        uses: actions/upload-artifact@v4
        with:
          name: epfl-elements-react
          path: |
            epfl-elements-react-v${{ env.EER_VERSION }}.tgz

      # Create Release
      # https://stackoverflow.com/a/75679739/960623
      # Note: this will fail if the tags already exists
      - name: Create release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          tag: v${{ env.EER_VERSION }}
        run: |
          gh release create "$tag" ./*.tgz \
            --target="next" \
            --repo="$GITHUB_REPOSITORY" \
            --title="${GITHUB_REPOSITORY#*/} ${tag#v}" \
            --generate-notes

      - name: Publish package on NPM 📦
        run: npm publish epfl-elements-react-v${{ env.EER_VERSION }}.tgz
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}