Skip to content

fix(dropdown): fix mobile view and add backdrop #448

fix(dropdown): fix mobile view and add backdrop

fix(dropdown): fix mobile view and add backdrop #448

name: Deploy affected storybook(s) [PR]
on:
pull_request:
jobs:
check:
runs-on: ubuntu-latest
outputs:
status: ${{ steps.check-updated-storybooks.outputs.any }}
steps:
- name: Check updated storybooks
uses: dorny/paths-filter@v2
id: check-updated-storybooks
with:
filters: |
any:
- libs/**
core:
- libs/core/**
chlorophyll:
- libs/chlorophyll/**
react:
- libs/react/**
react-charts:
- libs/react-charts/**
angular:
- libs/angular/**
angular-charts:
- libs/angular-charts/**
build:
runs-on: ubuntu-latest
needs: check
if: needs.check.outputs.status == 'true'
steps:
- name: Check updated storybooks
uses: dorny/paths-filter@v2
id: check-updated-storybooks
with:
filters: |
any:
- libs/**
core:
- libs/core/**
chlorophyll:
- libs/chlorophyll/**
react:
- libs/react/**
react-charts:
- libs/react-charts/**
angular:
- libs/angular/**
angular-charts:
- libs/angular-charts/**
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: lts/*
- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "dir=$(yarn cache dir)" >> "$GITHUB_OUTPUT"
- uses: actions/cache@v3
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
- name: Install dependencies
run: yarn install --prefer-offline --frozen-lockfile --silent
- name: Get branch name
shell: bash
run: echo "branch=${GITHUB_REF}" >> "$GITHUB_OUTPUT"
id: branch
- name: Determine deploy target
shell: bash
run: |
if [[ "${{ steps.branch.outputs.branch }}" == "main" ]]; then
echo "target=latest" >> "$GITHUB_OUTPUT"
elif [[ "${{ steps.branch.outputs.branch }}" == "alpha" ]]; then
echo "target=alpha" >> "$GITHUB_OUTPUT"
else
echo "target=pr-${{ github.event.number }}" >> "$GITHUB_OUTPUT"
fi
id: target
- name: Build storybook
run: yarn run nx affected --target build-storybook --base=origin/main
- name: Deploy built storybooks to GitHub Pages
if: steps.check-updated-storybooks.outputs.any == 'true'
uses: JamesIves/[email protected]
with:
token: ${{ secrets.GITHUB_TOKEN }}
branch: gh-pages # The branch the action should deploy to.
folder: dist/storybook # The folder the action should deploy.
target-folder: ${{ steps.target.outputs.target }} # The folder the action should deploy to.
- name: Add Storybook link to pull request
uses: actions/github-script@v5
if: github.event.action == 'opened' && steps.check-updated-storybooks.outputs.any == 'true'
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
script: |
// Storybooks
const storybooks = {
'core': ${{steps.check-updated-storybooks.outputs.core}},
'chlorophyll': ${{steps.check-updated-storybooks.outputs.chlorophyll}},
'react': ${{steps.check-updated-storybooks.outputs.react}},
'react-charts': ${{steps.check-updated-storybooks.outputs.react-charts}},
'angular': ${{steps.check-updated-storybooks.outputs.angular}},
'angular-charts': ${{steps.check-updated-storybooks.outputs.angular-charts}}
}
// Filter updated storybooks (based on file changes not affected storybooks)
const updatedStorybooks = Object.keys(storybooks)
.filter((storybook) => storybooks[storybook]);
// Create link list
const links = '<ul>' + updatedStorybooks
.reduce((initial, storybook) => (initial + `<li><a target="_blank" href="https://sebgroup.github.io/green/${{ steps.target.outputs.target }}/${storybook}/">${storybook}</a></li>`),'') + '</ul>';
// Create comment body
const body = `👋 Thanks for creating a pull request! 🚀 Checkout the ${updatedStorybooks.length > 1 ? 'storybooks' : 'storybook'} we've created for it: ${links}`;
github.rest.issues.createComment({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
body
});