New Directory Setup (#2065)
* chore: moved app & space from apps to root * chore: modified workspace configuration * chore: modified dockerfiles for space and web * chore: modified icons for space * feat: updated files for new svg icons supported by next-images * chore: added /spaces base path for next * chore: added compose config for space * chore: updated husky configuration * chore: updated workflows for new configuration * chore: changed app name to web * fix: resolved build errors with web * chore: reset file tracing root for both projects * chore: added nginx config for deploy * fix: eslint and tsconfig settings for space app * husky setup fixes based on new dir * eslint fixes * prettier formatting --------- Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
This commit is contained in:
sriram veeraghanta
GitHub
parent
20e36194b4
commit
1e152c666c
1022 changed files with 1475 additions and 1240 deletions
161
web/components/onboarding/tour/root.tsx
Normal file
161
web/components/onboarding/tour/root.tsx
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
import { useState } from "react";
|
||||
|
||||
import Image from "next/image";
|
||||
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
// components
|
||||
import { TourSidebar } from "components/onboarding";
|
||||
// ui
|
||||
import { PrimaryButton, SecondaryButton } from "components/ui";
|
||||
// icons
|
||||
import { XMarkIcon } from "@heroicons/react/24/outline";
|
||||
// images
|
||||
import PlaneWhiteLogo from "public/plane-logos/white-horizontal.svg";
|
||||
import IssuesTour from "public/onboarding/issues.webp";
|
||||
import CyclesTour from "public/onboarding/cycles.webp";
|
||||
import ModulesTour from "public/onboarding/modules.webp";
|
||||
import ViewsTour from "public/onboarding/views.webp";
|
||||
import PagesTour from "public/onboarding/pages.webp";
|
||||
|
||||
type Props = {
|
||||
onComplete: () => void;
|
||||
};
|
||||
|
||||
export type TTourSteps = "welcome" | "issues" | "cycles" | "modules" | "views" | "pages";
|
||||
|
||||
const TOUR_STEPS: {
|
||||
key: TTourSteps;
|
||||
title: string;
|
||||
description: string;
|
||||
image: any;
|
||||
prevStep?: TTourSteps;
|
||||
nextStep?: TTourSteps;
|
||||
}[] = [
|
||||
{
|
||||
key: "issues",
|
||||
title: "Plan with issues",
|
||||
description:
|
||||
"The issue is the building block of the Plane. Most concepts in Plane are either associated with issues 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: "issues",
|
||||
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 issues 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 issues when you're in a meeting or starting a day.",
|
||||
image: PagesTour,
|
||||
prevStep: "views",
|
||||
},
|
||||
];
|
||||
|
||||
export const TourRoot: React.FC<Props> = ({ onComplete }) => {
|
||||
const [step, setStep] = useState<TTourSteps>("welcome");
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const currentStepIndex = TOUR_STEPS.findIndex((tourStep) => tourStep.key === step);
|
||||
const currentStep = TOUR_STEPS[currentStepIndex];
|
||||
|
||||
return (
|
||||
<>
|
||||
{step === "welcome" ? (
|
||||
<div className="w-4/5 md:w-1/2 lg:w-2/5 h-3/4 bg-custom-background-100 rounded-[10px] overflow-hidden">
|
||||
<div className="h-full overflow-hidden">
|
||||
<div className="h-3/5 bg-custom-primary-100 grid place-items-center">
|
||||
<Image src={PlaneWhiteLogo} alt="Plane White Logo" />
|
||||
</div>
|
||||
<div className="h-2/5 overflow-y-auto p-6">
|
||||
<h3 className="font-semibold sm:text-xl">
|
||||
Welcome to Plane, {user?.first_name} {user?.last_name}
|
||||
</h3>
|
||||
<p className="text-custom-text-200 text-sm mt-3">
|
||||
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 items-center gap-6 mt-8">
|
||||
<PrimaryButton onClick={() => setStep("issues")}>Take a Product Tour</PrimaryButton>
|
||||
<button
|
||||
type="button"
|
||||
className="outline-custom-text-100 bg-transparent text-custom-primary-100 text-xs font-medium"
|
||||
onClick={onComplete}
|
||||
>
|
||||
No thanks, I will explore it myself
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative w-4/5 md:w-1/2 lg:w-3/5 h-3/5 sm:h-3/4 bg-custom-background-100 rounded-[10px] grid grid-cols-10 overflow-hidden">
|
||||
<button
|
||||
type="button"
|
||||
className="fixed top-[19%] sm:top-[11.5%] right-[9%] md:right-[24%] lg:right-[19%] border border-custom-text-100 rounded-full p-1 translate-x-1/2 -translate-y-1/2 z-10 cursor-pointer"
|
||||
onClick={onComplete}
|
||||
>
|
||||
<XMarkIcon className="h-3 w-3 text-custom-text-100" />
|
||||
</button>
|
||||
<TourSidebar step={step} setStep={setStep} />
|
||||
<div className="col-span-10 lg:col-span-7 h-full overflow-hidden">
|
||||
<div
|
||||
className={`flex items-end h-1/2 sm:h-3/5 overflow-hidden bg-custom-primary-100 ${
|
||||
currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
|
||||
}`}
|
||||
>
|
||||
<Image src={currentStep?.image} alt={currentStep?.title} />
|
||||
</div>
|
||||
<div className="flex flex-col h-1/2 sm:h-2/5 p-4 overflow-y-auto">
|
||||
<h3 className="font-semibold sm:text-xl">{currentStep?.title}</h3>
|
||||
<p className="text-custom-text-200 text-sm mt-3">{currentStep?.description}</p>
|
||||
<div className="h-full flex items-end justify-between gap-4 mt-3">
|
||||
<div className="flex items-center gap-4">
|
||||
{currentStep?.prevStep && (
|
||||
<SecondaryButton onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
|
||||
Back
|
||||
</SecondaryButton>
|
||||
)}
|
||||
{currentStep?.nextStep && (
|
||||
<PrimaryButton onClick={() => setStep(currentStep.nextStep ?? "issues")}>
|
||||
Next
|
||||
</PrimaryButton>
|
||||
)}
|
||||
</div>
|
||||
{TOUR_STEPS.findIndex((tourStep) => tourStep.key === step) ===
|
||||
TOUR_STEPS.length - 1 && (
|
||||
<PrimaryButton onClick={onComplete}>Create my first project</PrimaryButton>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue