Skip to content

Commit fbfdbd2

Browse files
dkalinovInfradkalinovInfra
authored
Merge pull request #1573 from IgniteUI/mstoyanova/react_skills
Add Ignite UI for React skills
2 parents 132541e + 391c3af commit fbfdbd2

16 files changed

Lines changed: 2766 additions & 0 deletions

File tree

‎packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/SKILL.md‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
---
2+
name: igniteui-react-components
3+
description: This skill identifies the right Ignite UI for React components for any UI pattern and covers installing, importing, and using them — including JSX patterns, event handling, refs, forms, and TypeScript. Use this when choosing components, setting up a React project, writing component JSX, handling events, or integrating with React state and form libraries.
4+
user-invocable: true
5+
---
6+
7+
# Ignite UI for React Components
8+
9+
This skill covers everything from identifying the right component for a UI requirement to installing, setting up, and using Ignite UI for React components — including JSX patterns, event handling, refs, controlled/uncontrolled form components, and TypeScript.
10+
11+
## Example Usage
12+
13+
- "What component should I use to display a list of items with actions?"
14+
- "I need a date picker for a booking form in React"
15+
- "Build a dashboard layout with cards and a data grid"
16+
- "What's the best component for a navigation sidebar?"
17+
- "I need a searchable dropdown with multi-select"
18+
- "How do I install Ignite UI for React?"
19+
- "Set up igniteui-react in my project"
20+
- "How do I handle events on IgrCombo?"
21+
- "How do I use IgrInput with React Hook Form?"
22+
- "Show me how to use refs with IgrDialog"
23+
- "What TypeScript types should I use for IgrButton props?"
24+
- "How do I pass children vs slots to Ignite UI components?"
25+
26+
## Related Skills
27+
28+
- [igniteui-react-customize-theme](../igniteui-react-customize-theme/SKILL.md) — Theme and style components
29+
- [igniteui-react-optimize-bundle-size](../igniteui-react-optimize-bundle-size/SKILL.md) — Reduce bundle size
30+
31+
## When to Use
32+
33+
- Deciding which component fits a UI requirement
34+
- User describes a UI pattern and needs a matching component name
35+
- User wants to explore what components are available
36+
- Setting up Ignite UI for React in a new or existing project
37+
- Writing JSX that uses Ignite UI components
38+
- Handling events from Ignite UI components
39+
- Integrating components with React state or form libraries
40+
- Using refs to call imperative methods on components
41+
- Working with TypeScript prop types
42+
43+
---
44+
45+
## Content Guide
46+
47+
This skill is organized into focused reference files. Load the appropriate file for the situation:
48+
49+
| Topic | File | When to Use |
50+
|---|---|---|
51+
| Component Catalogue | [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) | Mapping UI patterns to components, available packages, common UI scenarios |
52+
| Installation & Setup | [INSTALLATION.md](./reference/INSTALLATION.md) | Setting up packages, importing theme CSS, Next.js setup |
53+
| JSX Patterns | [JSX-PATTERNS.md](./reference/JSX-PATTERNS.md) | Props, children, slots, IgrTabs content vs navigation |
54+
| Event Handling | [EVENT-HANDLING.md](./reference/EVENT-HANDLING.md) | Event props, CustomEvent types, common events |
55+
| Refs & Forms | [REFS-FORMS.md](./reference/REFS-FORMS.md) | useRef, controlled/uncontrolled forms, React Hook Form |
56+
| Charts, Gauges, Maps & Grid Lite | [CHARTS-GRIDS.md](./reference/CHARTS-GRIDS.md) | Module registration, container sizing |
57+
| Reveal SDK | [REVEAL-SDK.md](./reference/REVEAL-SDK.md) | Embedded BI dashboards, theme sync |
58+
| Troubleshooting | [TROUBLESHOOTING.md](./reference/TROUBLESHOOTING.md) | Common issues and solutions |
59+
60+
---
61+
62+
## Quick Start
63+
64+
### 1. Install
65+
66+
```bash
67+
npm install igniteui-react
68+
```
69+
70+
### 2. Import Theme CSS (REQUIRED)
71+
72+
```tsx
73+
// main.tsx
74+
import 'igniteui-webcomponents/themes/light/bootstrap.css';
75+
```
76+
77+
> **CRITICAL:** Without the theme CSS, components will render without styles and icons will be broken. See [INSTALLATION.md](./reference/INSTALLATION.md) for all available themes and setup.
78+
79+
### 3. Use Components
80+
81+
```tsx
82+
import { IgrButton, IgrInput } from 'igniteui-react';
83+
84+
function App() {
85+
return (
86+
<div>
87+
<IgrInput label="Name" />
88+
<IgrButton><span>Submit</span></IgrButton>
89+
</div>
90+
);
91+
}
92+
```
93+
94+
> **No `defineComponents()` needed.** React wrappers auto-register. See [CHARTS-GRIDS.md](./reference/CHARTS-GRIDS.md) for exceptions (charts, gauges, maps).
95+
96+
---
97+
98+
## Key Concepts
99+
100+
### Choosing the Right Component
101+
102+
Use [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) to map any UI need to the right `Igr*` component and package. For quick guidance:
103+
104+
- **MIT package** (`igniteui-react`) — inputs, buttons, layout, navigation, notifications, scheduling, AI chat
105+
- **Lightweight grid** (MIT) — `IgrGridLite` from `igniteui-react/grid-lite` (requires both `igniteui-react` and `igniteui-grid-lite`)
106+
- **Commercial** — `igniteui-react-grids` (advanced grids), `igniteui-react-charts`, `igniteui-react-gauges`, `igniteui-react-maps`
107+
108+
### Theme CSS Import
109+
110+
- **Always import theme CSS** before using components. **For grids**, also import `igniteui-react-grids/grids/themes/...`
111+
- see [INSTALLATION.md](./reference/INSTALLATION.md)
112+
113+
### JSX Patterns
114+
115+
- Use props just like any React component
116+
- Use `slot` attribute for named slots: `<span slot="icon">📊</span>`
117+
- See [JSX-PATTERNS.md](./reference/JSX-PATTERNS.md)
118+
119+
### IgrTabs: Content vs Navigation
120+
121+
- **Content panels**: Use `IgrTab` with inline content (label via `label` prop or `slot="label"`)
122+
- **Navigation (router)**: Use **only `IgrTab`** with label-only (no inline content)
123+
- See [JSX-PATTERNS.md](./reference/JSX-PATTERNS.md)
124+
125+
### Events
126+
127+
- Events are `CustomEvent` objects, not React `SyntheticEvent`
128+
- Access data via `e.target` or `e.detail`
129+
- See [EVENT-HANDLING.md](./reference/EVENT-HANDLING.md)
130+
131+
### Refs
132+
133+
- Use `useRef<IgrDialog>(null)` with the component type:
134+
- See [REFS-FORMS.md](./reference/REFS-FORMS.md)
135+
136+
### Charts, Gauges, Maps & Grid Lite
137+
138+
- **Charts/Gauges/Maps require explicit registration**: `IgrCategoryChartModule.register()`
139+
- **All require sized container**: `min-width`, `min-height`, or `flex-grow`
140+
- **Grid Lite** requires both `igniteui-react` and `igniteui-grid-lite` packages, import from `igniteui-react/grid-lite`
141+
- See [CHARTS-GRIDS.md](./reference/CHARTS-GRIDS.md)
142+
143+
---
144+
145+
## Best Practices
146+
147+
1. **Start with the MIT package** (`igniteui-react`) — it covers most common UI needs
148+
2. **Import theme CSS first** — components need it to render correctly
149+
3. **Register chart/gauge/map modules** — call `.register()` at module level
150+
4. **Wrap charts/gauges/maps in sized containers** — they need explicit dimensions
151+
5. **Use named imports** — enables tree-shaking
152+
6. **Handle events as `CustomEvent`** — not `React.SyntheticEvent`
153+
7. **Use refs sparingly** — prefer declarative props
154+
8. **Check slot names** in the docs
155+
156+
## Additional Resources
157+
158+
- [Ignite UI for React — Getting Started](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started)
159+
- [React Examples Repository](https://github.com/IgniteUI/igniteui-react-examples)
160+
- [npm: igniteui-react](https://www.npmjs.com/package/igniteui-react)
161+
- [@lit/react Documentation](https://lit.dev/docs/frameworks/react/)

‎packages/cli/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/CHARTS-GRIDS.md‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
# Charts, Gauges, Maps & Grid Lite
2+
3+
## Module Registration
4+
5+
> **⚠️ IMPORTANT:** Unlike core UI components (from `igniteui-react`), chart, gauge, and map components from `igniteui-react-charts`, `igniteui-react-gauges`, and `igniteui-react-maps` **require explicit module registration** before use. You must import the corresponding `*Module` class and call `.register()` at the module level (outside the component function).
6+
>
7+
> **Grid Lite** (`IgrGridLite` from `igniteui-react/grid-lite`) is a React wrapper component that works like any other React component — no `.register()` needed, but requires both `igniteui-react` and `igniteui-grid-lite` packages installed.
8+
9+
### Registration Syntax
10+
11+
```tsx
12+
import { IgrCategoryChart, IgrCategoryChartModule } from 'igniteui-react-charts';
13+
14+
// ⚠️ REQUIRED — register the module before using the component
15+
IgrCategoryChartModule.register();
16+
```
17+
18+
### Common Module Registrations
19+
20+
| Component | Module Import | Registration |
21+
|---|---|---|
22+
| `IgrCategoryChart` | `IgrCategoryChartModule` | `IgrCategoryChartModule.register()` |
23+
| `IgrPieChart` | `IgrPieChartModule` | `IgrPieChartModule.register()` |
24+
| `IgrFinancialChart` | `IgrFinancialChartModule` | `IgrFinancialChartModule.register()` |
25+
| `IgrRadialGauge` | `IgrRadialGaugeModule` | `IgrRadialGaugeModule.register()` |
26+
| `IgrLinearGauge` | `IgrLinearGaugeModule` | `IgrLinearGaugeModule.register()` |
27+
| `IgrGeographicMap` | `IgrGeographicMapModule` | `IgrGeographicMapModule.register()` |
28+
| `IgrGridLite` | (no registration needed) | N/A — works like standard React component |
29+
30+
## Container Sizing (REQUIRED)
31+
32+
> **⚠️ CRITICAL:** Charts, gauges, maps, and Grid Lite **require an explicit-sized container** to render. They inherit their dimensions from the parent element — if the parent has no height/width, the component will not be visible. Always wrap these components in a container with explicit `min-width`, `min-height`, or `flex-grow` styling.
33+
34+
```css
35+
/* Chart container CSS */
36+
.chart-container {
37+
min-width: 400px;
38+
min-height: 300px;
39+
flex-grow: 1;
40+
flex-basis: 0;
41+
}
42+
43+
/* Ensure the chart fills its container */
44+
.chart-container > * {
45+
height: 100%;
46+
width: 100%;
47+
}
48+
```
49+
50+
## Complete Chart Example
51+
52+
```tsx
53+
import { IgrCategoryChart, IgrCategoryChartModule } from 'igniteui-react-charts';
54+
import styles from './dashboard-view.module.css';
55+
56+
// Register the chart module (required, called once at module level)
57+
IgrCategoryChartModule.register();
58+
59+
export default function DashboardView() {
60+
const salesData = [
61+
{ month: 'Jan', revenue: 12500 },
62+
{ month: 'Feb', revenue: 18200 },
63+
{ month: 'Mar', revenue: 15800 },
64+
];
65+
66+
return (
67+
<div className={styles['chart-container']}>
68+
<IgrCategoryChart
69+
dataSource={salesData}
70+
chartType="column"
71+
xAxisTitle="Month"
72+
yAxisTitle="Revenue ($)"
73+
/>
74+
</div>
75+
);
76+
}
77+
```
78+
79+
```css
80+
/* dashboard-view.module.css */
81+
.chart-container {
82+
min-width: 400px;
83+
min-height: 300px;
84+
flex-grow: 1;
85+
flex-basis: 0;
86+
}
87+
.chart-container > * {
88+
height: 100%;
89+
width: 100%;
90+
}
91+
```
92+
93+
## Complete Grid Lite Example
94+
95+
> **⚠️ IMPORTANT:** Grid Lite (`IgrGridLite` from `igniteui-react/grid-lite`) requires installing both `igniteui-react` and `igniteui-grid-lite` packages. It's a React wrapper component (uses `Igr` prefix) and works like any standard React component — no `.register()` needed.
96+
97+
**Installation:**
98+
```bash
99+
npm install igniteui-react igniteui-grid-lite
100+
```
101+
102+
**Usage:**
103+
```tsx
104+
import { IgrGridLite } from 'igniteui-react/grid-lite';
105+
import { useGetCustomers } from '../hooks/northwind-hooks';
106+
import styles from './master-view.module.css';
107+
108+
export default function MasterView() {
109+
const { northwindCustomers } = useGetCustomers();
110+
111+
return (
112+
<div className={styles['grid-lite']}>
113+
<IgrGridLite data={northwindCustomers} />
114+
</div>
115+
);
116+
}
117+
```
118+
119+
```css
120+
/* master-view.module.css */
121+
.grid-lite {
122+
min-width: 400px;
123+
min-height: 220px;
124+
flex-grow: 1;
125+
flex-basis: 0;
126+
}
127+
```

0 commit comments

Comments
 (0)