@xyd-js/storybook 0.0.1-xyd.4 → 0.0.1-xyd.5

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

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

package/src/content/atlas-index/wip1.mdx

@@ -0,0 +1,131 @@
+# Function `gqlSchemaToReferences`
+
+:::code-group
+```ts
+function gqlSchemaToReferences(
+    schemaLocation: string
+): Promise<Reference[]>
+```
+:::
+
+Converts a GraphQL schema file to a list of uniform references.
+
+:::Details{kind="tertiary" title="<>Source code in <code>src/hello.ts</code></>" icon="<IconQuote/>"}
+```ts {from="index.ts"}
+export async function gqlSchemaToReferences(
+    schemaLocation: string
+): Promise<Reference[]> {
+    const loadersList = {
+        ["GraphQLFileLoader"]: "@graphql-tools/graphql-file-loader",
+    }
+    const loaders = await getDocumentLoaders(loadersList);
+
+    // @ts-ignore TODO: but ts works in @graphql-markdown/core
+    const schema = await loadSchema(schemaLocation as string, loaders);
+
+    const references: Reference[] = []
+
+    const queries = schema.getRootType(OperationTypeNode.QUERY)
+    const queryFields = queries?.getFields?.()
+
+    if (queryFields) {
+        references.push(...gqlOperationsToUniformRef(
+            ReferenceType.GRAPHQL_QUERY,
+            queryFields
+        ))
+    }
+
+    const mutations = schema.getRootType(OperationTypeNode.MUTATION)
+    const mutationFields = mutations?.getFields?.()
+
+    if (mutationFields) {
+        references.push(...gqlOperationsToUniformRef(
+            ReferenceType.GRAPHQL_MUTATION,
+            mutationFields
+        ))
+    }
+
+    const typeMap = schema.getTypeMap();
+
+    for (const gqlType of Object.values(typeMap)) {
+        const builtInType = isSpecifiedScalarType(gqlType) ||
+            isIntrospectionType(gqlType) ||
+            gqlType.name === "Mutation"
+
+        if (builtInType) {
+            continue;
+        }
+
+        switch (gqlType.constructor.name) {
+            case 'GraphQLObjectType': {
+                const type = gqlType as GraphQLObjectType;
+
+                references.push(gqlObjectToUniformRef(type))
+
+                break
+            }
+
+            case 'GraphQLInputObjectType': {
+                const type = gqlType as GraphQLInputObjectType;
+
+                references.push(gqlInputToUniformRef(type))
+                break
+            }
+
+            case 'GraphQLEnumType': {
+                const type = gqlType as GraphQLEnumType;
+
+                references.push(gqlEnumToUniformRef(type))
+
+                break
+            }
+
+            case 'GraphQLScalarType': {
+                const type = gqlType as GraphQLScalarType
+
+                references.push(gqlScalarToUniformRef(type))
+
+                break
+            }
+
+            default: {
+                console.debug(`Unsupported type: ${gqlType.constructor.name}`)
+            }
+        }
+    }
+
+    return references
+}
+```
+:::
+
+:::TableV2
+```ts
+[
+    ["See also", ""],
+    ["[`@xyd-js/atlas`](#)", ""]
+]
+```
+:::
+
+## Parameters
+:::TableV2
+```ts
+[
+    ["Name", "Type", "Description"],
+    ["`schemaLocation`", "`string`", "The location of the GraphQL schema file."]
+]
+```
+:::
+
+## Returns
+:::TableV2
+```ts
+[
+    ["Type", "Description"],
+    ["`Promise<Resolve[]>`", "The list of uniform references."]
+]
+```
+:::
+
+

package/src/content/atlas-index.mdx

