fix: storybook and invalid badges

gitcoinco · Dec 1, 2024 · 2f45772 · 2f45772
1 parent daedf1b
commit 2f45772
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 24 deletions.
diff --git a/src/components/Badges/PoolBadge/PoolBadge.mdx b/src/components/Badges/PoolBadge/PoolBadge.mdx
@@ -11,17 +11,17 @@ The `PoolBadge` component is a versatile UI element that indicates either the st
 
 # Example
 
-<Story of={PoolBadgeStories.PoolStatusBadge} />
+<Story of={PoolBadgeStories.PoolStatusStory} />
 
 # Controls
 
-<Controls of={PoolBadgeStories.PoolStatusBadge} />
+<Controls of={PoolBadgeStories.PoolStatusStory} />
 
-<Story of={PoolBadgeStories.PoolTypeBadge} />
+<Story of={PoolBadgeStories.PoolTypeStory} />
 
 # Controls
 
-<Controls of={PoolBadgeStories.PoolTypeBadge} />
+<Controls of={PoolBadgeStories.PoolTypeStory} />
 
 # Other variations
 

diff --git a/src/components/Badges/PoolBadge/PoolBadge.stories.tsx b/src/components/Badges/PoolBadge/PoolBadge.stories.tsx
@@ -31,7 +31,8 @@ type Story = StoryObj<typeof PoolBadge>;
 
 export const Default: Story = {};
 
-export const TypePoolStatus: Story = {
+export const PoolStatusStory: Story = {
+  name: "Pool Status Badge",
   argTypes: {
     badge: {
       control: "select",
@@ -52,7 +53,8 @@ export const TypePoolStatus: Story = {
 };
 
 // Story for poolType
-export const TypePoolType: Story = {
+export const PoolTypeStory: Story = {
+  name: "Pool Type Badge",
   argTypes: {
     badge: {
       control: "select",

diff --git a/src/components/Badges/PoolStatusBadge/PoolStatusBadge.stories.tsx b/src/components/Badges/PoolStatusBadge/PoolStatusBadge.stories.tsx
@@ -5,7 +5,7 @@ import { PoolStatus } from "@/types";
 import { PoolStatusBadge } from "./PoolStatusBadge";
 
 const meta: Meta<typeof PoolStatusBadge> = {
-  title: "Components/Badges/PoolStatusBadge",
+  title: "Components/Badges/PoolBadge/PoolStatusBadge",
   component: PoolStatusBadge,
   parameters: {
     toc: { disable: true },

diff --git a/src/components/Badges/PoolStatusBadge/PoolStatusBadge.tsx b/src/components/Badges/PoolStatusBadge/PoolStatusBadge.tsx
@@ -1,10 +1,11 @@
 import * as React from "react";
 
 import { tv } from "tailwind-variants";
+import { match, P } from "ts-pattern";
 
 import { cn } from "@/lib/utils";
 import { Badge } from "@/primitives";
-import { PoolStatus } from "@/types";
+import { isPoolStatus, PoolStatus } from "@/types";
 
 const variants = tv({
   variants: {
@@ -17,24 +18,27 @@ const variants = tv({
   },
 });
 
-const statusBadgeTexts = {
+const badgeTexts = {
   [PoolStatus.PreRound]: "Pre round",
   [PoolStatus.RoundInProgress]: "Round in progress",
   [PoolStatus.ApplicationsInProgress]: "Applications in progress",
   [PoolStatus.FundingPending]: "Funding pending",
 };
 
+const invalidValueText = "Error: Invalid status";
+
 export interface PoolStatusBadgeProps {
   value?: PoolStatus;
   className?: string;
 }
 
 export const PoolStatusBadge: React.FC<PoolStatusBadgeProps> = ({ value, className }) => {
-  const statusVariant = variants({ value });
+  const variantClass = variants({ value });
 
-  return value ? (
-    <Badge className={cn(className, statusVariant)}>{statusBadgeTexts[value]}</Badge>
-  ) : (
-    <Badge skeleton className={className} size="md" />
-  );
+  return match({ value })
+    .with({ value: undefined }, () => <Badge skeleton className={className} size="md" />)
+    .with({ value: P.when(isPoolStatus) }, ({ value }) => (
+      <Badge className={cn(className, variantClass)}>{badgeTexts[value]}</Badge>
+    ))
+    .otherwise(() => <Badge variant="outlined-error">{invalidValueText}</Badge>);
 };
diff --git a/src/components/Badges/PoolTypeBadge/PoolTypeBadge.stories.tsx b/src/components/Badges/PoolTypeBadge/PoolTypeBadge.stories.tsx
@@ -5,7 +5,7 @@ import { PoolType } from "@/types";
 import { PoolTypeBadge } from "./PoolTypeBadge";
 
 const meta: Meta<typeof PoolTypeBadge> = {
-  title: "Components/Badges/PoolTypeBadge",
+  title: "Components/Badges/PoolBadge/PoolTypeBadge",
   component: PoolTypeBadge,
 };
 

diff --git a/src/components/Badges/PoolTypeBadge/PoolTypeBadge.tsx b/src/components/Badges/PoolTypeBadge/PoolTypeBadge.tsx
@@ -1,10 +1,11 @@
 import * as React from "react";
 
 import { tv } from "tailwind-variants";
+import { match, P } from "ts-pattern";
 
 import { cn } from "@/lib/utils";
 import { Badge } from "@/primitives";
-import { PoolType } from "@/types";
+import { isPoolType, PoolType } from "@/types";
 
 const variants = tv({
   base: "border-transparent",
@@ -21,17 +22,20 @@ export interface PoolTypeBadgeProps {
   className?: string;
 }
 
-const typeBadgeTexts = {
+const badgeTexts = {
   [PoolType.QuadraticFunding]: "Quadratic funding",
   [PoolType.DirectGrants]: "Direct grants",
 };
 
+const invalidValueText = "Error: Invalid type";
+
 export const PoolTypeBadge: React.FC<PoolTypeBadgeProps> = ({ value, className }) => {
-  const typeVariant = variants({ value });
+  const variantClass = variants({ value });
 
-  return value ? (
-    <Badge className={cn(className, typeVariant)}>{typeBadgeTexts[value]}</Badge>
-  ) : (
-    <Badge skeleton className={className} size="md" />
-  );
+  return match({ value })
+    .with({ value: undefined }, () => <Badge skeleton className={className} size="md" />)
+    .with({ value: P.when(isPoolType) }, ({ value }) => (
+      <Badge className={cn(className, variantClass)}>{badgeTexts[value]}</Badge>
+    ))
+    .otherwise(() => <Badge variant="outlined-error">{invalidValueText}</Badge>);
 };