@xyd-js/storybook 0.0.0-build

package/src/docs/atlas/uniform-to-references.ts

@@ -0,0 +1,101 @@
+// TODO: move to utils or somewhere else
+import React from "react";
+import {parse} from "codehike";
+import {visit} from "unist-util-visit";
+import {recmaCodeHike, remarkCodeHike} from "codehike/mdx";
+import {compile as mdxCompile} from "@mdx-js/mdx";
+
+import {Reference} from "@xyd-js/uniform";
+import {
+    compile as compileMarkdown,
+    referenceAST
+} from "@xyd-js/uniform/markdown";
+
+import todoAppUniform from "./todo-app.uniform.json";
+import {MDXReference} from "../../utils/mdx.ts";
+
+// since unist does not support heading level > 6, we need to normalize them
+function normalizeCustomHeadings() {
+    return (tree: any) => {
+        visit(tree, 'paragraph', (node, index, parent) => {
+            const match = node.children[0] && node.children[0].value.match(/^(#+)\s+(.*)/);
+            if (match) {
+                const level = match[1].length;
+                const text = match[2];
+                if (level > 6) {
+                    // Create a new heading node with depth 6
+                    const headingNode = {
+                        type: 'heading',
+                        depth: level,
+                        children: [{type: 'text', value: text}]
+                    };
+                    // Replace the paragraph node with the new heading node
+                    //@ts-ignore
+                    parent.children[index] = headingNode;
+                }
+            }
+        });
+    };
+}
+
+const codeHikeOptions = {
+    lineNumbers: true,
+    showCopyButton: true,
+    autoImport: true,
+    components: {code: "Code"},
+    // syntaxHighlighting: { // TODO: !!! FROM SETTINGS !!! wait for rr7 rsc ??
+    //     theme: "github-dark",
+    // },
+};
+
+async function compile(content: string): Promise<string> {
+    const compiled = await mdxCompile(content, {
+        remarkPlugins: [normalizeCustomHeadings, [remarkCodeHike, codeHikeOptions]],
+        recmaPlugins: [
+            [recmaCodeHike, codeHikeOptions]
+        ],
+        outputFormat: 'function-body',
+        development: false,
+    });
+
+    return String(compiled)
+}
+
+// TODO: move below to content?
+function getMDXComponent(code: string) {
+    const mdxExport = getMDXExport(code)
+    return mdxExport.default
+}
+
+function getMDXExport(code: string) {
+    const scope = {
+        Fragment: React.Fragment,
+        jsxs: React.createElement,
+        jsx: React.createElement,
+        jsxDEV: React.createElement,
+    }
+    const fn = new Function(...Object.keys(scope), code)
+    return fn(scope)
+}
+
+export async function uniformToReferences(): Promise<MDXReference<Reference[]> | []> {
+    let content: string = ""
+
+    for (const ref of todoAppUniform as Reference[]) {
+        const ast = referenceAST(ref)
+        const md = compileMarkdown(ast)
+
+        content += md + "\n"
+    }
+
+    const compiled = await compile(content)
+    const contentCode = getMDXComponent(compiled)
+
+    const parsedContent = contentCode ? parse(contentCode) : null
+
+    if (parsedContent) {
+        return parsedContent.references
+    }
+
+    return []
+}

package/src/docs/components/coder/CodeSample.stories.tsx

@@ -0,0 +1,29 @@
+import React, {} from 'react';
+import type {Meta} from '@storybook/react';
+import {MemoryRouter} from "react-router";
+
+import {ReactContent} from "@xyd-js/components/content";
+
+import Content from "../../../__fixtures__/code-sample.mdx";
+
+const reactContent = new ReactContent()
+const contentComponents = reactContent.components()
+
+export default {
+    title: 'Components/Coder/CodeSample',
+    decorators: [
+        (Story) => <MemoryRouter>
+            <Story/>
+        </MemoryRouter>
+    ]
+} as Meta;
+
+export const Default = async () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+        <Content components={contentComponents}/>
+    </div>
+}

package/src/docs/components/pages/PageBlogHome.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PageBlogHome } from '@xyd-js/components/pages';
+
+import { DocsTemplateDecorator } from '../../../decorators/DocsTemplate';
+
+// storybook-root
+const meta: Meta<typeof PageBlogHome> = {
+    title: 'Components/Pages/PageBlogHome',
+    component: PageBlogHome,
+    decorators: [
+        DocsTemplateDecorator({
+            toc: false
+        }),
+        (Story) => <>
+            <style dangerouslySetInnerHTML={{
+                __html: `
+                    #storybook-root {
+                        height: 100%;
+                    }
+                `
+            }} />
+            <Story />
+        </>,
+    ],
+    parameters: {
+        docs: {
+            description: {
+                component: 'PageBlogHome component creates a blog home page with a list of blog posts.',
+            },
+        },
+    },
+    argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof PageBlogHome>;
+
+export const Default: Story = {
+    render: () => (
+        <PageBlogHome
+        />
+    ),
+    parameters: {
+        docs: {
+            description: {
+                story: 'PageBlogHome component creates a blog home page with a list of blog posts.',
+            },
+        },
+    },
+};

package/src/docs/components/pages/PageFirstSlide.stories.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PageFirstSlide } from '@xyd-js/components/pages';
+import { CodeSample } from '@xyd-js/components/coder';
+
+import syntaxHighlight from '@xyd-js/components/coder/themes/classic';
+import '@xyd-js/components/coder/themes/classic.css'
+
+import { DocsTemplateDecorator } from '../../../decorators/DocsTemplate';
+
+// storybook-root
+const meta: Meta<typeof PageFirstSlide> = {
+    title: 'Components/Pages/PageFirstSlide',
+    component: PageFirstSlide,
+    decorators: [
+        DocsTemplateDecorator({
+            toc: false
+        }),
+        (Story) => <>
+            <style dangerouslySetInnerHTML={{
+                __html: `
+                    #storybook-root {
+                        height: 100%;
+                    }
+                `
+            }} />
+            <Story />
+        </>,
+    ],
+    parameters: {
+        docs: {
+            description: {
+                component: 'PageFirstSlide component creates a two-column layout with headings and buttons on the left, and image/logo/codeblocks on the right. Perfect for landing pages, product introductions, and feature showcases.',
+            },
+        },
+    },
+    argTypes: {
+        content: {
+            description: 'Content configuration with title, description, and buttons',
+            control: 'object',
+        },
+        rightContent: {
+            description: 'Content for the right side (image, logo, code block, etc.)',
+            control: false,
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof PageFirstSlide>;
+
+
+const CODE_EXAMPLE = `
+# Python SDK
+
+@let(snippet = await snippets.py.getSettings())
+
+Python \`Get Settings\` SDK snippet:
+
+\`\`\`python [=mySnippet]
+{snippet}
+\`\`\`
+@let(
+    .mySnippet.descHead="TIP"
+    .mySnippet.desc = (
+         Use our [Python SDK](https://sdk.example.com/py) 
+         to **integrate** your API settings.
+
+         * Configure authentication and endpoints
+         * Handle responses and error cases
+    )
+)
+
+Get Settings reference:
+@uniform({snippet})
+
+`.trim()
+
+// Basic PageFirstSlide with image
+export const Default: Story = {
+    render: () => (
+        <PageFirstSlide
+            content={{
+                title: 'Xwrite - content framework designed for docs',
+                description: 'Xwrite is a modern content framework that helps you build beautiful, fast, and accessible documentation sites. Create stunning docs with ease using our comprehensive component library.',
+                primaryButton: {
+                    title: 'Get Xwrite',
+                    href: '/download',
+                    kind: 'primary',
+                },
+                secondaryButton: {
+                    title: 'View documentation',
+                    href: '/docs',
+                    kind: 'secondary',
+                },
+            }}
+            rightContent={
+                <CodeSample
+                    lineNumbers={true}
+                    size="full"
+                    description="docs/python-sdk.md"
+                    theme={syntaxHighlight || undefined}
+                    descriptionHead='Code Example'
+                    descriptionContent='This is a code example'
+                    codeblocks={[
+                        {
+                            lang: "mdx",
+                            meta: "md",
+                            value: CODE_EXAMPLE
+                        }
+                    ]}
+                />
+            }
+        />
+    ),
+    parameters: {
+        docs: {
+            description: {
+                story: 'PageFirstSlide with Xwrite content, Python SDK code example, and matching footer.',
+            },
+        },
+    },
+};

package/src/docs/components/pages/PageHome.stories.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Rocket, Palette, Code, Zap, Star, HeartHandshake, GanttChart, Github, MessageCircle } from 'lucide-react';
+
+import { PageHome } from '@xyd-js/components/pages';
+
+const meta: Meta<typeof PageHome> = {
+    title: 'Components/Pages/PageHome',
+    component: PageHome,
+    parameters: {
+        docs: {
+            description: {
+                component: 'PageHome component creates a complete homepage layout with hero section, multiple content sections, and guide cards. Perfect for documentation sites, landing pages, and resource directories.',
+            },
+        },
+    },
+    argTypes: {
+        hero: {
+            description: 'Hero section configuration with title, description, image, and button',
+            control: 'object',
+        },
+        sections: {
+            description: 'Array of content sections with titles and guide cards',
+            control: 'object',
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof PageHome>;
+
+// Complete PageHome example
+export const Default: Story = {
+    args: {
+        hero: {
+            title: 'Welcome to xyd by LiveSession',
+            description: 'The docs framework for future dev.',
+            image: '/logo.svg',
+            button: {
+                title: 'Get Started',
+                href: '/docs/guides/introduction',
+            },
+        },
+        sections: [
+            {
+                title: 'Explore the docs',
+                cards: [
+                    {
+                        title: 'Quickstart',
+                        children: 'Start using xyd in minutes.',
+                        kind: 'secondary',
+                        icon: <Rocket size={24} />,
+                        href: '/docs/guides/quickstart',
+                    },
+                    {
+                        title: 'Theming',
+                        children: 'Customize the appearance of your documentation.',
+                        kind: 'secondary',
+                        icon: <Palette size={24} />,
+                        href: '/docs/guides/customization-quickstart',
+                    },
+                    {
+                        title: 'API Reference',
+                        children: 'Explore the complete API documentation and component library.',
+                        kind: 'secondary',
+                        icon: <Code size={24} />,
+                        href: '/docs/reference',
+                    },
+                ],
+            },
+            {
+                title: 'Resources',
+                cards: [
+                    {
+                        title: 'Examples',
+                        children: 'Browse real-world examples and templates to kickstart your docs.',
+                        kind: 'secondary',
+                        icon: <Zap size={24} />,
+                        href: 'https://github.com/xyd-js/examples',
+                    },
+                    {
+                        title: 'Source Code',
+                        children: 'View the open source codebase and contribute to the project.',
+                        kind: 'secondary',
+                        icon: <Github size={24} />,
+                        href: 'https://github.com/livesession/xyd',
+                    },
+                    {
+                        title: 'Awesome Docs',
+                        children: 'Discover curated collection of documentation built with xyd.',
+                        kind: 'secondary',
+                        icon: <Star size={24} />,
+                        href: 'https://github.com/livesession/awesomedocs',
+                    },
+                    {
+                        title: 'Feedback',
+                        children: 'Share your thoughts, report issues, and suggest improvements.',
+                        kind: 'secondary',
+                        icon: <HeartHandshake size={24} />,
+                        href: 'https://github.com/livesession/xyd/discussions',
+                    },
+                    {
+                        title: 'Slack',
+                        children: 'Join our community and get help from other developers.',
+                        kind: 'secondary',
+                        icon: <MessageCircle size={24} />,
+                        href: 'https://xyd-docs.slack.com',
+                    },
+                    {
+                        title: 'Roadmap',
+                        children: 'Track upcoming features and development progress.',
+                        kind: 'secondary',
+                        icon: <GanttChart size={24} />,
+                        href: 'https://github.com/orgs/livesession/projects/4',
+                    },
+                ],
+            },
+        ],
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Complete PageHome example with hero section and multiple content sections. This demonstrates all the key features including hero with image and button, organized sections with guide cards, and various link types.',
+            },
+        },
+    },
+}; 

package/src/docs/components/system/Baseline.stories.tsx

@@ -0,0 +1,126 @@
+import React, { useRef } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import * as htmlToImage from 'html-to-image';
+import download from 'downloadjs';
+
+import { Baseline } from '@xyd-js/components/system';
+
+function ExportableWrapper({ children }: { children: React.ReactNode }) {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    const exportAsSvg = () => {
+        if (!containerRef.current) return;
+        htmlToImage
+            .toSvg(containerRef.current)
+            .then((dataUrl) => {
+                download(dataUrl, 'exported-component.svg', 'image/svg+xml');
+            })
+            .catch((err) => {
+                console.error('Failed to export as SVG:', err);
+            });
+    };
+
+    return (
+        <div>
+            <div ref={containerRef}>{children}</div>
+            <button onClick={exportAsSvg}>Download as SVG</button>
+        </div>
+    );
+}
+
+const meta: Meta<typeof Baseline> = {
+    title: 'Components/System/Baseline',
+    component: Baseline,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Baseline component is used to display a baseline for the design system.',
+            },
+        },
+    },
+    argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof Baseline>;
+
+export const Default: Story = {
+    args: {
+        title: 'Node.js Support',
+        toolGroups: [
+            [
+                { tool: 'bun', supported: true },
+                { tool: 'node', supported: true, label: '22' },
+                { tool: 'node', supported: true, label: '23' },
+                { tool: 'node', supported: true, label: '24' },
+            ],
+            [
+                { tool: 'npm', supported: true },
+                { tool: 'node', supported: true, label: '22' },
+            ],
+            [
+                { tool: 'pnpm', supported: false },
+            ],
+        ],
+    },
+};
+
+export const WithRefAndClick: Story = {
+    render: (args) => {
+        const ref = useRef<HTMLDetailsElement>(null);
+        return (
+            <Baseline
+                {...args}
+                ref={ref}
+                onClick={() => {
+                    console.log('Baseline clicked!', ref.current);
+                }}
+            />
+        );
+    },
+    args: {
+        title: 'Node.js Support',
+        toolGroups: [
+            [
+                { tool: 'bun', supported: true },
+                { tool: 'node', supported: true, label: '22' },
+                { tool: 'node', supported: true, label: '23' },
+                { tool: 'node', supported: true, label: '24' },
+            ],
+            [
+                { tool: 'npm', supported: true },
+                { tool: 'node', supported: true, label: '22' },
+            ],
+            [
+                { tool: 'pnpm', supported: false },
+            ],
+        ],
+    },
+};
+
+export const ExportableBaseline: Story = {
+    render: (args) => (
+        <ExportableWrapper>
+            <Baseline {...args} />
+        </ExportableWrapper>
+    ),
+    args: {
+        title: 'Node.js Support',
+        toolGroups: [
+            [
+                { tool: 'bun', supported: true },
+                { tool: 'node', supported: true, label: '22' },
+                { tool: 'node', supported: true, label: '23' },
+                { tool: 'node', supported: true, label: '24' },
+            ],
+            [
+                { tool: 'npm', supported: true },
+                { tool: 'node', supported: true, label: '22' },
+            ],
+            [
+                { tool: 'pnpm', supported: false },
+            ],
+        ],
+    },
+};

package/src/docs/components/writer/Badge.stories.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from '@xyd-js/components/writer';
+
+const meta: Meta<typeof Badge> = {
+    title: 'Components/Writer/Badge',
+    component: Badge,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Badge component is used to display small status indicators, labels, or tags.',
+            },
+        },
+    },
+    argTypes: {
+        children: {
+            description: 'The content to display inside the badge',
+            control: 'text',
+        },
+        size: {
+            description: 'The size of the badge',
+            control: { type: 'select' },
+            options: ['xs', 'sm'],
+        },
+        kind: {
+            description: 'The visual style variant of the badge',
+            control: { type: 'select' },
+            options: ['default', 'warning', 'info'],
+        },
+        className: {
+            description: 'Additional CSS classes to apply',
+            control: 'text',
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+// Basic usage
+export const Default: Story = {
+    args: {
+        children: 'Default Badge',
+        kind: 'default',
+        size: 'sm',
+    },
+};
+
+// Size variants
+export const Small: Story = {
+    args: {
+        children: 'Small Badge',
+        size: 'sm',
+        kind: 'default',
+    },
+};
+
+export const ExtraSmall: Story = {
+    args: {
+        children: 'XS Badge',
+        size: 'xs',
+        kind: 'default',
+    },
+};
+
+// Kind variants
+export const Warning: Story = {
+    args: {
+        children: 'Warning Badge',
+        kind: 'warning',
+        size: 'sm',
+    },
+};
+
+export const Info: Story = {
+    args: {
+        children: 'Info Badge',
+        kind: 'info',
+        size: 'sm',
+    },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+    render: () => (
+        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>
+            <Badge kind="default" size="sm">Default</Badge>
+            <Badge kind="warning" size="sm">Warning</Badge>
+            <Badge kind="info" size="sm">Info</Badge>
+            <Badge kind="default" size="xs">XS Default</Badge>
+            <Badge kind="warning" size="xs">XS Warning</Badge>
+            <Badge kind="info" size="xs">XS Info</Badge>
+        </div>
+    ),
+};
+
+// With custom content
+export const WithIcons: Story = {
+    render: () => (
+        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>
+            <Badge kind="info" size="sm">
+                <span style={{ marginRight: '4px' }}>ℹ️</span>
+                Information
+            </Badge>
+            <Badge kind="warning" size="sm">
+                <span style={{ marginRight: '4px' }}>⚠️</span>
+                Warning
+            </Badge>
+            <Badge kind="default" size="sm">
+                <span style={{ marginRight: '4px' }}>🏷️</span>
+                Label
+            </Badge>
+        </div>
+    ),
+};
+
+// Interactive example
+export const Interactive: Story = {
+    args: {
+        children: 'Click me!',
+        kind: 'default',
+        size: 'sm',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This badge can be used in interactive contexts. You can add onClick handlers or other event listeners.',
+            },
+        },
+    },
+};
+