Add comprehensive GitHub Copilot instructions for the repository by Copilot · Pull Request #375 · opf/primer_view_components

Copilot · 2025-10-21T13:35:59Z

Summary

Created comprehensive GitHub Copilot instructions at .github/copilot-instructions.md that cover:

Repository Context:

Explains this is a fork of GitHub's Primer ViewComponents
Describes our OpenProject-specific extensions
Documents the relationship with upstream
Added related repositories section linking to OpenProject main application, upstream Primer ViewComponents, and OpenProject Octicons

Coding Standards:

Emphasizes following upstream GitHub coding standards, not OpenProject core guidelines
Explains rationale: facilitates upstreaming changes and reduces maintenance overhead
Specifies: Minitest (not RSpec), GitHub's CSS and TypeScript formatting rules

Component Development:

Component status levels (alpha, beta, stable, openproject)
Component generator usage with examples
Ruby, JavaScript/TypeScript, and CSS guidelines
YARD documentation requirements
Tag restrictions and system arguments
Updated: Clarified Web Components usage and Catalyst's automatic custom element registration

Testing:

Unit tests with Minitest
System tests
Playwright visual regression testing
Updated: Documented that static/previews.json is auto-generated by bundle exec rake static:dump

Workflows:

Setup and development commands
Linting and building
Changeset usage for versioning
Updating from upstream repository

Code Style:

