@xyd-js/storybook 0.0.1-xyd.7 → 0.0.1-xyd.93

package/package.json

@@ -1,24 +1,26 @@
 {
   "name": "@xyd-js/storybook",
-  "version": "0.0.1-xyd.7",
+  "version": "0.0.1-xyd.93",
   "type": "module",
   "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@xyd-js/atlas": "0.1.0-xyd.99",
+    "@xyd-js/content": "0.1.0-xyd.97",
+    "@xyd-js/ui": "0.1.0-xyd.99",
+    "@xyd-js/components": "0.1.0-xyd.94",
+    "@xyd-js/theme-cosmo": "0.1.0-xyd.83",
+    "@xyd-js/theme-opener": "0.1.0-xyd.83",
+    "@xyd-js/theme-picasso": "0.1.0-xyd.83",
+    "@xyd-js/theme-poetry": "0.1.0-xyd.110"
+  },
+  "devDependencies": {
+    "rehype-stringify": "^10.0.1",
+    "remark-gfm": "^4.0.0",
     "@mdx-js/react": "^3.0.1",
     "@mdx-js/rollup": "^3.0.1",
     "acorn": "^8.14.1",
     "acorn-jsx": "^5.3.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "rehype-stringify": "^10.0.1",
-    "remark-gfm": "^4.0.0",
-    "@xyd-js/atlas": "0.1.0-xyd.13",
-    "@xyd-js/components": "0.1.0-xyd.8",
-    "@xyd-js/content": "0.1.0-xyd.11",
-    "@xyd-js/ui": "0.1.0-xyd.13",
-    "@xyd-js/theme-poetry": "0.1.0-xyd.24",
-    "@xyd-js/fable-wiki": "0.1.0-xyd.11"
-  },
-  "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",
     "@eslint/js": "^9.11.1",
     "@storybook/addon-essentials": "^8.3.5",
@@ -29,8 +31,8 @@
     "@storybook/react": "^8.3.5",
     "@storybook/react-vite": "^8.3.5",
     "@storybook/test": "^8.3.5",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
     "@vitejs/plugin-react": "^4.3.2",
     "eslint": "^9.11.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
@@ -40,7 +42,7 @@
     "storybook": "^8.3.5",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.7.0",
