feat(docs): add storybook for landing + redocly layout

kadena-community · Aug 28, 2023 · 94c05a7 · 94c05a7
1 parent 9f73e54
commit 94c05a7
Show file tree

Hide file tree

Showing 4 changed files with 177 additions and 6 deletions.
diff --git a/packages/apps/docs/src/components/Layout/Landing/index.stories.tsx b/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 { 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/Landing',
+  component: Landing,
+};
+
+export default meta;
+
+type Story = StoryObj<IPageProps>;
+
+const props: IPageProps = {
+  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>
+  ),
+};
diff --git a/packages/apps/docs/src/components/Layout/Redocly/index.stories.tsx b/packages/apps/docs/src/components/Layout/Redocly/index.stories.tsx
@@ -0,0 +1,68 @@
+import { redoclyFrontMatter } from '../__fixtures__/frontmatter';
+import { leftMenuTree } from '../__fixtures__/leftMenuTree';
+import { Redocly } from '../Redocly';
+
+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/Redocly',
+  component: Redocly,
+};
+
+export default meta;
+
+type Story = StoryObj<IPageProps>;
+
+const props: IPageProps = {
+  frontmatter: redoclyFrontMatter,
+  leftMenuTree: leftMenuTree,
+  menuItems: [],
+  aSideMenuTree: [],
+  topDocs: [],
+};
+
+export const Default: Story = {
+  name: 'Default',
+  args: props,
+  render: ({ frontmatter, leftMenuTree }) => (
+    <div>
+      <Redocly
+        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>
+      </Redocly>
+    </div>
+  ),
+};
diff --git a/packages/apps/docs/src/components/Layout/__fixtures__/frontmatter.ts b/packages/apps/docs/src/components/Layout/__fixtures__/frontmatter.ts
@@ -1,4 +1,4 @@
-import { IPageMeta } from '@/types/Layout';
+import { IBasePageMeta, IPageMeta } from '@/types/Layout';
 
 export const blogFrontMatter: IPageMeta = {
   wordCount: 779,
@@ -48,3 +48,35 @@ export const fullLayoutFrontMatter: IPageMeta = {
   order: 1,
   layout: 'full',
 };
+
+export const landingFrontMatter: IBasePageMeta = {
+  title: 'Intro to Kadena',
+  menu: 'Kadena',
+  subTitle: 'Build the future on Kadena',
+  label: 'Introduction',
+  order: 0,
+  description: 'Welcome to Kadena&apos;s documentation!',
+  layout: 'landing',
+  icon: 'KadenaOverview',
+};
+
+export const homeFrontMatter: IBasePageMeta = {
+  title: 'Welcome to Kadena docs',
+  menu: 'Pact',
+  label: 'Pact Test',
+  order: 1,
+  description:
+    "Welcome to Kadena's documentation! All our Documentation in 1 place. Pact, ChainWeb, KDA, Marmalade etc",
+  layout: 'home',
+};
+
+export const redoclyFrontMatter: IBasePageMeta = {
+  title: 'Chainweb',
+  menu: 'Chainweb',
+  subTitle: 'Be a part of our ecosystem',
+  label: 'Chainweb',
+  order: 5,
+  description: 'Be a part of our ecosystem',
+  layout: 'redocly',
+  icon: 'Chainweb',
+};
diff --git a/packages/apps/docs/src/types/Layout.ts b/packages/apps/docs/src/types/Layout.ts
@@ -32,17 +32,20 @@ export interface INavigationMenuItem {
   root: string;
 }
 
-export interface IPageMeta {
-  title: string; // title of the HEAD info
-  subTitle?: string;
+export interface IBasePageMeta {
+  title: string;
   menu: string; // name in the main menu
   order?: number;
   label: string; // name of the pagdescription: string;
   layout: LayoutType;
   description: string;
+  subTitle?: string;
+  icon?: ProductIconNames;
+}
+
+export interface IPageMeta extends IBasePageMeta {
   editLink: string;
   lastModifiedDate?: Date;
-  icon?: ProductIconNames;
   navigation: INavigation;
   publishDate?: string;
   author?: string;
@@ -79,7 +82,7 @@ export interface IPageProps {
   children?: ReactNode;
   menuItems: IMenuItem[];
   aSideMenuTree: ISubHeaderElement[];
-  frontmatter: IPageMeta;
+  frontmatter: IPageMeta | IHomePageMeta;
   leftMenuTree: IMenuItem[];
   topDocs: ITopDoc[];
 }