@xyd-js/storybook 0.0.1-xyd.0

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/brand/Button.stories.tsx

@@ -0,0 +1,32 @@
+import React, {} from 'react';
+import type {Meta} from '@storybook/react';
+
+import {Button} from "@xyd-js/components/brand";
+
+export default {
+    title: 'Components/Brand/Button',
+} as Meta;
+
+export const Default = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+        <Button>
+            Primary
+        </Button>
+    </div>
+}
+
+export const Secondary = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+        <Button kind="secondary">
+            Secondary
+        </Button>
+    </div>
+}

package/src/docs/components/brand/CTABanner.stories.tsx

@@ -0,0 +1,36 @@
+import React, {} from 'react';
+import type {Meta} from '@storybook/react';
+
+import {CTABanner, Button} from "@xyd-js/components/brand";
+
+export default {
+    title: 'Components/Brand/CTABanner',
+} as Meta;
+
+export const Default = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+        <CTABanner>
+            <CTABanner.Heading
+                title="XYD"
+                headingEffect
+                subtitle={<>
+                    Build documentation websites <br/>
+                    <strong>better</strong>
+                </>}
+            />
+            <CTABanner.ButtonGroup>
+                <Button kind="secondary">
+                    Quickstart
+                </Button>
+                <Button>
+                    Github
+                </Button>
+            </CTABanner.ButtonGroup>
+        </CTABanner>
+    </div>
+}
+

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

@@ -0,0 +1,26 @@
+import React, {} from 'react';
+import type {Meta} from '@storybook/react';
+import {MemoryRouter} from "react-router";
+
+import getContentComponents from "@xyd-js/components/content";
+
+import Content from "../../../content/code-sample.mdx";
+
+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={getContentComponents()}/>
+    </div>
+}

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

@@ -0,0 +1,32 @@
+import React, {} from 'react';
+import type {Meta} from '@storybook/react';
+
+import {Badge} from "@xyd-js/components/writer";
+
+export default {
+    title: 'Components/Writer/Badge',
+} as Meta;
+
+export const Default = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+        <Badge kind="">
+            Default
+        </Badge>
+    </div>
+}
+
+export const Warning = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+        <Badge kind="warning">
+            Warning
+        </Badge>
+    </div>
+}

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

@@ -0,0 +1,34 @@
+import React, {} from 'react';
+import type {Meta} from '@storybook/react';
+
+import {
+    Breadcrumbs,
+} from '@xyd-js/components/writer';
+
+export default {
+    title: 'Components/Writer/Breadcrumbs',
+} as Meta;
+
+export const Default = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+        <div style={{width: 700}}>
+            <Breadcrumbs items={[
+                {
+                    title: "Home",
+                    href: "/",
+                },
+                {
+                    title: "Docs",
+                    href: "/docs",
+                },
+                {
+                    title: "Components"
+                },
+            ]}/>
+        </div>
+    </div>
+}

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

@@ -0,0 +1,25 @@
+import React, {} from 'react';
+import type {Meta} from '@storybook/react';
+
+import {
+    Callout,
+} from '@xyd-js/components/writer';
+
+export default {
+    title: 'Components/Writer/Callout',
+} as Meta;
+
+export const Default = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+        <div style={{width: 700}}>
+            <Callout>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id sollicitudin diam. <br/>
+                Aliquam tincidunt quam quis ultrices gravida.In elit nisl, varius nec ligula nec.
+            </Callout>
+        </div>
+    </div>
+}

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

