diff --git a/ai-documentation/charts/README.md b/ai-documentation/charts/README.md index f819ada8..1b85a4ec 100644 --- a/ai-documentation/charts/README.md +++ b/ai-documentation/charts/README.md @@ -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 @@ -79,6 +75,34 @@ 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 @@ -86,9 +110,9 @@ Module not found: Can't resolve '@patternfly/react-charts' ```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)' ]; @@ -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 diff --git a/ai-documentation/components/layout/README.md b/ai-documentation/components/layout/README.md index 6d437530..d6dcf062 100644 --- a/ai-documentation/components/layout/README.md +++ b/ai-documentation/components/layout/README.md @@ -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 @@ -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 diff --git a/ai-documentation/resources/external-links.md b/ai-documentation/resources/external-links.md index 5693f33a..1b82a8ba 100644 --- a/ai-documentation/resources/external-links.md +++ b/ai-documentation/resources/external-links.md @@ -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 @@ -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 diff --git a/ai-documentation/resources/local-files.md b/ai-documentation/resources/local-files.md new file mode 100644 index 00000000..f0b9f5cc --- /dev/null +++ b/ai-documentation/resources/local-files.md @@ -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. \ No newline at end of file diff --git a/ai-documentation/setup/development-environment.md b/ai-documentation/setup/development-environment.md index 9eccccae..a9a90e40 100644 --- a/ai-documentation/setup/development-environment.md +++ b/ai-documentation/setup/development-environment.md @@ -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 diff --git a/ai-documentation/troubleshooting/common-issues.md b/ai-documentation/troubleshooting/common-issues.md index 761b007b..db633576 100644 --- a/ai-documentation/troubleshooting/common-issues.md +++ b/ai-documentation/troubleshooting/common-issues.md @@ -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 @@ -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)' ]; ```