feat(docs): implement storybook for layout components (#825)

.changeset/loud-dolls-cry.md

@@ -0,0 +1,2 @@
+---
+---

.github/workflows/chromatic-docs.yml

@@ -26,10 +26,9 @@ jobs:
       - name: pnpm install
         run: pnpm install
 
-      - name: pnpm build (internal dependencies)
+      - name: pnpm build (internal dependencies) # build all internal dependencies of docs but not docs itself
         run: |
-          pnpm --filter @kadena/react-ui... build 
-          pnpm --filter @kadena/react-components... build
+          pnpm run build --filter=@kadena/docs^...
 
       - name: Publish Storybook
         uses: chromaui/action@v1

packages/apps/docs/.storybook/main.ts

@@ -34,7 +34,7 @@ const config: StorybookConfig = {
   },
   webpackFinal: async (config) => {
     config.plugins = config?.plugins || [];
-    (config.plugins)?.push(
+    config.plugins?.push(
       new VanillaExtractPlugin(),
       new MiniCssExtractPlugin(),
     );
@@ -68,17 +68,19 @@ const config: StorybookConfig = {
 
     config.resolve.alias = {
       ...config.resolve.alias,
-
-      '@/components': path.resolve(__dirname, '../src/components'),
-      '@/utils': path.resolve(__dirname, '../src/utils'),
+      '@': path.resolve(__dirname, '../src'),
+      '@/data': path.resolve(__dirname, '../src/data'),
+      '@/_generated': path.resolve(__dirname, '../src/_generated'),
+      '@/hooks': path.resolve(__dirname, '../src/hooks'),
+      '@/pages': path.resolve(__dirname, '../src/pages'),
       '@/types': path.resolve(__dirname, '../src/types'),
-      '@kadena-ui/react-components': path.resolve(__dirname, '../../../libs/react-components'),
+      '@/utils': path.resolve(__dirname, '../src/utils'),
     };
 
     config.resolve.fallback = {
       ...config.resolve?.fallback,
       zlib: false,
-    }
+    };
 
     return config;
   },

packages/apps/docs/.storybook/preview.ts

@@ -1,7 +1,7 @@
 import {
   globalCss,
   baseGlobalStyles,
-} from '@kadena-ui/react-components';
+} from '@kadena/react-components';
 import { darkThemeClass } from '@kadena/react-ui/theme';
 
 import { themes } from '@storybook/theming';
@@ -35,4 +35,34 @@ export const parameters = {
     // Override the default light theme
     light: { ...themes.normal, appBg: 'white' },
   },
+  viewport: {
+    viewports: {
+      mobile: {
+        name: 'Mobile',
+        styles: {
+          width: '640px',
+          height: '1366px'
+        }
+      },
+      tablet: {
+        name: 'Tablet',
+        styles: {
+          width: '768px',
+          height: '1024px'
+        }
+      },
+      laptop: {
+        name: 'Laptop',
+        styles: {
+          width: '1280px',
+          height: '768px'
+        }
+      },
+      largeScreen: {
+        name: 'Large Screen',
+        width: '1536px',
+        height: '864px'
+      }
+    }
+  }
 };

packages/apps/docs/package.json

@@ -15,7 +15,7 @@
     "build:importReadMe": "node ./src/scripts/importReadme.mjs && prettier ./src/pages/docs --write",
     "build:next": "pnpm run build:scripts && next build",
     "build:scripts": "pnpm run build:importReadMe && pnpm run build:createtree && pnpm run build:createSpecJson && pnpm run build:brokenLinks && pnpm run build:checkForHeaders",
-    "build:storybook": "storybook build",
+    "build:storybook": "pnpm run build:createtree && storybook build",
     "chromatic": "chromatic -b build:storybook",
     "cypress:ci": "NEXT_PUBLIC_APP_DEV=test start-server-and-test dev http://localhost:3000 cypress:run",
     "cypress:cilocal": "NEXT_PUBLIC_APP_DEV=test start-server-and-test dev http://localhost:3000 cypress:open",

packages/apps/docs/src/components/Layout/Blog/index.stories.tsx

