Skip to content

Commit a350558

Browse files
authored
Merge pull request #1600 from ASU/add-copilot-instructions
chore: update copilot instructions
2 parents c70cc43 + d2cda7f commit a350558

File tree

1 file changed

+96
-0
lines changed

1 file changed

+96
-0
lines changed

.github/copilot-instructions.md

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# ASU Unity Design System - AI Coding Guide
2+
3+
## Architecture Overview
4+
5+
This is a **Lerna + Yarn Workspaces monorepo** containing ASU's design system packages. Key architectural patterns:
6+
7+
- **Package dependency hierarchy**: `unity-react-core` is the foundational React component library that other packages depend on
8+
- **Theme system**: `unity-bootstrap-theme` provides Bootstrap 5-based CSS/SCSS foundation, built with Vite
9+
- **Shared utilities**: `shared` package contains common hooks, services, and utilities used across components
10+
- **Multi-output builds**: React packages generate UMD, ES, and CJS modules for different consumption patterns
11+
12+
## Critical Build Dependencies
13+
14+
**Build order matters**: `unity-react-core` must build first, then other packages. The build system enforces this via:
15+
```bash
16+
yarn build # Builds packages in parallel. This also runs linting before building.
17+
```
18+
19+
**Package registry**: All `@asu` scoped packages are published to GitHub Package Registry, not npm. Authentication via `.env.yarn` file with `GITHUB_AUTH_TOKEN`.
20+
21+
## Development Workflows
22+
23+
### Local Development
24+
```bash
25+
# Always start from project root
26+
yarn install
27+
yarn build
28+
cd packages/[package-name]
29+
yarn storybook # Primary development environment
30+
```
31+
32+
### Component Development Patterns
33+
- **Component structure**: Each React component follows pattern: `ComponentName.jsx`, `ComponentName.stories.jsx`, `ComponentName.test.jsx`, `init.js`
34+
- **Google Analytics integration**: Components use `GaEventWrapper` or custom `trackGAEvent` functions pushing to `window.dataLayer`
35+
- **Styling**: Components use Bootstrap classes from `unity-bootstrap-theme`, custom styles via CSS modules or SCSS. The exception is `component-header-footer` which is meant to be a standalone package not dependent on the theme. It uses React and styled components for styling.
36+
37+
### Package Management
38+
- **Adding dependencies**: Always `cd` into specific package directory first, then `yarn add [package]`
39+
- **Version management**: Uses semantic-release with conventional commits for automated versioning
40+
- **Multi-target builds**: React packages output to `dist/` with multiple formats (`.umd.js`, `.es.js`, `.cjs.js`)
41+
42+
## Project-Specific Conventions
43+
44+
### Component Props & Types
45+
- All components use TypeScript JSDoc comments for prop documentation
46+
- Shared prop types in `shared/types`
47+
- Google Analytics data structure standardized across components
48+
49+
### Build System Quirks
50+
- **Vite configs**: `unity-bootstrap-theme` uses separate configs for CSS (`vite.config.js`) and JS bundling (`vite.config.bundle.js`)
51+
- **Bootstrap integration**: Theme package copies Bootstrap JS files to `dist/js/` during build
52+
- **Storybook builds**: Generate to project root `/build/$npm_package_name` for unified documentation site
53+
54+
### Testing & Quality
55+
- **Accessibility testing**: Playwright-based a11y tests in `unity-react-core`
56+
- **Linting**: ESLint + Stylelint with project-specific configs in `@asu/shared`
57+
58+
## Integration Points
59+
60+
### Cross-Package Dependencies
61+
- Components import shared utilities: `import { ... } from '@asu/shared'`
62+
- Theme consumption: React packages reference Bootstrap variables and mixins
63+
- Storybook integration: All packages use consistent Storybook configuration
64+
65+
### External Systems
66+
- **Jenkins CI/CD**: Automated build, test, publish, and deploy pipeline (see below)
67+
- **Unity Web Platform**: Deployed to `https://unity.web.asu.edu` for QA
68+
- **CMS Integration**: UMD builds designed for Webspark 2 CMS consumption
69+
70+
## CI/CD Pipeline (Jenkins)
71+
72+
### Branch-Specific Workflows
73+
- **PR to `dev`**: Builds storybook → deploys to S3 staging → adds PR comment with preview URL
74+
- **Merge to `dev`**: Full pipeline: build → test → security check → publish packages → deploy to GitHub Pages → accessibility tests
75+
- **`testing` branch**: Developer releases with package publishing
76+
77+
### Pipeline Stages
78+
1. **Build**: `yarn install``yarn build` (using GitHub auth token)
79+
2. **Security Check**: npm audit for critical/high vulnerabilities → Slack alerts on issues
80+
3. **Test**: Jest tests via Playwright container
81+
4. **Publish**: Packages published to GitHub Package Registry with semantic-release
82+
5. **Deploy**: Storybook built and deployed to GitHub Pages (`unity.web.asu.edu`)
83+
6. **Accessibility**: Playwright a11y tests → Slack alerts on failures
84+
85+
### Infrastructure
86+
- **Kubernetes agents**: Node 20.15, Playwright, AWS CLI containers
87+
- **S3 staging**: PR previews at `unity-uds-staging.s3.us-west-2.amazonaws.com/pr-{number}/`
88+
- **Auto-cleanup**: Merged PR environments cleaned from S3 after 14 days or immediately after merging to dev branch (dev is main branch for this repo)
89+
- **Slack integration**: `#prd-uds` and `#prdfam-uds-ci` channels for alerts
90+
91+
## Key Files for Understanding Context
92+
- `/packages/unity-react-core/src/components/` - Core React component patterns
93+
- `/packages/unity-bootstrap-theme/src/` - Theme structure (CSS/SCSS + JS)
94+
- `/packages/shared/` - Shared utilities and types
95+
- `/nx.json` - Build dependency configuration
96+
- `/lerna.json` - Monorepo package management settings

0 commit comments

Comments
 (0)