Skip to content

Commit e54c7d9

Browse files
nicolethoennicolethoen
committed
feat: updated dependencies and add guidance for ai enabled development
1 parent 7236294 commit e54c7d9

File tree

22 files changed

+15484
-9553
lines changed

22 files changed

+15484
-9553
lines changed

‎.cursor/rules/patternfly-vibe-coding.mdc‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
description:
3+
globs:
4+
alwaysApply: false
5+
---
6+
# PatternFly Vibe Coding Rule
7+
8+
## Purpose
9+
Always reference the README and markdown documentation in this repository when generating, editing, or reviewing any PatternFly (PF) code. These files contain the authoritative best practices, guidelines, and up-to-date standards for PatternFly development.
10+
11+
## Scope
12+
This rule applies to all code generation, refactoring, and review tasks involving PatternFly React, PatternFly Chatbot, and related UI components in this project.
13+
14+
## Documentation to Reference
15+
- The root `README.md`
16+
- The `documentation/README.md` file, which serves as the table of contents for all documentation in the `documentation/` directory and its subdirectories. Use this file to discover and navigate all relevant rules, guidelines, and best practices for PatternFly development.
17+
- All markdown files referenced by `documentation/README.md`.
18+
19+
## Rule
20+
- **Always consult the above documentation before generating or editing any PatternFly code.**
21+
- **Use the documented best practices for component usage, styling, accessibility, and layout.**
22+
- **Prefer semantic design tokens and utility classes as described in the docs.**
23+
- **Follow accessibility and ARIA guidelines from the documentation.**
24+
- **Reference official PatternFly components and avoid custom solutions unless explicitly allowed.**
25+
- **If a question arises, search these docs first before using external sources.**
26+
27+
## Example Prompt
28+
> "When generating PatternFly code, use the guidelines and examples from all README and markdown files in this repository, especially those referenced in documentation/README.md. Follow the documented best practices for styling, accessibility, and component usage."
29+
30+
## Enforcement
31+
If code is generated or edited without following these documentation sources, request changes and point to the relevant section in the docs.

