Ghost/ghost/signup-form/.storybook/preview.tsx

import React from 'react';

import type { Preview } from "@storybook/react";
import './storybook.css';

const transparencyGrid = `url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ERectangle%3C/title%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23F2F6F8' d='M0 0h24v24H0z'/%3E%3Cpath fill='%23E5ECF0' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/g%3E%3C/svg%3E")`

const preview: Preview = {
	parameters: {
		actions: { argTypesRegex: "^on[A-Z].*" },
		controls: {
			matchers: {
				color: /(background|color)$/i,
				date: /Date$/,
			},
		},
		options: {
			storySort: {
				order: ['Global', 'Settings', 'Experimental'],
			},
		},
	},
	decorators: [
		(Story, context) => (
			<div className="signup-form" style={{
                padding: '24px',
                backgroundImage: context.tags.includes('transparency-grid') ? transparencyGrid : undefined
            }}>
				{/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
				<Story />
			</div>
		),
	],
};

export default preview;