Skip to content

Update to latest from https://github.com/patternfly/patternfly-ai-coding #258

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 23, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 33 additions & 8 deletions ai-documentation/charts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@

Essential rules for PatternFly Charts implementation using Victory.js and ECharts.

## Related Files
- [**Component Architecture**](../guidelines/component-architecture.md) - Chart component structure rules
- [**Performance Optimization**](../troubleshooting/performance.md) - Chart performance considerations

## Installation Rules

### Required Installation
Expand Down Expand Up @@ -79,16 +75,44 @@ Module not found: Can't resolve '@patternfly/react-charts'

## Chart Implementation Rules

### Best Practices

### Color families
- Chart color families include
- red-orange
- orange
- yellow
- teal
- green
- blue
- purple
- black
- Use the same brightness of colors first, then use other brightness
- Base: 300
- Lightest: 100
- Darkest: 500
- Second-lightest: 200
- Second-darkest: 400
- Use PatternFly tokens to define your color variables
- --pf-t-chart-color-[color-family]-[brightness]
- example: --pf-t-chart-color-blue-300
- When selecting colors for your chart, adhere to these general rules:
- Within a color family, use the base color first. Then use the other lighter and darker hues.
- Some families have predetermined uses:
- Blue: Use to show success.
- Red-orange: Use to show failure. Do not use this family unless you're communicating failure.
- Other colors: Use for neutral purposes or categories.

### Color Rules
- ✅ **Use PatternFly chart color tokens** - For consistency with design system
- ❌ **Don't use hardcoded colors** - Use design tokens instead

