@epam/ai-dial-ui-kit 0.11.0-dev.16 → 0.11.0-dev.17

package/dist/mcp-server.cjs

@@ -10,6 +10,60 @@ var import_types = require("@modelcontextprotocol/sdk/types.js");
 var manifest = JSON.parse(
   (0, import_node_fs.readFileSync)((0, import_node_path.join)(__dirname, "components-manifest.json"), "utf-8")
 );
+var changelogPath = (0, import_node_path.join)(__dirname, "CHANGELOG.md");
+var changelogRaw = (0, import_node_fs.existsSync)(changelogPath) ? (0, import_node_fs.readFileSync)(changelogPath, "utf-8") : "";
+var migrationGuidesDir = (0, import_node_path.join)(__dirname, "migration-guides");
+function parseChangelog(content) {
+  const map = /* @__PURE__ */ new Map();
+  const sectionRegex = /^## \[(\d+\.\d+\.\d+)\]/gm;
+  const sections = [];
+  let match;
+  while ((match = sectionRegex.exec(content)) !== null) {
+    sections.push({ version: match[1], start: match.index });
+  }
+  for (let i = 0; i < sections.length; i++) {
+    const { version, start } = sections[i];
+    const end = i + 1 < sections.length ? sections[i + 1].start : content.length;
+    map.set(version, content.slice(start, end).trim());
+  }
+  return map;
+}
+var changelogSections = parseChangelog(changelogRaw);
+function parseSemver(v) {
+  const p = v.split(".").map(Number);
+  return [p[0] ?? 0, p[1] ?? 0, p[2] ?? 0];
+}
+function semverGt(a, b) {
+  const [a0, a1, a2] = parseSemver(a);
+  const [b0, b1, b2] = parseSemver(b);
+  if (a0 !== b0) return a0 > b0;
+  if (a1 !== b1) return a1 > b1;
+  return a2 > b2;
+}
+function versionsInRange(from, to) {
+  return [...changelogSections.keys()].filter(
+    (v) => semverGt(v, from) && !semverGt(v, to)
+  );
+}
+function readMigrationGuides(versions) {
+  const guides = [];
+  if (!(0, import_node_fs.existsSync)(migrationGuidesDir)) return guides;
+  for (const version of versions) {
+    const vDir = (0, import_node_path.join)(migrationGuidesDir, version);
+    if (!(0, import_node_fs.existsSync)(vDir)) continue;
+    const files = (0, import_node_fs.readdirSync)(vDir).filter(
+      (f) => f.endsWith(".md") && !f.startsWith("_")
+    );
+    for (const file of files.sort()) {
+      guides.push({
+        version,
+        filename: file,
+        content: (0, import_node_fs.readFileSync)((0, import_node_path.join)(vDir, file), "utf-8")
+      });
+    }
+  }
+  return guides;
+}
 var ENTITY_KINDS = [
   "component",
   "hook",
@@ -206,6 +260,24 @@ server.setRequestHandler(import_types.ListToolsRequestSchema, async () => ({
         },
         required: ["entity"]
       }
+    },
+    {
+      name: "getMigrationGuides",
+      description: 'Returns the CHANGELOG entries and step-by-step migration guides for all breaking changes introduced between two versions of @epam/ai-dial-ui-kit.\n\nPass the version you are currently on as `fromVersion` and the version you are upgrading to as `toVersion`. The tool returns the changelog section for each intermediate release plus the full text of every migration guide that applies.\n\nExamples:\n  getMigrationGuides("0.9.0", "0.10.0") \u2192 changelog + guides for 0.10.0\n  getMigrationGuides("0.8.0", "0.10.0") \u2192 changelog + guides for 0.9.0 and 0.10.0',
+      inputSchema: {
+        type: "object",
+        properties: {
+          fromVersion: {
+            type: "string",
+            description: 'The version you are upgrading FROM (exclusive), e.g. "0.9.0".'
+          },
+          toVersion: {
+            type: "string",
+            description: 'The version you are upgrading TO (inclusive), e.g. "0.10.0".'
+          }
+        },
+        required: ["fromVersion", "toVersion"]
+      }
     }
   ]
 }));
