Pr/03 vitest#23
Conversation
chore(env): refresh node tooling
chore(build): modernize build configs
chore(tailwind): remove legacy configs
chore(deps): update modern stack
chore(ci): refresh workflows
feat(storybook): modernize core config
feat(styles): add foundation token stories
feat(form-field): normalize stories and helpers
chore(icons): refresh generated assets
feat(navigation): align stories and structure
feat(menu): refresh stories and popover
feat(table): refresh stories and helpers
feat(components): refresh core controls
feat(layout): refresh shell components
feat(components): refresh misc primitives
docs(home): refresh docs and utilities
feat(listbox): add multiple support
fix(storybook): align story args
There was a problem hiding this comment.
Pull request overview
This PR migrates the codebase from Jest to Vitest for testing, updates React imports to use modern syntax, replaces react-popper with @floating-ui/react, and standardizes code formatting across multiple component files. The changes improve maintainability by adopting newer tooling and consistent code style.
- Migrated test framework from Jest to Vitest
- Updated React imports to use named imports (
typeimports) instead of default imports - Replaced
react-popperwith@floating-ui/reactfor better positioning - Standardized code formatting (single quotes, semicolons removed, consistent formatting)
Reviewed changes
Copilot reviewed 297 out of 886 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/tooltip/tooltip.tsx | Migrated from react-popper to @floating-ui/react and updated React imports |
| src/components/tooltip/tooltip.test.tsx | Added new Vitest test for tooltip component |
| src/components/tooltip/tooltip-portal.tsx | Simplified portal implementation and removed useEffect |
| src/components/toggle/toggle.test.tsx | Added new Vitest test for toggle component |
| src/components/toast/toast.test.tsx | Added new Vitest test for toast component |
| src/components/popover-menu/popover-menu.tsx | Migrated from react-popper to @floating-ui/react |
| src/components/navigation/navigation-popover.tsx | Migrated from react-popper to @floating-ui/react |
| src/components/spinner/spinner.tsx | Updated color references to use CSS variables |
| src/components/spinner-overlay/spinner-overlay.tsx | Added new props for size, opacity, and className |
| src/components/slot/slot.tsx | Fixed duplicate className bug in props merging |
| src/components/link/link.tsx | Fixed className merging for child elements |
| src/components/popover-menu/popover-menu-button.tsx | Refactored to use button styling utilities instead of nested Button component |
| All .stories.tsx files | Updated Storybook imports to use '@storybook/react-vite' |
| All component files | Standardized formatting and React import patterns |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { CrossIcon, ErrorIcon, InfoSignIcon, TickCircleIcon, WarningSignIcon } from "../../icons"; | ||
| import { classNames } from "../../util/class-names"; | ||
| import type { ElementType } from 'react' | ||
| import { ReactNode } from 'react' |
There was a problem hiding this comment.
The import statement on line 2 is missing the 'type' keyword. It should be import type { ReactNode } from 'react' to match the pattern used on line 1 and throughout the rest of the PR.
| import { ReactNode } from 'react' | |
| import type { ReactNode } from 'react' |
| import React from "react"; | ||
| import { classNames } from "../../util/class-names"; | ||
| import type { ComponentType } from 'react' | ||
| import { ReactNode } from 'react' |
There was a problem hiding this comment.
The import statement on line 2 is missing the 'type' keyword. It should be import type { ReactNode } from 'react' to match the pattern used on line 1 and throughout the rest of the PR.
| import { ReactNode } from 'react' | |
| import type { ReactNode } from 'react' |
| import { PopoverButton as HeadlessUiPopoverButton } from "@headlessui/react"; | ||
| import { classNames } from "../../util/class-names"; | ||
| import type { ComponentType } from 'react' | ||
| import { ReactNode } from 'react' |
There was a problem hiding this comment.
The import statement on line 2 is missing the 'type' keyword. It should be import type { ReactNode } from 'react' to match the pattern used on line 1 and throughout the rest of the PR.
| import { ReactNode } from 'react' | |
| import type { ReactNode } from 'react' |
| import React from "react"; | ||
| import { useNavigationPopoverContext } from "./navigation-popover-context"; | ||
| import type { ElementType } from 'react' | ||
| import { ReactNode } from 'react' |
There was a problem hiding this comment.
The import statement on line 2 is missing the 'type' keyword. It should be import type { ReactNode } from 'react' to match the pattern used on line 1 and throughout the rest of the PR.
| import { ReactNode } from 'react' | |
| import type { ReactNode } from 'react' |
| import { classNames } from "../../util/class-names"; | ||
| import { NavigationGroupItemTag } from "./navigation-group-item-tag"; | ||
| import type { ComponentPropsWithoutRef, ElementType } from 'react' | ||
| import { ReactNode } from 'react' |
There was a problem hiding this comment.
The import statement on line 2 is missing the 'type' keyword. It should be import type { ReactNode } from 'react' to match the pattern used on line 1 and throughout the rest of the PR.
| import { ReactNode } from 'react' | |
| import type { ReactNode } from 'react' |
| @@ -1,74 +1,82 @@ | |||
| import type { ElementType, MutableRefObject } from 'react' | |||
| import { ReactNode } from 'react' | |||
There was a problem hiding this comment.
The import statement on line 2 is missing the 'type' keyword. It should be import type { ReactNode } from 'react' to match the pattern used on line 1 and throughout the rest of the PR.
| import { ReactNode } from 'react' | |
| import type { ReactNode } from 'react' |
| import React from "react"; | ||
| import { classNames } from "../../util/class-names"; | ||
| import type { ComponentPropsWithoutRef } from 'react' | ||
| import { ReactNode } from 'react' |
There was a problem hiding this comment.
The import statement on line 2 is missing the 'type' keyword. It should be import type { ReactNode } from 'react' to match the pattern used on line 1 and throughout the rest of the PR.
| import { ReactNode } from 'react' | |
| import type { ReactNode } from 'react' |
| import { MenuItem as HeadlessUiMenuItem } from "@headlessui/react"; | ||
| import React from "react"; | ||
| import type { ElementType } from 'react' | ||
| import { ReactNode } from 'react' |
There was a problem hiding this comment.
The import statement on line 2 is missing the 'type' keyword. It should be import type { ReactNode } from 'react' to match the pattern used on line 1 and throughout the rest of the PR.
| import { ReactNode } from 'react' | |
| import type { ReactNode } from 'react' |
| import { classNames } from "../../util/class-names"; | ||
| import { ErrorIcon, InfoSignIcon, TickCircleIcon, WarningSignIcon } from "../../icons"; | ||
| import type { ElementType } from 'react' | ||
| import { ReactNode } from 'react' |
There was a problem hiding this comment.
The import statement on line 2 is missing the 'type' keyword. It should be import type { ReactNode } from 'react' to match the pattern used on line 1 and throughout the rest of the PR.
| import { ReactNode } from 'react' | |
| import type { ReactNode } from 'react' |
| import type { ElementType, ComponentPropsWithoutRef } from 'react' | ||
| import { ReactNode } from 'react' |
There was a problem hiding this comment.
The import statement on line 2 is missing the 'type' keyword. It should be import type { ReactNode } from 'react' to match the pattern used on line 1 and throughout the rest of the PR.
| import type { ElementType, ComponentPropsWithoutRef } from 'react' | |
| import { ReactNode } from 'react' | |
| import type { ElementType, ComponentPropsWithoutRef, ReactNode } from 'react' |
Description
[Description here]
Checklist