feat(prompt install button): add button to setup paykit via prompt#180
Open
Muhammad-Owais-Warsi wants to merge 4 commits into
Open
feat(prompt install button): add button to setup paykit via prompt#180Muhammad-Owais-Warsi wants to merge 4 commits into
Muhammad-Owais-Warsi wants to merge 4 commits into
Conversation
Contributor
|
@Muhammad-Owais-Warsi is attempting to deploy a commit to the maxktz Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe hero title section centralizes installation instructions in a new ChangesHero Installation UI Refactoring
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/web/src/components/docs/package-command.tsx (1)
21-27: ⚡ Quick winNarrow
managerto a literal union for safer command generation.At Lines 21 and 27,
manager: stringallows unsupported values and weakens compile-time checks. Derive aManagertype from the manager arrays to keep branches aligned as tabs evolve.Suggested refactor
+type InstallManager = (typeof installManagers)[number]; +type RunManager = (typeof runManagers)[number]; -function installCommand(pkg: string, manager: string) { +function installCommand(pkg: string, manager: InstallManager) { if (manager === "prompt") return PROMPT; if (manager === "npm") return `npm install ${pkg}`; return `${manager} add ${pkg}`; } -function runCommand(command: string, manager: string) { +function runCommand(command: string, manager: RunManager) { if (manager === "pnpm") return `pnpm dlx ${command}`; if (manager === "bun") return `bunx ${command}`; return `npx ${command}`; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/components/docs/package-command.tsx` around lines 21 - 27, Narrow the manager param types by introducing a Manager literal union derived from the existing manager arrays and use it for installCommand(manager: Manager) and runCommand(manager: Manager) so TypeScript enforces allowed values; update any callers to satisfy the new type (or cast where necessary), and ensure the existing branches in installCommand (checks for "prompt", "npm", and default `${manager} add ${pkg}`) and runCommand align with the Manager union so no unsupported strings can reach those functions.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/src/components/docs/package-command.tsx`:
- Line 7: The shared managers constant (const managers = ["pnpm", "bun", "npm",
"prompt"] as const) is leaking the "prompt" option into PackageRun, causing an
invalid run-tab; update the code so PackageRun only uses a managers list without
"prompt" (e.g., create a separate managersRun = ["pnpm","bun","npm"] or filter
managers before rendering/use in PackageRun), and ensure runCommand only
receives those valid managers (runCommand) so the "prompt" tab is never rendered
or passed to runCommand.
---
Nitpick comments:
In `@apps/web/src/components/docs/package-command.tsx`:
- Around line 21-27: Narrow the manager param types by introducing a Manager
literal union derived from the existing manager arrays and use it for
installCommand(manager: Manager) and runCommand(manager: Manager) so TypeScript
enforces allowed values; update any callers to satisfy the new type (or cast
where necessary), and ensure the existing branches in installCommand (checks for
"prompt", "npm", and default `${manager} add ${pkg}`) and runCommand align with
the Manager union so no unsupported strings can reach those functions.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 6f1261a0-85e5-4fe6-a3a6-9afd110e9cea
📒 Files selected for processing (1)
apps/web/src/components/docs/package-command.tsx
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/src/components/web/hero-title-install-button.tsx`:
- Around line 13-17: handleCopy starts a new timeout on every click which can
reset copied too early; store the timeout id in a ref (e.g., copyTimeoutRef) and
call clearTimeout(copyTimeoutRef.current) before creating a new setTimeout,
update copyTimeoutRef.current with the new id, and ensure you clear the timeout
on unmount (useEffect cleanup) so setCopied(false) cannot run after the
component is gone.
In `@apps/web/src/components/web/hero-title.tsx`:
- Around line 73-75: Update the dialog copy to accurately reflect what is being
copied: replace the current DialogTitle and DialogDescription text that refer to
an "install command" with wording that indicates the multi-step setup prompt
(the PROMPT payload) is being copied. Locate the DialogTitle/DialogDescription
elements in the hero-title component and change their text to something like
"Copy the setup prompt" and "Paste this multi-step setup prompt into your
terminal or chat to get started," ensuring any other dialog instance around
lines referencing PROMPT is updated likewise for consistency.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 6d87dace-4725-4626-b343-c2df0e7095f6
📒 Files selected for processing (3)
apps/web/src/components/web/hero-title-install-button.tsxapps/web/src/components/web/hero-title.tsxapps/web/src/lib/consts.ts
Comment on lines
+13
to
+17
| const handleCopy = useCallback(() => { | ||
| void navigator.clipboard.writeText("npx paykitjs init"); | ||
| setCopied(true); | ||
| setTimeout(() => setCopied(false), 1500); | ||
| }, []); |
There was a problem hiding this comment.
Clear previous reset timers before creating a new one.
Line 16 starts a new timer on every click, so rapid re-clicks can flip copied back to false too early.
Suggested fix
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
export default function HeroTitleInstallButton() {
const [copied, setCopied] = useState(false);
const [hovered, setHovered] = useState(false);
+ const resetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const handleCopy = useCallback(() => {
void navigator.clipboard.writeText("npx paykitjs init");
setCopied(true);
- setTimeout(() => setCopied(false), 1500);
+ if (resetTimerRef.current) clearTimeout(resetTimerRef.current);
+ resetTimerRef.current = setTimeout(() => setCopied(false), 1500);
}, []);
+
+ useEffect(() => {
+ return () => {
+ if (resetTimerRef.current) clearTimeout(resetTimerRef.current);
+ };
+ }, []);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const handleCopy = useCallback(() => { | |
| void navigator.clipboard.writeText("npx paykitjs init"); | |
| setCopied(true); | |
| setTimeout(() => setCopied(false), 1500); | |
| }, []); | |
| import { useCallback, useEffect, useRef, useState } from "react"; | |
| export default function HeroTitleInstallButton() { | |
| const [copied, setCopied] = useState(false); | |
| const [hovered, setHovered] = useState(false); | |
| const resetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null); | |
| const handleCopy = useCallback(() => { | |
| void navigator.clipboard.writeText("npx paykitjs init"); | |
| setCopied(true); | |
| if (resetTimerRef.current) clearTimeout(resetTimerRef.current); | |
| resetTimerRef.current = setTimeout(() => setCopied(false), 1500); | |
| }, []); | |
| useEffect(() => { | |
| return () => { | |
| if (resetTimerRef.current) clearTimeout(resetTimerRef.current); | |
| }; | |
| }, []); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/web/src/components/web/hero-title-install-button.tsx` around lines 13 -
17, handleCopy starts a new timeout on every click which can reset copied too
early; store the timeout id in a ref (e.g., copyTimeoutRef) and call
clearTimeout(copyTimeoutRef.current) before creating a new setTimeout, update
copyTimeoutRef.current with the new id, and ensure you clear the timeout on
unmount (useEffect cleanup) so setCopied(false) cannot run after the component
is gone.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
closes: #90
Summary by CodeRabbit
Release Notes