```jsx
// ✅ Correct - Use PatternFly color tokens
const chartColors = [
'var(--pf-t--chart--color--blue--300)',
'var(--pf-t--chart--color--green--300)',
'var(--pf-t--chart--color--orange--300)'
'var(--pf-t--chart--color--[color family 1]--300)',
'var(--pf-t--chart--color--[color family 2]--300)',
'var(--pf-t--chart--color--[color family 3]--300)'
];

<ChartDonut data={data} colorScale={chartColors} />
Expand Down Expand Up @@ -239,7 +263,8 @@ const LazyChart = lazy(() => import('./HeavyChart'));
## 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
- **[PatternFly Chart Guidelines](https://www.patternfly.org/charts/about)** - Design guidelines
- **[PatternFly Chart Guidelines](https://www.patternfly.org/charts/about-charts)** - Design guidelines
- **[PatternFly Chart Colors](https://www.patternfly.org/charts/colors-for-charts)** - Colors for charts

## Reference Documentation

Expand Down
6 changes: 2 additions & 4 deletions ai-documentation/components/layout/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,13 @@ PatternFly layout components provide the foundation for structuring application

## Reference Documentation

- [PatternFly Layouts on PatternFly.org](https://www.patternfly.org/layouts)
- [PatternFly Layouts on PatternFly.org](https://www.patternfly.org/layouts/about-layouts)
- [PatternFly React GitHub Repository](https://github.com/patternfly/patternfly-react)

> 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.

## Related Files

- [**Page Sections**](./page-sections.md) - PageSection component usage and patterns
- [**Grid System**](./grid-system.md) - Grid layout and responsive design
- [**Component Architecture**](../../guidelines/component-architecture.md) - Component structure patterns
- [**Styling Standards**](../../guidelines/styling-standards.md) - Layout styling guidelines

Expand All @@ -40,7 +38,7 @@ This section describes common page layout patterns and links to their official d
### Standard Page Layout
A standard page layout typically consists of a page title, an optional toolbar for actions, and a main content area.

- [**Page Layout Documentation**](https://www.patternfly.org/layouts/page)
- [**Page Layout Documentation**](https://www.patternfly.org/components/page/design-guidelines)
- [**Page Component Examples on GitHub**](https://github.com/patternfly/patternfly-react/tree/main/packages/react-core/src/components/Page/examples)

### Dashboard Layout
Expand Down
3 changes: 1 addition & 2 deletions ai-documentation/resources/external-links.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ External resources are essential for staying current with PatternFly updates, fi

## Related Files

- [**Code Examples**](./code-examples.md) - Curated, reusable code snippets.
- [**PatternFly Guidelines**](../guidelines/README.md) - Core development principles.
- [**Setup Guide**](../setup/README.md) - Initial project setup resources
- [**Troubleshooting**](../troubleshooting/common-issues.md) - Problem-solving resources
Expand All @@ -34,7 +33,7 @@ External resources are essential for staying current with PatternFly updates, fi
- **[Alignment](https://www.patternfly.org/utility-classes/alignment)** - Alignment utility classes
- **[Background color](https://www.patternfly.org/utility-classes/background-color)** - Background utility classes
- **[Box shadow](https://www.patternfly.org/utility-classes/box-shadow)** - Box shadow utility classes
- **[Display](https://www.patternfly.org/utility-classes/accessibility)** - Display utility classes
- **[Display](https://www.patternfly.org/utility-classes/display)** - Display utility classes
- **[Flex](https://www.patternfly.org/utility-classes/flex)** - Flex utility classes
- **[Float](https://www.patternfly.org/utility-classes/float)** - Float utility classes
- **[Sizing](https://www.patternfly.org/utility-classes/sizing)** - Sizing utility classes
Expand Down
30 changes: 30 additions & 0 deletions ai-documentation/resources/local-files.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# Local Documentation Resources

This document describes the key project-specific documentation files available for PatternFly development. These files provide essential context that complements the official PatternFly documentation.

## Related Files
- [**External References**](./external-links.md) - Links to official PatternFly documentation.
- [**Code Examples**](./code-examples.md) - Curated, reusable code snippets.
- [**PatternFly Guidelines**](../guidelines/README.md) - Core development principles.

## Core Local Documentation Files

The following files are located in the project root and provide critical, specialized context for development. When working with AI assistants, providing relevant sections from these files is crucial for getting accurate and project-specific guidance.

### 1. `patternfly-chatbot.txt`

- **Location**: `../../patternfly-chatbot.txt`
- **Purpose**: The primary context file for the PatternFly Chatbot architecture. It contains component hierarchy, implementation patterns, and best practices specific to chatbot development.
- **When to Use**: Use as the main reference when building, integrating, or troubleshooting any chatbot features.

### 2. `patternfly-react-component-groups.txt`

- **Location**: `../../patternfly-react-component-groups.txt`
- **Purpose**: A comprehensive reference for PatternFly React component groups and specialized libraries. It covers component classifications, dependencies, and advanced composition patterns.
- **When to Use**: Use this file to discover appropriate components for complex UIs, understand component relationships, and implement enterprise-level features.

## How to Use These Files

1. **Consult First**: Before implementing a complex feature, check these files for project-specific patterns.
2. **Provide Context to AI**: When asking for help, copy and paste the most relevant sections from these files into your prompt. This will give the AI the context it needs to provide accurate guidance.
3. **Stay Updated**: These files are living documents. Refer to them for the latest project standards.
1 change: 0 additions & 1 deletion ai-documentation/setup/development-environment.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ A properly configured development environment enhances productivity and ensures
- [**Setup Guide**](./README.md) - Initial project setup
- [**Quick Start**](./quick-start.md) - Project initialization steps
- [**Styling Standards**](../guidelines/styling-standards.md) - CSS and styling configuration
- [**Performance Optimization**](../troubleshooting/performance.md) - Development performance tips

## Development Server Configuration

Expand Down
8 changes: 3 additions & 5 deletions ai-documentation/troubleshooting/common-issues.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ PatternFly development can present various challenges ranging from setup issues

## Related Files

- [**Component Issues**](./component-issues.md) - Component-specific troubleshooting
- [**Performance Optimization**](./performance.md) - Performance-related problems and solutions
- [**Setup Guide**](../setup/README.md) - Initial setup troubleshooting
- [**External References**](../resources/external-links.md) - Additional troubleshooting resources

Expand Down Expand Up @@ -158,9 +156,9 @@ Module not found: Can't resolve '@patternfly/react-charts'
```jsx
// ✅ Correct - Use design 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 colorScale={chartColors} />
```
Expand Down