Skip to content
Open
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
82 changes: 79 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,11 +1,87 @@
# Dependencies
**/node_modules
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

# Build outputs
dist
yarn-error.log
dist/
build
build/
*.tsbuildinfo
*.buildinfo

# TypeScript
*.tsbuildinfo
*.d.ts.map

# CSS & Style outputs
*.css.map
*.sass.cache
*.scss.cache
.postcssrc

# Test coverage
coverage
coverage/
.nyc_output
*.lcov

# Environment variables
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
pnpm-debug.log*

# Package manager files
yarn.lock
package-lock.json
.pnpm-lock.yaml

# Build & bundler artifacts
stats.json
coverage
storybook-static
.webpack/
.vite/
.cache/

# IDE & Editor files
.DS_Store
.idea
.env
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
*.swp
*.swo
*~
.project
.classpath
.settings/
.history

# OS files
.DS_Store
Thumbs.db
Desktop.ini

# Misc
.agentready
.temp
.tmp
*.tmp
4 changes: 4 additions & 0 deletions .husky/commit-msg
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit ${1}
11 changes: 11 additions & 0 deletions .husky/pre-commit
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Run type checking
npm run type-check

# Run linting
npm run lint

# Run tests
npm run test
131 changes: 131 additions & 0 deletions CLAUDE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

PatternFly React Seed is a scaffolding utility for building web applications with PatternFly, React, TypeScript, and Webpack. It provides a complete starter template with routing, layout chrome (header/sidebar), build pipeline, and test suite.

## Development Commands

```bash
# Install dependencies
npm install

# Start development server (localhost:9000)
npm run start:dev

# Build for production (outputs to dist/)
npm run build

# Type checking
npm run type-check

# Linting
npm run lint

# Code formatting
npm run format

# Run all CI checks (type-check + lint + test:coverage)
npm run ci-checks

# Testing
npm run test # Run tests once
npm run test:watch # Run tests in watch mode
npm run test:coverage # Run tests with coverage report

# Production server (requires build first)
npm run start
```

## Architecture

### Build System

- **Webpack** for bundling (webpack.common.js, webpack.dev.js, webpack.prod.js)
- **TypeScript** with path aliases configured in tsconfig.json
- **dotenv-webpack** for environment variables (use `.env` file or export vars)

### Testing

- **Vitest** (not Jest) with @testing-library/react
- Test files use `.test.tsx` extension
- Setup file: `src/test/setup.ts` (mocks matchMedia, ResizeObserver, IntersectionObserver)
- Snapshot tests are used alongside behavioral tests

### Routing

Centralized routing configuration in [src/app/routes.tsx](src/app/routes.tsx):

- `IAppRoute` - single route with optional `label` (routes without labels are excluded from sidebar nav)
- `IAppRouteGroup` - grouped routes for nested navigation items
- Routes are flattened and rendered in `AppRoutes` component using react-router-dom v7

### Layout Structure

[src/app/AppLayout/AppLayout.tsx](src/app/AppLayout/AppLayout.tsx) provides the Page shell:
- Masthead with logo and toggle button
- PageSidebar with navigation built from routes config
- Automatically generates nav items from routes array

### Path Aliases

TypeScript and Webpack are configured with these aliases:
- `@app/*` → `src/app/*`
- `@assets/*` → `node_modules/@patternfly/react-core/dist/styles/assets/*`

Example usage:
```typescript
import { Component } from '@app/Component/Component';
import imgSrc from '@assets/images/example.png';
```

### Asset Handling

**SVG files** have special handling based on location:
- `bgimages/` directory → inlined as data URLs for CSS backgrounds
- Elsewhere → raw-loader for inline HTML usage
- Fonts and pficon directories → asset/resource loader

**Raster images** from PatternFly assets use `@assets` prefix:
```typescript
import imgSrc from '@assets/images/g_sizing.png';
```

**Local app assets** use `@app` prefix:
```typescript
import loader from '@app/assets/images/loader.gif';
```

### Component Organization

Pages are organized under `src/app/` with one directory per feature:
- `Dashboard/` - main dashboard page
- `Support/` - support page
- `Settings/General/` - general settings page
- `Settings/Profile/` - profile settings page
- `AppLayout/` - page shell component
- `NotFound/` - 404 page

Each directory typically contains:
- Component file (e.g., `Dashboard.tsx`)
- Optional test file (e.g., `Dashboard.test.tsx`)

## Adding New Routes

1. Create component directory under `src/app/`
2. Add route definition to routes array in [src/app/routes.tsx](src/app/routes.tsx)
3. Import component at top of routes.tsx
4. Route appears in sidebar nav automatically if `label` is provided

## Adding Custom CSS

When importing CSS from a third-party package for the first time, register the stylesheet path in [stylePaths.js](stylePaths.js) to avoid parse errors. This is required for webpack performance optimization.

## Environment Variables

Use dotenv-webpack for environment configuration:
- Create `.env` file in project root, or
- Export at system level: `export MY_VAR=value && npm run start:dev`
- Access in code: `process.env.MY_VAR`
26 changes: 26 additions & 0 deletions commitlint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
[
'feat', // New feature
'fix', // Bug fix
'docs', // Documentation changes
'style', // Code style changes (formatting, missing semi colons, etc)
'refactor', // Code refactoring
'perf', // Performance improvements
'test', // Adding or updating tests
'build', // Build system or external dependencies
'ci', // CI configuration changes
'chore', // Other changes that don't modify src or test files
'revert', // Reverts a previous commit
],
],
'subject-case': [2, 'never', ['upper-case']],
'subject-empty': [2, 'never'],
'subject-full-stop': [2, 'never', '.'],
'type-empty': [2, 'never'],
},
};
Loading
Loading