@xyd-js/atlas 0.0.0-build

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@xyd-js/atlas",
+  "version": "0.0.0-build+6952c2c-20250813013245",
+  "description": "",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    "./index.css": "./dist/index.css",
+    "./tokens.css": "./dist/tokens.css",
+    ".": {
+      "import": "./dist/index.js"
+    },
+    "./xydPlugin": {
+      "import": "./dist/xydPlugin.js"
+    }
+  },
+  "dependencies": {
+    "@code-hike/lighter": "^1.0.3",
+    "radix-ui": "^1.4.2",
+    "codehike": "^1.0.2",
+    "lucide-react": "^0.447.0"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "openux-js": "0.0.0-pre.1",
+    "@xyd-js/framework": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/plugins": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/core": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/uniform": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/components": "0.0.0-build+6952c2c-20250813013245"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@linaria/core": "^6.2.0",
+    "@babel/preset-react": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@wyw-in-js/rollup": "^0.5.5",
+    "@wyw-in-js/vite": "^0.5.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
+    "@storybook/test": "^8.4.5",
+    "rollup": "^4.27.4",
+    "rollup-plugin-css-only": "^4.5.2",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rimraf": "^3.0.2",
+    "storybook": "^8.4.5",
+    "vite": "^7.0.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "unist-util-visit": "^5.0.0",
+    "@mdx-js/mdx": "^3.1.0"
+  },
+  "scripts": {
+    "clean": "rimraf build",
+    "prebuild": "pnpm clean",
+    "build": "rollup -c rollup.config.js",
+    "dev": "rollup -c rollup.config.js --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  }
+}

package/packages/xyd-plugin/SidebarItem.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+
+import { Badge } from "@xyd-js/components/writer"
+
+export function SidebarItemRight(props: any) {
+    const openapi = props?.pageMeta?.openapi || ""
+    const [_, region = ""] = openapi.includes("#") ? openapi.split("#") : ["", openapi]
+    const [method = ""] = region.split(" ")
+
+    if (!method) {
+        return null
+    }
+    if (method.includes("components/schemas")) {
+        return null
+    }
+
+    let methodText = method.toUpperCase()
+    if (method === "DELETE") {
+        methodText = "DEL"
+    }
+
+    return <div data-active={props?.active ? "true" : undefined} data-atlas-oas-method={method}>
+        <Badge size="xs">
+            {methodText}
+        </Badge>
+    </div>
+}

package/packages/xyd-plugin/index.ts

@@ -0,0 +1,20 @@
+import { Settings } from "@xyd-js/core"
+import { Plugin } from "@xyd-js/plugins"
+import { SurfaceTarget } from "@xyd-js/framework"
+
+import { SidebarItemRight } from "./SidebarItem"
+
+export default function XydAtlasPlugin(): Plugin {
+    return function (settings: Settings) {
+        return {
+            name: "atlas-xyd-plugin",
+            customComponents: {
+                AtlasSidebarItemRight: {
+                    component: SidebarItemRight,
+                    surface: SurfaceTarget.SidebarItemRight,
+                }
+            }
+        }
+    }
+}
+

package/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: {
+        autoprefixer: {},
+    },
+}

package/rollup.config.js

