From c3c09654635824bbcbc1d794f23ee8fd652ef0af Mon Sep 17 00:00:00 2001 From: avivkeller Date: Tue, 20 May 2025 10:17:54 -0400 Subject: [PATCH 1/3] chore(ui): move `ArticleLayout` to `ui-components` --- apps/site/layouts/About.tsx | 6 +- apps/site/layouts/ArticlePage.tsx | 6 +- apps/site/layouts/Default.tsx | 6 +- apps/site/layouts/Learn.tsx | 6 +- apps/site/layouts/layouts.module.css | 69 ------------------ .../Containers/Article/index.module.css | 70 +++++++++++++++++++ .../Containers/Article/index.tsx | 2 +- 7 files changed, 83 insertions(+), 82 deletions(-) create mode 100644 packages/ui-components/Containers/Article/index.module.css rename apps/site/layouts/Article.tsx => packages/ui-components/Containers/Article/index.tsx (83%) diff --git a/apps/site/layouts/About.tsx b/apps/site/layouts/About.tsx index f37d797c8a852..b6f2fecae5419 100644 --- a/apps/site/layouts/About.tsx +++ b/apps/site/layouts/About.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'; @@ -5,14 +6,13 @@ 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 = ({ children }) => ( - +
@@ -22,7 +22,7 @@ const AboutLayout: FC = ({ children }) => (
- +
diff --git a/apps/site/layouts/ArticlePage.tsx b/apps/site/layouts/ArticlePage.tsx index 02c2cbb412c46..c33c3f4fe3998 100644 --- a/apps/site/layouts/ArticlePage.tsx +++ b/apps/site/layouts/ArticlePage.tsx @@ -1,15 +1,15 @@ +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 = ({ children }) => ( <> - +
@@ -17,7 +17,7 @@ const ArticlePageLayout: FC = ({ children }) => (
- +
); diff --git a/apps/site/layouts/Default.tsx b/apps/site/layouts/Default.tsx index dc459c28fa7c4..972b6d1fbfb48 100644 --- a/apps/site/layouts/Default.tsx +++ b/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 = ({ children }) => ( <> - +
{children}
- +
diff --git a/apps/site/layouts/Learn.tsx b/apps/site/layouts/Learn.tsx index e795495ac64a1..19927fd1c2d03 100644 --- a/apps/site/layouts/Learn.tsx +++ b/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 = ({ children }) => ( <> - +
@@ -26,7 +26,7 @@ const LearnLayout: FC = ({ children }) => (
- +
diff --git a/apps/site/layouts/layouts.module.css b/apps/site/layouts/layouts.module.css index f974a59063a40..09cff10300de0 100644 --- a/apps/site/layouts/layouts.module.css +++ b/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 diff --git a/packages/ui-components/Containers/Article/index.module.css b/packages/ui-components/Containers/Article/index.module.css new file mode 100644 index 0000000000000..c2202f7a19dff --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/apps/site/layouts/Article.tsx b/packages/ui-components/Containers/Article/index.tsx similarity index 83% rename from apps/site/layouts/Article.tsx rename to packages/ui-components/Containers/Article/index.tsx index 03bc91c793b0a..7b31c225a914f 100644 --- a/apps/site/layouts/Article.tsx +++ b/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 = ({ children }) => (
{children}
From 0710aa450817c7638f56a21ba7d6052c4f0caac2 Mon Sep 17 00:00:00 2001 From: avivkeller Date: Tue, 20 May 2025 10:19:47 -0400 Subject: [PATCH 2/3] fixup! chore(ui): move `ArticleLayout` to `ui-components` --- packages/ui-components/Containers/Article/index.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/Containers/Article/index.module.css b/packages/ui-components/Containers/Article/index.module.css index c2202f7a19dff..3073bf8f91e7c 100644 --- a/packages/ui-components/Containers/Article/index.module.css +++ b/packages/ui-components/Containers/Article/index.module.css @@ -67,4 +67,4 @@ dark:border-t-neutral-900 dark:bg-neutral-950; } -} \ No newline at end of file +} From 8910b7e6e1e3096c24e2deb9e14f3eb45438ae99 Mon Sep 17 00:00:00 2001 From: avivkeller Date: Tue, 20 May 2025 17:05:36 -0400 Subject: [PATCH 3/3] add story --- .../Containers/Article/index.stories.tsx | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 packages/ui-components/Containers/Article/index.stories.tsx diff --git a/packages/ui-components/Containers/Article/index.stories.tsx b/packages/ui-components/Containers/Article/index.stories.tsx new file mode 100644 index 0000000000000..8aa0cfabf65e9 --- /dev/null +++ b/packages/ui-components/Containers/Article/index.stories.tsx @@ -0,0 +1,39 @@ +import type { Meta as MetaObj, StoryObj } from '@storybook/react'; + +import Article from '.'; + +type Story = StoryObj; +type Meta = MetaObj; + +const Sidebar = () => ( +
+

Sidebar

+
    +
  • Navigation Item 1
    • +
  • Navigation Item 2
    • +
  • Navigation Item 3
    • +
  • Navigation Item 4
    • +
+
+); + +export const Default: Story = { + args: { + children: ( + <> + +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+ +
+ + ), + }, +}; + +export default { component: Article } as Meta;