Release/ability

.eslintrc.cjs

@@ -22,9 +22,15 @@ module.exports = {
     'plugin:react/jsx-runtime',
     'plugin:react-hooks/recommended',
     'plugin:storybook/recommended',
+    'plugin:storybook/csf',
   ],
   ignorePatterns: ['./leather-styles'],
   plugins: ['react', 'react-hooks', '@typescript-eslint', 'deprecation'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
   rules: {
     // This rule helps highlight areas of the code that use deprecated
     // methods, such as implicit use of signed transactions

.github/workflows/build-extension.yml

@@ -11,23 +11,33 @@ jobs:
         with:
           access_token: ${{ github.token }}
 
-  set-in-progress-message:
-    if: github.repository == 'leather-wallet/extension' && github.actor != 'dependabot[bot]'
+  sha-hash:
     runs-on: ubuntu-latest
+    outputs:
+      SHORT_SHA: ${{ steps.short-sha.outputs.SHORT_SHA }}
     steps:
       - name: Make short commit SHA
-        run: echo "SHORT_SHA=`echo ${{ github.event.pull_request.head.sha }} | cut -c1-7`" >> $GITHUB_ENV
+        id: short-sha
+        run: echo "SHORT_SHA=`echo ${{ github.event.pull_request.head.sha }} | cut -c1-7`" >> $GITHUB_OUTPUT
 
+  set-in-progress-message:
+    if: github.repository == 'leather-wallet/extension' && github.actor != 'dependabot[bot]'
+    runs-on: ubuntu-latest
+    needs:
+      - pre-run
+      - sha-hash
+    steps:
       - uses: kyranjamie/[email protected]
         with:
-          header: '> _Building Leather at commit ${{ env.SHORT_SHA }}_'
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          header: '> _Building Leather at commit ${{ needs.sha-hash.outputs.SHORT_SHA }}_'
+          GITHUB_TOKEN: ${{ secrets.LEATHER_BOT }}
 
   build:
     name: build-${{ matrix.target }}-extension
     runs-on: ubuntu-latest
     needs:
       - pre-run
+      - sha-hash
     strategy:
       matrix:
         # Firefox removed while off store
@@ -39,8 +49,6 @@ jobs:
 
       - uses: ./.github/actions/provision
 
-      - run: echo "SHORT_SHA=`echo ${{ github.event.pull_request.head.sha }} | cut -c1-7`" >> $GITHUB_ENV
-
       - name: Build project
         run: pnpm build
         env:
@@ -53,47 +61,37 @@ jobs:
           TRANSAK_API_KEY: ${{ secrets.TRANSAK_API_KEY }}
           BESTINSLOT_API_KEY: ${{ secrets.BESTINSLOT_API_KEY }}
           PR_NUMBER: ${{ github.event.number }}
-          COMMIT_SHA: ${{ env.SHORT_SHA }}
+          COMMIT_SHA: ${{ needs.sha-hash.outputs.SHORT_SHA }}
 
       - uses: actions/upload-artifact@v3
         name: Upload ${{ matrix.target }} extension zip
         with:
-          name: leather-${{ matrix.target }}-${{ env.SHORT_SHA }}
+          name: leather-${{ matrix.target }}-${{ needs.sha-hash.outputs.SHORT_SHA }}
           path: dist
 
-  chromatic:
-    runs-on: ubuntu-latest
-    outputs:
-      storybook_url: ${{ steps.chromatic.outputs.storybookUrl }}
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - uses: ./.github/actions/provision
-
-      - name: Deploy to Chromatic
-        id: chromatic
-        uses: chromaui/action@latest
-        with:
-          autoAcceptChanges: 'main'
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          token: ${{ secrets.GITHUB_TOKEN }}
-
   set-download-link:
     if: github.repository == 'leather-wallet/extension' && github.actor != 'dependabot[bot]'
     runs-on: ubuntu-latest
     needs:
       - pre-run
+      - sha-hash
       - build
-      - chromatic
     steps:
       - name: Extract branch name
-        shell: bash
         run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT
         id: extract_branch
 
+      - name: Storybook parsed branch name
+        id: storybook_branch
+        run: echo "STORYBOOK_BRANCH=`echo ${{ steps.extract_branch.outputs.branch }} | sed 's/\//\-/g'`" >> $GITHUB_OUTPUT
+
       - uses: kyranjamie/[email protected]
+        env:
+          EXTENSION_BUILD_LINK: '[Extension build](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})'
+          TEST_REPORT_LINK: '[Test report](https://leather-wallet.github.io/playwright-reports/${{ steps.extract_branch.outputs.branch }})'
+          STORYBOOK_LINK: '[Storybook](https://${{ steps.storybook_branch.outputs.STORYBOOK_BRANCH }}--65982789c7e2278518f189e7.chromatic.com)'
+          CHROMATIC_LINK: '[Chromatic](https://www.chromatic.com/library?appId=65982789c7e2278518f189e7&branch=${{ steps.extract_branch.outputs.branch }})'
         with:
-          header: '> Try out this version of Leather — [Extension build](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}), [Test report](https://leather-wallet.github.io/playwright-reports/${{ steps.extract_branch.outputs.branch }}), [Storybook preview](${{ needs.chromatic.outputs.storybook_url }})'
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.LEATHER_BOT }}
+          header: |
+            > Try out Leather build ${{ needs.sha-hash.outputs.SHORT_SHA }} — ${{ env.EXTENSION_BUILD_LINK }}, ${{ env.TEST_REPORT_LINK }}, ${{ env.STORYBOOK_LINK }}, ${{ env.CHROMATIC_LINK }}

