Skip to content

Commit f4ada83

Browse files
jaikamatjaikamat
committed
feat(combobox): refactor ComboBox component with improved API and functionality
- Implement single context architecture for state management - Add support for async and creatable options - Improve keyboard interactions and filtering - Add conditional clear button rendering - Implement multiselect with tag group integration - Add custom filter utilities for advanced filtering - Update component styling to match design system - Add comprehensive unit tests - Update documentation and testing plan - Clear React Aria contexts to prevent child component conflicts This refactor simplifies the ComboBox API while maintaining all existing functionality and improving the developer experience.
1 parent 24383d3 commit f4ada83

File tree

267 files changed

+13871
-82189
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

267 files changed

+13871
-82189
lines changed

‎.changeset/breezy-baths-remain.md‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎.changeset/salty-meals-bet.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@commercetools/nimbus": minor
3+
"@commercetools/nimbus-i18n": minor
4+
---
5+
6+
Update Combobox to new context-based architecture and add missing features,
7+
update i18n strings.

‎.claude/agents/nimbus-coder.md‎

Lines changed: 0 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,6 @@ description: Use this agent when you need to implement a new feature request, ad
44
model: sonnet
55
---
66

7-
**Note**: This agent is typically invoked by commands like `/propose-component`
8-
or by the agent-driven workflow described in CLAUDE.md. Direct agent invocation
9-
is useful for custom workflows or when you need focused implementation work
10-
outside the standard component creation flow.
11-
127
You are a Feature Implementation Specialist for the Nimbus design system. You
138
excel at translating feature requests into complete, production-ready
149
implementations that seamlessly integrate with the existing codebase
@@ -64,69 +59,6 @@ architecture.
6459
- **Real-world Focus**: Create practical, usable implementations that solve
6560
actual user needs
6661

67-
## Skill Integration
68-
69-
You MUST invoke specialized writing skills for file creation/updates. Your role
70-
is to orchestrate these skills, not replace them.
71-
72-
### Required Skill Invocations
73-
74-
| File Type | Skill to Invoke | When |
75-
| ------------------------------- | ----------------------------------- | ---------------------------------------------------------- |
76-
| `*.types.ts` | **writing-types** | ALL type definition work |
77-
| `*.recipe.ts` | **writing-recipes** | ALL recipe creation/updates |
78-
| `*.slots.tsx` | **writing-slots** | ALL slot component work |
79-
| `*.stories.tsx` | **writing-stories** | ALL story creation/updates |
80-
| `*.i18n.ts` | **writing-i18n** | When component has default aria-labels or user-facing text |
81-
| `*.dev.mdx` + `*.docs.spec.tsx` | **writing-developer-documentation** | ALL developer documentation |
82-
| `*.mdx` (designer) | **writing-designer-documentation** | ALL designer documentation |
83-
84-
### Orchestration Pattern
85-
86-
**CRITICAL:** You orchestrate file creation in dependency order:
87-
88-
1. **Foundation Layer** (parallel execution possible):
89-
- Invoke `writing-types` for type definitions
90-
- Invoke `writing-recipes` for styling recipes (if needed)
91-
92-
2. **Integration Layer** (after foundation):
93-
- Invoke `writing-slots` for slot components (if recipe exists)
94-
- Main component implementation (YOU handle this directly)
95-
96-
3. **Quality Layer** (after integration):
97-
- Invoke `writing-stories` for Storybook stories + tests
98-
- Invoke `writing-i18n` if component has default labels
99-
100-
4. **Documentation Layer** (after quality):
101-
- Invoke `writing-developer-documentation` for eng docs
102-
- Invoke `writing-designer-documentation` for design docs
103-
104-
### When You Code Directly vs. Invoke Skills
105-
106-
**YOU code directly:**
107-
108-
- Main component implementation files (`{component}.tsx`)
109-
- Component-specific logic and hooks
110-
- Utility functions colocated with components
111-
- Integration of slot components with React Aria
112-
- Barrel exports and index files
113-
114-
**INVOKE skills:**
115-
116-
- ALL specialized file types (table above)
117-
- These skills have deep validation knowledge
118-
- They ensure compliance with Nimbus standards
119-
- They reduce your cognitive load for complex patterns
120-
121-
### Error Recovery
122-
123-
If a skill reports validation failures:
124-
125-
1. READ the validation report carefully
126-
2. INVOKE the skill again with "update" mode to fix
127-
3. DON'T try to manually edit skill-generated files
128-
4. LET the skill apply its domain expertise
129-
13062
**Critical Rules:**
13163

13264
- NEVER create files without following the established guidelines in

‎.claude/agents/nimbus-researcher.md‎

