|
| 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