.github/workflows/chromatic.yml

@@ -0,0 +1,24 @@
+name: Chromatic
+
+on: [pull_request]
+
+jobs:
+  chromatic:
+    if: github.repository == 'leather-wallet/extension' && github.actor != 'dependabot[bot]'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: ./.github/actions/provision
+
+      - name: Deploy to Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          autoAcceptChanges: '{main,dev}'
+          onlyChanged: true
+          exitZeroOnChanges: true
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.LEATHER_BOT }}

.github/workflows/publish-storybook.yml

@@ -0,0 +1,34 @@
+name: Publish Storybook
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - 'dev'
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'storybook-deploy'
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/provision
+
+      - run: pnpm build-storybook
+
+      - name: Deploy storybook.leather.io
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          personal_token: ${{ secrets.LEATHER_BOT }}
+          external_repository: leather-wallet/storybook
+          publish_branch: main
+          publish_dir: ./storybook-static
+          cname: storybook.leather.io

.gitignore

@@ -23,3 +23,4 @@ trace*
 leather-styles
 .netlify
 ./.vscode/settings.json
+storybook-static

.storybook/main.ts

@@ -37,16 +37,17 @@ const config: StorybookConfig = {
         ],
       },
     },
+    '@storybook/addon-mdx-gfm',
+    '@storybook/addon-webpack5-compiler-swc',
+    '@chromatic-com/storybook'
   ],
   docs: {
     autodocs: 'tag',
   },
   framework: {
     name: '@storybook/react-webpack5',
     options: {
-      builder: {
-        useSWC: true,
-      },
+      builder: {},
     },
   },
   staticDirs: ['../public'],

.storybook/manager-head.html

@@ -0,0 +1,5 @@
+<meta name="robots" content="noindex" />
+<link rel="stylesheet" href="./assets/base.css" />
+<link rel="preload" as="font" href="./assets/fonts/diatype/diatype-medium.woff2" />
+<link rel="preload" as="font" href="./assets/fonts/diatype/diatype-regular.woff2" />
+<link rel="preload" as="font" href="./assets/fonts/marche/marche-super-pro.woff2" />

.storybook/preview-head.html

@@ -1,4 +1,4 @@
 <link rel="stylesheet" href="/assets/base.css" />
-<link rel="preload" href="/assets/fonts/diatype/diatype-medium.woff2" />
-<link rel="preload" href="/assets/fonts/diatype/diatype-regular.woff2" />
-<link rel="preload" href="/assets/fonts/marche/marche-super-pro.woff2" />
+<link rel="preload" as="font" href="/assets/fonts/diatype/diatype-medium.woff2" />
+<link rel="preload" as="font" href="/assets/fonts/diatype/diatype-regular.woff2" />
+<link rel="preload" as="font" href="/assets/fonts/marche/marche-super-pro.woff2" />

README.md

@@ -1,9 +1,9 @@
 # Leather
 
 [![Chrome Web Store](https://img.shields.io/chrome-web-store/stars/ldinpeekobnhjjdofggfgjlcehhmanlj?label=Chrome%20Web%20Store)](https://chrome.google.com/webstore/detail/stacks-wallet/ldinpeekobnhjjdofggfgjlcehhmanlj)
-[![Mozilla Add-on](https://img.shields.io/amo/stars/leather-wallet?label=Firefox%20Add-on)](https://addons.mozilla.org/en-US/firefox/addon/leather-wallet/)
 [![coverage](https://raw.githubusercontent.com/leather-wallet/extension/gh-pages/badge.svg)](https://leather-wallet.github.io/extension/)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
+[![storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg)](https://storybook.leather.io)
 
 Leather is the most popular and trusted wallet for apps built on Bitcoin. Connect to apps and manage assets secured by Bitcoin and Bitcoin L2s with battle-tested wallet for the Stacks blockchain.