Merged in SW-3270-move-interactive-map-to-design-system-or-booking-flow (pull request #2681)

SW-3270 move interactive map to design system or booking flow

* wip

* wip

* merge

* wip

* add support for locales in design-system

* add story for HotelCard

* setup alias

* .

* remove tracking from design-system for hotelcard

* pass isUserLoggedIn

* export design-system-new-deprecated.css from design-system

* Add HotelMarkerByType to Storybook

* Add interactive map to Storybook

* fix reactintl in vitest

* rename env variables

* .

* fix background colors

* add storybook stories for <Link />

* merge

* fix tracking for when clicking 'See rooms' in InteractiveMap

* Merge branch 'master' of bitbucket.org:scandic-swap/web into SW-3270-move-interactive-map-to-design-system-or-booking-flow

* remove deprecated comment


Approved-by: Anton Gunnarsson

packages/design-system/.storybook/main.ts

@@ -1,5 +1,6 @@
-import { dirname, join } from 'path'
 import type { StorybookConfig } from '@storybook/nextjs-vite'
+import { dirname, join } from 'path'
+import { mergeConfig } from 'vite'
 
 const config: StorybookConfig = {
   stories: ['../lib/**/*.mdx', '../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -9,11 +10,42 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-vitest'),
     getAbsolutePath('@storybook/addon-docs'),
     getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('storybook-react-intl'),
   ],
   framework: {
     name: getAbsolutePath('@storybook/nextjs-vite'),
     options: {},
   },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      plugins: [
+        // Add babel plugin for react-intl transformation
+        {
+          name: 'formatjs-transform',
+          async transform(code, id) {
+            if (id.includes('node_modules')) return
+            if (!/\.(jsx?|tsx?)$/.test(id)) return
+
+            const babel = await import('@babel/core')
+            const result = babel.transformSync(code, {
+              plugins: [
+                [
+                  'formatjs',
+                  {
+                    idInterpolationPattern: '[sha512:contenthash:base64:6]',
+                    ast: true,
+                  },
+                ],
+              ],
+              filename: id,
+            })
+
+            return result?.code
+          },
+        },
+      ],
+    })
+  },
 }
 export default config
 

packages/design-system/.storybook/preview.tsx

@@ -1,9 +1,11 @@
 import { withThemeByClassName } from '@storybook/addon-themes'
-
+import { IntlProvider } from 'react-intl'
 import type { Preview, ReactRenderer } from '@storybook/nextjs-vite'
+import { reactIntl } from './reactIntl'
 
 import '../lib/fonts.css'
 import '../lib/style.css'
+import '../lib/design-system-new-deprecated.css'
 
 export const themes = {
   themes: {
@@ -19,8 +21,33 @@ export const themes = {
 }
 
 const preview: Preview = {
-  decorators: [withThemeByClassName<ReactRenderer>(themes)],
+  decorators: [
+    // Theme decorator
+    withThemeByClassName<ReactRenderer>(themes),
+    (Story) => (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      <IntlProvider locale="en" {...(reactIntl as any)}>
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+  initialGlobals: {
+    locale: reactIntl.defaultLocale,
+    locales: {
+      en: { icon: '🇬🇧', title: 'English', right: 'EN' },
+      sv: { icon: '🇸🇪', title: 'Svenska', right: 'SV' },
+      da: { icon: '🇩🇰', title: 'Dansk', right: 'DA' },
+      no: { icon: '🇳🇴', title: 'Norsk', right: 'NO' },
+      fi: { icon: '🇫🇮', title: 'Suomi', right: 'FI' },
+      de: { icon: '🇩🇪', title: 'Deutsch', right: 'DE' },
+    },
+    backgrounds: { value: 'scandicSubtle' },
+  },
   parameters: {
+    reactIntl,
+    nextjs: {
+      appDirectory: true,
+    },
     docs: {
       toc: true,
     },
@@ -31,18 +58,18 @@ const preview: Preview = {
       },
     },
     backgrounds: {
-      values: [
+      options: {
         // 👇 Scandic
-        { name: 'Scandic Primary', value: '#FAF6F2' },
-        { name: 'Scandic Subtle', value: '#F2ECE6' },
-        { name: 'Scandic Primary Dark', value: '#4D001B' },
+        scandicPrimary: { name: 'Scandic Primary', value: '#FAF6F2' },
+        scandicSubtle: { name: 'Scandic Subtle', value: '#F2ECE6' },
+        scandicPrimaryDark: { name: 'Scandic Primary Dark', value: '#4D001B' },
         // 👇 Default values
-        { name: 'Storybook Dark', value: '#333' },
-        { name: 'Storybook Light', value: '#F7F9F2' },
-      ],
-      default: 'Scandic Primary',
+        storybookDark: { name: 'Storybook Dark', value: '#333' },
+        storybookLight: { name: 'Storybook Light', value: '#F7F9F2' },
+      },
     },
   },
+
   tags: ['autodocs'],
 }
 

packages/design-system/.storybook/reactIntl.ts

@@ -0,0 +1,27 @@
+/* eslint-disable import/no-relative-packages */
+import en from '../../../apps/scandic-web/i18n/dictionaries/en.json'
+import sv from '../../../apps/scandic-web/i18n/dictionaries/sv.json'
+import da from '../../../apps/scandic-web/i18n/dictionaries/da.json'
+import fi from '../../../apps/scandic-web/i18n/dictionaries/fi.json'
+import de from '../../../apps/scandic-web/i18n/dictionaries/de.json'
+import no from '../../../apps/scandic-web/i18n/dictionaries/no.json'
+
+const locales = ['en', 'sv', 'da', 'fi', 'no', 'de']
+
+const messages: Record<(typeof locales)[number], unknown> = {
+  en,
+  sv,
+  da,
+  fi,
+  no,
+  de,
+}
+
+const formats = {} // optional, if you have any formats
+
+export const reactIntl = {
+  defaultLocale: 'en',
+  locales,
+  messages,
+  formats,
+}