Ruby conventions following ViewComponent patterns
Updated: Added system arguments documentation reference (https://primer.style/view-components/lookbook/pages/system_arguments/)
Updated: JavaScript/TypeScript emphasizes Web Components with Catalyst to DRY up boilerplate
PostCSS styling guidelines
ERB template best practices

Quick Reference:

Common tasks and commands
Naming conventions
Resources and documentation links

Original prompt

Add comprehensive copilot instructions for this repo.

Bear in mind that this repo is a fork of GitHub's repo: we extend GitHub's implementation of the Primer Design System with additional components to meet our needs.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

changeset-bot · 2025-10-21T13:36:03Z

⚠️ No Changeset found

Latest commit: 3c6cde1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Co-authored-by: myabc <755+myabc@users.noreply.github.com>

myabc · 2025-10-21T13:41:48Z

@copilot This Ruby library in this repo is consumed by OpenProject. You're currently in the process of adding information to that repo over here:

opf/openproject#20618

Octicons are over here:

opf/openproject-octicons#127
https://github.com/opf/openproject-octicons

(but perhaps you already know that?)

Co-authored-by: myabc <755+myabc@users.noreply.github.com>

Copilot · 2025-10-21T13:45:48Z

@copilot This Ruby library in this repo is consumed by OpenProject. You're currently in the process of adding information to that repo over here:

opf/openproject#20618
...

Added a "Related Repositories" section to the copilot instructions documenting the OpenProject main application, upstream Primer ViewComponents, and OpenProject Octicons repositories. This provides better context about the ecosystem for AI tools. (5c0a9f8)

myabc · 2025-10-21T13:43:12Z

+- **Ruby**: 3.2.0+
+- **Rails**: 7.2.0+
+- **ViewComponent**: 3.1+ to 5.0
+- **JavaScript/TypeScript**: Component behaviors using Catalyst controllers


using custom elements (often via Catalyst controllers)

Updated to clarify "using custom elements (often via Catalyst controllers)" (e4fab1d)

myabc · 2025-10-21T13:44:47Z

+if (!window.customElements.get('my-component')) {
+  window.MyComponentElement = MyComponentElement
+  window.customElements.define('my-component', MyComponentElement)
+}


@copilot although prevalent in the existing code, this boilerplate shouldn't be necessary. Catalyst takes care of defining the custom element automatically.

Removed the custom element registration boilerplate and updated the note to clarify that Catalyst automatically handles this. (e4fab1d)

myabc · 2025-10-21T13:52:57Z

+
+### Playwright Visual Regression Tests
+
+Add component previews to `static/previews.json`:


@copilot This file does not need to be modified manually. There is a Rake task to generate this JSON:

bundle exec rake static:dump

This rake task is invoked by the GitHub workflow: .github/workflows/static-files.yml

Updated to document that static/previews.json is auto-generated by bundle exec rake static:dump (run automatically by the static-files.yml workflow). Removed the manual JSON example. (e4fab1d)

myabc · 2025-10-21T13:55:47Z

+- Use `status :open_project` for OpenProject components
+- Document all public APIs with YARD
+- Restrict HTML tags appropriately
+- Use `system_arguments` for HTML attributes


@copilot for HTML attributes and styling (via utility classes). Full reference here: https://primer.style/view-components/lookbook/pages/system_arguments/

Added the system arguments reference link to the Ruby guidelines section. (e4fab1d)

myabc · 2025-10-21T13:57:10Z

+- Follow ViewComponent best practices
+
+### JavaScript/TypeScript
+- Use Catalyst for interactive components


Use Web Components for interactive components (consider using Catalyst to DRY up boilerplate involved in creating custom elements)

Updated to emphasize Web Components as the primary approach, with Catalyst as a tool to reduce boilerplate. (e4fab1d)

myabc · 2025-10-21T14:04:58Z

@HDinger @bsatarnejad would you mind taking a look to see if the instructions are accurate?

Co-authored-by: myabc <755+myabc@users.noreply.github.com>

myabc · 2025-10-21T14:19:38Z

@copilot general note to add somewhere: we follow coding standards defined by the upstream project (i.e. GitHub), not the guidelines used by OpenProject core. This is both to facilitate upstreaming of our changes and reduce the overhead of maintaining two sets of rules within one repo.

Concretely, this means:

minitest not RSpec
GitHub's CSS and TypeScript formatting rules

Co-authored-by: myabc <755+myabc@users.noreply.github.com>

Copilot · 2025-10-21T14:21:49Z

@copilot general note to add somewhere: we follow coding standards defined by the upstream project (i.e. GitHub), not the guidelines used by OpenProject core. Thi...

Added a "Coding Standards" section that clarifies we follow upstream GitHub conventions (not OpenProject core), including Minitest (not RSpec) and GitHub's CSS/TypeScript formatting rules. The section explains this facilitates upstreaming and reduces maintenance overhead. (b8ff9e6)

myabc · 2025-10-21T14:23:31Z

+- Use TypeScript for type safety
+
+### CSS
+- Use BEM-like naming: `.ComponentName-element--modifier`


@HDinger does Primer use proper BEM?

myabc · 2025-10-21T14:26:39Z

+./script/dev          # Start Lookbook on localhost:4000
+```
+
+### Creating New Components


There's also this page from GitHub, but it's more geared to GitHub staff and to the product/process than technical details.

https://primer.style/product/contribute/adding-new-components/

Initial plan

fac5c12

Copilot AI assigned Copilot and myabc Oct 21, 2025

Copilot started work on behalf of myabc October 21, 2025 13:36 View session

myabc added the skip changeset For PRs that contain no relevant release data (e.g. documentation only) label Oct 21, 2025

Add comprehensive copilot instructions for the repository

5585441

Co-authored-by: myabc <755+myabc@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add comprehensive Copilot instructions for repository~~ Add comprehensive GitHub Copilot instructions for the repository Oct 21, 2025

Copilot AI requested a review from myabc October 21, 2025 13:43

Copilot finished work on behalf of myabc October 21, 2025 13:43

Copilot started work on behalf of myabc October 21, 2025 13:44 View session

Add related repositories section to copilot instructions

c2c56f2

Co-authored-by: myabc <755+myabc@users.noreply.github.com>

Copilot finished work on behalf of myabc October 21, 2025 13:47

myabc reviewed Oct 21, 2025

View reviewed changes

myabc assigned HDinger Oct 21, 2025

Copilot started work on behalf of myabc October 21, 2025 13:59 View session

Update copilot instructions based on code review feedback

e4fab1d

Co-authored-by: myabc <755+myabc@users.noreply.github.com>

Copilot finished work on behalf of myabc October 21, 2025 14:07

Copilot AI requested a review from myabc October 21, 2025 14:07

myabc requested a review from HDinger October 21, 2025 14:13

myabc approved these changes Oct 21, 2025

View reviewed changes

myabc mentioned this pull request Oct 21, 2025

[#68508] Add comprehensive copilot instructions for OpenProject repository opf/openproject#20618

Merged

Copilot started work on behalf of myabc October 21, 2025 14:20 View session

Add coding standards section emphasizing GitHub conventions

3c6cde1

Co-authored-by: myabc <755+myabc@users.noreply.github.com>

Copilot AI requested a review from myabc October 21, 2025 14:23

Copilot finished work on behalf of myabc October 21, 2025 14:23

myabc reviewed Oct 21, 2025

View reviewed changes

myabc marked this pull request as ready for review October 21, 2025 14:28

myabc requested a review from bsatarnejad October 21, 2025 14:28

myabc merged commit 88fcfa2 into main Oct 31, 2025
24 of 54 checks passed


		### Playwright Visual Regression Tests

		Add component previews to `static/previews.json`:

Uh oh!

Conversation

Copilot AI commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

changeset-bot Bot commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

myabc commented Oct 21, 2025

Uh oh!

Copilot AI commented Oct 21, 2025

Uh oh!

myabc Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

myabc Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

myabc Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

myabc Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

myabc Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

myabc commented Oct 21, 2025

Uh oh!

myabc commented Oct 21, 2025

Uh oh!

Copilot AI commented Oct 21, 2025

Uh oh!

myabc Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

myabc Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Oct 21, 2025 •

edited

Loading

changeset-bot Bot commented Oct 21, 2025 •

edited

Loading