diff --git a/.gitignore b/.gitignore index ce84321..c54ab04 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,7 @@ .git/ # macOS -.DS_Store \ No newline at end of file +.DS_Store + +# Claude +.claude \ No newline at end of file diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..a067179 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,84 @@ +# AGENTS.md + +This file provides guidance to AI agents when working with code in this repository. + +## Repository Purpose + +This is a **documentation and AI knowledge base repository** for PatternFly development. It provides indexed documentation, guidelines, and best practices that AI coding tools (Cursor, Copilot, ChatGPT, Claude) can use to generate accurate PatternFly code. + +**This repository contains no runnable code** - it consists of markdown documentation files that should be copied into target projects. + +## Documentation Structure + +- `.pf-ai-documentation/` - Main documentation directory + - `README.md` - Table of contents and navigation hub + - `setup/` - Project initialization and environment setup + - `guidelines/` - Core development principles and standards + - `components/` - Component-specific rules (layout, data display) + - `charts/` - PatternFly Charts (Victory.js/ECharts) rules + - `chatbot/` - PatternFly Chatbot implementation rules + - `component-groups/` - React Component Groups rules + - `troubleshooting/` - Common issues and solutions + +- `.cursor/rules/` - Cursor IDE rules that auto-apply to PatternFly code + +## Key PatternFly Development Rules + +When generating or reviewing PatternFly code, always follow these rules: + +### Version Requirements + +- **Always use PatternFly v6** - Use `pf-v6-` prefixed classes only +- Use `pf-t-` prefixed tokens over `pf-v6-` tokens (e.g., `var(--pf-t--global--spacer--sm)`) +- Use `` instead of deprecated `` + +### Import Patterns + +**Charts (CRITICAL):** + +```jsx +// ✅ Correct - MUST include /victory +import { ChartDonut } from '@patternfly/react-charts/victory'; + +// ❌ Wrong - causes "Module not found" errors +import { ChartDonut } from '@patternfly/react-charts'; +``` + +**Chatbot:** + +```jsx +// ✅ Correct - use dynamic imports +import { Chatbot } from '@patternfly/chatbot/dist/dynamic/Chatbot'; + +// ❌ Wrong +import { Chatbot } from '@patternfly/chatbot'; +``` + +**Component Groups:** + +```jsx +// ✅ Correct - use dynamic imports +import { BulkSelect } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect'; +``` + +### Required CSS Imports + +```jsx +import '@patternfly/patternfly/patternfly-charts.css'; // For charts +import '@patternfly/chatbot/dist/css/main.css'; // For chatbot +import '@patternfly/react-component-groups/dist/css/main.css'; // For component groups +``` + +### Common AI Mistakes to Avoid + +- ❌ `className={styles.x}` - CSS modules syntax doesn't work +- ❌ Using non-existent components without verification +- ❌ Inline styles for layout (use PatternFly utilities) +- ❌ Hardcoded colors (use design tokens) +- ❌ Missing accessibility attributes (ARIA labels, keyboard navigation) + +## Reference Resources + +- [PatternFly.org](https://www.patternfly.org/) - Primary documentation +- [PatternFly React GitHub](https://github.com/patternfly/patternfly-react) - Source code and examples +- [PatternFly React Seed](https://github.com/patternfly/patternfly-react-seed) - Recommended starter for new projects diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..43c994c --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1 @@ +@AGENTS.md diff --git a/README.md b/README.md index 03e69b1..1a6087d 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,56 @@ # PatternFly AI Coding Support ## Who is this for? + This repository is for individuals and AI agents who want to prototype PatternFly applications using the latest best practices, with AI assistance (Cursor, Copilot, ChatGPT, etc.). ## Quick Start (TL;DR) + 1. **Clone or copy this repo (or at least the `.pf-ai-documentation/` directory and `.cursor/rules/` files) into your project.** 2. **Open your project in Cursor or your preferred AI coding tool.** 3. (Optional) **Set up context7 MCP for always-up-to-date PatternFly docs.** ## Goal + The primary aim is to offer a comprehensive, AI-friendly knowledge base and starting point for prototyping PatternFly applications. By indexing relevant documentation and providing context files, this repo ensures that any AI model can deliver accurate, consistent, and best-practice guidance while you code. ## Core Components + The core components of this repository are the README and markdown files found throughout the project. These files provide indexed documentation, guidelines, and best practices to support AI-assisted PatternFly development, regardless of which AI coding tool you use. -- **Table of Contents:** See [`.pf-ai-documentation/README.md`](documentation/README.md) for a full table of contents and navigation to all rules, guides, and best practices. +- **Table of Contents:** See [`.pf-ai-documentation/README.md`](.pf-ai-documentation/README.md) for a full table of contents and navigation to all rules, guides, and best practices. + +## Claude Code Skill + +For [Claude Code](https://claude.ai/code) users, this repository includes a ready-to-use skill that provides PatternFly 6 development guidance directly in your coding sessions. + +### Installation + +```bash +# Clone and install the skill +git clone https://github.com/patternfly/patternfly-ai-coding.git +mkdir -p ~/.claude/skills +cp -r patternfly-ai-coding/skills/patternfly-6-development ~/.claude/skills/ +``` + +Or for team sharing via your project: + +```bash +mkdir -p .claude/skills +cp -r patternfly-ai-coding/skills/patternfly-6-development .claude/skills/ +git add .claude/skills/patternfly-6-development +git commit -m "Add PatternFly 6 development skill" +``` + +### Features + +- **Automatic activation** when working with PatternFly components +- **Import pattern guidance** for charts, chatbot, and component-groups +- **CSS and styling rules** with design token reference +- **Validation scripts** to check for common issues +- **Live documentation** fetched from this repository + +See [`skills/patternfly-6-development/README.md`](skills/patternfly-6-development/README.md) for full documentation. ## Using This Documentation with Cursor and AI Tools @@ -22,23 +58,30 @@ The core components of this repository are the README and markdown files found t > Simply providing a link to this repository is not enough for Cursor (or most AI tools) to load all the context and instructions. These tools only index files that are present in your local project workspace. ### Best Practice: Add Documentation Locally + To get the full benefit of these docs and rules: + 1. **Clone or copy this repository (or at least the `.pf-ai-documentation/` directory and `.cursor/rules/` files) into your project.** 2. **Open your project in Cursor (or your preferred AI coding tool).** 3. **Keep your local docs up to date** by pulling changes from this repo as it evolves. ### Why Local Files Matter + - Cursor and similar tools only use files present in your local workspace for context and code search. - If the documentation and rules are not present locally, the AI will not "see" them, even if you provide a link. ### For Maximum Effectiveness + - Use context7 or another MCP server to supplement your local docs with the latest upstream PatternFly documentation. - Encourage your team to read and follow the local documentation and rules for consistent, best-practice PatternFly development. ## Setting Up context7 MCP for Latest Docs (Optional) +> > **How to set up context7 MCP server:** +> > 1. Ensure you have Node.js v18+ and an MCP-compatible client (e.g., Cursor, VS Code with MCP extension, Windsurf, Claude Desktop). > 2. Add context7 as an MCP server in your client's configuration. For example, in Cursor, add this to your `~/.cursor/mcp.json`: +> > ```json > { > "mcpServers": { @@ -49,10 +92,12 @@ To get the full benefit of these docs and rules: > } > } > ``` +> > 3. Save and restart your client/editor. -> 4. For more details and setup instructions for other editors, see the official guide: https://github.com/upstash/context7#installation +> 4. For more details and setup instructions for other editors, see the official guide: ## Reference Documentation + - [PatternFly.org](https://www.patternfly.org/) - [PatternFly React GitHub Repository](https://github.com/patternfly/patternfly-react) diff --git a/skills/patternfly-6-development/IMPORTS.md b/skills/patternfly-6-development/IMPORTS.md new file mode 100644 index 0000000..fe113f9 --- /dev/null +++ b/skills/patternfly-6-development/IMPORTS.md @@ -0,0 +1,292 @@ +# PatternFly 6 Import Patterns + +Complete reference for PatternFly 6 import patterns across all packages. + +## Package Installation + +```bash +# Core components (required) +npm install @patternfly/react-core @patternfly/react-table @patternfly/react-icons + +# Charts (Victory.js based) +npm install @patternfly/react-charts victory + +# Chatbot +npm install @patternfly/chatbot + +# Component Groups +npm install @patternfly/react-component-groups + +# Base CSS variables and utilities +npm install @patternfly/patternfly +``` + +## @patternfly/react-core + +Standard named imports from the package root. + +```jsx +// Layout components +import { + Page, + PageSection, + PageSidebar, + PageSidebarBody, + Masthead, + MastheadMain, + MastheadBrand, + MastheadContent +} from '@patternfly/react-core'; + +// Content components +import { + Card, + CardTitle, + CardBody, + CardFooter, + Title, + Content, + EmptyState, + EmptyStateHeader, + EmptyStateBody, + EmptyStateFooter, + EmptyStateActions +} from '@patternfly/react-core'; + +// Form components +import { + Form, + FormGroup, + TextInput, + TextArea, + Select, + SelectOption, + Checkbox, + Radio, + Switch, + ActionGroup +} from '@patternfly/react-core'; + +// Navigation components +import { + Nav, + NavItem, + NavList, + NavExpandable, + Breadcrumb, + BreadcrumbItem, + Tabs, + Tab, + TabTitleText +} from '@patternfly/react-core'; + +// Interactive components +import { + Button, + Dropdown, + DropdownItem, + DropdownList, + MenuToggle, + Modal, + ModalVariant, + Popover, + Tooltip, + Alert, + AlertGroup, + AlertActionCloseButton +} from '@patternfly/react-core'; + +// Layout utilities +import { + Stack, + StackItem, + Split, + SplitItem, + Flex, + FlexItem, + Grid, + GridItem, + Gallery, + GalleryItem +} from '@patternfly/react-core'; + +// Data display +import { + DescriptionList, + DescriptionListGroup, + DescriptionListTerm, + DescriptionListDescription, + Label, + LabelGroup, + Badge, + Spinner +} from '@patternfly/react-core'; + +// Toolbar +import { + Toolbar, + ToolbarContent, + ToolbarItem, + ToolbarFilter, + ToolbarGroup, + ToolbarToggleGroup +} from '@patternfly/react-core'; + +// Pagination +import { Pagination, PaginationVariant } from '@patternfly/react-core'; +``` + +## @patternfly/react-table + +```jsx +import { + Table, + Thead, + Tbody, + Tr, + Th, + Td, + TableText, + SortByDirection, + ThProps +} from '@patternfly/react-table'; + +// Composable table with expandable rows +import { + ExpandableRowContent, + OuterScrollContainer, + InnerScrollContainer +} from '@patternfly/react-table'; +``` + +## @patternfly/react-icons + +```jsx +// Import individual icons for tree-shaking +import { TimesIcon } from '@patternfly/react-icons/dist/esm/icons/times-icon'; +import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon'; +import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon'; +import { PlusIcon } from '@patternfly/react-icons/dist/esm/icons/plus-icon'; +import { TrashIcon } from '@patternfly/react-icons/dist/esm/icons/trash-icon'; +import { EditIcon } from '@patternfly/react-icons/dist/esm/icons/edit-icon'; +import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'; +import { ArrowUpIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-up-icon'; +import { ArrowDownIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-down-icon'; +import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; +import { UserIcon } from '@patternfly/react-icons/dist/esm/icons/user-icon'; +import { CogIcon } from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +``` + +## @patternfly/react-charts (Victory) + +**CRITICAL**: Must import from `/victory` subpath. + +```jsx +// Correct - Always include /victory +import { + Chart, + ChartArea, + ChartAxis, + ChartBar, + ChartDonut, + ChartDonutThreshold, + ChartDonutUtilization, + ChartGroup, + ChartLegend, + ChartLine, + ChartPie, + ChartScatter, + ChartStack, + ChartThemeColor, + ChartTooltip, + ChartVoronoiContainer +} from '@patternfly/react-charts/victory'; + +// Wrong - This will cause "Module not found" errors +// import { ChartDonut } from '@patternfly/react-charts'; +``` + +### ECharts Alternative + +```jsx +import { EChart } from '@patternfly/react-charts/echarts'; +``` + +## @patternfly/chatbot + +**CRITICAL**: Must use dynamic imports from `/dist/dynamic/` path. + +```jsx +// Correct - Use dynamic imports +import { Chatbot } from '@patternfly/chatbot/dist/dynamic/Chatbot'; +import { ChatbotContent } from '@patternfly/chatbot/dist/dynamic/ChatbotContent'; +import { ChatbotWelcomePrompt } from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt'; +import { ChatbotFooter } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter'; +import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar'; +import { MessageBox } from '@patternfly/chatbot/dist/dynamic/MessageBox'; +import { Message } from '@patternfly/chatbot/dist/dynamic/Message'; + +// Wrong - Standard imports may not work +// import { Chatbot, ChatbotContent } from '@patternfly/chatbot'; +``` + +## @patternfly/react-component-groups + +**CRITICAL**: Must use dynamic imports from `/dist/dynamic/` path. + +```jsx +// Correct - Use dynamic imports +import { BulkSelect } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect'; +import { ErrorState } from '@patternfly/react-component-groups/dist/dynamic/ErrorState'; +import { NotAuthorized } from '@patternfly/react-component-groups/dist/dynamic/NotAuthorized'; +import { InvalidObject } from '@patternfly/react-component-groups/dist/dynamic/InvalidObject'; +import { UnavailableContent } from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; +import { ServiceCard } from '@patternfly/react-component-groups/dist/dynamic/ServiceCard'; + +// Wrong - Standard imports may not work +// import { BulkSelect } from '@patternfly/react-component-groups'; +``` + +## TypeScript Types + +```tsx +// Core types +import type { ButtonProps, CardProps, ModalProps } from '@patternfly/react-core'; + +// Table types +import type { ThProps, TdProps, TrProps } from '@patternfly/react-table'; + +// Chart types +import type { ChartDonutProps, ChartLineProps } from '@patternfly/react-charts/victory'; +``` + +## CSS Imports Summary + +```jsx +// Main app entry point (index.js or App.js) + +// Base PatternFly styles - REQUIRED +import '@patternfly/react-core/dist/styles/base.css'; + +// Utility classes (for pf-v6-u-* classes) +import '@patternfly/patternfly/patternfly-addons.css'; + +// Charts CSS (when using react-charts) +import '@patternfly/patternfly/patternfly-charts.css'; + +// Chatbot CSS (when using chatbot) +import '@patternfly/chatbot/dist/css/main.css'; + +// Component Groups CSS (when using component-groups) +import '@patternfly/react-component-groups/dist/css/main.css'; +``` + +## Common Import Mistakes + +| Wrong | Correct | +|-------|---------| +| `from '@patternfly/react-charts'` | `from '@patternfly/react-charts/victory'` | +| `from '@patternfly/chatbot'` | `from '@patternfly/chatbot/dist/dynamic/ComponentName'` | +| `from '@patternfly/react-component-groups'` | `from '@patternfly/react-component-groups/dist/dynamic/ComponentName'` | +| `import TimesIcon from '@patternfly/react-icons'` | `import { TimesIcon } from '@patternfly/react-icons/dist/esm/icons/times-icon'` | diff --git a/skills/patternfly-6-development/README.md b/skills/patternfly-6-development/README.md new file mode 100644 index 0000000..09d36fb --- /dev/null +++ b/skills/patternfly-6-development/README.md @@ -0,0 +1,163 @@ +# PatternFly 6 Development Skill + +A Claude Code skill for developing PatternFly 6 (PF6) React user interfaces with correct patterns and best practices. + +## Features + +- **Import Pattern Guidance** - Correct import paths for all PatternFly packages +- **Styling Rules** - CSS classes, design tokens, and component composition patterns +- **Accessibility** - ARIA labels, keyboard navigation, and screen reader support +- **Troubleshooting** - Quick solutions for common PF6 issues +- **Validation Scripts** - Check for incorrect imports and legacy class usage +- **Live Documentation** - Fetch latest docs from GitHub + +## Installation + +### Option 1: User-Level Installation (Personal Use) + +Install the skill for your user account, available across all projects: + +```bash +# Clone the repository +git clone https://github.com/patternfly/patternfly-ai-coding.git + +# Copy skill to user skills directory +mkdir -p ~/.claude/skills +cp -r patternfly-ai-coding/skills/patternfly-6-development ~/.claude/skills/ + +# Clean up +rm -rf patternfly-ai-coding +``` + +Or manually: + +```bash +mkdir -p ~/.claude/skills/patternfly-6-development +# Copy all files from this directory to ~/.claude/skills/patternfly-6-development/ +``` + +### Option 2: Project-Level Installation (Team Sharing) + +Install the skill in your project for team access via git: + +```bash +# From your project root +mkdir -p .claude/skills + +# Clone and copy +git clone https://github.com/patternfly/patternfly-ai-coding.git +cp -r patternfly-ai-coding/skills/patternfly-6-development .claude/skills/ +rm -rf patternfly-ai-coding + +# Commit to share with team +git add .claude/skills/patternfly-6-development +git commit -m "Add PatternFly 6 development skill" +``` + +### Verify Installation + +The skill should automatically activate when you work with PatternFly components. Test by asking Claude Code: + +```text +"How do I import PatternFly chart components?" +``` + +## Usage + +### Automatic Activation + +The skill activates automatically when Claude Code detects: + +- `@patternfly` imports in code +- PatternFly component usage +- Questions about PF6 styling, charts, chatbot, or component-groups +- CSS class questions with `pf-v6-` prefixes + +### Manual Reference + +You can also explicitly ask about PatternFly topics: + +```text +"What's the correct import for PatternFly charts?" +"How do I style a PatternFly card?" +"Fix my PatternFly import errors" +``` + +### Validation Scripts + +Run validation scripts to check for common issues: + +```bash +# Check for incorrect import patterns +bash ~/.claude/skills/patternfly-6-development/scripts/check-pf6-imports.sh src/ + +# Find legacy class usage (pf-v5-, pf-c-) +bash ~/.claude/skills/patternfly-6-development/scripts/check-pf6-classes.sh src/ + +# Fetch latest documentation +bash ~/.claude/skills/patternfly-6-development/scripts/fetch-latest-docs.sh charts +``` + +## Skill Contents + +```text +patternfly-6-development/ +├── SKILL.md # Main skill instructions +├── IMPORTS.md # Import patterns for all PF packages +├── STYLING.md # CSS classes and design tokens +├── TROUBLESHOOTING.md # Common issues and solutions +├── README.md # This file +└── scripts/ + ├── check-pf6-imports.sh # Validate import patterns + ├── check-pf6-classes.sh # Find legacy class usage + └── fetch-latest-docs.sh # Pull docs from GitHub +``` + +## Key Rules + +### Import Patterns + +```jsx +// Charts - MUST include /victory +import { ChartDonut } from '@patternfly/react-charts/victory'; + +// Chatbot - Use dynamic imports +import { Chatbot } from '@patternfly/chatbot/dist/dynamic/Chatbot'; + +// Component Groups - Use dynamic imports +import { BulkSelect } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect'; +``` + +### Required CSS + +```jsx +import '@patternfly/react-core/dist/styles/base.css'; +import '@patternfly/patternfly/patternfly-charts.css'; // For charts +import '@patternfly/chatbot/dist/css/main.css'; // For chatbot +import '@patternfly/react-component-groups/dist/css/main.css'; // For component-groups +``` + +### Version Requirements + +- Always use PatternFly v6 +- Use `pf-v6-` prefixed classes +- Use `pf-t-` semantic tokens for styling + +## Documentation Sources + +This skill fetches documentation from: + +- [PatternFly AI Coding Repository](https://github.com/patternfly/patternfly-ai-coding) +- [PatternFly.org](https://www.patternfly.org/) + +## Contributing + +To improve this skill: + +1. Fork the [patternfly-ai-coding](https://github.com/patternfly/patternfly-ai-coding) repository +2. Edit files in `skills/patternfly-6-development/` +3. Submit a pull request + +## License + +This skill is part of the PatternFly project. See the main repository for license information. diff --git a/skills/patternfly-6-development/SKILL.md b/skills/patternfly-6-development/SKILL.md new file mode 100644 index 0000000..344a5c7 --- /dev/null +++ b/skills/patternfly-6-development/SKILL.md @@ -0,0 +1,190 @@ +--- +name: patternfly-6-development +description: Develops PatternFly 6 (PF6) React user interfaces with correct patterns and best practices. Activates when working with PatternFly components, @patternfly imports, PF6 styling, charts (react-charts/victory), chatbot (@patternfly/chatbot), or component-groups. Provides import patterns, CSS rules, accessibility guidance, and troubleshooting. +--- + +# PatternFly 6 Development + +This skill provides guidance for developing React applications with PatternFly 6 (PF6). + +## Essential Rules + +### Version Requirements +- **Always use PatternFly v6** - Use `pf-v6-` prefixed classes only +- **Use semantic tokens** - Prefer `pf-t-` tokens over `pf-v6-` tokens (e.g., `var(--pf-t--global--spacer--sm)`) +- **Use Content component** - Use `` instead of deprecated `` + +### Critical Import Patterns + +```jsx +// React Core - Standard imports +import { Button, Card, PageSection } from '@patternfly/react-core'; + +// Charts - MUST include /victory +import { ChartDonut, ChartLine } from '@patternfly/react-charts/victory'; + +// Chatbot - Use dynamic imports +import { Chatbot } from '@patternfly/chatbot/dist/dynamic/Chatbot'; +import { MessageBox } from '@patternfly/chatbot/dist/dynamic/MessageBox'; + +// Component Groups - Use dynamic imports +import { BulkSelect } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect'; +``` + +### Required CSS Imports + +```jsx +// Base PatternFly styles (required for all projects) +import '@patternfly/react-core/dist/styles/base.css'; + +// Charts (when using react-charts) +import '@patternfly/patternfly/patternfly-charts.css'; + +// Chatbot (when using chatbot components) +import '@patternfly/chatbot/dist/css/main.css'; + +// Component Groups (when using component groups) +import '@patternfly/react-component-groups/dist/css/main.css'; + +// Utility classes (for pf-v6-u-* classes) +import '@patternfly/patternfly/patternfly-addons.css'; +``` + +## Common AI Mistakes to Avoid + +| Mistake | Correct Approach | +|---------|------------------| +| `className={styles.x}` | CSS modules don't work - use `className="pf-v6-u-..."` | +| `import { Chart } from '@patternfly/react-charts'` | Must use `/victory` path | +| `