@@ -358,6 +430,49 @@ server.setRequestHandler(import_types.CallToolRequestSchema, async (request) =>
     }
     return { content: [{ type: "text", text: formatExport(entry) }] };
   }
+  if (name === "getMigrationGuides") {
+    const fromVersion = typeof a.fromVersion === "string" ? a.fromVersion.trim() : "";
+    const toVersion = typeof a.toVersion === "string" ? a.toVersion.trim() : "";
+    if (!fromVersion || !toVersion) {
+      throw new Error('"fromVersion" and "toVersion" are required.');
+    }
+    const versions = versionsInRange(fromVersion, toVersion).sort(
+      (a2, b) => semverGt(a2, b) ? 1 : -1
+    );
+    if (versions.length === 0) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: `No changelog entries found for versions between ${fromVersion} (exclusive) and ${toVersion} (inclusive). Either this range is already up to date or the versions are unknown.`
+          }
+        ]
+      };
+    }
+    const sections = [];
+    for (const version of versions) {
+      const changelogSection = changelogSections.get(version);
+      if (changelogSection) sections.push(changelogSection);
+      const guides = readMigrationGuides([version]);
+      for (const guide of guides) {
+        sections.push(
+          `---
+
+<!-- Migration guide: ${guide.version}/${guide.filename} -->
+
+${guide.content}`
+        );
+      }
+    }
+    return {
+      content: [
+        {
+          type: "text",
+          text: sections.join("\n\n")
+        }
+      ]
+    };
+  }
   throw new Error(`Unknown tool: ${name}`);
 });
 void (async () => {

package/dist/migration-guides/0.11.0/dropdown-menu-prop-flatten.md

@@ -0,0 +1,78 @@
+# Migrating `DialDropdown` and `DialDropdownIcon` `menu` prop — v0.11.0
+
+## Why this changed
+
+The nested `menu` object was an unnecessary indirection. Passing `items` directly as a top-level prop is simpler, more consistent with other components in the library, and friendlier to TypeScript autocomplete.
+
+## What changed
+
+| Before                              | After                             |
+| ----------------------------------- | --------------------------------- |
+| `menu={{ items }}`                  | `items={items}`                   |
+| `menu={{ items, onClick: fn }}`     | `items={items} onItemClick={fn}`  |
+| `menu={{ items, header: node }}`    | `items={items} menuHeader={node}` |
+| `menu={{ items, footer: node }}`    | `items={items} menuFooter={node}` |
+| `DropdownMenuProps` (exported type) | Removed — no replacement needed   |
+
+Both `DialDropdown` and `DialDropdownIcon` are affected.
+
+## Step-by-step migration
+
+### 1. Find all usages
+
+```bash
+grep -r "menu={{" src/
+grep -r "DropdownMenuProps" src/
+```
+
+### 2. Replace with the new API
+
+**Before:**
+
+```tsx
+<DialDropdown menu={{ items, onClick: handleClick, header: <h4>Title</h4>, footer: <Footer /> }}>
+  <button type="button">Open</button>
+</DialDropdown>
+
+<DialDropdownIcon
+  ariaLabel="Select model"
+  icon={<IconBrandOpenai />}
+  menu={{ items, onClick: handleClick }}
+/>
+```
+
+**After:**
+
+```tsx
+<DialDropdown
+  items={items}
+  onItemClick={handleClick}
+  menuHeader={<h4>Title</h4>}
+  menuFooter={<Footer />}
+>
+  <button type="button">Open</button>
+</DialDropdown>
+
+<DialDropdownIcon
+  ariaLabel="Select model"
+  icon={<IconBrandOpenai />}
+  items={items}
+  onItemClick={handleClick}
+/>
+```
+
+### 3. Remove `DropdownMenuProps` imports
+
+```tsx
+// Remove this line
+import type { DropdownMenuProps } from '@epam/ai-dial-ui-kit';
+```
+
+### 4. Verify
+
+Run the commands specific to your project, e.g.
+
+```bash
+npm run typecheck
+npm run test
+```

package/dist/migration-guides/README.md

@@ -0,0 +1,21 @@
+# Migration Guides
+
+This folder contains step-by-step migration guides for breaking changes introduced in each release of `@epam/ai-dial-ui-kit`.
+
+## Structure
+
+```
+migration-guides/
+  <version>/
+    <migration-name>.md   ← one file per breaking change
+```
+
+## Index
+
+| Version | Guide | Summary |
+| ------- | ----- | ------- |
+| 0.11.0 | [dropdown-menu-prop-flatten](0.11.0/dropdown-menu-prop-flatten.md) | `DialDropdown`/`DialDropdownIcon` `menu` prop replaced with flat `items`, `onItemClick`, `menuHeader`, `menuFooter` props |
+
+---
+
+New guides are added here whenever a breaking change is introduced. See [CHANGELOG.md](../CHANGELOG.md) for the full list of changes per release.

package/dist/migration-guides/_template.md

@@ -0,0 +1,54 @@
+# Migration guide template
+
+Use this file as a template when adding a new migration guide.
+Copy it to `migration-guides/<version>/<migration-name>.md` and fill in the sections.
+
+---
+
+# Migrating `<what changed>` — v`<from>` → v`<to>`
+
+## Why this changed
+
+_Explain the motivation: API consistency, accessibility improvement, removed ambiguity, etc._
+
+## What changed
+
+| Before     | After      |
+| ---------- | ---------- |
+| `oldThing` | `newThing` |
+
+## Step-by-step migration
+
+### 1. Find all usages
+
+```bash
+# Example: search for the old prop name across your project
+grep -r "oldPropName" src/
+```
+
+### 2. Replace with the new API
+
+**Before:**
+
+```tsx
+<DialComponent oldPropName="value" />
+```
+
+**After:**
+
+```tsx
+<DialComponent newPropName="value" />
+```
+
+### 3. Verify
+
+Run the commands specific to your project, e.g.
+
+```bash
+npm run typecheck
+npm run test
+```
+
+## Notes
+
+_Any edge cases, optional codemods, or further reading._

package/dist/src/components/Dropdown/Dropdown.d.ts

@@ -2,18 +2,15 @@ import { Placement } from '@floating-ui/react';
 import { FC, MouseEvent, ReactNode, RefObject } from 'react';
 import { DropdownTrigger } from '../../types/dropdown';
 import { DropdownItem } from '../../models/dropdown';
-export interface DropdownMenuProps {
-    items: DropdownItem[];
-    onClick?: (info: {
+export interface DialDropdownProps {
+    children: ReactNode;
+    items?: DropdownItem[];
+    onItemClick?: (info: {
         key: string;
         domEvent: MouseEvent;
     }) => void;
-    header?: ReactNode | (() => ReactNode);
-    footer?: ReactNode | (() => ReactNode);
-}
-export interface DialDropdownProps {
-    children: ReactNode;
-    menu?: DropdownMenuProps;
+    menuHeader?: ReactNode | (() => ReactNode);
+    menuFooter?: ReactNode | (() => ReactNode);
     renderOverlay?: () => ReactNode;
     trigger?: DropdownTrigger[];
     placement?: Placement;

package/dist/src/components/DropdownIcon/DropdownIcon.d.ts

@@ -1,8 +1,7 @@
 import { FC, ReactNode } from 'react';
-import { DialDropdownProps, DropdownMenuProps } from '../Dropdown/Dropdown';
+import { DialDropdownProps } from '../Dropdown/Dropdown';
 import { ElementSize } from '../../types/size';
-export interface DialDropdownIconProps extends Omit<DialDropdownProps, 'children' | 'menu' | 'className'> {
-    menu: DropdownMenuProps;
+export interface DialDropdownIconProps extends Omit<DialDropdownProps, 'children' | 'className'> {
     icon: ReactNode;
     ariaLabel: string;
     size?: ElementSize;
@@ -21,11 +20,11 @@ export interface DialDropdownIconProps extends Omit<DialDropdownProps, 'children
  * <DialDropdownIcon
  *   ariaLabel="Select model"
  *   icon={<IconBrandOpenai size={18} />}
- *   menu={{ items }}
+ *   items={items}
  * />
  * ```
  *
- * @param menu - Dropdown menu definition.
+ * @param items - Menu items to display.
  * @param icon - Primary trigger icon.
  * @param ariaLabel - Accessible name for the trigger button.
  * @param [size=ElementSize.Standard] - Trigger size.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.11.0-dev.16",
+  "version": "0.11.0-dev.17",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",