Merge pull request #6 from jeff-phillips-18/updates

Update AI documentation with various fixes and additions and rename documentation directory

Author: nicolethoen

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

@@ -13,8 +13,8 @@ This rule applies to all code generation, refactoring, and review tasks involvin
 
 ## Documentation to Reference
 - The root `README.md`
-- 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.
-- All markdown files referenced by `documentation/README.md`.
+- The `.pf-ai-documentation/README.md` file, which serves as the table of contents for all documentation in the `.pf-ai-documentation/` directory and its subdirectories. Use this file to discover and navigate all relevant rules, guidelines, and best practices for PatternFly development.
+- All markdown files referenced by `.pf-ai-documentation/README.md`.
 
 ## Rule
 - **Always consult the above documentation before generating or editing any PatternFly code.**

documentation/README.md .pf-ai-documentation/README.mddocumentation/README.md renamed to .pf-ai-documentation/README.md

@@ -15,6 +15,9 @@ npm install @patternfly/react-charts victory
 
 # ✅ ECharts-based charts (alternative)
 npm install @patternfly/react-charts echarts
+
+# ✅ Patternfly for charts css variables (recommended)
+npm install @patternfly/patternfly
 ```
 
 ### Import Rules
@@ -31,6 +34,12 @@ import { EChart } from '@patternfly/react-charts/echarts';
 import { ChartDonut } from '@patternfly/react-charts';
 ```
 
+### Import PatternFly Charts CSS
+   ```jsx
+   // In your main App.js or index.js
+   import '@patternfly/patternfly/patternfly-charts.css';
+   ```
+
 ### Critical Import Path Troubleshooting
 
 **⚠️ MOST COMMON ISSUE**: Chart components cannot be found
@@ -77,9 +86,9 @@ Module not found: Can't resolve '@patternfly/react-charts'
 ```jsx
 // ✅ Correct - Use PatternFly color tokens
 const chartColors = [
-  'var(--pf-v6-chart-color-blue-300)',
-  'var(--pf-v6-chart-color-green-300)',
-  'var(--pf-v6-chart-color-orange-300)'
+  'var(--pf-t--chart--color--blue--300)',
+  'var(--pf-t--chart--color--green--300)',
+  'var(--pf-t--chart--color--orange--300)'
 ];
 
 <ChartDonut data={data} colorScale={chartColors} />
@@ -210,6 +219,23 @@ const LazyChart = lazy(() => import('./HeavyChart'));
 - **Implement lazy loading**: For heavy chart components
 - **Optimize re-renders**: Use React.memo for chart components
 
+#### Issue: Chart colors not correct
+```bash
+# Symptoms: Chart color variables (--pf-v6-chart-color-blue-100, --pf-t--chart--color--blue--300) are not defined
+```
+
+**Solutions**:
+1. **Install patternfly package**:
+   ```bash
+   npm install @patternfly/patternfly
+   ```
+
+2. **Import PatternFly Charts CSS**:
+   ```jsx
+   // In your main App.js or index.js
+   import '@patternfly/patternfly/patternfly-charts.css';
+   ```
+  
 ## Quick Reference
 - **[PatternFly Charts README](https://github.com/patternfly/patternfly-react/tree/main/packages/react-charts#readme)** - Installation and usage
 - **[Victory.js Documentation](https://formidable.com/open-source/victory/)** - Chart library documentation

documentation/charts/README.md .pf-ai-documentation/charts/README.mddocumentation/charts/README.md renamed to .pf-ai-documentation/charts/README.md

@@ -212,4 +212,11 @@ Key integration patterns from this example include:
 
 > **Note:** Always consult the latest PatternFly Data View documentation and demo source code for the most up-to-date usage patterns and best practices.
 - [PatternFly React Data View GitHub](https://github.com/patternfly/react-data-view)
-- [PatternFly Data View NPM](https://www.npmjs.com/package/@patternfly/react-data-view)
+- [PatternFly Data View NPM](https://www.npmjs.com/package/@patternfly/react-data-view)
+
+## Empty State Button Placement Rules
+
+- ✅ **Place all buttons in an EmptyState inside the `EmptyStateFooter` component.**
+- ✅ **Group each row of buttons within an `EmptyStateActions` container inside the `EmptyStateFooter`.**
+- ✅ **Use a separate `EmptyStateActions` for each row of actions if multiple rows are needed.**
+- ❌ **Do not place buttons directly inside `EmptyState` or `EmptyStateBody`.**

documentation/chatbot/README.md .pf-ai-documentation/chatbot/README.mddocumentation/chatbot/README.md renamed to .pf-ai-documentation/chatbot/README.md

@@ -22,6 +22,9 @@ Core development rules for AI coders building PatternFly React applications.
 - ✅ **Compose components** - Build complex UIs by combining PatternFly components
 - ❌ **Don't override component internals** - Use provided props and APIs
 
+### Tokenss
+- ✅ **ALWAYS use PatternFly tokens** - Use `pf-t-` prefixed classes over `pf-v6-` classes (e.g., `var(--pf-t--global--spacer--sm)` not `var(--pf-v6-global--spacer--sm)`)
+
 ### Text Components (v6+)
 ```jsx
 // ✅ Correct
@@ -43,7 +46,7 @@ import { UserIcon } from '@patternfly/react-icons';
 ### Styling Rules
 
 - ✅ **Use PatternFly utilities** - Before writing custom CSS
-- ✅ **Use semantic design tokens** for custom CSS (e.g., `var(--pf-v6-global--primary-color--light)`), not base tokens with numbers (e.g., `--pf-v6-global--Color--100`) or hardcoded values
+- ✅ **Use semantic design tokens** for custom CSS (e.g., `var(--pf-t--global--text--color--regular)`), not base tokens with numbers (e.g., `--pf-t--global--text--color--100`) or hardcoded values
 - ❌ **Don't mix PatternFly versions** - Stick to v6 throughout
 
 ### Documentation Requirements