Title

` | Use `` or `<Content component="h1">` | +| `style={{ margin: 16 }}` | Use design tokens: `var(--pf-t--global--spacer--md)` | +| Hardcoded colors | Use chart tokens: `var(--pf-t-chart-color-blue-300)` | +| Missing ARIA labels | Always add `aria-label` for interactive elements | + +## Component-First Approach + +Always use PatternFly component composition before utility classes or custom CSS: + +```jsx +// Correct - Component composition with proper hierarchy +<PageSection> + <Stack hasGutter> + <Title headingLevel="h1">Dashboard + + + Content + + + + + +// Avoid - Utility classes for basic layout +
+
Dashboard
+
+``` + +## Quick Start + +For new PatternFly projects, use the official seed: + +```bash +git clone https://github.com/patternfly/patternfly-react-seed +cd patternfly-react-seed +npm install +npm run start:dev +``` + +## Fetching Latest Documentation + +For the most current PatternFly documentation, fetch from GitHub: + +```bash +# Run the fetch script to get latest docs +bash scripts/fetch-latest-docs.sh [topic] + +# Topics: charts, chatbot, components, guidelines, troubleshooting +``` + +Or fetch directly: +```bash +curl -s https://raw.githubusercontent.com/patternfly/patternfly-ai-coding/main/.pf-ai-documentation/charts/README.md +``` + +## Validation Scripts + +Run these scripts to check for common issues: + +```bash +# Check for incorrect import patterns +bash scripts/check-pf6-imports.sh [path] + +# Find legacy PatternFly class usage (pf-v5-, pf-c-) +bash scripts/check-pf6-classes.sh [path] +``` + +## Reference Documentation + +For detailed guidance on specific topics: + +- **Import Patterns**: See [IMPORTS.md](IMPORTS.md) for complete import examples +- **Styling & Tokens**: See [STYLING.md](STYLING.md) for CSS classes and design tokens +- **Troubleshooting**: See [TROUBLESHOOTING.md](TROUBLESHOOTING.md) for common issues and fixes + +## External Resources + +- [PatternFly.org](https://www.patternfly.org/) - Official documentation +- [PatternFly React GitHub](https://github.com/patternfly/patternfly-react) - Source code +- [PatternFly React Seed](https://github.com/patternfly/patternfly-react-seed) - Starter template +- [PatternFly Chatbot](https://www.patternfly.org/patternfly-ai/chatbot/overview) - Chatbot docs +- [PatternFly Charts](https://www.patternfly.org/charts/about-charts) - Charts documentation + +## Chart Color Guidelines + +When using charts, follow these color rules: + +- **Blue**: Use for success indicators +- **Red-orange**: Use only for failure/error states +- **Other colors** (green, teal, purple, orange, yellow): Use for neutral categories +- **Brightness order**: Start with 300 (base), then 100, 500, 200, 400 + +```jsx +const chartColors = [ + 'var(--pf-t-chart-color-blue-300)', + 'var(--pf-t-chart-color-green-300)', + 'var(--pf-t-chart-color-purple-300)' +]; +``` + +## State Handling Pattern + +Always handle all data states: + +```jsx +if (isLoading) return ; +if (error) return ; +if (!data?.length) return ; + +return ; +``` + +## Accessibility Requirements + +- Always provide `aria-label` for interactive elements +- Use semantic heading levels with `Title` component +- Implement keyboard navigation for custom interactions +- Use `role` attributes appropriately +- Test with screen readers + +```jsx + e.key === 'Enter' && handleClick()} +> + Clickable content + +``` diff --git a/skills/patternfly-6-development/STYLING.md b/skills/patternfly-6-development/STYLING.md new file mode 100644 index 0000000..75de962 --- /dev/null +++ b/skills/patternfly-6-development/STYLING.md @@ -0,0 +1,363 @@ +# PatternFly 6 Styling Guide + +CSS classes, design tokens, and styling patterns for PatternFly 6. + +## Class Naming Conventions + +### Version Prefixes + +```css +/* PatternFly v6 classes - ALWAYS use these */ +.pf-v6-c-button /* Components */ +.pf-v6-u-m-md /* Utilities */ +.pf-v6-l-grid /* Layouts */ + +/* NEVER use legacy prefixes */ +.pf-v5-c-button /* v5 - outdated */ +.pf-c-button /* v4 - outdated */ +.pf-u-m-md /* No version - outdated */ +``` + +### Class Categories + +| Prefix | Purpose | Example | +|--------|---------|---------| +| `pf-v6-c-` | Components | `pf-v6-c-button`, `pf-v6-c-card` | +| `pf-v6-u-` | Utilities | `pf-v6-u-m-md`, `pf-v6-u-text-align-center` | +| `pf-v6-l-` | Layouts | `pf-v6-l-grid`, `pf-v6-l-stack` | +| `pf-v6-m-` | Modifiers | `pf-v6-m-gutter`, `pf-v6-m-primary` | + +## Design Tokens + +### Token Types + +Use **semantic tokens** (no numbers) for application styling. Avoid **base tokens** (with numbers) as they may change. + +```css +/* Correct - Semantic tokens */ +color: var(--pf-t--global--text--color--regular); +margin: var(--pf-t--global--spacer--md); + +/* Avoid - Base tokens (internal use only) */ +color: var(--pf-t--global--text--color--100); +``` + +### Spacing Tokens + +```css +--pf-t--global--spacer--xs /* 4px */ +--pf-t--global--spacer--sm /* 8px */ +--pf-t--global--spacer--md /* 16px */ +--pf-t--global--spacer--lg /* 24px */ +--pf-t--global--spacer--xl /* 32px */ +--pf-t--global--spacer--2xl /* 48px */ +--pf-t--global--spacer--3xl /* 64px */ +``` + +### Color Tokens + +```css +/* Text colors */ +--pf-t--global--text--color--regular +--pf-t--global--text--color--subtle +--pf-t--global--text--color--disabled +--pf-t--global--text--color--on-brand + +/* Background colors */ +--pf-t--global--background--color--primary--default +--pf-t--global--background--color--secondary--default + +/* Status colors */ +--pf-t--global--color--status--success--default +--pf-t--global--color--status--warning--default +--pf-t--global--color--status--danger--default +--pf-t--global--color--status--info--default +``` + +### Chart Color Tokens + +```css +/* Chart color families */ +--pf-t-chart-color-blue-100 /* Lightest */ +--pf-t-chart-color-blue-200 +--pf-t-chart-color-blue-300 /* Base - use first */ +--pf-t-chart-color-blue-400 +--pf-t-chart-color-blue-500 /* Darkest */ + +/* Available families */ +/* blue, green, teal, purple, orange, yellow, red-orange, black */ + +/* Usage order: 300 (base) → 100 → 500 → 200 → 400 */ +``` + +### Typography Tokens + +```css +--pf-t--global--font--family--body +--pf-t--global--font--family--heading +--pf-t--global--font--size--xs +--pf-t--global--font--size--sm +--pf-t--global--font--size--md +--pf-t--global--font--size--lg +--pf-t--global--font--size--xl +--pf-t--global--font--weight--normal +--pf-t--global--font--weight--bold +``` + +## Component Composition Patterns + +### Priority Order + +1. **Component composition** - Use PatternFly layout components +2. **Component props** - Use component-specific props for styling +3. **Utility classes** - Only when composition/props aren't sufficient + +### Page Layout + +```jsx + + + + App Name + + + + + + + + + {/* Page content */} + + +``` + +### Content Layout with Stack + +```jsx + + + + Page Title + + + Page description + + + {/* Main content */} + + + +``` + +### Grid Layout + +```jsx + + + Card 1 + + + Card 2 + + + Card 3 + + +``` + +### Flex Layout + +```jsx + + Item 1 + Item 2 (grows) + Item 3 + +``` + +### Form Layout + +```jsx +
+ + + + + + + + + + +
+``` + +### Button Spacing + +```jsx +// Correct - Use ActionGroup for button spacing + + + + + +// Avoid - Manual spacing +
+ + +
+``` + +### Toolbar Alignment + +```jsx + + + Left content + Right content + + +``` + +## Utility Classes + +Use only when component composition is insufficient. + +### Spacing Utilities + +```css +/* Margin */ +.pf-v6-u-m-{size} /* All sides */ +.pf-v6-u-mt-{size} /* Top */ +.pf-v6-u-mr-{size} /* Right */ +.pf-v6-u-mb-{size} /* Bottom */ +.pf-v6-u-ml-{size} /* Left */ +.pf-v6-u-mx-{size} /* Horizontal */ +.pf-v6-u-my-{size} /* Vertical */ + +/* Padding */ +.pf-v6-u-p-{size} /* All sides */ +.pf-v6-u-pt-{size} /* Top */ +/* ... same pattern as margin */ + +/* Sizes: xs, sm, md, lg, xl, 2xl, 3xl */ +``` + +### Text Utilities + +```css +.pf-v6-u-text-align-center +.pf-v6-u-text-align-left +.pf-v6-u-text-align-right +.pf-v6-u-font-weight-bold +.pf-v6-u-font-size-sm +.pf-v6-u-font-size-lg +``` + +### Display Utilities + +```css +.pf-v6-u-display-none +.pf-v6-u-display-block +.pf-v6-u-display-flex +.pf-v6-u-display-inline +.pf-v6-u-display-inline-block +``` + +### Responsive Modifiers + +```css +/* Breakpoint suffixes: -on-sm, -on-md, -on-lg, -on-xl, -on-2xl */ +.pf-v6-u-display-none-on-sm +.pf-v6-u-display-block-on-md +.pf-v6-u-text-align-center-on-lg +``` + +### Width and Height + +```css +.pf-v6-u-w-25 +.pf-v6-u-w-50 +.pf-v6-u-w-75 +.pf-v6-u-w-100 +.pf-v6-u-h-100 +``` + +## Inline Styles + +When utility classes don't exist, use design tokens in inline styles: + +```jsx +// Correct - Design tokens +
+ +// Avoid - Hardcoded values +
+
+``` + +## Icons + +Always use PatternFly icons, never emojis: + +```jsx +// Correct +import { ArrowUpIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-up-icon'; + + +// Wrong +📈 +``` + +## External Links + +Add external link icon for links opening new tabs: + +```jsx +import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'; + + +``` + +## Headings and Text + +Always use PatternFly components for text: + +```jsx +// Correct +import { Title, Content } from '@patternfly/react-core'; +Dashboard +Description text + +// Wrong +

