From 57af3b92ea3e8c4b89c06d6a2a01fe6c2a236631 Mon Sep 17 00:00:00 2001
From: Eric Schultz <eric@commitchange.com>
Date: Sat, 24 Oct 2020 15:02:06 -0500
Subject: [PATCH] Extract the Intl decorator for storybook

---
 .storybook/react/preview.js                    | 18 +++++-------------
 app/javascript/components/tests/intl/index.tsx | 13 +++++++++++++
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/.storybook/react/preview.js b/.storybook/react/preview.js
index a66573ad..d8d2dbbe 100644
--- a/.storybook/react/preview.js
+++ b/.storybook/react/preview.js
@@ -1,14 +1,6 @@
-import { addDecorator } from '@storybook/react';
-import { withIntl, setIntlConfig } from '../../app/javascript/components/tests/intl';
+// License: LGPL-3.0-or-later
+import intlDecorate from '../../app/javascript/components/tests/intl';
+const jest = require('jest-mock');
+window.jest = jest;
 
-const messages = {
-  'en': { 'button.label': 'Click me!' },
-}
-setIntlConfig({
-  locales: ['en', 'de'],
-  defaultLocale: 'en',
-  // we use this form becuase it allows the story to be viewed in IE11
-  getMessages: function(locale) { return messages[locale]}
-});
-
-addDecorator(withIntl)
\ No newline at end of file
+export const decorators = [intlDecorate()]
\ No newline at end of file
diff --git a/app/javascript/components/tests/intl/index.tsx b/app/javascript/components/tests/intl/index.tsx
index 8d7580b4..1df38c54 100644
--- a/app/javascript/components/tests/intl/index.tsx
+++ b/app/javascript/components/tests/intl/index.tsx
@@ -1,9 +1,12 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import addons from '@storybook/addons';
 import omit  from 'lodash/omit';
 import { IntlProvider} from '../../intl';
+const messages = require('../../../i18n.js');
+
 export let _config:any = null;
 
 const EVENT_SET_CONFIG_ID = "intl/set_config";
@@ -101,6 +104,16 @@ export const withIntl = (story:any):JSX.Element => {
 	);
 };
 
+export default function decorate() {
+	setIntlConfig({
+		locales: Object.keys(messages.translations),
+		defaultLocale: messages.defaultLocale,
+		// we use this form becuase it allows the story to be viewed in IE11
+		getMessages: function(locale:string) { return {...messages.translations[messages.defaultLocale], ...messages.translations[locale]};},
+	});
+	return withIntl;
+}
+