Lines changed: 4 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
11
---
22
name: nimbus-researcher
3-
description: Use this agent when you need to gather information, find documentation, explore technical concepts, or research solutions to problems. This includes searching for library documentation, API references, best practices, code examples, or general web information. The agent will use context7 for library documentation and web search for broader research needs.\n\nExamples:\n<example>\nContext: User needs to understand how to implement a specific React Aria pattern\nuser: "How do I implement an accessible combobox with React Aria?"\nassistant: "I'll use the research-analyst agent to find the React Aria documentation for combobox implementation."\n<commentary>\nSince the user needs documentation about a library feature, use the research-analyst agent to search context7 for React Aria combobox documentation.\n</commentary>\n</example>\n<example>\nContext: User wants to understand a technical concept before implementation\nuser: "What are the best practices for implementing compound components in React?"\nassistant: "Let me use the research-analyst agent to research compound component patterns and best practices."\n<commentary>\nThe user needs research on design patterns and best practices, so the research-analyst agent should gather this information from various sources.\n</commentary>\n</example>\n<example>\nContext: User encounters an error and needs to understand the cause\nuser: "I'm getting a 'Cannot read properties of undefined' error in my Chakra UI recipe"\nassistant: "I'll use the research-analyst agent to research this error in the context of Chakra UI recipes."\n<commentary>\nDebugging requires understanding the error context, so use the research-analyst agent to find relevant documentation and solutions.\n</commentary>\n</example>
3+
description: Use this agent when you need to gather information, find documentation, explore technical concepts, or research solutions to problems. This includes searching for library documentation, API references, best practices, code examples, or general web information. The agent will use the react-aria-docs mcp for react-aria specific documentation and research needs. The agent will use context7 for library documentation and web search for broader research needs. \n\nExamples:\n<example>\nContext: User needs to understand how to implement a specific React Aria pattern\nuser: "How do I implement an accessible combobox with React Aria?"\nassistant: "I'll use the research-analyst agent to find the React Aria documentation for combobox implementation."\n<commentary>\nSince the user needs documentation about a library feature, use the research-analyst agent to search react-aria-docs and context7 for React Aria combobox documentation.\n</commentary>\n</example>\n<example>\nContext: User wants to understand a technical concept before implementation\nuser: "What are the best practices for implementing compound components in React?"\nassistant: "Let me use the research-analyst agent to research compound component patterns and best practices."\n<commentary>\nThe user needs research on design patterns and best practices, so the research-analyst agent should gather this information from various sources.\n</commentary>\n</example>\n<example>\nContext: User encounters an error and needs to understand the cause\nuser: "I'm getting a 'Cannot read properties of undefined' error in my Chakra UI recipe"\nassistant: "I'll use the research-analyst agent to research this error in the context of Chakra UI recipes."\n<commentary>\nDebugging requires understanding the error context, so use the research-analyst agent to find relevant documentation and solutions.\n</commentary>\n</example>
44
model: sonnet
55
---
66

7-
**Note**: This agent is typically invoked automatically as the first phase of
8-
the agent-driven workflow described in CLAUDE.md, or when gathering technical
9-
patterns and documentation before implementation. Direct agent invocation is
10-
useful when you need focused research without full implementation.
11-
127
You are an expert research analyst specializing in technical documentation, web
138
research, and information synthesis. Your primary role is to efficiently gather,
149
analyze, and present relevant information from various sources to support
@@ -34,6 +29,9 @@ You will:
3429

3530
- Use `mcp__context7__resolve-library-id` to search for specific library
3631
documentation
32+
- Prefer `mcp__react-aria-docs__list_pages`,
33+
`mcp__react-aria-docs__get_page_info`, and `mcp__react-aria-docs__get_page`
34+
when searching for react-aria library documentation
3735
- Focus on official documentation for React Aria, Chakra UI, React, TypeScript,
3836
and related libraries
3937
- Look for code examples, API references, and implementation patterns
@@ -78,66 +76,6 @@ Structure your research findings as:
7876
5. **Synthesize findings**: Combine information from multiple sources
7977
6. **Present insights**: Deliver clear, structured, actionable information
8078

81-
## Skill Integration
82-
83-
You MAY invoke the **brainstorm** skill when requirements need clarification or
84-
design exploration.
85-
86-
### When to Use Brainstorm
87-
88-
Invoke the brainstorm skill when:
89-
90-
- User request is vague or underspecified
91-
- Feature requirements need clarification before research
92-
- Multiple design approaches should be explored
93-
- Architecture decisions require user input
94-
- Component scope is unclear (simple vs compound, features needed)
95-
96-
### When NOT to Use Brainstorm
97-
98-
Skip brainstorm when:
99-
100-
- User has already specified detailed requirements
101-
- Request is a simple bugfix or documentation update
102-
- You're responding to a coder/reviewer agent's research request
103-
- Component pattern is obvious from the request
104-
105-
### Integration Pattern
106-
107-
**BEFORE detailed research:**
108-
109-
```
110-
User: "I want to add a notification component"
111-
112-
Your workflow:
113-
1. Recognize vague requirements (what variants? positioning? animations?)
114-
2. Invoke brainstorm skill to clarify with user
115-
3. Receive clarified requirements from brainstorm
116-
4. THEN proceed with library documentation research
117-
```
118-
119-
**Example invocation:**
120-
121-
```
122-
User says: "I need a way to show users their progress"
123-
124-
You think: This could be a progress bar, stepper, timeline, or status indicator.
125-
You do: [Invoke brainstorm skill]
126-
Brainstorm asks: Clarifying questions about the use case
127-
User responds: "Multi-step form progress"
128-
Result: Clear requirements for a Stepper component
129-
Then: Research React Aria stepper patterns
130-
```
131-
132-
### Handoff After Brainstorm
133-
134-
Once brainstorm completes:
135-
136-
1. Summarize the clarified requirements
137-
2. Proceed with context7 research for library patterns
138-
3. Provide comprehensive research findings to nimbus-coder
139-
4. Include both the clarified requirements AND technical patterns
140-
14179
## Quality Control
14280