Dashboard

+

Description text

+``` + +## Do's and Don'ts Summary + +### Do +- Use component composition (PageSection, Stack, Grid) +- Use component props for styling options +- Use semantic design tokens +- Use PatternFly icons +- Use Title and Content components + +### Don't +- Use utility classes for basic layout +- Use hardcoded pixel values +- Use emojis for icons +- Use raw HTML elements (h1, p, div) for content +- Override PatternFly component internals +- Mix PatternFly versions diff --git a/skills/patternfly-6-development/TROUBLESHOOTING.md b/skills/patternfly-6-development/TROUBLESHOOTING.md new file mode 100644 index 0000000..5e175bb --- /dev/null +++ b/skills/patternfly-6-development/TROUBLESHOOTING.md @@ -0,0 +1,361 @@ +# PatternFly 6 Troubleshooting Guide + +Quick solutions for common PatternFly 6 issues. + +## Import Errors + +### Module not found: '@patternfly/react-charts' + +**Cause**: Missing `/victory` in import path. + +```jsx +// Wrong +import { ChartDonut } from '@patternfly/react-charts'; + +// Correct +import { ChartDonut } from '@patternfly/react-charts/victory'; +``` + +**Also check**: +```bash +npm install @patternfly/react-charts victory +``` + +### Module not found: '@patternfly/chatbot' + +**Cause**: Missing dynamic import path. + +```jsx +// Wrong +import { Chatbot } from '@patternfly/chatbot'; + +// Correct +import { Chatbot } from '@patternfly/chatbot/dist/dynamic/Chatbot'; +``` + +**Also check**: +```bash +npm install @patternfly/chatbot +``` + +### Module not found: '@patternfly/react-component-groups' + +**Cause**: Missing dynamic import path. + +```jsx +// Wrong +import { BulkSelect } from '@patternfly/react-component-groups'; + +// Correct +import { BulkSelect } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect'; +``` + +### Module not found: '@patternfly/react-core' + +**Solution**: +```bash +npm install @patternfly/react-core @patternfly/react-table @patternfly/react-icons +``` + +## Styling Issues + +### PatternFly styles not applied + +**Cause**: Missing CSS import. + +```jsx +// Add to main App.js or index.js +import '@patternfly/react-core/dist/styles/base.css'; +``` + +### Utility classes not working (pf-v6-u-*) + +**Cause**: Missing addons CSS. + +```jsx +import '@patternfly/patternfly/patternfly-addons.css'; +``` + +**Also check** package is installed: +```bash +npm install @patternfly/patternfly +``` + +### Chart colors not defined + +**Cause**: Missing charts CSS. + +```jsx +import '@patternfly/patternfly/patternfly-charts.css'; +``` + +### Chatbot components unstyled + +**Cause**: Missing chatbot CSS. + +```jsx +import '@patternfly/chatbot/dist/css/main.css'; +``` + +### Wrong class prefix (pf-v5-, pf-c-) + +**Solution**: Replace with `pf-v6-` prefix. + +```jsx +// Wrong +
+
+ +// Correct +
+``` + +Run validation script: +```bash +bash scripts/check-pf6-classes.sh src/ +``` + +## Component Issues + +### AI generates non-existent components + +**Common mistakes and corrections**: + +| Wrong | Correct | +|-------|---------| +| `` | `` | +| `No data` | `` | +| `` | `` | +| `` | `` or `<Content component="h1">` | +| `<PageHeader>` | Use `<PageSection>` with `<Title>` | + +### CSS modules syntax doesn't work + +**Cause**: PatternFly doesn't use CSS modules. + +```jsx +// Wrong +<div className={styles.customClass}> + +// Correct - Use PatternFly utilities +<div className="pf-v6-u-m-md"> + +// Or inline with tokens +<div style={{ margin: 'var(--pf-t--global--spacer--md)' }}> +``` + +### Dropdown gets clipped in scrollable container + +**Solution**: Use popperProps to append to body. + +```jsx +<Dropdown + popperProps={{ + appendTo: () => document.body, + enableFlip: true + }} +> +``` + +## Chart Issues + +### Chart not rendering + +**Checklist**: +1. Check import path includes `/victory` +2. Verify container has width/height +3. Check data format matches chart expectations +4. Look for Victory.js warnings in console + +```jsx +// Ensure container has dimensions +<div style={{ height: '300px', width: '100%' }}> + <ChartDonut data={data} /> +</div> +``` + +### Chart colors wrong + +**Cause**: Using hardcoded colors instead of tokens. + +```jsx +// Wrong +<ChartDonut colorScale={['#333', '#666', '#999']} /> + +// Correct +const chartColors = [ + 'var(--pf-t-chart-color-blue-300)', + 'var(--pf-t-chart-color-green-300)', + 'var(--pf-t-chart-color-purple-300)' +]; +<ChartDonut colorScale={chartColors} /> +``` + +## Accessibility Issues + +### Missing ARIA labels + +**Solution**: Always add aria-label for interactive elements. + +```jsx +// Wrong +<Card onClick={handleClick}> + +// Correct +<Card + isClickable + onClick={handleClick} + tabIndex={0} + role="button" + aria-label="View details" + onKeyDown={(e) => e.key === 'Enter' && handleClick()} +> +``` + +### Missing keyboard navigation + +**Solution**: Add tabIndex and key handlers. + +```jsx +<div + tabIndex={0} + onClick={handleAction} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + handleAction(); + } + }} + role="button" + aria-label="Perform action" +> +``` + +## Performance Issues + +### Slow table with large datasets + +**Solutions**: + +1. **Pagination**: +```jsx +const [page, setPage] = useState(1); +const [perPage, setPerPage] = useState(20); +const paginatedData = data.slice((page - 1) * perPage, page * perPage); +``` + +2. **Memoization**: +```jsx +const MemoizedRow = React.memo(({ item }) => ( + <Tr><Td>{item.name}</Td></Tr> +)); +``` + +3. **Virtualization**: Use react-virtual or similar library for 1000+ rows. + +### Large bundle size + +**Solutions**: + +1. **Tree-shake icons**: +```jsx +// Correct - Individual imports +import { TimesIcon } from '@patternfly/react-icons/dist/esm/icons/times-icon'; + +// Wrong - Imports entire package +import { TimesIcon } from '@patternfly/react-icons'; +``` + +2. **Lazy load heavy components**: +```jsx +const LazyChart = React.lazy(() => import('./HeavyChart')); + +<Suspense fallback={<Spinner />}> + <LazyChart /> +</Suspense> +``` + +## Setup Issues + +### npm install fails + +**Solutions**: +```bash +# Clear cache +npm cache clean --force + +# Remove and reinstall +rm -rf node_modules package-lock.json +npm install + +# Try legacy peer deps +npm install --legacy-peer-deps +``` + +### Port already in use + +**Solutions**: +```bash +# Kill process on port (Linux/Mac) +lsof -ti:9000 | xargs kill -9 + +# Use different port +PORT=3001 npm run start:dev +``` + +### Permission errors on npm + +**Solution**: Use nvm for Node.js management. +```bash +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash +nvm install node +nvm use node +``` + +## Build Issues + +### TypeScript errors + +**Check**: +```bash +npx tsc --noEmit +``` + +### Build fails with module errors + +**Solutions**: +```bash +# Clear build cache +rm -rf dist/ build/ + +# Verify all imports +npm run lint + +# Rebuild +npm run build +``` + +## Quick Diagnostic Commands + +```bash +# Check PatternFly package versions +npm list @patternfly/react-core @patternfly/react-charts @patternfly/chatbot + +# Find incorrect import patterns +bash scripts/check-pf6-imports.sh src/ + +# Find legacy class usage +bash scripts/check-pf6-classes.sh src/ + +# Verify package installation +npm list | grep patternfly +``` + +## Getting Help + +1. Check [PatternFly.org](https://www.patternfly.org/) +2. Search [GitHub Issues](https://github.com/patternfly/patternfly-react/issues) +3. Use `patternfly` tag on Stack Overflow +4. Fetch latest docs: +```bash +bash scripts/fetch-latest-docs.sh troubleshooting +``` diff --git a/skills/patternfly-6-development/scripts/check-pf6-classes.sh b/skills/patternfly-6-development/scripts/check-pf6-classes.sh new file mode 100755 index 0000000..22f0f6c --- /dev/null +++ b/skills/patternfly-6-development/scripts/check-pf6-classes.sh @@ -0,0 +1,124 @@ +#!/bin/bash +# +# check-pf6-classes.sh +# Finds legacy PatternFly class usage in a project +# +# Usage: bash check-pf6-classes.sh [path] +# path defaults to current directory +# + +set -e + +SEARCH_PATH="${1:-.}" +ISSUES_FOUND=0 + +echo "Checking for legacy PatternFly class usage in: $SEARCH_PATH" +echo "========================================================" +echo "" + +# Check for pf-v5- classes (PatternFly v5) +echo "Checking for pf-v5- classes (PatternFly v5)..." +V5_CLASSES=$(grep -rn "pf-v5-" "$SEARCH_PATH" --include="*.js" --include="*.jsx" --include="*.ts" --include="*.tsx" --include="*.css" --include="*.scss" --include="*.html" 2>/dev/null || true) +if [ -n "$V5_CLASSES" ]; then + echo "ERROR: Found pf-v5- classes (should use pf-v6-):" + echo "$V5_CLASSES" + echo "" + echo "FIX: Replace pf-v5- with pf-v6-" + echo " Example: pf-v5-c-button -> pf-v6-c-button" + echo "" + ISSUES_FOUND=$((ISSUES_FOUND + 1)) +else + echo "OK: No pf-v5- classes found" +fi +echo "" + +# Check for pf-c- classes without version (PatternFly v4 and earlier) +echo "Checking for pf-c- classes without version prefix..." +V4_CLASSES=$(grep -rn "pf-c-" "$SEARCH_PATH" --include="*.js" --include="*.jsx" --include="*.ts" --include="*.tsx" --include="*.css" --include="*.scss" --include="*.html" 2>/dev/null | grep -v "pf-v" || true) +if [ -n "$V4_CLASSES" ]; then + echo "ERROR: Found pf-c- classes without version prefix (should use pf-v6-c-):" + echo "$V4_CLASSES" + echo "" + echo "FIX: Add v6 version prefix" + echo " Example: pf-c-button -> pf-v6-c-button" + echo "" + ISSUES_FOUND=$((ISSUES_FOUND + 1)) +else + echo "OK: No unversioned pf-c- classes found" +fi +echo "" + +# Check for pf-u- classes without version (old utilities) +echo "Checking for pf-u- utility classes without version prefix..." +OLD_UTILS=$(grep -rn "pf-u-" "$SEARCH_PATH" --include="*.js" --include="*.jsx" --include="*.ts" --include="*.tsx" --include="*.css" --include="*.scss" --include="*.html" 2>/dev/null | grep -v "pf-v" || true) +if [ -n "$OLD_UTILS" ]; then + echo "ERROR: Found pf-u- utility classes without version prefix (should use pf-v6-u-):" + echo "$OLD_UTILS" + echo "" + echo "FIX: Add v6 version prefix" + echo " Example: pf-u-m-md -> pf-v6-u-m-md" + echo "" + ISSUES_FOUND=$((ISSUES_FOUND + 1)) +else + echo "OK: No unversioned pf-u- utility classes found" +fi +echo "" + +# Check for pf-l- classes without version (old layouts) +echo "Checking for pf-l- layout classes without version prefix..." +OLD_LAYOUTS=$(grep -rn "pf-l-" "$SEARCH_PATH" --include="*.js" --include="*.jsx" --include="*.ts" --include="*.tsx" --include="*.css" --include="*.scss" --include="*.html" 2>/dev/null | grep -v "pf-v" || true) +if [ -n "$OLD_LAYOUTS" ]; then + echo "ERROR: Found pf-l- layout classes without version prefix (should use pf-v6-l-):" + echo "$OLD_LAYOUTS" + echo "" + echo "FIX: Add v6 version prefix" + echo " Example: pf-l-grid -> pf-v6-l-grid" + echo "" + ISSUES_FOUND=$((ISSUES_FOUND + 1)) +else + echo "OK: No unversioned pf-l- layout classes found" +fi +echo "" + +# Check for hardcoded color values that should use tokens +echo "Checking for hardcoded hex colors in styles..." +HARDCODED_COLORS=$(grep -rn "style={{.*#[0-9a-fA-F]\{3,6\}" "$SEARCH_PATH" --include="*.js" --include="*.jsx" --include="*.ts" --include="*.tsx" 2>/dev/null || true) +if [ -n "$HARDCODED_COLORS" ]; then + echo "WARNING: Found hardcoded hex colors in inline styles:" + echo "$HARDCODED_COLORS" + echo "" + echo "FIX: Use PatternFly design tokens instead" + echo " Example: style={{ color: '#333' }} -> style={{ color: 'var(--pf-t--global--text--color--regular)' }}" + echo "" + ISSUES_FOUND=$((ISSUES_FOUND + 1)) +else + echo "OK: No hardcoded hex colors found in inline styles" +fi +echo "" + +# Check for hardcoded pixel values in spacing +echo "Checking for hardcoded pixel values in margins/padding..." +HARDCODED_SPACING=$(grep -rn "style={{.*\(margin\|padding\).*[0-9]\+px" "$SEARCH_PATH" --include="*.js" --include="*.jsx" --include="*.ts" --include="*.tsx" 2>/dev/null || true) +if [ -n "$HARDCODED_SPACING" ]; then + echo "WARNING: Found hardcoded pixel values for spacing:" + echo "$HARDCODED_SPACING" + echo "" + echo "FIX: Use PatternFly spacing tokens instead" + echo " Example: margin: '16px' -> margin: 'var(--pf-t--global--spacer--md)'" + echo "" + ISSUES_FOUND=$((ISSUES_FOUND + 1)) +else + echo "OK: No hardcoded pixel spacing found" +fi +echo "" + +# Summary +echo "========================================================" +if [ $ISSUES_FOUND -eq 0 ]; then + echo "SUCCESS: No legacy class or styling issues found!" +else + echo "ISSUES FOUND: $ISSUES_FOUND" + echo "Please update to PatternFly v6 patterns." +fi + +exit $ISSUES_FOUND diff --git a/skills/patternfly-6-development/scripts/check-pf6-imports.sh b/skills/patternfly-6-development/scripts/check-pf6-imports.sh new file mode 100755 index 0000000..f56ccae --- /dev/null +++ b/skills/patternfly-6-development/scripts/check-pf6-imports.sh @@ -0,0 +1,109 @@ +#!/bin/bash +# +# check-pf6-imports.sh +# Validates PatternFly 6 import patterns in a project +# +# Usage: bash check-pf6-imports.sh [path] +# path defaults to current directory +# + +set -e + +SEARCH_PATH="${1:-.}" +ISSUES_FOUND=0 + +echo "Checking PatternFly 6 import patterns in: $SEARCH_PATH" +echo "==============================================" +echo "" + +# Check for incorrect react-charts imports (missing /victory) +echo "Checking @patternfly/react-charts imports..." +CHARTS_ISSUES=$(grep -rn "from ['\"]@patternfly/react-charts['\"]" "$SEARCH_PATH" --include="*.js" --include="*.jsx" --include="*.ts" --include="*.tsx" 2>/dev/null || true) +if [ -n "$CHARTS_ISSUES" ]; then + echo "ERROR: Found @patternfly/react-charts imports without /victory path:" + echo "$CHARTS_ISSUES" + echo "" + echo "FIX: Change imports to use '@patternfly/react-charts/victory'" + echo " Example: import { ChartDonut } from '@patternfly/react-charts/victory';" + echo "" + ISSUES_FOUND=$((ISSUES_FOUND + 1)) +else + echo "OK: No incorrect react-charts imports found" +fi +echo "" + +# Check for incorrect chatbot imports (missing /dist/dynamic/) +echo "Checking @patternfly/chatbot imports..." +CHATBOT_ISSUES=$(grep -rn "from ['\"]@patternfly/chatbot['\"]" "$SEARCH_PATH" --include="*.js" --include="*.jsx" --include="*.ts" --include="*.tsx" 2>/dev/null || true) +if [ -n "$CHATBOT_ISSUES" ]; then + echo "ERROR: Found @patternfly/chatbot imports without /dist/dynamic/ path:" + echo "$CHATBOT_ISSUES" + echo "" + echo "FIX: Use dynamic imports from '@patternfly/chatbot/dist/dynamic/ComponentName'" + echo " Example: import { Chatbot } from '@patternfly/chatbot/dist/dynamic/Chatbot';" + echo "" + ISSUES_FOUND=$((ISSUES_FOUND + 1)) +else + echo "OK: No incorrect chatbot imports found" +fi +echo "" + +# Check for incorrect component-groups imports (missing /dist/dynamic/) +echo "Checking @patternfly/react-component-groups imports..." +GROUPS_ISSUES=$(grep -rn "from ['\"]@patternfly/react-component-groups['\"]" "$SEARCH_PATH" --include="*.js" --include="*.jsx" --include="*.ts" --include="*.tsx" 2>/dev/null || true) +if [ -n "$GROUPS_ISSUES" ]; then + echo "ERROR: Found @patternfly/react-component-groups imports without /dist/dynamic/ path:" + echo "$GROUPS_ISSUES" + echo "" + echo "FIX: Use dynamic imports from '@patternfly/react-component-groups/dist/dynamic/ComponentName'" + echo " Example: import { BulkSelect } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';" + echo "" + ISSUES_FOUND=$((ISSUES_FOUND + 1)) +else + echo "OK: No incorrect component-groups imports found" +fi +echo "" + +# Check for deprecated Text component usage +echo "Checking for deprecated Text component..." +TEXT_ISSUES=$(grep -rn "import.*\bText\b.*from ['\"]@patternfly/react-core" "$SEARCH_PATH" --include="*.js" --include="*.jsx" --include="*.ts" --include="*.tsx" 2>/dev/null || true) +if [ -n "$TEXT_ISSUES" ]; then + echo "WARNING: Found Text component imports (deprecated in v6):" + echo "$TEXT_ISSUES" + echo "" + echo "FIX: Use Content component instead" + echo " Example: import { Content } from '@patternfly/react-core';" + echo " <Content component=\"p\">Text here</Content>" + echo "" + ISSUES_FOUND=$((ISSUES_FOUND + 1)) +else + echo "OK: No deprecated Text component imports found" +fi +echo "" + +# Check for CSS modules usage +echo "Checking for CSS modules syntax..." +CSS_MODULES=$(grep -rn "className={styles\." "$SEARCH_PATH" --include="*.js" --include="*.jsx" --include="*.ts" --include="*.tsx" 2>/dev/null || true) +if [ -n "$CSS_MODULES" ]; then + echo "WARNING: Found CSS modules syntax (may not work with PatternFly):" + echo "$CSS_MODULES" + echo "" + echo "FIX: Use PatternFly utility classes instead" + echo " Example: className=\"pf-v6-u-m-md\"" + echo "" + ISSUES_FOUND=$((ISSUES_FOUND + 1)) +else + echo "OK: No CSS modules syntax found" +fi +echo "" + +# Summary +echo "==============================================" +if [ $ISSUES_FOUND -eq 0 ]; then + echo "SUCCESS: No import issues found!" +else + echo "ISSUES FOUND: $ISSUES_FOUND" + echo "Please fix the issues above for correct PatternFly 6 usage." +fi + +exit $ISSUES_FOUND diff --git a/skills/patternfly-6-development/scripts/fetch-latest-docs.sh b/skills/patternfly-6-development/scripts/fetch-latest-docs.sh new file mode 100755 index 0000000..e8a04b5 --- /dev/null +++ b/skills/patternfly-6-development/scripts/fetch-latest-docs.sh @@ -0,0 +1,119 @@ +#!/bin/bash +# +# fetch-latest-docs.sh +# Fetches the latest PatternFly documentation from GitHub +# +# Usage: bash fetch-latest-docs.sh [topic] +# +# Topics: +# charts - Charts documentation +# chatbot - Chatbot documentation +# components - Component layout and data display docs +# guidelines - Core development guidelines +# styling - Styling standards +# troubleshooting - Common issues and solutions +# setup - Project setup and quick start +# all - All documentation (default) +# + +set -e + +BASE_URL="https://raw.githubusercontent.com/patternfly/patternfly-ai-coding/main/.pf-ai-documentation" +TOPIC="${1:-all}" + +echo "Fetching PatternFly documentation..." +echo "====================================" +echo "" + +fetch_doc() { + local path="$1" + local name="$2" + echo "--- $name ---" + curl -s "${BASE_URL}/${path}" 2>/dev/null || echo "Failed to fetch: ${path}" + echo "" + echo "" +} + +case "$TOPIC" in + charts) + fetch_doc "charts/README.md" "Charts Documentation" + ;; + + chatbot) + fetch_doc "chatbot/README.md" "Chatbot Documentation" + ;; + + components) + fetch_doc "components/layout/README.md" "Layout Components" + fetch_doc "components/data-display/README.md" "Data Display Components" + fetch_doc "components/data-display/table.md" "Table Component" + ;; + + guidelines) + fetch_doc "guidelines/README.md" "Core Guidelines" + fetch_doc "guidelines/component-architecture.md" "Component Architecture" + ;; + + styling) + fetch_doc "guidelines/styling-standards.md" "Styling Standards" + ;; + + troubleshooting) + fetch_doc "troubleshooting/common-issues.md" "Common Issues" + ;; + + setup) + fetch_doc "setup/README.md" "Setup Guide" + fetch_doc "setup/quick-start.md" "Quick Start" + fetch_doc "setup/development-environment.md" "Development Environment" + ;; + + component-groups) + fetch_doc "component-groups/README.md" "Component Groups" + ;; + + all) + echo "Fetching all documentation..." + echo "" + fetch_doc "README.md" "Main README" + fetch_doc "charts/README.md" "Charts" + fetch_doc "chatbot/README.md" "Chatbot" + fetch_doc "component-groups/README.md" "Component Groups" + fetch_doc "guidelines/README.md" "Guidelines" + fetch_doc "guidelines/styling-standards.md" "Styling Standards" + fetch_doc "guidelines/component-architecture.md" "Component Architecture" + fetch_doc "troubleshooting/common-issues.md" "Troubleshooting" + ;; + + index|list) + echo "Available topics:" + echo " charts - Charts documentation (Victory.js/ECharts)" + echo " chatbot - Chatbot component documentation" + echo " components - Layout and data display components" + echo " component-groups - React Component Groups documentation" + echo " guidelines - Core development guidelines" + echo " styling - CSS classes and design tokens" + echo " troubleshooting - Common issues and solutions" + echo " setup - Project setup and quick start" + echo " all - All documentation (default)" + echo "" + echo "Usage: bash fetch-latest-docs.sh [topic]" + ;; + + *) + echo "Unknown topic: $TOPIC" + echo "" + echo "Available topics: charts, chatbot, components, component-groups," + echo " guidelines, styling, troubleshooting, setup, all" + echo "" + echo "Use 'bash fetch-latest-docs.sh list' to see all options" + exit 1 + ;; +esac + +echo "====================================" +echo "Documentation fetched successfully." +echo "" +echo "Source: https://github.com/patternfly/patternfly-ai-coding" +echo "" +echo "For more information, visit https://www.patternfly.org/"