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

package/.storybook/main.ts

@@ -1,8 +1,13 @@
+import {join, dirname} from "path";
+
+import React from "react";
 import type {StorybookConfig} from "@storybook/react-vite";
 import remarkGfm from 'remark-gfm';
+import remarkDirective from 'remark-directive';
 import {visit} from 'unist-util-visit';
-
-import {join, dirname} from "path";
+import {unified} from 'unified';
+import remarkParse from 'remark-parse';
+import remarkMdx from 'remark-mdx';
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -26,6 +31,166 @@ function remarkInjectMeta() { // TODO: move to @xyd-js/content
     };
 }
 
+export function mdCodeGroup() {
+    return (tree: any) => {
+        visit(tree, 'containerDirective', (node) => {
+            if (node.name !== 'code-group') return;
+
+            const description = node.attributes?.title || '';
+            const codeblocks = [];
+
+            for (const child of node.children) {
+                if (child.type === 'code') {
+                    const meta = child.meta || '';
+                    const value = child.value || '';
+                    const lang = child.lang || '';
+
+                    codeblocks.push({value, lang, meta});
+                }
+            }
+
+            // Add metadata to the node
+            node.data = {
+                hName: 'DirectiveCodeSample',
+                hProperties: {
+                    description,
+                    codeblocks: JSON.stringify(codeblocks),
+                },
+            };
+
+            node.children = [];
+        });
+    };
+}
+
+function toPascalCase(str) {
+    return str
+        .replace(/([a-z])([A-Z])/g, "$1 $2") // Add space before capital letters
+        .replace(/[^a-zA-Z0-9]/g, " ") // Replace special characters with space
+        .split(" ") // Split by space
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) // Capitalize first letter
+        .join("");
+}
+
+
+const supportedDirectives = {
+    Details: true,
+    details: true,
+    Table: true
+}
+
+const tableComponents: { [key: string]: boolean } = {
+    Table: true
+}
+
+const parseMarkdown = (content: string) => {
+    const ast = unified()
+        .use(remarkParse)
+        .use(remarkMdx)
+        .parse(content);
+    return ast.children;
+};
+
+export function remarkDirectiveWithMarkdown() {
+    return (tree) => {
+        visit(tree, 'containerDirective', (node) => {
+            if (!supportedDirectives[node.name]) {
+                return;
+            }
+
+            const isTable = tableComponents[node.name];
+            const attributes = [];
+
+            // TODO: MORE GENERIC CUZ IT HAS IMPL DETAILS OF TABLE
+            if (isTable) {
+                // TODO: support tsx tables like: [<>`Promise<Reference[]>`</>] ?
+                const tableData = JSON.parse(node.children[0].value);
+                const [header, ...rows] = tableData;
+
+                const jsxNode = {
+                    type: 'mdxJsxFlowElement',
+                    name: 'Table',
+                    attributes: [],
+                    children: [
+                        {
+                            type: 'mdxJsxFlowElement',
+                            name: 'Table.Head',
+                            attributes: [],
+                            children: [
+                                {
+                                    type: 'mdxJsxFlowElement',
+                                    name: 'Table.Tr',
+                                    attributes: [],
+                                    children: header.map((cell: string) => ({
+                                        type: 'mdxJsxFlowElement',
+                                        name: 'Table.Th',
+                                        attributes: [],
+                                        children: parseMarkdown(cell)
+                                    }))
+                                }
+                            ]
+                        },
+                        ...rows.map((row: string[]) => ({
+                            type: 'mdxJsxFlowElement',
+                            name: 'Table.Tr',
+                            attributes: [],
+                            children: row.map((cell: string) => ({
+                                type: 'mdxJsxFlowElement',
+                                name: 'Table.Td',
+                                attributes: [],
+                                children: parseMarkdown(cell)
+                            }))
+                        }))
+                    ]
+                };
+
+                Object.assign(node, jsxNode);
+                return;
+            }
+
+            if (node.attributes) {
+                const jsxProps = []
+
+                for (let [key, value] of Object.entries(node.attributes)) {
+                    if (typeof value === "string" && !value.startsWith("<")) {
+                        attributes.push({
+                            type: 'mdxJsxAttribute',
+                            name: key,
+                            value: value
+                        });
+                    } else {
+                        jsxProps.push(`${key}={${value}}`)
+
+                    }
+                }
+
+                const mdxString = `<Fragment ${jsxProps.join(" ")}></Fragment>`
+
+                const ast = unified()
+                    .use(remarkParse)
+                    .use(remarkMdx)
+                    .parse(mdxString);
+
+                if (ast && ast.children[0] && ast.children[0].attributes) {
+                    for (const attr of ast.children[0].attributes) {
+                        // TODO: support markdown also e.g Hello `World` - currently it mus be: Hello <code>World</code>
+                        attributes.push(attr);
+                    }
+                }
+            }
+
+            const jsxNode = {
+                type: 'mdxJsxFlowElement',
+                name: toPascalCase(node.name),
+                attributes: attributes,
+                children: node.children
+            };
+
+            Object.assign(node, jsxNode);
+        });
+    };
+}
+
 const config: StorybookConfig = {
     stories: ["../src/docs/**/*.mdx", "../src/docs/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
     addons: [
@@ -41,8 +206,11 @@ const config: StorybookConfig = {
                     mdxCompileOptions: {
                         remarkPlugins: [
                             remarkGfm,
-                            remarkInjectMeta
-                        ],
+                            remarkDirective,
+                            mdCodeGroup,
+                            remarkDirectiveWithMarkdown,
+                            // mdComponentDirective
+                        ]
                     },
                 },
             },

package/.storybook/preview.ts

@@ -1,7 +1,6 @@
 import type {Preview} from "@storybook/react";
 
-import "@xyd-js/atlas/index.css"
-import "@xyd-js/fable-wiki/theme.css"
+import "@xyd-js/theme-poetry/index.css" // TODO: in the future configurable themes via UI?
 
 import './styles.css'
 

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,124 @@
 # @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
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.16
+  - @xyd-js/components@0.1.0-xyd.11
+  - @xyd-js/content@0.1.0-xyd.14
+  - @xyd-js/theme-poetry@0.1.0-xyd.27
+  - @xyd-js/ui@0.1.0-xyd.16
+  - @xyd-js/fable-wiki@0.1.0-xyd.14
+
+## 0.0.1-xyd.9
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.15
+  - @xyd-js/components@0.1.0-xyd.10
+  - @xyd-js/content@0.1.0-xyd.13
+  - @xyd-js/theme-poetry@0.1.0-xyd.26
+  - @xyd-js/ui@0.1.0-xyd.15
+  - @xyd-js/fable-wiki@0.1.0-xyd.13
+
+## 0.0.1-xyd.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.14
+  - @xyd-js/components@0.1.0-xyd.9
+  - @xyd-js/content@0.1.0-xyd.12
+  - @xyd-js/theme-poetry@0.1.0-xyd.25
+  - @xyd-js/ui@0.1.0-xyd.14
+  - @xyd-js/fable-wiki@0.1.0-xyd.12
+
+## 0.0.1-xyd.7
+
+### Patch Changes
+
+- Updated dependencies
+  - @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/theme-poetry@0.1.0-xyd.24
+  - @xyd-js/ui@0.1.0-xyd.13
+  - @xyd-js/fable-wiki@0.1.0-xyd.11
+
+## 0.0.1-xyd.6
+
+### Patch Changes
+
+- @xyd-js/fable-wiki@0.1.0-xyd.10
+
+## 0.0.1-xyd.5
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.12
+  - @xyd-js/components@0.1.0-xyd.7
+  - @xyd-js/content@0.1.0-xyd.10
+  - @xyd-js/ui@0.1.0-xyd.12
+  - @xyd-js/fable-wiki@0.1.0-xyd.9
+
+## 0.0.1-xyd.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.11
+  - @xyd-js/components@0.1.0-xyd.6
+  - @xyd-js/ui@0.1.0-xyd.11
+  - @xyd-js/fable-wiki@0.1.0-xyd.8
+
+## 0.0.1-xyd.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.10
+  - @xyd-js/components@0.1.0-xyd.5
+  - @xyd-js/ui@0.1.0-xyd.10
+  - @xyd-js/fable-wiki@0.1.0-xyd.7
+
+## 0.0.1-xyd.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.9
+  - @xyd-js/components@0.1.0-xyd.4
+  - @xyd-js/ui@0.1.0-xyd.9
+  - @xyd-js/fable-wiki@0.1.0-xyd.6
+
 ## 0.0.1-xyd.1
 
 ### Patch Changes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 xyd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

package/package.json

@@ -1,17 +1,21 @@
 {
   "name": "@xyd-js/storybook",
-  "version": "0.0.1-xyd.1",
+  "version": "0.0.1-xyd.12",
   "type": "module",
   "dependencies": {
     "@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/components": "0.1.0-xyd.3",
-    "@xyd-js/fable-wiki": "0.1.0-xyd.5",
-    "@xyd-js/ui": "0.1.0-xyd.8",
-    "@xyd-js/atlas": "0.1.0-xyd.8"
+    "@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",
@@ -35,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>