-    "vite": "^5.4.8"
+    "vite": "^7.0.0"
   },
   "eslintConfig": {
     "extends": [

package/src/__fixtures__/atlas-index/package-index.mdx

@@ -0,0 +1,194 @@
+# Package Index
+
+These are all the API packages. See all [API symbols](#).
+
+<Table>
+    <Table.Head>
+        <Table.Tr>
+            <Table.Th>Package</Table.Th>
+            <Table.Th numeric>Description</Table.Th>
+        </Table.Tr>
+    </Table.Head>
+    <Table.Body>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/atlas`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    API Reference template
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/cli`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Command line interface tools
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/components`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Shared React components library
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/content`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Content management and MDX utilities
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/core`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Core utilities and shared functionality
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/documan`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Documentation sever runner
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/framework`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Bridge between core logic and ui
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/gql`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    GraphQL utilities and tools
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/openapi`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    OpenAPI specification tools
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/plugin-docs`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Core documentation plugin
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/storybook`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Component documentation and testing
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/theme-poetry`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    On of the default themes
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/ui`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Core documentations ui elements
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/uniform`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Unified formatting for API references
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+            <Table.Td>
+                <Table.ModelCell>
+                    [`@xyd-js/xtokens`](#)
+                </Table.ModelCell>
+            </Table.Td>
+            <Table.Td numeric muted>
+                <Table.Cell>
+                    Design tokens and theming system
+                </Table.Cell>
+            </Table.Td>
+        </Table.Tr>
+    </Table.Body>
+</Table>

package/src/{content → __fixtures__}/atlas-index/wip1.mdx

@@ -99,7 +99,7 @@ export async function gqlSchemaToReferences(
 ```
 :::
 
-:::TableV2
+:::Table
 ```ts
 [
     ["See also", ""],
@@ -109,7 +109,7 @@ export async function gqlSchemaToReferences(
 :::
 
 ## Parameters
-:::TableV2
+:::Table
 ```ts
 [
     ["Name", "Type", "Description"],
@@ -119,7 +119,7 @@ export async function gqlSchemaToReferences(
 :::
 
 ## Returns
-:::TableV2
+:::Table
 ```ts
 [
     ["Type", "Description"],

package/src/__fixtures__/example-source-uniform.ts

@@ -0,0 +1,41 @@
+import {Reference} from '@xyd-js/uniform';
+
+export const exampleSourceUniform = {
+    "title": "Function gqlSchemaToReferences",
+    "canonical": "fn-gqlSchemaToReferences",
+    "description": "Converts a GraphQL schema file to references.\n",
+    "context": {
+        "fileName": "index.ts",
+        "fileFullPath": "src/index.ts",
+        "line": 48,
+        "col": 16,
+        "signatureText": "export function gqlSchemaToReferences(schemaLocation: string): Promise<[\n]>;",
+        "sourcecode": "export function gqlSchemaToReferences(\n    schemaLocation: string\n): Promise<[]> {\n    if (schemaLocation.endsWith(\".graphql\")) {\n        return Promise.resolve([])\n    }\n\n    return Promise.resolve([])\n}",
+        "package": "@xyd-sources-examples/package-a"
+    },
+    "examples": {
+        "groups": []
+    },
+    "definitions": [
+        {
+            "title": "Returns",
+            "properties": [
+                {
+                    "name": "",
+                    "type": "<Promise>",
+                    "description": "references\n"
+                }
+            ]
+        },
+        {
+            "title": "Parameters",
+            "properties": [
+                {
+                    "name": "schemaLocation",
+                    "type": "string",
+                    "description": "The location of the schema file.\n"
+                }
+            ]
+        }
+    ]
+} as Reference

package/src/{content → __fixtures__}/hello-world.mdx

@@ -10,7 +10,7 @@ import {
     IconSessionReplay,
     IconMetrics,
     IconFunnels
-} from "./Icons";
+} from "./Icons"
 
 # Product Analytics
 ### Learn how to analyze user behavior to optimize your product.

package/src/components/{DemoWireframe.tsx → DemoDocs.tsx}

@@ -34,7 +34,7 @@ export function DemoNavbar() {
 }
 
 export function DemoSubNav() {
-    return <SubNav title="Apps" value="build">
+    return <SubNav title="APPS" value="build">
         <SubNav.Item value="build" href="/build">
             Build
         </SubNav.Item>

package/src/decorators/DocsTemplate.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { LayoutPrimary } from "@xyd-js/components/layouts";
+import { MemoryRouter } from "react-router";
+
+import { DemoNavbar, DemoSidebar, DemoSubNav, DemoTOC } from "../components/DemoDocs";
+
+interface DocsTemplateDecoratorOptions {
+    toc?: boolean
+}
+
+export const DocsTemplateDecorator = ({ toc = true }: DocsTemplateDecoratorOptions) => (Story) => <MemoryRouter>
+    <LayoutPrimary
+        header={<DemoNavbar />}
+        subheader={<DemoSubNav />}
+        aside={<DemoSidebar />}
+        content={<>
+            <Story />
+        </>}
+        contentNav={toc ? <DemoTOC /> : undefined}
+        layoutSize="large"
+    />
+</MemoryRouter>

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

@@ -1,15 +1,20 @@
-import React, {useState, useEffect} from 'react';
-import type {Meta} from '@storybook/react';
+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 { 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) => {
@@ -26,17 +31,21 @@ const Template = (args: any) => {
         load()
     }, [])
 
-    return <div style={{
-        width: "1200px",
-        display: "flex",
-        alignItems: "center",
-        flexDirection: "column",
-        margin: "0 auto"
-    }}>
-        <Atlas references={references}/>
-    </div>
+    return <>
+        <Atlas references={references} />
+    </>
+}
+
+export const Primary = Template.bind({});
+Primary.args = {};
+
+
+const TemplateSecondary = () => {
+    return <>
+        <Atlas kind="secondary" references={[exampleSourceUniform]} />
+    </>
 }
 
-export const Default = Template.bind({});
-Default.args = {};
+export const Secondary = TemplateSecondary.bind({});
+Secondary.args = {};
 

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

@@ -2,9 +2,12 @@ import React, {} from 'react';
 import type {Meta} from '@storybook/react';
 import {MemoryRouter} from "react-router";
 
-import getContentComponents from "@xyd-js/components/content";
+import {ReactContent} from "@xyd-js/components/content";
 
-import Content from "../../../content/code-sample.mdx";
+import Content from "../../../__fixtures__/code-sample.mdx";
+
+const reactContent = new ReactContent()
+const contentComponents = reactContent.components()
 
 export default {
     title: 'Components/Coder/CodeSample',
@@ -21,6 +24,6 @@ export const Default = async () => {
         paddingTop: "0px",
         margin: "0 auto",
     }}>
-        <Content components={getContentComponents()}/>
+        <Content components={contentComponents}/>
     </div>
 }

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

@@ -1,12 +1,10 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Badge, type BadgeStyles } from '@xyd-js/components/writer';
-import { useStyle } from '@xyd-js/components/utils';
+import { Badge } from '@xyd-js/components/writer';
 
 const meta: Meta<typeof Badge> = {
-    title: 'Writer/Badge',
+    title: 'Components/Writer/Badge',
     component: Badge,
-    tags: ['autodocs'],
 };
 
 export default meta;
@@ -19,35 +17,3 @@ export const Default: Story = {
         kind: 'warning',
     },
 };
-
-// Custom styled version
-const CustomStyledBadge = () => {
-    const styled = useStyle<BadgeStyles>(Badge);
-    
-    // Override warning style
-    const warningClass = styled.BadgeHostWarning`
-        background-color: #fff3dc;
-        border: 2px solid #ffb020;
-    `;
-
-    // Override info style
-    const infoClass = styled.BadgeHostInfo`
-        background-color: #d8f3ff;
-        border: 2px solid #0288d1;
-    `;
-
-    return (
-        <div style={{ display: 'flex', gap: '16px' }}>
-            <Badge kind="warning" className={warningClass}>
-                Custom Warning Badge
-            </Badge>
-            <Badge kind="info" className={infoClass}>
-                Custom Info Badge
-            </Badge>
-        </div>
-    );
-};
-
-export const CustomStyled: Story = {
-    render: () => <CustomStyledBadge />,
-};

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

@@ -1,12 +1,11 @@
 import React, {} from 'react';
 import type {Meta} from '@storybook/react';
 
+import { GuideCard } from '@xyd-js/components/writer';
 import {
-    GuideCard,
-
     IconSessionReplay,
     IconMetrics
-} from '@xyd-js/components/writer';
+} from '../../../__fixtures__/Icons';
 
 export default {
     title: 'Components/Writer/GuideCard',

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

@@ -2,8 +2,7 @@ import React, {} from 'react';
 import type {Meta} from '@storybook/react';
 
 import {
-    Table,
-    TableV2
+    Table
 } from '@xyd-js/components/writer';
 
 export default {
@@ -17,70 +16,35 @@ export const Default = () => {
         margin: "0 auto",
     }}>
         <Table>
-            <Table.Th>
-                Name
-            </Table.Th>
-            <Table.Th>
-                Default
-            </Table.Th>
-            <Table.Th>
-                Description
-            </Table.Th>
-
+        <Table.Head>
             <Table.Tr>
-                <Table.Td>
-                    disabled
-                </Table.Td>
-                <Table.Td>
-                    false
-                </Table.Td>
-                <Table.Td>
-                    Controls the disabled state of the tab
-                </Table.Td>
+                <Table.Th>Model</Table.Th>
+                <Table.Th numeric>Training</Table.Th>
+                <Table.Th numeric>Input</Table.Th>
+                <Table.Th numeric>Cached input</Table.Th>
+                <Table.Th numeric>Output</Table.Th>
             </Table.Tr>
-
+        </Table.Head>
+        <Table.Body>
             <Table.Tr>
                 <Table.Td>
-                    active
+                    <Table.Cell>gpt-4o-2024-08-06</Table.Cell>
                 </Table.Td>
-                <Table.Td>
-                    false
+                <Table.Td numeric>
+                    <Table.Cell>$25.00</Table.Cell>
                 </Table.Td>
-                <Table.Td>
-                    Controls the active state of the tab
+                <Table.Td numeric>
+                    <Table.Cell>$3.75</Table.Cell>
+                </Table.Td>
+                <Table.Td numeric muted>
+                    <Table.Cell>$1.875</Table.Cell>
+                </Table.Td>
+                <Table.Td numeric>
+                    <Table.Cell>$15.00</Table.Cell>
                 </Table.Td>
             </Table.Tr>
-        </Table>
+        </Table.Body>
+    </Table>
     </div>
 }
 
-export const V2 = () => {
-    return <TableV2>
-        <TableV2.Head>
-            <TableV2.Tr>
-                <TableV2.Th>Model</TableV2.Th>
-                <TableV2.Th numeric>Training</TableV2.Th>
-                <TableV2.Th numeric>Input</TableV2.Th>
-                <TableV2.Th numeric>Cached input</TableV2.Th>
-                <TableV2.Th numeric>Output</TableV2.Th>
-            </TableV2.Tr>
-        </TableV2.Head>
-        <TableV2.Tr>
-            <TableV2.Td>
-                <TableV2.ModelCell>gpt-4o-2024-08-06</TableV2.ModelCell>
-            </TableV2.Td>
-            <TableV2.Td numeric>
-                <TableV2.Cell>$25.00</TableV2.Cell>
-            </TableV2.Td>
-            <TableV2.Td numeric>
-                <TableV2.Cell>$3.75</TableV2.Cell>
-            </TableV2.Td>
-            <TableV2.Td numeric muted>
-                <TableV2.Cell>$1.875</TableV2.Cell>
-            </TableV2.Td>
-            <TableV2.Td numeric>
-                <TableV2.Cell>$15.00</TableV2.Cell>
-            </TableV2.Td>
-        </TableV2.Tr>
-    </TableV2>
-}

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

@@ -0,0 +1,55 @@
+import React, { } from 'react';
+import type { Meta } from '@storybook/react';
+
+import {
+    Tabs,
+} from '@xyd-js/components/writer';
+
+export default {
+    title: 'Components/Writer/Tabs',
+} as Meta;
+
+export const Default = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+        <Tabs items={["User Behavior", "Feature Adoption", "Churn Analysis", "Churn Analysis2", "Churn Analysis3", "Churn Analysis4", "Churn Analysis5", "Churn Analysis6"]}>
+            <Tabs.Content value="User Behavior">
+                Gain insights into user behavior by replaying sessions and analyzing click patterns. This helps uncover friction
+                points in your app's user experience.
+            </Tabs.Content>
+            <Tabs.Content value="Feature Adoption">
+                Understand how users engage with new features. Track metrics like time to adoption and overall usage to measure
+                feature success.
+            </Tabs.Content>
+            <Tabs.Content value="Churn Analysis">
+                Use session data to identify behavioral patterns of users who are at risk of churning and implement targeted
+                retention strategies.
+            </Tabs.Content>
+            <Tabs.Content value="Churn Analysis2">
+                Use session data to identify behavioral patterns of users who are at risk of churning and implement targeted
+                retention strategies.
+            </Tabs.Content>
+            <Tabs.Content value="Churn Analysis3">
+                Use session data to identify behavioral patterns of users who are at risk of churning and implement targeted
+                retention strategies.
+            </Tabs.Content>
+            <Tabs.Content value="Churn Analysis4">
+                Use session data to identify behavioral patterns of users who are at risk of churning and implement targeted
+                retention strategies.
+            </Tabs.Content>
+            <Tabs.Content value="Churn Analysis5">
+                Use session data to identify behavioral patterns of users who are at risk of churning and implement targeted
+                retention strategies.
+            </Tabs.Content>
+            <Tabs.Content value="Churn Analysis6">
+                Use session data to identify behavioral patterns of users who are at risk of churning and implement targeted
+                retention strategies.
+            </Tabs.Content>
+        </Tabs>
+    </div>
+}
+
+