Skip to content
This repository was archived by the owner on Mar 25, 2026. It is now read-only.

docs: add strict headless component rules to CLAUDE.md#98

Closed
ryanrozich wants to merge 2 commits intorelease/v0.2.0-rc2from
feat/v2-headless-components
Closed

docs: add strict headless component rules to CLAUDE.md#98
ryanrozich wants to merge 2 commits intorelease/v0.2.0-rc2from
feat/v2-headless-components

Conversation

@ryanrozich
Copy link
Copy Markdown
Owner

@ryanrozich ryanrozich commented Jul 11, 2025

Summary

  • Added strict rules to CLAUDE.md to ensure components remain truly headless
  • Added comprehensive migration plan and API design documents
  • This is the first step toward v2.0 where ALL components will be headless

Changes

  1. CLAUDE.md Updates:

    • Added CRITICAL section listing forbidden CSS practices
    • Listed requirements for headless components (className props, refs, etc)
    • Provided correct and incorrect component examples
    • Updated Important Reminders with headless architecture rules
  2. V2_HEADLESS_MIGRATION_PLAN.md:

    • Analyzed current state: 2,534 lines of CSS across 12 components
    • Detailed 6-week migration timeline
    • Risk analysis and mitigation strategies
    • Implementation order (simplest to complex)
  3. V2_API_DESIGN_PROPOSAL.md:

    • Recommends ClassNames object pattern (like React Select)
    • Detailed API examples for each component
    • Styling cookbook for Tailwind, CSS Modules, Styled Components
    • Testing strategy and implementation checklist

Why This Matters

Currently, several components violate the headless architecture:

Next Steps

  1. Review and approve the API design
  2. Create proof of concept with DateFilter component
  3. Get community feedback
  4. Begin implementation in phases

Related

🤖 Generated with Claude Code

- Added CRITICAL section with forbidden CSS practices
- Listed what must NEVER be in components (CSS files, modules, inline styles)
- Added requirements for headless components (className props, refs, etc)
- Provided correct and incorrect component examples
- Updated Important Reminders with headless architecture rules

This ensures all future development follows true headless architecture principles.

Related to #97 (v2.0 headless components)
- Created V2_HEADLESS_MIGRATION_PLAN.md with full analysis:
  - Found 2,534 lines of CSS across 12 components to remove
  - Detailed migration strategy with 6-week timeline
  - Risk analysis and mitigation strategies

- Created V2_API_DESIGN_PROPOSAL.md:
  - Recommends ClassNames object pattern
  - Provides detailed examples for each component
  - Includes styling cookbook for Tailwind, CSS Modules, etc.
  - Testing strategy and implementation checklist

This planning phase ensures we have a clear path forward for making all components truly headless in v2.0.

Related to #97 (v2.0 headless components)
@github-actions
Copy link
Copy Markdown

github-actions bot commented Jul 11, 2025

🚀 Demo Preview Ready!

Preview URL: https://demo.rozich.net/ag-grid-react-components-pr-98/
API URL: https://demo.rozich.net/ag-grid-react-components-pr-98/api/

⚠️ Deployment tests failed - please check the workflow logs

This preview will be available for testing until the PR is merged or closed.

@ryanrozich
Copy link
Copy Markdown
Owner Author

This PR has been superseded by #102 (Release v0.2.0-rc3). The documentation updates in this PR are no longer relevant after the headless refactor.

See HEADLESS_RC3_MIGRATION_PLAN.md for details.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

has-preview status: in-code-review PR ready, awaiting code review

Projects

Status: ✅ Done

Development

Successfully merging this pull request may close these issues.

1 participant