@xyd-js/storybook 0.0.1-xyd.4 → 0.0.1-xyd.51

package/src/docs/themes/themes-designsystem.stories.tsx

@@ -7,14 +7,15 @@ import {
     Table,
     UnderlineNav,
 } from '@xyd-js/components/writer';
-import getContentComponents from "@xyd-js/components/content";
+import {ReactContent} from "@xyd-js/components/content";
 
+const reactContent = new ReactContent()
 const {
     h1: H1,
     h3: H3,
     h4: H4,
     p: Text,
-} = getContentComponents();
+} = reactContent.components()
 
 export default {
     title: 'Themes',

package/src/docs/themes/themes.stories.tsx

@@ -3,11 +3,14 @@ import type {Meta} from '@storybook/react';
 import {MemoryRouter} from "react-router";
 
 import {
-    Layout,
     LayoutPrimary
 } from '@xyd-js/components/layouts';
 
-import getContentComponents from "@xyd-js/components/content";
+import {ReactContent} from "@xyd-js/components/content";
+
+const reactContent = new ReactContent()
+const getContentComponents = reactContent.components
+
 import {
     Breadcrumbs,
     NavLinks
@@ -19,8 +22,8 @@ import {
     UISidebar
 } from "@xyd-js/ui"
 
-import {LiveSessionPlatformLogo} from "./logo.tsx";
-import Content from "../../content/hello-world.mdx";
+import {LiveSessionPlatformLogo} from "./logo";
+import Content from "../../__fixtures__/hello-world.mdx";
 
 export default {
     title: 'Themes/Default',
@@ -33,17 +36,18 @@ export default {
 
 export const Default = () => {
     return <LayoutPrimary
-        header={<DemoNavbar/>}
-        subheader
-        aside={<DemoSidebar/>}
-        content={<DemoContent/>}
-        contentNav={<DemoTOC/>}
+        header={<$DemoNavbar/>}
+        subheader={<$DemoSubNav/>}
+        aside={<$DemoSidebar/>}
+        content={<$DemoContent/>}
+        contentNav={<$DemoTOC/>}
     />
 }
 
-function DemoNavbar() {
+function $DemoNavbar() {
     return <>
         <Nav
+            onChange={() => {}}
             value="api-reference"
             logo={<LiveSessionPlatformLogo/>}
             kind="middle"
@@ -58,21 +62,24 @@ function DemoNavbar() {
                 GraphQL
             </Nav.Item>
         </Nav>
-        <SubNav title="Apps" value="build">
-            <SubNav.Item value="build" href="/build">
-                Build
-            </SubNav.Item>
-            <SubNav.Item value="design" href="/design">
-                Design
-            </SubNav.Item>
-            <SubNav.Item value="launch" href="/launch">
-                Launch
-            </SubNav.Item>
-        </SubNav>
     </>
 }
 
-function DemoSidebar() {
+function $DemoSubNav() {
+    return <SubNav onChange={() => {}} title="Apps" value="build">
+        <SubNav.Item value="build" href="/build">
+            Build
+        </SubNav.Item>
+        <SubNav.Item value="design" href="/design">
+            Design
+        </SubNav.Item>
+        <SubNav.Item value="launch" href="/launch">
+            Launch
+        </SubNav.Item>
+    </SubNav>
+}
+
+function $DemoSidebar() {
     const [isOpen, setIsOpen] = useState(false)
 
     function onClick() {
@@ -84,7 +91,7 @@ function DemoSidebar() {
         </UISidebar.Item>
     )
 
-    return <UISidebar footerItems={<DemoSidebarFooter/>}>
+    return <UISidebar footerItems={<$DemoSidebarFooter/>}>
         <UISidebar.ItemHeader>
             GET STARTED
         </UISidebar.ItemHeader>
@@ -131,7 +138,7 @@ function DemoSidebar() {
     </UISidebar>
 }
 
-function DemoSidebarFooter() {
+function $DemoSidebarFooter() {
     return <>
         <UISidebar.FooterItem
             href="#"
@@ -209,7 +216,7 @@ function DemoSidebarFooter() {
 }
 
 
-function DemoContent() {
+function $DemoContent() {
     return <>
         <Breadcrumbs
             items={[
@@ -245,7 +252,7 @@ function DemoContent() {
     </>
 }
 
-function DemoTOC() {
+function $DemoTOC() {
     return <Toc defaultValue="quickstart">
         <Toc.Item value="quickstart">
             Quickstart

package/src/docs/ui/Sidebar.stories.tsx

@@ -1,11 +1,17 @@
 import React, {useState} from 'react';
 import type {Meta} from '@storybook/react';
+import {MemoryRouter} from "react-router";
 
 import {UISidebar} from '@xyd-js/ui';
-import {Layout} from "@xyd-js/components/layouts";
+import {LayoutPrimary} from "@xyd-js/components/layouts";
 
 export default {
     title: 'UI/Sidebar',
+    decorators: [
+        (Story) => <MemoryRouter>
+            <Story />
+        </MemoryRouter>,
+    ],
 } as Meta;
 
 export const Default = () => {
@@ -14,7 +20,7 @@ export const Default = () => {
         paddingTop: "0px",
         margin: "0 auto",
     }}>
-        <Layout
+        <LayoutPrimary
             header={<></>}
             aside={<DemoSidebar/>}
             content={<></>}