‎README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,21 @@ When importing CSS from a third-party package for the first time, you may encoun
9191
* To keep our code logic and test coverage in check, we use [jest](https://github.com/facebook/jest)
9292
* To ensure code styles remain consistent, we use [eslint](https://eslint.org/)
9393

94+
## AI Documentation & Development Rules
95+
96+
This project includes an [`ai-documentation`](./ai-documentation/README.md) directory designed primarily for use by AI agents in AI-enabled IDEs (such as Cursor, Claude, and others). These files provide essential rules, guidelines, and best practices for building web applications with PatternFly React, enabling AI coding assistants to:
97+
98+
- Offer context-aware suggestions and enforce consistent component architecture and styling standards
99+
- Guide developers to use PatternFly v6 components and utility classes
100+
- Promote accessibility and state management best practices
101+
- Reference troubleshooting tips and specialized rules (charts, chatbot, etc.)
102+
103+
**How to use:**
104+
- If you are using an AI-enabled IDE, the AI agent will automatically leverage the [AI Documentation & Rules](./ai-documentation/README.md) to assist you as you develop.
105+
- Human contributors can also consult these files directly for detailed standards and examples, but the primary audience is AI coding assistants.
106+
107+
By following these rules—either directly or via your AI assistant—you'll ensure your app is maintainable, accessible, and consistent with PatternFly best practices.
108+
94109
## Multi environment configuration
95110
This project uses [dotenv-webpack](https://www.npmjs.com/package/dotenv-webpack) for exposing environment variables to your code. Either export them at the system level like `export MY_ENV_VAR=http://dev.myendpoint.com && npm run start:dev` or simply drop a `.env` file in the root that contains your key-value pairs like below:
96111

‎ai-documentation/README.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# PatternFly React Development Rules
2+
3+
> **Starting a new project?**
4+
> For a quick start with PatternFly React, use the [patternfly/patternfly-react-seed](https://github.com/patternfly/patternfly-react-seed) app. It provides a basic build, layout, and scaffolding for new PatternFly applications, including recommended tooling and project structure.
5+
6+
Essential rules and guidelines for AI coders working with PatternFly React applications.
7+
8+
## Quick Navigation
9+
10+
### 🚀 Setup & Environment
11+
- [**Setup Rules**](./setup/README.md) - Project initialization requirements
12+
- [**Quick Start**](./setup/quick-start.md) - Essential setup steps
13+
- [**Environment Rules**](./setup/development-environment.md) - Development configuration
14+
15+
### 📚 Core Rules
16+
- [**PatternFly Guidelines**](./guidelines/README.md) - Core development principles
17+
- [**Component Rules**](./guidelines/component-architecture.md) - Component structure requirements
18+
- [**Styling Rules**](./guidelines/styling-standards.md) - CSS and styling requirements
19+
20+
### 🧩 Component Rules
21+
- [**Layout Rules**](./components/layout/README.md) - Page structure requirements
22+
- [**Table Component Rules**](./components/data-display/table.md) - Table usage and best practices
23+
- [**Data View Component Rules**](./components/data-display/README.md) - Data view usage and best practices
24+
25+
### 📊 Specialized Rules
26+
- [**Charts Rules**](./charts/README.md) - PatternFly Charts requirements
27+
- [**Chatbot Rules**](./chatbot/README.md) - PatternFly Chatbot requirements
28+
29+
### 🔧 Troubleshooting
30+
- [**Common Issues**](./troubleshooting/common-issues.md) - Problem resolution rules
31+
32+
### 📖 Resources
33+
- [**External Links**](./resources/external-links.md) - Official documentation links
34+
- [**Local Files**](./resources/local-files.md) - Project-specific resources
35+
36+
## Usage Rules for AI Coders
37+
38+
1. **Always use PatternFly v6** - Use `pf-v6-` prefixed classes only
39+
2. **Component-first approach** - Use PatternFly components before custom solutions
40+
3. **Consult documentation** - Reference [PatternFly.org](https://www.patternfly.org/) for examples
41+
4. **Follow accessibility** - Implement proper ARIA labels and keyboard navigation
42+
5. **Use utility classes** - Prefer PatternFly utilities over custom CSS
43+
6. **Handle states** - Always implement loading, error, and empty states
44+
45+
## Documentation Structure
46+
47+
Each file contains:
48+
- **Rules** - Specific requirements to follow
49+
- **Do's and Don'ts** - Clear guidance on what to avoid
50+
- **Links** - References to official PatternFly documentation
51+
- **Quick examples** - Minimal code patterns when needed
52+
53+
## Reference Documentation
54+
55+
- [PatternFly.org](https://www.patternfly.org/)
56+
- [PatternFly React GitHub Repository](https://github.com/patternfly/patternfly-react)
57+
58+
> For all rules and examples, consult both PatternFly.org and the official GitHub repository. When using AI tools, leverage context7 to fetch the latest docs from these sources.

‎ai-documentation/charts/README.md‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
# Charts Rules
2+
3+
Essential rules for PatternFly Charts implementation using Victory.js and ECharts.
4+
5+
## Related Files
6+
- [**Component Architecture**](../guidelines/component-architecture.md) - Chart component structure rules
7+
- [**Performance Optimization**](../troubleshooting/performance.md) - Chart performance considerations
8+
9+
## Installation Rules
10+
11+
### Required Installation
12+
```bash
13+
# ✅ Victory-based charts (recommended)
14+
npm install @patternfly/react-charts victory
15+
16+
# ✅ ECharts-based charts (alternative)
17+
npm install @patternfly/react-charts echarts
18+
```
19+
20+
### Import Rules
21+
- ✅ **Use specific import paths** - Import from `/victory` or `/echarts` subdirectories
22+
- ❌ **Don't use general imports** - Avoid importing from main package
23+
24+
```jsx
25+
// ✅ Correct imports
26+
import { ChartDonut, ChartLine, ChartBar } from '@patternfly/react-charts/victory';
27+
import { EChart } from '@patternfly/react-charts/echarts';
28+
29+
// ❌ Wrong imports
30+
import { ChartDonut } from '@patternfly/react-charts';
31+
```
32+
33+
### Troubleshooting Import Issues
34+
If "module not found" errors occur:
35+
1. **Clear cache**: `rm -rf node_modules package-lock.json`
36+
2. **Reinstall**: `npm install`
37+
3. **Verify paths**: Check import paths match installed version
38+
39+
## Chart Implementation Rules
40+
41+
### Color Rules
42+
- ✅ **Use PatternFly chart color tokens** - For consistency with design system
43+
- ❌ **Don't use hardcoded colors** - Use design tokens instead
44+
45+
```jsx
46+
// ✅ Correct - Use PatternFly color tokens
47+
const chartColors = [
48+
'var(--pf-v6-chart-color-blue-300)',
49+
'var(--pf-v6-chart-color-green-300)',
50+
'var(--pf-v6-chart-color-orange-300)'
51+
];
52+
53+
<ChartDonut data={data} colorScale={chartColors} />
54+
```
55+
56+
### Responsive Rules
57+
- ✅ **Implement responsive sizing** - Charts must work on all screen sizes
58+
- ✅ **Use container-based dimensions** - Not fixed width/height
59+
- ❌ **Don't hardcode dimensions** - Charts must be responsive
60+
61+
```jsx
62+
// ✅ Required responsive pattern
63+
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
64+
65+
useEffect(() => {
66+
const updateDimensions = () => {
67+
if (containerRef.current) {
68+
const { width, height } = containerRef.current.getBoundingClientRect();
69+
setDimensions({ width, height });
70+
}
71+
};
72+
updateDimensions();
73+
window.addEventListener('resize', updateDimensions);
74+
return () => window.removeEventListener('resize', updateDimensions);
75+
}, []);
76+
```
77+
78+
### Accessibility Rules
79+
- ✅ **Provide ARIA labels** - For screen reader support
80+
- ✅ **Use high contrast colors** - Meet WCAG standards
81+
- ✅ **Support keyboard navigation** - Add tabIndex and role
82+
83+
```jsx
84+
// ✅ Required accessibility pattern
85+
<ChartDonut
86+
data={data}
87+
ariaDesc="Chart showing user distribution"
88+
ariaTitle="User Status Chart"
89+
tabIndex={0}
90+
role="img"
91+
/>
92+
```
93+
94+
### State Management Rules
95+
- ✅ **Handle loading states** - Show spinners during data loading
96+
- ✅ **Handle error states** - Show error messages with retry
97+
- ✅ **Handle empty states** - Show appropriate empty messages
98+
- ✅ **Use data memoization** - For performance optimization
99+
100+
```jsx
101+
// ✅ Required state handling
102+
if (isLoading) return <Spinner />;
103+
if (error) return <EmptyState><EmptyStateHeader titleText="Chart error" /></EmptyState>;
104+
if (!data?.length) return <EmptyState><EmptyStateHeader titleText="No data" /></EmptyState>;
105+
106+
const processedData = useMemo(() => {
107+
return rawData.map(item => ({ x: item.date, y: item.value }));
108+
}, [rawData]);
109+
```
110+
111+
### Integration Rules
112+
- ✅ **Use with PatternFly components** - Integrate charts in Cards, PageSections
113+
- ✅ **Follow grid layouts** - Use PatternFly grid for chart dashboards
114+
- ❌ **Don't create standalone chart pages** - Integrate with PatternFly layout
115+
116+
```jsx
117+
// ✅ Required integration pattern
118+
import { Card, CardTitle, CardBody } from '@patternfly/react-core';
119+
120+
<Card>
121+
<CardTitle>Chart Title</CardTitle>
122+
<CardBody>
123+
<ChartDonut data={data} />
124+
</CardBody>
125+
</Card>
126+
```
127+
128+
## Performance Rules
129+
130+
### Required Optimizations
131+
- ✅ **Use lazy loading for heavy charts** - Improve initial page load
132+
- ✅ **Memoize data processing** - Use useMemo for expensive calculations
133+
- ✅ **Implement proper loading states** - Show feedback during data loading
134+
135+
```jsx
136+
// ✅ Required performance patterns
137+
const LazyChart = lazy(() => import('./HeavyChart'));
138+
139+
<Suspense fallback={<Spinner />}>
140+
<LazyChart />
141+
</Suspense>
142+
```
143+
144+
## Essential Do's and Don'ts
145+
146+
### ✅ Do's
147+
- Use PatternFly chart color tokens for consistency
148+
- Implement responsive sizing for different screen sizes
149+
- Provide proper ARIA labels and descriptions
150+
- Handle loading, error, and empty states
151+
- Use appropriate chart types for your data
152+
- Optimize performance with data memoization
153+
- Integrate charts with PatternFly layout components
154+
155+
### ❌ Don'ts
156+
- Hardcode chart dimensions without responsive design
157+
- Use colors that don't meet accessibility standards
158+
- Skip loading states for charts with async data
159+
- Ignore keyboard navigation and screen reader support
160+
- Create overly complex charts
161+
- Mix different charting libraries inconsistently
162+
- Forget to handle empty data states
163+
164+
## Common Issues
165+
166+
### Module Not Found
167+
- **Clear cache**: `rm -rf node_modules package-lock.json`
168+
- **Reinstall**: `npm install`
169+
- **Check paths**: Verify import paths are correct
170+
171+
### Chart Not Rendering
172+
- **Check container dimensions**: Ensure parent has width/height
173+
- **Verify data format**: Data must match chart expectations
174+
- **Check console**: Look for Victory.js or ECharts warnings
175+
176+
### Performance Issues
177+
- **Use data memoization**: useMemo for expensive calculations
178+
- **Implement lazy loading**: For heavy chart components
179+
- **Optimize re-renders**: Use React.memo for chart components
180+
181+
## Quick Reference
182+
- **[PatternFly Charts README](https://github.com/patternfly/patternfly-react/tree/main/packages/react-charts#readme)** - Installation and usage
183+
- **[Victory.js Documentation](https://formidable.com/open-source/victory/)** - Chart library documentation
184+
- **[PatternFly Chart Guidelines](https://www.patternfly.org/charts/about)** - Design guidelines
185+
186+
## Reference Documentation
187+
188+
- [PatternFly Charts on PatternFly.org](https://www.patternfly.org/charts/about)
189+
- [PatternFly React Charts GitHub Repository](https://github.com/patternfly/patternfly-react/tree/main/packages/react-charts)
190+
191+
> For the most up-to-date documentation and code examples, consult both PatternFly.org and the official GitHub repository. When using AI tools, leverage context7 to fetch the latest docs from these sources.

0 commit comments

Comments
 (0)