feat: init
This commit is contained in:
chuan
1
apps/web/core/components/onboarding/tour/index.ts
Normal file
1
apps/web/core/components/onboarding/tour/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from "./root";
|
||||
195
apps/web/core/components/onboarding/tour/root.tsx
Normal file
195
apps/web/core/components/onboarding/tour/root.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import type { StaticImageData } from "next/image";
|
||||
import Image from "next/image";
|
||||
import { X } from "lucide-react";
|
||||
// plane imports
|
||||
import { PRODUCT_TOUR_TRACKER_ELEMENTS } from "@plane/constants";
|
||||
import { Button } from "@plane/propel/button";
|
||||
import { PlaneLockup } from "@plane/propel/icons";
|
||||
// helpers
|
||||
import { captureClick } from "@/helpers/event-tracker.helper";
|
||||
// hooks
|
||||
import { useCommandPalette } from "@/hooks/store/use-command-palette";
|
||||
import { useUser } from "@/hooks/store/user";
|
||||
// assets
|
||||
import CyclesTour from "@/public/onboarding/cycles.webp";
|
||||
import IssuesTour from "@/public/onboarding/issues.webp";
|
||||
import ModulesTour from "@/public/onboarding/modules.webp";
|
||||
import PagesTour from "@/public/onboarding/pages.webp";
|
||||
import ViewsTour from "@/public/onboarding/views.webp";
|
||||
// local imports
|
||||
import { TourSidebar } from "./sidebar";
|
||||
|
||||
type Props = {
|
||||
onComplete: () => void;
|
||||
};
|
||||
|
||||
export type TTourSteps = "welcome" | "work-items" | "cycles" | "modules" | "views" | "pages";
|
||||
|
||||
const TOUR_STEPS: {
|
||||
key: TTourSteps;
|
||||
title: string;
|
||||
description: string;
|
||||
image: StaticImageData;
|
||||
prevStep?: TTourSteps;
|
||||
nextStep?: TTourSteps;
|
||||
}[] = [
|
||||
{
|
||||
key: "work-items",
|
||||
title: "Plan with work items",
|
||||
description:
|
||||
"The work item is the building block of the Plane. Most concepts in Plane are either associated with work items and their properties.",
|
||||
image: IssuesTour,
|
||||
nextStep: "cycles",
|
||||
},
|
||||
{
|
||||
key: "cycles",
|
||||
title: "Move with cycles",
|
||||
description:
|
||||
"Cycles help you and your team to progress faster, similar to the sprints commonly used in agile development.",
|
||||
image: CyclesTour,
|
||||
prevStep: "work-items",
|
||||
nextStep: "modules",
|
||||
},
|
||||
{
|
||||
key: "modules",
|
||||
title: "Break into modules",
|
||||
description: "Modules break your big thing into Projects or Features, to help you organize better.",
|
||||
image: ModulesTour,
|
||||
prevStep: "cycles",
|
||||
nextStep: "views",
|
||||
},
|
||||
{
|
||||
key: "views",
|
||||
title: "Views",
|
||||
description:
|
||||
"Create custom filters to display only the work items that matter to you. Save and share your filters in just a few clicks.",
|
||||
image: ViewsTour,
|
||||
prevStep: "modules",
|
||||
nextStep: "pages",
|
||||
},
|
||||
{
|
||||
key: "pages",
|
||||
title: "Document with pages",
|
||||
description: "Use Pages to quickly jot down work items when you're in a meeting or starting a day.",
|
||||
image: PagesTour,
|
||||
prevStep: "views",
|
||||
},
|
||||
];
|
||||
|
||||
export const TourRoot: React.FC<Props> = observer((props) => {
|
||||
const { onComplete } = props;
|
||||
// states
|
||||
const [step, setStep] = useState<TTourSteps>("welcome");
|
||||
// store hooks
|
||||
const { toggleCreateProjectModal } = useCommandPalette();
|
||||
const { data: currentUser } = useUser();
|
||||
|
||||
const currentStepIndex = TOUR_STEPS.findIndex((tourStep) => tourStep.key === step);
|
||||
const currentStep = TOUR_STEPS[currentStepIndex];
|
||||
|
||||
return (
|
||||
<>
|
||||
{step === "welcome" ? (
|
||||
<div className="h-3/4 w-4/5 overflow-hidden rounded-[10px] bg-custom-background-100 md:w-1/2 lg:w-2/5">
|
||||
<div className="h-full overflow-hidden">
|
||||
<div className="grid h-3/5 place-items-center bg-custom-primary-100">
|
||||
<PlaneLockup className="h-10 w-auto text-custom-text-100" />
|
||||
</div>
|
||||
<div className="flex h-2/5 flex-col overflow-y-auto p-6">
|
||||
<h3 className="font-semibold sm:text-xl">
|
||||
Welcome to Plane, {currentUser?.first_name} {currentUser?.last_name}
|
||||
</h3>
|
||||
<p className="mt-3 text-sm text-custom-text-200">
|
||||
We{"'"}re glad that you decided to try out Plane. You can now manage your projects with ease. Get
|
||||
started by creating a project.
|
||||
</p>
|
||||
<div className="flex h-full items-end">
|
||||
<div className="mt-8 flex items-center gap-6">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => {
|
||||
captureClick({
|
||||
elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.START_BUTTON,
|
||||
});
|
||||
setStep("work-items");
|
||||
}}
|
||||
>
|
||||
Take a Product Tour
|
||||
</Button>
|
||||
<button
|
||||
type="button"
|
||||
className="bg-transparent text-xs font-medium text-custom-primary-100 outline-custom-text-100"
|
||||
onClick={() => {
|
||||
captureClick({
|
||||
elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.SKIP_BUTTON,
|
||||
});
|
||||
onComplete();
|
||||
}}
|
||||
>
|
||||
No thanks, I will explore it myself
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative grid h-3/5 w-4/5 grid-cols-10 overflow-hidden rounded-[10px] bg-custom-background-100 sm:h-3/4 md:w-1/2 lg:w-3/5">
|
||||
<button
|
||||
type="button"
|
||||
className="fixed right-[9%] top-[19%] z-10 -translate-y-1/2 translate-x-1/2 cursor-pointer rounded-full border border-custom-text-100 p-1 sm:top-[11.5%] md:right-[24%] lg:right-[19%]"
|
||||
onClick={onComplete}
|
||||
>
|
||||
<X className="h-3 w-3 text-custom-text-100" />
|
||||
</button>
|
||||
<TourSidebar step={step} setStep={setStep} />
|
||||
<div className="col-span-10 h-full overflow-hidden lg:col-span-7">
|
||||
<div
|
||||
className={`flex h-1/2 items-end overflow-hidden bg-custom-primary-100 sm:h-3/5 ${
|
||||
currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
|
||||
}`}
|
||||
>
|
||||
<Image src={currentStep?.image} alt={currentStep?.title} />
|
||||
</div>
|
||||
<div className="flex h-1/2 flex-col overflow-y-auto p-4 sm:h-2/5">
|
||||
<h3 className="font-semibold sm:text-xl">{currentStep?.title}</h3>
|
||||
<p className="mt-3 text-sm text-custom-text-200">{currentStep?.description}</p>
|
||||
<div className="mt-3 flex h-full items-end justify-between gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
{currentStep?.prevStep && (
|
||||
<Button variant="neutral-primary" onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
|
||||
Back
|
||||
</Button>
|
||||
)}
|
||||
{currentStep?.nextStep && (
|
||||
<Button variant="primary" onClick={() => setStep(currentStep.nextStep ?? "work-items")}>
|
||||
Next
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{currentStepIndex === TOUR_STEPS.length - 1 && (
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => {
|
||||
captureClick({
|
||||
elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.CREATE_PROJECT_BUTTON,
|
||||
});
|
||||
onComplete();
|
||||
toggleCreateProjectModal(true);
|
||||
}}
|
||||
>
|
||||
Create your first project
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
70
apps/web/core/components/onboarding/tour/sidebar.tsx
Normal file
70
apps/web/core/components/onboarding/tour/sidebar.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
"use client";
|
||||
|
||||
// icons
|
||||
import { CycleIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons";
|
||||
// types
|
||||
import type { TTourSteps } from "./root";
|
||||
|
||||
const sidebarOptions: {
|
||||
key: TTourSteps;
|
||||
label: string;
|
||||
Icon: any;
|
||||
}[] = [
|
||||
{
|
||||
key: "work-items",
|
||||
label: "Work items",
|
||||
Icon: WorkItemsIcon,
|
||||
},
|
||||
{
|
||||
key: "cycles",
|
||||
label: "Cycles",
|
||||
Icon: CycleIcon,
|
||||
},
|
||||
{
|
||||
key: "modules",
|
||||
label: "Modules",
|
||||
Icon: ModuleIcon,
|
||||
},
|
||||
{
|
||||
key: "views",
|
||||
label: "Views",
|
||||
Icon: ViewsIcon,
|
||||
},
|
||||
{
|
||||
key: "pages",
|
||||
label: "Pages",
|
||||
Icon: PageIcon,
|
||||
},
|
||||
];
|
||||
|
||||
type Props = {
|
||||
step: TTourSteps;
|
||||
setStep: React.Dispatch<React.SetStateAction<TTourSteps>>;
|
||||
};
|
||||
|
||||
export const TourSidebar: React.FC<Props> = ({ step, setStep }) => (
|
||||
<div className="col-span-3 hidden bg-custom-background-90 p-8 lg:block">
|
||||
<h3 className="text-lg font-medium">
|
||||
Let{"'"}s get started!
|
||||
<br />
|
||||
Get more out of Plane.
|
||||
</h3>
|
||||
<div className="mt-8 space-y-5">
|
||||
{sidebarOptions.map((option) => (
|
||||
<h5
|
||||
key={option.key}
|
||||
className={`flex cursor-pointer items-center gap-2 border-l-[3px] py-0.5 pl-3 pr-2 text-sm font-medium capitalize ${
|
||||
step === option.key
|
||||
? "border-custom-primary-100 text-custom-primary-100"
|
||||
: "border-transparent text-custom-text-200"
|
||||
}`}
|
||||
onClick={() => setStep(option.key)}
|
||||
role="button"
|
||||
>
|
||||
<option.Icon className="h-4 w-4" aria-hidden="true" />
|
||||
{option.label}
|
||||
</h5>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
Reference in New Issue
Block a user