@xyd-js/storybook 0.0.1-xyd.10 → 0.0.1-xyd.12

package/.storybook/main.ts

@@ -31,7 +31,6 @@ function remarkInjectMeta() { // TODO: move to @xyd-js/content
     };
 }
 
-// TODO: get from @xyd-js/content/md but curently error when importing a `content` lib: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /Users/zdunecki/Code/livesession/xyd/node_modules/.pnpm/estree-util-build-jsx@3.0.1/node_modules/estree-walker/package.json
 export function mdCodeGroup() {
     return (tree: any) => {
         visit(tree, 'containerDirective', (node) => {
@@ -77,11 +76,11 @@ function toPascalCase(str) {
 const supportedDirectives = {
     Details: true,
     details: true,
-    TableV2: true
+    Table: true
 }
 
 const tableComponents: { [key: string]: boolean } = {
-    TableV2: true
+    Table: true
 }
 
 const parseMarkdown = (content: string) => {
@@ -110,21 +109,21 @@ export function remarkDirectiveWithMarkdown() {
 
                 const jsxNode = {
                     type: 'mdxJsxFlowElement',
-                    name: 'TableV2',
+                    name: 'Table',
                     attributes: [],
                     children: [
                         {
                             type: 'mdxJsxFlowElement',
-                            name: 'TableV2.Head',
+                            name: 'Table.Head',
                             attributes: [],
                             children: [
                                 {
                                     type: 'mdxJsxFlowElement',
-                                    name: 'TableV2.Tr',
+                                    name: 'Table.Tr',
                                     attributes: [],
                                     children: header.map((cell: string) => ({
                                         type: 'mdxJsxFlowElement',
-                                        name: 'TableV2.Th',
+                                        name: 'Table.Th',
                                         attributes: [],
                                         children: parseMarkdown(cell)
                                     }))
@@ -133,11 +132,11 @@ export function remarkDirectiveWithMarkdown() {
                         },
                         ...rows.map((row: string[]) => ({
                             type: 'mdxJsxFlowElement',
-                            name: 'TableV2.Tr',
+                            name: 'Table.Tr',
                             attributes: [],
                             children: row.map((cell: string) => ({
                                 type: 'mdxJsxFlowElement',
-                                name: 'TableV2.Td',
+                                name: 'Table.Td',
                                 attributes: [],
                                 children: parseMarkdown(cell)
                             }))

package/.storybook/styles.css

@@ -1,5 +0,0 @@
-:root {
-    --headingEffect-color-tertiary: rgba(23, 119, 184, 0.5);
-    --headingEffect-color-secondary: rgb(121, 85, 241);
-    --headingEffect-color-primary: rgb(255, 105, 180);
-}

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @xyd-js/storybook
 
+## 0.0.1-xyd.12
+
+### Patch Changes
+
+- test
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.18
+  - @xyd-js/components@0.1.0-xyd.13
+  - @xyd-js/content@0.1.0-xyd.16
+  - @xyd-js/theme-poetry@0.1.0-xyd.29
+  - @xyd-js/ui@0.1.0-xyd.18
+
+## 0.0.1-xyd.11
+
+### Patch Changes
+
+- update packages
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.17
+  - @xyd-js/components@0.1.0-xyd.12
+  - @xyd-js/content@0.1.0-xyd.15
+  - @xyd-js/theme-poetry@0.1.0-xyd.28
+  - @xyd-js/ui@0.1.0-xyd.17
+
 ## 0.0.1-xyd.10
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyd-js/storybook",
-  "version": "0.0.1-xyd.10",
+  "version": "0.0.1-xyd.12",
   "type": "module",
   "dependencies": {
     "@mdx-js/react": "^3.0.1",
@@ -11,12 +11,11 @@
     "react-dom": "^19.0.0",
     "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.0",
-    "@xyd-js/atlas": "0.1.0-xyd.16",
-    "@xyd-js/content": "0.1.0-xyd.14",
-    "@xyd-js/fable-wiki": "0.1.0-xyd.14",
-    "@xyd-js/components": "0.1.0-xyd.11",
-    "@xyd-js/ui": "0.1.0-xyd.16",
-    "@xyd-js/theme-poetry": "0.1.0-xyd.27"
+    "@xyd-js/atlas": "0.1.0-xyd.18",
+    "@xyd-js/theme-poetry": "0.1.0-xyd.29",
+    "@xyd-js/ui": "0.1.0-xyd.18",
+    "@xyd-js/components": "0.1.0-xyd.13",
+    "@xyd-js/content": "0.1.0-xyd.16"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",
@@ -40,7 +39,7 @@
     "storybook": "^8.3.5",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.7.0",
-    "vite": "^5.4.8"
+    "vite": "^6.1.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

@@ -3,9 +3,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 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;

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>
-}