From 913161b7f6681d9540a39b1dea66e63cba5a3e6c Mon Sep 17 00:00:00 2001 From: Ahmed Mahmud Date: Mon, 5 Oct 2026 20:46:50 +0100 Subject: [PATCH 1/6] feat(storybook): bind stories to production tokens and accessibility (#552) --- .storybook/preview.ts | 61 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 .storybook/preview.ts diff --git a/.storybook/preview.ts b/.storybook/preview.ts new file mode 100644 index 00000000..a63abb74 --- /dev/null +++ b/.storybook/preview.ts @@ -0,0 +1,61 @@ +import type { Preview } from '@storybook/nextjs-vite'; + +import '../src/app/globals.css'; + +const preview: Preview = { + globalTypes: { + theme: { + description: 'Gate C colour scheme', + defaultValue: 'light', + toolbar: { + icon: 'mirror', + items: [ + { value: 'light', title: 'Light' }, + { value: 'dark', title: 'Dark' }, + ], + }, + }, + }, + decorators: [ + (Story, context) => { + const theme = context.globals.theme === 'dark' ? 'dark' : 'light'; + return ( +
+
+ +
+
+ ); + }, + ], + parameters: { + layout: 'padded', + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + a11y: { + test: 'error', + }, + viewport: { + options: { + mobile: { + name: 'Mobile · 390 × 844', + styles: { width: '390px', height: '844px' }, + }, + tablet: { + name: 'Tablet · 768 × 1024', + styles: { width: '768px', height: '1024px' }, + }, + desktop: { + name: 'Desktop · 1440 × 900', + styles: { width: '1440px', height: '900px' }, + }, + }, + }, + }, +}; + +export default preview; From 3da06843ca138d6cc424e025e93ccdab68c37799 Mon Sep 17 00:00:00 2001 From: Ahmed Mahmud Date: Mon, 5 Oct 2026 20:46:51 +0100 Subject: [PATCH 2/6] feat(storybook): name the approved Gate C catalog (#552) --- .storybook/manager.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 .storybook/manager.ts diff --git a/.storybook/manager.ts b/.storybook/manager.ts new file mode 100644 index 00000000..e38f8427 --- /dev/null +++ b/.storybook/manager.ts @@ -0,0 +1,10 @@ +import { addons } from 'storybook/manager-api'; +import { themes } from 'storybook/theming'; + +addons.setConfig({ + theme: { + ...themes.light, + brandTitle: 'TruthBounty · Gate C UI', + brandUrl: 'https://github.com/DigiNodes/truthbounty-protocol/tree/main/docs/ux-authority', + }, +}); From b274d9c25c54d810dfb9a60f6e9aba74fc7bfe22 Mon Sep 17 00:00:00 2001 From: Ahmed Mahmud Date: Mon, 5 Oct 2026 20:46:53 +0100 Subject: [PATCH 3/6] docs(storybook): define fixture and authority boundaries (#552) --- src/stories/README.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 src/stories/README.md diff --git a/src/stories/README.md b/src/stories/README.md new file mode 100644 index 00000000..9eef7d64 --- /dev/null +++ b/src/stories/README.md @@ -0,0 +1,31 @@ +# Gate C Storybook boundary + +Storybook implements the approved UX authority from +`truthbounty-protocol/docs/ux-authority` and the high-fidelity prototype in +`truthbounty-protocol/designs/frontend-v2/prototype`. + +## Rules + +- Stories display illustrative, visibly non-canonical data only. +- Story fixtures must remain inside `*.stories.*`, `*.test.*`, or an explicit + `__fixtures__` directory and may never be imported by production modules. +- Components receive capability and lifecycle state from adapters; they do not + infer protocol authority, settlement, rewards, confirmations, finality, or + projection freshness. +- Chain-confirmed and API-projected state are separate variants. +- Optimism/EVM is the only runtime. “Stellar Wave” is a contribution-program + label and is not product/runtime authority. +- New visual or interaction patterns require an authority mapping in the PR. + +## Required state coverage + +Every stateful component must cover the applicable loading, empty, stale, +disabled and error states. Transaction surfaces must distinguish pending, +confirmed, finalized, rejected, reverted, replaced, dropped, reorged and +indexer-delayed states. + +## Responsive and accessibility matrix + +Stories are checked at 390 px, 768 px and 1440 px, in light and dark themes. +Keyboard behavior, visible focus, semantic labels, contrast, reduced motion and +long-content behavior are required acceptance evidence. From ba99909a431667cf978d257cea670f686a14a2bc Mon Sep 17 00:00:00 2001 From: Ahmed Mahmud Date: Mon, 5 Oct 2026 20:47:10 +0100 Subject: [PATCH 4/6] feat(storybook): configure the Gate C story catalog (#552) --- .storybook/main.ts | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 33c2a7f7..dd80cda3 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,20 +1,26 @@ import type { StorybookConfig } from '@storybook/nextjs-vite'; const config: StorybookConfig = { - "stories": [ - "../src/**/*.mdx", - "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)" + stories: [ + '../src/**/*.mdx', + '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)', ], - "addons": [ - "@chromatic-com/storybook", - "@storybook/addon-vitest", - "@storybook/addon-a11y", - "@storybook/addon-docs", - "@storybook/addon-onboarding" + addons: [ + '@storybook/addon-a11y', + '@storybook/addon-docs', + '@storybook/addon-vitest', + '@chromatic-com/storybook', ], - "framework": "@storybook/nextjs-vite", - "staticDirs": [ - "..\\public" - ] + framework: { + name: '@storybook/nextjs-vite', + options: {}, + }, + docs: { + autodocs: 'tag', + }, + features: { + experimentalRSC: true, + }, }; -export default config; \ No newline at end of file + +export default config; From 20907c5a2c283103efc8be207201eb5a1c8f3a82 Mon Sep 17 00:00:00 2001 From: Ahmed Mahmud Date: Mon, 5 Oct 2026 20:47:29 +0100 Subject: [PATCH 5/6] fix(storybook): keep preview valid TypeScript (#552) --- .storybook/preview.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/.storybook/preview.ts b/.storybook/preview.ts index a63abb74..dcc6ed6b 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,3 +1,4 @@ +import { createElement } from 'react'; import type { Preview } from '@storybook/nextjs-vite'; import '../src/app/globals.css'; @@ -19,12 +20,14 @@ const preview: Preview = { decorators: [ (Story, context) => { const theme = context.globals.theme === 'dark' ? 'dark' : 'light'; - return ( -
-
- -
-
+ return createElement( + 'div', + { className: theme, 'data-theme': theme, style: { minHeight: '100vh' } }, + createElement( + 'div', + { className: 'bg-canvas text-ink min-h-screen p-6' }, + createElement(Story), + ), ); }, ], From 23e4f410df2860551ff8d6589d9b4ad9658c4cd4 Mon Sep 17 00:00:00 2001 From: Ahmed Mahmud Date: Mon, 5 Oct 2026 20:47:41 +0100 Subject: [PATCH 6/6] ci(storybook): require the Gate C catalog to build (#552) --- .github/workflows/ci.yml | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index ca06fe1e..8a774e9d 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -236,3 +236,21 @@ jobs: run: npm run type-check - name: Build production app run: npm run build + + storybook: + name: Storybook Gate C + runs-on: ubuntu-latest + needs: lint + steps: + - name: Checkout code + uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - name: Setup Node.js + uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24 + - name: Enable pnpm + run: corepack enable pnpm + - name: Install frozen dependencies + run: pnpm install --frozen-lockfile + - name: Build the isolated story catalog + run: pnpm build-storybook --quiet