Skip to content

Commit a1999fc

Browse files
TheSonOfThompCopilotstephl3
authored
chore(Copilot) Adds copilot instructions (#3042)
* Adds copilot instructions * Update .github/copilot-instructions.md Co-authored-by: Copilot <[email protected]> * fix: pnpm run test --------- Co-authored-by: Copilot <[email protected]> Co-authored-by: Stephen Lee <[email protected]>
1 parent 815f060 commit a1999fc

File tree

1 file changed

+205
-0
lines changed

1 file changed

+205
-0
lines changed

.github/copilot-instructions.md

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
# LeafyGreen UI - Copilot Instructions
2+
3+
This document provides comprehensive guidance for coding agents working on the LeafyGreen UI design system repository. Following these instructions will minimize build failures, validation errors, and rejected pull requests.
4+
5+
## Repository Overview
6+
7+
LeafyGreen UI is MongoDB's React component library and design system consisting of:
8+
9+
- **100+ workspace packages** across 4 scopes: `@leafygreen-ui`, `@lg-charts`, `@lg-chat`, and `@lg-tools`
10+
- **Languages/Frameworks**: TypeScript, React 18, Emotion (CSS-in-JS), Storybook
11+
- **Build System**: Turbo monorepo with pnpm workspaces
12+
13+
### Project Structure
14+
15+
```
16+
leafygreen-ui/
17+
├── packages/ # @leafygreen-ui core components (button, modal, etc.)
18+
├── charts/ # @lg-charts data visualization components
19+
├── chat/ # @lg-chat conversational UI components
20+
├── tools/ # @lg-tools build system, CLI, linting, etc.
21+
├── stories/ # Storybook files unrelated to a specific component
22+
└── scripts/ # Repository maintenance scripts
23+
```
24+
25+
## Build System & Development Commands
26+
27+
### Required Environment
28+
29+
Refer to `package.json` for the required Node and pnpm versions.
30+
31+
MUST use pnpm, not npm or yarn
32+
33+
### Development Workflow & Commands
34+
35+
Follow this workflow for all development tasks:
36+
37+
1. **Initial Setup** (required after clone or when switching branches):
38+
39+
```bash
40+
pnpm run init # Installs dependencies and builds all packages
41+
```
42+
43+
- ALWAYS run this before any development work
44+
45+
2. **Making Changes**:
46+
47+
- Edit component files in `src/`
48+
- Add/update tests in `.spec.tsx` files
49+
- Update stories in `.stories.tsx` files
50+
51+
3. **Development Commands**:
52+
53+
```bash
54+
# Build all packages (uses Turbo, typically 6-10 seconds with cache)
55+
pnpm build
56+
57+
# Start Storybook for development
58+
pnpm start # Starts on port 9001
59+
60+
# Run tests
61+
pnpm test # All tests
62+
pnpm run test --filter="@leafygreen-ui/*" # Specific scope
63+
64+
# Linting
65+
pnpm lint # Check only
66+
pnpm run fix # Auto-fix issues
67+
```
68+
69+
4. **Before Committing**:
70+
71+
```bash
72+
pnpm build # Ensure builds pass
73+
pnpm lint # Check for issues
74+
pnpm test # Run test suite
75+
pnpm changeset # Document changes for release
76+
```
77+
78+
- **CRITICAL**: Always use `pnpm run fix` instead of manual formatting fixes
79+
- Runs ESLint, Prettier, and npmPkgJsonLint
80+
81+
5. **PR Submission**:
82+
- All checks must pass in CI
83+
- Include meaningful test coverage
84+
- Update documentation as needed
85+
86+
### Package-Level Commands
87+
88+
Each package supports these scripts (defined in individual `package.json`):
89+
90+
```json
91+
{
92+
"scripts": {
93+
"build": "lg-build bundle",
94+
"tsc": "lg-build tsc",
95+
"docs": "lg-build docs"
96+
}
97+
}
98+
```
99+
100+
## Validation Pipeline
101+
102+
The CI/CD system runs validations on every PR
103+
104+
For regular PRs, refer to `.github/workflows/pr.yml`
105+
106+
### PR Requirements
107+
108+
Refer to `.github/pull_request_template.md` for PR requirements
109+
110+
## Package Development Guidelines
111+
112+
### Creating New Components
113+
114+
```bash
115+
pnpm create-package my-new-component
116+
```
117+
118+
This scaffolds:
119+
120+
- Package structure with TypeScript configs
121+
- Test setup with Jest/React Testing Library
122+
- Storybook stories
123+
- Build configuration
124+
125+
### Package Structure
126+
127+
Each package follows this structure:
128+
129+
```
130+
packages/component-name/
131+
├── src/
132+
│ ├── Component/
133+
│ │ ├── Component.tsx
134+
│ │ ├── Component.styles.ts
135+
│ │ ├── Component.spec.tsx
136+
│ │ └── index.ts
137+
│ ├── Component.stories.tsx
138+
│ ├── index.ts
139+
│ └── types.ts
140+
├── package.json
141+
├── README.md
142+
└── CHANGELOG.md
143+
```
144+
145+
### Workspace Dependencies
146+
147+
- Use `workspace:^` for internal dependencies (Example: `"@leafygreen-ui/palette": "workspace:^"`)
148+
- External dependencies use specific versions with caret `^` version notation.
149+
- External dependencies in `@lg-tools/*` packages use explicit dependency versions (with no caret `^` or tilde `~`)
150+
151+
### TypeScript Configuration
152+
153+
- Extends `@lg-tools/build/config/package.tsconfig.json`
154+
- Path mapping configured in root `tsconfig.json`:
155+
```json
156+
{
157+
"paths": {
158+
"@leafygreen-ui/*": ["packages/*/src"],
159+
"@lg-charts/*": ["charts/*/src"],
160+
"@lg-chat/*": ["chat/*/src"],
161+
"@lg-tools/*": ["tools/*/src"]
162+
}
163+
}
164+
```
165+
166+
## File Locations & Configurations
167+
168+
### Key Configuration Files
169+
170+
- `eslint.config.mjs` - Linting rules (extends `@lg-tools/lint`)
171+
- `prettier.config.js` - Code formatting (extends `@lg-tools/lint`)
172+
- `turbo.json` - Build orchestration
173+
- `tsconfig.json` - TypeScript path mapping and compilation
174+
- `.github/workflows/` - CI/CD pipeline definitions
175+
176+
### Build Tools
177+
178+
- **Main CLI**: `@lg-tools/cli` provides `lg` command
179+
- **Build System**: `@lg-tools/build` provides `lg-build` commands
180+
- **Validation**: `@lg-tools/validate` checks dependencies and structure
181+
- **Testing**: `@lg-tools/test` provides Jest configuration
182+
183+
## Performance Notes
184+
185+
- **Build caching**: Turbo extensively caches builds - clean cache if issues arise
186+
- **Icon package**: Has special build caching due to SVG generation complexity
187+
- **Storybook**: Large application - expect 30+ second build times
188+
189+
## Code Style guide
190+
191+
Refer to `STYLEGUIDE.md` for code style guidelines
192+
193+
## Additional instructions
194+
195+
- For Storybook files `**/*.stories.ts`, do not comment on the inclusion of `console` logs.
196+
197+
## Trust These Instructions
198+
199+
These instructions are based on comprehensive exploration and testing of the actual codebase. Only search for additional information if:
200+
201+
- These instructions are incomplete for your specific task
202+
- You encounter errors not covered in the troubleshooting section
203+
- The codebase has changed since these instructions were created
204+
205+
**Always prefer following these established patterns over creating new approaches.**

0 commit comments

Comments
 (0)