@@ -0,0 +1,151 @@
+import React, {} from 'react';
+import type {Meta} from '@storybook/react';
+
+import {
+    GuideCard,
+
+    IconSessionReplay,
+    IconMetrics
+} from '@xyd-js/components/writer';
+
+export default {
+    title: 'Components/Writer/GuideCard',
+} as Meta;
+
+export const Default = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+        display: "flex",
+        flexDirection: "column",
+        gap: "30px",
+    }}>
+        <div style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "30px",
+        }}>
+            <GuideCard
+                href="#"
+                icon={<IconSessionReplay/>}
+                title="Session Replay"
+                kind="secondary"
+            >
+                Visualize user interactions in your product with detailed session replays.
+            </GuideCard>
+
+
+            <GuideCard
+                icon={<IconMetrics/>}
+                title="Metrics Analysis"
+            >
+                Analyze key metrics to understand user behavior and optimize your product workflows.
+            </GuideCard>
+        </div>
+    </div>
+}
+
+export const Grid = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+        display: "flex",
+        flexDirection: "column",
+        gap: "30px",
+    }}>
+        <GuideCard.List>
+            <GuideCard
+                href="#"
+                icon={<svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="1em"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                >
+                    <path
+                        d="M22 9H2M2 7.8L2 16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V7.8C22 6.11984 22 5.27977 21.673 4.63803C21.3854 4.07354 20.9265 3.6146 20.362 3.32698C19.7202 3 18.8802 3 17.2 3L6.8 3C5.11984 3 4.27976 3 3.63803 3.32698C3.07354 3.6146 2.6146 4.07354 2.32698 4.63803C2 5.27976 2 6.11984 2 7.8Z"
+                        stroke="#000000"
+                        strokeWidth={2}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </svg>}
+                title="Browser API"
+                kind="secondary"
+            >
+                Capture user interactions like clicks, page views, and events directly from your app with minimal impact
+                on performance.
+            </GuideCard>
+
+            <GuideCard
+                href="#"
+                icon={<svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="1em"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                >
+                    <path
+                        fill="#000000"
+                        fillRule="evenodd"
+                        d="M.5 2.75a2.25 2.25 0 114.28.97l1.345 1.344.284-.284a2.25 2.25 0 013.182 0l.284.284 1.344-1.344a2.25 2.25 0 111.06 1.06l-1.343 1.345.284.284a2.25 2.25 0 010 3.182l-.284.284 1.344 1.344a2.25 2.25 0 11-1.06 1.06l-1.345-1.343-.284.284a2.25 2.25 0 01-3.182 0l-.284-.284-1.344 1.344a2.25 2.25 0 11-1.06-1.06l1.343-1.345-.284-.284a2.25 2.25 0 010-3.182l.284-.284L3.72 4.781A2.25 2.25 0 01.5 2.75zM2.75 2a.75.75 0 100 1.5.75.75 0 000-1.5zm0 10.5a.75.75 0 100 1.5.75.75 0 000-1.5zm9.75.75a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM13.25 2a.75.75 0 100 1.5.75.75 0 000-1.5zM7.47 5.841a.75.75 0 011.06 0L10.16 7.47a.75.75 0 010 1.06L8.53 10.16a.75.75 0 01-1.06 0L5.84 8.53a.75.75 0 010-1.06L7.47 5.84z"
+                        clipRule="evenodd"
+                    />
+                </svg>}
+                title="REST API"
+                kind="secondary"
+            >
+                Access and manage session data, events, and user journeys programmatically. Perfect for custom
+                dashboards and third-party integrations.
+            </GuideCard>
+
+            <GuideCard
+                href="#"
+                icon={
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="#000"
+                        width="1em"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                    >
+                        <path
+                            d="M18.734 3.667l6.578 3.802c1.089-1.146 2.901-1.193 4.047-0.104 0.193 0.188 0.365 0.401 0.5 0.635 0.786 1.37 0.313 3.12-1.063 3.906-0.229 0.13-0.479 0.234-0.745 0.297v7.599c1.531 0.365 2.474 1.896 2.109 3.427-0.063 0.271-0.172 0.531-0.307 0.771-0.792 1.365-2.536 1.833-3.906 1.042-0.26-0.146-0.5-0.344-0.698-0.568l-6.542 3.776c0.495 1.495-0.318 3.109-1.813 3.604-0.292 0.099-0.594 0.146-0.896 0.146-1.573 0-2.854-1.271-2.854-2.849 0-0.271 0.042-0.547 0.12-0.813l-6.583-3.797c-1.089 1.141-2.896 1.188-4.036 0.094-1.135-1.089-1.177-2.891-0.094-4.031 0.38-0.396 0.865-0.677 1.396-0.807v-7.599c-1.531-0.365-2.479-1.906-2.109-3.443 0.063-0.266 0.167-0.521 0.302-0.755 0.786-1.365 2.536-1.833 3.901-1.042 0.234 0.135 0.453 0.302 0.641 0.5l6.583-3.797c-0.448-1.51 0.417-3.099 1.922-3.542 0.26-0.083 0.536-0.12 0.813-0.12 1.573 0 2.854 1.271 2.854 2.844 0 0.281-0.042 0.557-0.12 0.823zM18.047 4.839c-0.026 0.026-0.047 0.052-0.078 0.078l8.615 14.917c0.036-0.010 0.078-0.021 0.109-0.031v-7.609c-1.526-0.375-2.453-1.922-2.073-3.448 0.005-0.031 0.016-0.068 0.021-0.099zM14.026 4.917l-0.078-0.078-6.594 3.802c0.438 1.51-0.438 3.089-1.948 3.526-0.036 0.010-0.068 0.016-0.104 0.026v7.609l0.115 0.031 8.615-14.917zM16.797 5.594c-0.521 0.146-1.073 0.146-1.589 0l-8.615 14.917c0.391 0.375 0.667 0.859 0.802 1.391h17.214c0.13-0.531 0.406-1.016 0.802-1.396zM18.109 27.229l6.552-3.786c-0.021-0.063-0.036-0.125-0.052-0.188h-17.219l-0.031 0.109 6.589 3.802c0.516-0.536 1.245-0.87 2.052-0.87 0.839 0 1.589 0.359 2.109 0.932z"/>
+                    </svg>
+                }
+                title="GraphqQL API"
+                kind="secondary"
+            >
+                Query session data, user interactions, and event tracking with precision. Build custom integrations to
+                enhance your product analytics.
+            </GuideCard>
+
+            <GuideCard
+                href="#"
+                icon={<svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                    width="1em"
+                    height="1em"
+                    viewBox="-10 -5 1034 1034"
+                >
+                    <path
+                        fill="#000000"
+                        d="M482 226h-1l-10 2q-33 4 -64.5 18.5t-55.5 38.5q-41 37 -57 91q-9 30 -8 63t12 63q17 45 52 78l13 12l-83 135q-26 -1 -45 7q-30 13 -45 40q-7 15 -9 31t2 32q8 30 33 48q15 10 33 14.5t36 2t34.5 -12.5t27.5 -25q12 -17 14.5 -39t-5.5 -41q-1 -5 -7 -14l-3 -6l118 -192 q6 -9 8 -14l-10 -3q-9 -2 -13 -4q-23 -10 -41.5 -27.5t-28.5 -39.5q-17 -36 -9 -75q4 -23 17 -43t31 -34q37 -27 82 -27q27 -1 52.5 9.5t44.5 30.5q17 16 26.5 38.5t10.5 45.5q0 17 -6 42l70 19l8 1q14 -43 7 -86q-4 -33 -19.5 -63.5t-39.5 -53.5q-42 -42 -103 -56 q-6 -2 -18 -4l-14 -2h-37zM500 350q-17 0 -34 7t-30.5 20.5t-19.5 31.5q-8 20 -4 44q3 18 14 34t28 25q24 15 56 13q3 4 5 8l112 191q3 6 6 9q27 -26 58.5 -35.5t65 -3.5t58.5 26q32 25 43.5 61.5t0.5 73.5q-8 28 -28.5 50t-48.5 33q-31 13 -66.5 8.5t-63.5 -24.5 q-4 -3 -13 -10l-5 -6q-4 3 -11 10l-47 46q23 23 52 38.5t61 21.5l22 4h39l28 -5q64 -13 110 -60q22 -22 36.5 -50.5t19.5 -59.5q5 -36 -2 -71.5t-25 -64.5t-44 -51t-57 -35q-34 -14 -70.5 -16t-71.5 7l-17 5l-81 -137q13 -19 16 -37q5 -32 -13 -60q-16 -25 -44 -35 q-17 -6 -35 -6zM218 614q-58 13 -100 53q-47 44 -61 105l-4 24v37l2 11q2 13 4 20q7 31 24.5 59t42.5 49q50 41 115 49q38 4 76 -4.5t70 -28.5q53 -34 78 -91q7 -17 14 -45q6 -1 18 0l125 2q14 0 20 1q11 20 25 31t31.5 16t35.5 4q28 -3 50 -20q27 -21 32 -54 q2 -17 -1.5 -33t-13.5 -30q-16 -22 -41 -32q-17 -7 -35.5 -6.5t-35.5 7.5q-28 12 -43 37l-3 6q-14 0 -42 -1l-113 -1q-15 -1 -43 -1l-50 -1l3 17q8 43 -13 81q-14 27 -40 45t-57 22q-35 6 -70 -7.5t-57 -42.5q-28 -35 -27 -79q1 -37 23 -69q13 -19 32 -32t41 -19l9 -3z"
+                    />
+                </svg>}
+                title="Webhooks"
+                kind="secondary"
+            >
+                Trigger actions or sync apps in real-time based on user behaviors or product events. Webhooks provide a
+                faster, more efficient alternative to API polling.
+            </GuideCard>
+        </GuideCard.List>
+    </div>
+}
+

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