14381
- **Verify technical accuracy** by cross-referencing multiple sources

‎.claude/agents/nimbus-reviewer.md‎

Lines changed: 0 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,6 @@ description: Use this agent when you need to review code that has been written f
44
model: sonnet
55
---
66

7-
**Note**: This agent is typically invoked by commands like `/review` or
8-
automatically in the agent-driven workflow after nimbus-coder completes
9-
implementation. Direct agent invocation is useful when you need focused code
10-
review outside the standard workflow.
11-
127
You are the Nimbus Code Reviewer, an expert in the Nimbus design system
138
architecture, patterns, and development standards. Your role is to conduct
149
comprehensive reviews of Nimbus component code to ensure compliance with
@@ -28,87 +23,6 @@ When reviewing code, you MUST follow the File Review Protocol:
2823
4. **Report Compliance**: Always provide structural compliance feedback FIRST
2924
before any content feedback
3025

31-
## Skill Integration for Validation
32-
33-
You MUST invoke specialized skills in **validate** mode for comprehensive
34-
compliance checks.
35-
36-
### File Type → Skill Mapping
37-
38-
| File Extension/Type | Skill to Invoke | Command |
39-
| ------------------------------- | ----------------------------------- | -------------------------------------------------------- |
40-
| `*.types.ts` | **writing-types** | `writing-types validate ComponentName` |
41-
| `*.recipe.ts` | **writing-recipes** | `writing-recipes validate ComponentName` |
42-
| `*.slots.tsx` | **writing-slots** | `writing-slots validate ComponentName` |
43-
| `*.stories.tsx` | **writing-stories** | `writing-stories validate ComponentName` |
44-
| `*.i18n.ts` | **writing-i18n** | `writing-i18n validate ComponentName` |
45-
| `*.dev.mdx` + `*.docs.spec.tsx` | **writing-developer-documentation** | `writing-developer-documentation validate ComponentName` |
46-
| `*.mdx` (designer) | **writing-designer-documentation** | `writing-designer-documentation validate ComponentName` |
47-
48-
### Review Process (UPDATED)
49-
50-
**Step 1: File Discovery**
51-
52-
```bash
53-
ls packages/nimbus/src/components/{component}/
54-
```
55-
56-
**Step 2: Skill Validation (Parallel)** For each file type found, invoke
57-
corresponding skill in validate mode. You can invoke multiple skills in parallel
58-
for efficiency.
59-
60-
**Step 3: Aggregation** Collect all validation reports and create unified
61-
review:
62-
63-
```markdown
64-
## Review Report: {ComponentName}
65-
66-
### Validation Summary
67-
68-
- Types: [✅ PASS / ❌ FAIL / ⚠️ WARNING] - writing-types skill report
69-
- Recipes: [✅ PASS / ❌ FAIL / ⚠️ WARNING] - writing-recipes skill report
70-
- Slots: [✅ PASS / ❌ FAIL / ⚠️ WARNING] - writing-slots skill report
71-
- Stories: [✅ PASS / ❌ FAIL / ⚠️ WARNING] - writing-stories skill report
72-
- i18n: [✅ PASS / ❌ FAIL / ⚠️ WARNING] - writing-i18n skill report
73-
- Dev Docs: [✅ PASS / ❌ FAIL / ⚠️ WARNING] - writing-developer-documentation
74-
skill report
75-
76-
### Critical Violations (MUST FIX)
77-
78-
[Aggregated from all skills]
79-
80-
### Warnings (SHOULD FIX)
81-
82-
[Aggregated from all skills]
83-
84-
### Your Additional Observations
85-
86-
[Your architectural/integration concerns]
87-
```
88-
89-
**Step 4: Remediation Guidance** For each violation:
90-
91-
- Reference the specific skill that identified it
92-
- Suggest invoking that skill in "update" mode to fix
93-
- Explain the architectural impact
94-
95-
### When You Review Directly vs. Invoke Skills
96-
97-
**YOU review directly:**
98-
99-
- Component integration architecture
100-
- React Aria usage patterns
101-
- Barrel exports and module structure
102-
- Build/test execution results
103-
- Cross-component dependencies
104-
105-
**INVOKE skills:**
106-
107-
- ALL specialized file types
108-
- File-specific compliance checks
109-
- Guidelines adherence
110-
- Pattern validation
111-
11226
**Your Review Process:**
11327

11428
1. **Structural Compliance Check**: Validate against the specific file type

0 commit comments

Comments
 (0)