chore: upgrade storybook & docs npm dependencies#3342
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
WalkthroughThe pull request includes several changes across multiple files. Key modifications involve updating the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🧰 Additional context used🔇 Additional comments (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
![coderabbitai[bot]](proxy.php?url=https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (5)
apps/docs/app/best-practices/docs-feedback/page.mdx (5)
122-122: LGTM! Consider adding a link to the Tailwind Template.The added context about using the Tailwind Template "Syntax" is helpful. To further assist readers, consider adding a link to the specific template you're referring to.
Line range hint
122-185: Great job on the comprehensive widget implementation!The widget implementation is well-structured and follows React best practices. The use of hooks for state management and the clear separation of concerns are commendable. However, there are a few areas that could be improved:
Consider using TypeScript for better type safety, especially for the
responseIdstate which is initialized asnullbut later used as a string.The
PopoverTriggercomponents could be extracted into a separate component to improve readability and reusability.The
handleFeedbackSubmitfunction is called directly in theonClickhandler. Consider wrapping it in auseCallbackhook to optimize performance.Here's a suggested refactor for the
PopoverTrigger:const FeedbackButton = ({ option, onClick }) => ( <PopoverTrigger className="rounded border border-slate-200 bg-slate-50 px-4 py-2 text-slate-900 hover:bg-slate-100 hover:text-slate-600 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-slate-700 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600 dark:hover:text-slate-300" onClick={onClick} > {option} </PopoverTrigger> ); // Usage {["Yes 👍", " No 👎"].map((option) => ( <FeedbackButton key={option} option={option} onClick={async () => { const id = await handleFeedbackSubmit(option, router.asPath); setResponseId(id); }} /> ))}
Line range hint
186-226: Good implementation of thehandleFeedbackSubmitfunctionThe
handleFeedbackSubmitfunction is well-implemented and follows the Formbricks API documentation. However, there are a few improvements that could be made:
Consider using environment variables for the API endpoints and survey IDs, rather than hardcoding them. This will make it easier to switch between development and production environments.
The error handling could be improved by providing more specific error messages and potentially implementing a retry mechanism for network failures.
The function could benefit from TypeScript typing for better type safety.
Here's a suggested refactor with improved error handling and TypeScript typing:
interface FeedbackResponse { id: string; // Add other properties as needed } export const handleFeedbackSubmit = async (YesNo: string, pageUrl: string): Promise<string | null> => { const payload = { response: { data: { isHelpful: YesNo, pageUrl: pageUrl, }, }, surveyId: process.env.NEXT_PUBLIC_FORMBRICKS_SURVEY_ID, }; try { const res = await fetch( `${process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST}/api/v1/client/environments/${process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID}/responses`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(payload), } ); if (!res.ok) { throw new Error(`HTTP error! status: ${res.status}`); } const responseJson: FeedbackResponse = await res.json(); return responseJson.id; } catch (error) { console.error("Error submitting feedback:", error); // Implement retry logic here if needed return null; } };
Line range hint
227-257: Well-implementedupdateFeedbackfunction with room for improvementThe
updateFeedbackfunction is correctly implemented according to the Formbricks API documentation. However, there are a few areas that could be enhanced:
Similar to the
handleFeedbackSubmitfunction, consider using environment variables for API endpoints.The error handling could be more robust, providing specific error messages and potentially implementing a retry mechanism.
The function could benefit from TypeScript typing for improved type safety.
Consider adding a return value to indicate whether the update was successful.
Here's a suggested refactor with these improvements:
export const updateFeedback = async (freeText: string, responseId: string | null): Promise<boolean> => { if (!responseId) { console.error("No response ID available"); return false; } const payload = { response: { data: { additionalInfo: freeText, }, finished: true, }, }; try { const res = await fetch( `${process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST}/api/v1/client/environments/${process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID}/responses/${responseId}`, { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify(payload), } ); if (!res.ok) { throw new Error(`HTTP error! status: ${res.status}`); } return true; } catch (error) { console.error("Error updating response:", error); // Implement retry logic here if needed return false; } };
Line range hint
1-257: Excellent comprehensive guide for Docs Feedback implementationThis documentation provides a thorough and well-structured guide for implementing the Docs Feedback feature using Formbricks. The step-by-step instructions, accompanied by visual aids and code snippets, make it easy for developers to follow along and implement the feature in their own projects.
Some final suggestions for improvement:
- Consider adding a troubleshooting section to address common issues developers might encounter during implementation.
- It might be helpful to include a brief section on best practices for using the collected feedback data to improve documentation.
- Add a summary or quick reference guide at the end for developers who want to quickly review the key steps.
Overall, great job on creating this comprehensive and user-friendly guide!
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
- .changeset/config.json (1 hunks)
- .gitpod.yml (0 hunks)
- apps/docs/app/best-practices/docs-feedback/page.mdx (1 hunks)
- apps/docs/components/Header.tsx (2 hunks)
- apps/docs/package.json (2 hunks)
- apps/storybook/package.json (1 hunks)
- apps/web/package.json (1 hunks)
💤 Files with no reviewable changes (1)
- .gitpod.yml
✅ Files skipped from review due to trivial changes (1)
- apps/docs/package.json
🧰 Additional context used
🔇 Additional comments (20)
.changeset/config.json (1)
10-10: Verify the intent of removing@formbricks/formbricks-comfrom the ignore list.The removal of
@formbricks/formbricks-comfrom theignorearray means that changes to this package will now be tracked by changesets. This change could have the following impacts:
- Changes to
@formbricks/formbricks-comwill now trigger version bumps and changelog entries.- It may affect the release process and how updates to this package are communicated.
Please confirm if this change aligns with the project's versioning strategy. Consider running the following command to check recent changes in the
@formbricks/formbricks-compackage that might now be included in the next release:This will help ensure that the change is intentional and that you're aware of any immediate effects on versioning.
apps/storybook/package.json (10)
15-15: LGTM: Minor version update for eslint-plugin-react-refreshThe update from ^0.4.9 to ^0.4.12 for eslint-plugin-react-refresh is a minor version bump, which should be backwards compatible and likely includes bug fixes and small improvements.
22-30: LGTM: Consistent minor version update for Storybook packagesThe update from ^8.2.9 to ^8.3.5 for multiple Storybook packages (addon-a11y, addon-essentials, addon-interactions, addon-links, addon-onboarding, blocks, react, react-vite, test) is consistent across all packages. This is a good practice to maintain compatibility between Storybook components.
31-32: LGTM: Consistent update for TypeScript ESLint packagesThe update from ^8.0.0 to ^8.8.1 for both @typescript-eslint/eslint-plugin and @typescript-eslint/parser maintains version consistency between these related packages, which is crucial for their proper functioning together.
33-33: LGTM: Patch update for @vitejs/plugin-reactThe update from ^4.3.1 to ^4.3.2 for @vitejs/plugin-react is a patch version bump, which typically includes only backwards-compatible bug fixes.
34-34: LGTM: Minor version update for esbuildThe update from ^0.23.0 to ^0.24.0 for esbuild is a minor version bump, which may include new features while maintaining backwards compatibility.
37-37: LGTM: Consistent update for storybook packageThe update from ^8.2.9 to ^8.3.5 for the storybook package is consistent with the earlier updates to other Storybook-related packages, maintaining version alignment across the Storybook ecosystem.
38-38: LGTM: Minor version update for tsupThe update from ^8.2.4 to ^8.3.0 for tsup is a minor version bump, which should be backwards compatible and may include new features or improvements.
39-39: LGTM: Patch update for viteThe update from ^5.4.1 to ^5.4.8 for vite is a patch version bump, which typically includes only backwards-compatible bug fixes and minor improvements.
15-39: Summary of dependency updatesThe package.json file has been updated with various dependency version bumps, mostly minor and patch updates. These updates are generally good for maintaining the project with the latest bug fixes and improvements. Key points:
- Most updates are backwards-compatible and should not cause issues.
- Storybook-related packages have been consistently updated to version 8.3.5.
- The major version update for @chromatic-com/storybook (1.x to 2.x) requires attention to potential breaking changes.
Recommendations:
- Test the application thoroughly after applying these updates.
- Pay special attention to any Chromatic-related functionality due to the major version bump.
- Review the changelogs of updated packages, especially @chromatic-com/storybook, for any breaking changes or new features that may impact your project.
To ensure all dependencies are properly installed and the project builds correctly after these updates, run:
#!/bin/bash # Clean install dependencies and build the project npm ci npm run build # Check for any deprecation warnings or errors in the build output
20-20: Verify compatibility: Major version update for @chromatic-com/storybookThe update from ^1.6.1 to ^2.0.2 for @chromatic-com/storybook is a major version bump. This may include breaking changes. Please review the changelog and ensure compatibility with your current setup.
To check for potential breaking changes, you can run:
apps/web/package.json (6)
70-70: DevDependency updates are beneficial.The updates to development dependencies (
@neshca/cache-handlerand@types/lodash) are approved. These updates should improve the development experience and provide more accurate type definitions.Also applies to: 72-72
34-34: Monitoring and analytics dependency updates are valuable.The updates to monitoring and analytics dependencies (
@sentry/nextjsandposthog-js) are approved. These updates should enhance error tracking and analytics capabilities.Please review the changelogs for any new features or configuration changes that could benefit your application. Run the following commands:
npm view @sentry/[email protected] changelog npm view [email protected] changelogAlso applies to: 55-55
43-44: Utility and tooling dependency updates are generally good, but require attention.The updates to utility and tooling dependencies are approved. Most updates are minor and should bring performance improvements and bug fixes.
Special attention is needed for the
jitiupdate (1.21.6 to 2.3.3), as it's a major version change. Please review the changelog for any breaking changes:npm view [email protected] changelogAlso, ensure thorough testing of features that rely on these updated packages, especially those using
googleapis,lru-cache,sharp, andwebpack.Also applies to: 47-47, 62-64
Line range hint
1-77: Overall, the dependency updates are beneficial and approved.The package.json updates primarily consist of version bumps for various dependencies, which should bring bug fixes, performance improvements, and new features to the project.
Key points:
- UI and React-related dependencies have been updated, with a significant update to
framer-motion.- Next.js and related packages have been updated, which is crucial for security and performance.
- Monitoring and analytics tools (
@sentry/nextjsandposthog-js) have been upgraded.- Various utility and tooling dependencies have been updated, with a major version change for
jiti.- Some development dependencies have been updated to improve the development experience.
To ensure a smooth transition with these updates:
- Review changelogs of major updates, especially for
framer-motion,next, andjiti.- Conduct thorough testing of UI components, animations, and core functionality.
- Check for any new features or configuration options in updated packages that could benefit the project.
- Run the application in a staging environment to catch any potential issues before deploying to production.
Run the following command to update all dependencies and then test the application:
npm update && npm run build && npm test
32-32: UI and React-related dependency updates look good.The updates to UI and React-related dependencies (
@radix-ui/react-collapsible,@react-email/components,@tanstack/react-table,framer-motion,lucide-react, andreact-hook-form) are approved. These updates should bring bug fixes and potential performance improvements.Please ensure thorough testing of UI components and animations, especially those using
framer-motion, as it has a more significant version jump (11.3.28 to 11.11.4). Run the following command to check for any breaking changes or new features in theframer-motionchangelog:Also applies to: 33-33, 35-35, 42-42, 48-48, 59-59
36-36: Next.js and related dependency updates are beneficial.The updates to Next.js and related dependencies (
next,@vercel/og, andnext-safe-action) are approved. These updates likely include important bug fixes and performance improvements.Please review the Next.js changelog for any breaking changes or new features that might affect your application. Run the following command to check the changelog:
Also applies to: 50-50, 51-51
apps/docs/components/Header.tsx (3)
6-6: LGTM: Improved type safety withMotionStyleimportThe addition of the
MotionStyletype import from 'framer-motion' enhances type safety for the component. This change is consistent with the existing imports and follows best practices for using typed properties with framer-motion.
49-49: LGTM: Improved type safety for motion stylesThe change from
React.CSSPropertiestoMotionStylefor thestyleprop is a good improvement. This provides better type checking for motion-specific style properties, which can help catch potential errors earlier in the development process. The change enhances type safety without altering the runtime behavior of the component.
Line range hint
1-93: Overall assessment: Positive improvements to type safetyThe changes made to this file are small but meaningful improvements to the codebase. They enhance type safety for the
Headercomponent, particularly in its use of framer-motion styles. These changes align well with the PR objectives of updating dependencies and making minor code adjustments. The implementation is clean and consistent with the existing code structure.
1 participant
This pull request includes various updates and improvements across multiple files, focusing on dependency updates, configuration changes, and minor code adjustments. The most important changes include updating dependencies in several
package.jsonfiles, modifying the.changeset/config.jsonand.gitpod.ymlconfigurations, and making minor code adjustments for type safety and documentation clarity.Dependency Updates:
apps/docs/package.json: Updated several dependencies, including@calcom/embed-react,@docsearch/react,@headlessui/react,next, andframer-motionto their latest versions. [1] [2]apps/storybook/package.json: Updated dependencies such aseslint-plugin-react-refresh,@chromatic-com/storybook, andstorybookto newer versions.apps/web/package.json: Updated various dependencies including@radix-ui/react-collapsible,@sentry/nextjs,framer-motion, andnextto their latest versions.Configuration Changes:
.changeset/config.json: Removed@formbricks/formbricks-comfrom the ignore list..gitpod.yml: Removed thewebsitetask configuration.Code Adjustments:
apps/docs/components/Header.tsx: ImportedMotionStyletype fromframer-motionand used it for type safety. [1] [2]apps/docs/app/best-practices/docs-feedback/page.mdx: Removed an outdated link to theLayout.tsxfile in the documentation.Summary by CodeRabbit