@@ -0,0 +1,53 @@
+# Agents
+
+## ToolsToFinalOutputFunction  `module-attribute`
+
+:::code-group
+```py
+ToolsToFinalOutputFunction: TypeAlias = Callable[
+    [RunContextWrapper[TContext], list[FunctionToolResult]],
+    MaybeAwaitable[ToolsToFinalOutputResult],
+]
+```
+:::
+
+A function that takes a run context and a list of tool results, and returns a `ToolToFinalOutputResult`.
+
+## ToolsToFinalOutputResult `dataclass`
+
+:::code-group
+```py
+ToolsToFinalOutputResult: TypeAlias = Union[
+    FinalOutput,
+    Tuple[FinalOutput, list[FunctionToolResult]],
+]
+```
+:::
+
+### is_final_output `instance-attribute`
+
+
+<Details
+    kind="tertiary"
+    title={<>
+        Source code in
+        <code>src/agents/agent.py</code>
+    </>
+    }
+    icon={<IconQuote/>}
+>
+    ```py
+    @dataclass
+    class ToolsToFinalOutputResult:
+    is_final_output: bool
+    """Whether this is the final output. If False, the LLM will run again and receive the tool call
+    output.
+    """
+
+    final_output: Any | None = None
+    """The final output. Can be None if `is_final_output` is False, otherwise must match the
+    `output_type` of the agent.
+    """
+    ```
+</Details>
+

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

@@ -5,20 +5,14 @@ import {Reference} from '@xyd-js/uniform';
 import {Atlas} from "@xyd-js/atlas";
 
 import {uniformToReferences} from "./uniform-to-references";
-import {MDXReference} from "../../utils/mdx.ts";
-
-const HelloWorld = () => {
-    return <h1>Hello, World!</h1>;
-};
+import {MDXReference} from "../../utils/mdx";
 
 export default {
     title: 'Atlas/Atlas',
-    component: HelloWorld,
+    component: Atlas,
 } as Meta;
 
