refactor(layouts): create story and update style for base layout

.storybook/main.ts

@@ -16,7 +16,10 @@ import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin"
  */
 
 const config: StorybookConfig = {
-  stories: ["../src/components/**/*.stories.{ts,tsx}"],
+  stories: [
+    "../src/components/**/*.stories.tsx",
+    "../src/layouts/layoutStories/*.stories.tsx",
+  ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

src/layouts/RootLayout.tsx → src/layouts/BaseLayout.tsx

@@ -16,9 +16,7 @@ import { toPosixPath } from "@/lib/utils/relativePath"
 
 import { DEFAULT_LOCALE } from "@/lib/constants"
 
-import { lightTheme as oldTheme } from "../theme"
-
-export const RootLayout = ({
+export const BaseLayout = ({
   children,
   contentIsOutdated,
   contentNotTranslated,
@@ -47,26 +45,35 @@ export const RootLayout = ({
   const originalPagePath = toPosixPath(join(DEFAULT_LOCALE, asPath))
 
   return (
-    <Container mx="auto" maxW={oldTheme.variables.maxPageWidth}>
+    <>
+      {/**
+       * The Skip Link is positioned above the container to ensure it is not affecting the
+       * layout on initial load.
+       */}
       <SkipLink />
-
-      <Nav />
-
-      <TranslationBanner
-        shouldShow={shouldShowTranslationBanner}
-        isPageContentEnglish={contentNotTranslated}
-        originalPagePath={originalPagePath}
-      />
-
-      <TranslationBannerLegal
-        shouldShow={shouldShowLegalTranslationBanner}
-        originalPagePath={originalPagePath}
-      />
-
-      {children}
-
-      <Footer lastDeployDate={lastDeployDate} />
+      <Container maxW="1536px">
+        <Nav />
+
+        <TranslationBanner
+          shouldShow={shouldShowTranslationBanner}
+          isPageContentEnglish={contentNotTranslated}
+          originalPagePath={originalPagePath}
+        />
+
+        <TranslationBannerLegal
+          shouldShow={shouldShowLegalTranslationBanner}
+          originalPagePath={originalPagePath}
+        />
+
+        {children}
+
+        <Footer lastDeployDate={lastDeployDate} />
+      </Container>
+      {/**
+       * The Feedback Widget is positioned below the container to ensure it is not affecting the
+       * layout on initial load.
+       */}
       <FeedbackWidget />
-    </Container>
+    </>
   )
 }

src/layouts/index.ts

@@ -1,6 +1,6 @@
+export * from "./BaseLayout"
 export * from "./Docs"
 export * from "./Roadmap"
-export * from "./RootLayout"
 export * from "./Staking"
 export * from "./Static"
 export * from "./Tutorial"

src/layouts/layoutStories/BaseLayout.stories.tsx

@@ -0,0 +1,36 @@
+import { Center } from "@chakra-ui/react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { BaseLayout as BaseLayoutComponent } from "../BaseLayout"
+
+const meta = {
+  title: "Templates/BaseLayout",
+  component: BaseLayoutComponent,
+  argTypes: {
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+    lastDeployDate: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+} satisfies Meta<typeof BaseLayoutComponent>
+
+export default meta
+
+export const BaseLayout: StoryObj<typeof meta> = {
+  args: {
+    children: (
+      <Center h="497px" border="2px dashed" borderColor="primary.base">
+        Content Here
+      </Center>
+    ),
+    contentIsOutdated: false,
+    contentNotTranslated: false,
+    lastDeployDate: "May 14, 2021",
+  },
+}

src/pages/_app.tsx

@@ -13,7 +13,7 @@ import { AppPropsWithLayout } from "@/lib/types"
 import "../styles/global.css"
 
 import { useLocaleDirection } from "@/hooks/useLocaleDirection"
-import { RootLayout } from "@/layouts/RootLayout"
+import { BaseLayout } from "@/layouts/BaseLayout"
 import { mono } from "@/lib/fonts"
 
 const App = ({ Component, pageProps }: AppPropsWithLayout) => {
@@ -45,13 +45,13 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
         `}
       </style>
       <ChakraProvider theme={theme}>
-        <RootLayout
+        <BaseLayout
           contentIsOutdated={!!pageProps.frontmatter?.isOutdated}
           contentNotTranslated={pageProps.contentNotTranslated}
           lastDeployDate={pageProps.lastDeployDate}
         >
           {getLayout(<Component {...pageProps} />)}
-        </RootLayout>
+        </BaseLayout>
       </ChakraProvider>
     </>
   )

yarn.lock

@@ -13110,7 +13110,7 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-tsconfig-paths-webpack-plugin@^4.0.1, tsconfig-paths-webpack-plugin@^4.1.0:
+tsconfig-paths-webpack-plugin@4.1.0, tsconfig-paths-webpack-plugin@^4.0.1:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-4.1.0.tgz#3c6892c5e7319c146eee1e7302ed9e6f2be4f763"
   integrity sha512-xWFISjviPydmtmgeUAuXp4N1fky+VCtfhOkDUFIv5ea7p4wuTomI4QTrXvFBX2S4jZsmyTSrStQl+E+4w+RzxA==