Add EmptyState

Author: derwebcoder

src/common/components/Badge/Badge.test.tsx

@@ -1,6 +1,7 @@
 import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import { Badge } from "./Badge";
+import { describe, it } from "vitest";
 
 describe("Badge", () => {
 	it("should render", () => {

src/common/components/EmptyState/EmptyState.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EmptyState } from "./EmptyState";
+
+export default {
+	title: "Components/EmptyState",
+	component: EmptyState,
+} as Meta;
+
+type Story = StoryObj<typeof EmptyState>;
+
+export const Default: Story = {
+	args: {
+		titleSlot: "Create your first Spark.",
+		textSlot:
+			"Sparks can be of any topic. Use #tags to structure your Sparks. #tags added to the beginning of a Spark are used as context. Try adding your first one.",
+	},
+};

src/common/components/EmptyState/EmptyState.test.tsx

@@ -0,0 +1,18 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { EmptyState } from "./EmptyState";
+import { describe, it } from "vitest";
+
+describe("EmptyState", () => {
+	it("should render", () => {
+		render(
+			<EmptyState
+				titleSlot="Hello world"
+				textSlot="How are you?"
+			/>,
+		);
+
+		expect(screen.getByText("Hello world")).toBeInTheDocument();
+		expect(screen.getByText("How are you?")).toBeInTheDocument();
+	});
+});

src/common/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,18 @@
+import type React from "react";
+
+export type EmptyStateProps = {
+	titleSlot: React.ReactNode;
+	textSlot: React.ReactNode;
+};
+
+export const EmptyState = (props: EmptyStateProps) => {
+	const { titleSlot, textSlot } = props;
+	return (
+		<div className="flex flex-col gap-4 p-4 text-center">
+			<span className="font-bold text-lg text-stone-700">
+				{titleSlot}
+			</span>
+			<span className="text-stone-500">{textSlot}</span>
+		</div>
+	);
+};

src/common/components/FormContainer/FormContainer.test.tsx

@@ -2,7 +2,7 @@ import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { FormContainer } from "./FormContainer";
-import { it } from "vitest";
+import { describe, it } from "vitest";
 
 describe("FormContainer", () => {
 	it("should render", () => {

src/common/components/IconButton/IconButton.test.tsx

@@ -3,6 +3,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { IconButton } from "./IconButton";
 import { CogIcon } from "../../../assets/icons/CogIcon";
+import { describe, it } from "vitest";
 
 describe("IconButton", () => {
 	it("should render", () => {

src/common/components/Input/Input.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { type FieldValues, type SubmitHandler, useForm } from "react-hook-form";
 import { Input } from "./Input";
-import { it } from "vitest";
+import { describe, it } from "vitest";
 
 const Wrapper = ({
 	handleSubmit,

src/common/components/TextInput/TextInput.test.tsx

@@ -1,6 +1,7 @@
 import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
 import { TextInput } from "./TextInput";
+import { describe, it } from "vitest";
 
 describe("TextInput", () => {
 	it("should render", () => {

src/container/SparkList/SparkList.tsx

@@ -3,6 +3,7 @@ import { sparkService } from "../../scripts/db/SparkService";
 import { differenceInCalendarDays, format } from "date-fns";
 import type Spark from "../../interfaces/Spark";
 import { stringToHue } from "../../scripts/utils/stringUtils";
+import { EmptyState } from "../../common/components/EmptyState/EmptyState";
 
 type SparkSection = {
 	key: string;
@@ -91,6 +92,17 @@ export const SparkList = () => {
 		return tmpSections;
 	}, []);
 
+	if (!sections || sections.length <= 0) {
+		return (
+			<div className="flex flex-col py-10 bg-white h-full px-8">
+				<EmptyState
+					titleSlot="Create your first Spark"
+					textSlot="Sparks can be of any topic. Use #tags to structure your Sparks. #tags added to the beginning of a Spark are used as context. Try adding your first one."
+				/>
+			</div>
+		);
+	}
+
 	return (
 		<div className="flex flex-col py-10 bg-white h-full px-8">
 			{sections?.map((section) => {