@xyo-network/xl1-react-storybook

Storybook helpers and decorators for XL1 React packages.

Description

XL1 is the XYO Layer One blockchain protocol. This package provides Storybook decorators and related helpers used when developing XL1 React components. It is intentionally separate from @xyo-network/xl1-react-client-sdk so Storybook is not a dependency of the main client SDK.

Install

Using npm:

npm i --save-dev @xyo-network/xl1-react-storybook

Using yarn:

yarn add --dev @xyo-network/xl1-react-storybook

Using pnpm:

pnpm add -D @xyo-network/xl1-react-storybook

Using bun:

bun add -d @xyo-network/xl1-react-storybook

Install peer dependencies from this package's peerDependencies in package.json, especially react, @mui/material, and @storybook/react-vite.

Usage

import type { Meta, StoryObj } from '@storybook/react-vite'
import { IframeWalletWarningDecorator } from '@xyo-network/xl1-react-storybook'
import { SignTransactionButton } from '@xyo-network/xl1-react-client-sdk/client'

const meta = {
  component: SignTransactionButton,
  decorators: [IframeWalletWarningDecorator],
  title: 'Client/SignTransactionButton',
} satisfies Meta<typeof SignTransactionButton>

export default meta

Documentation

Exports include:

• IframeWalletWarningDecorator - warning banners for iframe rendering and missing XL1 wallet extension.
• WithMockWallet - mocks globalThis.xyo for wallet present/absent/late-arrival story scenarios.

Building Locally

pnpm xy build @xyo-network/xl1-react-storybook
pnpm xy lint @xyo-network/xl1-react-storybook

License

See the LICENSE file for license rights and limitations (LGPL-3.0-only).

Credits

Made with 🔥 and ❄️ by XYO Foundation