Update packages to latest version#81
Conversation
- update all minor and patch versions to latest version - update react and storybook to latest releases
- add cursor-pointer to buttons - tweak margin values such that they match original design - update storybook preview to include globals.css
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Summary by CodeRabbit
WalkthroughThis update upgrades core dependencies to the latest versions, notably React 19, Next.js 15.3, Tailwind CSS 4, and Storybook 9. It removes the Tailwind configuration file, adapts global and utility CSS to new Tailwind conventions, updates Storybook and PostCSS configs, and revises component class names for compatibility. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI_Component
participant TailwindCSS_4
participant Storybook_9
User->>UI_Component: Interacts (click, focus, etc.)
UI_Component->>TailwindCSS_4: Applies updated utility classes (e.g., shadow-xs, outline-hidden)
User->>Storybook_9: Views component stories
Storybook_9->>UI_Component: Renders with new Next.js integration and updated addons
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
♻️ Duplicate comments (4)
components/ui/button.tsx (1)
8-8: Verify Tailwind v4 compatibility foroutline-hiddenclass.The change from
focus-visible:outline-nonetofocus-visible:outline-hiddenappears to be part of the Tailwind v4 migration. Please ensure this class exists in Tailwind v4 and maintains the same accessibility behavior for focus management.components/TaskDetails.tsx (1)
54-54: Verify Tailwind v4 compatibility foroutline-hiddenclass.Multiple instances of
focus:outline-nonechanged tofocus:outline-hidden. Please ensure this class exists in Tailwind v4 and maintains the same accessibility behavior for focus management.Also applies to: 63-63, 113-113
app/tasks/page.tsx (1)
63-63: Same focus outline class concern as other components.This change mirrors the same potential issue with
focus:outline-hiddenthat needs verification across the codebase.components/ui/tabs.tsx (1)
32-32: Same focus outline and shadow class concerns.This combines the same concerns raised in other files regarding
focus-visible:outline-hiddenandshadow-xsclass validity in Tailwind CSS 4.Also applies to: 47-47
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (26)
.storybook/main.ts(1 hunks).storybook/preview.ts(1 hunks)app/globals.css(1 hunks)app/tasks/page.tsx(1 hunks)app/teams/create/InviteForm.tsx(5 hunks)app/teams/page.tsx(1 hunks)components/NavBar.tsx(2 hunks)components/SearchComponent.tsx(1 hunks)components/Shimmer/ListShimmer.stories.tsx(1 hunks)components/Shimmer/Shimmer.stories.tsx(1 hunks)components/SideBar.tsx(1 hunks)components/TaskCard.tsx(1 hunks)components/TaskDetails.tsx(4 hunks)components/TaskHeader.tsx(1 hunks)components/TodoForm.tsx(9 hunks)components/dashboard/DashboardTasksTableTabs.tsx(1 hunks)components/dashboard/DashboardWeeklySummary.tsx(1 hunks)components/ui/button.tsx(1 hunks)components/ui/card.tsx(1 hunks)components/ui/dialog.tsx(1 hunks)components/ui/input.tsx(1 hunks)components/ui/table.tsx(1 hunks)components/ui/tabs.tsx(2 hunks)package.json(1 hunks)postcss.config.mjs(1 hunks)tailwind.config.ts(0 hunks)
💤 Files with no reviewable changes (1)
- tailwind.config.ts
🧰 Additional context used
🧠 Learnings (2)
components/TodoForm.tsx (1)
Learnt from: shubhdevelop
PR: Real-Dev-Squad/todo-frontend#35
File: components/SimmerSkeleton.tsx:0-0
Timestamp: 2025-03-16T10:34:22.088Z
Learning: The shimmer component in the todo app should maintain the app's color palette (white, indigo-50) without making colors configurable, as it's designed specifically for this application.
components/TaskDetails.tsx (1)
Learnt from: Hariom01010
PR: Real-Dev-Squad/todo-frontend#51
File: __mocks__/types.ts:33-34
Timestamp: 2025-07-09T08:59:12.993Z
Learning: In the todo-frontend project, the PATCH task API endpoint payload uses `dueAt` and `startedAt` field names, but these update the `dueDate` and `startDate` fields respectively in the Task object. This is intentional according to the API contract design.
🧬 Code Graph Analysis (2)
components/dashboard/DashboardTasksTableTabs.tsx (1)
components/ui/tabs.tsx (1)
TabsTrigger(55-55)
components/TodoForm.tsx (1)
app/constants/Task.ts (1)
FORM_MODE(12-16)
🪛 Biome (1.9.4)
components/TaskHeader.tsx
[error] 33-33: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
components/dashboard/DashboardWeeklySummary.tsx
[error] 7-7: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
components/TodoForm.tsx
[error] 64-68: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
🔇 Additional comments (24)
components/ui/card.tsx (1)
11-13: Shadow token reduction looks correct.Changing
shadow-smtoshadow-xsis purely stylistic and matches the global visual-weight reductions elsewhere in the PR. No functional impact detected.components/SideBar.tsx (1)
32-38: Cursor affordance addition is fine.
cursor-pointerimproves UX and the button already has an explicittype='button', so no further action needed.components/dashboard/DashboardTasksTableTabs.tsx (1)
30-32: LGTM – pointer cursor improves tab affordance.components/ui/input.tsx (1)
11-11: Confirmed:focus-visible:outline-hiddenis the correct Tailwind v4 replacement foroutline-none
Theoutline-hiddenutility hides the focus outline visually while still exposing it in forced-colors or high-contrast modes, preserving accessibility. No further changes are needed here.components/dashboard/DashboardWeeklySummary.tsx (1)
4-4: LGTM: Shadow utility updated for Tailwind v4 compatibility.The change from
shadow-smtoshadow-xsaligns with the Tailwind v4 migration.components/NavBar.tsx (2)
26-26: LGTM: Shadow utility updated for Tailwind v4 compatibility.The change from
shadow-smtoshadow-xsaligns with the Tailwind v4 migration pattern seen across the codebase.
65-65: Good UX improvement: Added cursor-pointer for better interactivity.Adding
cursor-pointerto the notification button improves user experience by clearly indicating the element is interactive.components/TaskDetails.tsx (2)
46-46: LGTM: Updated styling for Tailwind v4 compatibility.The changes from
shadow-smtoshadow-xsandborder-[1px]toborderalign with Tailwind v4 migration patterns and simplify the class names.
69-69: Good spacing improvements for better visual hierarchy.The margin adjustments (
mb-4tomb-6andmb-4tomy-6) improve the visual spacing and hierarchy within the component layout.Also applies to: 71-71, 86-86
package.json (2)
40-64: Storybook 9 upgrade looks good, but check removed addons impact
@storybook/addon-essentialsandaddon-interactionswere removed, yet stories still rely on:
tags: ['autodocs']→ requires the Docs preset (now inaddon-docs, still present ✅)- interaction-testing helpers (
user-event,within) if any tests exist.Make sure those capabilities are covered by the new default presets or add back the specific addons.
Also confirmeslint-plugin-storybook@9matches SB 9 (it does) and that the PostCSS 8/ Tailwind 4 pipeline resolves correctly after adding@tailwindcss/postcss.
24-37: Peer dependencies verified – React 19 is supported
- Ran
pnpm install --strict-peer-dependencieswith no unresolved peer‐dep errors.next@15.3.5’s peer range includes^19.0.0;next-themesand all Radix UI packages likewise declare support for React 19.- No duplicate React installs or legacy peer-dep fallbacks detected.
This change is safe to merge.
components/Shimmer/Shimmer.stories.tsx (1)
1-1: Correct import path — nice catchSwitching to
@storybook/nextjsaligns this story with the SB 9/Next builder. No further issues spotted.components/Shimmer/ListShimmer.stories.tsx (1)
1-1: Import updated consistentlySame comment as above—import path is now SB 9 compliant.
components/SearchComponent.tsx (1)
61-61: Confirmed:focus:outline-hiddenis valid in Tailwind CSS v4The
focus:outline-hiddenutility is supported in Tailwind CSS 4 and is the recommended replacement forfocus:outline-none, as it hides the default outline while preserving an accessible outline in forced-colors/high-contrast modes. No changes needed.app/teams/create/InviteForm.tsx (1)
160-160: Tailwind CSS 4 utility classes are validBoth updates have been confirmed against the Tailwind CSS 4.1+ documentation:
flex-shrink-0→shrink-0is officially supported as a shortened flexbox utility.shadow-sm→shadow-xsis a valid extra-small shadow utility.No further changes are required.
.storybook/preview.ts (1)
1-2: LGTM! Storybook configuration properly updated for v9.The changes correctly reflect the upgrade to Storybook 9 with Next.js integration and the new centralized CSS approach using globals.css.
components/ui/table.tsx (1)
46-46: Verify TableFooter CSS selector changeThe update shifts the
lastpseudo-class from the inner<tr>to the<tfoot>, changing whereborder-b-0is applied. Our search found noTableFooterusage outside its own definition, so please validate this in real table layouts (e.g., multiple footers, nested rows, Storybook examples) to ensure no styling regressions.• File: components/ui/table.tsx, line 46
"border-t bg-muted/50 font-medium last:[&>tr]:border-b-0"components/TodoForm.tsx (2)
60-60: LGTM! CSS classes properly updated for Tailwind v4.The shadow and border class changes are consistent with the Tailwind CSS v4 migration.
66-66: LGTM! Focus and spacing classes properly updated for Tailwind v4.The changes from
focus:outline-nonetofocus:outline-hidden, spacing adjustments, and the addition ofcursor-pointerare all consistent with the Tailwind CSS v4 migration.Also applies to: 70-70, 83-83, 98-98, 123-123, 139-139, 155-155, 171-171, 187-187, 202-202
.storybook/main.ts (1)
9-22: Verify essential Storybook addons removalPlease confirm that removing
@storybook/addon-essentialsand@storybook/addon-interactionsdoesn’t break any stories—these packages back controls (argTypes/args), actions, viewport, and interactions. Manually check that no stories rely on:
- argTypes or
args:in their exportsaction(...)callsuserEventorwithin()usageKey story files to review:
- components/Shimmer/ListShimmer.stories.tsx
- components/Shimmer/Shimmer.stories.tsx
If any of these use the above features, re-add the corresponding standalone addons (
@storybook/addon-controls,@storybook/addon-actions,@storybook/addon-interactions) or migrate to the new Storybook 9 equivalents.app/globals.css (4)
1-1: LGTM! Properly migrated to Tailwind CSS v4 import syntax.The single
@import 'tailwindcss';statement correctly replaces the three separate Tailwind directives, consistent with Tailwind CSS v4 requirements.
3-43: LGTM! Well-structured theme configuration for Tailwind v4.The
@custom-variantfor dark mode and the comprehensive@themeblock with CSS custom properties provide a centralized and maintainable theming approach, properly mapping to the existing CSS variables.
45-61: LGTM! Essential compatibility layer for border color changes.The compatibility styles properly address the breaking change in Tailwind CSS v4 where the default border color changed from gray to
currentcolor. This ensures visual consistency with the previous version.
63-72: LGTM! Modernized utility definition using @Utility directive.The refactored
no-scrollbarutility using the@utilitydirective with proper nested selectors is consistent with Tailwind CSS v4 syntax and more maintainable than the previous approach.
…into update-packages
2 participants
Date: 10 July 2025
Developer Name: @Hariom01010
Issue Ticket Number
Description
This PR updates all the outdated packages to their latest version. All the packages (including Major, Minor and Patch version are updated to their latest version)
It is made ensure that the application, storybook and tests are running as expected without breaking any functionality
Documentation Updated?
Under Feature Flag
Database Changes
Breaking Changes
Development Tested?
Screenshots
Screenshot 1
Application:
Test Coverage
Screenshot 1
Additional Notes
Description by Korbit AI
What change is being made?
Update several package dependencies to their latest versions, streamline Storybook configuration, enhance CSS classes for consistency, and adjust PostCSS plugins setup.
Why are these changes being made?
These updates are part of regular maintenance to ensure dependencies are up-to-date, which enhances security, performance, and compatibility. Updates to Storybook and CSS classes improve the development experience and maintainability. Removing
autoprefixerin favor of@tailwindcss/postcssis aligned with best practices for managing CSS preprocessing.