import { Meta, StoryObj } from '@storybook/react-webpack5'; import { ThemeProvider as ThemeProviderComp, type ThemeProviderProps, useTheme, } from '@wise/components-theming'; import Button from '../../button'; import { lorem100 } from '../../test-utils'; import Display from '../../display'; import Body from '../../body'; import FlowNavigation from '../../flowNavigation/FlowNavigation'; import AvatarView from '../../avatarView'; import SegmentedControl from '../../segmentedControl'; import Sticky from '../../sticky'; import { Field } from '../../field/Field'; // ThemeProvider external component, this mock makes Storybook generate Props Table function ThemeProvider(props: ThemeProviderProps) { return ; } export default { component: ThemeProvider, title: 'Foundations/ThemeProvider', tags: ['!manifest'], parameters: { docs: { description: { component: 'Components require `ThemeProvider` from `@wise/components-theming` to be wrapped around your application for theming support. Available themes include: `personal`, `business`, `platform`, and variants with different color schemes.', }, }, }, } satisfies Meta; type Story = StoryObj; export const PlatformTheme: Story = { render: () => ( ), }; export const BusinessLandingPage: Story = { render: () => ( Wise Business {lorem100} {lorem100} {lorem100} ), }; /** * Story demonstrating the theme switching functionality using the `useTheme` hook. */ export const SetThemeHook: Story = { name: 'setTheme', tags: ['new'], parameters: { padding: '0', }, render: () => { const ThemeSwitcher = () => { const { theme, setTheme } = useTheme(); return ( <> } />

Title {lorem100} {lorem100} {lorem100}

setTheme(value as typeof theme)} />

); }; return ( ); }, };