@@ -0,0 +1,69 @@
+import { blogFrontMatter } from '../__fixtures__/frontmatter';
+import { leftMenuTree } from '../__fixtures__/leftMenuTree';
+
+import { Blog } from './Blog';
+
+import { Heading2 } from '@/components/Markdown/Heading';
+import { Paragraph } from '@/components/Markdown/Paragraph';
+import { IPageProps } from '@/types/Layout';
+import { Meta, StoryObj } from '@storybook/react';
+import Link from 'next/link';
+import React from 'react';
+
+const meta: Meta<IPageProps> = {
+  title: 'Layout/Blog',
+  component: Blog,
+};
+
+export default meta;
+
+type Story = StoryObj<IPageProps>;
+
+const props: IPageProps = {
+  frontmatter: blogFrontMatter,
+  leftMenuTree: leftMenuTree,
+  menuItems: [],
+  aSideMenuTree: [],
+  topDocs: [],
+};
+
+export const Default: Story = {
+  name: 'Default',
+  args: props,
+  render: ({ frontmatter, leftMenuTree }) => (
+    <div>
+      <Blog
+        frontmatter={frontmatter}
+        leftMenuTree={leftMenuTree}
+        menuItems={[]}
+        aSideMenuTree={[]}
+        topDocs={[]}
+      >
+        <Heading2>Kadena: The Next Generation Blockchain</Heading2>
+        <Paragraph>
+          JANUARY 2018 ROUND UP — Kadena has a lot of exciting news and updates
+          about our company, its technology, and what&apos;s on the horizon. We
+          want to thank you all so much for your incredible enthusiasm and
+          support! Here&apos;s what&apos;s gone down in the past few months:
+        </Paragraph>
+        <Heading2>Kadena raises $2.25M in first funding round</Heading2>
+        <Paragraph>
+          Kadena co-founders{' '}
+          <Link href="http://kadena.io/#/team">Will Martino</Link>, and{' '}
+          <Link href="http://kadena.io/#/team">Stuart Popejoy</Link>, announced
+          that we raised $2.25M in our pre-A{'\n'}financing round. Major
+          investors in the private-placement SAFT round included Metastable,
+          Kilowatt Capital, Coinfund, and Multicoin Capital. Check out the{' '}
+          <Link href="https://www.coindesk.com/jp-morgan-blockchain-spin-off-raises-2-25-million/">
+            CoinDesk
+          </Link>
+          , article that launched a frenzy of interest and{' '}
+          <Link href="http://kadena.io/docs/KadenaPR-1-31-2018.pdf">
+            read our press release
+          </Link>
+          .
+        </Paragraph>
+      </Blog>
+    </div>
+  ),
+};

packages/apps/docs/src/components/Layout/Blog/styles.ts

@@ -1,6 +1,6 @@
 import { styled, StyledComponent } from '@kadena/react-components';
 
