feat: add clickable badges with extensions to T22 page (solana-foundation#556)

## Description

This PR adds clickable bades with extensions to T22 page.

## Type of change

-   [x] New feature

## Screenshots


https://github.com/user-attachments/assets/79c8c23d-868f-4b4e-9b2a-83b1125bb6f1


## Testing

`pnpm t`

## Related Issues

solana-foundation#534 

## Checklist

-   [x] My code follows the project's style guidelines
-   [x] I have added tests that prove my fix/feature works
-   [x] All tests pass locally and in CI
-   [x] I have updated documentation as needed
-   [x] CI/CD checks pass
-   [x] I have included screenshots for protocol screens (if applicable)

<!-- ELLIPSIS_HIDDEN -->

----

> [!IMPORTANT]
> Add clickable badges for token extensions on T22 page with Storybook
support and tests.
> 
>   - **Features**:
> - Add clickable badges for token extensions on T22 page in
`TokenExtensionsStatusRow.tsx` and `TokenExtensionsSection.tsx`.
> - Implement `TokenExtensionBadge` and `TokenExtensionBadges`
components for displaying extension statuses.
> - Introduce `useTokenExtensionNavigation` hook for managing navigation
to token extensions.
>   - **Storybook**:
> - Add Storybook configuration in `.storybook/main.ts` and
`.storybook/preview.tsx`.
> - Add stories for `TokenExtensionBadge` and `TokenExtensionBadges` in
`TokenExtensionBadge.stories.tsx` and
`TokenExtensionBadges.stories.tsx`.
>   - **Testing**:
> - Add tests for token extension components using Storybook and Vitest
in `vitest.workspace.ts` and `TokenExtensionsStatusRow.stories.tsx`.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=solana-foundation%2Fexplorer&utm_source=github&utm_medium=referral)<sup>
for d4bec92. It will automatically
update as commits are pushed.</sup>

<!-- ELLIPSIS_HIDDEN -->

Author: rogaldh

.github/workflows/ci.yaml

@@ -58,4 +58,5 @@ jobs:
       - name: Test
         env:
           TEST_SERIAL_TIMEOUT: ${{ vars.TEST_SERIAL_TIMEOUT }}
-        run: pnpm test:ci
+        run: |
+          pnpm test:ci

.gitignore

@@ -38,4 +38,5 @@ next-env.d.ts
 .swc/
 
 # vim
-.editorconfig
+.editorconfig
+*storybook.log

.storybook/layout.min.css

@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/experimental-nextjs-vite';
+
+const config: StorybookConfig = {
+    stories: ['../app/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: ['@storybook/addon-essentials', '@storybook/experimental-addon-test'],
+    framework: {
+        name: '@storybook/experimental-nextjs-vite',
+        options: {},
+    },
+    staticDirs: ['../public'],
+};
+export default config;

.storybook/main.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+    theme: themes.light,
+});

.storybook/manager.ts

@@ -0,0 +1,37 @@
+import type { Preview } from '@storybook/react';
+import React from 'react';
+
+import { Rubik } from 'next/font/google';
+// import './layout.min.css';
+import '@/app/styles.css';
+
+const rubikFont = Rubik({
+    display: 'auto',
+    subsets: ['latin'],
+    variable: '--explorer-default-font',
+    weight: ['300', '400', '700'],
+});
+
+const preview: Preview = {
+    parameters: {
+        backgrounds: {
+            values: [{ name: 'Dark', value: '#161b19' }],
+            default: 'Dark',
+        },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+    decorators: [
+        Story => (
+            <div id="storybook-outer" className={rubikFont.className}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default preview;

.storybook/preview.tsx

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/experimental-nextjs-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

.storybook/vitest.setup.ts

@@ -0,0 +1,52 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
+import { defineWorkspace } from 'vitest/config';
+
+const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/writing-tests/test-addon
+export const config = defineWorkspace([
+    'vite.config.mts',
+    {
+        extends: 'vite.config.mts',
+        plugins: [
+            // The plugin will run tests for the stories defined in your Storybook config
+            // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
+            storybookTest({ configDir: path.join(dirname, '.storybook') }),
+            nodePolyfills({
+                // // To exclude specific polyfills, add them to this list. Note: if include is provided, this has no effect
+                // exclude: [
+                //     'http', // Excludes the polyfill for `http` and `node:http`.
+                // ],
+                // Whether to polyfill specific globals.
+                globals: {
+                    Buffer: true, // can also be 'build', 'dev', or false
+                    global: true,
+                    process: true,
+                },
+                // To add only specific polyfills, add them here. If no option is passed, adds all polyfills
+                include: ['path', 'util'],
+                // // Override the default polyfills for specific modules.
+                // overrides: {
+                //     // Since `fs` is not supported in browsers, we can use the `memfs` package to polyfill it.
+                //     fs: 'memfs',
+                // },
+                // // Whether to polyfill `node:` protocol imports.
+                // protocolImports: false,
+            }),
+        ],
+        test: {
+            browser: {
+                enabled: true,
+                headless: true,
+                name: 'chromium',
+                provider: 'playwright',
+            },
+            name: 'storybook',
+            setupFiles: ['.storybook/vitest.setup.ts'],
+        },
+    },
+]);

_vitest.workspace.ts

@@ -0,0 +1,22 @@
+import { PublicKey } from '@solana/web3.js';
+
+import { TokenExtension } from '../validators/accounts/token-extension';
+
+export const transferFeeConfig0 = {
+    extension: 'transferFeeConfig',
+    state: {
+        newerTransferFee: {
+            epoch: 200,
+            maximumFee: 2000000,
+            transferFeeBasisPoints: 200,
+        },
+        olderTransferFee: {
+            epoch: 100,
+            maximumFee: 1000000,
+            transferFeeBasisPoints: 100,
+        },
+        transferFeeConfigAuthority: new PublicKey('2apBGMsS6ti9RyF5TwQTDswXBWskiJP2LD4cUEDqYJjk'),
+        withdrawWithheldAuthority: new PublicKey('3apBGMsS6ti9RyF5TwQTDswXBWskiJP2LD4cUEDqYJjk'),
+        withheldAmount: 500000,
+    },
+} as TokenExtension;

app/__tests__/mock-parsed-extensions-stubs.ts

@@ -1,4 +1,5 @@
 'use client';
+import './styles.css';
 
 import { AddressLookupTableAccountSection } from '@components/account/address-lookup-table/AddressLookupTableAccountSection';
 import { isAddressLookupTableAccount } from '@components/account/address-lookup-table/types';