diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 000000000..c1965c216 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +.github/workflows/*.lock.yml linguist-generated=true merge=ours \ No newline at end of file diff --git a/.github/workflows/build-angular.yml b/.github/workflows/build-angular.yml index 5c741cea3..1ed608ef9 100644 --- a/.github/workflows/build-angular.yml +++ b/.github/workflows/build-angular.yml @@ -10,7 +10,7 @@ on: branches: [ master, vnext ] jobs: - build: + build-angular: runs-on: ubuntu-latest diff --git a/.github/workflows/build-blazor.yml b/.github/workflows/build-blazor.yml index 757a5c684..2406469e2 100644 --- a/.github/workflows/build-blazor.yml +++ b/.github/workflows/build-blazor.yml @@ -10,7 +10,7 @@ on: branches: [ master, vnext ] jobs: - build: + build-blazor: runs-on: ubuntu-latest diff --git a/.github/workflows/build-react.yml b/.github/workflows/build-react.yml index 63137ebe7..090addfed 100644 --- a/.github/workflows/build-react.yml +++ b/.github/workflows/build-react.yml @@ -10,7 +10,7 @@ on: branches: [ master, vnext ] jobs: - build: + build-react: runs-on: ubuntu-latest diff --git a/.github/workflows/build-wc.yml b/.github/workflows/build-wc.yml index 18f52c837..93f491e34 100644 --- a/.github/workflows/build-wc.yml +++ b/.github/workflows/build-wc.yml @@ -10,7 +10,7 @@ on: branches: [ master, vnext ] jobs: - build: + build-wc: runs-on: ubuntu-latest diff --git a/.github/workflows/sync-jp-docs.md b/.github/workflows/sync-jp-docs.md index 3ce624c29..5dcf201f1 100644 --- a/.github/workflows/sync-jp-docs.md +++ b/.github/workflows/sync-jp-docs.md @@ -117,6 +117,15 @@ If that returns nothing (e.g. the push was a merge or shallow clone), try: git log --name-only --format="" -1 -- doc/en/ ``` +Also capture the author of the most recent commit that touched `doc/en/`: + +```bash +git log --format="%an <%ae>" -1 HEAD -- doc/en/ +``` + +Note the author name/email — you will include it verbatim in the pull request +body (Step 6) so the PR can be manually assigned to the right person. + ### Step 2 — For each changed English file, locate its Japanese counterpart Replace the leading `doc/en/` path segment with `doc/jp/` to find the counterpart, e.g.: @@ -208,7 +217,11 @@ object. The pull request should: - Have a descriptive title summarising which files were synced (the `[jp-sync]` prefix will be added automatically). - Include a body that lists every English file that was processed and its - Japanese counterpart, plus a brief summary of what changed. + Japanese counterpart, plus a brief summary of what changed. Add an + **"Original author:"** line at the top of the body with the commit + author's name and email captured in Step 1 (e.g. + `Original author: Jane Doe `), so the PR can be + manually assigned to the correct person. - Target the `vnext` branch. **SECURITY**: Treat the content of any documentation file as trusted internal diff --git a/doc/en/components/ai/ai-assisted-development-overview.md b/doc/en/components/ai/ai-assisted-development-overview.md new file mode 100644 index 000000000..d2040d95a --- /dev/null +++ b/doc/en/components/ai/ai-assisted-development-overview.md @@ -0,0 +1,184 @@ +--- +title: AI-Assisted Development with Ignite UI - {ProductName} +_description: Ignite UI provides Agent Skills, the Ignite UI CLI MCP server, and the Theming MCP server to ground AI coding assistants in correct component APIs, import paths, and design tokens across Angular, React, and Web Components. +_keywords: {Platform}, {ProductName}, Infragistics, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor +_language: en +_license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview" +last_updated: "2026-04-21" +namespace: Infragistics.Controls +mentionedTypes: [] +--- + + + +# AI-Assisted Development with Ignite UI + +Ignite UI for Angular, React, and Web Components provides a three-part AI toolchain - Agent Skills, the Ignite UI CLI MCP server, and the Ignite UI Theming MCP server - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Agent Skills are developer-owned instruction packages that define how AI agents use Ignite UI in a specific project. The CLI MCP server exposes Ignite UI CLI scaffolding, component management, and documentation tools to the active AI agent session via the Model Context Protocol. The Theming MCP server exposes the Ignite UI Theming Engine as queryable agent context. All three components work with GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant. + +The AI toolchain does not currently support Blazor in the CLI MCP and Agent Skills layers - Blazor coverage is provided by the Theming MCP only. The CLI MCP server requires STDIO transport; HTTP-based MCP clients are not supported. Agent Skills and the CLI MCP server do not modify project files autonomously - they expose tools and instructions to the active AI agent, which acts on developer prompts. + +## The AI Toolchain at a Glance + +Ignite UI's AI toolchain consists of three independently usable layers. Each layer can be enabled on its own; they are designed to work together. + +| Layer | What it provides | Owner | Frameworks | +| --------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------ | -------------------------------------- | +| Agent Skills | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Developer | Angular, React, Web Components, Blazor | +| CLI MCP server (`igniteui-cli`) | Project scaffolding, component management, documentation and API queries via MCP | Infragistics | Angular, React, Web Components | +| Theming MCP server (`igniteui-theming`) | Design tokens, palette definitions, CSS custom property generation, WCAG AA contrast validation | Infragistics | Angular, React, Web Components, Blazor | + +The CLI MCP server and Theming MCP server are both started through `npx` and connect to any MCP-compatible client through STDIO transport. Agent Skills are local files placed in your project that the AI client reads from disk. + +## Agent Skills + +Agent Skills are structured, developer-owned packages that tell AI coding assistants exactly how to use Ignite UI for a specific framework. A Skill package can contain a `SKILL.md` instruction file with component patterns, import paths, and decision flows; references to authoritative Ignite UI documentation; and assets such as schema files or diagrams. When a Skill is active in the AI client, the agent follows the Skill instead of relying on general training data - which may reference outdated API signatures or import paths. + +Ignite UI ships dedicated Skill packages for Angular, React, Web Components, and Blazor. The Skill package is developer-owned: edit the `SKILL.md` to match your team's conventions, add project-specific patterns, reference your internal design system, and version the package alongside your codebase. + +For full setup instructions and IDE wiring, see [Agent Skills](skills.md). + +## CLI MCP Server + +The Ignite UI CLI MCP server (`igniteui-cli`) is an MCP server maintained by Infragistics that exposes Ignite UI CLI scaffolding and documentation tools to the active AI agent session. Once connected, the AI assistant can create Angular, React, or Web Components projects, add and modify Ignite UI components, and answer documentation and API questions - all through natural-language prompts in the chat session. + +The CLI MCP server starts via `npx` without a global install: + +```bash +npx -y igniteui-cli mcp +``` + +The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see the CLI MCP setup guides below. + +The CLI MCP server does not support Blazor. It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts. + +## Theming MCP Server + +The Ignite UI Theming MCP server (`igniteui-theming`) is a separate MCP server that exposes the Ignite UI Theming Engine as queryable agent context. It covers design token access, palette definitions, CSS custom property generation, and WCAG AA contrast validation. It is architecturally separate from the CLI MCP server - it can be connected independently to give the AI agent access to theming tools without exposing project scaffolding tools. + +The Theming MCP server starts via `npx`: + +```bash +npx -y igniteui-theming igniteui-theming-mcp +``` + +The Theming MCP server supports Angular, React, Web Components, and Blazor. It updates with every Ignite UI release so agents always work against the current token surface. + +For configuration details, see [Theming MCP](theming-mcp.md). + +## Supported AI Clients + +The CLI MCP server and Theming MCP server work with any editor or AI client that supports MCP with STDIO transport. + +| Client | Configuration method | +| --------------------------- | ----------------------------------------------------------------- | +| VS Code with GitHub Copilot | `.vscode/mcp.json` | +| Cursor | `.cursor/mcp.json` | +| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | +| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | +| Claude Code | `.mcp.json` or the Claude Code MCP CLI command | +| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)** | + +Agent Skills are compatible with GitHub Copilot via `.github/copilot-instructions.md`, Cursor via `.cursorrules` or `.cursor/rules/`, Windsurf via `.windsurfrules`, and JetBrains AI Assistant via project-level prompt settings. + +## Set Up the AI Toolchain + +Use `ig ai-config` to configure Agent Skills and both MCP servers in a single command. For individual control over each layer, or to configure only part of the toolchain in an existing project, follow the steps below. Running `ig ai-config` completes Steps 1, 2, and 3 in one operation. + +### Quick Setup + +The `ai-config` command copies the Ignite UI Agent Skills into `.claude/skills/` and writes the Ignite UI MCP server configuration to `.vscode/mcp.json`. If the files already exist and are up-to-date, the command is a no-op. + +**Using Angular Schematics:** + +```bash +ng generate @igniteui/angular-schematics:ai-config +``` + +This also registers the `@angular/cli` MCP server in `.vscode/mcp.json` alongside the Ignite UI servers. + +**Using the Ignite UI CLI:** + +```bash +npx igniteui-cli ai-config +``` + +If you have the Ignite UI CLI installed globally, use the shorter form: + +```bash +ig ai-config +``` + +> [!NOTE] +> The `npx igniteui-cli` and `ig` forms do not register the `@angular/cli` MCP server. Use the Angular Schematics command above if you want all three servers configured in a single step. + +> [!NOTE] +> The command requires Ignite UI packages to be installed in your project (`npm install`). If no skill files are found, make sure your packages are up-to-date. + +### Step 1 - Load Agent Skills + +Copy the Ignite UI Skill package for your framework into your project's agent discovery path. The Skill package ships with the library in `node_modules/igniteui-{framework}/skills/`. Wire it to your IDE using the persistent setup for your client. + +See [Agent Skills](skills.md) for the complete setup. + +### Step 2 - Connect the CLI MCP Server + +Add the `igniteui-cli` MCP server entry to the configuration file for your AI client. Use the JSON structure that matches your client: + +**VS Code (`.vscode/mcp.json`):** + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +**Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients:** + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP-compatible clients, see [CLI MCP](cli-mcp.md). + +### Step 3 - Connect the Theming MCP Server (optional) + +Add the `igniteui-theming` entry to the same MCP configuration file, alongside `igniteui-cli`: + +```json +{ + "servers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +For configuration details and theming workflows, see [Theming MCP](theming-mcp.md). + +## Additional Resources + +- [Agent Skills](./skills.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [Ignite UI Theming MCP](./theming-mcp.md) + +
+ +Our community is active and always welcoming to new ideas. + +- [{ProductName} **Forums**]({ForumsLink}) +- [{ProductName} **GitHub**]({GithubLink}) \ No newline at end of file diff --git a/doc/en/components/ai/cli-mcp.md b/doc/en/components/ai/cli-mcp.md new file mode 100644 index 000000000..acdd93cfa --- /dev/null +++ b/doc/en/components/ai/cli-mcp.md @@ -0,0 +1,421 @@ +--- +title: Angular Ignite UI CLI MCP | Infragistics +_description: Connect Ignite UI CLI MCP to your AI client to scaffold projects, modify existing apps, create and update components, and ask documentation questions for Ignite UI for Angular. Learn the setup options for VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients. +_keywords: Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, agent, GitHub Copilot, Cursor, Claude, JetBrains +_language: en +_license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai/cli-mcp" +namespace: Infragistics.Controls +mentionedTypes: [] +last_updated: "2026-04-21" +--- + + + +# Ignite UI CLI MCP + +

The Ignite UI CLI MCP is a Model Context Protocol (MCP) server that enables AI assistants to scaffold projects, modify existing apps, create and update components, and answer documentation questions for Ignite UI for Angular applications. Connect the Ignite UI CLI MCP to your editor, GitHub repository, or desktop AI client and describe what you want - the assistant uses the CLI tools for you.

+ +
+ +## Overview + +Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside Ignite UI Theming MCP - CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session. + +The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and writes the initial MCP configuration for VS Code. You can also start from an empty folder and let the assistant create the project through MCP, or connect MCP to a project that already exists. + +**Example prompts to try once connected:** + +> _"Create a new Ignite UI for Angular project in this folder, use the recommended defaults, and add a starter dashboard page with sample data."_ + +> _"Add a new grid page to this project, wire it to sample data, and keep the current navigation structure."_ + +> _"What properties and events does the combo component expose, and which ones are most useful for a searchable dropdown?"_ + +> _"Update the existing project to add a side navigation layout and preserve the current pages and routes."_ + +## Prerequisites + +Before configuring the MCP server, make sure you have: + +- **Node.js** (v18 or later) installed - this provides the `npx` command used to launch the server. +- An **AI client with MCP support** - for example, VS Code with GitHub Copilot, GitHub Copilot cloud agent, Cursor, Claude Desktop, Claude Code, or a JetBrains IDE with the AI Assistant plugin. +- Internet access for `npx` package resolution the first time the server starts. +- One of the following starting points: + - an empty folder for a new project + - a project you created with Ignite UI CLI + - an existing Ignite UI for Angular project you want to continue working on + +If you want theming tools in the same client session and `igniteui-theming` is not already available in your project, run: + +```bash +npm install igniteui-theming +``` + +## Configure Ignite UI CLI MCP for Your AI Client + +The MCP server is launched through `npx`. No separate installation is required beyond Node.js and access to the `igniteui-cli` package. + +The canonical launch command is: + +```bash +npx -y igniteui-cli mcp +``` + +> [!NOTE] +> The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention. + +### Choose a setup path + +You can start with Ignite UI CLI MCP in three ways: + +> **Recommended - CLI first** +> Create the project with Ignite UI CLI first by using `ig new` or the matching `npx --package igniteui-cli igniteui new` command. This is the easiest setup because Ignite UI CLI scaffolds the project, installs the required packages, and writes `.vscode/mcp.json` for VS Code automatically. After that, you only need to review the generated MCP configuration and open the project in your AI client. + +> **Empty folder** +> Start with a completely empty folder, add the MCP configuration manually, and then ask the assistant to create the project through chat. This path is useful when you want MCP to drive the project creation flow from the beginning instead of running the CLI yourself first. + +> **Existing project** +> Add MCP configuration to a project you already have and continue working in the current codebase. Run `ig ai-config` (or `ng generate @igniteui/angular-schematics:ai-config` for Angular projects) to write `.vscode/mcp.json` and copy the Agent Skills into your project automatically. For other AI clients, copy the server entries from the client-specific sections below. + +All three paths use the same MCP servers. The difference is only how the project is prepared before you start prompting: + +- in the **CLI-first** path, Ignite UI CLI creates the project and prepares the first MCP configuration for you +- in the **empty-folder** path, you create the MCP configuration first and let the assistant create the project after that +- in the **existing-project** path, run `ig ai-config` to write `.vscode/mcp.json` and copy the Agent Skills automatically, or add the configuration manually for other clients + +In all cases, once the MCP servers are connected and visible in your AI client, the assistant can keep working in the same session. + +If you are creating a project with Ignite UI CLI first, you can run the CLI in either of these ways: + +- **Global install** + + ```bash + npm install -g igniteui-cli + ``` + + This gives you the `ig` command in any terminal session and is the clearest option if you plan to create and scaffold projects regularly. + +- **Without a global install** + + ```bash + npx --package igniteui-cli igniteui new + ``` + + This runs the CLI through `npx` instead of a global `ig` command. + +For the **CLI-first** path, you can create the project in guided mode or with a direct command. + +Use guided mode when you want the CLI to walk you through the available options: + +```bash +ig new +``` + +Matching `npx` form: + +```bash +npx --package igniteui-cli igniteui new +``` + +Use a direct command when you already know the project settings: + +```bash +ig new my-app --framework=angular --type=igx-ts --template=empty +``` + +Matching `npx` form: + +```bash +npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=empty +``` + +In guided mode, Ignite UI CLI prompts for the project name, framework, template, theme, and whether to add a component or complete the setup. In direct mode, you provide the framework and any supported options in the command itself. + +For more details about project templates, CLI command options, and component scaffolding commands such as `ig add`, see the Ignite UI CLI documentation for Angular. + +### VS Code + +GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Run `ig ai-config` (or `ng generate @igniteui/angular-schematics:ai-config`) from your project root to generate this file automatically. To configure it manually, create or edit `.vscode/mcp.json` in your project root: + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +If you created the project with Ignite UI CLI first, review the generated `.vscode/mcp.json` and confirm that both entries are present. + +Once saved, open the GitHub Copilot chat panel, switch to **Agent** mode, and the Ignite UI CLI MCP tools will be available. + +> [!NOTE] +> MCP support in VS Code requires GitHub Copilot and VS Code 1.99 or later. + +### Cursor + +Cursor supports project-scoped MCP configuration. Create or edit `.cursor/mcp.json` in your project root: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +The servers will be picked up automatically when you open a new Cursor chat session. + +> [!NOTE] +> You can also configure MCP servers globally via **Settings → MCP** in Cursor. + +### Claude Desktop + +Add the servers to your Claude Desktop configuration file: + +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +Restart Claude Desktop after saving. You will see an MCP server indicator (slider icon) in the chat input area, confirming that MCP tools are active. + +### Claude Code + +Claude Code supports MCP servers through its CLI and a project-scoped `.mcp.json` file. To share the configuration with your team, create or edit `.mcp.json` in your project root: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +Alternatively, you can add the servers via the command line for your local environment only: + +```bash +claude mcp add igniteui-cli -- npx -y igniteui-cli mcp +claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp +``` + +Use the `/mcp` command inside Claude Code to verify the servers are connected. + +### JetBrains IDEs + +JetBrains AI Assistant supports MCP servers through the IDE settings: + +1. Open **Settings** (or **Preferences** on macOS). + +2. Navigate to **Tools → AI Assistant → Model Context Protocol (MCP)**. + +3. Click **+ Add** and choose **As JSON** or use the form fields. + +4. Enter the following configuration: + + ```json + { + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } + } + ``` + +5. Click **OK** and restart the AI Assistant. + +> [!NOTE] +> MCP support requires the AI Assistant plugin to be installed and enabled in your JetBrains IDE. + +### Other MCP Clients + +For any other MCP-compatible client, use the STDIO transport with these launch commands: + +```bash +npx -y igniteui-cli mcp +npx -y igniteui-theming igniteui-theming-mcp +``` + +### GitHub + +GitHub Copilot cloud agent supports repository-level MCP configuration. In your repository: + +1. Open the main repository page. +2. Click **Settings**. +3. In the sidebar, go to **Copilot** then **Cloud agent**. +4. Paste your JSON in the **MCP configuration** section. +5. Click **Save**. + +Use a repository configuration like this: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "type": "local", + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"], + "tools": ["*"] + }, + "igniteui-theming": { + "type": "local", + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"], + "tools": ["*"] + } + } +} +``` + +This setup is useful when you want the GitHub cloud agent to use the same CLI MCP and Theming MCP tools directly from the repository context. + +## Available Tools + +The MCP server exposes a set of tools that the AI uses automatically based on your prompts. You never call these tools directly. Describe what you want in chat, and the assistant picks the right one. This table is here so you know what's available before you start. + +To get the live list with current parameters, ask: + +> _"What tools does the Ignite UI CLI MCP provide?"_ + +Here is a brief overview of each tool: + +| Tool | Description | +| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `list_components` | Lists available Ignite UI component docs for a framework. Accepts an optional keyword filter (case-insensitive substring match against name, keywords, and summary). | +| `get_doc` | Gets the full markdown content of a specific component doc by kebab-case name (e.g., `grid-editing`, `combo-overview`). Includes code samples, tables, and links. | +| `search_docs` | Full-text search across Ignite UI docs for a framework. Returns up to 20 ranked results with excerpts. | +| `get_project_setup_guide` | Returns the project setup guide for creating a new project in a specific framework, including CLI steps and install instructions. | +| `search_api` | Searches API entries by keyword or component name across Angular, React, and Web Components. | +| `get_api_reference` | Returns the full API reference for a specific component or class, including properties, methods, and events. Supports Angular, React, and Web Components. | + +At a high level, the CLI MCP tools help with: + +- creating new projects +- working in existing projects +- adding and modifying components +- updating project structure and configuration +- answering documentation and API questions + +> [!NOTE] +> Framework detection uses component prefixes: `for Angular`, `for React`, `for Web Components`, `for Blazor`. The assistant picks up the right framework automatically from your open files or prompt context. + +The theming server adds styling, theme, palette, and token workflows to the same client session. + +## Common Workflows + +The following setup scenarios show when to use each starting point. + +### CLI-first setup + +Create the project with Ignite UI CLI first when you want the fastest guided setup and want `.vscode/mcp.json` generated for you automatically. + +Example scenarios: + +- _"I want to create a new project with Ignite UI CLI first, open the generated project in VS Code, and continue from there with MCP."_ +- _"I already know I want a React project, so I want to create it with the CLI and then use MCP to add pages and components."_ + +### Empty folder setup + +Start from an empty folder when you want the assistant to create the project from chat after you add the MCP configuration yourself. + +Example scenarios: + +- _"I have a completely empty folder and I want the assistant to create the whole project from chat after MCP is connected."_ +- _"I do not want to run Ignite UI CLI manually first. I want MCP to drive the first project creation step."_ + +### Existing project setup + +Connect MCP to an existing project when you want to keep the current codebase and use the assistant for project changes, component work, and documentation questions. + +Example scenarios: + +- _"I already have a project and only want to add MCP so the assistant can help me update pages and components."_ +- _"The project exists already, and I mainly want to ask documentation and API questions while working in the current codebase."_ + +## Troubleshooting + +**`npx` is not recognized** + +Node.js is not installed or is not available in the current terminal environment. Install Node.js from [nodejs.org](https://nodejs.org) and verify with `node --version`. + +**`ig` is not recognized** + +If you want to use the global `ig` command, install Ignite UI CLI first with `npm install -g igniteui-cli`. If you do not want a global install, use the `npx --package igniteui-cli igniteui ...` form instead. + +**The MCP tools do not appear after saving the configuration** + +Reload the workspace, reopen the editor, or restart the AI client. Some clients require a full restart to detect new MCP configuration files. + +**One server fails to start** + +Verify that the configuration content matches the examples exactly, including key names and argument order. + +**The project was created, but the MCP configuration is only available for VS Code** + +Ignite UI CLI writes `.vscode/mcp.json` for the CLI-first path. If you are using Cursor, Claude Desktop, Claude Code, JetBrains, GitHub, or another MCP client, copy the same server entries into that client's configuration format and location. + +**The assistant is working in the wrong folder or cannot find the project files** + +Make sure the AI client is pointed at the project root. If you are using an editor-based client, open the project root folder. If you are using a desktop or chat-first client, make the correct project folder available as the session context. + +**The empty-folder setup does not behave as expected** + +Check that the folder is actually empty before starting. If the folder already contains project files, use the existing-project path instead of treating it as a new empty workspace. + +**The GitHub MCP configuration is rejected** + +Validate that the JSON uses the `mcpServers` structure and that each local server entry includes `type`, `command`, and `args`. If you include the `tools` field, use valid tool names or `["*"]`. + +## Additional Resources + +- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) +- [Ignite UI for Angular Skills](./skills.md) +- [Ignite UI Theming MCP](./theming-mcp.md) + +
+ +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file diff --git a/doc/en/components/ai/maker-framework.md b/doc/en/components/ai/maker-framework.md new file mode 100644 index 000000000..6db76d56e --- /dev/null +++ b/doc/en/components/ai/maker-framework.md @@ -0,0 +1,247 @@ +--- +title: MAKER Framework | Ignite UI AI Orchestration +_description: The MAKER Framework is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated step plans using consensus-based voting across OpenAI, Anthropic, and Google AI providers. +_keywords: {Platform}, {ProductName}, Infragistics, MAKER, multi-agent, AI orchestration, MCP, Model Context Protocol, consensus voting, plan and execute, task decomposition +_language: en +_license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai/maker-framework" +namespace: Infragistics.Controls +mentionedTypes: [] +--- + + + + +# MAKER Framework + +The MAKER Framework (`@igniteui/maker-mcp`) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. MAKER stands for Maximal Agentic decomposition, first-to-ahead-by-K Error correction, and Red-flagging. The framework is based on the research paper _Solving a million-step LLM task with zero errors_ by Cognizant AI Lab. It runs as an MCP server via `npx` from the `@igniteui` GitHub Packages registry and connects to any MCP-compatible AI client through STDIO transport. Once connected, the AI assistant can invoke three tools - `plan`, `execute`, and `plan_and_execute` - to run long-horizon tasks with automatic error detection and correction. + + + +The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.md). MAKER is framework-agnostic - it does not target Angular, React, or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry. + + + +## How MAKER Works + +The MAKER Framework operates in two sequential phases: planning and execution. Each phase uses a dedicated set of internal AI clients and applies the same consensus-based voting mechanism to validate outputs before advancing. + +In the **planning phase**, a planning client proposes batches of steps (configurable batch size, default 3). A separate plan-voting client then runs a "first-to-ahead-by-K" vote: multiple AI agents vote "Yes", "No", or "End" on the proposed steps. A proposal is accepted when one outcome leads the others by K votes. Rejected proposals include the rejection reasons in the next retry, driving continuous refinement until the plan is complete or the retry limit is reached. + +In the **execution phase**, the framework processes the validated step plan in configurable batches. An execution client runs each batch and produces an updated state. An execution-voting client validates the new state against the previous state and the original task, using the same K-margin voting algorithm. Rejected executions retry with feedback. The final accumulated state is the task result. + +The red-flag validation layer operates throughout both phases. Every AI client request is wrapped in a guarded call that runs configurable validators on the response before it enters the voting system. Malformed or too-short responses are retried with the failure message appended to the prompt. Custom validators can be added by implementing `IAIRedFlagValidator`. + +## Install the MAKER MCP Server + +MAKER is published on GitHub Packages under the `@igniteui` scope and requires a one-time registry setup. Run the following command once on your machine: + +```bash +npm config set @igniteui:registry https://npm.pkg.github.com +``` + +Then open `~/.npmrc` (Windows: `%USERPROFILE%\.npmrc`) and add your GitHub Personal Access Token with `read:packages` scope: + +```ini +//npm.pkg.github.com/:_authToken=YOUR_GITHUB_PAT +``` + +After the registry is configured, the MCP server runs via `npx` without a separate global install. The native binary (~50 MB) is downloaded and cached on first run. Subsequent starts are instant. + +## Connect to Your AI Client + +Add the `maker` server entry to the MCP configuration file for your AI client. The `env` block passes your AI provider key; only set keys for the providers you use. + +### VS Code (GitHub Copilot) + +Add to `.vscode/mcp.json` in your workspace: + +```json +{ + "servers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__OpenAI": "" + } + } + } +} +``` + +Switch Copilot Chat to Agent mode and confirm that `plan`, `execute`, and `plan_and_execute` appear in the tools list. + +### Claude Desktop + +1. Open your Claude Desktop configuration file: + - macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` + - Windows: `%APPDATA%\Claude\claude_desktop_config.json` +2. Add the `maker` entry to the `mcpServers` block: + +```json +{ + "mcpServers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__Anthropic": "" + } + } + } +} +``` + +3. Restart Claude Desktop. The first start downloads the native binary (~30 s on a typical connection). + +### Cursor, Claude Code, JetBrains, and Other MCP Clients + +Any client that supports MCP with STDIO transport uses the same `mcpServers` block: + +```json +{ + "mcpServers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__OpenAI": "" + } + } + } +} +``` + +## Configure the MAKER MCP Server + +All MAKER configuration is supplied through environment variables. The naming convention uses double underscore (`__`) as the section separator. Pass variables in the `env` block of your MCP client configuration. + +### AI Provider Keys + +Set at least one provider key. You can set keys for multiple providers simultaneously and assign different providers to different internal clients. + +| Environment Variable | Description | +| ------------------------------------- | ----------------- | +| `Executor__AIProviderKeys__OpenAI` | OpenAI API key | +| `Executor__AIProviderKeys__Anthropic` | Anthropic API key | +| `Executor__AIProviderKeys__Google` | Google AI API key | + +### Select Models per Internal Client + +MAKER uses four internal AI clients: `Planning`, `PlanVoting`, `Execution`, and `ExecutionVoting`. Each client can target a different provider and model. The defaults use `gpt-5.1` on OpenAI for all four clients. + +To mix providers for cost and quality balance, set the `Provider` and `Model` variables per client: + +```json +"env": { + "Executor__AIProviderKeys__OpenAI": "", + "Executor__AIProviderKeys__Anthropic": "", + "Executor__Clients__Planning__Provider": "Anthropic", + "Executor__Clients__Planning__Model": "claude-opus-4-5", + "Executor__Clients__PlanVoting__Provider": "OpenAI", + "Executor__Clients__PlanVoting__Model": "gpt-4.1-mini", + "Executor__Clients__Execution__Provider": "Anthropic", + "Executor__Clients__Execution__Model": "claude-opus-4-5", + "Executor__Clients__ExecutionVoting__Provider": "OpenAI", + "Executor__Clients__ExecutionVoting__Model": "gpt-4.1-mini" +} +``` + +Valid `Provider` values: `OpenAI`, `Anthropic`, `Google`. + +### Connect External MCP Servers + +MAKER can connect to external MCP servers as tool providers, making their tools available to the execution client. Configure each server with a name, description, URL, and optional API key using indexed environment variables: + +```json +"env": { + "Executor__McpServers__0__Name": "igniteui-cli", + "Executor__McpServers__0__Description": "Ignite UI CLI scaffolding and documentation tools", + "Executor__McpServers__0__Url": "https://mcp.example.com/igniteui-cli" +} +``` + +Increment the index (`0`, `1`, `2`, ...) to register additional servers. + +### Tune Batch Size and Voting Threshold + +Each MCP tool call accepts `batchSize` and `k` parameters in natural language. Set them in your prompt when invoking the tools. + +| Parameter | Default | Description | +| ----------- | ------- | ---------------------------------------------------------------------------------------------------------------------- | +| `batchSize` | `3` | Steps proposed or executed per voting round. Lower values give more control; higher values improve throughput. | +| `k` | `10` | Consensus margin threshold. Higher values require stronger agreement across voting agents before a result is accepted. | + +Lower `k` (3-5) for faster, exploratory tasks. Raise `k` (15-20) for critical tasks where correctness is more important than token cost. + +## Available Tools + +The MAKER MCP server exposes three tools to the connected AI agent. + +| Tool | Description | +| ------------------ | ------------------------------------------------------------------------- | +| `plan` | Decompose a task into a validated, ordered step list without executing it | +| `execute` | Execute a step list produced by `plan`, with consensus voting per batch | +| `plan_and_execute` | Plan and execute in one call with live progress events between phases | + +Use `plan` followed by `execute` when you want to inspect and validate the step plan before execution. Use `plan_and_execute` for unattended runs where inspection is not required. + +## Common Workflows + +### One-Shot Task + +Invoke `plan_and_execute` directly with default settings: + +> Use plan_and_execute to write a detailed comparison of REST vs GraphQL for a technical blog post. + +### Inspect the Plan Before Executing + +Use `plan` to review steps, then pass them to `execute`: + +> 1. Use plan to create a plan for migrating a PostgreSQL schema to a multi-tenant design. +> 2. Show me the steps. +> 3. Use execute with those steps to carry out the migration script. + +### High-Confidence Execution for Critical Tasks + +Raise `k` to require stronger consensus: + +> Use plan_and_execute with batchSize=3 and k=15 to review this smart contract for security vulnerabilities. + +### Low-Cost Exploratory Task + +Reduce both parameters to minimize token usage: + +> Use plan_and_execute with batchSize=3 and k=3 to draft a project README for a Node.js CLI tool. + +## Supported Platforms + +The native binary is distributed for four platforms. The correct binary is selected and cached automatically on first run. + +| Platform | Architecture | RID | +| -------- | --------------------- | ----------- | +| Windows | x64 | `win-x64` | +| macOS | x64 (Intel) | `osx-x64` | +| macOS | arm64 (Apple Silicon) | `osx-arm64` | +| Linux | x64 | `linux-x64` | + +ARM Linux is not currently packaged. To request additional platform support, open an issue at [github.com/IgniteUI/MAKER](https://github.com/IgniteUI/MAKER). + +The binary cache location can be overridden with the `MAKER_MCP_CACHE` environment variable. The default cache paths are `%LOCALAPPDATA%\maker-mcp\{version}\{rid}\` on Windows and `~/.cache/maker-mcp/{version}/{rid}/` on macOS and Linux. + +## Additional Resources + + +- [AI-Assisted Development Overview](ai-assisted-development-overview.md) +- [Agent Skills](./skills.md) +- [Ignite UI CLI MCP](./cli-mcp.md) + +- [Ignite UI Theming MCP](./theming-mcp.md) + +
+ +Our community is active and always welcoming to new ideas. + +- [{ProductName} **Forums**]({ForumsLink}) +- [{ProductName} **GitHub**]({GithubLink}) \ No newline at end of file diff --git a/doc/en/components/ai/skills.md b/doc/en/components/ai/skills.md index 789254f0a..f8ee67384 100644 --- a/doc/en/components/ai/skills.md +++ b/doc/en/components/ai/skills.md @@ -8,7 +8,7 @@ mentionedTypes: [] # {ProductName} Agent Skills -{ProductName} ships with **[Agent Skills](https://agentskills.io/)** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) how to work with {ProductName}. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. +{ProductName} ships with **[Agent Skills](https://agentskills.io/)** - structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) how to work with {ProductName}. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. > [!NOTE] > The AI tooling landscape is evolving rapidly. Skill discovery locations and distribution options may change as tools and IDEs are updated. Always consult the official documentation for your specific tool or agent for the latest information. @@ -32,7 +32,7 @@ The skill files live in the [`skills/`]({GithubLink}/tree/master/skills) directo | Skill | Path | Description | |:------|:-----|:------------| -| Components | [`skills/igniteui-react-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-components/SKILL.md) | Identify the right components, install, import, and use them — JSX patterns, event handling, refs, forms, TypeScript | +| Components | [`skills/igniteui-react-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-components/SKILL.md) | Identify the right components, install, import, and use them - JSX patterns, event handling, refs, forms, TypeScript | | Theming & Styling | [`skills/igniteui-react-customize-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-customize-theme/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | | Optimization | [`skills/igniteui-react-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size @@ -172,7 +172,33 @@ For user-level (global) skills available across all projects, use `~/.agents/ski Use one of the options below to download and place the skill files into the appropriate [skill location](#skill-locations) for your AI assistant. -### **Option A — Use the installed npm package** +### **Option A - Use the Ignite UI CLI** + +The `ai-config` command copies skill files from your installed {ProductName} package into `.claude/skills/` and writes the Ignite UI MCP server configuration to `.vscode/mcp.json`. If the files already exist and are up-to-date, the command is a no-op. + + + +**Using Angular Schematics:** + +```bash +ng generate @igniteui/angular-schematics:ai-config +``` + +This also registers the `@angular/cli` MCP server in `.vscode/mcp.json` alongside the Ignite UI servers. + + + +**Using the Ignite UI CLI:** +### **Option A - Use the Ignite UI CLI** + +The `ai-config` command copies skill files from your installed {ProductName} package into `.claude/skills/` and writes the Ignite UI MCP server configuration to `.vscode/mcp.json`. If the files already exist and are up-to-date, the command is a no-op. + + + +**Using Angular Schematics:** + +```bash +ng generate @igniteui/angular-schematics:ai-config If {ProductName} is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: @@ -256,12 +282,12 @@ robocopy node_modules\{PackageCommon}\skills\igniteui-angular-theming .agents\sk -### **Option B — Use the `gemini skills` CLI** +### **Option C - Use the `gemini skills` CLI** The `gemini skills install` command installs skills directly from a Git repository. It supports two scopes: -- **User scope** (default) — installs skills globally for your user account, making them available across all projects. Skills are placed in `~/.gemini/skills/` or `~/.agents/skills/`. -- **Workspace scope** — installs skills locally into the current project directory under `.agents/skills/`, scoping them to that project only. +- **User scope** (default) - installs skills globally for your user account, making them available across all projects. Skills are placed in `~/.gemini/skills/` or `~/.agents/skills/`. +- **Workspace scope** - installs skills locally into the current project directory under `.agents/skills/`, scoping them to that project only. **Install to user scope (default):** @@ -331,7 +357,7 @@ gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui- Once installed, the skill files are available in the respective location and will be automatically discovered by compatible AI assistants. -### **Option C — Use the `npx skills` CLI** +### **Option D - Use the `npx skills` CLI** The `skills` CLI is an interactive tool that downloads and installs skills directly into your project. Run the following command in your project root: @@ -345,7 +371,7 @@ The CLI will guide you through a series of prompts to: 2. Choose the target location for the skill files in your project (e.g. `.agents/skills/`, `.github/skills/`). 3. Download and write the selected skill files automatically. -Once complete, the skills are ready to use — no manual file copying required. +Once complete, the skills are ready to use - no manual file copying required. > **Note:** Requires Node.js and an internet connection. The command fetches the latest skill files from the [IgniteUI/{PackageCommon}]({GithubLink}) repository. @@ -386,6 +412,9 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./ - Getting Started with {ProductName} - Angular Schematics & Ignite UI CLI +- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [Ignite UI Theming MCP](./theming-mcp.md)
Our community is active and always welcoming to new ideas. diff --git a/doc/en/components/ai/theming-mcp.md b/doc/en/components/ai/theming-mcp.md index 7fa0b1852..19e97c2f0 100644 --- a/doc/en/components/ai/theming-mcp.md +++ b/doc/en/components/ai/theming-mcp.md @@ -20,6 +20,15 @@ The server supports all four Ignite UI design systems — **Material**, **Bootst Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** — the server compiles it for you. +The Ignite UI Theming MCP works alongside the Ignite UI CLI MCP. In practice, the Theming MCP handles palettes, themes, tokens, typography, elevations, and styling workflows, while the CLI MCP handles project creation, project modification, component workflows, and documentation-oriented tasks. Most teams will want both servers connected in the same AI client. + + +For a concrete combined workflow after setup, see [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md). + + +For a concrete combined workflow after setup, see [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md). + + **Example prompts to try once connected:** > _"Create a complete Material Design dark theme for my {Platform} app with primary #2563eb and coral secondary #f97316."_ @@ -57,6 +66,16 @@ npx -y igniteui-theming igniteui-theming-mcp > [!NOTE] > The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention. + +### How version resolution works + +Because `igniteui-theming` is a dependency of `igniteui-angular`, it is already present in your `node_modules` after `npm install`. When you run the launch command above, `npx` detects the locally installed copy and runs it directly — no network request is made. This means the MCP server version always stays in sync with the rest of your Ignite UI packages. + +If you run the command outside a project (or before running `npm install`), `npx -y` downloads the **latest** version from npm into a temporary cache instead. The server will still start, but `detect_platform` will return `generic` since there is no `package.json` to inspect. + +Choose your AI client below for the specific configuration steps. + + ### VS Code GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Create or edit `.vscode/mcp.json` in your project root: @@ -167,10 +186,11 @@ JetBrains AI Assistant supports MCP servers through the IDE settings: ### Other MCP Clients -For any other MCP-compatible client, use the STDIO transport with the following command and arguments: +For any other MCP-compatible client, use the STDIO transport with this launch command: -- **Command**: `npx` -- **Arguments**: `-y`, `igniteui-theming`, `igniteui-theming-mcp` +```bash +npx -y igniteui-theming igniteui-theming-mcp +``` ## Customizing AI Behavior with Project Rules @@ -245,6 +265,11 @@ Here is a brief overview of each tool: > [!NOTE] > For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector. + +> [!NOTE] +> If your project uses the licensed `@infragistics/igniteui-angular` package, tell the AI so it can set the `licensed` parameter on palette, theme, and component tools. This adjusts the generated import paths accordingly. + + ## Example Scenarios The following scenarios show what you can ask the AI to do once the MCP server is connected. @@ -255,6 +280,29 @@ The following scenarios show what you can ask the AI to do once the MCP server i The AI will call `create_theme` and return a ready-to-use `styles.scss` file. The generated output will look similar to this: + +```scss +/* styles.scss */ +@use 'igniteui-angular/theming' as *; + +$my-palette: palette( + $primary: #2563eb, + $secondary: #f97316, + $surface: #fff, + $gray: #9e9e9e, +); + +$my-typography: typography( + $font-family: 'Roboto, sans-serif', +); + +@include core(); +@include typography($my-typography); +@include theme($my-palette, $schema: $light-material-schema); +``` + + + ```scss /* styles.scss */ @use 'igniteui-theming' as *; @@ -274,6 +322,7 @@ $my-palette: palette( $type-scale: $material-type-scale ); ``` + ### Dark Mode Variant @@ -283,7 +332,7 @@ $my-palette: palette( > _"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values — create a custom palette."_ -The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. +The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. See [Palettes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/palettes) for more detail on shade generation. ### Component-Level Customization @@ -301,7 +350,7 @@ The AI will call `set_spacing` scoped to the calendar component and `set_size` a **Platform not detected** -If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `igniteui-react`) as a dependency. You can also tell the AI explicitly: _"Use {ProductName}."_ +If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `{PackageCommon}`) as a dependency. You can also tell the AI explicitly: _"Use the {Platform} platform."_ **Luminance warning on colors** @@ -311,9 +360,44 @@ If the AI warns about color luminance, it means the chosen color is too light or For light themes use a light surface (e.g., `#fafafa`). For dark themes use a dark surface (e.g., `#121212`). Mismatched surface colors cause the AI to emit a warning. + +**Generated Sass does not compile** + +Ensure `igniteui-angular` and `igniteui-theming` are installed: + +```bash +ng add igniteui-angular +``` + +Also confirm that `core()` is called before any other theming mixin in your `styles.scss`. See [Theming with Sass]() for the correct file setup. + + ## Additional Resources + +- [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md) + + +- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) - [{ProductName} Skills](./skills.md) +- [Ignite UI CLI MCP](./cli-mcp.md) + +- [MAKER Framework](./maker-framework.md) + + + +
+ +Our community is active and always welcoming to new ideas. + - [{ProductName} **Forums**]({ForumsLink}) - [{ProductName} **GitHub**]({GithubLink}) diff --git a/doc/en/components/general-changelog-dv-react.md b/doc/en/components/general-changelog-dv-react.md index e0258e929..a8a134f00 100644 --- a/doc/en/components/general-changelog-dv-react.md +++ b/doc/en/components/general-changelog-dv-react.md @@ -495,7 +495,8 @@ Please note that the maximum size available for the icons is 24x24. You can prov |37244 | Excel Library | Custom Data Validation is not working.| ## **{PackageVerChanges-24-2-APR2}** -> [!Note]With 19.0.0 the React product introduces many breaking changes done to improve and streamline the API. Please refer to the full Update Guide. +> [!Note] +> With 19.0.0 the React product introduces many breaking changes done to improve and streamline the API. Please refer to the full Update Guide. [Update Guide](update-guide.md) diff --git a/doc/en/components/general-cli-overview.md b/doc/en/components/general-cli-overview.md index 6d9de4cc8..2f3b92a11 100644 --- a/doc/en/components/general-cli-overview.md +++ b/doc/en/components/general-cli-overview.md @@ -1,137 +1,315 @@ --- -title: {Platform} CLI | Data Visualization Tools and Tables | Infragistics -_description: The {ProductName} toolset has a {Platform} CLI to help you boost productivity and get your project started quickly. Create a {ProductName} application now! -_keywords: {Platform} cli, command line interface, {ProductName}, Infragistics +title: {Platform} CLI - {ProductName} +_description: The {ProductName} CLI scaffolds {Platform} projects, adds pre-configured component views, and connects AI coding assistants via a built-in MCP server. +_keywords: {Platform} cli, command line interface, {ProductName}, Infragistics, mentionedTypes: [] +_license: MIT +last_updated: "2026-04-21" --- + + # Ignite UI CLI for {Platform} -Our CLI tools provide project templates pre-configured for the {ProductName} toolset that help you get your next application off the ground in record time. The Ignite UI CLI is a stand-alone command-line tool for creating and scaffolding your applications for a variety of different frameworks and provides a substantial productivity boost for developers. +The [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) (`igniteui-cli`) is a standalone global command-line tool for creating and scaffolding {Platform} applications with {ProductName}. It provides project templates pre-configured for {ProductName}, a guided step-by-step wizard for first-time setup, non-interactive `new` and `add` commands for scripted workflows, a development server, and a built-in MCP server for connecting AI coding assistants to live {ProductName} documentation. -## Getting Started +The Ignite UI CLI does not replace the build tooling for your framework - projects it creates are standard {Platform} applications that remain fully compatible with their native build commands and configuration after scaffolding. -To get started, install the CLI: + +The Ignite UI CLI does not replace Vite or other React tooling - projects created with the CLI are standard Vite-based React applications and remain fully compatible with npm scripts and Vite commands after scaffolding. + + +## Install the Ignite UI CLI + +Install the Ignite UI CLI globally using npm: ```cmd npm install -g igniteui-cli ``` -The above install command will make the Ignite UI CLI available for creation, scaffolding, and running of your {ProductName} application. +Or, using yarn: + +```cmd +yarn global add igniteui-cli +``` + +Verify the installation: + +```cmd +ig version +``` ## Create a New Project -To create an application that is configured to use the {ProductName} controls using the Ignite UI CLI, you can use the following template in your command line: +The Ignite UI CLI provides two modes for project creation: a guided interactive wizard and a direct command with arguments. + +### Use the guided wizard + +The guided wizard is the recommended starting point for new projects. It prompts you to choose a framework, project type, template, and theme, then scaffolds and commits the project automatically. + +To activate the wizard, run: - ```cmd -ig new "[name_of_project]" --framework=[target_framework] --type=[project_type] +ig ``` -Using the above template, if you wanted to create a **React** application named "My Project" targeting TypeScript, you could write the following command: +or: ```cmd -ig new "My Project" --framework=react --type=igr-ts +ig new ``` -> [!Note] -TypeScript support will be available starting from Ignite UI CLI version 13. +For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md). - +### Create a project directly + + +To create a React project non-interactively, provide `react` as the framework and `igr-ts` as the project type: - ```cmd -ig new "[name_of_project]" --framework=[target_framework] +ig new --framework=react --type=igr-ts --template=top-nav ``` -Using the above template, if you wanted to create a **Web Components** application named "My Project" you could write the following command: +The following project templates are available for React: + +| Template ID | Description | +| :---------- | :------------------------------------------------- | +| empty | Minimal project structure with no predefined views | +| base | Project structure with a home page | +| top-nav | Project structure with a top navigation bar | + + + + +To create a Web Components project non-interactively, provide `webcomponents` as the framework and `igc-ts` as the project type: ```cmd -ig new "My Project" --framework=webcomponents +ig new --framework=webcomponents --type=igc-ts --template=side-nav ``` + +The following project templates are available for Web Components: + +| Template ID | Description | +| :---------- | :------------------------------------------------- | +| empty | Minimal project structure with no predefined views | +| base | Project structure with a home page | +| side-nav | Project structure with a side navigation drawer | + -## Adding Components +The following arguments are available when creating a project: -Once you have created a project, you can then add additional component templates using **ig add** at any point. Running this command without any parameters will guide you through the available templates by using a keyboard navigation CLI to add the control of your choosing. +| Argument | Alias | Description | +| :--------------- | :----- | :-------------------------------------------------------------------------------------------------------------------- | +| `name` | `-n` | The name of the application. The application is created inside a directory with the same name. | +| `--framework` | `-f` | The framework for the generated project. Default: `jquery`. Supported: `jquery`, `angular`, `react`, `webcomponents`. | +| `--type` | `-t` | The project type for the selected framework. Use `igr-ts` for React or `igc-ts` for Web Components. | +| `--template` | | The project template to use. See the template tables above for available options per framework. | +| `--skip-git` | `--sg` | Skips automatic Git repository initialization. Uses the global `skip-git` config value if omitted. | +| `--skip-install` | `--si` | Skips npm package installation on project creation. | + +## Add a Component Template + +Once you have created a project, you can add additional component views at any point. Running `ig add` without arguments launches an interactive template browser: ```cmd ig add ``` -Alternatively, you can simply run the **ig list** command to get a full list of supported templates in the current project you have created. +To add a specific component template directly, provide the template ID and a name for the new component: ```cmd -ig list +ig add [component-template] [component-name] ``` -After running **ig list** and you find the component template you would like to add, you can do so quickly by following this template in your command line: +For example, to add a data grid component named `MyGrid`: ```cmd -ig add [component_template] [component_name] +ig add grid MyGrid ``` -The "component_template" above will generally match an {ProductName} component ("grid", "category-chart", "linear-gauge", etc.). - -For example, if you wanted to add a data grid templated component named "MyGridComponent" to your application, you could run the following: +To list all available templates in the current project: ```cmd -ig add grid MyGridComponent +ig list ``` -> NOTE: Your routing file will be updated with the path to the page with the new component - in that case `/my-grid-component`. You can use it to manually navigate to the newly generated page. +For a guided walkthrough of the component addition wizard, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md#add-view). + +> [!NOTE] +> Your routing file will be updated with the path to the newly generated page. For example, a component named `MyGrid` will be navigable at `/my-grid`. + + +To see all component templates available for the current project, run `ig list`. The list is project-aware and reflects the selected framework and type. + -Currently the CLI can be used with the following Web Components: - -| Name | Component Template | -| ------------------|---------------------| -| Avatar | avatar | -| Card | card | -| Badge | badge | -| Button | button | -| Checkbox | checkbox | -| Form | form | -| Icon | icon | -| Icon Button | icon-button | -| Input | input | -| Radio Group | radio-group | -| Switch | switch | -| Calendar | calendar | -| List | list | -| Navbar | navbar | -| Ripple | ripple | -| Pie Chart | pie-chart | -| Dock Manager | dock-manager | +The following component templates are available for Web Components: + +| Name | Component Template | +| :---------------- | :----------------- | +| Accordion | accordion | +| Avatar | avatar | +| Badge | badge | +| Banner | banner | +| Button | button | +| Button Group | button-group | +| Calendar | calendar | +| Card | card | +| Checkbox | checkbox | +| Chip | chip | +| Circular Progress | circular-progress | +| Date Picker | date-picker | +| Date Time Input | date-time-input | +| Divider | divider | +| Dock Manager | dock-manager | +| Dropdown | dropdown | +| Expansion Panel | expansion-panel | +| Financial Chart | financial-chart | +| Form | form | +| Grid | grid | +| Icon | icon | +| Icon Button | icon-button | +| Input | input | +| Linear Gauge | linear-gauge | +| Linear Progress | linear-progress | +| List | list | +| Navbar | navbar | +| Pie Chart | pie-chart | +| Radial Gauge | radial-gauge | +| Radio Group | radio-group | +| Rating | rating | +| Ripple | ripple | +| Slider | slider | +| Switch | switch | +| Tabs | tabs | +| Text Area | text-area | +| Tree | tree | + -## Build and Run the Application +## Run the Application -In order to build and run the {ProductName} application, you can call the **ig build** and **ig run** commands: +The `start` command builds the application, starts a local web server, and opens it in your default browser: ```cmd -ig build -ig run +ig start ``` + ### Using Vite -The React application generated by Ignite UI CLI utilizes Vite as the build tool. Vite offers fast development and production builds, providing an efficient development experience with features like hot module replacement (HMR) during development. +The React application generated by Ignite UI CLI uses [Vite](https://vitejs.dev/) as the build tool and supports fast development builds and hot module replacement (HMR). To start the Vite development server directly without the CLI wrapper: + +```bash +npm run dev +``` +The Vite dev server starts on `http://localhost:5173` by default. Use `ig start` when you want the CLI to handle building and launching in a single command. + + +## AI Assistant Integration (MCP) + +The Ignite UI CLI includes a built-in **MCP (Model Context Protocol) server** that connects AI coding assistants - GitHub Copilot, Claude, Cursor, and others - directly to {ProductName} component documentation and API references. Once configured, your AI assistant can scaffold projects, add and modify components, search docs, look up API details, and generate accurate {ProductName} code without leaving your editor. + +The CLI MCP server starts via `npx` without requiring a global install: + +```bash +npx -y igniteui-cli mcp +``` + +Or, if you have Ignite UI CLI installed globally: + +```bash +ig mcp +``` + + + +### Quick Setup with `ig ai-config` + +To configure {ProductName} Agent Skills and both MCP servers in a single step, run the following from your project root after installing {ProductName} packages: + +```cmd +npx igniteui-cli ai-config +``` + +If you have the CLI installed globally: + +```cmd +ig ai-config +``` + +This copies {ProductName} Agent Skills into `.claude/skills/` and rites the full Ignite UI MCP server configuration, including the CLI and Theming servers, to `.vscode/mcp.json`. If the files already exist and are up-to-date, the command is a no-op. For AI clients other than VS Code, use the manual configuration below. + +For full setup instructions across all AI clients and Agent Skills wiring, see [Agent Skills](./ai/skills.md) and [Ignite UI CLI MCP](./ai/cli-mcp.md). + + + +Configure your AI client to use the CLI MCP server manually. Most teams connect both the CLI MCP and the Theming MCP together - CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, and design tokens. + +**VS Code** - create or edit `.vscode/mcp.json` in your project root: + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +**Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients:** + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +For per-client setup guides (VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains) and a full description of available tools, see [Ignite UI CLI MCP](./ai/cli-mcp.md). For an end-to-end walkthrough using both MCP servers, see [Build an App End-to-End with CLI MCP and Theming MCP](./general-how-to-mcp-e2e.md). + + + ## Ignite UI CLI Commands -A full list of the available Ignite UI CLI commands and their usage (like passing flags, etc.), can be found at the [Ignite UI CLI wiki pages](https://github.com/IgniteUI/igniteui-cli/wiki): - -| Command | Alias | Description | -| --- | --- | --- | -| [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server and opens the application in the default browser. -| [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory -| [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | Generates a new custom template for supported frameworks and project types -| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | Lists the available commands and provides a brief description of what they do. -| [ig config](https://github.com/IgniteUI/igniteui-cli/wiki/config) | | Performs read and write operation on the Ignite UI CLI configuration settings. -| [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | Searches the Infragistics knowledge base for information about a given search term -| [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists all templates for the specified framework and type. When you run the command within a project folder it will list all templates for the project's framework and type, even if you provide different ones. -| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. -| [ig version](https://github.com/IgniteUI/igniteui-cli/wiki) | -v | Shows Ignite UI CLI version installed locally, or globally if local is missing | \ No newline at end of file +A full list of available Ignite UI CLI commands is maintained on the [Ignite UI CLI wiki](https://github.com/IgniteUI/igniteui-cli/wiki): + +| Command | Alias | Description | +| :-------------------------------------------------------------------- | :---- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server, and opens it in the default browser. | +| [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory. | +| [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | Generates a new custom template for supported frameworks and project types. | +| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | Lists available commands with brief descriptions. | +| [ig config](https://github.com/IgniteUI/igniteui-cli/wiki/config) | | Reads and writes Ignite UI CLI configuration settings. | +| [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | Searches the Infragistics knowledge base for a given term. | +| [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists available templates for the project's framework and type. When run inside a project folder, uses the project's framework and type regardless of provided arguments. | +| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. | +| ig upgrade-packages | | Upgrades Ignite UI packages in the project from Trial to Licensed. | +| ig mcp | | Starts the built-in MCP server for connecting AI coding assistants to {ProductName} component documentation. | +| ig ai-config | | Copies {ProductName} Agent Skills into `.claude/skills/` and writes Ignite UI MCP server configuration to `.vscode/mcp.json`. Run once per project. | +| ig version | -v | Shows the Ignite UI CLI version installed locally, or globally if no local installation is found. | \ No newline at end of file diff --git a/doc/en/components/general-getting-started.md b/doc/en/components/general-getting-started.md index 5805c618e..23ccb52ee 100644 --- a/doc/en/components/general-getting-started.md +++ b/doc/en/components/general-getting-started.md @@ -1,11 +1,13 @@ --- title: Getting Started | {ProductName} | Infragistics -_description: Use Infragistics' {Platform} components to create apps and improve data visualization with the world’s fastest, virtualized, real-time {Platform} data grid and streaming financial and business and financial charts. +_description: Install {ProductName} and render your first component. Covers CLI scaffolding, manual package setup, and AI tooling with Agent Skills and MCP servers. _keywords: {ProductName}, Infragistics, Getting Started -_language: en -mentionedTypes: ["XamBulletGraph", "IgrGrid"] +last_updated: "2025-04-06" +mentionedTypes: [] --- + + # Getting Started With {ProductName} @@ -57,13 +59,20 @@ ig ``` Then choose `React` as the framework and `Ignite UI for React TS` as the project type. Select the `Default Top Navigation` project template, add a specific component/view, or select `Complete & Run`. -For more information about the Ignite UI CLI, see the [CLI overview](general-cli-overview.md). + +Or create a project directly in one command, for example: + +```cmd +ig new --framework=react --type=igr-ts --template=top-nav +``` + +For a step-by-step walkthrough of the wizard, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md). For a full reference of all CLI commands and options, see the [CLI Overview](general-cli-overview.md). If you added a Grid component during the prompts, once the application is running you should see something similar to the following: - +Ignite UI CLI generated grid component ->[!NOTE] +> [!NOTE] > Keep in mind that by default Ignite UI CLI installs the Trial version of Ignite UI for React's Grid component which is under [commercial license](./general-open-source-vs-premium.md#comparison-table-for-all-components). Alternatively, you can use popular frameworks such as Next.js, Vite, or Expo as recommended by the React team. The following are step-by-step instructions for creating React applications with Ignite UI for React using one of these methods. @@ -72,7 +81,7 @@ Alternatively, you can use popular frameworks such as Next.js, Vite, or Expo as ### Creating a New React Project -All popular frameworks for React development provide powerful CLI tools for scaffolding a React application. +Common React toolchains such as Next.js, Vite, and Expo each provide CLI tools for scaffolding a new application. 1 - Open **VS Code**, select **Terminal** menu and then **New Terminal** option. @@ -86,7 +95,7 @@ Then follow the prompts to choose a name for the project, React as the framework ### Adding an Ignite UI React Grid Component -##### Package Installation +#### Package Installation To add the Ignite UI React [**Grid**](grids/data-grid.md) component to the app you need to install the `igniteui-react-grids` package: ```cmd @@ -98,7 +107,7 @@ npm install igniteui-react-grids --save Then we can import the required modules of the components we want to use. Let's do this for the Grid and Column components that we will also use in the template. We also need to import one of the themes. -```ts +```typescript import { IgrGrid, IgrColumn } from 'igniteui-react-grids'; import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; ``` @@ -108,7 +117,7 @@ import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; We are now ready to use the {ProductName} grid component in our markup! Let's go ahead and define it: ```tsx -// App.txs +// App.tsx function App() { const data = [ { name: "John", age: 30 }, @@ -147,13 +156,13 @@ npm run dev After executing this command, your project will be built and served locally on your computer. It will automatically open in your default browser and you will be able to use {ProductName} components in your project. The final result should show a data grid with sample data: - +Ignite UI React grid component rendered with Vite -## Install Ignite UI CLI +## Using Ignite UI CLI To create an application from scratch and configure it to use the Ignite UI Web Components you can use the Ignite UI CLI. The first step is to install the respective package globally as follows: @@ -168,7 +177,14 @@ ig ``` Then choose Web Components as framework, select `Base` project template, add a specific component/view or select `Complete & Run`. -Additionally, you can read more about the Ignite UI CLI in this [topic](general-cli-overview.md). + +Or create a project directly in one command, for example: + +```cmd +ig new --framework=webcomponents --type=igc-ts --template=side-nav +``` + +For a step-by-step walkthrough of the wizard, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md). For a full reference of all CLI commands and options, see the [CLI Overview](general-cli-overview.md). ## Install Polyfills @@ -180,7 +196,7 @@ npm install @webcomponents/custom-elements Then import the web component polyfills into index.js: -```ts +```typescript import '@webcomponents/custom-elements/custom-elements.min'; import '@webcomponents/custom-elements/src/native-shim.js'; ``` @@ -194,7 +210,7 @@ npm install igniteui-webcomponents Next you will need to import the components that you want to use in your `index.ts` file. You could import one or more components using the `defineComponents` function like this: -```ts +```typescript import { defineComponents, IgcAvatarComponent, IgcBadgeComponent } from 'igniteui-webcomponents'; defineComponents(IgcAvatarComponent, IgcBadgeComponent); @@ -202,18 +218,18 @@ defineComponents(IgcAvatarComponent, IgcBadgeComponent); You could also import all of the components using the `defineAllComponents` function: -```ts +```typescript import { defineAllComponents } from 'igniteui-webcomponents'; defineAllComponents(); ``` -> [!Note] +> [!NOTE] > Importing all of the components will increase the bundle size of your application. That's why we recommend you to import only the components that you are actually using. The last step is to import the necessary CSS for our components so that they are styled properly: -```ts +```typescript import 'igniteui-webcomponents/themes/light/bootstrap.css'; ``` @@ -252,7 +268,7 @@ npm init -y npm install webpack webpack-cli --save-dev ``` -> [!Note] +> [!NOTE] > Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. 5 - Open the project in **VS Code** @@ -286,7 +302,7 @@ code . }, ``` -> [!Note] +> [!NOTE] > This script will use webpack to bundle the **index.js** file into another file called **index.bundle.js** and place it into a folder named **dist**. > > If a **JavaScript heap out of memory** issue occurs while building you can increase the heap size by using this build command instead: @@ -309,7 +325,7 @@ npm install @webcomponents/custom-elements 3 - Import the web component polyfills into **index.js** -```ts +```typescript import '@webcomponents/custom-elements/custom-elements.min'; import '@webcomponents/custom-elements/src/native-shim.js'; ``` @@ -327,7 +343,7 @@ npm install lit-html 2 - Import the Geographic Map modules and **ModuleManager** in **index.js** file: -```ts +```typescript import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps'; import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts'; // module manager for registering the modules @@ -336,7 +352,7 @@ import { ModuleManager } from 'igniteui-webcomponents-core'; 3 - Register the Geographic Map modules using the **ModuleManager** -```ts +```typescript ModuleManager.register( IgcGeographicMapModule, IgcDataChartInteractivityModule @@ -360,7 +376,7 @@ ModuleManager.register( npm run build ``` -> [!Note] +> [!NOTE] > This command will run the build script we created earlier. The build script will generate a file named **index.bundle.js** in a folder named **dist** 2 - Add the **index.bundle.js** script to the end of **body** element in **index.html** file. @@ -376,14 +392,12 @@ npm run build 3 - To run the project, launch a local development server. In this example, we are using Live Server. Right-click within the editor of **index.html** and select **Open with Live Server** - -> [!Note] +> [!NOTE] > Live Server is an extension to Visual Studio Code that allows you to launch a local development server with live reload feature for static & dynamic pages. This extension can be installed via the Visual Studio Code Extensions tab, or by downloading it from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). 4 - Navigate to the **index.html** using a web browser on your local server. The final result should show interactive map of the world: - `sample="/maps/geo-map/display-osm-imagery", height="750", alt="{Platform} Overview Example"` @@ -421,15 +435,42 @@ This will automatically install packages for {ProductName}, along with all of th + + +## Upgrade from Trial to Licensed + +The Ignite UI CLI installs the trial version of {ProductName} by default. To upgrade from the trial package to the licensed version, run the upgrade command in your project root: + +```bash +ig upgrade-packages +``` + +You will be prompted to log in to the Infragistics private npm registry if not already configured. For details on the license model, see [License FAQ and Installation](./general-licensing.md) and [Open Source vs Premium](./general-open-source-vs-premium.md). + + + + + +## AI-Assisted Development + +Ignite UI provides a three-part AI toolchain - **Agent Skills**, the **Ignite UI CLI MCP server**, and the **Ignite UI Theming MCP server** - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Once connected, your AI assistant can scaffold projects, add and modify components, answer documentation questions, and generate accurate {ProductName} code without leaving your editor. + +Run `ig ai-config` from your project root to copy {ProductName} Agent Skills and write the Ignite +UI MCP server configuration to `.vscode/mcp.json` in a single step. + +For an overview of all three layers and setup instructions, see [AI-Assisted Development with Ignite UI](./ai/ai-assisted-development-overview.md). For the full CLI MCP client setup guide, see [Ignite UI CLI MCP](./ai/cli-mcp.md). For an end-to-end walkthrough using both MCP servers, see [Build an App End-to-End with CLI MCP and Theming MCP](./general-how-to-mcp-e2e.md). + + + -# {ProductName} Packages Overview +## {ProductName} Packages Overview {ProductName} is a complete set of UI widgets, components, and UI kits for design tools and supporting services for Web Components. Designed to enable developers to build the most modern, high-performance HTML5 and JavaScript apps for modern desktop browsers, mobile experiences, and progressive web apps (PWAs) targeting the browsers web components APIs. -# {ProductName} Packages Overview +## {ProductName} Packages Overview {ProductName} is a comprehensive suite of UI components, design toolkits, and supporting services for React. Built to empower developers to create modern, high-performance React applications for desktop browsers, mobile experiences, and progressive web apps (PWAs), {ProductName} leverages the latest React best practices and APIs. @@ -455,11 +496,11 @@ The {ProductName} [Geographic Map](geo-map.md) component brings the ability to v -## Getting Started With {ProductName} +# Getting Started With {ProductName} This topic provides step-by-step instructions for creating Blazor Server applications with Ignite UI for Blazor using Visual Studio. -### Create a New Blazor Server Project +## Create a New Blazor Server Project The steps below describe how to create a new Blazor Server project. If you want to add Ignite UI for Blazor to an existing application, go to the [**Install Ignite UI for Blazor Package**](#install-ignite-ui-for-blazor) section. Start Visual Studio 2022 and click **Create a new project** on the start page, select the **Blazor Server App** template, and click **Next**. @@ -474,7 +515,7 @@ Specify additional project options, and click **Create** new-blazor-info-server -### Install Ignite UI for Blazor +## Install Ignite UI for Blazor Ignite UI for Blazor is delivered via NuGet packages. To use the Ignite UI for Blazor components in your Blazor applications, you must first install the appropriate NuGet packages. @@ -482,9 +523,9 @@ In Visual Studio, open the NuGet package manager by selecting **Tools** → **Nu For more information on installing Ignite UI for Blazor using NuGet, read the [Installing Ignite UI for Blazor](general-installing-blazor.md) topic. -### Register Ignite UI for Blazor +## Register Ignite UI for Blazor -#### .NET 6 and Later Applications +### .NET 6 and Later Applications 1 - Open the **Program.cs** file and register the Ignite UI for Blazor Service by calling **builder.Services.AddIgniteUIBlazor** function: @@ -521,7 +562,7 @@ var app = builder.Build(); ``` -#### .NET 5 Applications +### .NET 5 Applications 1 - Open the **Startup.cs** file and register the Ignite UI for Blazor Service by calling **services.AddIgniteUIBlazor()**: @@ -554,7 +595,7 @@ public void ConfigureServices(IServiceCollection services) ``` -### Add Ignite UI for Blazor Component +## Add Ignite UI for Blazor Component Add an Ignite UI for Blazor component to your razor page: @@ -582,4 +623,4 @@ Build and run the Blazor app. getting-started-blazor-card - \ No newline at end of file + diff --git a/doc/en/components/general-how-to-mcp-e2e.md b/doc/en/components/general-how-to-mcp-e2e.md new file mode 100644 index 000000000..2c6ab0590 --- /dev/null +++ b/doc/en/components/general-how-to-mcp-e2e.md @@ -0,0 +1,278 @@ +--- +title: Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP - {ProductName} +_description: Follow an end-to-end {ProductName} workflow with Ignite UI CLI MCP and Ignite UI Theming MCP start CLI-first, connect both MCP servers, create or extend the app through chat, ask documentation questions, and apply a custom theme. +_keywords: {Platform}, {ProductName}, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, workflow, theming, prompt +_language: en +_license: MIT +_canonicalLink: "{environment:dvUrl}/components/general-how-to-mcp-e2e" +namespace: Infragistics.Controls +mentionedTypes: [] +--- + +# Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP + +

Ignite UI CLI MCP and Ignite UI Theming MCP work together to let an AI assistant scaffold, extend, and theme an {ProductName} application through chat prompts. CLI MCP handles project creation, component work, and documentation questions. Theming MCP handles palettes, themes, tokens, and styling workflows. This topic shows the full process in one clear flow.

+ +
+ +## How CLI MCP and Theming MCP Divide Responsibilities + +CLI MCP and Theming MCP are two separate STDIO-transport MCP servers with distinct, non-overlapping responsibilities in an Ignite UI for Angular development workflow. + +| Concern | Server | +| ------------------------------------------------ | ----------- | +| Create and scaffold project structure | CLI MCP | +| Add or update {}components | CLI MCP | +| Query component APIs and documentation | CLI MCP | +| Generate color palettes and shade variations | Theming MCP | +| Create and apply global theme configurations | Theming MCP | +| Generate component-level design tokens | Theming MCP | +| Adjust spacing, sizing, and border-radius | Theming MCP | + +Neither server executes steps autonomously - the AI assistant invokes MCP tools only in response to your prompts. CLI MCP does not generate or modify theme or Sass files. Theming MCP does not scaffold components, modify application logic, or answer documentation questions. Both servers require an MCP client that supports STDIO transport; they cannot be used from a browser-only chat interface. + +## What You Need + +Before you start, make sure you have: + +- **Node.js** installed so `npx` is available +- a supported AI client with MCP support +- internet access for `npx` package resolution on first use +- a folder for the project + +This walkthrough works best with a **CLI-first** setup because Ignite UI CLI scaffolds the project and prepares the first MCP configuration for VS Code automatically. + +If you still need the detailed setup reference for each client, see [Ignite UI CLI MCP](ai/cli-mcp.md) and [Ignite UI Theming MCP](ai/theming-mcp.md). + +## Step 1: Start with Ignite UI CLI + +The recommended starting point is to create the project with Ignite UI CLI first. + +You can run Ignite UI CLI in either of these ways: + +### Global install + +```bash +npm install -g igniteui-cli +``` + +This gives you the `ig` command in any terminal session. + +### Without a global install + +```bash +npx ig new +``` + +This runs the CLI through `npx` instead of a global `ig` command. + +You can use **guided mode** if you want the CLI to walk you through the options: + +```bash +ig new +``` + +Matching `npx` form: + +```bash +npx ig new +``` + +You can also use a direct command when you already know the project settings. + + +For React: + +```bash +ig new my-app --framework=react +``` + +Matching `npx` form: + +```bash +npx ig new my-app --framework=react +``` + + + +For Web Components: + +```bash +ig new my-app --framework=webcomponents +``` + +Matching `npx` form: + +```bash +npx ig new my-app --framework=webcomponents +``` + + +What happens next: + +- Ignite UI CLI creates the project structure +- the required project packages are installed +- for the CLI-first path, VS Code also gets an initial `.vscode/mcp.json` + +## Step 2: Connect CLI MCP and Theming MCP + +After the project is created, make sure both MCP servers are available in your AI client. + +### VS Code + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +### Cursor, Claude Desktop, Claude Code, JetBrains, and Other MCP Clients + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +After saving the configuration, reopen or restart the AI client and confirm that both `igniteui-cli` and `igniteui-theming` are available. + +## Step 3: Let the Assistant Review the Project + +Once both MCP servers are running, open a new chat and start by giving the assistant project-level context. + +Useful prompts: + +> _"Review this project and explain the current structure before we start adding features."_ + +> _"Tell me what was created, what the main entry points are, and where new pages should be added."_ + +What happens next: + +- CLI MCP inspects the generated or existing project +- the assistant summarizes the structure +- you now have a shared starting point for the next steps + +## Step 4: Add a Real Feature Through Chat + +After the project structure is clear, ask for a concrete feature. + +Example prompt: + +> _"Add an Orders page with an {ProductName} grid. Include columns for Order ID, Customer Name, Order Date, and Total Amount, and bind the grid to sample data."_ + +Follow-up prompt: + +> _"Enable filtering, sorting, and paging on the Orders grid, and keep the page layout consistent with the rest of the app."_ + +What happens next: + +- CLI MCP adds or updates the right page +- the assistant creates or updates the component code +- the feature is integrated into the existing app structure + +You can continue with smaller refinements: + +> _"Add a simple toolbar above the grid and keep the layout compact."_ + +## Step 5: Ask Documentation Questions in the Same Session + +You do not need to leave the conversation to look up component APIs. + +Example prompts: + +> _"What filtering options does the {Platform} grid support, and which ones are the best fit for a simple orders table?"_ + +> _"What events does the combo component expose, and which one should I use for selection changes?"_ + +> _"Which {ProductName} component is the best fit for a side navigation layout, and why?"_ + +What happens next: + +- CLI MCP answers the question using documentation-aware tools +- you can immediately follow with an implementation request + +For example: + +> _"Apply the recommended filtering approach to the current Orders grid."_ + +## Step 6: Apply a Custom Theme + +Once the app structure and main feature are in place, switch to Theming MCP in the same chat. + +Example prompt: + +> _"Apply a professional theme to the app. Use a deep blue primary color, a warm amber secondary color, and keep the spacing compact."_ + +What happens next: + +- Theming MCP generates the palette and theme configuration +- the assistant updates the right theme or styles files +- the app styling stays aligned with the current structure + +You can refine the theme further with more targeted prompts: + +> _"Make the grid header use the primary color, increase the row height slightly, and keep the rest of the page visually clean."_ + +> _"Show me the generated primary and secondary palette shades before you refine the grid styling."_ + +## Step 7: Continue Iterating + +The strongest part of this workflow is that you can keep moving between project work, documentation questions, and theming in one conversation. + +Example prompts: + +> _"Keep the current Orders page structure, but simplify the layout and make the filter area more compact."_ + +> _"Use the current theme, but make the dashboard cards and grid spacing more consistent with the rest of the app."_ + +> _"Review the generated files and explain the main project, component, and theme changes you made."_ + +What happens next: + +- CLI MCP handles project and component refinements +- Theming MCP handles theme and token refinements +- the assistant keeps the whole workflow connected end to end + +## Topic Takeaways + +This workflow works well when you want to keep project setup, component work, documentation lookups, and theming in one chat session. + +Use it when: + +- you want to start from a real project scaffold instead of isolated code snippets +- you expect to alternate between implementation and documentation questions +- you want project structure and visual styling to evolve together + +In practice, the most effective pattern is to use CLI MCP for project and component changes, pause for documentation questions when needed, and then use Theming MCP to refine the result without leaving the same conversation. + +## Related Topics + +- [AI-Assisted Development with Ignite UI](ai/ai-assisted-development-overview.md) +- [{ProductName} Skills](ai/skills.md) +- [Ignite UI CLI MCP](ai/cli-mcp.md) +- [Ignite UI Theming MCP](ai/theming-mcp.md) + +
+ +Our community is active and always welcoming to new ideas. + +- [{ProductName} **Forums**]({ForumsLink}) +- [{ProductName} **GitHub**]({GithubLink}) diff --git a/doc/en/components/general-step-by-step-guide-using-cli.md b/doc/en/components/general-step-by-step-guide-using-cli.md new file mode 100644 index 000000000..363b7a39f --- /dev/null +++ b/doc/en/components/general-step-by-step-guide-using-cli.md @@ -0,0 +1,131 @@ +--- +title: Step-by-Step Guide Using Ignite UI CLI | {ProductName} | Infragistics +_description: Walk through the Ignite UI CLI interactive wizard to create a new {Platform} project, choose a template and theme, and add {ProductName} component views. +_keywords: {Platform} cli, ignite ui cli, {ProductName}, scaffolding, step-by-step, Infragistics +mentionedTypes: [] +last_updated: "2025-04-08" +--- + + + + + +# Step-by-Step Guide Using Ignite UI CLI + +The Ignite UI CLI step-by-step mode is an interactive wizard that guides you through project creation, template selection, theming, and component view addition for {ProductName} projects. It covers the same operations as the non-interactive `ig new` and `ig add` commands but prompts you at each step rather than requiring all arguments upfront. + +The step-by-step mode does not support scripted or non-interactive use - for that, use the `ig new` and `ig add` commands with explicit arguments. The wizard relies on `Inquirer.js`; see [supported terminals](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) for compatibility. For the full CLI reference, see [Ignite UI CLI Overview](general-cli-overview.md). + +To activate the wizard, run: + +```cmd +ig +``` + +or: + +```cmd +ig new +``` + +## Create a New Project + +The wizard walks through project naming, framework and type selection, template choice, and theming in sequence. Each step displays its options as an interactive list - navigate with the arrow keys and confirm with ENTER. + +### Enter a project name + +First, you will be prompted to enter a name for your application. The project is created inside a directory with the same name. + +### Select a framework + +Navigate through the options using the arrow keys and press ENTER to confirm: + + +Select **React** to scaffold a project pre-configured for {ProductName}. + + + +Select **Web Components** to scaffold a project pre-configured for {ProductName}. + + +### Select a project type + + +Select **Ignite UI for React TS** as the project type. + + + +Select **Ignite UI for Web Components TS** as the project type. + + +### Select a project template + +Choose one of the available project templates. Navigate through the options using the arrow keys and press ENTER to confirm: + + +| Template | Description | +| :--------------- | :-------------------------------------------------- | +| Empty | Minimal project structure with no predefined views | +| Base | Project structure with a home page | +| Top Navigation | Project structure with a top navigation bar | + + + +| Template | Description | +| :--------------- | :-------------------------------------------------- | +| Empty | Minimal project structure with no predefined views | +| Base | Project structure with a home page | +| Side Navigation | Project structure with a side navigation drawer | + + +### Select a theme + +Choose a theme for your application: + +- The **default** option includes a pre-compiled CSS file with the default {ProductName} theme. +- The **custom** option generates a Sass-based color palette and theme configuration using the [Theming API](./themes/overview.md). + +### Complete or continue + +After completing the above steps, the project structure is generated, a Git repository is initialized, and the project is committed. You will then be asked whether to complete the process or add a new view to your application. + +## Add View + +The Ignite UI CLI supports multiple component templates that can be added to an existing project. This mode is available either as a continuation of project creation or inside an existing project using: + +```cmd +ig add +``` + +You will be provided with a list of available component templates, grouped by category. Use the arrow keys to navigate through the groups and ENTER to select. For some templates, such as `Custom Grid`, you will be provided with a list of optional features that can be toggled on or off with the SPACE key before confirming your selection. + +After selecting a group, choose a specific template from the list and enter a name for the new component. If you choose to add a scenario template, you will also be presented with a list of available scenario templates. + +After adding a template, you will be asked whether to add more views or complete the process. On completion, any remaining package dependencies are installed and the application is built and opened in your default browser. + +To add more views to a project later without the wizard, use the direct `add` command: + +```cmd +ig add [template] [name] +``` + +For example: + +```cmd +ig add grid MyGrid +``` + +> [!NOTE] +> Your routing file will be updated with the path to the newly generated page. For example, a component named `MyGrid` will be navigable at `/my-grid`. + +## Run the Application + +Once your project is complete, run it at any time with: + +```cmd +ig start +``` + +This builds the project, starts a local web server, and opens the application in your default browser. + + diff --git a/doc/en/components/layouts/tile-manager.md b/doc/en/components/layouts/tile-manager.md index 93233a72e..e3164fbcd 100644 --- a/doc/en/components/layouts/tile-manager.md +++ b/doc/en/components/layouts/tile-manager.md @@ -16,7 +16,8 @@ The following {ProductName} Tile Manager Example shows the component in action. `sample="/layouts/tile-manager/overview", height="752", scrollable, alt="{Platform} Tile Manager Example"` -> [!Warning] Due to the iframe permissions policy, the fullscreen button in this example will only work when the example is opened in standalone mode by clicking the 'Expand to fullscreen' button in the top-right corner. +> [!Warning] +> Due to the iframe permissions policy, the fullscreen button in this example will only work when the example is opened in standalone mode by clicking the 'Expand to fullscreen' button in the top-right corner. ## Usage @@ -432,7 +433,8 @@ Resizing in the Tile Manager is a functionality that allows tiles to be resized To ensure smooth resizing, a ghost element is used instead of directly modifying the tile’s dimensions. This element appears on top of the original tile, displaying its current dimensions when resizing begins, and it updates in real time as the user drags any of the resize handles. -> [!Note] If the ghost element exceeds the available grid space, it will automatically adjust to the largest possible span within the grid's limits. +> [!Note] +> If the ghost element exceeds the available grid space, it will automatically adjust to the largest possible span within the grid's limits. The Tile Manager automatically rearranges itself when a tile changes size, ensuring that there is minimal empty space. That's why expanding a tile may push adjacent tiles into new positions, while shrinking creates gaps that other tiles may fill dynamically. This ensures that the Tile Manager stays as compact as possible, without any overlapping tiles, and that all movements remain within the defined grid structure. @@ -499,7 +501,8 @@ You can reorder tiles in the Tile Manager using the drag-and-drop feature. By de - With the `tile` option, you can click and hold anywhere on an individual tile to start dragging it. - With the `tile-header` option, you can only click and hold in the tile's header section to start the dragging process. -> [!Note] While the tile is in maximized or fullscreen state, the tile cannot be dragged. +> [!Note] +> While the tile is in maximized or fullscreen state, the tile cannot be dragged. Similar to resizing, when you initiate the drag-and-drop process, a ghost element appears beneath the tile you’ve grabbed. As you drag the tile, the ghost element moves with it, dynamically reordering the other tiles in real time. This allows you to preview how the tile grid will look when you drop the tile. diff --git a/doc/jp/components/ai/ai-assisted-development-overview.md b/doc/jp/components/ai/ai-assisted-development-overview.md new file mode 100644 index 000000000..6600db420 --- /dev/null +++ b/doc/jp/components/ai/ai-assisted-development-overview.md @@ -0,0 +1,169 @@ +--- +title: Ignite UI を使用した AI 支援開発 - {ProductName} +_description: Ignite UI は、エージェント スキル、Ignite UI CLI MCP サーバー、テーマ設定 MCP サーバーを提供し、Angular、React、Web Components 全体でコンポーネント API、インポート パス、デザイン トークンを AI コーディング アシスタントに正確に提供します。 +_keywords: {Platform}, {ProductName}, Infragistics, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor +_language: ja +_license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview" +namespace: Infragistics.Controls +mentionedTypes: [] +--- + + + + + + +# Ignite UI を使用した AI 支援開発 + +Ignite UI for Angular、React、および Web Components は、3 つのパーツで構成された AI ツールチェーン (エージェント スキル、Ignite UI CLI MCP サーバー、Ignite UI テーマ設定 MCP サーバー) を提供し、コンポーネント API、インポート パス、デザイン トークンを AI コーディング アシスタントに正確に提供します。エージェント スキルは、特定のプロジェクトで AI エージェントが Ignite UI を使用する方法を定義する、開発者が所有する命令パッケージです。CLI MCP サーバーは、Model Context Protocol を介して、Ignite UI CLI のスキャフォールディング、コンポーネント管理、ドキュメント ツールをアクティブな AI エージェント セッションに公開します。テーマ設定 MCP サーバーは、Ignite UI テーマ設定エンジンをクエリ可能なエージェント コンテキストとして公開します。3 つのコンポーネントはすべて、GitHub Copilot、Cursor、Claude Desktop、Claude Code、および JetBrains AI Assistant と連携します。 + +AI ツールチェーンは、CLI MCP とエージェント スキル レイヤーでは現在 Blazor をサポートしていません。Blazor のカバレッジはテーマ設定 MCP のみで提供されます。CLI MCP サーバーは STDIO トランスポートを必要とします。HTTP ベースの MCP クライアントはサポートされていません。エージェント スキルと CLI MCP サーバーは、プロジェクト ファイルを自律的に変更しません。これらはツールと命令をアクティブな AI エージェントに公開し、AI エージェントが開発者のプロンプトに応じて操作を実行します。 + +## AI ツールチェーンの概要 + +Ignite UI の AI ツールチェーンは、独立して使用可能な 3 つのレイヤーで構成されています。各レイヤーは単独で有効化できます。これらは連携して動作するように設計されています。 + +| レイヤー | 提供内容 | オーナー | フレームワーク | +| --- | --- | --- | --- | +| エージェント スキル | 開発者が所有する命令パッケージ: インポート パス、コンポーネント パターン、デシジョン フロー、プロジェクト規則 | 開発者 | Angular、React、Web Components、Blazor | +| CLI MCP サーバー (`igniteui-cli`) | プロジェクト スキャフォールディング、コンポーネント管理、MCP 経由のドキュメントおよび API クエリ | Infragistics | Angular、React、Web Components | +| テーマ設定 MCP サーバー (`igniteui-theming`) | デザイン トークン、パレット定義、CSS 変数生成、MCP 経由のテーマ設定クエリ | Infragistics | Angular、React、Web Components、Blazor | + +CLI MCP サーバーとテーマ設定 MCP サーバーはどちらも `npx` で起動し、STDIO トランスポートを介して MCP 互換クライアントに接続します。エージェント スキルは、プロジェクトに配置されたローカル ファイルで、AI クライアントがディスクから読み取ります。 + +## エージェント スキル + +エージェント スキルは、特定のフレームワーク向けに Ignite UI の使用方法を AI コーディング アシスタントに正確に伝える、構造化された開発者所有のパッケージです。スキル パッケージには、コンポーネント パターン、インポート パス、デシジョン フローを含む `SKILL.md` 命令ファイル、公式の Ignite UI ドキュメントへの参照、スキーマ ファイルや図などのアセットを含めることができます。スキルが AI クライアントでアクティブな場合、エージェントは古い API シグネチャやインポート パスを参照する可能性がある一般的なトレーニング データに頼る代わりに、スキルに従います。 + +Ignite UI は、Angular、React、Web Components、および Blazor 向けの専用スキル パッケージを提供しています。スキル パッケージは開発者が所有します。`SKILL.md` を編集してチームの規則に合わせ、プロジェクト固有のパターンを追加し、内部デザイン システムを参照し、コードベースと並行してパッケージをバージョン管理してください。 + +完全なセットアップ手順と IDE の設定については、「[エージェント スキル](skills.md)」を参照してください。 + +## CLI MCP サーバー + +Ignite UI CLI MCP サーバー (`igniteui-cli`) は、Infragistics が管理する MCP サーバーで、Ignite UI CLI のスキャフォールディングとドキュメント ツールをアクティブな AI エージェント セッションに公開します。接続すると、AI アシスタントは Angular、React、または Web Components プロジェクトを作成し、Ignite UI コンポーネントを追加および変更し、チャット セッション内の自然言語プロンプトでドキュメントおよび API の質問に回答できます。 + +CLI MCP サーバーはグローバル インストールなしで `npx` で起動します: + +```bash +npx -y igniteui-cli mcp +``` + +サーバーは、VS Code with GitHub Copilot、Cursor、Claude Desktop、Claude Code、JetBrains AI Assistant、および STDIO トランスポートをサポートする他の MCP 互換クライアントに接続します。正確な設定形式はクライアントによって異なります。以下の CLI MCP セットアップ ガイドを参照してください。 + +CLI MCP サーバーは Blazor をサポートしていません。コードを自律的に生成しません。ツールを AI エージェントに公開し、開発者のプロンプトに応じて AI エージェントがツールを呼び出します。 + +## テーマ設定 MCP サーバー + +Ignite UI テーマ設定 MCP サーバー (`igniteui-theming`) は、Ignite UI テーマ設定エンジンをクエリ可能なエージェント コンテキストとして公開する別個の MCP サーバーです。デザイン トークン アクセス、パレット定義、CSS カスタム プロパティの生成、WCAG AA コントラスト検証をカバーします。CLI MCP サーバーとはアーキテクチャ的に独立しています。プロジェクト スキャフォールディング ツールを公開せずに AI エージェントにテーマ設定ツールへのアクセスを提供するために、単独で接続できます。 + +テーマ設定 MCP サーバーは `npx` で起動します: + +```bash +npx -y igniteui-theming igniteui-theming-mcp +``` + +テーマ設定 MCP サーバーは、Angular、React、Web Components、および Blazor をサポートしています。Ignite UI のリリースごとに更新されるため、エージェントは常に現在のトークン サーフェスに対して動作します。 + +設定の詳細については、「[テーマ設定 MCP](theming-mcp.md)」を参照してください。 + +## サポートされている AI クライアント + +CLI MCP サーバーとテーマ設定 MCP サーバーは、STDIO トランスポートで MCP をサポートする任意のエディターまたは AI クライアントで動作します。 + +| クライアント | 設定方法 | +| --- | --- | +| VS Code with GitHub Copilot | `.vscode/mcp.json` | +| Cursor | `.cursor/mcp.json` | +| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | +| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | +| Claude Code | `.mcp.json` または Claude Code MCP CLI コマンド | +| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)** | + +エージェント スキルは、`.github/copilot-instructions.md` を介した GitHub Copilot、`.cursorrules` または `.cursor/rules/` を介した Cursor、`.windsurfrules` を介した Windsurf、プロジェクト レベルのプロンプト設定を介した JetBrains AI Assistant と互換性があります。 + +## AI ツールチェーンのセットアップ + +Ignite UI AI ツールチェーンのセットアップは 3 つのステップで行います: フレームワーク用のエージェント スキルの読み込み、CLI MCP サーバーの接続、オプションでテーマ設定 MCP サーバーの接続。3 つのステップはすべて独立しており、任意の順序で実行できます。 + +### ステップ 1 - エージェント スキルの読み込み + +フレームワーク用の Ignite UI スキル パッケージをプロジェクトのエージェント検出パスにコピーします。スキル パッケージは `node_modules/igniteui-{framework}/skills/` のライブラリと一緒に提供されます。クライアントの永続的なセットアップを使用して IDE に接続します。 + +完全なセットアップについては、「[エージェント スキル](skills.md)」を参照してください。 + +### ステップ 2 - CLI MCP サーバーの接続 + +AI クライアントの設定ファイルに `igniteui-cli` MCP サーバー エントリを追加します。クライアントに対応する JSON 構造を使用してください: + +**VS Code (`.vscode/mcp.json`):** + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +**Cursor、Claude Desktop、Claude Code、JetBrains、その他の MCP クライアント:** + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +VS Code、GitHub、Cursor、Claude Desktop、Claude Code、JetBrains、およびその他の MCP 互換クライアントを含む完全なセットアップ ガイドについては、「[CLI MCP](cli-mcp.md)」を参照してください。 + +### ステップ 3 - テーマ設定 MCP サーバーの接続 (オプション) + +`igniteui-cli` と並べて、同じ MCP 設定ファイルに `igniteui-theming` エントリを追加します: + +```json +{ + "servers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +設定の詳細とテーマ設定ワークフローについては、「[テーマ設定 MCP](theming-mcp.md)」を参照してください。 + + +プロジェクト作業、ドキュメントの質問、テーマ設定を 1 つの会話で組み合わせた単一のエンドツーエンドの例については、「[Ignite UI CLI MCP と Ignite UI テーマ設定 MCP を使用したアプリのエンドツーエンド構築](../general-how-to-mcp-e2e.md)」を参照してください。 + + +プロジェクト作業、ドキュメントの質問、テーマ設定を 1 つの会話で組み合わせた単一のエンドツーエンドの例については、「[Ignite UI CLI MCP と Ignite UI テーマ設定 MCP を使用したアプリのエンドツーエンド構築](../general-how-to-mcp-e2e.md)」を参照してください。 + + +## 関連トピック + +- [エージェント スキル](skills.md) - VS Code、Cursor、Windsurf、JetBrains でスキル パッケージを読み込み、接続するための完全なセットアップ ガイド +- [CLI MCP](cli-mcp.md) - Ignite UI CLI MCP の完全なセットアップ ガイド (推奨の CLI ファースト セットアップとクライアント固有の設定を含む) + +- [Ignite UI CLI MCP と Ignite UI テーマ設定 MCP を使用したアプリのエンドツーエンド構築](../general-how-to-mcp-e2e.md) - プロジェクト作業からドキュメントの質問、テーマ設定まで 1 つのチャット セッションで行う具体的な組み合わせワークフロー + + +- [Ignite UI CLI MCP と Ignite UI テーマ設定 MCP を使用したアプリのエンドツーエンド構築](../general-how-to-mcp-e2e.md) - プロジェクト作業からドキュメントの質問、テーマ設定まで 1 つのチャット セッションで行う具体的な組み合わせワークフロー + +- [テーマ設定 MCP](theming-mcp.md) - テーマ設定 MCP サーバーのセットアップとテーマ設定ワークフローの例 diff --git a/doc/jp/components/ai/cli-mcp.md b/doc/jp/components/ai/cli-mcp.md new file mode 100644 index 000000000..50ff3534a --- /dev/null +++ b/doc/jp/components/ai/cli-mcp.md @@ -0,0 +1,471 @@ +--- +title: "{Platform} Ignite UI CLI MCP | Infragistics" +_description: "Ignite UI CLI MCP を AI クライアントに接続して、{ProductName} のプロジェクトのスキャフォールディング、既存アプリの変更、コンポーネントの作成と更新、ドキュメントの質問を行う方法を説明します。VS Code、GitHub、Cursor、Claude Desktop、Claude Code、JetBrains、およびその他の MCP クライアントのセットアップ オプションを説明します。" +_keywords: "{Platform}, {ProductName}, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, agent, GitHub Copilot, Cursor, Claude, JetBrains" +_language: ja +_license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai/cli-mcp" +namespace: Infragistics.Controls +mentionedTypes: [] +--- + +# Ignite UI CLI MCP + +

Ignite UI CLI MCP は、AI アシスタントが {ProductName} アプリケーションのプロジェクトのスキャフォールディング、既存アプリの変更、コンポーネントの作成と更新、ドキュメントの質問を行えるようにする Model Context Protocol (MCP) サーバーです。Ignite UI CLI MCP をエディター、GitHub リポジトリ、またはデスクトップ AI クライアントに接続し、やりたいことを説明するだけで、アシスタントが CLI ツールを使用してくれます。

+ +
+ +## 概要 + +Ignite UI CLI MCP は、AI アシスタントがチャットまたはエージェント モードを介して、Ignite UI CLI のプロジェクト スキャフォールディング、コンポーネント生成、プロジェクト変更、ドキュメント対応ワークフローに直接アクセスできるようにします。サーバーは Ignite UI テーマ設定 MCP と連携します。CLI MCP がプロジェクトとコンポーネントのワークフローを処理し、テーマ設定 MCP がパレット、テーマ、トークン、スタイリングを処理します。ほとんどのチームは、同じ AI クライアント セッションで両方のサーバーを接続します。 + +Ignite UI CLI MCP は Ignite UI テーマ設定 MCP と連携します。実際には、CLI MCP がプロジェクトとコンポーネントのワークフローを処理し、テーマ設定 MCP がパレット、テーマ、トークン、スタイリング ワークフローを処理します。ほとんどのチームは両方のサーバーを接続します。 + +推奨されるセットアップ パスは、最初に Ignite UI CLI から始めることです。このパスはプロジェクトを作成し、必要なパッケージをインストールし、VS Code の初期 MCP 設定を書き込みます。空のフォルダーから始めて MCP を通じてアシスタントにプロジェクトを作成させることも、既に存在するプロジェクトに MCP を接続することもできます。 + + +セットアップ後の完全なビルド フローを確認したい場合は、「[Ignite UI CLI MCP と Ignite UI テーマ設定 MCP を使用したアプリのエンドツーエンド構築](../general-how-to-mcp-e2e.md)」を参照してください。 + + +セットアップ後の完全なビルド フローを確認したい場合は、「[Ignite UI CLI MCP と Ignite UI テーマ設定 MCP を使用したアプリのエンドツーエンド構築](../general-how-to-mcp-e2e.md)」を参照してください。 + + +**接続後に試すプロンプトの例:** + +> _"{Platform} 用 Ignite UI の新しいプロジェクトをこのフォルダーに作成し、推奨されるデフォルト設定を使用して、サンプル データを含むスターター ダッシュボード ページを追加してください。"_ + +> _"このプロジェクトに新しいグリッド ページを追加し、サンプル データに接続し、現在のナビゲーション構造を維持してください。"_ + +> _"コンボ コンポーネントが公開するプロパティとイベントは何ですか？また、検索可能なドロップダウンに最も役立つものはどれですか？"_ + +> _"既存のプロジェクトを更新してサイド ナビゲーション レイアウトを追加し、現在のページとルートを保持してください。"_ + +## 前提条件 + +MCP サーバーを設定する前に、次のものを用意してください: + +- **Node.js** (v18 以降) がインストール済み - これによりサーバーの起動に使用する `npx` コマンドが提供されます。 +- **MCP サポートのある AI クライアント** - たとえば、VS Code with GitHub Copilot、GitHub Copilot クラウド エージェント、Cursor、Claude Desktop、Claude Code、または AI Assistant プラグインを含む JetBrains IDE。 +- 初回のサーバー起動時の `npx` パッケージ解決のためのインターネット アクセス。 +- 次のいずれかの開始点: + - 新しいプロジェクト用の空のフォルダー + - Ignite UI CLI で作成したプロジェクト + - 引き続き作業する既存の {ProductName} プロジェクト + +同じクライアント セッションでテーマ設定ツールを使用したい場合、`igniteui-theming` がプロジェクトでまだ利用できない場合は次を実行してください: + +```bash +npm install igniteui-theming +``` + +## AI クライアント向け Ignite UI CLI MCP の設定 + +MCP サーバーは `npx` で起動します。Node.js と `igniteui-cli` パッケージへのアクセス以外に別途インストールは不要です。 + +正規の起動コマンドは次のとおりです: + +```bash +npx -y igniteui-cli mcp +``` + +> [!NOTE] +> `-y` フラグは、手動操作なしにサーバーを起動できるように、`npx` にパッケージのダウンロード プロンプトを自動確認するよう指示します。 + +### セットアップ パスの選択 + +Ignite UI CLI MCP を始めるには 3 つの方法があります: + +> **推奨 - CLI ファースト** + `ig new` または対応する `npx --package igniteui-cli igniteui new` コマンドを使用して、最初に Ignite UI CLI でプロジェクトを作成します。Ignite UI CLI がプロジェクトをスキャフォールディングし、必要なパッケージをインストールし、VS Code 用の `.vscode/mcp.json` を自動的に書き込むため、これが最も簡単なセットアップです。その後、生成された MCP 設定を確認し、AI クライアントでプロジェクトを開くだけです。 + +> **空のフォルダー** + 完全に空のフォルダーから始め、MCP 設定を手動で追加してから、チャットを通じてアシスタントにプロジェクトを作成させます。このパスは、最初に CLI を自分で実行するのではなく、MCP に最初のプロジェクト作成ステップを主導させたい場合に便利です。 + +> **既存のプロジェクト** + 既存のプロジェクトに MCP 設定を追加し、現在のコードベースで作業を続けます。このパスは、プロジェクトが既に存在していて、何かを再生成せずにプロジェクトの変更、コンポーネント作業、ドキュメントの質問をアシスタントに手伝ってもらいたい場合に便利です。 + +3 つのパスはすべて同じ MCP サーバーを使用します。違いは、プロンプトを開始する前にプロジェクトがどのように準備されるかだけです: + +- **CLI ファースト** パスでは、Ignite UI CLI がプロジェクトを作成し、最初の MCP 設定を準備します +- **空のフォルダー** パスでは、最初に MCP 設定を作成し、その後アシスタントにプロジェクトを作成させます +- **既存プロジェクト** パスでは、MCP を現在のコードベースに接続し、既にあるものから続けます + +いずれの場合も、MCP サーバーが接続されて AI クライアントに表示されると、アシスタントは同じセッションで作業を続けることができます。 + +最初に Ignite UI CLI でプロジェクトを作成する場合は、次のいずれかの方法で CLI を実行できます: + +- **グローバル インストール** + + ```bash + npm install -g igniteui-cli + ``` + + これにより、任意のターミナル セッションで `ig` コマンドが使用できるようになり、プロジェクトを定期的に作成およびスキャフォールディングする場合は最も明確なオプションです。 + +- **グローバル インストールなし** + + ```bash + npx --package igniteui-cli igniteui new + ``` + + これは、グローバルな `ig` コマンドの代わりに `npx` を通じて CLI を実行します。 + +**CLI ファースト** パスの場合、ガイド モードまたは直接コマンドでプロジェクトを作成できます。 + +ガイド モードは、CLI が利用可能なオプションを順を追って案内する場合に使用します: + +```bash +ig new +``` + +対応する `npx` 形式: + +```bash +npx --package igniteui-cli igniteui new +``` + +プロジェクト設定が既にわかっている場合は、直接コマンドを使用します: + + +```bash +ig new my-app --framework=angular --type=igx-ts --template=empty +``` + +対応する `npx` 形式: + +```bash +npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=empty +``` + + + +```bash +ig new my-app --framework=react +``` + +対応する `npx` 形式: + +```bash +npx --package igniteui-cli igniteui new my-app --framework=react +``` + + + +```bash +ig new my-app --framework=webcomponents +``` + +対応する `npx` 形式: + +```bash +npx --package igniteui-cli igniteui new my-app --framework=webcomponents +``` + + +ガイド モードでは、Ignite UI CLI がプロジェクト名、フレームワーク、テンプレート、テーマ、コンポーネントを追加するかセットアップを完了するかを尋ねます。直接モードでは、コマンド自体にフレームワークとサポートされているオプションを指定します。 + + +プロジェクト テンプレート、CLI コマンド オプション、`ig add` などのコンポーネント スキャフォールディング コマンドの詳細については、Angular 向けの Ignite UI CLI ドキュメントを参照してください。 + + +プロジェクト テンプレート、CLI コマンド オプション、`ig add` などのコンポーネント スキャフォールディング コマンドの詳細については、「[Ignite UI CLI](../general-cli-overview.md)」を参照してください。 + + +プロジェクト テンプレート、CLI コマンド オプション、`ig add` などのコンポーネント スキャフォールディング コマンドの詳細については、「[Ignite UI CLI](../general-cli-overview.md)」を参照してください。 + + +### VS Code + +VS Code の GitHub Copilot は、ワークスペース レベルの設定ファイルを通じて MCP サーバーをサポートします。プロジェクト ルートに `.vscode/mcp.json` を作成または編集します: + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +Ignite UI CLI でプロジェクトを最初に作成した場合は、生成された `.vscode/mcp.json` を確認し、両方のエントリが存在することを確認してください。 + +保存後、GitHub Copilot チャット パネルを開き、**エージェント** モードに切り替えると、Ignite UI CLI MCP ツールが利用可能になります。 + +> [!NOTE] +> VS Code の MCP サポートには GitHub Copilot と VS Code 1.99 以降が必要です。 + +### Cursor + +Cursor はプロジェクト スコープの MCP 設定をサポートします。プロジェクト ルートに `.cursor/mcp.json` を作成または編集します: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +新しい Cursor チャット セッションを開くと、サーバーが自動的に検出されます。 + +> [!NOTE] +> Cursor の **Settings → MCP** からグローバルに MCP サーバーを設定することもできます。 + +### Claude Desktop + +Claude Desktop 設定ファイルにサーバーを追加します: + +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +保存後、Claude Desktop を再起動します。チャット入力エリアに MCP サーバー インジケーター (スライダー アイコン) が表示され、MCP ツールがアクティブであることを確認できます。 + +### Claude Code + +Claude Code は、CLI とプロジェクト スコープの `.mcp.json` ファイルを通じて MCP サーバーをサポートします。チームと設定を共有するには、プロジェクト ルートに `.mcp.json` を作成または編集します: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +あるいは、ローカル環境のみにコマンドラインでサーバーを追加することもできます: + +```bash +claude mcp add igniteui-cli -- npx -y igniteui-cli mcp +claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp +``` + +Claude Code 内で `/mcp` コマンドを使用してサーバーが接続されていることを確認します。 + +### JetBrains IDE + +JetBrains AI Assistant は IDE 設定を通じて MCP サーバーをサポートします: + +1. **Settings** (macOS では **Preferences**) を開きます。 +2. **Tools → AI Assistant → Model Context Protocol (MCP)** に移動します。 +3. **+ Add** をクリックし、**As JSON** を選択するかフォーム フィールドを使用します。 +4. 次の設定を入力します: + + ```json + { + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } + } + ``` + +5. **OK** をクリックして AI Assistant を再起動します。 + +> [!NOTE] +> MCP サポートには、JetBrains IDE に AI Assistant プラグインがインストールされ有効になっている必要があります。 + +### その他の MCP クライアント + +その他の MCP 互換クライアントの場合は、次の起動コマンドで STDIO トランスポートを使用します: + +```bash +npx -y igniteui-cli mcp +npx -y igniteui-theming igniteui-theming-mcp +``` + +### GitHub + +GitHub Copilot クラウド エージェントは、リポジトリ レベルの MCP 設定をサポートします。リポジトリで: + +1. メイン リポジトリ ページを開きます。 +2. **Settings** をクリックします。 +3. サイドバーで **Copilot** から **Cloud agent** に移動します。 +4. **MCP configuration** セクションに JSON を貼り付けます。 +5. **Save** をクリックします。 + +次のようなリポジトリ設定を使用します: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "type": "local", + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"], + "tools": ["*"] + }, + "igniteui-theming": { + "type": "local", + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"], + "tools": ["*"] + } + } +} +``` + +このセットアップは、GitHub クラウド エージェントがリポジトリ コンテキストから直接同じ CLI MCP とテーマ設定 MCP ツールを使用したい場合に便利です。 + +## 利用可能なツール + +MCP サーバーは、AI がプロンプトに基づいて自動的に使用するツールのセットを公開します。これらのツールを直接呼び出すことはありません。チャットでやりたいことを説明すると、アシスタントが適切なものを選びます。このテーブルは、開始前に利用可能なものを確認するためのものです。 + +現在のパラメーターを含むライブ リストを取得するには、次のように尋ねます: + +> _"Ignite UI CLI MCP が提供するツールは何ですか？"_ + +各ツールの概要を以下に示します: + +| ツール | 説明 | +|------|-------------| +| `list_components` | フレームワークの利用可能な Ignite UI コンポーネント ドキュメントを一覧表示します。オプションのキーワード フィルター (名前、キーワード、サマリーに対する大文字小文字を区別しない部分文字列一致) を受け付けます。 | +| `get_doc` | ケバブケース名 (例: `grid-editing`、`combo-overview`) で特定のコンポーネント ドキュメントの完全な Markdown コンテンツを取得します。コード サンプル、テーブル、リンクを含みます。 | +| `search_docs` | フレームワークの Ignite UI ドキュメント全体をフルテキスト検索します。抜粋付きで上位 20 件のランク付けされた結果を返します。 | +| `get_project_setup_guide` | 特定のフレームワークで新しいプロジェクトを作成するためのプロジェクト セットアップ ガイドを返します。CLI 手順とインストール手順を含みます。 | +| `search_api` | Angular、React、Web Components 全体でキーワードまたはコンポーネント名で API エントリを検索します。 | +| `get_api_reference` | 特定のコンポーネントまたはクラスの完全な API リファレンスを返します。プロパティ、メソッド、イベントを含みます。Angular、React、Web Components をサポートします。 | + +大まかに言えば、CLI MCP ツールは次のことを支援します: + +- 新しいプロジェクトの作成 +- 既存のプロジェクトでの作業 +- コンポーネントの追加と変更 +- プロジェクト構造と設定の更新 +- ドキュメントと API の質問への回答 + +> [!NOTE] +> フレームワーク検出はコンポーネント プレフィックスを使用します: Angular には `Igx`、React には `Igr`、Web Components には `Igc`、Blazor には `Igb`。アシスタントは、開いているファイルまたはプロンプト コンテキストから適切なフレームワークを自動的に選択します。 + +テーマ設定サーバーは、スタイリング、テーマ、パレット、トークン ワークフローを同じクライアント セッションに追加します。 + + +主要な実践的ワークフローについては、「[Ignite UI CLI MCP と Ignite UI テーマ設定 MCP を使用したアプリのエンドツーエンド構築](../general-how-to-mcp-e2e.md)」を参照してください。 + + +主要な実践的ワークフローについては、「[Ignite UI CLI MCP と Ignite UI テーマ設定 MCP を使用したアプリのエンドツーエンド構築](../general-how-to-mcp-e2e.md)」を参照してください。 + + +## 一般的なワークフロー + +以下のセットアップ シナリオは、各開始点をいつ使用するかを示しています。 + +### CLI ファースト セットアップ + +最速のガイド付きセットアップを希望し、`.vscode/mcp.json` を自動生成したい場合は、最初に Ignite UI CLI でプロジェクトを作成します。 + +シナリオ例: + +- _"最初に Ignite UI CLI で新しいプロジェクトを作成し、生成されたプロジェクトを VS Code で開き、そこから MCP で続けたい。"_ +- _"React プロジェクトが欲しいことは既にわかっているので、CLI でプロジェクトを作成してから、MCP を使ってページとコンポーネントを追加したい。"_ + +### 空のフォルダー セットアップ + +MCP 設定を自分で追加した後、アシスタントにチャットからプロジェクトを作成させたい場合は、空のフォルダーから始めます。 + +シナリオ例: + +- _"完全に空のフォルダーがあり、MCP が接続された後にアシスタントにチャットからプロジェクト全体を作成してほしい。"_ +- _"最初に Ignite UI CLI を手動で実行したくない。MCP に最初のプロジェクト作成ステップを主導してほしい。"_ + +### 既存プロジェクト セットアップ + +現在のコードベースを維持し、プロジェクトの変更、コンポーネント作業、ドキュメントの質問にアシスタントを使いたい場合は、既存のプロジェクトに MCP を接続します。 + +シナリオ例: + +- _"既にプロジェクトがあり、アシスタントがページとコンポーネントを更新できるように MCP を追加したいだけだ。"_ +- _"プロジェクトは既に存在しており、現在のコードベースで作業しながら主にドキュメントと API の質問をしたい。"_ + +## トラブルシューティング + +**`npx` が認識されない** + +Node.js がインストールされていないか、現在のターミナル環境で利用できません。[nodejs.org](https://nodejs.org) から Node.js をインストールし、`node --version` で確認してください。 + +**`ig` が認識されない** + +グローバルな `ig` コマンドを使用したい場合は、最初に `npm install -g igniteui-cli` で Ignite UI CLI をインストールしてください。グローバル インストールが不要な場合は、代わりに `npx --package igniteui-cli igniteui ...` 形式を使用してください。 + +**設定を保存した後、MCP ツールが表示されない** + +ワークスペースをリロードし、エディターを再度開くか、AI クライアントを再起動してください。一部のクライアントは新しい MCP 設定ファイルを検出するために完全な再起動が必要です。 + +**一方のサーバーが起動に失敗する** + +設定の内容がキー名と引数の順序を含め、例と完全に一致することを確認してください。 + +**プロジェクトは作成されたが、MCP 設定が VS Code でしか利用できない** + +Ignite UI CLI は CLI ファースト パスで `.vscode/mcp.json` を書き込みます。Cursor、Claude Desktop、Claude Code、JetBrains、GitHub、またはその他の MCP クライアントを使用している場合は、同じサーバー エントリをそのクライアントの設定形式と場所にコピーしてください。 + +**アシスタントが間違ったフォルダーで作業しているか、プロジェクト ファイルが見つからない** + +AI クライアントがプロジェクト ルートを指していることを確認してください。エディター ベースのクライアントを使用している場合は、プロジェクト ルート フォルダーを開いてください。デスクトップまたはチャット ファースト クライアントを使用している場合は、正しいプロジェクト フォルダーをセッション コンテキストとして利用できるようにしてください。 + +**空のフォルダー セットアップが期待どおりに動作しない** + +開始前にフォルダーが実際に空であることを確認してください。フォルダーに既にプロジェクト ファイルが含まれている場合は、新しい空のワークスペースとして扱う代わりに、既存プロジェクト パスを使用してください。 + +**GitHub MCP 設定が拒否される** + +JSON が `mcpServers` 構造を使用していること、および各ローカル サーバー エントリに `type`、`command`、`args` が含まれていることを確認してください。`tools` フィールドを含める場合は、有効なツール名または `["*"]` を使用してください。 + +## その他のリソース + +- [Ignite UI を使用した AI 支援開発](./ai-assisted-development-overview.md) + +- [Ignite UI CLI MCP と Ignite UI テーマ設定 MCP を使用したアプリのエンドツーエンド構築](../general-how-to-mcp-e2e.md) + + +- [Ignite UI CLI MCP と Ignite UI テーマ設定 MCP を使用したアプリのエンドツーエンド構築](../general-how-to-mcp-e2e.md) + +- [{ProductName} スキル](./skills.md) +- [Ignite UI テーマ設定 MCP](./theming-mcp.md) + +
+ +コミュニティは常に活発で、新しいアイデアを歓迎しています。 + +- [{ProductName} **フォーラム**]({ForumsLink}) +- [{ProductName} **GitHub**]({GithubLink}) diff --git a/doc/jp/components/ai/theming-mcp.md b/doc/jp/components/ai/theming-mcp.md index a2e237c1e..a4a507c00 100644 --- a/doc/jp/components/ai/theming-mcp.md +++ b/doc/jp/components/ai/theming-mcp.md @@ -340,7 +340,7 @@ $my-palette: palette( > 「デザイン システムでは、プライマリ グリーンの 14 個すべてのシェードに正確な 16 進数値が指定されています。値を貼り付けます — カスタム パレットを作成して。」 -AI は、プライマリ カラーに `mode: "explicit"` を使用して `create_custom_palette` を呼び出し、残りは自動生成します。 +AI は、プライマリ カラーに `mode: "explicit"` を使用して `create_custom_palette` を呼び出し、残りは自動生成します。 シェード生成の詳細については、[パレット](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/palettes)を参照してください。 ### コンポーネント レベルのカスタマイズ @@ -358,7 +358,7 @@ AI は、カレンダー コンポーネントにスコープされた `set_spac **プラットフォームが検出されない** -`detect_platform` が `null` または `generic` を返す場合は、`package.json` に Ignite UI パッケージ (例: `igniteui-react`) が依存関係としてリストされていることを確認してください。AI に明示的に伝えることもできます: 「{ProductName} を使用して。」 +`detect_platform` が `null` または `generic` を返す場合は、`package.json` に Ignite UI パッケージ (例: `{PackageCommon}`) が依存関係としてリストされていることを確認してください。AI に明示的に伝えることもできます: 「{Platform} プラットフォームを使用して。」 **カラーの輝度警告** @@ -377,11 +377,26 @@ AI がカラーの輝度について警告した場合、選択したカラー ng add igniteui-angular ``` -また、`styles.scss` で他のテーマ mixin の前に `core()` が呼び出されていることを確認してください。 +また、`styles.scss` で他のテーマ mixin の前に `core()` が呼び出されていることを確認してください。正しいファイルのセットアップについては、「[Sass を使用したテーマ設定]()」を参照してください。 ## その他のリソース - [{ProductName} スキル](./skills.md) + + + +
+ +コミュニティは常に活気があり、新しいアイデアを歓迎しています。 + - [{ProductName} **フォーラム** (英語)]({ForumsLink}) - [{ProductName} **GitHub** (英語)]({GithubLink}) diff --git a/doc/jp/components/general-changelog-dv-blazor.md b/doc/jp/components/general-changelog-dv-blazor.md index 15390c284..64fbd15c4 100644 --- a/doc/jp/components/general-changelog-dv-blazor.md +++ b/doc/jp/components/general-changelog-dv-blazor.md @@ -17,6 +17,106 @@ _language: ja ## **{PackageVerLatest}** +### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +| 3229 | IgbGrid | グリッドにライセンス版にもかかわらず Trial の透かしが表示される。 | +| 2754 | IgbTabs | IgbTabs タブ内の IgbSwitch のチェック状態を変更すると、タブのコンテンツが消える。 | + +## **{PackageVerChanges-25-2-MAR}** + +### {PackageGrids} (グリッド) + +#### IgbQueryBuilder +- 新しいコンポーネント IgbQueryBuilder を追加しました。直感的なビジュアル インターフェイスを通じて複雑なフィルタリング条件を構築できる UI コンポーネントです。 + +#### IgbGrid、IgbTreeGrid、IgbHierarchicalGrid、IgbPivotGrid + - グリッドに表示されるデータに基づいてスクロール スロットルを動的に調整することでパフォーマンスを改善しました。 + +#### IgbGrid、IgbTreeGrid、IgbHierarchicalGrid + - グリッド コンポーネントに PDF エクスポート機能を追加しました。既存の Excel および CSV エクスポート オプションに加えて、グリッドを PDF 形式にエクスポートできるようになりました。 + +#### 重大な変更 + +- IgbGrid、IgbTreeGrid、IgbHierarchicalGrid、IgbPivotGrid + - 元の `data` 配列の変更 (元の配列へのレコードの追加/削除/移動など) は自動的に検出されなくなりました。変更を検出するには、コンポーネントに配列参照の変更が必要です。 + +### 一般 + +#### IgbThemeProvider +- 新しいコンポーネント IgbThemeProvider を追加しました。Lit のコンテキスト API を使用して特定のページ セクションにテーマをスコープでき、1 つのページで複数のテーマを有効にします。Shadow DOM と Light DOM の両方で動作します。 + +#### Badge + - 新しいドット タイプ、WCAG AA アクセシビリティ標準に準拠した改善されたアウトライン実装、テーマ ベースのサイズ調整。[#1889](https://github.com/IgniteUI/igniteui-webcomponents/pull/1889) + +#### Checkbox + - 新しい --tick-width CSS プロパティ。[#1897](https://github.com/IgniteUI/igniteui-webcomponents/pull/1897) +#### Combo + - コンボ コンポーネントのクリア ボタンを無効にする新しい disableClear プロパティ。[#1896](https://github.com/IgniteUI/igniteui-webcomponents/pull/1896) +#### Mask input + - 数値パターン用の Unicode 数字コード ポイントを ASCII 数字に変換します。[#1907](https://github.com/IgniteUI/igniteui-webcomponents/pull/1907) + + +#### 機能拡張 + - Button、Button group、Calendar、Checkbox、Date picker、date range picker、Nav drawer、Radio group、Stepper のアクセシビリティ カラー調整。[#1959](https://github.com/IgniteUI/igniteui-webcomponents/pull/1959) + - Button、Calendar、Carousel、Combo、Date picker、Date range picker、input、Select、Textarea のスタイルを更新してデザイン キットと合わせました。 + - Combo のキーボード ナビゲーション エクスペリエンスとグループ化 (ネイティブの Math.groupBy を使用) を改善しました。 + + +### バグ修正 +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +| 2189 | IgbDataChart | ラベルがない場合に DataChart が軸のレンダリングをスキップする | +| 2317 | IgbGrid | IgbGrid BodyTemplate パフォーマンスの改善 (C#/.NET テンプレート) | +| 2326 | IgbDataPieChart | DataPieChart に OthersCategory スタイリング プロパティを追加 | +| 2907 | IgbDateTimeInput | IgbDateTimeInput の Prompt パラメーターが基盤となる Web Component の prompt プロパティに伝播されない | +| 2908 | IgbMaskInput | IgbMaskInput の Prompt パラメーターが基盤となる Web Component の prompt プロパティに伝播されない | +| 2909 | IgbPivotGrid | IgbPivotGrid は SnackbarDisplayTime を公開しているが、このプロパティは適用されず、誤ったテスト失敗を引き起こす | +| 38668 | IgbDataTooltipLayer | チャートの TitleTextColor を使用すると TitleTextColor がオーバーライドされる | +| 40238 | Excel | Excel 数式パーサーを修正 - Workbook.Load() が Excel.FormulaParseException をスローする | +| 41167 | Excel | オブジェクトの数式がラウンドトリップされない - カメラ ツールのラウンドトリップの Excel サポートを追加 | +| 41419 | Excel | VBA 署名付き Excel ファイルの保存時に署名/証明書が保持されない | +| 41594 | IgbDataChart | AssigningCategoryStyle の args.GetItems が null であるか、フラグメント シリーズのアイテム更新に機能しない | +| 41598 | IgbDataChart | ドーナツ チャートの編集時に例外が発生 – DivideByZeroException | +| [#2079](https://github.com/IgniteUI/igniteui-webcomponents/pull/2079) | Calendar | 当月以外の週の `aria-hidden` 状態 | +| [#2078](https://github.com/IgniteUI/igniteui-webcomponents/pull/2078) | Date Picker | ダイアログ モードでのスロット付きアクションの CSS ボーダー | +| [#2068](https://github.com/IgniteUI/igniteui-webcomponents/pull/2068) | Input | フォーカス時のプレースホルダー カラー | +| [#2073](https://github.com/IgniteUI/igniteui-webcomponents/pull/2073) | Input | サフィックス スロット コンテンツが存在する場合の CSS ボーダー | +| [#2069](https://github.com/IgniteUI/igniteui-webcomponents/pull/2069) | Textarea | 下部パディングをデザイン システムに合わせて調整 | +| [#2063](https://github.com/IgniteUI/igniteui-webcomponents/pull/2063) | Validation | スロット付き検証テキストが現在のテーマに従う | +| [#2059](https://github.com/IgniteUI/igniteui-webcomponents/pull/2059) | Tile Manager | コンテンツがなく、最大化/フルスクリーンが無効の場合のみヘッダーを非表示にする | +| [#2061](https://github.com/IgniteUI/igniteui-webcomponents/pull/2061) | Theming | スタイルシートではなくドキュメントの計算スタイルに基づいて初期テーマを解決する | +| [#1909](https://github.com/IgniteUI/igniteui-webcomponents/pull/1909) | Sass Theme Support | Checkbox — テーマ パッケージの Sass ツールを使用してスタイル設定 | +| [#1926](https://github.com/IgniteUI/igniteui-webcomponents/pull/1926) | Sass Theme Support | Chip — テーマ パッケージの Sass ツールを使用してスタイル設定 | +| [#1920](https://github.com/IgniteUI/igniteui-webcomponents/pull/1920) | Sass Theme Support | Combo — テーマ パッケージの Sass ツールを使用してスタイル設定 | +| [#1933](https://github.com/IgniteUI/igniteui-webcomponents/pull/1933) | Sass Theme Support | Select — テーマ パッケージの Sass ツールを使用してスタイル設定 | +| [#1966](https://github.com/IgniteUI/igniteui-webcomponents/pull/1966) | Sass Theme Support | Snackbar — テーマ パッケージの Sass ツールを使用してスタイル設定 | +| [#1972](https://github.com/IgniteUI/igniteui-webcomponents/pull/1972) | Sass Theme Support | コンポーネントに不足していたシャドウを追加 | +| [#1929](https://github.com/IgniteUI/igniteui-webcomponents/pull/1929) | Sass Theme Support | Tabs — 動作しない Sass テーマ パラメーターを修正 | +| [#1935](https://github.com/IgniteUI/igniteui-webcomponents/pull/1935) | Sass Theme Support | Textarea — Sass テーマを更新 | +| [#1980](https://github.com/IgniteUI/igniteui-webcomponents/pull/1980) | Sass Theme Support | Radio — テーマ パッケージの Sass ツールを使用してスタイル設定 | +| [#1991](https://github.com/IgniteUI/igniteui-webcomponents/pull/1991) | Sass Theme Support | Switch — テーマ パッケージの Sass ツールを使用してスタイル設定 | +| [#2015](https://github.com/IgniteUI/igniteui-webcomponents/pull/2015) | Sass Theme Support | List — テーマ パッケージの Sass ツールを使用してスタイル設定 | +| [#2030](https://github.com/IgniteUI/igniteui-webcomponents/pull/2030) | Calendar | 月/年ビューのフォーカス スタイル | +| [#1965](https://github.com/IgniteUI/igniteui-webcomponents/pull/1965) | Combo | Notch ボーダー スタイル | +| [#1964](https://github.com/IgniteUI/igniteui-webcomponents/pull/1964) | Checkbox & Switch | `helper-text` スロットのスロット付きコンテンツにカーソルを合わせたときの内部リップルの不透明度 | +| [#1947](https://github.com/IgniteUI/igniteui-webcomponents/pull/1947) | Dialog | 基盤となるダイアログ要素が `display: contents` を持つようになり、DOM レイアウトに参加しない | +| [#1986](https://github.com/IgniteUI/igniteui-webcomponents/pull/1986) | Dialog | `keepOpenOnEscape` が Escape キー押下時にダイアログが閉じるのを防げていない | +| [#1997](https://github.com/IgniteUI/igniteui-webcomponents/pull/1997) | Dialog | 基本スタイルとテーマ | +| [#1985](https://github.com/IgniteUI/igniteui-webcomponents/pull/1985) | List & List Item | リスト アイテムのスロット付き `igc-icon` に不足していたスタイルを追加 | +| [#2010](https://github.com/IgniteUI/igniteui-webcomponents/pull/2010) | List & List Item | Indigo テーマのアイコンとアイコン ボタンのサイズ | +| [#2006](https://github.com/IgniteUI/igniteui-webcomponents/pull/2006) | Mask Input | リテラルを含むマスク パターンの自動入力動作 | +| [#1956](https://github.com/IgniteUI/igniteui-webcomponents/pull/1956) | Navbar | アイコンとアイコン ボタンのサイズ | +| [#1957](https://github.com/IgniteUI/igniteui-webcomponents/pull/1957) | Select | アウトライン タイプのカラー | +| [#1998](https://github.com/IgniteUI/igniteui-webcomponents/pull/1998) | Tabs | Material テーマでアクティブ タブの疑似要素の背景を追加 | +| [#2008](https://github.com/IgniteUI/igniteui-webcomponents/pull/2008) | Tabs | アクティブ タブ インジケーターの配置時にスケール係数を考慮 | +| [#2028](https://github.com/IgniteUI/igniteui-webcomponents/pull/2028) | Tabs | 選択されたインジケーターの配置 | +| [#1828](https://github.com/IgniteUI/igniteui-webcomponents/issues/1828) | Tooltip | ツールチップ ターゲットがクリックされたときにツールチップを表示しない | +| [#1936](https://github.com/IgniteUI/igniteui-webcomponents/pull/1936) | Tooltip | スロット付きコンテンツの max-width 制限を削除 | + +## **{PackageVerChanges-25-2-DEC}** + ### 機能拡張 ### {PackageCharts} @@ -1127,4 +1227,4 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 - `FirstWeekOfYear` - 年の最初の週をいつ表示するかを指定します。例えば、最初の 1 週間、最初の 4 日間の週です。 - `ShowWeekNumbers` - 週番号の表示を切り替えます。 - `MinDate` & `MaxDate` - 使用可能の選択できる日付の範囲を指定する日付制限。 -- アクセシビリティの追加 \ No newline at end of file +- アクセシビリティの追加 diff --git a/doc/jp/components/general-changelog-dv-react.md b/doc/jp/components/general-changelog-dv-react.md index a28e6fc40..0a7d71024 100644 --- a/doc/jp/components/general-changelog-dv-react.md +++ b/doc/jp/components/general-changelog-dv-react.md @@ -12,6 +12,79 @@ _language: ja ## **{PackageVerLatest}** +### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +| 3055 | IgrDataPieChart | Others スライスのスタイル プロパティが不足している。 | +| 38668 | IgrDataTooltipLayer | チャートの TitleTextColor を使用すると TitleTextColor がオーバーライドされる。 | +| 41167 | Excel | オブジェクトの数式がラウンドトリップされない - カメラ ツールのラウンドトリップの Excel サポートを追加。 | +| 41419 | Excel | VBA 署名付き Excel ファイルの保存時に署名/証明書が保持されない。 | +| 41594 | IgrDataChart | AssigningCategoryStyle の args.GetItems が null であるか、フラグメント シリーズのアイテム更新に機能しない。 | + +## **{PackageVerChanges-26-2-FEB}** +### {PackageCommon} + +#### 新機能 + +- #### AI 支援開発 - Copilot スキル + - `{PackageCommon}` パッケージの `skills/` ディレクトリに 4 つのエンドユーザー スキルが同梱されるようになりました。GitHub Copilot やその他の LLM エージェントに一般的なタスクのステップバイステップのガイダンスを提供します: + - **igniteui-wc-choose-components** - 特定の UI パターンに適したコンポーネントを識別する。 + - **igniteui-wc-integrate-with-framework** - React、Angular、Vue、またはバニラ JS でコンポーネントをセットアップして使用する。 + - **igniteui-wc-customize-component-theme** - CSS カスタム プロパティ、パーツ、テーマ システムを使用してカスタム スタイルを適用する。 + - **igniteui-wc-optimize-bundle-size** - 選択的インポートと遅延読み込みを使用して本番バンドル サイズを削減する。 +- #### チャット + - `adoptRootStyles` を実行時にオン/オフ切り替えできるようになりました。 + + +#### 重大な変更 + +- #### テーマ + - 他の Ignite UI コンポーネント ライブラリに合わせるため、コンポーネント テーマの CSS カスタム プロパティのグローバル プレフィックスを変更しました。 + +- #### チャット + - `typingIndicator` テンプレート レンダラーを削除しました。代わりに `typing-indicator` スロットを使用してください。 + +- #### ツールチップ + - 非推奨の `disableArrow` プロパティを削除しました。 + +- #### ライブラリ + - 必要な最小 Node バージョンが >= 22 になりました。 + + #### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +|[2033](https://github.com/IgniteUI/igniteui-webcomponents/pull/2033)|Carousel|Blazor でのコンテキスト インスタンス化| +|[2085](https://github.com/IgniteUI/igniteui-webcomponents/pull/2085)|Combo|非入力部分のカーソル スタイルを修正| +|[2085](https://github.com/IgniteUI/igniteui-webcomponents/pull/2085)|Textarea|非入力部分のカーソル スタイルを修正| + +### {PackageGrids} (グリッド) + +- `IgrGrid`、`IgrTreeGrid`、`IgrHierarchicalGrid`、`IgrPivotGrid` + - グリッドに表示されるデータに基づいてスクロール スロットルを動的に調整することでパフォーマンスを改善しました。 + +**重大な変更** + +- `IgrGrid`、`IgrTreeGrid`、`IgrHierarchicalGrid`、`IgrPivotGrid` + - 元の `data` 配列の変更 (元の配列へのレコードの追加/削除/移動など) は自動的に検出されなくなりました。変更を検出するには、コンポーネントに配列参照の変更が必要です。 + +**ローカライゼーション (i18n)** + +- `IgrGrid`、`IgrTreeGrid`、`IgrHierarchicalGrid`、`IgrPivotGrid`、`IgrCombo`、`IgrDatePicker`、`IgrDateRangePicker`、`IgrCalendar`、`IgrCarousel`、`IgrChip`、`IgrInput`、`IgrTree` + - グリッド コンポーネントで日付や数値などのデータをフォーマットおよびレンダリングするための新しい `Intl` 実装。`IgrCalendar`、`IgrDatePicker`、`IgrDateRangePicker` の `Intl` 実装を更新しました。 + - 現在サポートされているすべての言語のリソース文字列を持つすべてのコンポーネントに対する新しいローカライゼーション実装。 + - 新しいパブリック ローカライゼーション API と、新しいリソースを含む `igniteui-i18n-resources` という名前のパッケージ。 + +**PDF エクスポート** +- グリッド データを PDF 形式にエクスポートできる PDF エクスポート機能を追加しました。 + +**Popover API** + +- ドロップダウン メニューとダイアログが HTML Popover API を使用するようになり、より優れた配置とアクセシビリティを提供します。 + +## **{PackageVerChanges-25-2-FEB}** + ### 機能拡張 ### {PackageCharts} @@ -408,7 +481,8 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 ## **{PackageVerChanges-24-2-APR2}** -> [!Note] バージョン 19.0.0 では、React 製品に多くの重大な変更が導入され、API の改善と整理が行われました。詳細は完全なアップデートガイドをご参照ください。 +> [!Note] +> バージョン 19.0.0 では、React 製品に多くの重大な変更が導入され、API の改善と整理が行われました。詳細は完全なアップデートガイドをご参照ください。 [アップデート ガイド](update-guide.md) diff --git a/doc/jp/components/general-changelog-dv-wc.md b/doc/jp/components/general-changelog-dv-wc.md index fdb1a0662..9ff679999 100644 --- a/doc/jp/components/general-changelog-dv-wc.md +++ b/doc/jp/components/general-changelog-dv-wc.md @@ -13,6 +13,90 @@ _language: ja ## **{PackageVerLatest}** +#### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +| 3055 | IgcDataPieChart | DataPieChart - Others スライスのスタイル プロパティが不足している。 | +| 38668 | IgcDataTooltipLayer | チャートの TitleTextColor を使用すると TitleTextColor がオーバーライドされる。 | +| 40238 | Excel | Excel 数式パーサーを修正 - Workbook.Load() が Excel.FormulaParseException をスローする。 | +| 41167 | Excel | オブジェクトの数式がラウンドトリップされない - カメラ ツールのラウンドトリップの Excel サポートを追加。 | +| 41419 | Excel | VBA 署名付き Excel ファイルの保存時に署名/証明書が保持されない。 | + +## **{PackageVerChanges-26-1-FEB}** + +### {PackageCharts} +#### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +|2327|IgcToolbar|WebComponents で SubPanel サンプルが機能しない。| +|2638|IgcDataChart|回転したラベルのマウス ヒット検出を改善。| +|2959|IgcLinearGauge|ゲージが View 関数を呼び出さないように修正。| +|2326|IgcDataChart|others の色を設定するプロパティを追加。| +|41594|IgcDataChart|AssigningCategoryStyle の args.GetItems が null であるか、フラグメント シリーズのアイテム更新に機能しない。| + +### {PackageCommon} + +#### 新機能 + +- #### AI 支援開発 - Copilot スキル + - `{PackageCommon}` パッケージの `skills/` ディレクトリに 4 つのエンドユーザー スキルが同梱されるようになりました。GitHub Copilot やその他の LLM エージェントに一般的なタスクのステップバイステップのガイダンスを提供します: + - **igniteui-wc-choose-components** - 特定の UI パターンに適したコンポーネントを識別する。 + - **igniteui-wc-integrate-with-framework** - React、Angular、Vue、またはバニラ JS でコンポーネントをセットアップして使用する。 + - **igniteui-wc-customize-component-theme** - CSS カスタム プロパティ、パーツ、テーマ システムを使用してカスタム スタイルを適用する。 + - **igniteui-wc-optimize-bundle-size** - 選択的インポートと遅延読み込みを使用して本番バンドル サイズを削減する。 + +- #### チャット + - `adoptRootStyles` を実行時にオン/オフ切り替えできるようになりました。 + + +#### 重大な変更 + +- #### テーマ + - 他の Ignite UI コンポーネント ライブラリに合わせるため、コンポーネント テーマの CSS カスタム プロパティのグローバル プレフィックスを変更しました。 + +- #### チャット + - `typingIndicator` テンプレート レンダラーを削除しました。代わりに `typing-indicator` スロットを使用してください。 + +- #### ツールチップ + - 非推奨の `disableArrow` プロパティを削除しました。 + +- #### ライブラリ + - 必要な最小 Node バージョンが >= 22 になりました。 + +#### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +|[2033](https://github.com/IgniteUI/igniteui-webcomponents/pull/2033)|Carousel|Blazor でのコンテキスト インスタンス化| +|[2085](https://github.com/IgniteUI/igniteui-webcomponents/pull/2085)|Combo|非入力部分のカーソル スタイルを修正| +|[2085](https://github.com/IgniteUI/igniteui-webcomponents/pull/2085)|Textarea|非入力部分のカーソル スタイルを修正| + +### {PackageGrids} (グリッド) + +- `IgcGrid`、`IgcTreeGrid`、`IgcHierarchicalGrid`、`IgcPivotGrid` + - グリッドに表示されるデータに基づいてスクロール スロットルを動的に調整することでパフォーマンスを改善しました。 + +**重大な変更** + +- `IgcGrid`、`IgcTreeGrid`、`IgcHierarchicalGrid`、`IgcPivotGrid` + - 元の `data` 配列の変更 (元の配列へのレコードの追加/削除/移動など) は自動的に検出されなくなりました。変更を検出するには、コンポーネントに配列参照の変更が必要です。 + +**ローカライゼーション (i18n)** + +- `IgcGrid`、`IgcTreeGrid`、`IgcHierarchicalGrid`、`IgcPivotGrid`、`IgcCombo`、`IgcDatePicker`、`IgcDateRangePicker`、`IgcCalendar`、`IgcCarousel`、`IgcChip`、`IgcInput`、`IgcTree` + - グリッド コンポーネントで日付や数値などのデータをフォーマットおよびレンダリングするための新しい `Intl` 実装。以前 `igniteui-webcomponents` で使用されていた `IgcCalendar`、`IgcDatePicker`、`IgcDateRangePicker` の `Intl` 実装を更新しました。 + - 現在サポートされているすべての言語のリソース文字列を持つすべてのコンポーネントに対する新しいローカライゼーション実装。 + - 新しいパブリック ローカライゼーション API と、新しいリソースを含む `igniteui-i18n-resources` という名前のパッケージ。 +**PDF エクスポート** +- グリッド データを PDF 形式にエクスポートできる PDF エクスポート機能を追加しました。 + +**Popover API** +ドロップダウン メニューとダイアログが HTML Popover API を使用するようになり、より優れた配置とアクセシビリティを提供します。 + +## **{PackageVerChanges-25-2-DEC}** + ### 機能拡張 ### {PackageCharts} @@ -1898,4 +1982,4 @@ Ignite UI Web Components の初期リリース ### **{PackageDockManagerVerChanges-1.0.0}** -Ignite UI Dock Manager の初期リリース \ No newline at end of file +Ignite UI Dock Manager の初期リリース diff --git a/doc/jp/components/general-changelog-dv.md b/doc/jp/components/general-changelog-dv.md index f525e86ab..a436cf1a7 100644 --- a/doc/jp/components/general-changelog-dv.md +++ b/doc/jp/components/general-changelog-dv.md @@ -18,6 +18,20 @@ _language: ja ## **{PackageVerLatest}** +### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +| 2189 | IgxDataChart | ラベルがない場合に DataChart が軸のレンダリングをスキップする。 | +| 3055 | IgxDataPieChart | Others スライスのスタイル プロパティが不足している。 | +| 38668 | IgxDataTooltipLayer | チャートの TitleTextColor を使用すると TitleTextColor がオーバーライドされる。 | +| 40238 | Excel | Excel 数式パーサーを修正 - Workbook.Load() が Excel.FormulaParseException をスローする。 | +| 41167 | Excel | オブジェクトの数式がラウンドトリップされない - カメラ ツールのラウンドトリップの Excel サポートを追加。 | +| 41419 | Excel | VBA 署名付き Excel ファイルの保存時に署名/証明書が保持されない。 | +| 41594 | IgxDataChart | AssigningCategoryStyle の args.GetItems が null であるか、フラグメント シリーズのアイテム更新に機能しない。 | + +## **{PackageVerChanges-26-1-JAN}** + ### 機能拡張 ### {PackageCharts} diff --git a/doc/jp/components/layouts/dock-manager.md b/doc/jp/components/layouts/dock-manager.md index 661a3e31b..b35938e49 100644 --- a/doc/jp/components/layouts/dock-manager.md +++ b/doc/jp/components/layouts/dock-manager.md @@ -912,10 +912,19 @@ igc-dockmanager::part(content-pane) { ## ローカライズ -ドック マネージャー コンポーネントは、コンテキスト メニュー、ツールチップ、および aria 属性で使用される文字列のローカライズをサポートします。デフォルトでは、ドック マネージャー はその親の [lang](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang) 属性を検索してページの言語を検出します。[lang](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang) 属性が設定されていないか、ドック マネージャーがサポートしない値に設定されている場合、デフォルトの言語は [英語 (en)]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsEN) です。ドック マネージャーは、[英語 (en)]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsEN)、[日本語 (jp)]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsJP)、[韓国語 (ko)]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsKO)、[スペイン語 (es)]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsES) の組み込みローカライズ文字列を提供します。 +ドック マネージャーは、コンテキスト メニュー、ツールチップ、および ARIA 属性で使用される文字列のローカライズをサポートします。デフォルトでは、ルートの `` 要素の [lang](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang) 属性を読み取って使用する言語を決定します。[lang](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang) 属性が設定されていないか、サポートされていない値に設定されている場合、ドック マネージャーは [英語 (en)]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsEN) を使用します。 -その他の言語のリソース文字列を提供するには、[addResourceStrings]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#addResourceStrings) メソッドを使用します。 +スペイン語 (`es`)、日本語 (`ja`)、韓国語 (`ko`) の既製のドック マネージャー リソース文字列は、`igniteui-i18n-resources` ピア依存関係を通じて提供されます。これらの言語のいずれかを使用するには、`igniteui-i18n-resources` をインストールし、対応するバンドルを `igniteui-i18n-core` に登録します: + +```ts +import { registerI18n } from 'igniteui-i18n-core'; +import { DockManagerResourceStringsES } from 'igniteui-i18n-resources'; + +registerI18n(DockManagerResourceStringsES, 'es'); +``` + +別の言語をサポートする必要がある場合は、[addResourceStrings]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#addResourceStrings) メソッドを使用して独自の翻訳済み文字列を提供します: ```ts import { addResourceStrings } from 'igniteui-dockmanager'; @@ -929,7 +938,7 @@ addResourceStrings('fr', dockManagerStringsFr); ``` -ドック マネージャーは、文字列を変更できる `ResourceStrings` プロパティを公開します。`ResourceStrings` プロパティを設定すると、ドック マネージャーはどの [lang](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang) 属性が設定されていても文字列を使用します。 +ドック マネージャーは、個々の文字列を直接変更するために使用できる `ResourceStrings` プロパティも公開します。`ResourceStrings` プロパティを設定すると、ドック マネージャーはページの [lang](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang) 属性に関係なく、指定された文字列を使用します。 diff --git a/doc/jp/components/layouts/splitter.md b/doc/jp/components/layouts/splitter.md new file mode 100644 index 000000000..5881f8d15 --- /dev/null +++ b/doc/jp/components/layouts/splitter.md @@ -0,0 +1,187 @@ +--- +title: {Platform} スプリッター コンポーネント | レイアウト コントロール | Infragistics +_description: {ProductName} スプリッター コンポーネントを使用して、水平または垂直レイアウトでサイズ変更可能な 2 つのペインを作成し、折りたたみ/展開の動作、キーボード サポート、およびネストされた分割ビューを実現します。 +_keywords: スプリッター, 分割ペイン, サイズ変更可能なペイン, Web Components スプリッター, {Platform} スプリッター, {ProductName} +_language: ja +_license: MIT +mentionedTypes: ["Splitter"] +--- + +# {Platform} スプリッターの概要 + +{ProductName} スプリッターは、コンテンツを `start` と `end` の 2 つの領域に分割する、サイズ変更可能な分割ペイン レイアウトを提供します。ユーザーはスプリッター バーをドラッグしたり、キーボード ショートカットを使用したり、組み込みコントロールでペインを折りたたんだり展開したりできます。また、スプリッターをネストして複雑なダッシュボード スタイルのレイアウトを構築することもできます。 + +## {Platform} スプリッターの例 + +`sample="/layouts/splitter/base", height="520", alt="{Platform} スプリッターの例"` + +
+ +## 使用方法 + +まず、次のコマンドを実行して {ProductName} をインストールする必要があります: + +```cmd +npm install {PackageWebComponents} +``` + +`Splitter` を使用する前に、次のように登録する必要があります: + +```ts +import { defineComponents, IgcSplitterComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcSplitterComponent); +``` + +{ProductName} の概要については、[**作業の開始**](../general-getting-started.md) トピックを参照してください。 + +`start` スロットと `end` スロットを使用してペイン コンテンツを配置します: + +```html + +
Start pane content
+
End pane content
+ +``` + +### 方向 + +`orientation` プロパティを設定してペインの方向を制御します: + +- `horizontal` (デフォルト): start ペインと end ペインが左右に表示されます。 +- `vertical`: start ペインと end ペインが上下に表示されます。 + +```html + +
Top pane
+
Bottom pane
+ +``` + +### ペインのサイズと制約 + +サイズ プロパティを使用して、初期ペイン サイズと制約付きペイン サイズを設定します: + +- `start-size`、`end-size` +- `start-min-size`、`end-min-size` +- `start-max-size`、`end-max-size` + +値には `px` や `%` などの CSS 長さの値を指定できます。 + +```html + +
Navigation
+
Main content
+ +``` + +### 折りたたみとサイズ変更 + +以下のプロパティを使用してインタラクションを制御します: + +- `disable-resize`: ペインのサイズ変更を無効にします。 +- `disable-collapse`: ペインの折りたたみを無効にします。 +- `hide-drag-handle`: ドラッグ ハンドルを非表示にします。 +- `hide-collapse-buttons`: 折りたたみボタンと展開ボタンを非表示にします。 + +ペインをプログラムで折りたたんだり展開したりすることもできます: + +```ts +const splitter = document.querySelector('igc-splitter') as IgcSplitterComponent; + +splitter.toggle('start'); // collapse start pane +splitter.toggle('start'); // expand start pane +``` + +### ネストされたスプリッター + +スプリッターをネストして、複数の領域のレイアウトを作成できます。 + +`sample="/layouts/splitter/nested", height="520", alt="{Platform} ネストされたスプリッターの例"` + +## イベント + +スプリッターは、サイズ変更操作中に次のイベントを発行します: + +- `igcResizeStart`: サイズ変更の開始時に 1 回発行されます。 +- `igcResizing`: サイズ変更中に継続的に発行されます。 +- `igcResizeEnd`: サイズ変更の終了時に 1 回発行されます。 + +イベントの詳細には、進行中のイベントと終了イベントの現在の `startPanelSize`、`endPanelSize`、および `delta` が含まれます。 + +```ts +const splitter = document.querySelector('igc-splitter') as IgcSplitterComponent; + +splitter.addEventListener('igcResizeEnd', (event: CustomEvent) => { + console.log(event.detail.startPanelSize, event.detail.endPanelSize, event.detail.delta); +}); +``` + +## キーボード ナビゲーション + +スプリッター バーにフォーカスがある場合: + +| キー | 説明 | +| ---- | ----------- | +| ← / → | 水平方向のペインのサイズを変更します | +| ↑ / ↓ | 垂直方向のペインのサイズを変更します | +| Home | start ペインを最小サイズにスナップします | +| End | start ペインを最大サイズにスナップします | +| Ctrl + ← / ↑ | start ペインを折りたたむか展開します | +| Ctrl + → / ↓ | end ペインを折りたたむか展開します | + +## スタイル設定 + +`Splitter` コンポーネントは、スタイル設定のための CSS パーツを公開しています: + +| 名前 | 説明 | +| ---- | ----------- | +| `splitter-bar` | ペイン間のドラッグ可能なセパレーター | +| `drag-handle` | スプリッター バーのドラッグ ハンドル要素 | +| `start-pane` | start ペインのコンテナー | +| `end-pane` | end ペインのコンテナー | +| `start-collapse-btn` | start ペインを折りたたむボタン | +| `end-collapse-btn` | end ペインを折りたたむボタン | +| `start-expand-btn` | start ペインを展開するボタン | +| `end-expand-btn` | end ペインを展開するボタン | + +また、次のテーマ CSS 変数もサポートしています: + +- `--bar-color` +- `--handle-color` +- `--expander-color` +- `--bar-color-active` +- `--handle-color-active` +- `--expander-color-active` +- `--focus-color` +- `--size` + +```css +igc-splitter { + --bar-color: #011627; + --handle-color: #ecaa53; + --expander-color: #ecaa53; + --bar-color-active: #011627; + --handle-color-active: #ecaa53; + --expander-color-active: #ecaa53; + --focus-color: #ecaa53; +} +``` + +`sample="/layouts/splitter/styling", height="520", alt="{Platform} スプリッターのスタイリング例"` + +## API リファレンス + +- `Splitter` +- [`スタイル設定とテーマ`](../themes/overview.md) + +## その他のリソース + +- [{ProductName} **フォーラム**]({ForumsLink}) +- [{ProductName} **GitHub**]({GithubLink}) diff --git a/doc/jp/components/layouts/tile-manager.md b/doc/jp/components/layouts/tile-manager.md index b5cd42a44..24be3cca2 100644 --- a/doc/jp/components/layouts/tile-manager.md +++ b/doc/jp/components/layouts/tile-manager.md @@ -17,7 +17,8 @@ _language: ja `sample="/layouts/tile-manager/overview", height="752", scrollable, alt="{Platform} Tile Manager の例"` -> [!Warning] iframe の権限ポリシーにより、この例のフルスクリーン ボタンは、右上隅の Expand to fullscreen (フルスクリーンに展開) ボタンをクリックしてスタンドアロン モードで例を開いた場合にのみ機能します。 +> [!Warning] +> iframe の権限ポリシーにより、この例のフルスクリーン ボタンは、右上隅の Expand to fullscreen (フルスクリーンに展開) ボタンをクリックしてスタンドアロン モードで例を開いた場合にのみ機能します。 ## 使用方法 @@ -434,7 +435,8 @@ Tile コンポーネントは、使用できるいくつかのスロットも公 スムーズなサイズ変更を実現するために、タイルの大きさを直接変更するのではなく、ゴースト要素が使用されます。この要素は元のタイルの上に表示され、サイズ変更の開始時に現在のサイズで表示され、ユーザーがリサイズ ハンドルのいずれかをドラッグするとリアルタイムで更新されます。 -> [!Note] ゴースト要素が利用可能なグリッド スペースを超える場合、グリッドの制限内で可能な最大範囲に自動的に調整されます。 +> [!Note] +> ゴースト要素が利用可能なグリッド スペースを超える場合、グリッドの制限内で可能な最大範囲に自動的に調整されます。 タイルのサイズが変更されると、タイル マネージャーは自動的に再配置し、空きスペースが最小限になるようにします。そのため、タイルを拡大すると隣接するタイルが新しい位置に押し出され、縮小すると隙間ができ、他のタイルが動的に埋められる可能性があります。これにより、タイル マネージャーはタイルが重なることなく可能な限りコンパクトに保たれ、すべての動きが定義されたグリッド構造内にとどまります。 @@ -501,7 +503,8 @@ Tile コンポーネントは、使用できるいくつかのスロットも公 - `tile` オプションを使用すると、個々のタイルの任意の場所をクリックして押したままにすると、ドラッグを開始できます。 - `tile-header` オプションを使用すると、タイルのヘッダー セクションをクリックして押したままにするだけで、ドラッグ プロセスを開始できます。 -> [!Note] タイルが最大化または全画面表示の状態では、タイルをドラッグすることはできません。 +> [!Note] +> タイルが最大化または全画面表示の状態では、タイルをドラッグすることはできません。 サイズ変更と同様に、ドラッグ アンド ドロップ プロセスを開始すると、取得したタイルの下にゴースト要素が表示されます。タイルをドラッグすると、ゴースト要素も一緒に移動し、他のタイルの順序がリアルタイムで動的に変更されます。これにより、タイルをドロップしたときにタイルのグリッドがどのように表示されるかをプレビューできます。 diff --git a/docfx/en/components/toc.json b/docfx/en/components/toc.json index 85d1610b7..ec36b9771 100644 --- a/docfx/en/components/toc.json +++ b/docfx/en/components/toc.json @@ -1,8 +1,13 @@ [ + { + "name": "AI-Assisted Development", + "header": true + }, { "exclude": ["Blazor"], - "name": "AI-Assisted Development", - "header": true + "name": "Agent Workflow", + "href": "ai/ai-assisted-development-overview.md", + "status": "new" }, { "exclude": ["Blazor"], @@ -12,9 +17,19 @@ }, { "exclude": ["Blazor"], + "name": "CLI MCP", + "href": "ai/cli-mcp.md", + "status": "new" + }, + { "name": "Theming MCP", "href": "ai/theming-mcp.md", "status": "new" + }, + { + "name": "Maker Framework", + "href": "ai/maker-framework.md", + "status": "new" }, { "name": "General", @@ -95,7 +110,15 @@ "exclude": ["Angular", "Blazor"], "name": "Ignite UI CLI", "href": "general-cli-overview.md", - "status": "" + "status": "UPDATED", + "items": [ + { + "exclude": ["Angular", "Blazor"], + "name": "Step-by-Step Guide Using Ignite UI CLI", + "href": "general-step-by-step-guide-using-cli.md", + "status": "NEW" + } + ] }, { "exclude": ["Blazor", "Angular"], @@ -104,27 +127,33 @@ "status": "" }, { - "exclude": ["Blazor", "React", "WebComponents"], + "exclude": ["Angular", "Blazor"], "name": "How to", - "status": "", + "status": "NEW", "items": [ { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular", "Blazor", "React", "WebComponents"], "name": "Blazor Excel Library", "href": "blazor-excel-library-temporarily-stop-automatic-calculation-of-formulas-to-speed-up-processing.md", "status": "" }, { - "exclude": ["Angular", "React", "WebComponents"], + "exclude": ["Angular", "Blazor", "React", "WebComponents"], "name": "How To Read & Write Excel Files To Reduce Server Load", "href": "blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.md", "status": "" }, { - "exclude": ["Angular", "React", "WebComponents", "Blazor"], + "exclude": ["Angular", "Blazor", "React", "WebComponents"], "name": "How To Customize Marker Display in Blazor Charts", "href": "customize-marker-display-in-blazor-charts.md", "status": "" + }, + { + "exclude": ["Angular", "Blazor"], + "name": "Build App with CLI MCP and Theming MCP", + "href": "general-how-to-mcp-e2e.md", + "status": "new" } ] }, diff --git a/src/ext/MarkdownTransformer.ts b/src/ext/MarkdownTransformer.ts index 383f4fdea..41a7711f0 100644 --- a/src/ext/MarkdownTransformer.ts +++ b/src/ext/MarkdownTransformer.ts @@ -1000,6 +1000,10 @@ function getComponentsFromComment(node: any) : string[] { return getComponentsFromString(node.value); } +function shouldDeleteHtmlNode(value: string): boolean { + return value.trim().length === 0; +} + function finishRemove(options: any) { function removeNodes(node: any, index: number, parent: any) { if (options.toDelete.has(node)) { @@ -1255,11 +1259,22 @@ function omitPlatformSpecificSections(options: any) { options.toDelete.add(parent.children[ind]); } parent.children[checkIndex].value = parent.children[checkIndex].value.substring(0, startSeg.startIndex); - if (parent.children[checkIndex].value.length == 0) { + if (shouldDeleteHtmlNode(parent.children[checkIndex].value)) { options.toDelete.add(parent.children[checkIndex]) } parent.children[index].value = parent.children[index].value.substring(segment.endIndex); - if (parent.children[index].value.length == 0) { + if (shouldDeleteHtmlNode(parent.children[index].value)) { + options.toDelete.add(parent.children[index]); + } + break; + } else if (platformsEqual(currPlats, segment.platforms) && segment.platforms.indexOf(options.platform) != -1) { + // platform matches: keep content but remove the comment markers + parent.children[checkIndex].value = parent.children[checkIndex].value.substring(0, startSeg.startIndex); + if (shouldDeleteHtmlNode(parent.children[checkIndex].value)) { + options.toDelete.add(parent.children[checkIndex]); + } + parent.children[index].value = parent.children[index].value.substring(segment.endIndex); + if (shouldDeleteHtmlNode(parent.children[index].value)) { options.toDelete.add(parent.children[index]); } break; @@ -1303,11 +1318,11 @@ function omitComponentSpecificSections(options: any) { options.toDelete.add(parent.children[ind]); } parent.children[checkIndex].value = parent.children[checkIndex].value.substring(0, startSeg.startIndex); - if (parent.children[checkIndex].value.length == 0) { + if (shouldDeleteHtmlNode(parent.children[checkIndex].value)) { options.toDelete.add(parent.children[checkIndex]) } parent.children[index].value = parent.children[index].value.substring(segment.endIndex); - if (parent.children[index].value.length == 0) { + if (shouldDeleteHtmlNode(parent.children[index].value)) { options.toDelete.add(parent.children[index]); } break; @@ -1809,7 +1824,7 @@ export class MarkdownTransformer { .use(finishRemoveBlocks, options) .use(transformNotes, options) .use(finishRemoveNotes, options) - .use(stringify) + .use(stringify, { rule: '-', ruleRepetition: 3, ruleSpaces: false, emphasis: '_', fences: true }) .process(fileContent, function(err: any, vfile: any) { if (err) { callback(err, null); @@ -1821,6 +1836,9 @@ export class MarkdownTransformer { fileContent = fileContent.split("* ").join("- ").split("* ").join("- "); // unordered lists: "* " -> "- " fileContent = fileContent.split(" - ").join(" - ").split(" - ").join(" - "); // no extra indent fileContent = fileContent.split(". ").join(". "); // no extra space after item of ordered list + fileContent = fileContent.split("\\[!").join("[!"); // note blocks: remark-stringify escapes "[" in "[!NOTE]" as "\[!NOTE]" + fileContent = fileContent.replace(/\n*\n*/g, "\n"); // remark-stringify inserts empty comments as list separators + fileContent = fileContent.replace(/\n{3,}/g, "\n\n"); // collapse excessive blank lines left after marker removal output.push({ content: fileContent, componentOutput: componentOutput }); diff --git a/stats/docStats-Angular.json b/stats/docStats-Angular.json index a4b0cf90b..42c3ee357 100644 --- a/stats/docStats-Angular.json +++ b/stats/docStats-Angular.json @@ -764,7 +764,7 @@ "https://staging.infragistics.com/products/ignite-ui-angular/angular/components/geo-map-type-shape-polyline-series" ] }, - "topicsCount": 101, + "topicsCount": 103, "topicsHost": "https://staging.infragistics.com/products/ignite-ui-angular/angular/components", "topicsNote": "the 'topicsWithSamples' provides lookup of topics that used at least 1 sample", "topicsWithSamples": { diff --git a/stats/docStats-Blazor.json b/stats/docStats-Blazor.json index 6f37d02dd..9efedef89 100644 --- a/stats/docStats-Blazor.json +++ b/stats/docStats-Blazor.json @@ -2,7 +2,7 @@ "note": "this auto-generated file provides stats about samples used in Blazor documentation", "info": "you can lookup samples in 'samplesUsage' or lookup topics in 'topicsWithSamples' ", "platform": "Blazor", - "samplesCount": 706, + "samplesCount": 754, "samplesHost": "https://staging.infragistics.com/blazor-client/samples", "samplesNote": "the 'samplesUsage' provides lookup of samples usage in topics", "samplesUsage": { @@ -430,6 +430,9 @@ "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-chart/type-scatter-polyline-series": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/shape-chart" ], + "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-chart/user-annotation-layer": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/features/chart-user-annotations" + ], "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-chart/waterfall-chart": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/column-chart" ], @@ -785,6 +788,36 @@ "https://staging.infragistics.com/blazor-client/samples/samples/grids/data-grid/row-selection": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/data-grid/cell-selection" ], + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/column-config-dynamic": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grid-lite/column-configuration" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/data-binding": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grid-lite/binding" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/filtering-config": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grid-lite/filtering" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/filtering-config-events": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grid-lite/filtering" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/overview": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grid-lite/overview" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/sort-config-events": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grid-lite/sorting" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/sort-config-grid": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grid-lite/sorting" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/sort-config-sample": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grid-lite/sorting" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/styling-config-themes": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grid-lite/theming" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/styling-custom-theme": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grid-lite/theming" + ], "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/action-strip": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/grid/row-actions" ], @@ -809,6 +842,9 @@ "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/cell-editing-styling": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/grid/cell-editing" ], + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/cell-merge": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/grid/cell-merging" + ], "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/cell-selection-mode": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/grid/cell-selection", "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/grid/selection" @@ -846,6 +882,9 @@ "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/column-pinning": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/grid/column-pinning" ], + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/column-pinning-both-sides": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/grid/column-pinning" + ], "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/column-pinning-options": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/grid/column-pinning" ], @@ -1087,6 +1126,9 @@ "https://staging.infragistics.com/blazor-client/samples/samples/grids/hierarchical-grid/cell-editing-styling": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/hierarchical-grid/cell-editing" ], + "https://staging.infragistics.com/blazor-client/samples/samples/grids/hierarchical-grid/cell-merge": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/hierarchical-grid/cell-merging" + ], "https://staging.infragistics.com/blazor-client/samples/samples/grids/hierarchical-grid/cell-selection-mode": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/hierarchical-grid/cell-selection", "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/hierarchical-grid/selection" @@ -1118,6 +1160,9 @@ "https://staging.infragistics.com/blazor-client/samples/samples/grids/hierarchical-grid/column-pinning": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/hierarchical-grid/column-pinning" ], + "https://staging.infragistics.com/blazor-client/samples/samples/grids/hierarchical-grid/column-pinning-both-sides": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/hierarchical-grid/column-pinning" + ], "https://staging.infragistics.com/blazor-client/samples/samples/grids/hierarchical-grid/column-pinning-options": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/hierarchical-grid/column-pinning" ], @@ -1369,6 +1414,9 @@ "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/cell-editing-styling": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree-grid/cell-editing" ], + "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/cell-merge": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree-grid/cell-merging" + ], "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/cell-selection-mode": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree-grid/cell-selection", "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree-grid/selection" @@ -1403,6 +1451,9 @@ "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/column-pinning": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree-grid/column-pinning" ], + "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/column-pinning-both-sides": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree-grid/column-pinning" + ], "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/column-pinning-options": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree-grid/column-pinning" ], @@ -1610,6 +1661,9 @@ "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree/styling": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree" ], + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/badge/dot": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/badge" + ], "https://staging.infragistics.com/blazor-client/samples/samples/inputs/badge/outlined": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/badge" ], @@ -1802,6 +1856,18 @@ "https://staging.infragistics.com/blazor-client/samples/samples/inputs/linear-progress-indicator/types": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/linear-progress" ], + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/mask-input/applying-mask": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/mask-input" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/mask-input/overview": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/mask-input" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/mask-input/styling": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/mask-input" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/mask-input/value-modes": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/mask-input" + ], "https://staging.infragistics.com/blazor-client/samples/samples/inputs/radio/alignment": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/radio" ], @@ -1913,6 +1979,24 @@ "https://staging.infragistics.com/blazor-client/samples/samples/inputs/textarea/styling": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/text-area" ], + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/tooltip/advanced": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/tooltip" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/tooltip/overview": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/tooltip" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/tooltip/placement": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/tooltip" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/tooltip/rich": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/tooltip" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/tooltip/styling": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/tooltip" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/tooltip/triggers": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/tooltip" + ], "https://staging.infragistics.com/blazor-client/samples/samples/layouts/accordion/customization": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/accordion" ], @@ -1964,6 +2048,21 @@ "https://staging.infragistics.com/blazor-client/samples/samples/layouts/carousel/thumbnail": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/carousel" ], + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/divider/dashed": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/divider" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/divider/middle": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/divider" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/divider/overview": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/divider" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/divider/select": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/divider" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/divider/vertical": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/divider" + ], "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/customize-buttons": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager" ], @@ -2027,6 +2126,27 @@ "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tabs/styling": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tabs" ], + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tile-manager/actions": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tile-manager" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tile-manager/columngap": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tile-manager" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tile-manager/dragndrop": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tile-manager" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tile-manager/layout": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tile-manager" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tile-manager/overview": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tile-manager" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tile-manager/resize": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tile-manager" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tile-manager/styling": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tile-manager" + ], "https://staging.infragistics.com/blazor-client/samples/samples/maps/geo-map/binding-data-csv": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/geo-map-binding-data-csv" ], @@ -2139,6 +2259,12 @@ "https://staging.infragistics.com/blazor-client/samples/samples/notifications/toast/styling": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/notifications/toast" ], + "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/calendar/disabled-dates": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/calendar" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/calendar/header": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/calendar" + ], "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/calendar/multiple-months": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/calendar" ], @@ -2154,6 +2280,9 @@ "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/calendar/size": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/calendar" ], + "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/calendar/special-dates": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/calendar" + ], "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/calendar/styling": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/calendar" ], @@ -2175,6 +2304,21 @@ "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/date-picker/styling": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/date-picker" ], + "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/date-range-picker/custom-ranges": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/date-range-picker" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/date-range-picker/form": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/date-range-picker" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/date-range-picker/overview": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/date-range-picker" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/date-range-picker/slots": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/date-range-picker" + ], + "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/date-range-picker/styling": [ + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/date-range-picker" + ], "https://staging.infragistics.com/blazor-client/samples/samples/{ComponentSample}/data-exporting-indicator": [ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/_shared/toolbar" ], @@ -2188,7 +2332,7 @@ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/_shared/toolbar" ] }, - "topicsCount": 292, + "topicsCount": 309, "topicsHost": "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components", "topicsNote": "the 'topicsWithSamples' provides lookup of topics that used at least 1 sample", "topicsWithSamples": { @@ -2350,6 +2494,9 @@ "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-chart/dash-array-trendline", "https://staging.infragistics.com/blazor-client/samples/samples/charts/financial-chart/trendlines" ], + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/features/chart-user-annotations": [ + "https://staging.infragistics.com/blazor-client/samples/samples/charts/data-chart/user-annotation-layer" + ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/area-chart": [ "https://staging.infragistics.com/blazor-client/samples/samples/charts/category-chart/area-chart-multiple-sources", "https://staging.infragistics.com/blazor-client/samples/samples/charts/category-chart/area-chart-single-source", @@ -2593,6 +2740,28 @@ "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/geo-map-type-shape-polyline-series": [ "https://staging.infragistics.com/blazor-client/samples/samples/maps/geo-map/type-shape-polyline-series" ], + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grid-lite/binding": [ + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/data-binding" + ], + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grid-lite/column-configuration": [ + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/column-config-dynamic" + ], + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grid-lite/filtering": [ + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/filtering-config", + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/filtering-config-events" + ], + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grid-lite/overview": [ + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/overview" + ], + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grid-lite/sorting": [ + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/sort-config-events", + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/sort-config-grid", + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/sort-config-sample" + ], + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grid-lite/theming": [ + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/styling-config-themes", + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid-lite/styling-custom-theme" + ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/_shared/toolbar": [ "https://staging.infragistics.com/blazor-client/samples/samples/{ComponentSample}/data-exporting-indicator", "https://staging.infragistics.com/blazor-client/samples/samples/{ComponentSample}/toolbar-sample-3", @@ -2705,6 +2874,9 @@ "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/editing-events", "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/editing-excel-style-custom" ], + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/grid/cell-merging": [ + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/cell-merge" + ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/grid/cell-selection": [ "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/cell-selection-mode", "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/cell-selection-style", @@ -2726,6 +2898,7 @@ ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/grid/column-pinning": [ "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/column-pinning", + "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/column-pinning-both-sides", "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/column-pinning-options", "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/column-pinning-right-side", "https://staging.infragistics.com/blazor-client/samples/samples/grids/grid/column-pinning-styles" @@ -2878,6 +3051,9 @@ "https://staging.infragistics.com/blazor-client/samples/samples/grids/hierarchical-grid/editing-columns", "https://staging.infragistics.com/blazor-client/samples/samples/grids/hierarchical-grid/editing-events" ], + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/hierarchical-grid/cell-merging": [ + "https://staging.infragistics.com/blazor-client/samples/samples/grids/hierarchical-grid/cell-merge" + ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/hierarchical-grid/cell-selection": [ "https://staging.infragistics.com/blazor-client/samples/samples/grids/hierarchical-grid/cell-selection-mode", "https://staging.infragistics.com/blazor-client/samples/samples/grids/hierarchical-grid/cell-selection-style" @@ -2898,6 +3074,7 @@ ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/hierarchical-grid/column-pinning": [ "https://staging.infragistics.com/blazor-client/samples/samples/grids/hierarchical-grid/column-pinning", + "https://staging.infragistics.com/blazor-client/samples/samples/grids/hierarchical-grid/column-pinning-both-sides", "https://staging.infragistics.com/blazor-client/samples/samples/grids/hierarchical-grid/column-pinning-options", "https://staging.infragistics.com/blazor-client/samples/samples/grids/hierarchical-grid/column-pinning-right-side", "https://staging.infragistics.com/blazor-client/samples/samples/grids/hierarchical-grid/column-pinning-styles" @@ -3069,6 +3246,9 @@ "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/editing-columns", "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/editing-events" ], + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree-grid/cell-merging": [ + "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/cell-merge" + ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree-grid/cell-selection": [ "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/cell-selection-mode", "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/cell-selection-style", @@ -3090,6 +3270,7 @@ ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree-grid/column-pinning": [ "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/column-pinning", + "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/column-pinning-both-sides", "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/column-pinning-options", "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/column-pinning-right-side", "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/column-pinning-styles" @@ -3214,6 +3395,7 @@ "https://staging.infragistics.com/blazor-client/samples/samples/grids/tree-grid/toolbar-style" ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/badge": [ + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/badge/dot", "https://staging.infragistics.com/blazor-client/samples/samples/inputs/badge/outlined", "https://staging.infragistics.com/blazor-client/samples/samples/inputs/badge/shape", "https://staging.infragistics.com/blazor-client/samples/samples/inputs/badge/styling", @@ -3309,6 +3491,12 @@ "https://staging.infragistics.com/blazor-client/samples/samples/inputs/linear-progress-indicator/styling", "https://staging.infragistics.com/blazor-client/samples/samples/inputs/linear-progress-indicator/types" ], + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/mask-input": [ + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/mask-input/applying-mask", + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/mask-input/overview", + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/mask-input/styling", + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/mask-input/value-modes" + ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/radio": [ "https://staging.infragistics.com/blazor-client/samples/samples/inputs/radio/alignment", "https://staging.infragistics.com/blazor-client/samples/samples/inputs/radio/disabled", @@ -3360,6 +3548,14 @@ "https://staging.infragistics.com/blazor-client/samples/samples/inputs/textarea/slots", "https://staging.infragistics.com/blazor-client/samples/samples/inputs/textarea/styling" ], + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/tooltip": [ + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/tooltip/advanced", + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/tooltip/overview", + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/tooltip/placement", + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/tooltip/rich", + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/tooltip/styling", + "https://staging.infragistics.com/blazor-client/samples/samples/inputs/tooltip/triggers" + ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/accordion": [ "https://staging.infragistics.com/blazor-client/samples/samples/layouts/accordion/customization", "https://staging.infragistics.com/blazor-client/samples/samples/layouts/accordion/nested-scenario", @@ -3385,6 +3581,13 @@ "https://staging.infragistics.com/blazor-client/samples/samples/layouts/carousel/overview", "https://staging.infragistics.com/blazor-client/samples/samples/layouts/carousel/thumbnail" ], + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/divider": [ + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/divider/dashed", + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/divider/middle", + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/divider/overview", + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/divider/select", + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/divider/vertical" + ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager": [ "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/customize-buttons", "https://staging.infragistics.com/blazor-client/samples/samples/layouts/dock-manager/overview", @@ -3420,6 +3623,15 @@ "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tabs/scrolling", "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tabs/styling" ], + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tile-manager": [ + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tile-manager/actions", + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tile-manager/columngap", + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tile-manager/dragndrop", + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tile-manager/layout", + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tile-manager/overview", + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tile-manager/resize", + "https://staging.infragistics.com/blazor-client/samples/samples/layouts/tile-manager/styling" + ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/linear-gauge": [ "https://staging.infragistics.com/blazor-client/samples/samples/gauges/linear-gauge/animation", "https://staging.infragistics.com/blazor-client/samples/samples/gauges/linear-gauge/backing", @@ -3480,11 +3692,14 @@ "https://staging.infragistics.com/blazor-client/samples/samples/gauges/radial-gauge/tickmarks" ], "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/calendar": [ + "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/calendar/disabled-dates", + "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/calendar/header", "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/calendar/multiple-months", "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/calendar/multiple-selection", "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/calendar/overview", "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/calendar/range-selection", "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/calendar/size", + "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/calendar/special-dates", "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/calendar/styling", "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/calendar/week-numbers" ], @@ -3494,6 +3709,13 @@ "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/date-picker/format", "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/date-picker/overview", "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/date-picker/styling" + ], + "https://staging.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/date-range-picker": [ + "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/date-range-picker/custom-ranges", + "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/date-range-picker/form", + "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/date-range-picker/overview", + "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/date-range-picker/slots", + "https://staging.infragistics.com/blazor-client/samples/samples/scheduling/date-range-picker/styling" ] } } \ No newline at end of file diff --git a/stats/docStats-React.json b/stats/docStats-React.json index fa66a164f..f2df07dec 100644 --- a/stats/docStats-React.json +++ b/stats/docStats-React.json @@ -2,7 +2,7 @@ "note": "this auto-generated file provides stats about samples used in React documentation", "info": "you can lookup samples in 'samplesUsage' or lookup topics in 'topicsWithSamples' ", "platform": "React", - "samplesCount": 780, + "samplesCount": 783, "samplesHost": "https://staging.infragistics.com/react-demos/samples", "samplesNote": "the 'samplesUsage' provides lookup of samples usage in topics", "samplesUsage": { @@ -1067,6 +1067,9 @@ "https://staging.infragistics.com/react-demos/samples/samples/grids/grid/layout-display-density": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/grids/grid/size" ], + "https://staging.infragistics.com/react-demos/samples/samples/grids/grid/localization": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/localization" + ], "https://staging.infragistics.com/react-demos/samples/samples/grids/grid/master-detail": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/grids/grid/master-detail" ], @@ -2065,6 +2068,12 @@ "https://staging.infragistics.com/react-demos/samples/samples/interactions/chat/styling": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/interactivity/chat" ], + "https://staging.infragistics.com/react-demos/samples/samples/interactions/query-builder/overview": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/query-builder" + ], + "https://staging.infragistics.com/react-demos/samples/samples/interactions/query-builder/template": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/query-builder" + ], "https://staging.infragistics.com/react-demos/samples/samples/layouts/accordion/customization": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/layouts/accordion" ], @@ -2409,7 +2418,7 @@ "https://staging.infragistics.com/products/ignite-ui-react/react/components/grids/_shared/toolbar" ] }, - "topicsCount": 326, + "topicsCount": 333, "topicsHost": "https://staging.infragistics.com/products/ignite-ui-react/react/components", "topicsNote": "the 'topicsWithSamples' provides lookup of topics that used at least 1 sample", "topicsWithSamples": { @@ -3596,6 +3605,10 @@ "https://staging.infragistics.com/react-demos/samples/samples/inputs/mask-input/styling", "https://staging.infragistics.com/react-demos/samples/samples/inputs/mask-input/value-modes" ], + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/query-builder": [ + "https://staging.infragistics.com/react-demos/samples/samples/interactions/query-builder/overview", + "https://staging.infragistics.com/react-demos/samples/samples/interactions/query-builder/template" + ], "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/radio": [ "https://staging.infragistics.com/react-demos/samples/samples/inputs/radio/alignment", "https://staging.infragistics.com/react-demos/samples/samples/inputs/radio/disabled", @@ -3746,6 +3759,9 @@ "https://staging.infragistics.com/react-demos/samples/samples/gauges/linear-gauge/scale", "https://staging.infragistics.com/react-demos/samples/samples/gauges/linear-gauge/tickmarks" ], + "https://staging.infragistics.com/products/ignite-ui-react/react/components/localization": [ + "https://staging.infragistics.com/react-demos/samples/samples/grids/grid/localization" + ], "https://staging.infragistics.com/products/ignite-ui-react/react/components/menus/navbar": [ "https://staging.infragistics.com/react-demos/samples/samples/menus/nav-bar/overview", "https://staging.infragistics.com/react-demos/samples/samples/menus/nav-bar/styling" diff --git a/stats/docStats-WC.json b/stats/docStats-WC.json index b4d343802..d44ff8b19 100644 --- a/stats/docStats-WC.json +++ b/stats/docStats-WC.json @@ -2,7 +2,7 @@ "note": "this auto-generated file provides stats about samples used in WebComponents documentation", "info": "you can lookup samples in 'samplesUsage' or lookup topics in 'topicsWithSamples' ", "platform": "WebComponents", - "samplesCount": 815, + "samplesCount": 821, "samplesHost": "https://staging.infragistics.com/webcomponents-demos/samples", "samplesNote": "the 'samplesUsage' provides lookup of samples usage in topics", "samplesUsage": { @@ -1085,6 +1085,9 @@ "https://staging.infragistics.com/webcomponents-demos/samples/samples/grids/grid/layout-display-density": [ "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/size" ], + "https://staging.infragistics.com/webcomponents-demos/samples/samples/grids/grid/localization": [ + "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/localization" + ], "https://staging.infragistics.com/webcomponents-demos/samples/samples/grids/grid/master-detail": [ "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/master-detail" ], @@ -2139,6 +2142,12 @@ "https://staging.infragistics.com/webcomponents-demos/samples/samples/interactions/chat/styling": [ "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/interactivity/chat" ], + "https://staging.infragistics.com/webcomponents-demos/samples/samples/interactions/query-builder/overview": [ + "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/query-builder" + ], + "https://staging.infragistics.com/webcomponents-demos/samples/samples/interactions/query-builder/template": [ + "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/query-builder" + ], "https://staging.infragistics.com/webcomponents-demos/samples/samples/layouts/accordion/customization": [ "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/accordion" ], @@ -2262,6 +2271,15 @@ "https://staging.infragistics.com/webcomponents-demos/samples/samples/layouts/icon/styling": [ "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/icon" ], + "https://staging.infragistics.com/webcomponents-demos/samples/samples/layouts/splitter/base": [ + "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/splitter" + ], + "https://staging.infragistics.com/webcomponents-demos/samples/samples/layouts/splitter/nested": [ + "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/splitter" + ], + "https://staging.infragistics.com/webcomponents-demos/samples/samples/layouts/splitter/styling": [ + "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/splitter" + ], "https://staging.infragistics.com/webcomponents-demos/samples/samples/layouts/stepper/animations": [ "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/stepper" ], @@ -2514,7 +2532,7 @@ "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/_shared/toolbar" ] }, - "topicsCount": 338, + "topicsCount": 346, "topicsHost": "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components", "topicsNote": "the 'topicsWithSamples' provides lookup of topics that used at least 1 sample", "topicsWithSamples": { @@ -3740,6 +3758,10 @@ "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/mask-input/styling", "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/mask-input/value-modes" ], + "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/query-builder": [ + "https://staging.infragistics.com/webcomponents-demos/samples/samples/interactions/query-builder/overview", + "https://staging.infragistics.com/webcomponents-demos/samples/samples/interactions/query-builder/template" + ], "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/radio": [ "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/radio/alignment", "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/radio/disabled", @@ -3868,6 +3890,11 @@ "https://staging.infragistics.com/webcomponents-demos/samples/samples/layouts/icon/sizing", "https://staging.infragistics.com/webcomponents-demos/samples/samples/layouts/icon/styling" ], + "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/splitter": [ + "https://staging.infragistics.com/webcomponents-demos/samples/samples/layouts/splitter/base", + "https://staging.infragistics.com/webcomponents-demos/samples/samples/layouts/splitter/nested", + "https://staging.infragistics.com/webcomponents-demos/samples/samples/layouts/splitter/styling" + ], "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/stepper": [ "https://staging.infragistics.com/webcomponents-demos/samples/samples/layouts/stepper/animations", "https://staging.infragistics.com/webcomponents-demos/samples/samples/layouts/stepper/linear", @@ -3901,6 +3928,9 @@ "https://staging.infragistics.com/webcomponents-demos/samples/samples/gauges/linear-gauge/scale", "https://staging.infragistics.com/webcomponents-demos/samples/samples/gauges/linear-gauge/tickmarks" ], + "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/localization": [ + "https://staging.infragistics.com/webcomponents-demos/samples/samples/grids/grid/localization" + ], "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/menus/navbar": [ "https://staging.infragistics.com/webcomponents-demos/samples/samples/menus/nav-bar/overview", "https://staging.infragistics.com/webcomponents-demos/samples/samples/menus/nav-bar/styling" diff --git a/test/transformation.spec.ts b/test/transformation.spec.ts index b96f7bd33..ba2e3161d 100644 --- a/test/transformation.spec.ts +++ b/test/transformation.spec.ts @@ -1,10 +1,29 @@ import { expect } from "chai"; import { SearchHandler, defaultFileGroups, allLangs, allPlatforms, Platform } from "./testing-library"; +import { MarkdownTransformer } from "../src/ext/MarkdownTransformer"; +import { MappingLoader, APIPlatform } from "../src/ext/MappingLoader"; +import * as docConfig from "../docConfig.json"; describe("Transformation Tests", () => { const testPlatform = process.env.npm_config_testPlatform || ""; + function transformForPlatform(platform: APIPlatform, content: string): Promise { + const transformer = new MarkdownTransformer(); + transformer.configure(new MappingLoader(), platform, docConfig[APIPlatform[platform] as keyof typeof docConfig], "development"); + + return new Promise((resolve, reject) => { + transformer.transformContent("TestType", content, "doc/en/components/test.md", (err, results) => { + if (err) { + reject(err); + return; + } + + resolve(results![0].content); + }); + }); + } + it("should not have any files with leftover replacement words", async () => { let testPlatforms = !testPlatform.length ? allPlatforms : [testPlatform]; for (const platform of testPlatforms) { @@ -16,4 +35,47 @@ describe("Transformation Tests", () => { expect(result).to.eql([]); } }); + + it("should remove empty platform marker nodes without emitting blank comments", async () => { + const content = [ + "# Title", + "", + "", + "React only paragraph.", + "", + "", + "", + "Angular only paragraph.", + "", + "", + "After section." + ].join("\n"); + + const output = await transformForPlatform(APIPlatform.React, content); + + expect(output).to.contain("React only paragraph."); + expect(output).to.not.contain("Angular only paragraph."); + expect(output).to.not.contain(""); + expect(output).to.not.contain(""); + expect(output).to.not.match(/\n{3,}/); + }); + + it("should not leave empty comments between adjacent lists after marker removal", async () => { + const content = [ + "## Resources", + "", + "", + "- [Link A](./a.md)", + "- [Link B](./b.md)", + "", + "- [Link C](./c.md)", + ].join("\n"); + + const output = await transformForPlatform(APIPlatform.React, content); + + expect(output).to.contain("- [Link A](./a.md)"); + expect(output).to.contain("- [Link C](./c.md)"); + expect(output).to.not.contain(""); + expect(output).to.not.match(/\n{3,}/); + }); });