Fixed Storybook missing context

no issue

Storybook didn't have access to the `t` method needed for translations. This change adds a Storybook decorator to all stories.

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) => (
-			<div className="signup-form" style={{
+    parameters: {
+        actions: {argTypesRegex: "^on[A-Z].*"},
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+            },
+        },
+        options: {
+            storySort: {
+                order: ['Global', 'Settings', 'Experimental'],
+            },
+        },
+    },
+    globalTypes: {
+        locale: {
+            description: 'Internationalization locale',
+            defaultValue: 'en',
+            toolbar: {
+                icon: 'globe',
+                items: [
+                    {value: 'en', right: '🇺🇸', title: 'English'},
+                    {value: 'nl', right: '🇳🇱', title: 'Nederlands'},
+                ],
+            },
+        },
+    },
+    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>
-		),
-	],
-};
+                {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+                <Story />
+            </div>
+        ),
 
+        (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 (<AppContextProvider value={c}>
+                {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+                <Story />
+            </AppContextProvider>);
+        }
+    ],
+};
 export default preview;

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<AppProps> = ({scriptTag}) => {
         } as Page);
     };
 
-    const i18n = i18nLib.default(options.locale, 'signup-form');
+    const i18n = i18nLib(options.locale, 'signup-form');
     const context: AppContextType = {
         page,
         api,

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<SignupFormOptions & {
     const PageComponent = pages[page.name];
     const data = page.data as any;
 
-    const i18n = i18nLib.default('en', 'signup-form');
+    const i18n = i18nLib(options.locale || 'en', 'signup-form');
 
     return <AppContextProvider value={{
         page,