From 31da735ba4be158bf0438dca3a2aae5d5bb67afa Mon Sep 17 00:00:00 2001 From: Mathieu Huchet <59565911+mhuchet@users.noreply.github.com> Date: Tue, 5 Nov 2024 14:08:52 +0100 Subject: [PATCH] docs: PR demo on gh pages (#4935) --- .github/workflows/before-surge.sh | 19 ----- .github/workflows/clean-demo.yml | 35 ++++++++ .github/workflows/demo.yml | 84 +++++++++++++++++++ .github/workflows/pr-demo.yml | 122 +++++++++++++--------------- .github/workflows/pr-playground.yml | 91 --------------------- .nojekyll | 0 .surge/index.html => index.html | 19 +---- packages/cmf/docs/how-to-connect.md | 24 +++--- packages/cmf/src/action.md | 28 +++---- 9 files changed, 206 insertions(+), 216 deletions(-) delete mode 100755 .github/workflows/before-surge.sh create mode 100644 .github/workflows/clean-demo.yml create mode 100644 .github/workflows/demo.yml delete mode 100644 .github/workflows/pr-playground.yml create mode 100644 .nojekyll rename .surge/index.html => index.html (95%) diff --git a/.github/workflows/before-surge.sh b/.github/workflows/before-surge.sh deleted file mode 100755 index e13db83916..0000000000 --- a/.github/workflows/before-surge.sh +++ /dev/null @@ -1,19 +0,0 @@ -#!/bin/sh - -echo "Prepare demo folder before execute surge" -rm -rf .static -mkdir .static -mkdir .static/cmf -mkdir .static/containers -mkdir .static/design-system -mkdir .static/faceted-search -mkdir .static/theme -mkdir .static/storybook-one -cp .surge/index.html .static -cp -R packages/cmf/jsdoc .static/cmf -cp -R packages/containers/storybook-static/* .static/containers -cp -R packages/storybook-one/storybook-static/* .static/storybook-one -cp -R packages/design-docs/storybook-static/* .static/design-system -cp -R packages/theme/dist/* .static/theme -echo Size of demo: -du -d 1 -h .static diff --git a/.github/workflows/clean-demo.yml b/.github/workflows/clean-demo.yml new file mode 100644 index 0000000000..131a57c492 --- /dev/null +++ b/.github/workflows/clean-demo.yml @@ -0,0 +1,35 @@ +name: Delete PR folder in gh-pages +on: + pull_request: + types: [closed] + +permissions: + contents: write + pull-requests: write + statuses: write + checks: write + pages: write + +jobs: + clean: + runs-on: ubuntu-latest + steps: + - name: Checkout demo branch + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 + with: + path: demo + ref: gh-pages + + - name: Delete PR folder + run: | + rm -rf ./demo/${{ github.event.number }} + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Commit demo for gh-pages + uses: actions-js/push@156f2b10c3aa000c44dbe75ea7018f32ae999772 #v1.4 + with: + directory: "./demo" + github_token: ${{ secrets.GITHUB_TOKEN }} + message: "doc: cleanup demo" + branch: gh-pages diff --git a/.github/workflows/demo.yml b/.github/workflows/demo.yml new file mode 100644 index 0000000000..a38790b16a --- /dev/null +++ b/.github/workflows/demo.yml @@ -0,0 +1,84 @@ +name: Demo CI +on: + push: + branches: + - main + +permissions: + contents: write + pull-requests: write + statuses: write + checks: write + pages: write + +# This allows a subsequently queued workflow run to interrupt previous runs +concurrency: + group: "${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}" + cancel-in-progress: true + +jobs: + build: + name: Build and test + runs-on: ubuntu-latest + + steps: + - name: Checkout sources + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 + + - name: Use Node.js + uses: ./.github/actions/setup-node + + - name: Install + working-directory: ./ + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + run: yarn install --frozen-lockfile + + - name: Build Demo + run: yarn test:demo + + - name: Checkout demo branch + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 + with: + path: demo + ref: gh-pages + + - name: Add demo and commit it + # symlink creation : workaround to be able to use service worker on storybook both in local and via github pages deployment + run: | + echo "Prepare demo folder" + cd demo && git rm -rf --ignore-unmatch ./main && cd .. + mkdir -p ./demo/main + cp ./index.html ./demo/main/ + mkdir ./demo/main/cmf + mkdir ./demo/main/containers + mkdir ./demo/main/design-system + mkdir ./demo/main/faceted-search + mkdir ./demo/main/theme + mkdir ./demo/main/storybook-one + cp -R packages/cmf/jsdoc ./demo/main/cmf + cp -R packages/containers/storybook-static/* ./demo/main/containers + cp -R packages/design-docs/storybook-static/* ./demo/main/design-system + cp -R packages/faceted-search/storybook-static/* ./demo/main/faceted-search + cp -R packages/theme/dist/* ./demo/main/theme + cp -R packages/storybook-one/storybook-static/* ./demo/main/storybook-one + echo Size of demo: + du -d 1 -h ./demo/main + cd demo && git add . + + - name: Commit demo for gh-pages + uses: actions-js/push@156f2b10c3aa000c44dbe75ea7018f32ae999772 #v1.4 + with: + directory: "./demo" + github_token: ${{ secrets.GITHUB_TOKEN }} + message: "doc: update demo" + branch: gh-pages + + - name: Deploy to Netlify production + if: github.ref == 'refs/heads/master' + uses: netlify/actions/cli@master + with: + args: deploy --dir=packages/design-docs/storybook-static --prod + env: + NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} + NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} diff --git a/.github/workflows/pr-demo.yml b/.github/workflows/pr-demo.yml index 1e0c266ae6..c096bdabef 100644 --- a/.github/workflows/pr-demo.yml +++ b/.github/workflows/pr-demo.yml @@ -1,27 +1,22 @@ -name: PR demo CI - +name: PR Demo CI on: pull_request: - push: - branches: [master] permissions: - contents: read - deployments: read - pull-requests: write # needed to write a comment + contents: write + pull-requests: write statuses: write + checks: write + pages: write - -# This allows a subsequently queued workflow run to interrupt previous runs concurrency: - group: '${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}' + group: "${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}" cancel-in-progress: true jobs: build: + name: Build demo on PR runs-on: ubuntu-latest - name: Build demo and deploy it - environment: pull_request_unsafe steps: - name: Checkout sources @@ -30,64 +25,63 @@ jobs: - name: Use Node.js uses: ./.github/actions/setup-node - - name: cache for storybook - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2 - with: - path: packages/*/node_modules - key: ${{ runner.os }}-storybook-${{ hashFiles('**/yarn.lock') }} - restore-keys: | - ${{ runner.os }}-storybook- - - name: Install - run: | - node --version - yarn install --frozen-lockfile + working-directory: ./ + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + run: yarn install --frozen-lockfile + + - name: Build Demo + run: yarn test:demo - - name: Run test:demo - run: | - node --version - yarn test:demo + - name: Checkout demo branch + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 + with: + path: demo + ref: gh-pages - - name: Before surge + - name: Add demo and commit it + # symlink creation : workaround to be able to use service worker on storybook both in local and via github pages deployment run: | - node --version - yarn global add surge - echo "$(yarn global bin)" >> $GITHUB_PATH - node --version - ./.github/workflows/before-surge.sh - env: - STORYBOOK_FIGMA_ACCESS_TOKEN: ${{ secrets.STORYBOOK_FIGMA_ACCESS_TOKEN }} - - - name: deploy if master - if: github.ref == 'refs/heads/master' - run: surge --project .static --domain "talend.surge.sh" - env: - SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }} - SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} + echo "Prepare demo folder" + cd demo && git rm -rf --ignore-unmatch ${{ github.event.number }} && cd .. + mkdir -p ./demo/${{ github.event.number }} + cp ./index.html ./demo/${{ github.event.number }}/ + mkdir ./demo/${{ github.event.number }}/cmf + mkdir ./demo/${{ github.event.number }}/containers + mkdir ./demo/${{ github.event.number }}/design-system + mkdir ./demo/${{ github.event.number }}/faceted-search + mkdir ./demo/${{ github.event.number }}/theme + mkdir ./demo/${{ github.event.number }}/storybook-one + cp -R packages/cmf/jsdoc ./demo/${{ github.event.number }}/cmf + cp -R packages/containers/storybook-static/* ./demo/${{ github.event.number }}/containers + cp -R packages/design-docs/storybook-static/* ./demo/${{ github.event.number }}/design-system + cp -R packages/faceted-search/storybook-static/* ./demo/${{ github.event.number }}/faceted-search + cp -R packages/theme/dist/* ./demo/${{ github.event.number }}/theme + cp -R packages/storybook-one/storybook-static/* ./demo/${{ github.event.number }}/storybook-one + echo Size of demo: + du -d 1 -h ./demo/${{ github.event.number }} + cd demo && git add . - - name: Deploy to Netlify production - if: github.ref == 'refs/heads/master' - uses: netlify/actions/cli@master + - name: Commit demo for gh-pages + uses: actions-js/push@156f2b10c3aa000c44dbe75ea7018f32ae999772 #v1.4 with: - args: deploy --dir=packages/design-docs/storybook-static --prod - env: - NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} - NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} + directory: "./demo" + github_token: ${{ secrets.GITHUB_TOKEN }} + message: "doc: update demo from ${{ github.event.number }}" + branch: gh-pages - - name: deploy if PR - if: github.ref != 'refs/heads/master' - run: | - surge --project .static --domain "${{ github.event.number }}.talend.surge.sh" - env: - SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }} - SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} + - name: Find Comment + uses: peter-evans/find-comment@v2 + id: fc + with: + issue-number: ${{ github.event.number }} + body-includes: Storybook for this PR deployed on this - - name: Comment PR - uses: daohoangson/comment-on-github@v2 - if: ${{github.event_name == 'pull_request' && !startsWith(github.ref, 'refs/heads/dependabot') }} - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + - name: Create comment + uses: peter-evans/create-or-update-comment@c6c9a1a66007646a28c153e2a8580a5bad27bcfa #v3.0.2 + if: steps.fc.outputs.comment-id == '' with: - body: ":octocat: [Demo is available here](http://${{ github.event.number }}.talend.surge.sh)" - fingerprint: ${{ github.event.number }} - replace: please + issue-number: ${{ github.event.number }} + body: | + Storybook for this PR deployed on this [github page](https://talend.github.io/ui/${{ github.event.number }}) diff --git a/.github/workflows/pr-playground.yml b/.github/workflows/pr-playground.yml deleted file mode 100644 index bc84c921a6..0000000000 --- a/.github/workflows/pr-playground.yml +++ /dev/null @@ -1,91 +0,0 @@ -name: PR playground CI - -on: - pull_request: - push: - branches: [master] - -# This allows a subsequently queued workflow run to interrupt previous runs -concurrency: - group: '${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}' - cancel-in-progress: true - -permissions: - contents: read - deployments: read - pull-requests: write # needed to write comment in PR - statuses: write - -jobs: - build: - runs-on: ubuntu-latest - name: Build and deploy playground - environment: pull_request_unsafe - - steps: - - name: Checkout sources - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 - - - name: Use Node.js - uses: ./.github/actions/setup-node - - - - name: Install and build playground - id: build - run: | - yarn install --frozen-lockfile - yarn global add surge - echo "$(yarn global bin)" >> $GITHUB_PATH - yarn pre-release - yarn workspace @talend/ui-playground run test:demo:umd - - - name: deploy if master - if: github.ref == 'refs/heads/master' - run: | - rm -rf .static - mkdir .static - mkdir .static/playground - cp -R packages/playground/dist/* .static/playground - surge --project .static --domain "talend-playground.surge.sh" - env: - SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }} - SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} - - - name: deploy if PR - if: github.ref != 'refs/heads/master' - run: | - rm -rf .static - mkdir .static - mkdir .static/playground - cp -R packages/playground/dist/* .static/playground - surge --project .static --domain "${{ github.event.number }}.talend-playground.surge.sh" - env: - SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }} - SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} - - check: - runs-on: ubuntu-latest - name: Check size - environment: pull_request_unsafe - - steps: - - name: Checkout sources - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 - - - name: Use Node.js - uses: ./.github/actions/setup-node - - - name: Check node version - run: | - node --version - - - name: Check UMD files size diff - uses: preactjs/compressed-size-action@f780fd104362cfce9e118f9198df2ee37d12946c #v2.6.0 - if: github.ref != 'refs/heads/master' - with: - repo-token: "${{ secrets.GITHUB_TOKEN }}" - build-script: "pre-release" - pattern: "./packages/*/dist/*.{js,css,json}" - exclude: "{**/*.html,**/*.map,**/node_modules/**}" - compression: "none" - minimum-change-threshold: 100 diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 0000000000..e69de29bb2 diff --git a/.surge/index.html b/index.html similarity index 95% rename from .surge/index.html rename to index.html index 42a079b356..48997396ee 100644 --- a/.surge/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -233,24 +233,7 @@

Containers

/> - -
- -

Playground

-

A simple CMF App with some containers to test integration.

-
-
- diff --git a/packages/cmf/docs/how-to-connect.md b/packages/cmf/docs/how-to-connect.md index 250cd10092..a2e86b205a 100644 --- a/packages/cmf/docs/how-to-connect.md +++ b/packages/cmf/docs/how-to-connect.md @@ -4,21 +4,23 @@ title: How to connect a container to CMF ? sidebar_label: connect a container --- -CMF manages your routes to render the requested container depending on the [settings]({{ site.baseurl }}{% link _posts/2017-02-28-core-settings.md %}). +CMF manages your routes to render the requested container depending on the [settings](core-settings.md). When you develop those containers (or other containers in you app), you need to access to resources and utilities that CMF provides -* the store -* the register -* the action utility -* ... + +- the store +- the register +- the action utility +- ... CMF provides a [React Context](https://facebook.github.io/react/docs/context.html) system. ## App CMF provides an `` component to bootstrap pour app. This component -* plugs [react-redux](https://github.com/reactjs/react-redux) `Provider` with the store you pass -* plugs CMF `RegistryProvider` -* connects [react-router](https://github.com/ReactTraining/react-router) with the `history you pass and the `routes` [settings]({{ site.baseurl }}{% link _posts/2017-02-28-core-settings.md %}) + +- plugs [react-redux](https://github.com/reactjs/react-redux) `Provider` with the store you pass +- plugs CMF `RegistryProvider` +- connects [react-router](https://github.com/ReactTraining/react-router) with the `history you pass and the `routes` [settings](core-settings.md) ```javascript import React from 'react'; @@ -38,8 +40,9 @@ render( The `` component wraps your app with `react-redux` provider and CMF `RegistryProvider`. So in your containers, you can -* get `this.context` containing the registry. -* connect to redux using [react-redux](https://github.com/reactjs/react-redux) + +- get `this.context` containing the registry. +- connect to redux using [react-redux](https://github.com/reactjs/react-redux) ```javascript import React from 'react'; @@ -73,6 +76,7 @@ Alternatively, if you don't want to use the `` component, you can wrap yo **The example below only connect your app to CMF registry, not redux store nor react-router** The `RegistryProvider` allows you to wrap your app, so that CMF inject the registry in your containers. + ```javascript import React from 'react'; import { browserHistory } from 'react-router'; diff --git a/packages/cmf/src/action.md b/packages/cmf/src/action.md index 76a2d6ccfc..91d38971ae 100644 --- a/packages/cmf/src/action.md +++ b/packages/cmf/src/action.md @@ -6,23 +6,24 @@ Action is not anymore a concept in CMF, just use props on top of your components So this means all theses call should be refactor to let the component take it's on props: -* mapDispatchToProps -* getOnProps -* getActionObject -* getActionInfo -* getActionsById +- mapDispatchToProps +- getOnProps +- getActionObject +- getActionInfo +- getActionsById ## getActionCreatorFunction + ```javascript import cmf from 'react-cmf'; cmf.actionCreator.get(context, id); ``` -| Argument | Type | Description | Mandatory | -|---|---|---|---| -| context | object | The CMF react context (injected by CMF connector). See [how to connect a container to CMF]({{ site.baseurl }}{% link _posts/2017-02-28-how-to-connect-a-container-to-cmf-.md %}) | true | -| id | string | The action creator identifier | true | +| Argument | Type | Description | Mandatory | +| -------- | ------ | --------------------------------------------------------------------------------------------------------------------- | --------- | +| context | object | The CMF react context (injected by CMF connector). See [how to connect a container to CMF](../docs/how-to-connect.md) | true | +| id | string | The action creator identifier | true | It returns the registered `action creator` from the provided registry. @@ -34,8 +35,7 @@ import cmf from 'react-cmf'; cmf.actionCreator.register(id, actionCreator); ``` -| Argument | Type | Description | Mandatory | -|---|---|---|---| -| id | string | The action creator identifier | true | -| actionCreator | function | The action creator to register | true | - +| Argument | Type | Description | Mandatory | +| ------------- | -------- | ------------------------------ | --------- | +| id | string | The action creator identifier | true | +| actionCreator | function | The action creator to register | true |