chore(ui): move ArticleLayout to ui-components

Author: avivkeller

apps/site/layouts/About.tsx

@@ -1,18 +1,18 @@
+import Article from '@node-core/ui-components/Containers/Article';
 import type { FC, PropsWithChildren } from 'react';
 
 import WithBreadcrumbs from '#site/components/withBreadcrumbs';
 import WithFooter from '#site/components/withFooter';
 import WithMetaBar from '#site/components/withMetaBar';
 import WithNavBar from '#site/components/withNavBar';
 import WithSidebar from '#site/components/withSidebar';
-import ArticleLayout from '#site/layouts/Article';
 import { ReleaseModalProvider } from '#site/providers/releaseModalProvider';
 
 const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
   <ReleaseModalProvider>
     <WithNavBar />
 
-    <ArticleLayout>
+    <Article>
       <WithSidebar navKeys={['about', 'getInvolved']} />
 
       <div>
@@ -22,7 +22,7 @@ const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
       </div>
 
       <WithBreadcrumbs navKeys={['about', 'getInvolved']} />
-    </ArticleLayout>
+    </Article>
 
     <WithFooter />
   </ReleaseModalProvider>

apps/site/layouts/ArticlePage.tsx

@@ -1,23 +1,23 @@
+import Article from '@node-core/ui-components/Containers/Article';
 import type { FC, PropsWithChildren } from 'react';
 
 import WithMetaBar from '#site/components/withMetaBar';
 import WithNavBar from '#site/components/withNavBar';
 import WithSidebar from '#site/components/withSidebar';
-import ArticleLayout from '#site/layouts/Article';
 
 const ArticlePageLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
     <WithNavBar />
 
-    <ArticleLayout>
+    <Article>
       <WithSidebar navKeys={[]} />
 
       <div>
         <main>{children}</main>
 
         <WithMetaBar />
       </div>
-    </ArticleLayout>
+    </Article>
   </>
 );
 

apps/site/layouts/Default.tsx

@@ -1,21 +1,21 @@
+import Article from '@node-core/ui-components/Containers/Article';
 import type { FC, PropsWithChildren } from 'react';
 
 import WithFooter from '#site/components/withFooter';
 import WithNavBar from '#site/components/withNavBar';
 import WithSidebar from '#site/components/withSidebar';
-import ArticleLayout from '#site/layouts/Article';
 
 const DefaultLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
     <WithNavBar />
 
-    <ArticleLayout>
+    <Article>
       <WithSidebar navKeys={[]} />
 
       <div>
         <main>{children}</main>
       </div>
-    </ArticleLayout>
+    </Article>
 
     <WithFooter />
   </>

apps/site/layouts/Learn.tsx

@@ -1,3 +1,4 @@
+import Article from '@node-core/ui-components/Containers/Article';
 import type { FC, PropsWithChildren } from 'react';
 
 import WithBreadcrumbs from '#site/components/withBreadcrumbs';
@@ -6,13 +7,12 @@ import WithMetaBar from '#site/components/withMetaBar';
 import WithNavBar from '#site/components/withNavBar';
 import WithProgressionSidebar from '#site/components/withProgressionSidebar';
 import WithSidebarCrossLinks from '#site/components/withSidebarCrossLinks';
-import ArticleLayout from '#site/layouts/Article';
 
 const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
     <WithNavBar />
 
-    <ArticleLayout>
+    <Article>
       <WithProgressionSidebar navKey="learn" />
 
       <div>
@@ -26,7 +26,7 @@ const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
       </div>
 
       <WithBreadcrumbs navKeys={['learn']} />
-    </ArticleLayout>
+    </Article>
 
     <WithFooter />
   </>

apps/site/layouts/layouts.module.css

@@ -9,75 +9,6 @@
     grid-rows-[auto_1fr_auto];
 }
 