-import { BasePageGrid } from '../components';
+import { BasePageGrid } from '../components/styles';
 
 export const ArticleMetadataItem: StyledComponent<'span'> = styled('span', {
   '::before': {

packages/apps/docs/src/components/Layout/Full/index.stories.tsx

@@ -0,0 +1,89 @@
+import { fullLayoutFrontMatter } from '../__fixtures__/frontmatter';
+import { fullLayoutLeftMenuTree } from '../__fixtures__/leftMenuTree';
+
+import { Full } from './Full';
+
+import { Heading2 } from '@/components/Markdown/Heading';
+import { Paragraph } from '@/components/Markdown/Paragraph';
+import { IPageProps, TagNameType } from '@/types/Layout';
+import { Meta, StoryObj } from '@storybook/react';
+import Link from 'next/link';
+import React from 'react';
+
+const meta: Meta<IPageProps> = {
+  title: 'Layout/Full',
+  component: Full,
+};
+
+export default meta;
+
+type Story = StoryObj<IPageProps>;
+
+const aSideMenuTree = [
+  {
+    depth: 2,
+    tag: 'h2' as unknown as TagNameType,
+    title: 'Kadena: The Next Generation Blockchain',
+    children: [
+      {
+        depth: 3,
+        tag: 'h3' as unknown as TagNameType,
+        title: 'Kadena raises $2.25M in first funding round',
+        children: [],
+        index: 1,
+        parentTitle: 'Kadena: The Next Generation Blockchain',
+      },
+    ],
+    index: 0,
+    parentTitle: '',
+  },
+];
+
+const props: IPageProps = {
+  frontmatter: fullLayoutFrontMatter,
+  leftMenuTree: fullLayoutLeftMenuTree,
+  menuItems: [],
+  aSideMenuTree: aSideMenuTree,
+  topDocs: [],
+};
+
+export const Default: Story = {
+  name: 'Default',
+  args: props,
+  render: ({ frontmatter, leftMenuTree, aSideMenuTree }) => (
+    <div>
+      <Full
+        frontmatter={frontmatter}
+        leftMenuTree={leftMenuTree}
+        menuItems={[]}
+        aSideMenuTree={aSideMenuTree}
+        topDocs={[]}
+      >
+        <Heading2>Kadena: The Next Generation Blockchain</Heading2>
+        <Paragraph>
+          JANUARY 2018 ROUND UP — Kadena has a lot of exciting news and updates
+          about our company, its technology, and what&apos;s on the horizon. We
+          want to thank you all so much for your incredible enthusiasm and
+          support! Here&apos;s what&apos;s gone down in the past few months:
+        </Paragraph>
+        <Heading2>Kadena raises $2.25M in first funding round</Heading2>
+        <Paragraph>
+          Kadena co-founders{' '}
+          <Link href="http://kadena.io/#/team">Will Martino</Link>, and{' '}
+          <Link href="http://kadena.io/#/team">Stuart Popejoy</Link>, announced
+          that we raised $2.25M in our pre-A{'\n'}financing round. Major
+          investors in the private-placement SAFT round included Metastable,
+          Kilowatt Capital, Coinfund, and Multicoin Capital. Check out the{' '}
+          <Link href="https://www.coindesk.com/jp-morgan-blockchain-spin-off-raises-2-25-million/">
+            CoinDesk
+          </Link>
+          , article that launched a frenzy of interest and{' '}
+          <Link href="http://kadena.io/docs/KadenaPR-1-31-2018.pdf">
+            read our press release
+          </Link>
+          .
+        </Paragraph>
+      </Full>
+    </div>
+  ),
+};

packages/apps/docs/src/components/Layout/Full/styles.ts

@@ -1,6 +1,6 @@
 import { styled, StyledComponent } from '@kadena/react-components';
 
-import { BasePageGrid } from '../components';
+import { BasePageGrid } from '../components/styles';
 
 export const PageGrid: StyledComponent<typeof BasePageGrid> = styled(
   BasePageGrid,

packages/apps/docs/src/components/Layout/Home/Home.tsx

@@ -1,4 +1,4 @@
-import { BasePageGrid } from '../components';
+import { BasePageGrid } from '../components/styles';
 import { Template } from '../components/Template';
 
 import { globalClass } from './../global.css';

packages/apps/docs/src/components/Layout/Landing/Landing.tsx

@@ -10,11 +10,11 @@ import { globalClass } from '../global.css';
 import { PageGrid } from './styles';
 
 import { NotFound } from '@/components/NotFound';
-import { IPageProps } from '@/types/Layout';
+import { IBasePageProps } from '@/types/Layout';
 import classNames from 'classnames';
 import React, { FC } from 'react';
 
-export const Landing: FC<IPageProps> = ({
+export const Landing: FC<IBasePageProps> = ({
   children,
   frontmatter,
   leftMenuTree,

packages/apps/docs/src/components/Layout/Landing/index.stories.tsx

@@ -0,0 +1,68 @@
+import { landingFrontMatter } from '../__fixtures__/frontmatter';
+import { leftMenuTree } from '../__fixtures__/leftMenuTree';
+import { Landing } from '../Landing';
+
+import { Heading2 } from '@/components/Markdown/Heading';
+import { Paragraph } from '@/components/Markdown/Paragraph';
+import { IBasePageProps } from '@/types/Layout';
+import { Meta, StoryObj } from '@storybook/react';
+import Link from 'next/link';
+import React from 'react';
+
+const meta: Meta<IBasePageProps> = {
+  title: 'Layout/Landing',
+  component: Landing,
+};
+
+export default meta;
+
+type Story = StoryObj<IBasePageProps>;
+
+const props: IBasePageProps = {
+  frontmatter: landingFrontMatter,
+  leftMenuTree: leftMenuTree,
+  menuItems: [],
+  aSideMenuTree: [],
+  topDocs: [],
+};
+
+export const Default: Story = {
+  name: 'Default',
+  args: props,
+  render: ({ frontmatter, leftMenuTree }) => (
+    <div>
+      <Landing
+        frontmatter={frontmatter}
+        leftMenuTree={leftMenuTree}
+        menuItems={[]}
+        aSideMenuTree={[]}
+        topDocs={[]}
+      >
+        <Heading2>Kadena: The Next Generation Blockchain</Heading2>
+        <Paragraph>
+          JANUARY 2018 ROUND UP — Kadena has a lot of exciting news and updates
+          about our company, its technology, and what&apos;s on the horizon. We
+          want to thank you all so much for your incredible enthusiasm and
+          support! Here&apos;s what&apos;s gone down in the past few months:
+        </Paragraph>
+        <Heading2>Kadena raises $2.25M in first funding round</Heading2>
+        <Paragraph>
+          Kadena co-founders{' '}
+          <Link href="http://kadena.io/#/team">Will Martino</Link>, and{' '}
+          <Link href="http://kadena.io/#/team">Stuart Popejoy</Link>, announced
+          that we raised $2.25M in our pre-A{'\n'}financing round. Major
+          investors in the private-placement SAFT round included Metastable,
+          Kilowatt Capital, Coinfund, and Multicoin Capital. Check out the{' '}
+          <Link href="https://www.coindesk.com/jp-morgan-blockchain-spin-off-raises-2-25-million/">
+            CoinDesk
+          </Link>
+          , article that launched a frenzy of interest and{' '}
+          <Link href="http://kadena.io/docs/KadenaPR-1-31-2018.pdf">
+            read our press release
+          </Link>
+          .
+        </Paragraph>
+      </Landing>
+    </div>
+  ),
+};

packages/apps/docs/src/components/Layout/Landing/styles.ts

@@ -1,6 +1,6 @@
 import { styled, StyledComponent } from '@kadena/react-components';
 
-import { BasePageGrid } from '../components';
+import { BasePageGrid } from '../components/styles';
 
 export const PageGrid: StyledComponent<typeof BasePageGrid> = styled(
   BasePageGrid,