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

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