-.articleLayout {
-  @apply max-w-8xl
-    mx-auto
-    block
-    w-full
-    sm:grid
-    sm:grid-cols-[theme(spacing.52)_1fr]
-    sm:grid-rows-[1fr]
-    sm:overflow-visible
-    sm:[grid-template-areas:'sidebar_main''sidebar_footer']
-    md:grid-cols-[theme(spacing.64)_1fr]
-    lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
-    lg:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
-    xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];
-
-  > *:nth-child(1) {
-    @apply [grid-area:sidebar]
-      lg:sticky
-      lg:top-0
-      lg:h-[100vh]
-      lg:overflow-y-auto;
-  }
-
-  > *:nth-child(2) {
-    @apply contents
-      sm:max-lg:block;
-
-    > *:first-child {
-      @apply sm:bg-gradient-subtle
-        sm:dark:bg-gradient-subtle-dark
-        xl:px-18
-        p-4
-        [grid-area:main]
-        motion-safe:scroll-smooth
-        sm:bg-fixed
-        sm:p-12;
-    }
-
-    > *:last-child {
-      @apply mt-8
-        border-t
-        [grid-area:metabar]
-        sm:mt-0
-        lg:sticky
-        lg:top-0
-        lg:max-w-xs
-        lg:border-l
-        lg:border-t-0;
-    }
-  }
-
-  > *:nth-child(3) {
-    @apply sticky
-      bottom-0
-      flex
-      w-full
-      flex-col
-      items-center
-      self-stretch
-      border-t
-      border-t-neutral-200
-      bg-white
-      py-4
-      [grid-area:footer]
-      dark:border-t-neutral-900
-      dark:bg-neutral-950;
-  }
-}
-
 .centeredLayout {
   @apply flex
     w-full

packages/ui-components/Containers/Article/index.module.css

@@ -0,0 +1,70 @@
+@reference "../../styles/index.css";
+
+.articleLayout {
+  @apply max-w-8xl
+    mx-auto
+    block
+    w-full
+    sm:grid
+    sm:grid-cols-[theme(spacing.52)_1fr]
+    sm:grid-rows-[1fr]
+    sm:overflow-visible
+    sm:[grid-template-areas:'sidebar_main''sidebar_footer']
+    md:grid-cols-[theme(spacing.64)_1fr]
+    lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
+    lg:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
+    xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];
+
+  > *:nth-child(1) {
+    @apply [grid-area:sidebar]
+      lg:sticky
+      lg:top-0
+      lg:h-[100vh]
+      lg:overflow-y-auto;
+  }
+
+  > *:nth-child(2) {
+    @apply contents
+      sm:max-lg:block;
+
+    > *:first-child {
+      @apply sm:bg-gradient-subtle
+        sm:dark:bg-gradient-subtle-dark
+        xl:px-18
+        p-4
+        [grid-area:main]
+        motion-safe:scroll-smooth
+        sm:bg-fixed
+        sm:p-12;
+    }
+
+    > *:last-child {
+      @apply mt-8
+        border-t
+        [grid-area:metabar]
+        sm:mt-0
+        lg:sticky
+        lg:top-0
+        lg:max-w-xs
+        lg:border-l
+        lg:border-t-0;
+    }
+  }
+
+  > *:nth-child(3) {
+    @apply sticky
+      bottom-0
+      flex
+      w-full
+      flex-col
+      items-center
+      self-stretch
+      border-t
+      border-t-neutral-200
+      bg-white
+      py-4
+      [grid-area:footer]
+      dark:border-t-neutral-900
+      dark:bg-neutral-950;
+  }
+}

apps/site/layouts/Article.tsx …-components/Containers/Article/index.tsxapps/site/layouts/Article.tsx renamed to packages/ui-components/Containers/Article/index.tsx apps/site/layouts/Article.tsx renamed to packages/ui-components/Containers/Article/index.tsx

@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
 
-import styles from './layouts.module.css';
+import styles from './index.module.css';
 
 const ArticleLayout: FC<PropsWithChildren> = ({ children }) => (
   <div className={styles.articleLayout}>{children}</div>