@xyd-js/atlas 0.1.0-xyd.4 → 0.1.0-xyd.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyd-js/atlas",
-  "version": "0.1.0-xyd.4",
+  "version": "0.1.0-xyd.57",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -8,53 +8,59 @@
   "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.0",
-    "@emotion/react": "^11.13.5",
-    "@linaria/atomic": "^6.2.0",
-    "@linaria/core": "^6.2.0",
-    "@radix-ui/react-tabs": "^1.1.1",
+    "@code-hike/lighter": "^1.0.3",
+    "radix-ui": "^1.4.2",
     "codehike": "^1.0.2",
     "lucide-react": "^0.447.0",
-    "react": "^18.3.1",
-    "@xyd-js/uniform": "0.1.0-xyd.3"
+    "@xyd-js/uniform": "0.1.0-xyd.56",
+    "@xyd-js/components": "0.1.0-xyd.52"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "@xyd-js/plugins": "0.1.0-xyd.41",
+    "@xyd-js/core": "0.1.0-xyd.54",
+    "@xyd-js/framework": "0.1.0-xyd.73"
   },
   "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",
-    "@babel/preset-flow": "^7.25.9",
-    "@chromatic-com/storybook": "^3.2.2",
-    "@rollup/plugin-alias": "^5.1.1",
     "@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",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-interactions": "^8.4.5",
-    "@storybook/addon-onboarding": "^8.4.5",
-    "@storybook/blocks": "^8.4.5",
+    "@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",
-    "@wyw-in-js/rollup": "^0.5.5",
-    "@wyw-in-js/vite": "^0.5.5",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.47",
-    "prop-types": "^15.8.1",
     "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",
-    "@xyd-js/gql": "0.1.0-xyd.1"
+    "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} 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/rollup.config.js

@@ -1,3 +1,6 @@
+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';
@@ -6,34 +9,49 @@ 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';
-import alias from '@rollup/plugin-alias';
-import {fileURLToPath} from 'url';
-import {dirname} from 'path';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-import {createRequire} from 'module';
 
 const require = createRequire(import.meta.url);
-const {dependencies} = require('./package.json', {assert: {type: 'json'}});
+const {
+    dependencies,
+    peerDependencies,
+    devDependencies
+} = require('./package.json', {assert: {type: 'json'}});
+
+const external = [
+    ...Object.keys(dependencies),
+    ...Object.keys(peerDependencies),
+    ...Object.keys(devDependencies),
+];
 
-const external = Object.keys(dependencies);
+// 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.ts',
-        output: {
-            dir: 'dist',
-            format: 'esm',
-            sourcemap: false,
+        input: {
+            index: 'index.ts',
+            xydPlugin: 'packages/xyd-plugin/index.ts',
         },
+        output: [
+            {
+                dir: 'dist',
+                format: 'esm',
+                sourcemap: true,
+                entryFileNames: '[name].js'
+            }
+        ],
         plugins: [
-            // alias({ TODO: finish?
-            //     entries: [
-            //         {find: '@', replacement: resolve(__dirname, 'src')}
-            //     ]
-            // }),
             wyw({
                 include: ['**/*.{ts,tsx}'],
                 babelOptions: {
@@ -42,10 +60,28 @@ export default [
                         '@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({
@@ -66,10 +102,19 @@ export default [
     {
         input: 'index.ts',
         output: {
-            dir: 'dist',
+            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

@@ -1,70 +1,102 @@
-import {css} from "@linaria/core";
-
-export const $title = {
-    host: css`
-        font-size: 30px;
-        font-weight: 400;
-    `,
-    link: css`
-    `,
-}
-
-export const $navbar = {
-    host: css`
-    `,
-    container: css`
-        background: linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%);
-
-        padding: 8px;
-
-        border: 1px solid var(--atlas-comp-apiref-item-border-color);
-        border-radius: 8px;
-
-        font-size: 13px;
-    `,
-    label: css`
-        color: var(--atlas-comp-apiref-item-navbar-color);
-
-        margin-right: 4px;
-    `,
-}
-
-export const $refItem = {
-    host: css`
+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: 767px) {
+                grid-template-columns: 1fr;
+            }
+        }
+    }
+`;
+
+export const ApiRefItemGrid = css`
+    align-items: normal;
+`;
+
+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;
-        flex-direction: column;
+        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);
 
-        padding-bottom: 25px;
-    `,
-    grid: css`
         display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        align-items: normal;
-        gap: 100px;
-    `,
-}
+        grid-template-columns: 1fr auto;
+        align-items: center;
+        gap: 16px;
 
-export const $properties = {
-    host: css`
+        > :first-child {
+            justify-self: start;
+        }
 
-    `,
-    item: css`
-        display: flex;
-        flex-direction: column;
-        gap: 25px;
-
-        margin-bottom: 25px;
-    `,
-}
-
-export const $subtitle = {
-    host: css`
-        font-size: 15px;
-        font-weight: 600;
-    `,
-    link: css`
-        text-decoration: none;
-    `,
-}
+        > :not(:first-child) {
+            justify-self: end;
+        }
+    }
+`;
 
+export const DefinitionBody = css`
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+`