Skip to content

Propose a new file structure (ADR) #1678

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Dec 16, 2021
Merged
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
41 changes: 41 additions & 0 deletions contributor-docs/adrs/adr-XXX-file-structure.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# ADR XXX: File structure

## Status

Proposed

## Context

Components might be more grokable if they were structured consistently. This ADR proposes conventions

## Decision

TL;DR:

```
primer-react/
├─ src/
│ ├─ Breadcrumbs/
│ │ ├─ index.ts // Just re-exporting?
│ │ ├─ Breadcrumbs.tsx // Primary component
│ │ ├─ BreadcrumbsItem.tsx // Subcomponent (include parent component name to increase findability in most IDEs)
│ │ ├─ Breadcrumbs.mdx // Documentation. Always .mdx, not .md
│ │ ├─ Breadcrumbs.stories.tsx
│ │ ├─ Breadcrumbs.test.tsx // Unit tests
│ │ ├─ Breadcrumbs.types.test.tsx // Type tests
│ │ ├─ Breadcrumbs.yml // Component metadata (Possible future)
│ │ └─ __snapshots__/
┆ ┆
```

### Rules

- Every component should have its own PascalCased directory directly under `src/`
- Subcomponents should be properties of the exported parent component (e.g., `Breadcrumbs.Item`)
- Replacements of existing components should use an incrementing number (e.g., `Breadcrumbs2` rather than `NewBreadcrumbs`)

## Implementation

- [ ] Migrate components into this structure
- [ ] Set up tests for the component structure
- [ ] Mark this ADR as adopted