Skip to content

Commit 6a2d033

Browse files
samejrsamejr
authored
Project setup improvements (#1579)
* Adds ‘an existing project’ to step 1 * When you click pnpm or yarn, the other tabs change too
1 parent e71df64 commit 6a2d033

File tree

3 files changed

+113
-58
lines changed

3 files changed

+113
-58
lines changed

‎apps/webapp/app/components/SetupCommands.tsx

Lines changed: 48 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { createContext, useContext, useState } from "react";
2+
import { useAppOrigin } from "~/hooks/useAppOrigin";
13
import { useProject } from "~/hooks/useProject";
24
import { InlineCode } from "./code/InlineCode";
35
import {
@@ -8,7 +10,31 @@ import {
810
} from "./primitives/ClientTabs";
911
import { ClipboardField } from "./primitives/ClipboardField";
1012
import { Paragraph } from "./primitives/Paragraph";
11-
import { useAppOrigin } from "~/hooks/useAppOrigin";
13+
14+
type PackageManagerContextType = {
15+
activePackageManager: string;
16+
setActivePackageManager: (value: string) => void;
17+
};
18+
19+
const PackageManagerContext = createContext<PackageManagerContextType | undefined>(undefined);
20+
21+
export function PackageManagerProvider({ children }: { children: React.ReactNode }) {
22+
const [activePackageManager, setActivePackageManager] = useState("npm");
23+
24+
return (
25+
<PackageManagerContext.Provider value={{ activePackageManager, setActivePackageManager }}>
26+
{children}
27+
</PackageManagerContext.Provider>
28+
);
29+
}
30+
31+
function usePackageManager() {
32+
const context = useContext(PackageManagerContext);
33+
if (context === undefined) {
34+
throw new Error("usePackageManager must be used within a PackageManagerProvider");
35+
}
36+
return context;
37+
}
1238

1339
export function InitCommand({ appOrigin, apiKey }: { appOrigin: string; apiKey: string }) {
1440
return (
@@ -131,7 +157,6 @@ export function TriggerDevStep({ extra }: { extra?: string }) {
131157
);
132158
}
133159

134-
// Trigger.dev version 3 setup commands
135160
const v3PackageTag = "latest";
136161

137162
function getApiUrlArg() {
@@ -160,14 +185,19 @@ function getApiUrlArg() {
160185
export function InitCommandV3() {
161186
const project = useProject();
162187
const projectRef = project.ref;
163-
164188
const apiUrlArg = getApiUrlArg();
165189

166190
const initCommandParts = [`trigger.dev@${v3PackageTag}`, "init", `-p ${projectRef}`, apiUrlArg];
167191
const initCommand = initCommandParts.filter(Boolean).join(" ");
168192

193+
const { activePackageManager, setActivePackageManager } = usePackageManager();
194+
169195
return (
170-
<ClientTabs defaultValue="npm">
196+
<ClientTabs
197+
defaultValue="npm"
198+
value={activePackageManager}
199+
onValueChange={setActivePackageManager}
200+
>
171201
<ClientTabsList>
172202
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
173203
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
@@ -202,8 +232,14 @@ export function InitCommandV3() {
202232
}
203233

204234
export function TriggerDevStepV3() {
235+
const { activePackageManager, setActivePackageManager } = usePackageManager();
236+
205237
return (
206-
<ClientTabs defaultValue="npm">
238+
<ClientTabs
239+
defaultValue="npm"
240+
value={activePackageManager}
241+
onValueChange={setActivePackageManager}
242+
>
207243
<ClientTabsList>
208244
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
209245
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
@@ -238,8 +274,14 @@ export function TriggerDevStepV3() {
238274
}
239275

240276
export function TriggerLoginStepV3() {
277+
const { activePackageManager, setActivePackageManager } = usePackageManager();
278+
241279
return (
242-
<ClientTabs defaultValue="npm">
280+
<ClientTabs
281+
defaultValue="npm"
282+
value={activePackageManager}
283+
onValueChange={setActivePackageManager}
284+
>
243285
<ClientTabsList>
244286
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
245287
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>

‎apps/webapp/app/components/primitives/ClientTabs.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
55
import { cn } from "~/utils/cn";
66
import { motion } from "framer-motion";
77

8-
const ClientTabs = TabsPrimitive.Root;
8+
const ClientTabs = React.forwardRef<
9+
React.ElementRef<typeof TabsPrimitive.Root>,
10+
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
11+
>((props, ref) => <TabsPrimitive.Root ref={ref} {...props} />);
12+
ClientTabs.displayName = TabsPrimitive.Root.displayName;
913

1014
const ClientTabsList = React.forwardRef<
1115
React.ElementRef<typeof TabsPrimitive.List>,

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx

Lines changed: 60 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,12 @@ import { TypedAwait, typeddefer, useTypedLoaderData } from "remix-typedjson";
2020
import { ExitIcon } from "~/assets/icons/ExitIcon";
2121
import { TaskIcon } from "~/assets/icons/TaskIcon";
2222
import { Feedback } from "~/components/Feedback";
23-
import { InitCommandV3, TriggerDevStepV3, TriggerLoginStepV3 } from "~/components/SetupCommands";
23+
import {
24+
InitCommandV3,
25+
PackageManagerProvider,
26+
TriggerDevStepV3,
27+
TriggerLoginStepV3,
28+
} from "~/components/SetupCommands";
2429
import { StepContentContainer } from "~/components/StepContentContainer";
2530
import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
2631
import { InlineCode } from "~/components/code/InlineCode";
@@ -431,38 +436,40 @@ export default function Page() {
431436

432437
function CreateTaskInstructions() {
433438
return (
434-
<div>
435-
<div className="mb-6 flex items-center justify-between border-b">
436-
<Header1 spacing>Get setup in 3 minutes</Header1>
437-
<div className="flex items-center gap-2">
438-
<Feedback
439-
button={
440-
<Button variant="minimal/small" LeadingIcon={ChatBubbleLeftRightIcon}>
441-
I'm stuck!
442-
</Button>
443-
}
444-
defaultValue="help"
445-
/>
439+
<PackageManagerProvider>
440+
<div>
441+
<div className="mb-6 flex items-center justify-between border-b">
442+
<Header1 spacing>Get setup in 3 minutes</Header1>
443+
<div className="flex items-center gap-2">
444+
<Feedback
445+
button={
446+
<Button variant="minimal/small" LeadingIcon={ChatBubbleLeftRightIcon}>
447+
I'm stuck!
448+
</Button>
449+
}
450+
defaultValue="help"
451+
/>
452+
</div>
446453
</div>
454+
<StepNumber stepNumber="1" title="Run the CLI 'init' command in an existing project" />
455+
<StepContentContainer>
456+
<InitCommandV3 />
457+
<Paragraph spacing>
458+
You'll notice a new folder in your project called{" "}
459+
<InlineCode variant="small">trigger</InlineCode>. We've added a very simple example task
460+
in here to help you get started.
461+
</Paragraph>
462+
</StepContentContainer>
463+
<StepNumber stepNumber="2" title="Run the CLI 'dev' command" />
464+
<StepContentContainer>
465+
<TriggerDevStepV3 />
466+
</StepContentContainer>
467+
<StepNumber stepNumber="3" title="Waiting for tasks" displaySpinner />
468+
<StepContentContainer>
469+
<Paragraph>This page will automatically refresh.</Paragraph>
470+
</StepContentContainer>
447471
</div>
448-
<StepNumber stepNumber="1" title="Run the CLI 'init' command in your project" />
449-
<StepContentContainer>
450-
<InitCommandV3 />
451-
<Paragraph spacing>
452-
You’ll notice a new folder in your project called{" "}
453-
<InlineCode variant="small">trigger</InlineCode>. We’ve added a very simple example task
454-
in here to help you get started.
455-
</Paragraph>
456-
</StepContentContainer>
457-
<StepNumber stepNumber="2" title="Run the CLI 'dev' command" />
458-
<StepContentContainer>
459-
<TriggerDevStepV3 />
460-
</StepContentContainer>
461-
<StepNumber stepNumber="3" title="Waiting for tasks" displaySpinner />
462-
<StepContentContainer>
463-
<Paragraph>This page will automatically refresh.</Paragraph>
464-
</StepContentContainer>
465-
</div>
472+
</PackageManagerProvider>
466473
);
467474
}
468475

@@ -484,26 +491,28 @@ function UserHasNoTasks() {
484491
}
485492
>
486493
{open ? (
487-
<div>
488-
<Header2 spacing>Get setup in 3 minutes</Header2>
489-
490-
<StepNumber stepNumber="1" title="Open up your project" className="mt-6" />
491-
<StepContentContainer>
492-
<Paragraph>You'll need to open a terminal at the root of your project.</Paragraph>
493-
</StepContentContainer>
494-
<StepNumber stepNumber="2" title="Run the CLI 'login' command" />
495-
<StepContentContainer>
496-
<TriggerLoginStepV3 />
497-
</StepContentContainer>
498-
<StepNumber stepNumber="3" title="Run the CLI 'dev' command" />
499-
<StepContentContainer>
500-
<TriggerDevStepV3 />
501-
</StepContentContainer>
502-
<StepNumber stepNumber="4" title="Waiting for tasks" displaySpinner />
503-
<StepContentContainer>
504-
<Paragraph>This page will automatically refresh.</Paragraph>
505-
</StepContentContainer>
506-
</div>
494+
<PackageManagerProvider>
495+
<div>
496+
<Header2 spacing>Get setup in 3 minutes</Header2>
497+
498+
<StepNumber stepNumber="1" title="Open up your project" className="mt-6" />
499+
<StepContentContainer>
500+
<Paragraph>You'll need to open a terminal at the root of your project.</Paragraph>
501+
</StepContentContainer>
502+
<StepNumber stepNumber="2" title="Run the CLI 'login' command" />
503+
<StepContentContainer>
504+
<TriggerLoginStepV3 />
505+
</StepContentContainer>
506+
<StepNumber stepNumber="3" title="Run the CLI 'dev' command" />
507+
<StepContentContainer>
508+
<TriggerDevStepV3 />
509+
</StepContentContainer>
510+
<StepNumber stepNumber="4" title="Waiting for tasks" displaySpinner />
511+
<StepContentContainer>
512+
<Paragraph>This page will automatically refresh.</Paragraph>
513+
</StepContentContainer>
514+
</div>
515+
</PackageManagerProvider>
507516
) : (
508517
"Your DEV environment isn't setup yet."
509518
)}

0 commit comments

Comments
 (0)