@@ -0,0 +1,52 @@
+import React, {} from 'react';
+import type {Meta} from '@storybook/react';
+
+import {
+    Heading
+} from "@xyd-js/components/writer"
+
+export default {
+    title: 'Components/Writer/Heading',
+} as Meta;
+
+export const Default = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+        display: "flex",
+        flexDirection: "column"
+    }}>
+        <div>
+            <Heading id="heading-1">
+                Heading 1
+            </Heading>
+        </div>
+        <div>
+            <Heading size={2} id="heading-2">
+                Heading 2
+            </Heading>
+        </div>
+        <div>
+            <Heading size={3} id="heading-3">
+                Heading 3
+            </Heading>
+        </div>
+        <div>
+            <Heading size={4} id="heading-4">
+                Heading 4
+            </Heading>
+        </div>
+        <div>
+            <Heading size={5} id="heading-5">
+                Heading 5
+            </Heading>
+        </div>
+        <div>
+            <Heading size={6} id="heading-6">
+                Heading 6
+            </Heading>
+        </div>
+    </div>
+}
+

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

@@ -0,0 +1,31 @@
+import React, {} from 'react';
+import type {Meta} from '@storybook/react';
+
+import {
+    NavLinks,
+} from '@xyd-js/components/writer';
+
+export default {
+    title: 'Components/Writer/NavLinks',
+} as Meta;
+
+export const Default = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+        <div style={{width: 700}}>
+            <NavLinks
+                prev={{
+                    title: "Previous",
+                    href: "#"
+                }}
+                next={{
+                    title: "Next",
+                    href: "#"
+                }}
+            />
+        </div>
+    </div>
+}

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

