From ec6ae416a7f27b5968dd3c1b1cc6a0e506ad50ed Mon Sep 17 00:00:00 2001 From: albertfolch-redeemeum <102516373+albertfolch-redeemeum@users.noreply.github.com> Date: Fri, 15 Mar 2024 14:43:32 +0100 Subject: [PATCH] chore: setup chromatic for storybook (#680) * chore: setup chromatic for storybook --- .github/workflows/chromatic.yaml | 31 +++++++++++++++++++ .github/workflows/pin-to-pinata.yaml | 14 ++++----- package-lock.json | 4 ++- packages/react-kit/.env.example | 4 +-- packages/react-kit/.storybook/main.ts | 6 ++++ packages/react-kit/package.json | 1 + packages/react-kit/src/lib/config/config.ts | 8 ++--- .../cta/funds/WithdrawFundsButton.stories.tsx | 9 ++---- .../stories/searchBar/SearchBar.stories.tsx | 10 ++++-- 9 files changed, 64 insertions(+), 23 deletions(-) create mode 100644 .github/workflows/chromatic.yaml diff --git a/.github/workflows/chromatic.yaml b/.github/workflows/chromatic.yaml new file mode 100644 index 000000000..abec1c50c --- /dev/null +++ b/.github/workflows/chromatic.yaml @@ -0,0 +1,31 @@ +name: "Chromatic" + +on: push + +jobs: + chromatic: + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v4 + with: + fetch-depth: 0 + - name: Make envfile + uses: SpicyPizza/create-envfile@v2.0 + with: + envkey_REACT_APP_WALLET_CONNECT_PROJECT_ID: ${{ secrets.REACT_APP_WALLET_CONNECT_PROJECT_ID }} + envkey_STORYBOOK_INFURA_PROJECT_SECRET: ${{ secrets.INFURA_PROJECT_SECRET }} + envkey_STORYBOOK_REACT_APP_MAGIC_API_KEY: ${{ secrets.REACT_APP_MAGIC_API_KEY }} + directory: ./packages/react-kit + file_name: .env + - run: cat .env + working-directory: ./packages/react-kit + - name: Install dependencies + run: npm ci + - id: build + run: npm run build -- --cache-dir=".turbo" + - name: Publish to Chromatic + uses: chromaui/action@latest + with: + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + workingDir: packages/react-kit diff --git a/.github/workflows/pin-to-pinata.yaml b/.github/workflows/pin-to-pinata.yaml index 2bb3a0a98..fa6e02d47 100644 --- a/.github/workflows/pin-to-pinata.yaml +++ b/.github/workflows/pin-to-pinata.yaml @@ -34,7 +34,7 @@ jobs: env: PINATA_JWT: ${{ secrets.PINATA_JWT }} INFURA_PROJECT_ID: ${{ secrets.INFURA_PROJECT_ID }} - INFURA_PROJECT_SECRET: ${{ secrets.INFURA_PROJECT_SECRET }} + STORYBOOK_INFURA_PROJECT_SECRET: ${{ secrets.STORYBOOK_INFURA_PROJECT_SECRET }} run: | echo "Pin for testing/mumbai env..." npm run pin-to-pinata -- \ @@ -42,7 +42,7 @@ jobs: -c testing-80001-0 \ -fd ${{ env.FROM_DATE }} \ -p ${{ env.PINATA_JWT }} \ - -i ${{ env.INFURA_PROJECT_ID }}/${{ env.INFURA_PROJECT_SECRET }} + -i ${{ env.INFURA_PROJECT_ID }}/${{ env.STORYBOOK_INFURA_PROJECT_SECRET }} echo "Pin for testing/goerli env..." npm run pin-to-pinata -- \ @@ -50,7 +50,7 @@ jobs: -c testing-5-0 \ -fd ${{ env.FROM_DATE }} \ -p ${{ env.PINATA_JWT }} \ - -i ${{ env.INFURA_PROJECT_ID }}/${{ env.INFURA_PROJECT_SECRET }} + -i ${{ env.INFURA_PROJECT_ID }}/${{ env.STORYBOOK_INFURA_PROJECT_SECRET }} echo "Pin for staging/mumbai env..." npm run pin-to-pinata -- \ @@ -58,7 +58,7 @@ jobs: -c staging-80001-0 \ -fd ${{ env.FROM_DATE }} \ -p ${{ env.PINATA_JWT }} \ - -i ${{ env.INFURA_PROJECT_ID }}/${{ env.INFURA_PROJECT_SECRET }} + -i ${{ env.INFURA_PROJECT_ID }}/${{ env.STORYBOOK_INFURA_PROJECT_SECRET }} echo "Pin for staging/goerli env..." npm run pin-to-pinata -- \ @@ -66,7 +66,7 @@ jobs: -c staging-5-0 \ -fd ${{ env.FROM_DATE }} \ -p ${{ env.PINATA_JWT }} \ - -i ${{ env.INFURA_PROJECT_ID }}/${{ env.INFURA_PROJECT_SECRET }} + -i ${{ env.INFURA_PROJECT_ID }}/${{ env.STORYBOOK_INFURA_PROJECT_SECRET }} echo "Pin for production/polygon env..." npm run pin-to-pinata -- \ @@ -74,7 +74,7 @@ jobs: -c production-137-0 \ -fd ${{ env.FROM_DATE }} \ -p ${{ env.PINATA_JWT }} \ - -i ${{ env.INFURA_PROJECT_ID }}/${{ env.INFURA_PROJECT_SECRET }} + -i ${{ env.INFURA_PROJECT_ID }}/${{ env.STORYBOOK_INFURA_PROJECT_SECRET }} echo "Pin for production/ethereum env..." npm run pin-to-pinata -- \ @@ -82,4 +82,4 @@ jobs: -c production-1-0 \ -fd ${{ env.FROM_DATE }} \ -p ${{ env.PINATA_JWT }} \ - -i ${{ env.INFURA_PROJECT_ID }}/${{ env.INFURA_PROJECT_SECRET }} + -i ${{ env.INFURA_PROJECT_ID }}/${{ env.STORYBOOK_INFURA_PROJECT_SECRET }} diff --git a/package-lock.json b/package-lock.json index 46c19d867..e8fddc65f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16540,8 +16540,9 @@ }, "node_modules/chromatic": { "version": "11.0.8", + "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.0.8.tgz", + "integrity": "sha512-+zJ5h0/Eu5z26KCNLIw2tknbK69gUO8q3Jsew4oU0Q/i/NPhIwcXhvPP7u75aLJgX1EI61+ndiGJA/yeQZQcgw==", "dev": true, - "license": "MIT", "bin": { "chroma": "dist/bin.js", "chromatic": "dist/bin.js", @@ -42277,6 +42278,7 @@ "@web3-react/metamask": "8.2.4", "babel-plugin-named-exports-order": "^0.0.2", "buffer": "6.0.3", + "chromatic": "^11.0.8", "copyfiles": "^2.4.1", "customize-cra": "^1.0.0", "eslint": "^8.10.0", diff --git a/packages/react-kit/.env.example b/packages/react-kit/.env.example index 420ac4c63..bde62d06e 100644 --- a/packages/react-kit/.env.example +++ b/packages/react-kit/.env.example @@ -1,6 +1,6 @@ REACT_APP_WALLET_CONNECT_PROJECT_ID= -REACT_APP_MAGIC_API_KEY= -REACT_APP_INFURA_KEY= +STORYBOOK_REACT_APP_MAGIC_API_KEY= +STORYBOOK_INFURA_PROJECT_SECRET= STORYBOOK_DATA_TOKENS_LIST= STORYBOOK_DATA_ENV_NAME= STORYBOOK_DATA_SELLER_ID= diff --git a/packages/react-kit/.storybook/main.ts b/packages/react-kit/.storybook/main.ts index 8f6f3eb81..d38610f2c 100644 --- a/packages/react-kit/.storybook/main.ts +++ b/packages/react-kit/.storybook/main.ts @@ -79,6 +79,12 @@ const config: StorybookConfig = { }); config.plugins = config.plugins?.filter((plugin) => !!plugin); return config; + }, + env: (config) => { + console.log("main storybook", config, process.env); + return { + ...config + }; } }; export default config; diff --git a/packages/react-kit/package.json b/packages/react-kit/package.json index 07b2afdbc..3efb6fd6f 100644 --- a/packages/react-kit/package.json +++ b/packages/react-kit/package.json @@ -146,6 +146,7 @@ "@web3-react/metamask": "8.2.4", "babel-plugin-named-exports-order": "^0.0.2", "buffer": "6.0.3", + "chromatic": "^11.0.8", "copyfiles": "^2.4.1", "customize-cra": "^1.0.0", "eslint": "^8.10.0", diff --git a/packages/react-kit/src/lib/config/config.ts b/packages/react-kit/src/lib/config/config.ts index f82937e8a..4861e8f64 100644 --- a/packages/react-kit/src/lib/config/config.ts +++ b/packages/react-kit/src/lib/config/config.ts @@ -1,12 +1,12 @@ import { getRpcUrls } from "../const/networks"; -const magicLinkKey = process.env.REACT_APP_MAGIC_API_KEY; +const magicLinkKey = process.env.STORYBOOK_REACT_APP_MAGIC_API_KEY; if (!magicLinkKey) { - throw new Error("REACT_APP_MAGIC_API_KEY is not defined"); + throw new Error("STORYBOOK_REACT_APP_MAGIC_API_KEY is not defined"); } -const infuraKey = process.env.REACT_APP_INFURA_KEY; +const infuraKey = process.env.STORYBOOK_INFURA_PROJECT_SECRET; if (!infuraKey) { - throw new Error("REACT_APP_INFURA_KEY is not defined"); + throw new Error("STORYBOOK_INFURA_PROJECT_SECRET is not defined"); } export const CONFIG = { diff --git a/packages/react-kit/src/stories/cta/funds/WithdrawFundsButton.stories.tsx b/packages/react-kit/src/stories/cta/funds/WithdrawFundsButton.stories.tsx index 86e59df06..20423df58 100644 --- a/packages/react-kit/src/stories/cta/funds/WithdrawFundsButton.stories.tsx +++ b/packages/react-kit/src/stories/cta/funds/WithdrawFundsButton.stories.tsx @@ -1,11 +1,11 @@ +import { ComponentMeta, ComponentStory } from "@storybook/react"; import React, { useRef } from "react"; -import { ComponentStory, ComponentMeta } from "@storybook/react"; import { WithdrawFundsButton } from "../../../components/cta/funds/WithdrawFundsButton"; +import { BigNumber } from "ethers"; import { hooks } from "../../helpers/connect-wallet"; import { CtaButtonWrapper } from "../../helpers/CtaButtonWrapper"; -import { BigNumberish } from "ethers"; export default { title: "Visual Components/CTA/funds/WithdrawFundsButton", @@ -52,10 +52,7 @@ Simple.args = { tokensToWithdraw: [ { address: "", - amount: { - type: "BigNumber", - hex: "" - } as unknown as BigNumberish + amount: BigNumber.from(0) } ], disabled: false, diff --git a/packages/react-kit/src/stories/searchBar/SearchBar.stories.tsx b/packages/react-kit/src/stories/searchBar/SearchBar.stories.tsx index 6c7d5f66a..616c2a2e4 100644 --- a/packages/react-kit/src/stories/searchBar/SearchBar.stories.tsx +++ b/packages/react-kit/src/stories/searchBar/SearchBar.stories.tsx @@ -1,6 +1,7 @@ +import { ComponentMeta, ComponentStory } from "@storybook/react"; import React from "react"; -import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { EnvironmentType, getEnvConfigs } from "@bosonprotocol/core-sdk"; import { SearchBar } from "../../components/searchBar/SearchBar"; export default { @@ -13,8 +14,11 @@ const Template: ComponentStory = (args) => ( ); export const Primary: ComponentStory = Template.bind({}); - +const envName = + (process.env.STORYBOOK_DATA_ENV_NAME as EnvironmentType) || "testing"; +const envConfig = getEnvConfigs(envName); Primary.args = { disabled: false, - envName: "testing" + envName, + configId: envConfig[0].configId };