# External References
This document provides links to official PatternFly documentation, repositories, and helpful external resources for AI coders working with PatternFly React applications.
## Introduction
External resources are essential for staying current with PatternFly updates, finding implementation examples, and troubleshooting issues. This curated list provides direct access to the most important PatternFly resources and community support channels.
## Related Files
- [**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
## Official PatternFly Documentation
### Primary Documentation
- **[PatternFly.org](https://www.patternfly.org/)** - Main documentation site with component APIs and examples
- **[PatternFly Design Guidelines](https://www.patternfly.org/get-started/design)** - Design principles and patterns
- **[PatternFly React Components](https://www.patternfly.org/components)** - Complete component library documentation
- **[PatternFly Layouts](https://www.patternfly.org/layouts)** - Layout system and grid documentation
### Component-Specific Documentation
- **[Button Component](https://www.patternfly.org/components/button)** - Button variants and usage
- **[Table Component](https://www.patternfly.org/components/table)** - Composable table implementation
- **[Dropdown Component](https://www.patternfly.org/components/menus/dropdown)** - Dropdown and menu patterns
- **[Toolbar Component](https://www.patternfly.org/components/toolbar)** - Toolbar with filters and actions
- **[Page Component](https://www.patternfly.org/components/page)** - Page layout and structure
- **[Icon Component](https://www.patternfly.org/components/icon)** - Icon usage and sizing
### Utility Classes Documentation
- **[Accessibility](https://www.patternfly.org/utility-classes/accessibility)** - Accessibilty utility classes
- **[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/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
- **[Spacing](https://www.patternfly.org/utility-classes/spacing)** - Spacing utility classes
- **[Text](https://www.patternfly.org/utility-classes/text)** - Text utility classes
### Specialized Features
- **[PatternFly Charts](https://www.patternfly.org/charts/about)** - Data visualization guidelines
- **[PatternFly AI - Chatbot](https://www.patternfly.org/patternfly-ai/chatbot/overview)** - AI chatbot components
- **[Accessibility Guidelines](https://www.patternfly.org/accessibility/accessibility-fundamentals)** - WCAG compliance and best practices
## Official Repositories
### Core Repositories
- **[PatternFly React](https://github.com/patternfly/patternfly-react)** - Main React component library
- **[PatternFly Core](https://github.com/patternfly/patternfly)** - HTML/CSS foundation
- **[PatternFly React Seed](https://github.com/patternfly/patternfly-react-seed)** - Starter template for new projects
### Specialized Packages
- **[PatternFly Charts Repository](https://github.com/patternfly/patternfly-react/tree/main/packages/react-charts)** - Charts package source and examples
- **[PatternFly Icons](https://github.com/patternfly/patternfly-react/tree/main/packages/react-icons)** - Icon library source
- **[PatternFly Tokens](https://github.com/patternfly/patternfly-react/tree/main/packages/react-tokens)** - Design tokens package
### Example Applications
- **[PatternFly Demo App](https://github.com/patternfly/patternfly-react-demo-app)** - Complete demo application
- **[PatternFly Quickstarts](https://github.com/patternfly/patternfly-quickstarts)** - Interactive tutorials and guides
## Component Examples and Code Snippets
### "View Code" Sections
Most PatternFly component pages include "View Code" sections that provide working examples:
- Navigate to any component page on [patternfly.org](https://www.patternfly.org/)
- Look for the "View Code" button or link
- Copy and adapt the provided code snippets
- Use these as starting points for your implementations
### Repository Examples
Find practical examples in the PatternFly repositories:
- **Component Examples**: `patternfly-react/packages/react-core/src/components/[ComponentName]/examples/`
- **Demo Files**: `*.tsx` and `*.jsx` files in component directories
- **Test Files**: Component test files often contain usage examples
### Useful Repository Paths
```
patternfly-react/
├── packages/react-core/src/components/
│ ├── Button/examples/
│ ├── Table/examples/
│ ├── Dropdown/examples/
│ └── [ComponentName]/examples/
├── packages/react-table/src/components/
└── packages/react-charts/src/components/
```
## Charts and Visualization Resources
### PatternFly Charts
- **[Charts README](https://github.com/patternfly/patternfly-react/tree/main/packages/react-charts#readme)** - Installation and usage guide
- **[Victory.js Documentation](https://formidable.com/open-source/victory/)** - Underlying charting library
- **[ECharts Documentation](https://echarts.apache.org/)** - Alternative charting library
### Chart Examples
- **[Chart Component Examples](https://github.com/patternfly/patternfly-react/tree/main/packages/react-charts/src/components)** - Source code examples
- **[PatternFly Chart Demos](https://www.patternfly.org/charts)** - Interactive chart examples
## Chatbot Resources
### PatternFly Chatbot
- **[Chatbot Overview](https://www.patternfly.org/patternfly-ai/chatbot/overview)** - Main chatbot documentation
- **[Basic Chatbot Demo](https://www.patternfly.org/patternfly-ai/chatbot/overview/demo/basic-chatbot)** - Simple chatbot implementation
- **[Embedded Chatbot Demo](https://www.patternfly.org/patternfly-ai/chatbot/overview/demo/embedded-chatbot)** - Embedded chatbot pattern
- **[Chatbot Demos Overview](https://www.patternfly.org/patternfly-ai/chatbot/overview/demo)** - All chatbot demo variations
### Implementation Resources
- **Demo Source Code**: Available on each demo page via "View Code" sections
- **Component API**: Detailed props and usage information
- **Integration Examples**: How to integrate with existing PatternFly applications
## Community and Support
### GitHub Resources
- **[Issues](https://github.com/patternfly/patternfly-react/issues)** - Bug reports and feature requests
- **[Discussions](https://github.com/patternfly/patternfly-react/discussions)** - Community Q&A and discussions
- **[Pull Requests](https://github.com/patternfly/patternfly-react/pulls)** - Code contributions and reviews
### Communication Channels
- **[PatternFly Slack](https://patternfly.slack.com/)** - Real-time community support
- **[PatternFly Forum](https://forum.patternfly.org/)** - Long-form discussions and help
- **[Stack Overflow](https://stackoverflow.com/questions/tagged/patternfly)** - Technical Q&A with `patternfly` tag
## Development Tools and Extensions
### Browser Extensions
- **[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/)** - React component debugging
- **[PatternFly DevTools](https://github.com/patternfly/patternfly-devtools)** - PatternFly-specific debugging tools
### IDE Extensions
- **[VS Code PatternFly Snippets](https://marketplace.visualstudio.com/search?term=patternfly)** - Code snippets for VS Code
- **[ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)** - React development shortcuts
## Learning Resources
### Tutorials and Guides
- **[Getting Started Guide](https://www.patternfly.org/get-started/develop)** - Development setup and first steps
- **[Migration Guides](https://www.patternfly.org/get-started/upgrade)** - Upgrading between PatternFly versions
- **[Design System Principles](https://www.patternfly.org/get-started/design)** - Understanding PatternFly design philosophy
### Video Resources
- **[PatternFly YouTube Channel](https://www.youtube.com/c/PatternFly)** - Tutorials and presentations
- **[Red Hat Developer](https://www.youtube.com/c/RedHatDeveloper)** - Related development content
## Version-Specific Resources
### PatternFly v6 (Current)
- **[v6 Documentation](https://www.patternfly.org/)** - Current version documentation
- **[v6 Migration Guide](https://www.patternfly.org/get-started/upgrade)** - Upgrading from v5 to v6
- **[v6 Release Notes](https://github.com/patternfly/patternfly-react/releases)** - Latest changes and updates
### Legacy Versions
- **[v5 Documentation](https://v5.patternfly.org/)** - Previous version (for reference only)
- **[v4 Documentation](https://v4.patternfly.org/)** - Older version (for legacy projects)
## API References
### Node.js and npm
- **[Node.js Downloads](https://nodejs.org/)** - Official Node.js installation
- **[npm Documentation](https://docs.npmjs.com/)** - Package manager documentation
- **[nvm (Node Version Manager)](https://github.com/nvm-sh/nvm)** - Managing multiple Node.js versions
### React Ecosystem
- **[React Documentation](https://react.dev/)** - Official React documentation
- **[React Router](https://reactrouter.com/)** - Client-side routing
- **[React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)** - Component testing
## Accessibility Resources
### WCAG Guidelines
- **[WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)** - Web accessibility standards
- **[ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)** - ARIA implementation patterns
- **[WebAIM](https://webaim.org/)** - Accessibility evaluation and guidance
### Testing Tools
- **[axe DevTools](https://www.deque.com/axe/devtools/)** - Accessibility testing browser extension
- **[WAVE](https://wave.webaim.org/)** - Web accessibility evaluation tool
- **[Lighthouse](https://developers.google.com/web/tools/lighthouse)** - Performance and accessibility auditing
## Performance Resources
### Optimization Guides
- **[React Performance](https://react.dev/learn/render-and-commit)** - React rendering optimization
- **[Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)** - Bundle size analysis
- **[Web Vitals](https://web.dev/vitals/)** - Core web performance metrics
### Monitoring Tools
- **[React DevTools Profiler](https://react.dev/blog/2018/09/10/introducing-the-react-profiler)** - Component performance profiling
- **[Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools)** - Browser performance tools
## Best Practices for Using External Resources
### Documentation Strategy
1. **Start with Official Docs**: Always check [patternfly.org](https://www.patternfly.org/) first
2. **Use "View Code" Sections**: Copy working examples from component pages
3. **Check Repository Examples**: Look at `*.tsx`/`*.jsx` files in PatternFly repos
4. **Provide Context to AI**: Share links and code snippets when asking for help
### Staying Current
1. **Follow Release Notes**: Monitor [GitHub releases](https://github.com/patternfly/patternfly-react/releases)
2. **Join Community Channels**: Participate in Slack or forum discussions
3. **Subscribe to Updates**: Watch PatternFly repositories for notifications
4. **Regular Documentation Review**: Periodically review component documentation for updates
### Troubleshooting Approach
1. **Search Issues First**: Check GitHub issues for similar problems
2. **Consult Multiple Sources**: Cross-reference documentation with examples
3. **Test Incrementally**: Isolate problems with minimal examples
4. **Share Specific Context**: Provide version numbers and code snippets when seeking help
## Quick Reference Links
### Most Frequently Used
- [PatternFly Components](https://www.patternfly.org/components)
- [PatternFly React Repository](https://github.com/patternfly/patternfly-react)
- [PatternFly React Seed](https://github.com/patternfly/patternfly-react-seed)
- [Charts README](https://github.com/patternfly/patternfly-react/tree/main/packages/react-charts#readme)
- [Chatbot Overview](https://www.patternfly.org/patternfly-ai/chatbot/overview)
### Emergency Resources
- [GitHub Issues](https://github.com/patternfly/patternfly-react/issues)
- [Stack Overflow PatternFly Tag](https://stackoverflow.com/questions/tagged/patternfly)
- [PatternFly Slack](https://patternfly.slack.com/)
Remember: **Always consult the official PatternFly documentation for your project's specific package versions.** Providing AI assistants with working code snippets or links to versioned documentation is highly effective for getting accurate implementation guidance.
