diff --git a/ghost/signup-form/.storybook/preview.tsx b/ghost/signup-form/.storybook/preview.tsx
index 280d5377dd..9fe273b3b2 100644
--- a/ghost/signup-form/.storybook/preview.tsx
+++ b/ghost/signup-form/.storybook/preview.tsx
@@ -1,36 +1,88 @@
import React from 'react';
+import i18nLib from '@tryghost/i18n';
-import type { Preview } from "@storybook/react";
+import type {Preview} from "@storybook/react";
import './storybook.css';
+import {AppContextProvider, AppContextType} from '../src/AppContext';
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) => (
-
(
+
- {/* π Decorators in Storybook also accept a function. Replace with Story() to enable it */}
-
-
- ),
- ],
-};
+ {/* π Decorators in Storybook also accept a function. Replace
with Story() to enable it */}
+
+
+ ),
+ (Story, {context, globals}) => {
+ const i18n = i18nLib(globals.locale || 'en', 'signup-form');
+ const c: AppContextType = {
+ page: {
+ name: 'FormPage',
+ data: {}
+ },
+ setPage: () => { },
+ api: {
+ sendMagicLink: async () => {
+ // Sleep to ensure the loading state is visible enough
+ await new Promise((resolve) => {
+ setTimeout(resolve, 2000);
+ });
+
+ return true;
+ }
+ },
+ t: i18n.t,
+ scriptTag: document.createElement('div'),
+ options: {
+ site: 'localhost',
+ locale: globals.locale || 'en',
+ title: 'Signup Forms Weekly',
+ description: 'An independent publication about embeddable signup forms.',
+ buttonColor: '#121212',
+ backgroundColor: '#ffffff',
+ labels: [],
+ ...context
+ }
+ };
+
+ return (
+ {/* π Decorators in Storybook also accept a function. Replace with Story() to enable it */}
+
+ );
+ }
+ ],
+};
export default preview;
diff --git a/ghost/signup-form/src/App.tsx b/ghost/signup-form/src/App.tsx
index 2c33eb8790..1b92a12d18 100644
--- a/ghost/signup-form/src/App.tsx
+++ b/ghost/signup-form/src/App.tsx
@@ -1,5 +1,5 @@
-import * as i18nLib from '@tryghost/i18n';
import React, {ComponentProps} from 'react';
+import i18nLib from '@tryghost/i18n';
import pages, {Page, PageName} from './pages';
import {AppContextProvider, AppContextType} from './AppContext';
import {ContentBox} from './components/ContentBox';
@@ -30,7 +30,7 @@ const App: React.FC = ({scriptTag}) => {
} as Page);
};
- const i18n = i18nLib.default(options.locale, 'signup-form');
+ const i18n = i18nLib(options.locale, 'signup-form');
const context: AppContextType = {
page,
api,
diff --git a/ghost/signup-form/src/Preview.stories.tsx b/ghost/signup-form/src/Preview.stories.tsx
index e92185b241..6b44746b8b 100644
--- a/ghost/signup-form/src/Preview.stories.tsx
+++ b/ghost/signup-form/src/Preview.stories.tsx
@@ -1,5 +1,5 @@
-import * as i18nLib from '@tryghost/i18n';
import React, {ComponentProps, useState} from 'react';
+import i18nLib from '@tryghost/i18n';
import pages, {Page, PageName} from './pages';
import {AppContextProvider, SignupFormOptions} from './AppContext';
import {ContentBox} from './components/ContentBox';
@@ -27,7 +27,7 @@ const Preview: React.FC