From 273e506992674cc4724af164728079046148eb1e Mon Sep 17 00:00:00 2001 From: Mohamed Ismail Date: Mon, 28 Aug 2023 15:18:55 +0200 Subject: [PATCH] feat(docs): add storybook for full layout component --- .../components/Layout/Full/index.stories.tsx | 89 +++++++ .../Layout/__fixtures__/frontmatter.ts | 31 ++- .../Layout/__fixtures__/leftMenuTree.ts | 220 ++++++++++++++++++ 3 files changed, 324 insertions(+), 16 deletions(-) create mode 100644 packages/apps/docs/src/components/Layout/Full/index.stories.tsx diff --git a/packages/apps/docs/src/components/Layout/Full/index.stories.tsx b/packages/apps/docs/src/components/Layout/Full/index.stories.tsx new file mode 100644 index 00000000000..686c87f69b6 --- /dev/null +++ b/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 = { + title: 'Layout/Full', + component: Full, +}; + +export default meta; + +type Story = StoryObj; + +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 }) => ( +
+ + 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 e8a8e6f8733..2f89fd33dcf 100644 --- a/packages/apps/docs/src/components/Layout/__fixtures__/frontmatter.ts +++ b/packages/apps/docs/src/components/Layout/__fixtures__/frontmatter.ts @@ -9,7 +9,7 @@ export const blogFrontMatter: IPageMeta = { navigation: { previous: { root: '/docs/blogchain/2018/security-kadena-chainweb-blockchain-2018-11-01', - title: 'Security in Kadena's Public Blockchain', + title: "Security in Kadena's Public Blockchain", }, next: { root: '/docs/blogchain/2018/the-evm-is-fundamentally-unsafe-2018-12-13', @@ -18,7 +18,7 @@ export const blogFrontMatter: IPageMeta = { }, title: 'Kadena The Next Generation Blockchain', description: - '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 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", menu: 'Kadena The Next Generation Blockchain', label: 'Kadena The Next Generation Blockchain', publishDate: '2018-02-07T00:00:00.000Z', @@ -26,26 +26,25 @@ export const blogFrontMatter: IPageMeta = { layout: 'blog', }; -export const fullLayoutType: IPageMeta = { - wordCount: 1053, - readingTimeInMinutes: 6, - editLink: 'XXXX/packages/apps/docs/src/pages/docs/build/quickstart.mdx', - lastModifiedDate: new Date('2023-08-22T15:00:04.452Z'), +export const fullLayoutFrontMatter: IPageMeta = { + wordCount: 809, + readingTimeInMinutes: 5, + editLink: 'XXXX/packages/apps/docs/src/pages/docs/kadena/overview.mdx', + lastModifiedDate: new Date('2023-08-22T15:00:04.405Z'), navigation: { previous: { - root: '/docs/build', - title: 'Build on Kadena', + root: '/docs/kadena', + title: 'Intro to Kadena', }, next: { - root: '/docs/build/tools', - title: 'Useful Tools', + root: '/docs/kadena/kda', + title: 'What is KDA?', }, }, - title: 'Kadena Quickstart', - description: - "Learn Kadena's core concepts & tools for development in 15 minutes", - menu: 'Build', - label: 'Quickstart', + title: 'Overview of Kadena', + description: 'Kadena makes blockchain work for everyone.', + menu: 'Kadena', + label: 'Overview', order: 1, layout: 'full', }; diff --git a/packages/apps/docs/src/components/Layout/__fixtures__/leftMenuTree.ts b/packages/apps/docs/src/components/Layout/__fixtures__/leftMenuTree.ts index 2642e6b3c39..011d2b26f58 100644 --- a/packages/apps/docs/src/components/Layout/__fixtures__/leftMenuTree.ts +++ b/packages/apps/docs/src/components/Layout/__fixtures__/leftMenuTree.ts @@ -61,3 +61,223 @@ export const leftMenuTree: IMenuItem[] = [ children: [], }, ]; + +export const fullLayoutLeftMenuTree: IMenuItem[] = [ + { + children: [ + { + children: [], + root: '/docs/kadena/overview', + title: 'Overview of Kadena', + menu: 'Kadena', + label: 'Overview', + isMenuOpen: true, + isActive: true, + }, + { + children: [ + { + children: [], + root: '/docs/kadena/kda/manage-kda', + title: 'Manage KDA', + menu: 'Manage KDA', + label: 'Manage KDA', + isMenuOpen: false, + isActive: false, + }, + { + children: [], + root: '/docs/kadena/kda/kda-concepts', + title: 'KDA Concepts', + menu: 'KDA Concepts', + label: 'KDA Concepts', + isMenuOpen: false, + isActive: false, + }, + ], + root: '/docs/kadena/kda', + title: 'What is KDA?', + menu: 'KDA', + label: 'What is KDA?', + isMenuOpen: false, + isActive: false, + }, + { + children: [ + { + children: [], + root: '/docs/kadena/whitepapers/chainweb-layer-1', + title: 'Chainweb Layer 1', + menu: 'Whitepapers', + label: 'Chainweb Layer 1', + isMenuOpen: false, + isActive: false, + }, + { + children: [], + root: '/docs/kadena/whitepapers/pact-smart-contract-language', + title: 'Pact Smart Contract Language', + menu: 'Whitepapers', + label: 'Pact Smart Contract', + isMenuOpen: false, + isActive: false, + }, + { + children: [], + root: '/docs/kadena/whitepapers/kuro-layer-2', + title: 'Kuro Layer 2', + menu: 'Whitepapers', + label: 'Kuro Layer 2', + isMenuOpen: false, + isActive: false, + }, + ], + root: '/docs/kadena/whitepapers', + title: 'Whitepapers Overview', + menu: 'Whitepapers', + label: 'Overview', + isMenuOpen: false, + isActive: false, + }, + { + children: [], + root: '/docs/kadena/wallets', + title: 'Kadena Wallets', + menu: 'Kadena Wallets', + label: 'Overview', + isMenuOpen: false, + isActive: false, + }, + { + children: [], + root: '/docs/kadena/exchanges', + title: 'Kadena Exchanges', + menu: 'Exchanges', + label: 'Exchanges', + isMenuOpen: false, + isActive: false, + }, + { + children: [], + root: '/docs/kadena/support', + title: 'FAQ', + menu: 'Support', + label: 'FAQ', + isMenuOpen: false, + isActive: false, + }, + { + children: [], + root: '/docs/kadena/kadenajs', + title: 'Running Tests', + menu: 'KadenaJS', + label: 'Running Tests', + isMenuOpen: false, + isActive: false, + }, + { + children: [], + root: '/docs/kadena/resources', + title: 'Kadena Resources', + menu: 'Resources', + label: 'Resources', + isMenuOpen: false, + isActive: false, + }, + { + children: [], + root: '/docs/kadena/client', + title: 'Package @kadena/client', + menu: 'Client', + label: 'Package @kadena/client', + isMenuOpen: false, + isActive: false, + }, + { + children: [], + root: '/docs/kadena/client-examples', + title: 'Client examples', + menu: 'Client examples', + label: 'Client examples', + isMenuOpen: false, + isActive: false, + }, + { + children: [], + root: '/docs/kadena/code-of-conduct', + menu: 'Code of Conduct', + title: 'Code of Conduct', + label: 'Code of Conduct', + isMenuOpen: false, + isActive: false, + }, + ], + root: '/docs/kadena', + title: 'Intro to Kadena', + menu: 'Kadena', + label: 'Introduction', + icon: 'KadenaOverview', + isMenuOpen: true, + isActive: false, + }, + { + root: '/docs/build', + title: 'Build on Kadena', + menu: 'Build', + label: 'Introduction', + icon: 'Contribute', + isMenuOpen: false, + isActive: false, + children: [], + }, + { + root: '/docs/pact', + title: 'Learn Pact', + menu: 'Pact', + label: 'Pact', + icon: 'PactDeveloper', + isMenuOpen: false, + isActive: false, + children: [], + }, + { + root: '/docs/contribute', + title: 'Contribute', + menu: 'Contribute', + label: 'Contribute', + icon: 'Contribute', + isMenuOpen: false, + isActive: false, + children: [], + }, + { + root: '/docs/chainweb', + title: 'Intro to Chainweb', + menu: 'Chainweb', + label: 'Introduction', + icon: 'Chainweb', + isMenuOpen: false, + isActive: false, + children: [], + }, + { + root: '/docs/marmalade', + title: 'Intro to Marmalade', + menu: 'Marmalade', + label: 's', + icon: 'Marmalade', + isMenuOpen: false, + isActive: false, + children: [], + }, + { + root: '/docs/blogchain', + title: 'BlogChain', + menu: 'BlogChain', + label: 'BlogChain', + icon: 'BlogChain', + isMenuOpen: false, + isActive: false, + children: [], + }, +];