chore: fix storybook styles, imports, typescript config and dependencies (#5319

.storybook/constants.ts

@@ -0,0 +1,34 @@
+import type { AppProps, NodeVersionData } from '../types';
+import englishMessages from '../i18n/locales/en.json';
+
+const i18nData: AppProps['i18nData'] = {
+  currentLocale: {
+    code: 'en',
+    localName: 'English',
+    name: 'English',
+    langDir: 'ltr',
+    dateFormat: 'MM.DD.YYYY',
+    hrefLang: 'en-US',
+    enabled: true,
+  },
+  localeMessages: englishMessages,
+};
+
+const nodeVersionData: NodeVersionData[] = [
+  {
+    node: 'v19.8.1',
+    nodeNumeric: '19.8.1',
+    nodeMajor: 'v19.x',
+    npm: '9.5.1',
+    isLts: false,
+  },
+  {
+    node: 'v18.15.0',
+    nodeNumeric: '18.15.0',
+    nodeMajor: 'v18.x',
+    npm: '9.5.0',
+    isLts: true,
+  },
+];
+
+export const pageProps = { i18nData, nodeVersionData };

.storybook/preview.tsx

@@ -1,10 +1,13 @@
 import type { Preview } from '@storybook/react';
 import NextImage from 'next/image';
 import { ThemeProvider } from 'next-themes';
-import App from '../pages/_app.mdx';
+import { NodeDataProvider } from '../providers/nodeDataProvider';
+import { LocaleProvider } from '../providers/localeProvider';
+import { SiteProvider } from '../providers/siteProvider';
+import openSans from '../util/openSans';
 import { pageProps } from './constants';
 
-import '../styles/tokens.scss';
+import '../styles/index.scss';
 
 const preview: Preview = {
   parameters: {
@@ -26,7 +29,20 @@ const preview: Preview = {
 export const decorators = [
   Story => (
     <ThemeProvider>
-      <App Component={Story} pageProps={pageProps} />
+      <SiteProvider>
+        <LocaleProvider i18nData={pageProps.i18nData}>
+          <NodeDataProvider nodeVersionData={pageProps.nodeVersionData}>
+            <style>
+              {`
+                body {
+                  font-family: ${openSans.style.fontFamily}, var(--base-type-face);
+                }
+              `}
+            </style>
+            <Story />
+          </NodeDataProvider>
+        </LocaleProvider>
+      </SiteProvider>
     </ThemeProvider>
   ),
 ];

components/Common/Banner/index.module.scss

@@ -1,7 +1,5 @@
-@import 'styles/_variables';
-
 .banner {
-  color: $node-gray;
+  color: var(--color-text-primary);
   margin: 0 auto;
   max-width: 90vw;
   padding-top: var(--space-08);
@@ -15,13 +13,12 @@
 
   a {
     align-items: center;
+    color: var(--color-text-primary);
     display: flex;
     flex-direction: column;
     text-decoration: none;
 
     &:hover {
-      background-color: transparent !important;
-      color: $node-green;
       text-decoration: underline;
     }
 
@@ -48,7 +45,7 @@
       white-space: nowrap;
 
       &:hover {
-        background-color: $node-green !important;
+        background-color: var(--color-text-primary);
         cursor: pointer;
       }
     }
@@ -66,7 +63,6 @@
 
     a {
       &:hover {
-        background-color: transparent !important;
         text-decoration: underline;
       }
     }

components/Common/Banner/Banner.stories.tsx → components/Common/Banner/index.stories.tsx

@@ -37,4 +37,15 @@ export const WithHTML: Story = {
   },
 };
 
+export const WithHTMLImage: Story = {
+  args: {
+    bannersIndex: {
+      startDate: startDate.toISOString(),
+      endDate: endDate.toISOString(),
+      html: '<img src="/static/images/nodejs-training.png" alt="Banner Image" />',
+      link: 'https://nodejs.org/en/',
+    },
+  },
+};
+
 export default { component: Banner } as Meta;

components/Common/DarkModeToggle/__tests__/__snapshots__/index.test.tsx.snap

@@ -3,15 +3,11 @@
 exports[`DarkModeToggle Component render dark mode toggle 1`] = `
 <div>
   <button
+    aria-label="components.header.buttons.toggleDarkMode"
     aria-pressed="false"
     class="darkModeToggle"
     type="button"
   >
-    <span
-      class="sr-only"
-    >
-      components.header.buttons.toggleDarkMode
-    </span>
     <svg
       class="light-mode-only"
       fill="currentColor"

components/Common/DarkModeToggle/__tests__/index.test.tsx

@@ -26,27 +26,29 @@ describe('DarkModeToggle Component', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('switches dark theme to light theme', () => {
+  it('switches dark theme to light theme', async () => {
+    const user = userEvent.setup();
     mockCurrentTheme = 'dark';
     render(
       <IntlProvider locale="en" onError={() => {}}>
         <DarkModeToggle />
       </IntlProvider>
     );
     const toggle = screen.getByRole('button');
-    userEvent.click(toggle);
+    await user.click(toggle);
     expect(mockCurrentTheme).toBe('light');
   });
 
-  it('switches light theme to dark theme', () => {
+  it('switches light theme to dark theme', async () => {
+    const user = userEvent.setup();
     mockCurrentTheme = 'light';
     render(
       <IntlProvider locale="en" onError={() => {}}>
         <DarkModeToggle />
       </IntlProvider>
     );
     const toggle = screen.getByRole('button');
-    userEvent.click(toggle);
+    await user.click(toggle);
     expect(mockCurrentTheme).toBe('dark');
   });
 });

components/Common/DarkModeToggle/index.tsx

@@ -1,11 +1,13 @@
 import { useTheme } from 'next-themes';
-import { FormattedMessage } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { MdLightMode, MdNightlight } from 'react-icons/md';
 import styles from './index.module.scss';
 
 const DarkModeToggle = () => {
   const { theme, setTheme } = useTheme();
 
+  const intl = useIntl();
+
   const isDark = theme === 'dark';
 
   const toggleTheme = (isKeyPress?: boolean) => {
@@ -16,18 +18,19 @@ const DarkModeToggle = () => {
     setTheme(isDark ? 'light' : 'dark');
   };
 
+  const ariaLabelText = intl.formatMessage({
+    id: 'components.header.buttons.toggleDarkMode',
+  });
+
   return (
     <button
       type="button"
       className={styles.darkModeToggle}
       onClick={() => toggleTheme()}
       onKeyDown={() => toggleTheme(true)}
       aria-pressed={isDark}
+      aria-label={ariaLabelText}
     >
-      <span className="sr-only">
-        <FormattedMessage id="components.header.buttons.toggleDarkMode" />
-      </span>
-
       <MdNightlight className="light-mode-only" />
       <MdLightMode className="dark-mode-only" />
     </button>

components/Common/LanguageSelector/__tests__/index.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
 import LanguageSelector from '..';
 
 jest.mock('../../../../hooks/useLocale', () => ({
@@ -13,7 +14,11 @@ jest.mock('../../../../hooks/useLocale', () => ({
 
 describe('LanguageSelector', () => {
   test('clicking the language switch button toggles the dropdown display', () => {
-    render(<LanguageSelector />);
+    render(
+      <IntlProvider locale="en" onError={() => {}}>
+        <LanguageSelector />
+      </IntlProvider>
+    );
     const button = screen.getByRole('button');
     expect(screen.queryByText('English')).not.toBeVisible();
     fireEvent.click(button);
@@ -23,7 +28,11 @@ describe('LanguageSelector', () => {
   });
 
   test('renders the Dropdown component with correct style', () => {
-    render(<LanguageSelector />);
+    render(
+      <IntlProvider locale="en" onError={() => {}}>
+        <LanguageSelector />
+      </IntlProvider>
+    );
     const button = screen.getByRole('button');
     fireEvent.click(button);
     const dropdown = screen.getByRole('list');

components/Common/LanguageSelector/index.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
 import { MdOutlineTranslate } from 'react-icons/md';
+import { useIntl } from 'react-intl';
 import styles from './index.module.scss';
 import Dropdown from '../Dropdown';
 import { useLocale } from '../../../hooks/useLocale';
@@ -16,6 +17,8 @@ const LanguageSelector = () => {
 
   const { availableLocales, currentLocale } = useLocale();
 
+  const intl = useIntl();
+
   const dropdownItems = useMemo(
     () =>
       availableLocales.map(locale => ({
@@ -29,16 +32,19 @@ const LanguageSelector = () => {
     [availableLocales, currentLocale]
   );
 
+  const ariaLabelText = intl.formatMessage({
+    id: 'components.common.languageSelector.button.title',
+  });
+
   return (
     <div className={styles.container}>
       <button
         type="button"
         className={styles.languageSwitch}
         onClick={() => setShowDropdown(!showDropdown)}
         aria-expanded={showDropdown}
+        aria-label={ariaLabelText}
       >
-        <span className="sr-only">Switch Language</span>
-
         <MdOutlineTranslate />
       </button>
 

global.d.ts

@@ -9,4 +9,9 @@ declare global {
   }
 }
 
+declare module '*.json' {
+  const value: any;
+  export default value;
+}
+
 export default global;

i18n/locales/en.json

@@ -38,5 +38,6 @@
   "layouts.blogIndex.currentYear": "News from {year}",
   "components.common.banner.button.text": "Read More",
   "components.article.author.githubLinkLabel": "{username} Github - opens in new tab",
-  "components.article.authorList.title": "Article Authors"
+  "components.article.authorList.title": "Article Authors",
+  "components.common.languageSelector.button.title": "Switch Language"
 }