@transferwise/components 46.147.0 → 46.148.0

package/src/dimmer/Dimmer.story.tsx

@@ -3,6 +3,10 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { Button, Dimmer } from '..';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Dimmer,
@@ -16,6 +20,25 @@ export default {
 
 type Story = StoryObj<typeof Dimmer>;
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button v2 size="md" onClick={() => setOpen(true)}>
+        Open dimmer
+      </Button>
+      <Dimmer
+        open={open}
+        onClose={() => setOpen(false)}
+      />
+    </>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   render: (args) => {
     const [open, setOpen] = useState(false);
@@ -37,3 +60,4 @@ export const Basic: Story = {
     );
   },
 };
+

package/src/display/Display.story.tsx

@@ -3,12 +3,23 @@ import Money from '../money/Money';
 import Title from '../title/Title';
 
 import Display from './Display';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   title: 'Typography/Display',
   component: Display,
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Display type="display-large">
+  The world's most international account
+</Display>`,
+  scope: globalScope,
+});
+
 export const Basic = () => {
   const EN = 'compounding without subscription compounding without subscription'; // Made for hyphenation testing
   const DE = 'äöüßabcdefghijklmnopqrstuvwxyz';

package/src/divider/Divider.story.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import Divider from './Divider';
+import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
 
 /**
  * Wraps stories with a container (e.g., centered or padded).
@@ -86,6 +87,11 @@ export const Playground: Story = {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Divider level="section" />`,
+  scope: { Divider },
+});
+
 /**
  * There are three different types of divider – `section`, `subsection`, and `content` –
  * each designed to visually separate or group content. <br />

package/src/drawer/Drawer.story.tsx

@@ -3,6 +3,7 @@ import { Position, Priority } from '../common';
 import { Section, Button, Input, Modal, type DrawerProps, Body } from '..';
 import Drawer from './Drawer';
 import { lorem10, lorem20, lorem40, lorem5 } from '../test-utils';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Drawer,
@@ -15,6 +16,30 @@ export default {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button v2 onClick={() => setOpen(true)}>Open drawer</Button>
+      <Drawer
+        open={open}
+        position="right"
+        headerTitle="Drawer title"
+        onClose={() => setOpen(false)}
+        footerContent={
+          <Button v2 block onClick={() => setOpen(false)}>Done</Button>
+        }
+      >
+        <p>Drawer content goes here.</p>
+      </Drawer>
+    </>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic = {
   args: {
     position: Position.RIGHT,

package/src/dropFade/DropFade.story.tsx

@@ -2,6 +2,7 @@ import { action } from 'storybook/actions';
 import { useState } from 'react';
 
 import { Button, Nudge } from '..';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import DropFade from './DropFade';
 
@@ -10,6 +11,32 @@ export default {
   component: DropFade,
 };
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [show, setShow] = React.useState(false);
+
+  return (
+    <>
+      <DropFade show={show}>
+        <div>
+          <Nudge
+            mediaName="globe"
+            title="Did you know it's cool to be Wise?"
+            link="Get Wise"
+            href="https://wise.com"
+            onDismiss={() => setShow(false)}
+          />
+        </div>
+      </DropFade>
+      <Button v2 className="m-t-3" block onClick={() => setShow(!show)}>
+        Toggle DropFade
+      </Button>
+    </>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic = () => {
   const [open, setOpen] = useState(false);
   return (

package/src/emphasis/Emphasis.story.tsx

@@ -1,6 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Emphasis from './Emphasis';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Emphasis,
@@ -9,6 +13,11 @@ export default {
 
 type Story = StoryObj<typeof Emphasis>;
 
+export const Sandbox = createSandboxStory({
+  code: `<Emphasis text="This is <important>important</important> and this is <positive>positive</positive>." />`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   args: {
     text:
@@ -19,3 +28,4 @@ export const Basic: Story = {
       '<script>alert("nice try!")</script>',
   },
 };
+

package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx

@@ -3,6 +3,10 @@ import { Meta, StoryObj, Decorator } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { Flag } from '@wise/art';
 import { Rewards, Tags } from '@transferwise/icons';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { storySourceWithoutNoise } from '../../.storybook/helpers';
 import { lorem10, lorem5 } from '../test-utils';
 import { Sentiment } from '../common';
@@ -81,6 +85,39 @@ export const Playground: Story = {
   render: (args: ExpressiveMoneyInputProps) => <ExpressiveMoneyInput {...args} />,
 };
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [amount, setAmount] = React.useState(1234.56);
+  const [currency, setCurrency] = React.useState('GBP');
+
+  return (
+    <ExpressiveMoneyInput
+      label="You send"
+      amount={amount}
+      currency={currency}
+      onAmountChange={(value) => setAmount(value)}
+      currencySelector={{
+        options: [
+          {
+            title: 'Popular',
+            currencies: [
+              { code: 'GBP', label: 'British pound', keywords: ['british'] },
+              { code: 'EUR', label: 'Euro', keywords: ['euro'] },
+              { code: 'USD', label: 'US Dollar', keywords: ['dollar'] },
+            ],
+          },
+        ],
+        onChange: (selected) => setCurrency(selected.code),
+        onSearchChange: () => {},
+        onOpen: () => {},
+      }}
+      inlinePrompt={{ message: 'Low cost transfer', sentiment: 'positive' }}
+    />
+  );
+};`,
+  scope: globalScope,
+});
+
 export const WithInitialAmount = {
   args: {
     amount: 1500,

package/src/field/Field.story.tsx

@@ -1,6 +1,10 @@
 import { useState } from 'react';
 import { action } from 'storybook/actions';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { Input } from '../inputs/Input';
 import { Field, FieldProps } from './Field';
 import { Sentiment } from '../common';
@@ -21,6 +25,18 @@ export default {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Field
+  label="Email address"
+  description="We'll send confirmation here"
+  message="Please enter a valid email"
+  sentiment="negative"
+>
+  <Input placeholder="you@example.com" />
+</Field>`,
+  scope: globalScope,
+});
+
 export const Basic = (args: FieldProps) => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (

package/src/flowNavigation/FlowNavigation.story.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Breakpoint } from '@transferwise/neptune-tokens';
 import { useState } from 'react';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import AvatarView from '../avatarView';
 import Body from '../body';
 import Button from '../button';
@@ -54,6 +55,30 @@ const viewports = [
   Breakpoint.LARGE + 10,
 ];
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [activeStep, setActiveStep] = React.useState(0);
+
+  return (
+    <FlowNavigation
+      avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+      logo={<Logo />}
+      activeStep={activeStep}
+      onClose={() => console.log('close')}
+      onGoBack={() => setActiveStep((prev) => (prev > 0 ? prev - 1 : 0))}
+      steps={[
+        { label: 'Amount', hoverLabel: '100 GBP', onClick: () => setActiveStep(0) },
+        { label: 'You', hoverLabel: 'Elena Durante', onClick: () => setActiveStep(1) },
+        { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
+        { label: 'Review', onClick: () => setActiveStep(3) },
+        { label: 'Pay', onClick: () => setActiveStep(4) },
+      ]}
+    />
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Variants: Story = {
   args: {
     profileType: ProfileType.PERSONAL,

package/src/header/Header.story.tsx

@@ -1,5 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import Header, { HeaderProps } from './Header';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 const withContainer = (Story: any) => (
   <div style={{ display: 'flex', justifyContent: 'center' }}>
@@ -83,6 +87,19 @@ export const Playground: Story = {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Header
+  title="Section header"
+  level="group"
+  action={{
+    'aria-label': 'View all',
+    text: 'View all',
+    href: '#',
+  }}
+/>`,
+  scope: globalScope,
+});
+
 /**
  * Demonstrates a `Header` with an associated action.
  */