@@ -0,0 +1,23 @@
+import React, {} from 'react';
+import type {Meta} from '@storybook/react';
+
+import {
+    Pre
+} from "@xyd-js/components/writer"
+
+export default {
+    title: 'Components/Writer/Pre',
+} as Meta;
+
+export const Default = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+        <Pre>
+            {`import {Pre} from '@xyd-js/components/coder'`}
+        </Pre>
+    </div>
+}
+

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

@@ -0,0 +1,27 @@
+import React, {} from 'react';
+import type {Meta} from '@storybook/react';
+
+import {
+    Steps,
+} from '@xyd-js/components/writer';
+
+export default {
+    title: 'Components/Writer/Steps',
+} as Meta;
+
+export const Default = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+        <Steps>
+            <Steps.Item>
+                First, you need to install the package.
+            </Steps.Item>
+            <Steps.Item>
+                Then you need to import the component.
+            </Steps.Item>
+        </Steps>
+    </div>
+}

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

@@ -0,0 +1,54 @@
+import React, {} from 'react';
+import type {Meta} from '@storybook/react';
+
+import {
+    Table,
+} from '@xyd-js/components/writer';
+
+export default {
+    title: 'Components/Writer/Table',
+} as Meta;
+
+export const Default = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+        <Table>
+            <Table.Th>
+                Name
+            </Table.Th>
+            <Table.Th>
+                Default
+            </Table.Th>
+            <Table.Th>
+                Description
+            </Table.Th>
+
+            <Table.Tr>
+                <Table.Td>
+                    disabled
+                </Table.Td>
+                <Table.Td>
+                    false
+                </Table.Td>
+                <Table.Td>
+                    Controls the disabled state of the tab
+                </Table.Td>
+            </Table.Tr>
+
+            <Table.Tr>
+                <Table.Td>
+                    active
+                </Table.Td>
+                <Table.Td>
+                    false
+                </Table.Td>
+                <Table.Td>
+                    Controls the active state of the tab
+                </Table.Td>
+            </Table.Tr>
+        </Table>
+    </div>
+}

package/src/docs/templates/CodeSample.stories.tsx

@@ -0,0 +1,15 @@
+import React, {} from 'react';
+import type {Meta} from '@storybook/react';
+
+export default {
+    title: 'Templates/Pages',
+} as Meta;
+
+export const Default = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+    </div>
+}