CRAFT-1822 | combobox refactor #630

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

jaikamat merged 13 commits into main from CRAFT-1822-combobox-refactor

Jan 15, 2026

.changeset/salty-meals-bet.md

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    ---
+    "@commercetools/nimbus": minor
+    "@commercetools/nimbus-i18n": minor
+    ---
+    Update Combobox to new context-based architecture and add missing features,
+    update i18n strings.

.claude/agents/nimbus-researcher.md

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     ---
     name: nimbus-researcher
-    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>
+    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>
     model: sonnet
     ---
@@ Expand Down Expand Up / @@ -34,6 +34,9 @@ You will: @@
     - Use `mcp__context7__resolve-library-id` to search for specific library
       documentation
+    - Prefer `mcp__react-aria-docs__list_pages`,
+      `mcp__react-aria-docs__get_page_info`, and `mcp__react-aria-docs__get_page`
+      when searching for react-aria library documentation
     - Focus on official documentation for React Aria, Chakra UI, React, TypeScript,
       and related libraries
     - Look for code examples, API references, and implementation patterns
@@ Expand Down @@

.mcp.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,12 @@ @@
         "time-mcp": {
           "command": "npx",
           "args": ["-y", "time-mcp"]
+        },
+        "react-aria-docs": {
+          "type": "stdio",
+          "command": "npx",
+          "args": ["@react-spectrum/mcp", "react-aria"],
+          "env": {}
         }
       }
     }

apps/docs/package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -43,6 +43,7 @@ @@
         "react-dom": "catalog:react",
         "react-intl": "catalog:react",
         "react-live": "^4.1.7",
+        "react-stately": "catalog:react",
         "react-router": "^7.12.0",
         "react-router-dom": "^7.11.0",
         "react-syntax-highlighter": "^15.6.6",
@@ Expand All / @@ -52,6 +53,7 @@ @@
         "remark-mark-highlight": "^0.1.1",
         "slug": "^11.0.1",
         "to-vfile": "^8.0.0",
+        "use-debounce": "^10.0.0",
         "vite-plugin-markdown": "^2.2.0",
         "vite-tsconfig-paths": "^5.1.3",
         "zod": "^4.1.12"
@@ Expand Down @@

apps/docs/src/components/document-renderer/components/live-code-editor/live-code-editor.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,8 @@ import { @@
       getLocalTimeZone,
       today,
     } from "@internationalized/date";
+    import { useAsyncList } from "react-stately";
+    import { useDebouncedCallback } from "use-debounce";
     const baseHooks = {
       useState,
@@ Expand All / @@ -33,6 +35,8 @@ const scope = { @@
       parseZonedDateTime,
       getLocalTimeZone,
       today,
+      useAsyncList,
+      useDebouncedCallback,
     };
     const removeImportStatements = (code: string) => {
@@ Expand Down @@

packages/nimbus/package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -59,7 +59,8 @@ @@
         "react-aria-components": "catalog:react",
         "react-hotkeys-hook": "^5.2.1",
         "react-stately": "catalog:react",
-        "react-use": "^17.5.1"
+        "react-use": "^17.5.1",
+        "use-debounce": "^10.0.0"
       },
       "devDependencies": {
         "@chakra-ui/cli": "catalog:react",
@@ Expand All / @@ -68,6 +69,7 @@ @@
         "@commercetools/nimbus-tokens": "workspace:^",
         "@internationalized/date": "catalog:react",
         "@react-aria/optimize-locales-plugin": "catalog:react",
+        "@react-types/shared": "catalog:tooling",
         "@storybook/addon-a11y": "catalog:tooling",
         "@storybook/addon-docs": "catalog:tooling",
         "@storybook/addon-vitest": "catalog:tooling",
@@ Expand Down @@

packages/nimbus/src/components/calendar/components/calendar.header.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -32,7 +32,6 @@ export const CalendarHeader = () => { @@
               <VisuallyHidden>
                 <Heading />
               </VisuallyHidden>
-              {/* @ts-expect-error - custom-context will add aria-label via the "slot" prop */}
               <IconButton
                 slot={showRangeLabel ? "previous" : "previous-month"}
                 size="xs"
@@ Expand All / @@ -50,7 +49,6 @@ export const CalendarHeader = () => { @@
                 aria-hidden="true"
                 slot={showRangeLabel ? "monthRange" : "month"}
               />
-              {/* @ts-expect-error - custom-context will add aria-label via the "slot" prop */}
               <IconButton
                 slot={showRangeLabel ? "next" : "next-month"}
                 size="xs"
@@ Expand All / @@ -62,7 +60,6 @@ export const CalendarHeader = () => { @@
             </Stack>
             <Box flexGrow="1" />
             <Stack direction="row" alignItems="center">
-              {/* @ts-expect-error - custom-context will add aria-label via the "slot" prop */}
               <IconButton
                 slot="previous-year"
                 size="xs"
@@ Expand All / @@ -80,7 +77,6 @@ export const CalendarHeader = () => { @@
                 aria-hidden="true"
                 slot="year"
               />
-              {/* @ts-expect-error - custom-context will add aria-label via the "slot" prop */}
               <IconButton
                 slot="next-year"
                 size="xs"
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CRAFT-1822 | combobox refactor #630

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!