-// const Template = (args) => <Atlas/>;
-
-const Template = (args) => {
+const Template = (args: any) => {
     const [references, setReferences] = useState<MDXReference<Reference[]> | []>([])
 
     async function load() {
@@ -45,3 +39,4 @@ const Template = (args) => {
 
 export const Default = Template.bind({});
 Default.args = {};
+

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

@@ -0,0 +1,130 @@
+import React, {useState, useEffect} from 'react';
+import type {Meta} from '@storybook/react';
+
+import {Reference} from '@xyd-js/uniform';
+import {
+    CodeSample,
+} from '@xyd-js/components/coder';
+import {
+    TableV2
+} from "@xyd-js/components/writer";
+import {LayoutPrimary} from "@xyd-js/components/layouts";
+import getContentComponents from "@xyd-js/components/content"
+import {AtlasIndex} from "@xyd-js/atlas/atlas-index"
+
+import PackageIndexWip1Content from "../../content/atlas-index/wip1.mdx"
+
+import {
+    DemoNavbar,
+    DemoSubNav,
+    DemoSidebar,
+    DemoContent,
+    DemoTOC
+} from "../../components/DemoWireframe";
+
+export default {
+    title: 'Atlas/AtlasIndex',
+    component: AtlasIndex,
+} as Meta;
+
+const contentComponents = getContentComponents()
+
+const Content = {
+    Text: contentComponents.p,
+    Details: contentComponents.Details,
+    IconQuote: contentComponents.IconQuote,
+    Code: contentComponents.code,
+    Heading1: contentComponents.h1,
+    Heading2: contentComponents.h2,
+    Container: contentComponents.Content,
+    CodeSample: contentComponents.CodeSample
+}
+
+export const Default = () => {
+    return <LayoutPrimary
+        header={<DemoNavbar/>}
+        subheader={<DemoSubNav/>}
+        aside={<DemoSidebar/>}
+        content={<>
+            {/*<FakeContent/>*/}
+            <AtlasIndex data={exampleUniform}/>
+        </>}
+        contentNav={<DemoTOC/>}
+        layoutSize="large"
+    />
+}
+
+function FakeContent() {
+    return <DemoContent breadcrumbs={false}>
+        {<PackageIndexWip1Content components={{
+            ...contentComponents,
+            pre: Pre,
+            TableV2
+        }}/>}
+    </DemoContent>
+}
+
+function Pre({children, ...rest}: { children: React.ReactNode }) {
+    const codeElement = children as any
+    if (!children) {
+        return null
+    }
+
+    const {className, children: codeChildren} = codeElement.props;
+    const language = className?.replace('language-', '') || '';
+    const codeContent = codeChildren || '';
+
+    return <CodeSample
+        name={language}
+        description={""}
+        codeblocks={[
+            {
+                value: codeContent,
+                lang: language,
+                meta: language,
+            }
+        ]}
+        size="full"
+        kind="secondary"
+    />
+}
+
+const exampleUniform = {
+    "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/docs/components/writer/Table.stories.tsx

@@ -3,6 +3,7 @@ import type {Meta} from '@storybook/react';
 
 import {
     Table,
+    TableV2
 } from '@xyd-js/components/writer';
 
 export default {
@@ -52,3 +53,34 @@ export const Default = () => {
         </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/themes/themes.stories.tsx

@@ -3,7 +3,6 @@ import type {Meta} from '@storybook/react';
 import {MemoryRouter} from "react-router";
 
 import {
-    Layout,
     LayoutPrimary
 } from '@xyd-js/components/layouts';
 
@@ -19,7 +18,7 @@ import {
     UISidebar
 } from "@xyd-js/ui"
 
-import {LiveSessionPlatformLogo} from "./logo.tsx";
+import {LiveSessionPlatformLogo} from "./logo";
 import Content from "../../content/hello-world.mdx";
 
 export default {
@@ -33,17 +32,18 @@ export default {
 
 export const Default = () => {
     return <LayoutPrimary
-        header={<DemoNavbar/>}
-        subheader
-        aside={<DemoSidebar/>}
-        content={<DemoContent/>}
-        contentNav={<DemoTOC/>}
+        header={<$DemoNavbar/>}
+        subheader={<$DemoSubNav/>}
+        aside={<$DemoSidebar/>}
+        content={<$DemoContent/>}
+        contentNav={<$DemoTOC/>}
     />
 }
 
-function DemoNavbar() {
+function $DemoNavbar() {
     return <>
         <Nav
+            onChange={() => {}}
             value="api-reference"
             logo={<LiveSessionPlatformLogo/>}
             kind="middle"
@@ -58,21 +58,24 @@ function DemoNavbar() {
                 GraphQL
             </Nav.Item>
         </Nav>
-        <SubNav title="Apps" value="build">
-            <SubNav.Item value="build" href="/build">
-                Build
-            </SubNav.Item>
-            <SubNav.Item value="design" href="/design">
-                Design
-            </SubNav.Item>
-            <SubNav.Item value="launch" href="/launch">
-                Launch
-            </SubNav.Item>
-        </SubNav>
     </>
 }
 
-function DemoSidebar() {
+function $DemoSubNav() {
+    return <SubNav onChange={() => {}} title="Apps" value="build">
+        <SubNav.Item value="build" href="/build">
+            Build
+        </SubNav.Item>
+        <SubNav.Item value="design" href="/design">
+            Design
+        </SubNav.Item>
+        <SubNav.Item value="launch" href="/launch">
+            Launch
+        </SubNav.Item>
+    </SubNav>
+}
+
+function $DemoSidebar() {
     const [isOpen, setIsOpen] = useState(false)
 
     function onClick() {
@@ -84,7 +87,7 @@ function DemoSidebar() {
         </UISidebar.Item>
     )
 
-    return <UISidebar footerItems={<DemoSidebarFooter/>}>
+    return <UISidebar footerItems={<$DemoSidebarFooter/>}>
         <UISidebar.ItemHeader>
             GET STARTED
         </UISidebar.ItemHeader>
@@ -131,7 +134,7 @@ function DemoSidebar() {
     </UISidebar>
 }
 
-function DemoSidebarFooter() {
+function $DemoSidebarFooter() {
     return <>
         <UISidebar.FooterItem
             href="#"
@@ -209,7 +212,7 @@ function DemoSidebarFooter() {
 }
 
 
-function DemoContent() {
+function $DemoContent() {
     return <>
         <Breadcrumbs
             items={[
@@ -245,7 +248,7 @@ function DemoContent() {
     </>
 }
 
-function DemoTOC() {
+function $DemoTOC() {
     return <Toc defaultValue="quickstart">
         <Toc.Item value="quickstart">
             Quickstart