From 3a2d0e1a24cddbe551683ff8eeab9bc97aa7e8c0 Mon Sep 17 00:00:00 2001 From: Mohamed Ismail Date: Mon, 28 Aug 2023 15:59:04 +0200 Subject: [PATCH] feat(docs): add storybook for landing + redocly layout --- .../Layout/Landing/index.stories.tsx | 68 +++++++++++++++++++ .../Layout/Redocly/index.stories.tsx | 68 +++++++++++++++++++ .../Layout/__fixtures__/frontmatter.ts | 34 +++++++++- packages/apps/docs/src/types/Layout.ts | 13 ++-- 4 files changed, 177 insertions(+), 6 deletions(-) create mode 100644 packages/apps/docs/src/components/Layout/Landing/index.stories.tsx create mode 100644 packages/apps/docs/src/components/Layout/Redocly/index.stories.tsx diff --git a/packages/apps/docs/src/components/Layout/Landing/index.stories.tsx b/packages/apps/docs/src/components/Layout/Landing/index.stories.tsx new file mode 100644 index 00000000000..e5e9d0c973a --- /dev/null +++ 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 = { + title: 'Layout/Landing', + component: Landing, +}; + +export default meta; + +type Story = StoryObj; + +const props: IPageProps = { + frontmatter: landingFrontMatter, + leftMenuTree: leftMenuTree, + menuItems: [], + aSideMenuTree: [], + topDocs: [], +}; + +export const Default: Story = { + name: 'Default', + args: props, + render: ({ frontmatter, leftMenuTree }) => ( +
+ + Kadena: The Next Generation Blockchain + + JANUARY 2018 ROUND UP — Kadena has a lot of exciting news and updates + about our company, its technology, and what's on the horizon. We + want to thank you all so much for your incredible enthusiasm and + support! Here's what's gone down in the past few months: + + Kadena raises $2.25M in first funding round + + Kadena co-founders{' '} + Will Martino, and{' '} + Stuart Popejoy, 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{' '} + + CoinDesk + + , article that launched a frenzy of interest and{' '} + + read our press release + + . + + +
+ ), +}; diff --git a/packages/apps/docs/src/components/Layout/Redocly/index.stories.tsx b/packages/apps/docs/src/components/Layout/Redocly/index.stories.tsx new file mode 100644 index 00000000000..025d6d78f5c --- /dev/null +++ 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 = { + title: 'Layout/Redocly', + component: Redocly, +}; + +export default meta; + +type Story = StoryObj; + +const props: IPageProps = { + frontmatter: redoclyFrontMatter, + leftMenuTree: leftMenuTree, + menuItems: [], + aSideMenuTree: [], + topDocs: [], +}; + +export const Default: Story = { + name: 'Default', + args: props, + render: ({ frontmatter, leftMenuTree }) => ( +
+ + Kadena: The Next Generation Blockchain + + JANUARY 2018 ROUND UP — Kadena has a lot of exciting news and updates + about our company, its technology, and what's on the horizon. We + want to thank you all so much for your incredible enthusiasm and + support! Here's what's gone down in the past few months: + + Kadena raises $2.25M in first funding round + + Kadena co-founders{' '} + Will Martino, and{' '} + Stuart Popejoy, 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{' '} + + CoinDesk + + , article that launched a frenzy of interest and{' '} + + read our press release + + . + + +
+ ), +}; diff --git a/packages/apps/docs/src/components/Layout/__fixtures__/frontmatter.ts b/packages/apps/docs/src/components/Layout/__fixtures__/frontmatter.ts index 2f89fd33dcf..7ac5bb29e28 100644 --- 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'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 index e06b78d2adf..aadbd16f762 100644 --- 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[]; }