@xyd-js/storybook 0.0.0-build

package/src/decorators/DocsTemplate.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+
+import { MemoryRouter } from "react-router";
+
+import { LayoutPrimary } from "@xyd-js/components/layouts";
+import { ContentDecorator } from "@xyd-js/components/content";
+import { Footer } from "@xyd-js/components/system";
+
+import { DemoNavbar, DemoSidebar, DemoSubNav, DemoTOC } from "../components/DemoDocs";
+import { Github, Linkedin, Twitter, Youtube } from "lucide-react";
+
+interface DocsTemplateDecoratorOptions {
+    toc?: boolean
+}
+
+export const DocsTemplateDecorator = ({ toc = true }: DocsTemplateDecoratorOptions) => (Story) => <MemoryRouter>
+    <LayoutPrimary
+        subheader={true}
+        // layout={meta?.layout}
+        layout="page"
+        scrollKey={location.pathname}
+    >
+        <LayoutPrimary.Header
+            // banner={banner}
+            header={<DemoNavbar />}
+        // subheader={<DemoSubNav />}
+        />
+        {/* <LayoutPrimary.MobileAside
+            aside={<DemoSidebar />}
+        /> */}
+
+        <main part="main">
+            {/* <aside part="sidebar"> */}
+            {/* <DemoSidebar /> */}
+            {/* </aside> */}
+
+            <LayoutPrimary.Page contentNav={toc ? <DemoTOC /> : undefined}>
+                <$Content>
+                    {/* {children} */}
+                    <Story />
+                </$Content>
+
+                {/* <$PageFooter>
+                    <$BuiltWithXYD />
+                </$PageFooter> */}
+            </LayoutPrimary.Page>
+        </main>
+
+        <Footer
+            kind="minimal"
+            links={[
+                {
+                    label: "Trademark Policy",
+                    href: "https://www.livesession.com/trademark-policy"
+                },
+                {
+                    label: "Privacy Policy",
+                    href: "https://www.livesession.com/privacy-policy"
+                },
+                {
+                    label: "Terms of Service",
+                    href: "https://www.livesession.com/terms-of-service"
+                }
+            ]}
+            socials={[
+                {
+                    href: "https://www.livesession.com/github",
+                    logo: <Github />
+                },
+                {
+                    href: "https://www.livesession.com/linkedin",
+                    logo: <Linkedin />
+                },
+                {
+                    href: "https://www.livesession.com/twitter",
+                    logo: <Twitter />
+                },
+                {
+                    href: "https://www.livesession.com/youtube",
+                    logo: <Youtube />
+                }
+            ]}
+            footnote="© Livesession 2025"
+        />
+
+        {/* <$Footer /> */}
+    </LayoutPrimary>
+</MemoryRouter>
+
+
+function $Content({ children }) {
+    return <>
+        {/* <$Breadcrumbs /> */}
+
+        <ContentDecorator>
+            {children}
+        </ContentDecorator>
+
+        {/* <$NavLinks /> */}
+    </>
+}

package/src/docs/atlas/Atlas.stories.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import type { Meta } from '@storybook/react';
+import { MemoryRouter } from "react-router";
+
+import { Reference } from '@xyd-js/uniform';
+import { Atlas } from "@xyd-js/atlas";
+
+import { uniformToReferences } from "./uniform-to-references";
+import { MDXReference } from "../../utils/mdx";
+import { exampleSourceUniform } from "../../__fixtures__/example-source-uniform";
+import { DocsTemplateDecorator } from "../../decorators/DocsTemplate";
+export default {
+    title: 'Atlas/Atlas',
+    component: Atlas,
+    decorators: [
+        DocsTemplateDecorator({ toc: false }),
+    ],
+} as Meta;
+
+const Template = (args: any) => {
+    const [references, setReferences] = useState<MDXReference<Reference[]> | []>([])
+
+    async function load() {
+        const resp = await uniformToReferences()
+        if (resp && resp.length) {
+            setReferences(resp)
+        }
+    }
+
+    useEffect(() => {
+        load()
+    }, [])
+
+    return <>
+        <Atlas references={references} />
+    </>
+}
+
+export const Primary = Template.bind({});
+Primary.args = {};
+
+
+const TemplateSecondary = () => {
+    return <>
+        <Atlas kind="secondary" references={[exampleSourceUniform]} />
+    </>
+}
+
+export const Secondary = TemplateSecondary.bind({});
+Secondary.args = {};
+