feat: deploy storybook with chromatic

.github/workflows/build-extension.yml

@@ -1,11 +1,12 @@
-name: PR Extensions builds
+name: PR extension build
+
 on: [pull_request, workflow_dispatch]
 
 jobs:
   pre-run:
     runs-on: ubuntu-latest
     steps:
-      - name: Cancel Previous Runs
+      - name: Cancel previous runs
         uses: styfle/cancel-workflow-action@main
         with:
           access_token: ${{ github.token }}
@@ -54,7 +55,7 @@ jobs:
           COMMIT_SHA: ${{ env.SHORT_SHA }}
 
       - uses: actions/upload-artifact@v3
-        name: Upload ${{ matrix.target }} Extension Zip
+        name: Upload ${{ matrix.target }} extension zip
         with:
           name: leather-${{ matrix.target }}-${{ env.SHORT_SHA }}
           path: dist

.github/workflows/chromatic.yml

@@ -0,0 +1,17 @@
+name: Chromatic
+
+on: [pull_request, workflow_dispatch]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/provision
+
+      - name: Publish to Chromatic
+      - uses: chromaui/action@latest
+        with:
+          autoAcceptChanges: 'main'
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/development-extension.yml

@@ -1,4 +1,5 @@
-name: Development Extension
+name: Development extension
+
 on:
   push:
     branches:

.github/workflows/notify-release.yml

@@ -1,6 +1,6 @@
 # Sends a notification to Discord whenever a new version of Leather is available in FireFox or Chrome stores
+name: Notify on release
 
-name: Notify on Release
 on:
   schedule:
     # Run every hour

.github/workflows/playwright.yml

@@ -1,4 +1,4 @@
-name: Integration Tests
+name: Integration tests
 
 env:
   CI: true

.github/workflows/publish-extensions.yml

@@ -1,4 +1,5 @@
-name: Publish Extensions
+name: Publish extensions
+
 on:
   push:
     tags-ignore:

package.json

@@ -1,9 +1,11 @@
 {
-  "name": "@stacks/wallet-web",
-  "description": "Leather is browser extension for interacting with Stacks apps",
+  "name": "@leather-wallet/extension",
+  "description": "Leather is a browser extension for interacting with Stacks apps",
   "private": true,
   "version": "6.21.2",
-  "author": "Hiro Systems PBC",
+  "author": {
+    "name": "Leather Wallet LLC"
+  },
   "scripts": {
     "dev": "concurrently --raw \"node webpack/dev-server.js\" \"redux-devtools --hostname=localhost --port=8000\"",
     "dev:test-app": "webpack serve --config test-app/webpack/webpack.config.dev.js",
@@ -36,13 +38,14 @@
     "prepare": "panda codegen",
     "storybook": "storybook dev -p 6006",
     "storybook-docs": "storybook dev --docs",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=CHROMATIC_PROJECT_TOKEN"
   },
   "license": "MIT",
   "main": "index.js",
   "repository": {
     "type": "git",
-    "url": "[email protected]:leather-wallet/extension.git"
+    "url": "git+ssh://git@github.com/leather-wallet/extension.git"
   },
   "webExt": {
     "sourceDir": "dist/"
@@ -286,6 +289,7 @@
     "bip32": "4.0.0",
     "blns": "2.0.4",
     "browserslist": "4.22.1",
+    "chromatic": "10.2.0",
     "chrome-webstore-upload-cli": "2.2.2",
     "clean-webpack-plugin": "4.0.0",
     "concurrently": "8.0.1",

src/app/ui/components/dowpdown-menu/dropdown-menu.stories.tsx

@@ -2,24 +2,24 @@ import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ListItemType } from '../list/list-item';
-import { DropdownMenu } from './dropdown-menu';
+import { DropdownMenu as Component } from './dropdown-menu';
 import { DropdownMenuItem } from './dropdown-menu-item';
 import { DropdownMenuSectionLabel } from './dropdown-menu-section-label';
 
 const items: ListItemType[] = [{ label: 'Label 1' }, { label: 'Label 2' }];
 
-const meta: Meta<typeof DropdownMenu> = {
-  component: DropdownMenu,
+const meta: Meta<typeof Component> = {
+  component: Component,
   tags: ['autodocs'],
   title: 'Dropdown Menu',
 };
 
 export default meta;
-type Story = StoryObj<typeof DropdownMenu>;
+type Story = StoryObj<typeof Component>;
 
-export const Primary: Story = {
+export const DropdownMenu: Story = {
   render: () => (
-    <DropdownMenu>
+    <Component>
       <RadixDropdownMenu.Group>
         <DropdownMenuSectionLabel label="Items" />
         {items.map(item => {
@@ -33,6 +33,6 @@ export const Primary: Story = {
           );
         })}
       </RadixDropdownMenu.Group>
-    </DropdownMenu>
+    </Component>
   ),
 };

src/app/ui/components/select/select.stories.tsx

@@ -2,24 +2,24 @@ import * as RadixSelect from '@radix-ui/react-select';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ListItemType } from '../list/list-item';
-import { Select } from './select';
+import { Select as Component } from './select';
 import { SelectItem } from './select-item';
 import { SelectSectionLabel } from './select-section-label';
 
 const items: ListItemType[] = [{ label: 'Label 1' }, { label: 'Label 2' }];
 
-const meta: Meta<typeof Select> = {
-  component: Select,
+const meta: Meta<typeof Component> = {
+  component: Component,
   tags: ['autodocs'],
   title: 'Select',
 };
 
 export default meta;
-type Story = StoryObj<typeof Select>;
+type Story = StoryObj<typeof Component>;
 
-export const Primary: Story = {
+export const Select: Story = {
   render: () => (
-    <Select>
+    <Component>
       <RadixSelect.Group>
         <SelectSectionLabel label="Items" />
         {items.map(item => {
@@ -33,6 +33,6 @@ export const Primary: Story = {
           );
         })}
       </RadixSelect.Group>
-    </Select>
+    </Component>
   ),
 };