From 636e8e6c601b6ccc6b0c9b24dd9018aadd362274 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Wed, 15 Mar 2023 11:01:54 +0530 Subject: [PATCH] style: empty state global component (#435) --- .../cycles/completed-cycles-list.tsx | 18 +++--- apps/app/components/cycles/cycles-list.tsx | 15 ++++- apps/app/components/ui/empty-state.tsx | 59 ++++++++++++++++++ apps/app/components/ui/index.ts | 1 + .../projects/[projectId]/issues/index.tsx | 35 +++-------- .../projects/[projectId]/modules/index.tsx | 37 ++++------- .../pages/[workspaceSlug]/projects/index.tsx | 34 +++------- apps/app/public/empty-state/empty-cycle.svg | 50 +++++++++++++++ apps/app/public/empty-state/empty-issue.svg | 62 +++++++++++++++++++ apps/app/public/empty-state/empty-module.svg | 50 +++++++++++++++ apps/app/public/empty-state/empty-project.svg | 56 +++++++++++++++++ 11 files changed, 331 insertions(+), 86 deletions(-) create mode 100644 apps/app/components/ui/empty-state.tsx create mode 100644 apps/app/public/empty-state/empty-cycle.svg create mode 100644 apps/app/public/empty-state/empty-issue.svg create mode 100644 apps/app/public/empty-state/empty-module.svg create mode 100644 apps/app/public/empty-state/empty-project.svg diff --git a/apps/app/components/cycles/completed-cycles-list.tsx b/apps/app/components/cycles/completed-cycles-list.tsx index a6589f0d2..32eed4ab1 100644 --- a/apps/app/components/cycles/completed-cycles-list.tsx +++ b/apps/app/components/cycles/completed-cycles-list.tsx @@ -14,7 +14,9 @@ import { CompletedCycleIcon } from "components/icons"; import { ICycle, SelectCycleType } from "types"; // fetch-keys import { CYCLE_COMPLETE_LIST } from "constants/fetch-keys"; -import { Loader } from "components/ui"; +import { EmptyState, Loader } from "components/ui"; +// image +import emptyCycle from "public/empty-state/empty-cycle.svg"; export interface CompletedCyclesListProps { setCreateUpdateCycleModal: React.Dispatch>; @@ -72,13 +74,13 @@ export const CompletedCyclesList: React.FC = ({ ))} ) : ( -
- -

- No completed cycles yet. Create with{" "} - 
Q
. -

-
+ ) ) : ( diff --git a/apps/app/components/cycles/cycles-list.tsx b/apps/app/components/cycles/cycles-list.tsx index 8076154f1..54bf415c5 100644 --- a/apps/app/components/cycles/cycles-list.tsx +++ b/apps/app/components/cycles/cycles-list.tsx @@ -1,8 +1,11 @@ import { useState } from "react"; // components -import { DeleteCycleModal, EmptyCycle, SingleCycleCard } from "components/cycles"; -import { Loader } from "components/ui"; +import { DeleteCycleModal, SingleCycleCard } from "components/cycles"; +import { EmptyState, Loader } from "components/ui"; +// image +import emptyCycle from "public/empty-state/empty-cycle.svg"; + // types import { ICycle, SelectCycleType } from "types"; @@ -56,7 +59,13 @@ export const CyclesList: React.FC = ({ ))} ) : ( - + ) ) : ( diff --git a/apps/app/components/ui/empty-state.tsx b/apps/app/components/ui/empty-state.tsx new file mode 100644 index 000000000..2b625c45b --- /dev/null +++ b/apps/app/components/ui/empty-state.tsx @@ -0,0 +1,59 @@ +import React from "react"; +import Image from "next/image"; + +// icon +import { PlusIcon } from "@heroicons/react/24/outline"; +// helper +import { capitalizeFirstLetter } from "helpers/string.helper"; + +type Props = { + type: "cycle" | "module" | "project" | "issue"; + title: string; + description: React.ReactNode | string; + imgURL: string; +}; + +export const EmptyState: React.FC = ({ type, title, description, imgURL }) => { + const shortcutKey = (type: string) => { + switch (type) { + case "cycle": + return "Q"; + case "module": + return "M"; + case "project": + return "P"; + default: + return "C"; + } + }; + return ( +
+
+ {type} +
+ +

{title}

+ + Use shortcut{" "} + + {shortcutKey(type)} + {" "} + to create {type} from anywhere. + +

{description}

+ + +
+ ); +}; diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts index 94effbfd7..da97deb65 100644 --- a/apps/app/components/ui/index.ts +++ b/apps/app/components/ui/index.ts @@ -18,3 +18,4 @@ export * from "./spinner"; export * from "./tooltip"; export * from "./labels-list"; export * from "./linear-progress-indicator"; +export * from "./empty-state"; \ No newline at end of file diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx index 3c94594de..74ec6041c 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx @@ -14,7 +14,7 @@ import { IssueViewContextProvider } from "contexts/issue-view.context"; // components import { IssuesFilterView, IssuesView } from "components/core"; // ui -import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton } from "components/ui"; +import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton, EmptyState } from "components/ui"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; // icons import { RectangleStackIcon, PlusIcon } from "@heroicons/react/24/outline"; @@ -23,6 +23,8 @@ import type { UserAuth } from "types"; import type { GetServerSidePropsContext, NextPage } from "next"; // fetch-keys import { PROJECT_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys"; +// image +import emptyIssue from "public/empty-state/empty-issue.svg"; const ProjectIssues: NextPage = (props) => { const router = useRouter(); @@ -76,30 +78,13 @@ const ProjectIssues: NextPage = (props) => { userAuth={props} /> ) : ( -
- - - Use 
C
shortcut to - create a new issue - - } - Icon={PlusIcon} - action={() => { - const e = new KeyboardEvent("keydown", { - key: "c", - }); - document.dispatchEvent(e); - }} - /> - -
+ ) ) : (
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx index f96915048..11b6e953e 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx @@ -2,7 +2,10 @@ import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; -import { PlusIcon, RectangleGroupIcon } from "@heroicons/react/24/outline"; +import { PlusIcon } from "@heroicons/react/24/outline"; +// image +import emptyModule from "public/empty-state/empty-module.svg"; + // layouts import AppLayout from "layouts/app-layout"; @@ -14,7 +17,7 @@ import modulesService from "services/modules.service"; // components import { CreateUpdateModuleModal, SingleModuleCard } from "components/modules"; // ui -import { EmptySpace, EmptySpaceItem, HeaderButton, Loader } from "components/ui"; +import { EmptyState, HeaderButton, Loader } from "components/ui"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; // icons // types @@ -103,30 +106,12 @@ const ProjectModules: NextPage = () => {
) : ( -
- - - Use 
M
shortcut to - create a new module - - } - Icon={PlusIcon} - action={() => { - const e = new KeyboardEvent("keydown", { - key: "m", - }); - document.dispatchEvent(e); - }} - /> - -
+ ) ) : ( diff --git a/apps/app/pages/[workspaceSlug]/projects/index.tsx b/apps/app/pages/[workspaceSlug]/projects/index.tsx index e0b7c9d45..816b5de07 100644 --- a/apps/app/pages/[workspaceSlug]/projects/index.tsx +++ b/apps/app/pages/[workspaceSlug]/projects/index.tsx @@ -14,14 +14,16 @@ import AppLayout from "layouts/app-layout"; import { JoinProjectModal } from "components/project/join-project-modal"; import { DeleteProjectModal, SingleProjectCard } from "components/project"; // ui -import { HeaderButton, EmptySpace, EmptySpaceItem, Loader } from "components/ui"; +import { HeaderButton, Loader, EmptyState } from "components/ui"; import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs"; // icons -import { ClipboardDocumentListIcon, PlusIcon } from "@heroicons/react/24/outline"; +import { PlusIcon } from "@heroicons/react/24/outline"; // types import type { GetServerSidePropsContext, NextPage } from "next"; // fetch-keys import { PROJECT_MEMBERS } from "constants/fetch-keys"; +// image +import emptyProject from "public/empty-state/empty-project.svg"; const ProjectsPage: NextPage = () => { // router @@ -80,28 +82,12 @@ const ProjectsPage: NextPage = () => { {projects ? ( <> {projects.length === 0 ? ( -
- - - Use 
P
shortcut to - create a new project - - } - Icon={PlusIcon} - action={() => { - const e = new KeyboardEvent("keydown", { key: "p" }); - document.dispatchEvent(e); - }} - /> - -
+ ) : (
{projects.map((project) => ( diff --git a/apps/app/public/empty-state/empty-cycle.svg b/apps/app/public/empty-state/empty-cycle.svg new file mode 100644 index 000000000..77807242e --- /dev/null +++ b/apps/app/public/empty-state/empty-cycle.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/app/public/empty-state/empty-issue.svg b/apps/app/public/empty-state/empty-issue.svg new file mode 100644 index 000000000..4ff8888c3 --- /dev/null +++ b/apps/app/public/empty-state/empty-issue.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/app/public/empty-state/empty-module.svg b/apps/app/public/empty-state/empty-module.svg new file mode 100644 index 000000000..cdceb3189 --- /dev/null +++ b/apps/app/public/empty-state/empty-module.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/app/public/empty-state/empty-project.svg b/apps/app/public/empty-state/empty-project.svg new file mode 100644 index 000000000..256b9665f --- /dev/null +++ b/apps/app/public/empty-state/empty-project.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +