-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: display skeleton pool badge if undefined (#71)
* chore: move skeleton from shadcn to primitives * chore: add skeleton variant to Badge * chore: refactored PoolBadge to PoolStatusBadge and PoolTypeBadge * fix: wrong skeleton imports * fix: allow undefined strategyName for skeleton badge * revert PoolBadge.mdx deletion * fix: storybook and invalid badges
- Loading branch information
Showing
20 changed files
with
370 additions
and
126 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,26 @@ | ||
| import * as React from "react"; | ||
|
|
||
| import { tv } from "tailwind-variants"; | ||
| import { match } from "ts-pattern"; | ||
| import { match, P } from "ts-pattern"; | ||
|
|
||
| import { cn } from "@/lib/utils"; | ||
| import { Badge } from "@/primitives"; | ||
| import { PoolStatus, PoolType } from "@/types"; | ||
| import { isPoolStatus, isPoolType, PoolStatus, PoolType } from "@/types"; | ||
|
|
||
| const PoolBadgeVariants = tv({ | ||
| variants: { | ||
| variant: { | ||
| "pre-round": "border border-green-400 bg-white text-green-400", | ||
| "round-in-progress": "border-transparent bg-green-200 text-black", | ||
| "applications-in-progress": "border-transparent bg-blue-100", | ||
| "funding-pending": "border border-red-400 bg-white text-red-400", | ||
| "quadratic-funding": "border-transparent bg-green-100", | ||
| "direct-grants": "border-transparent bg-yellow-100", | ||
| }, | ||
| }, | ||
| }); | ||
| import { PoolStatusBadge } from "../PoolStatusBadge"; | ||
| import { PoolTypeBadge } from "../PoolTypeBadge"; | ||
|
|
||
| export interface PoolStatusBadgeProps { | ||
| type: "poolStatus"; | ||
| badge: PoolStatus; | ||
| export interface PoolBadgeProps { | ||
| type: "poolStatus" | "poolType"; | ||
| badge?: PoolStatus | PoolType; | ||
| className?: string; | ||
| } | ||
|
|
||
| export interface PoolTypeBadgeProps { | ||
| type: "poolType"; | ||
| badge: PoolType; | ||
| className?: string; | ||
| } | ||
|
|
||
| export type PoolBadgeProps = PoolStatusBadgeProps | PoolTypeBadgeProps; | ||
|
|
||
| export const PoolBadge: React.FC<PoolBadgeProps> = (props) => { | ||
| const { variant, text } = match(props) | ||
| .with({ type: "poolStatus", badge: PoolStatus.PreRound }, () => ({ | ||
| variant: PoolBadgeVariants({ variant: "pre-round" }), | ||
| text: "Pre round", | ||
| })) | ||
| .with({ type: "poolStatus", badge: PoolStatus.RoundInProgress }, () => ({ | ||
| variant: PoolBadgeVariants({ variant: "round-in-progress" }), | ||
| text: "Round in progress", | ||
| })) | ||
| .with({ type: "poolStatus", badge: PoolStatus.ApplicationsInProgress }, () => ({ | ||
| variant: PoolBadgeVariants({ variant: "applications-in-progress" }), | ||
| text: "Applications in progress", | ||
| })) | ||
| .with({ type: "poolStatus", badge: PoolStatus.FundingPending }, () => ({ | ||
| variant: PoolBadgeVariants({ variant: "funding-pending" }), | ||
| text: "Funding pending", | ||
| })) | ||
| .with({ type: "poolType", badge: PoolType.QuadraticFunding }, () => ({ | ||
| variant: PoolBadgeVariants({ variant: "quadratic-funding" }), | ||
| text: "Quadratic funding", | ||
| })) | ||
| .with({ type: "poolType", badge: PoolType.DirectGrants }, () => ({ | ||
| variant: PoolBadgeVariants({ variant: "direct-grants" }), | ||
| text: "Direct grants", | ||
| })) | ||
| .otherwise(() => ({ | ||
| variant: "border border-red-400 bg-white text-red-400", | ||
| text: "Error: Invalid badge type", | ||
| })); | ||
|
|
||
| return <Badge className={cn(props.className, variant)}>{text}</Badge>; | ||
| export const PoolBadge: React.FC<PoolBadgeProps> = ({ type, badge, className }) => { | ||
| return match({ type, badge }) | ||
| .with({ type: "poolStatus", badge: P.optional(P.when(isPoolStatus)) }, () => ( | ||
| <PoolStatusBadge className={className} value={badge as PoolStatus} /> | ||
| )) | ||
| .with({ type: "poolType", badge: P.optional(P.when(isPoolType)) }, () => ( | ||
| <PoolTypeBadge className={className} value={badge as PoolType} /> | ||
| )) | ||
| .otherwise(() => <Badge variant="outlined-error">Error: Invalid badge type</Badge>); | ||
| }; |
84 changes: 84 additions & 0 deletions
84
src/components/Badges/PoolStatusBadge/PoolStatusBadge.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import { Meta, StoryObj } from "@storybook/react"; | ||
|
|
||
| import { PoolStatus } from "@/types"; | ||
|
|
||
| import { PoolStatusBadge } from "./PoolStatusBadge"; | ||
|
|
||
| const meta: Meta<typeof PoolStatusBadge> = { | ||
| title: "Components/Badges/PoolBadge/PoolStatusBadge", | ||
| component: PoolStatusBadge, | ||
| parameters: { | ||
| toc: { disable: true }, | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof PoolStatusBadge>; | ||
|
|
||
| export const Default: Story = { | ||
| argTypes: { | ||
| value: { | ||
| control: "select", | ||
| options: Object.values(PoolStatus), | ||
| description: "The specific badge value.", | ||
| }, | ||
| }, | ||
| args: { | ||
| value: PoolStatus.ApplicationsInProgress, | ||
| }, | ||
| }; | ||
|
|
||
| export const PreRound: Story = { | ||
| args: { | ||
| value: PoolStatus.PreRound, | ||
| }, | ||
| parameters: { | ||
| docs: { | ||
| storyDescription: "Displays the `Pre Round` status badge.", | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export const RoundInProgress: Story = { | ||
| args: { | ||
| value: PoolStatus.RoundInProgress, | ||
| }, | ||
| parameters: { | ||
| docs: { | ||
| storyDescription: "Displays the `Round In Progress` status badge.", | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export const ApplicationsInProgress: Story = { | ||
| args: { | ||
| value: PoolStatus.ApplicationsInProgress, | ||
| }, | ||
| parameters: { | ||
| docs: { | ||
| storyDescription: "Displays the `Applications In Progress` status badge.", | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export const FundingPending: Story = { | ||
| args: { | ||
| value: PoolStatus.FundingPending, | ||
| }, | ||
| parameters: { | ||
| docs: { | ||
| storyDescription: "Displays the `Funding Pending` status badge.", | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export const Undefined: Story = { | ||
| args: { | ||
| value: undefined, | ||
| }, | ||
| parameters: { | ||
| docs: { | ||
| storyDescription: "Displays a skeleton badge when the value is undefined.", | ||
| }, | ||
| }, | ||
| }; |
Oops, something went wrong.