@@ -0,0 +1,120 @@
+import fs from 'fs';
+import {createRequire} from 'module';
+
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import dts from 'rollup-plugin-dts';
+import {terser} from 'rollup-plugin-terser';
+import babel from '@rollup/plugin-babel';
+import css from 'rollup-plugin-css-only';
+import wyw from '@wyw-in-js/rollup';
+
+const require = createRequire(import.meta.url);
+const {
+    dependencies,
+    peerDependencies,
+    devDependencies
+} = require('./package.json', {assert: {type: 'json'}});
+
+const external = [
+    ...Object.keys(dependencies),
+    ...Object.keys(peerDependencies),
+    ...Object.keys(devDependencies),
+];
+
+// Function to copy tokens.css to dist
+function copyCss(names) {
+    return {
+        name: `copy-${names.join('-')}-css`,
+        writeBundle() {
+            names.forEach(name => {
+                const css = fs.readFileSync(`src/styles/${name}.css`, 'utf8');
+                fs.mkdirSync('dist', { recursive: true });
+                fs.writeFileSync(`dist/${name}.css`, css);
+            });
+        }
+    };
+}
+
+export default [
+    {
+        input: {
+            index: 'index.ts',
+            xydPlugin: 'packages/xyd-plugin/index.ts',
+        },
+        output: [
+            {
+                dir: 'dist',
+                format: 'esm',
+                sourcemap: true,
+                entryFileNames: '[name].js'
+            }
+        ],
+        plugins: [
+            wyw({
+                include: ['**/*.{ts,tsx}'],
+                babelOptions: {
+                    presets: [
+                        '@babel/preset-typescript',
+                        '@babel/preset-react'
+                    ],
+                },
+                // classNameSlug: (hash, title, {file}) => {
+                //     // Get the full path after 'src/components/'
+                //     const pathParts = file.split('/');
+                //     const componentsIndex = pathParts.indexOf('components');
+                //     if (componentsIndex === -1) return `XydAtlas-Component-${title}`;
+                    
+                //     // Get everything after 'components' directory
+                //     const componentPath = pathParts
+                //         .slice(componentsIndex + 1)
+                //         .filter(part => !part.endsWith('.styles.tsx')) // Remove styles.tsx
+                //         .join('-');
+                    
+                //     // Use the title as the style name (it's already the variable name)
+                //     const styleName = title.replace(/^\$/, ''); // Remove $ prefix if present
+                    
+                //     return `XydAtlas-Component-${componentPath}__${styleName}`;
+                // }
+            }),
+            css({
+                output: 'index.css',
+            }),
+            copyCss(['tokens', 'styles']),
+            resolve(),
+            commonjs(),
+            typescript({
+                tsconfig: './tsconfig.json',
+            }),
+            babel({
+                babelHelpers: 'bundled',
+                extensions: ['.js', '.jsx', '.ts', '.tsx'],
+                presets: [
+                    '@babel/preset-env',
+                    '@babel/preset-react'
+                ],
+            }),
+            terser(),
+        ],
+        external
+    },
+    {
+        input: 'index.ts',
+        output: {
+            file: 'dist/index.d.ts',
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    },
+    {
+        input: 'packages/xyd-plugin/index.ts',
+        output: {
+            file: 'dist/xydPlugin.d.ts',
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    }
+];

package/src/components/ApiRef/ApiRefItem/ApiRefItem.styles.tsx

@@ -0,0 +1,110 @@
+import { css } from "@linaria/core";
+
+export const ApiRefItemTitleHost = css`
+    font-weight: var(--xyd-font-weight-normal);
+`;
+
+export const ApiRefItemTitleLink = css`
+`;
+
+export const ApiRefItemNavbarHost = css`
+    margin: 20px 0px;
+`;
+
+export const ApiRefItemNavbarContainer = css`
+    background: linear-gradient(45deg, var(--XydAtlas-Component-ApiRef-Item__background-navbar) 0%, var(--XydAtlas-Component-ApiRef-Item__background-navbar) 100%);
+    padding: 8px;
+    border: 1px solid var(--XydAtlas-Component-ApiRef-Item__color-border);
+    border-radius: 8px;
+    display: flex;
+    gap: 4px;
+    overflow: scroll;
+`;
+
+export const ApiRefItemNavbarLabel = css`
+    color: var(--XydAtlas-Component-ApiRef-Item__color-navbar);
+    margin-right: 4px;
+`;
+
+export const ApiRefItemNavbarSubtitle = css`
+    display: flex;
+    letter-spacing: 1px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+`;
+
+export const ApiRefItemHost = css`
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding-bottom: 25px;
+
+    &[data-has-examples="true"] {
+        atlas-apiref-item-showcase {
+            display: grid;
+            gap: 100px;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+
+            @media (max-width: 768px) {
+                display: flex;
+                flex-direction: column;
+                gap: 16px;
+            }
+        }
+    }
+`;
+
+export const ApiRefItemGrid = css`
+    align-items: normal;
+
+    @media (max-width: 1280px) {
+        xyd-grid-decorator {
+            --cols: 1;
+        }
+    }
+`;
+
+export const ApiRefItemDefinitionsHost = css`
+`;
+
+export const ApiRefItemDefinitionsItem = css`
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    margin-bottom: 25px;
+
+    margin-top: var(--space-xxlarge);
+
+    [part="controls"] {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+    }
+
+    > [part="header"] {
+        h2, h3, h4, h5, h6 {
+            margin: 0;
+        }
+
+        border-bottom: 1px solid var(--XydAtlas-Component-ApiRef-Item__color-border);
+
+        display: grid;
+        grid-template-columns: 1fr auto;
+        align-items: center;
+        gap: 16px;
+
+        > :first-child {
+            justify-self: start;
+        }
+
+        > :not(:first-child) {
+            justify-self: end;
+        }
+    }
+`;
+
+export const DefinitionBody = css`
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+`