@xyd-js/atlas 0.1.0-build.173

package/src/docs/AtlasExample/uniform-to-references.ts

@@ -0,0 +1,101 @@
+// TODO: move to utils or somewhere else
+import React from "react";
+import {parse} from "codehike";
+import {visit} from "unist-util-visit";
+import {recmaCodeHike, remarkCodeHike} from "codehike/mdx";
+import {compile as mdxCompile} from "@mdx-js/mdx";
+
+import {Reference} from "@xyd-js/uniform";
+import {
+    compile as compileMarkdown,
+    referenceAST
+} from "@xyd-js/uniform/markdown";
+
+import {MDXReference} from "@/utils/mdx";
+import todoAppUniform from "./todo-app.uniform.json";
+
+// since unist does not support heading level > 6, we need to normalize them
+function normalizeCustomHeadings() {
+    return (tree: any) => {
+        visit(tree, 'paragraph', (node, index, parent) => {
+            const match = node.children[0] && node.children[0].value.match(/^(#+)\s+(.*)/);
+            if (match) {
+                const level = match[1].length;
+                const text = match[2];
+                if (level > 6) {
+                    // Create a new heading node with depth 6
+                    const headingNode = {
+                        type: 'heading',
+                        depth: level,
+                        children: [{type: 'text', value: text}]
+                    };
+                    // Replace the paragraph node with the new heading node
+                    //@ts-ignore
+                    parent.children[index] = headingNode;
+                }
+            }
+        });
+    };
+}
+
+const codeHikeOptions = {
+    lineNumbers: true,
+    showCopyButton: true,
+    autoImport: true,
+    components: {code: "Code"},
+    // syntaxHighlighting: { // TODO: !!! FROM SETTINGS !!! wait for rr7 rsc ??
+    //     theme: "github-dark",
+    // },
+};
+
+async function compile(content: string): Promise<string> {
+    const compiled = await mdxCompile(content, {
+        remarkPlugins: [normalizeCustomHeadings, [remarkCodeHike, codeHikeOptions]],
+        recmaPlugins: [
+            [recmaCodeHike, codeHikeOptions]
+        ],
+        outputFormat: 'function-body',
+        development: false,
+    });
+
+    return String(compiled)
+}
+
+// TODO: move below to content?
+function getMDXComponent(code: string) {
+    const mdxExport = getMDXExport(code)
+    return mdxExport.default
+}
+
+function getMDXExport(code: string) {
+    const scope = {
+        Fragment: React.Fragment,
+        jsxs: React.createElement,
+        jsx: React.createElement,
+        jsxDEV: React.createElement,
+    }
+    const fn = new Function(...Object.keys(scope), code)
+    return fn(scope)
+}
+
+export async function uniformToReferences(): Promise<MDXReference<Reference[]> | []> {
+    let content: string = ""
+
+    for (const ref of todoAppUniform as Reference[]) {
+        const ast = referenceAST(ref)
+        const md = compileMarkdown(ast)
+
+        content += md + "\n"
+    }
+
+    const compiled = await compile(content)
+    const contentCode = getMDXComponent(compiled)
+
+    const parsedContent = contentCode ? parse(contentCode) : null
+
+    if (parsedContent) {
+        return parsedContent.references
+    }
+
+    return []
+}

package/src/styles/styles.css

@@ -0,0 +1,104 @@
+@layer overrides {
+    :root {
+        --oas-method-get-color: #15803d;
+        --oas-method-get-bg: rgba(74, 222, 128, .2);
+        --oas-method-get-color--active: var(--white);
+        --oas-method-get-bg--active: #2ab673;
+
+        --oas-method-post-color: #1D4ED8;
+        --oas-method-post-bg: rgba(96, 165, 250, .2);
+        --oas-method-post-color--active: var(--white);
+        --oas-method-post-bg--active: #3064e3;
+
+        --oas-method-put-color: #C28C30;
+        --oas-method-put-bg: rgba(250, 204, 21, .2);
+        --oas-method-put-color--active: var(--white);
+        --oas-method-put-bg--active: #C28C30;
+
+        --oas-method-delete-color: #B91C1C;
+        --oas-method-delete-bg: rgba(248, 114, 114, 0.2);
+        --oas-method-delete-color--active: var(--white);
+        --oas-method-delete-bg--active: #cb3a32;
+
+        --oas-method-patch-color: #c2410c;
+        --oas-method-patch-bg: rgba(251, 146, 60, .2);
+        --oas-method-patch-color--active: var(--white);
+        --oas-method-patch-bg--active: #DA622B;
+    }
+
+    /* HTTP Method Colors */
+    [data-atlas-oas-method="GET"] {
+        /* --method-color: var(--oas-method-get-color); */
+        /* --method-bg: var(--oas-method-get-bg); */
+
+        --method-color: var(--oas-method-get-color);
+        --method-bg: unset;
+
+        /* &[data-active="true"] {
+            --method-bg: var(--oas-method-get-bg--active);
+            --method-color: var(--oas-method-get-color--active);
+        } */
+    }
+
+    [data-atlas-oas-method="POST"] {
+        /* --method-color: var(--oas-method-post-color); */
+        /* --method-bg: var(--oas-method-post-bg); */
+
+        --method-color: var(--oas-method-post-color);
+        --method-bg: unset;
+
+        /* &[data-active="true"] {
+            --method-bg: var(--oas-method-post-bg--active);
+            --method-color: var(--oas-method-post-color--active);
+        } */
+    }
+
+    [data-atlas-oas-method="PUT"] {
+        /* --method-color: var(--oas-method-put-color); */
+        /* --method-bg: var(--oas-method-put-bg); */
+
+        --method-color: var(--oas-method-put-color);
+        --method-bg: unset;
+
+        /* &[data-active="true"] {
+            --method-bg: var(--oas-method-put-bg--active);
+            --method-color: var(--oas-method-put-color--active);
+        } */
+    }
+
+    [data-atlas-oas-method="DELETE"] {
+        /* --method-color: var(--oas-method-delete-color); */
+        /* --method-bg: var(--oas-method-delete-bg); */
+
+        --method-color: var(--oas-method-delete-color);
+        --method-bg: unset;
+
+        /* &[data-active="true"] {
+            --method-bg: var(--oas-method-delete-bg--active);
+            --method-color: var(--oas-method-delete-color--active);
+        } */
+    }
+
+    [data-atlas-oas-method="PATCH"] {
+        /* --method-color: var(--oas-method-patch-color); */
+        /* --method-bg: var(--oas-method-patch-bg); */
+
+        --method-color: var(--oas-method-patch-color);
+        --method-bg: unset;
+
+        /* &[data-active="true"] {
+            --method-bg: var(--oas-method-patch-bg--active);
+            --method-color: var(--oas-method-patch-color--active);
+        } */
+    }
+
+    [data-atlas-oas-method] {
+        color: var(--method-color);
+    }
+
+    [data-atlas-oas-method] xyd-badge {
+        background-color: var(--method-bg);
+        color: var(--method-color);
+        font-weight: var(--xyd-font-weight-bold);
+    }
+}

package/src/styles/tokens.css

@@ -0,0 +1,60 @@
+:root {
+  /* Ref tokens - Base values */
+  --XydAtlas-Ref-Palette-White: #FFFFFF;
+
+  --XydAtlas-Ref-Palette-Primary-60: #7051d4;
+  --XydAtlas-Ref-Palette-Primary-70: #6045b9;
+  --XydAtlas-Ref-Palette-Primary-80: #4f399e;
+
+  --XydAtlas-Ref-Palette-Neutral-10: #F8F9FA;
+  --XydAtlas-Ref-Palette-Neutral-20: #F1F3F5;
+  --XydAtlas-Ref-Palette-Neutral-30: #E9ECEF;
+  --XydAtlas-Ref-Palette-Neutral-40: #DEE2E6;
+  --XydAtlas-Ref-Palette-Neutral-70: #6C757D;
+  --XydAtlas-Ref-Palette-Neutral-80: #495057;
+  --XydAtlas-Ref-Palette-Neutral-100: #212529;
+
+  /* System tokens - Semantic values */
+  --XydAtlas-Sys-Color-Primary: var(--XydAtlas-Ref-Palette-Primary-60);
+  --XydAtlas-Sys-Color-Primary--hover: var(--XydAtlas-Ref-Palette-Primary-70);
+  --XydAtlas-Sys-Color-Primary--active: var(--XydAtlas-Ref-Palette-Primary-80);
+  
+  --XydAtlas-Sys-Color-Surface: var(--XydAtlas-Ref-Palette-Neutral-10);
+  --XydAtlas-Sys-Color-Surface--hover: var(--XydAtlas-Ref-Palette-Neutral-20);
+  --XydAtlas-Sys-Color-Surface--active: var(--XydAtlas-Ref-Palette-Neutral-30);
+  
+  --XydAtlas-Sys-Color-Text-Primary: var(--XydAtlas-Ref-Palette-Neutral-100);
+  --XydAtlas-Sys-Color-Text-Secondary: var(--XydAtlas-Ref-Palette-Neutral-80);
+  --XydAtlas-Sys-Color-Text-Tertiary: var(--XydAtlas-Ref-Palette-Neutral-70);
+  
+  --XydAtlas-Sys-Color-Border: var(--XydAtlas-Ref-Palette-Neutral-30);
+  --XydAtlas-Sys-Color-Border--hover: var(--XydAtlas-Ref-Palette-Neutral-40);
+  --XydAtlas-Sys-Color-Border--active: var(--XydAtlas-Ref-Palette-Primary-60);
+
+  /* Component tokens - Specific component values */
+  /* ApiRef Properties */
+  --XydAtlas-Component-ApiRef-Properties__color-description: var(--XydAtlas-Sys-Color-Text-Secondary);
+  --XydAtlas-Component-ApiRef-Properties__color-propName: var(--XydAtlas-Sys-Color-Text-Primary);
+  --XydAtlas-Component-ApiRef-Properties__color-propType: var(--XydAtlas-Sys-Color-Text-Tertiary);
+  --XydAtlas-Component-ApiRef-Properties__color--active: var(--XydAtlas-Sys-Color-Primary);
+  --XydAtlas-Component-ApiRef-Properties__color-border: var(--XydAtlas-Sys-Color-Border);
+
+  /* ApiRef Item */
+  --XydAtlas-Component-ApiRef-Item__color-border: var(--XydAtlas-Sys-Color-Border);
+  --XydAtlas-Component-ApiRef-Item__color-navbar: var(--XydAtlas-Sys-Color-Text-Secondary);
+  --XydAtlas-Component-ApiRef-Item__background-navbar: var(--XydAtlas-Ref-Palette-Neutral-10);
+
+  /* Code Sample */
+  --XydAtlas-Component-Code-Sample__color-border: var(--XydAtlas-Sys-Color-Border);
+  --XydAtlas-Component-Code-Sample__color: var(--XydAtlas-Sys-Color-Text-Secondary);
+  --XydAtlas-Component-Code-Sample__color--active: var(--XydAtlas-Sys-Color-Primary);
+  --XydAtlas-Component-Code-Sample__color-background: var(--XydAtlas-Sys-Color-Surface--hover);
+  --XydAtlas-Component-Code-Sample__color-markBorder--active: var(--XydAtlas-Sys-Color-Primary);
+  --XydAtlas-Component-Code-Sample__color-markBackground--active: var(--XydAtlas-Sys-Color-Surface--hover);
+
+  /* Code Sample Buttons */
+  --XydAtlas-Component-Code-SampleButtons__color-containerBackground: var(--XydAtlas-Sys-Color-Surface);
+  --XydAtlas-Component-Code-SampleButtons__color-background--active: var(--XydAtlas-Ref-Palette-White);
+  --XydAtlas-Component-Code-SampleButtons__color: var(--XydAtlas-Sys-Color-Text-Primary);
+  --XydAtlas-Component-Code-SampleButtons__color--active: var(--XydAtlas-Sys-Color-Text-Primary);
+} 

package/src/utils/mdx.ts

@@ -0,0 +1,2 @@
+import React from "react";
+

package/tsconfig.json

@@ -0,0 +1,51 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/atlas/*": [
+        "src/atlas/*"
+      ],
+      "@/components/*": [
+        "src/components/*"
+      ],
+      "@/utils/*": [
+        "src/utils/*"
+      ]
+    },
+    "typeRoots": [
+      "./types.d.ts"
+    ],
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "target": "ES6",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "strictNullChecks": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.json",
+    "packages/**/*.ts",
+    "packages/**/*.tsx",
+    "packages/**/*.json",
+    ".storybook/**/*.ts",
+    ".storybook/**/*.tsx",
+    "types.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/types.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react'
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'atlas-decorator': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+
+        'atlas-apiref-item': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'atlas-apiref-item-showcase': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'atlas-apiref-samples': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'atlas-apiref-definitions': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'atlas-apiref-properties': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'atlas-apiref-variant': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'atlas-apiref-propname': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'atlas-apiref-proptype': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'atlas-apiref-propmeta': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        'atlas-apiref-meta-info': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+      }
+    }
+  }
+}

package/vite.config.ts

@@ -0,0 +1,25 @@
+import {resolve} from 'path';
+
+import {defineConfig} from 'vite';
+import react from '@vitejs/plugin-react';
+import wyw from '@wyw-in-js/vite';
+
+// https://vitejs.dev/config/
+
+// eslint-disable-next-line import/no-default-export
+export default defineConfig({
+    plugins: [
+        wyw({
+            include: ['**/*.{ts,tsx}'],
+            babelOptions: {
+                presets: ['@babel/preset-typescript', '@babel/preset-react'],
+            },
+        }),
+        react(),
+    ],
+    resolve: {
+        alias: {
+            '@': resolve(__dirname, 'src'),
+        },
+    },
+});