1. Added Constants for the OS type in the whole App 2. Added a regex filter for the AIX OS. 3. Added constants for the STORYBOOK_MODE 4. Removed unecessary closing of with or '||' operator

.storybook/constants.ts

@@ -1,21 +1,27 @@
+// This is a constant object which is used throughout the app for changing the theme type of the storybook
+// This object is read only due to the Object.freez so we can go with it because we are not changing its value anymore
+export const STORYBOOK_MODE_THEME = Object.freeze({
+  dark: 'dark',
+  light: 'light',
+});
 // This defines "execution" modes that Chromatic will run on the each Storybook Story
 // This allows us to test each Story with different parameters
 // @see https://www.chromatic.com/blog/introducing-story-modes/
 export const STORYBOOK_MODES = {
   'dark mobile': {
-    theme: 'dark',
+    theme: STORYBOOK_MODE_THEME.dark,
     viewport: 'small',
   },
   'dark desktop': {
-    theme: 'dark',
+    theme: STORYBOOK_MODE_THEME.dark,
     viewport: 'large',
   },
   'light mobile': {
-    theme: 'light',
+    theme: STORYBOOK_MODE_THEME.light,
     viewport: 'small',
   },
   'light desktop': {
-    theme: 'light',
+    theme: STORYBOOK_MODE_THEME.light,
     viewport: 'large',
   },
 };

.storybook/preview.tsx

@@ -2,7 +2,11 @@ import { NextIntlClientProvider } from 'next-intl';
 
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import { NotificationProvider } from '@/providers/notificationProvider';
-import { STORYBOOK_MODES, STORYBOOK_SIZES } from '@/.storybook/constants';
+import {
+  STORYBOOK_MODES,
+  STORYBOOK_SIZES,
+  STORYBOOK_MODE_THEME,
+} from '@/.storybook/constants';
 import type { Preview, ReactRenderer } from '@storybook/react';
 
 import englishLocale from '@/i18n/locales/en.json';
@@ -29,8 +33,11 @@ const preview: Preview = {
       </NextIntlClientProvider>
     ),
     withThemeByDataAttribute<ReactRenderer>({
-      themes: { light: '', dark: 'dark' },
-      defaultTheme: 'light',
+      themes: {
+        light: STORYBOOK_MODE_THEME.light,
+        dark: STORYBOOK_MODE_THEME.dark,
+      },
+      defaultTheme: STORYBOOK_MODE_THEME.light,
       attributeName: 'data-theme',
     }),
   ],

app/[locale]/[[...path]]/page.tsx

