Skip to content

Commit

Permalink
Project setup improvements (#1579)
Browse files Browse the repository at this point in the history 
* Adds ‘an existing project’ to step 1

* When you click pnpm or yarn, the other tabs change too
  • Loading branch information
@samejr
samejr authored Dec 30, 2024
1 parent e71df64 commit 6a2d033
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 58 deletions.
54 changes: 48 additions & 6 deletions apps/webapp/app/components/SetupCommands.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { createContext, useContext, useState } from "react";
import { useAppOrigin } from "~/hooks/useAppOrigin";
import { useProject } from "~/hooks/useProject";
import { InlineCode } from "./code/InlineCode";
import {
Expand All @@ -8,7 +10,31 @@ import {
} from "./primitives/ClientTabs";
import { ClipboardField } from "./primitives/ClipboardField";
import { Paragraph } from "./primitives/Paragraph";
import { useAppOrigin } from "~/hooks/useAppOrigin";

type PackageManagerContextType = {
activePackageManager: string;
setActivePackageManager: (value: string) => void;
};

const PackageManagerContext = createContext<PackageManagerContextType | undefined>(undefined);

export function PackageManagerProvider({ children }: { children: React.ReactNode }) {
const [activePackageManager, setActivePackageManager] = useState("npm");

return (
<PackageManagerContext.Provider value={{ activePackageManager, setActivePackageManager }}>
{children}
</PackageManagerContext.Provider>
);
}

function usePackageManager() {
const context = useContext(PackageManagerContext);
if (context === undefined) {
throw new Error("usePackageManager must be used within a PackageManagerProvider");
}
return context;
}

export function InitCommand({ appOrigin, apiKey }: { appOrigin: string; apiKey: string }) {
return (
Expand Down Expand Up @@ -131,7 +157,6 @@ export function TriggerDevStep({ extra }: { extra?: string }) {
);
}

// Trigger.dev version 3 setup commands
const v3PackageTag = "latest";

function getApiUrlArg() {
Expand Down Expand Up @@ -160,14 +185,19 @@ function getApiUrlArg() {
export function InitCommandV3() {
const project = useProject();
const projectRef = project.ref;

const apiUrlArg = getApiUrlArg();

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

const { activePackageManager, setActivePackageManager } = usePackageManager();

return (
<ClientTabs defaultValue="npm">
<ClientTabs
defaultValue="npm"
value={activePackageManager}
onValueChange={setActivePackageManager}
>
<ClientTabsList>
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
Expand Down Expand Up @@ -202,8 +232,14 @@ export function InitCommandV3() {
}

export function TriggerDevStepV3() {
const { activePackageManager, setActivePackageManager } = usePackageManager();

return (
<ClientTabs defaultValue="npm">
<ClientTabs
defaultValue="npm"
value={activePackageManager}
onValueChange={setActivePackageManager}
>
<ClientTabsList>
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
Expand Down Expand Up @@ -238,8 +274,14 @@ export function TriggerDevStepV3() {
}

export function TriggerLoginStepV3() {
const { activePackageManager, setActivePackageManager } = usePackageManager();

return (
<ClientTabs defaultValue="npm">
<ClientTabs
defaultValue="npm"
value={activePackageManager}
onValueChange={setActivePackageManager}
>
<ClientTabsList>
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
Expand Down
6 changes: 5 additions & 1 deletion apps/webapp/app/components/primitives/ClientTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "~/utils/cn";
import { motion } from "framer-motion";

const ClientTabs = TabsPrimitive.Root;
const ClientTabs = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
>((props, ref) => <TabsPrimitive.Root ref={ref} {...props} />);
ClientTabs.displayName = TabsPrimitive.Root.displayName;

const ClientTabsList = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.List>,
Expand Down
111 changes: 60 additions & 51 deletions .../webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,12 @@ import { TypedAwait, typeddefer, useTypedLoaderData } from "remix-typedjson";
import { ExitIcon } from "~/assets/icons/ExitIcon";
import { TaskIcon } from "~/assets/icons/TaskIcon";
import { Feedback } from "~/components/Feedback";
import { InitCommandV3, TriggerDevStepV3, TriggerLoginStepV3 } from "~/components/SetupCommands";
import {
InitCommandV3,
PackageManagerProvider,
TriggerDevStepV3,
TriggerLoginStepV3,
} from "~/components/SetupCommands";
import { StepContentContainer } from "~/components/StepContentContainer";
import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
import { InlineCode } from "~/components/code/InlineCode";
Expand Down Expand Up @@ -431,38 +436,40 @@ export default function Page() {

function CreateTaskInstructions() {
return (
<div>
<div className="mb-6 flex items-center justify-between border-b">
<Header1 spacing>Get setup in 3 minutes</Header1>
<div className="flex items-center gap-2">
<Feedback
button={
<Button variant="minimal/small" LeadingIcon={ChatBubbleLeftRightIcon}>
I'm stuck!
</Button>
}
defaultValue="help"
/>
<PackageManagerProvider>
<div>
<div className="mb-6 flex items-center justify-between border-b">
<Header1 spacing>Get setup in 3 minutes</Header1>
<div className="flex items-center gap-2">
<Feedback
button={
<Button variant="minimal/small" LeadingIcon={ChatBubbleLeftRightIcon}>
I'm stuck!
</Button>
}
defaultValue="help"
/>
</div>
</div>
<StepNumber stepNumber="1" title="Run the CLI 'init' command in an existing project" />
<StepContentContainer>
<InitCommandV3 />
<Paragraph spacing>
You'll notice a new folder in your project called{" "}
<InlineCode variant="small">trigger</InlineCode>. We've added a very simple example task
in here to help you get started.
</Paragraph>
</StepContentContainer>
<StepNumber stepNumber="2" title="Run the CLI 'dev' command" />
<StepContentContainer>
<TriggerDevStepV3 />
</StepContentContainer>
<StepNumber stepNumber="3" title="Waiting for tasks" displaySpinner />
<StepContentContainer>
<Paragraph>This page will automatically refresh.</Paragraph>
</StepContentContainer>
</div>
<StepNumber stepNumber="1" title="Run the CLI 'init' command in your project" />
<StepContentContainer>
<InitCommandV3 />
<Paragraph spacing>
You’ll notice a new folder in your project called{" "}
<InlineCode variant="small">trigger</InlineCode>. We’ve added a very simple example task
in here to help you get started.
</Paragraph>
</StepContentContainer>
<StepNumber stepNumber="2" title="Run the CLI 'dev' command" />
<StepContentContainer>
<TriggerDevStepV3 />
</StepContentContainer>
<StepNumber stepNumber="3" title="Waiting for tasks" displaySpinner />
<StepContentContainer>
<Paragraph>This page will automatically refresh.</Paragraph>
</StepContentContainer>
</div>
</PackageManagerProvider>
);
}

Expand All @@ -484,26 +491,28 @@ function UserHasNoTasks() {
}
>
{open ? (
<div>
<Header2 spacing>Get setup in 3 minutes</Header2>

<StepNumber stepNumber="1" title="Open up your project" className="mt-6" />
<StepContentContainer>
<Paragraph>You'll need to open a terminal at the root of your project.</Paragraph>
</StepContentContainer>
<StepNumber stepNumber="2" title="Run the CLI 'login' command" />
<StepContentContainer>
<TriggerLoginStepV3 />
</StepContentContainer>
<StepNumber stepNumber="3" title="Run the CLI 'dev' command" />
<StepContentContainer>
<TriggerDevStepV3 />
</StepContentContainer>
<StepNumber stepNumber="4" title="Waiting for tasks" displaySpinner />
<StepContentContainer>
<Paragraph>This page will automatically refresh.</Paragraph>
</StepContentContainer>
</div>
<PackageManagerProvider>
<div>
<Header2 spacing>Get setup in 3 minutes</Header2>

<StepNumber stepNumber="1" title="Open up your project" className="mt-6" />
<StepContentContainer>
<Paragraph>You'll need to open a terminal at the root of your project.</Paragraph>
</StepContentContainer>
<StepNumber stepNumber="2" title="Run the CLI 'login' command" />
<StepContentContainer>
<TriggerLoginStepV3 />
</StepContentContainer>
<StepNumber stepNumber="3" title="Run the CLI 'dev' command" />
<StepContentContainer>
<TriggerDevStepV3 />
</StepContentContainer>
<StepNumber stepNumber="4" title="Waiting for tasks" displaySpinner />
<StepContentContainer>
<Paragraph>This page will automatically refresh.</Paragraph>
</StepContentContainer>
</div>
</PackageManagerProvider>
) : (
"Your DEV environment isn't setup yet."
)}
Expand Down

0 comments on commit 6a2d033

Please sign in to comment.