package/src/iconButton/IconButton.story.tsx

@@ -13,6 +13,7 @@ import {
   Freeze,
 } from '@transferwise/icons';
 import { fn } from 'storybook/test';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import IconButton, { Props } from './IconButton';
 import SentimentSurface from '../sentimentSurface';
 
@@ -61,6 +62,19 @@ export const Playground: Story = {
   ),
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<IconButton
+  size={48}
+  priority="primary"
+  type="default"
+  aria-label="Add item"
+  onClick={() => console.log('clicked')}
+>
+  <Plus />
+</IconButton>`,
+  scope: globalScope,
+});
+
 /**
  * Priorities set a visual hierarchy amongst the buttons displayed on the
  * screen to help more important buttons to take precedence over others. <br />

package/src/image/Image.story.tsx

@@ -1,4 +1,5 @@
 import { action } from 'storybook/actions';
+import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
 import Image, { type ImageProps } from './Image';
 
 const meta = {
@@ -16,6 +17,16 @@ const meta = {
 };
 export default meta;
 
+export const Sandbox = createSandboxStory({
+  code: `<Image
+  alt="Wise illustration"
+  src="https://wise.com/web-art/assets/illustrations/bell-small@1x.webp"
+  loading="lazy"
+  stretch={false}
+/>`,
+  scope: { Image },
+});
+
 export const Basic = {
   render: (args: ImageProps) => (
     <>

package/src/info/Info.story.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { lorem10 } from '../test-utils';
 import Info from '.';
 import { withVariantConfig } from '../../.storybook/helpers';
@@ -22,6 +23,15 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const Sandbox = createSandboxStory({
+  code: `<Info
+  aria-label="Click here for more details"
+  title="Fast transfer hint"
+  content="Your address has been verified, no more actions are required."
+/>`,
+  scope: { ...globalScope, Info },
+});
+
 export const Basic: Story = {
   ...withVariantConfig(['default', 'dark', 'rtl']),
 };

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -1,5 +1,9 @@
 import { userEvent, within, fn } from 'storybook/test';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
 import { Field, FieldProps } from '../field/Field';
 import { Meta, type StoryObj } from '@storybook/react-webpack5';
@@ -24,6 +28,25 @@ const meta: Meta<typeof InputWithDisplayFormat> = {
 } satisfies Meta<typeof InputWithDisplayFormat>;
 export default meta;
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <Field label="Sort Code" id="sort-code">
+      <InputWithDisplayFormat
+        id="sort-code"
+        placeholder="**-**-**"
+        displayPattern="**-**-**"
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+      />
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   args: {
     label: 'Sort Code',

package/src/inputs/InputGroup.story.tsx

@@ -2,6 +2,10 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Search } from '@transferwise/icons';
 import { useRef, useState } from 'react';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { Button } from '..';
 import { Field } from '../field/Field';
 
@@ -18,6 +22,39 @@ export default {
 
 type Story = StoryObj<typeof InputGroup>;
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <Field label="Search">
+      <InputGroup
+        addonStart={{
+          content: <Search size={24} />,
+          initialContentWidth: 24,
+        }}
+        addonEnd={{
+          content: (
+            <Button v2 size="sm" onClick={() => setValue('')}>
+              Clear
+            </Button>
+          ),
+          interactive: true,
+          padding: 'sm',
+        }}
+      >
+        <Input
+          placeholder="Search by name..."
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+        />
+      </InputGroup>
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const WithPrefix: Story = {
   render: (args) => <InputGroupWithPrefix {...args} />,
   args: {

package/src/inputs/SearchInput.story.tsx

@@ -1,6 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { Size } from '../common';
 import { Field } from '../field/Field';
 
@@ -13,6 +17,24 @@ export default {
 
 type Story = StoryObj<typeof SearchInput>;
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <Field label="Search">
+      <SearchInput
+        size="md"
+        shape="pill"
+        value={value}
+        onChange={(event) => setValue(event.currentTarget.value)}
+      />
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   render: (args) => <SearchInputBasic {...args} />,
   args: {

package/src/inputs/SelectInput/_stories/SelectInput.story.tsx

@@ -5,6 +5,10 @@ import { Flag } from '@wise/art';
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../../.storybook/components/sandbox/SandboxEditor';
 import Button from '../../../button';
 import { getMonthNames } from '../../../common/dateUtils';
 import Drawer from '../../../drawer';
@@ -307,6 +311,44 @@ export const Playground: StoryObj<PlaygroundArgs> = {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const months = [
+    { id: 1, name: 'January' },
+    { id: 2, name: 'February' },
+    { id: 3, name: 'March' },
+    { id: 4, name: 'April' },
+    { id: 5, name: 'May' },
+    { id: 6, name: 'June' },
+  ];
+
+  const [selected, setSelected] = React.useState(undefined);
+
+  return (
+    <Field label="Select a month">
+      <SelectInput
+        size="lg"
+        filterable
+        filterPlaceholder="Type a month name"
+        placeholder="Choose a month"
+        items={months.map((month) => ({
+          type: 'option',
+          value: month,
+          filterMatchers: [month.name],
+        }))}
+        renderValue={(month) => (
+          <SelectInputOptionContent title={month.name} />
+        )}
+        value={selected}
+        onChange={(month) => setSelected(month)}
+        onClear={() => setSelected(undefined)}
+      />
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
+
 /**
  * The simplest usage: a flat list of options with no icons or grouping.
  * `renderValue` controls what is shown in both the trigger and each dropdown row.

package/src/inputs/TextArea.story.tsx

@@ -1,6 +1,10 @@
 import { useEffect, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { Field } from '../field/Field';
 import { Sentiment } from '../common';
 import { TextArea } from './TextArea';
@@ -54,6 +58,24 @@ export const Playground: Story = {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <Field label="Message" required={false}>
+      <TextArea
+        maxLength={200}
+        placeholder="Type something..."
+        value={value}
+        onChange={({ target }) => setValue(target.value)}
+      />
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   render: () => {
     const [value, setValue] = useState('');

package/src/instructionsList/InstructionsList.story.tsx

@@ -4,6 +4,10 @@ import { fn } from 'storybook/test';
 import Link from '../link';
 
 import InstructionsList, { InstructionsListProps } from './InstructionsList';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: InstructionsList,
@@ -13,6 +17,21 @@ export default {
 
 type Story = StoryObj<typeof InstructionsList>;
 
+export const Sandbox = createSandboxStory({
+  code: `<InstructionsList
+  sort="dosFirst"
+  dos={[
+    'Do an initial money transfer',
+    'Invite at least 3 friends',
+  ]}
+  donts={[
+    'Paying extra hidden fees for transfers',
+    'Use bad exchange rate',
+  ]}
+/>`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   args: {
     sort: 'dosFirst',