@@ -31,7 +31,7 @@ export const generateMetadata = async ({ params }: DynamicParams) => {
 
 // Gets all mapped routes to the Next.js Routing Engine by Locale
 const mapRoutesForLocale = async (locale: string) => {
-  const routesForLanguage = await dynamicRouter.getRoutesByLanguage(locale);
+  const routesForLanguage = dynamicRouter.getRoutesByLanguage(locale);
 
   return routesForLanguage.map(pathname =>
     dynamicRouter.mapPathToRoute(locale, pathname)

components/Common/Search/States/WithPoweredBy.tsx

@@ -5,9 +5,11 @@ import { useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
 
+import { STORYBOOK_MODE_THEME } from '@/.storybook/constants';
+
 import styles from './index.module.css';
 
-const getLogoURL = (theme: string = 'dark') =>
+const getLogoURL = (theme: string = STORYBOOK_MODE_THEME.dark) =>
   `https://website-assets.oramasearch.com/orama-when-${theme}.svg`;
 
 export const WithPoweredBy = () => {

components/Common/Search/index.tsx

@@ -8,6 +8,7 @@ import { useState, type FC } from 'react';
 import { WithSearchBox } from '@/components/Common/Search/States/WithSearchBox';
 import { useDetectOS } from '@/hooks';
 import { useKeyboardCommands } from '@/hooks/react-client';
+import { OS } from '@/next.constants.mjs';
 
 import styles from './index.module.css';
 
@@ -31,7 +32,7 @@ export const SearchButton: FC = () => {
 
   const { os } = useDetectOS();
 
-  const osCommandKey = os === 'MAC' ? '⌘' : 'Ctrl';
+  const osCommandKey = os === OS.MAC ? '⌘' : 'Ctrl';
   const isOSLoading = os === 'LOADING';
 
   return (

components/Common/ThemeToggle/__tests__/index.test.mjs

@@ -1,32 +1,37 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { STORYBOOK_MODE_THEME } from '@/.storybook/constants';
+
 import ThemeToggle from '../';
 
-let mockCurrentTheme = 'light';
+let mockCurrentTheme = STORYBOOK_MODE_THEME.light;
 
 const toggleTheme = () => {
-  mockCurrentTheme = mockCurrentTheme === 'light' ? 'dark' : 'light';
+  mockCurrentTheme =
+    mockCurrentTheme === STORYBOOK_MODE_THEME.light
+      ? STORYBOOK_MODE_THEME.dark
+      : STORYBOOK_MODE_THEME.light;
 };
 
 describe('ThemeToggle', () => {
   let toggle;
 
   beforeEach(() => {
-    mockCurrentTheme = 'light';
+    mockCurrentTheme = STORYBOOK_MODE_THEME.light;
 
     render(<ThemeToggle onClick={toggleTheme} />);
     toggle = screen.getByRole('button');
   });
 
   it('switches dark theme to light theme', async () => {
-    mockCurrentTheme = 'dark';
+    mockCurrentTheme = STORYBOOK_MODE_THEME.dark;
     await userEvent.click(toggle);
-    expect(mockCurrentTheme).toBe('light');
+    expect(mockCurrentTheme).toBe(STORYBOOK_MODE_THEME.light);
   });
 
   it('switches light theme to dark theme', async () => {
     await userEvent.click(toggle);
-    expect(mockCurrentTheme).toBe('dark');
+    expect(mockCurrentTheme).toBe(STORYBOOK_MODE_THEME.dark);
   });
 });

components/Downloads/Release/BitnessDropdown.tsx

@@ -6,6 +6,7 @@ import semVer from 'semver';
 
 import Select from '@/components/Common/Select';
 import { useDetectOS } from '@/hooks/react-client';
+import { OS } from '@/next.constants.mjs';
 import { ReleaseContext } from '@/providers/releaseProvider';
 import { bitnessItems, formatDropdownItems } from '@/util/downloadUtils';
 import { getUserBitnessByArchitecture } from '@/util/getUserBitnessByArchitecture';
@@ -35,23 +36,23 @@ const BitnessDropdown: FC = () => {
   const disabledItems = useMemo(() => {
     const disabledItems = [];
 
-    if (os === 'WIN' && semVer.satisfies(release.version, '< 19.9.0')) {
+    if (os === OS.WIN && semVer.satisfies(release.version, '< 19.9.0')) {
       disabledItems.push('arm64');
     }
 
-    if (os === 'LINUX' && semVer.satisfies(release.version, '< 4.0.0')) {
+    if (os === OS.LINUX && semVer.satisfies(release.version, '< 4.0.0')) {
       disabledItems.push('arm64', 'armv7l');
     }
 
-    if (os === 'LINUX' && semVer.satisfies(release.version, '< 4.4.0')) {
+    if (os === OS.LINUX && semVer.satisfies(release.version, '< 4.4.0')) {
       disabledItems.push('ppc64le');
     }
 
-    if (os === 'LINUX' && semVer.satisfies(release.version, '< 6.6.0')) {
+    if (os === OS.LINUX && semVer.satisfies(release.version, '< 6.6.0')) {
       disabledItems.push('s390x');
     }
 
-    if (os === 'AIX' && semVer.satisfies(release.version, '< 6.7.0')) {
+    if (os === OS.AIX && semVer.satisfies(release.version, '< 6.7.0')) {
       disabledItems.push('ppc64');
     }
 

components/Downloads/Release/OperatingSystemDropdown.tsx

@@ -9,6 +9,7 @@ import Aix from '@/components/Icons/Platform/Generic';
 import Linux from '@/components/Icons/Platform/Linux';
 import Microsoft from '@/components/Icons/Platform/Microsoft';
 import { useDetectOS } from '@/hooks/react-client';
+import { OS } from '@/next.constants.mjs';
 import { ReleaseContext } from '@/providers/releaseProvider';
 import type { UserOS } from '@/types/userOS';
 import {
@@ -37,11 +38,11 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = ({
     const disabledItems = exclude;
 
     if (platform === 'BREW') {
-      disabledItems.push('WIN');
+      disabledItems.push(OS.WIN as UserOS);
     }
 
     if (platform === 'DOCKER') {
-      disabledItems.push('LINUX');
+      disabledItems.push(OS.LINUX as UserOS);
     }
 
     return disabledItems;
@@ -71,10 +72,10 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = ({
         items: operatingSystemItems,
         disabledItems,
         icons: {
-          WIN: <Microsoft width={16} height={16} />,
-          MAC: <Apple width={16} height={16} />,
-          LINUX: <Linux width={16} height={16} />,
-          AIX: <Aix width={16} height={16} />,
+          [OS.WIN]: <Microsoft width={16} height={16} />,
+          [OS.MAC]: <Apple width={16} height={16} />,
+          [OS.LINUX]: <Linux width={16} height={16} />,
+          [OS.AIX]: <Aix width={16} height={16} />,
         },
       })}
       ariaLabel={t('layouts.download.dropdown.os')}

components/Downloads/Release/PlatformDropdown.tsx

@@ -8,6 +8,7 @@ import Choco from '@/components/Icons/Platform/Choco';
 import Docker from '@/components/Icons/Platform/Docker';
 import Homebrew from '@/components/Icons/Platform/Homebrew';
 import NVM from '@/components/Icons/Platform/NVM';
+import { OS } from '@/next.constants.mjs';
 import { ReleaseContext } from '@/providers/releaseProvider';
 import type { PackageManager } from '@/types/release';
 import { formatDropdownItems, platformItems } from '@/util/downloadUtils';
@@ -25,15 +26,15 @@ const PlatformDropdown: FC = () => {
   const disabledItems = useMemo(() => {
     const disabledItems = [];
 
-    if (os === 'WIN') {
+    if (os === OS.WIN) {
       disabledItems.push('BREW', 'NVM');
     }
 
-    if (os === 'LINUX') {
+    if (os === OS.LINUX) {
       disabledItems.push('DOCKER', 'CHOCO');
     }
 
-    if (os === 'MAC') {
+    if (os === OS.MAC) {
       disabledItems.push('CHOCO');
     }
 

components/Downloads/Release/ReleaseCodeBox.tsx

@@ -5,6 +5,7 @@ import { useContext, useEffect, useState } from 'react';
 import type { FC } from 'react';
 
 import CodeBox from '@/components/Common/CodeBox';
+import { OS } from '@/next.constants.mjs';
 import { ReleaseContext } from '@/providers/releaseProvider';
 import { getShiki, highlightToHtml } from '@/util/getHighlighter';
 import { getNodeDownloadSnippet } from '@/util/getNodeDownloadSnippet';
@@ -32,7 +33,7 @@ const ReleaseCodeBox: FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [release.versionWithPrefix, os, platform]);
 
-  const codeLanguage = os === 'WIN' ? 'PowerShell' : 'Bash';
+  const codeLanguage = os === OS.WIN ? 'PowerShell' : 'Bash';
   return (
     <div className="mb-2 mt-6 flex min-h-80 flex-col gap-2">
       {code && (

components/withBlogCrossLinks.tsx

@@ -23,13 +23,13 @@ const WithBlogCrossLinks: FC = async () => {
 
   return (
     <div className="mt-4 grid w-full grid-cols-2 gap-4 xs:grid-cols-1">
-      {(previousCrossLink && (
+      {previousCrossLink && (
         <CrossLink
           type="previous"
           text={previousCrossLink.title}
           link={previousCrossLink.slug}
         />
-      )) || <div />}
+      )}
 
       {nextCrossLink && (
         <CrossLink

components/withNavBar.tsx

@@ -4,6 +4,7 @@ import { useLocale } from 'next-intl';
 import { useTheme } from 'next-themes';
 import type { FC } from 'react';
 
+import { STORYBOOK_MODE_THEME } from '@/.storybook/constants';
 import NavBar from '@/components/Containers/NavBar';
 import WithBanner from '@/components/withBanner';
 import { useClientContext, useSiteNavigation } from '@/hooks';
@@ -19,7 +20,11 @@ const WithNavBar: FC = () => {
   const locale = useLocale();
 
   const toggleCurrentTheme = () =>
-    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+    setTheme(
+      resolvedTheme === STORYBOOK_MODE_THEME.dark
+        ? STORYBOOK_MODE_THEME.light
+        : STORYBOOK_MODE_THEME.dark
+    );
 
   return (
     <div>

components/withSidebarCrossLinks.tsx

@@ -25,13 +25,13 @@ const WithSidebarCrossLinks: FC<WithCrossLinksProps> = ({ navKey }) => {
 
   return (
     <div className="mt-4 grid w-full grid-cols-2 gap-4 xs:grid-cols-1">
-      {(previousCrossLink && (
+      {previousCrossLink && (
         <CrossLink
           type="previous"
           text={previousCrossLink.label}
           link={previousCrossLink.link}
         />
-      )) || <div />}
+      )}
 
       {nextCrossLink && (
         <CrossLink

hooks/react-client/__tests__/useDetectOS.test.mjs

@@ -1,6 +1,7 @@
 import { renderHook, waitFor } from '@testing-library/react';
 
 import useDetectOS from '@/hooks/react-client/useDetectOS';
+import { OS } from '@/next.constants.mjs';
 
 const windowsUserAgent =
   'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36';
@@ -33,7 +34,7 @@ describe('useDetectOS', () => {
 
     await waitFor(() => {
       expect(result.current).toStrictEqual({
-        os: 'WIN',
+        os: OS.WIN,
         bitness: 64,
         architecture: '',
       });
@@ -52,7 +53,7 @@ describe('useDetectOS', () => {
 
     await waitFor(() => {
       expect(result.current).toStrictEqual({
-        os: 'WIN',
+        os: OS.WIN,
         bitness: 64,
         architecture: '',
       });
@@ -71,7 +72,7 @@ describe('useDetectOS', () => {
 
     await waitFor(() => {
       expect(result.current).toStrictEqual({
-        os: 'MAC',
+        os: OS.MAC,
         bitness: 86,
         architecture: '',
       });

next.constants.mjs

@@ -160,3 +160,14 @@ export const ORAMA_CLOUD_ENDPOINT =
  * This is a public API key and can be shared publicly on the frontend.
  */
 export const ORAMA_CLOUD_API_KEY = process.env.NEXT_PUBLIC_ORAMA_API_KEY || '';
+
+/**
+ * This are the different types of OS types that are used in the app.
+ */
+export const OS = {
+  WIN: 'WIN',
+  MAC: 'MAC',
+  LINUX: 'LINUX',
+  AIX: 'AIX',
+  OTHER: 'OTHER',
+};

providers/releaseProvider.tsx

@@ -4,6 +4,7 @@ import type { Dispatch, PropsWithChildren, FC } from 'react';
 import { createContext, useMemo, useReducer } from 'react';
 
 import WithChangelogModal from '@/components/withChangelogModal';
+import { OS } from '@/next.constants.mjs';
 import type { NodeRelease } from '@/types';
 import type {
   ReleaseDispatchActions,
@@ -12,11 +13,12 @@ import type {
   ReleaseProviderProps,
   ReleaseState,
 } from '@/types/release';
+import type { UserOS } from '@/types/userOS';
 
 const initialState: ReleaseState = {
   releases: [],
   release: {} as NodeRelease,
-  os: 'OTHER',
+  os: OS.OTHER as UserOS,
   bitness: '',
   platform: 'NVM',
   modalOpen: false,