DS : Cards

core/bootstrap/bootstrap-constructor-mock.ts

@@ -3,6 +3,7 @@ import { BannerClientAdapterMock } from "@/core/infrastructure/marketplace-api-c
 import { ProgramClientAdapterMock } from "@/core/infrastructure/marketplace-api-client-adapter/mock-adapters/program-client-adapter-mock";
 import { UserClientAdapterMock } from "@/core/infrastructure/marketplace-api-client-adapter/mock-adapters/user-client-adapter-mock";
 import { DateAdapterMock } from "@/core/kernel/date/date-adapter-mock";
+import { MoneyAdapterMock } from "@/core/kernel/money/money-adapter-mock";
 
 export const bootstrapConstructorMock: BootstrapConstructor = {
   userStoragePortForClient: new UserClientAdapterMock(),
@@ -12,4 +13,5 @@ export const bootstrapConstructorMock: BootstrapConstructor = {
   programStoragePortForClient: new ProgramClientAdapterMock(),
   programStoragePortForServer: new ProgramClientAdapterMock(),
   dateKernelPort: DateAdapterMock,
+  moneyKernelPort: MoneyAdapterMock,
 };

core/bootstrap/index.ts

@@ -9,6 +9,8 @@ import { FetchHttpClient } from "@/core/infrastructure/marketplace-api-client-ad
 import { ImpersonationProvider } from "@/core/infrastructure/marketplace-api-client-adapter/impersonation/impersonation-provider";
 import { DateFacadePort } from "@/core/kernel/date/date-facade-port";
 import { DateFnsAdapter } from "@/core/kernel/date/date-fns-adapter";
+import { MoneyFacadePort } from "@/core/kernel/money/money-facade-port";
+import { MoneyAdapter } from "@/core/kernel/money/money-fns-adapter";
 
 export interface BootstrapConstructor {
   userStoragePortForClient: UserStoragePort;
@@ -18,6 +20,7 @@ export interface BootstrapConstructor {
   programStoragePortForClient: ProgramStoragePort;
   programStoragePortForServer: ProgramStoragePort;
   dateKernelPort: DateFacadePort;
+  moneyKernelPort: MoneyFacadePort;
 }
 
 export class Bootstrap {
@@ -31,6 +34,7 @@ export class Bootstrap {
   programStoragePortForClient: ProgramStoragePort;
   programStoragePortForServer: ProgramStoragePort;
   dateKernelPort: DateFacadePort;
+  moneyKernelPort: MoneyFacadePort;
 
   constructor(constructor: BootstrapConstructor) {
     this.userStoragePortForClient = constructor.userStoragePortForClient;
@@ -40,6 +44,7 @@ export class Bootstrap {
     this.programStoragePortForClient = constructor.programStoragePortForClient;
     this.programStoragePortForServer = constructor.programStoragePortForServer;
     this.dateKernelPort = constructor.dateKernelPort;
+    this.moneyKernelPort = constructor.moneyKernelPort;
   }
 
   getAuthProvider() {
@@ -86,6 +91,10 @@ export class Bootstrap {
     return this.dateKernelPort;
   }
 
+  getMoneyKernelPort() {
+    return this.moneyKernelPort;
+  }
+
   public static get getBootstrap(): Bootstrap {
     if (!Bootstrap.#instance) {
       this.newBootstrap({
@@ -96,6 +105,7 @@ export class Bootstrap {
         programStoragePortForClient: new ProgramClientAdapter(new FetchHttpClient()),
         programStoragePortForServer: new ProgramClientAdapter(new FetchHttpClient()),
         dateKernelPort: DateFnsAdapter,
+        moneyKernelPort: MoneyAdapter,
       });
     }
 

core/kernel/money/money-adapter-mock.ts

@@ -0,0 +1,12 @@
+import { FormatParams, MoneyFacadePort } from "./money-facade-port";
+
+export const MoneyAdapterMock: MoneyFacadePort = {
+  format: (_params: FormatParams) => "",
+  getUSDCurrency: () => ({
+    id: "",
+    code: "",
+    name: "",
+    logoUrl: "",
+    decimals: 0,
+  }),
+};

core/kernel/money/money-facade-port.ts

@@ -0,0 +1,17 @@
+import { components } from "@/core/infrastructure/marketplace-api-client-adapter/__generated/api";
+
+export type Currency = components["schemas"]["ShortCurrencyResponse"];
+
+export interface FormatParams {
+  value: number;
+  currency: Currency;
+  locale?: string;
+  showCurrency?: boolean;
+  notation?: "standard" | "scientific" | "engineering" | "compact";
+  showTilde?: boolean;
+}
+
+export interface MoneyFacadePort {
+  getUSDCurrency: () => Currency;
+  format(params: FormatParams): string;
+}

core/kernel/money/money-fns-adapter.ts

@@ -0,0 +1,34 @@
+import { Currency, FormatParams, MoneyFacadePort } from "./money-facade-port";
+
+const USD_CURRENCY: Currency = {
+  id: "",
+  code: "USD",
+  name: "US Dollar",
+  logoUrl: "",
+  decimals: 2,
+};
+
+export const MoneyAdapter: MoneyFacadePort = {
+  format: ({
+    value,
+    currency,
+    locale = "en-US",
+    showCurrency = true,
+    notation = "standard",
+    showTilde = false,
+  }: FormatParams): string => {
+    let formattedValue = new Intl.NumberFormat(locale, {
+      style: "decimal",
+      minimumFractionDigits: currency.decimals,
+      maximumFractionDigits: currency.decimals,
+      notation,
+    }).format(value);
+
+    if (showTilde) {
+      formattedValue = `~${formattedValue}`;
+    }
+
+    return showCurrency ? `${formattedValue} ${currency.code}` : formattedValue;
+  },
+  getUSDCurrency: () => USD_CURRENCY,
+};

design-system/atoms/paper/adapters/default/default.variants.ts

@@ -18,10 +18,11 @@ export const PaperDefaultVariants = tv({
       action: { base: "bg-container-action" },
       inverse: { base: "bg-container-inverse" },
       transparent: { base: "bg-container-transparent" },
+      "interactions-black": { base: "bg-interactions-black-default" },
     },
     border: {
       none: "border-0",
-      "container-stroke-separator": "border-container-stroke-separator border",
+      "container-stroke-separator": "border border-container-stroke-separator",
     },
   },
   defaultVariants: {

design-system/atoms/paper/paper.types.ts

@@ -2,7 +2,7 @@ import { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from "react"
 
 interface Variants {
   size: "s" | "m" | "l";
-  container: "1" | "2" | "3" | "4" | "action" | "inverse" | "transparent";
+  container: "1" | "2" | "3" | "4" | "action" | "inverse" | "transparent" | "interactions-black";
   border: "none" | "container-stroke-separator";
 }
 

design-system/atoms/skeleton/adapters/next-ui/next-ui.variants.ts

@@ -20,6 +20,7 @@ export const SkeletonNextUiVariants = tv({
       "4": { base: "bg-container-4" },
       action: { base: "bg-container-action" },
       inverse: { base: "bg-container-inverse" },
+      "interactions-black": { base: "bg-interactions-black-default" },
     },
   },
   defaultVariants: {

design-system/atoms/skeleton/skeleton.types.ts

@@ -2,7 +2,7 @@ import { BaseHTMLAttributes } from "react";
 
 interface Variants {
   shape: "square" | "circle";
-  container: "1" | "2" | "3" | "4" | "action" | "inverse";
+  container: "1" | "2" | "3" | "4" | "action" | "inverse" | "interactions-black";
 }
 
 interface ClassNames {

design-system/atoms/tag/adapters/default/default.variants.ts

@@ -2,8 +2,8 @@ import { tv } from "tailwind-variants";
 
 export const TagDefaultVariants = tv({
   slots: {
-    base: "border-1 border-container-stroke-separator bg-container-4 group block transition-colors data-[clickable=true]:cursor-pointer",
-    content: "text-text-1 flex flex-row items-center justify-center",
+    base: "group block border-1 border-container-stroke-separator bg-container-4 transition-colors data-[clickable=true]:cursor-pointer",
+    content: "flex flex-row items-center justify-center text-text-1",
     label: "text-inherit",
     deletableIcon: "text-inherit",
     dropDownIcon: "text-inherit",

design-system/molecules/cards/card-budget/adapters/default/default.adapter.tsx

@@ -0,0 +1,52 @@
+import { ElementType } from "react";
+
+import { bootstrap } from "@/core/bootstrap";
+
+import { Tag } from "@/design-system/atoms/tag";
+import { CardTemplate } from "@/design-system/molecules/cards/card-template";
+
+import { cn } from "@/shared/helpers/cn";
+
+import { CardBudgetPort } from "../../card-budget.types";
+import { CardBudgetDefaultVariants } from "./default.variants";
+
+export function CardBudgetDefaultAdapter<C extends ElementType = "div">({
+  as,
+  classNames,
+  htmlProps,
+  amount: { value, currency, usdEquivalent },
+  budgetPercentage,
+}: CardBudgetPort<C>) {
+  const slots = CardBudgetDefaultVariants();
+
+  const { format: formatMoney, getUSDCurrency } = bootstrap.getMoneyKernelPort();
+
+  return (
+    <CardTemplate
+      as={as}
+      classNames={{ base: cn(slots.base(), classNames?.base) }}
+      htmlProps={htmlProps}
+      avatarProps={{ src: currency.logoUrl }}
+      titleProps={{
+        children: formatMoney({
+          value,
+          currency,
+        }),
+      }}
+      descriptionProps={{
+        children: formatMoney({
+          value: usdEquivalent,
+          currency: getUSDCurrency(),
+          showTilde: true,
+        }),
+      }}
+      endContent={
+        budgetPercentage && (
+          <Tag color="white" size="s" style="outline">
+            {budgetPercentage}%
+          </Tag>
+        )
+      }
+    />
+  );
+}

design-system/molecules/cards/card-budget/adapters/default/default.variants.ts

@@ -0,0 +1,9 @@
+import { tv } from "tailwind-variants";
+
+export const CardBudgetDefaultVariants = tv({
+  slots: {
+    base: "",
+  },
+  variants: {},
+  defaultVariants: {},
+});

design-system/molecules/cards/card-budget/card-budget.loading.tsx

@@ -0,0 +1,5 @@
+import { CardTemplateLoading } from "@/design-system/molecules/cards/card-template";
+
+export function CardBudgetLoading() {
+  return <CardTemplateLoading />;
+}

design-system/molecules/cards/card-budget/card-budget.stories.tsx

@@ -0,0 +1,66 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { CardBudgetDefaultAdapter } from "./adapters/default/default.adapter";
+import { CardBudgetLoading } from "./card-budget.loading";
+import { CardBudgetPort } from "./card-budget.types";
+
+type Story = StoryObj<typeof CardBudgetDefaultAdapter>;
+
+const defaultProps: CardBudgetPort<"div"> = {
+  amount: {
+    value: 100000,
+    currency: {
+      id: "",
+      code: "USDC",
+      name: "USD Coin",
+      logoUrl: undefined,
+      decimals: 2,
+    },
+    usdEquivalent: 100000,
+  },
+  budgetPercentage: 75,
+};
+
+const meta: Meta<typeof CardBudgetDefaultAdapter> = {
+  component: CardBudgetDefaultAdapter,
+  title: "Molecules/Cards/CardBudget",
+  tags: ["autodocs"],
+  parameters: {
+    backgrounds: {
+      default: "black",
+      values: [{ name: "black", value: "#05051E" }],
+    },
+  },
+};
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      source: { code: "<CardBudgetDefaultAdapter />" },
+    },
+  },
+  render: args => {
+    return (
+      <div className="flex w-full items-center gap-2">
+        <CardBudgetDefaultAdapter {...defaultProps} {...args} />
+      </div>
+    );
+  },
+};
+
+export const Skeleton: Story = {
+  parameters: {
+    docs: {
+      source: { code: "<CardBudgetLoading />" },
+    },
+  },
+  render: () => {
+    return (
+      <div className="flex w-[345px] items-center gap-2">
+        <CardBudgetLoading />
+      </div>
+    );
+  },
+};
+
+export default meta;

design-system/molecules/cards/card-budget/card-budget.types.ts

@@ -0,0 +1,29 @@
+import { ComponentPropsWithoutRef, ElementType } from "react";
+
+interface Variants {}
+
+interface ClassNames {
+  base: string;
+}
+
+interface Currency {
+  id: string;
+  code: string;
+  name: string;
+  logoUrl?: string;
+  decimals: number;
+}
+
+interface Amount {
+  value: number;
+  currency: Currency;
+  usdEquivalent: number;
+}
+
+export interface CardBudgetPort<C extends ElementType> extends Partial<Variants> {
+  as?: C;
+  htmlProps?: ComponentPropsWithoutRef<C>;
+  classNames?: Partial<ClassNames>;
+  amount: Amount;
+  budgetPercentage?: number;
+}

design-system/molecules/cards/card-budget/index.ts

@@ -0,0 +1,3 @@
+export * from "./variants/card-budget-default";
+export * from "./card-budget.types";
+export * from "./card-budget.loading";

design-system/molecules/cards/card-budget/variants/card-budget-default.tsx

@@ -0,0 +1,10 @@
+import { ElementType } from "react";
+
+import { withComponentAdapter } from "@/design-system/helpers/with-component-adapter";
+
+import { CardBudgetDefaultAdapter } from "../adapters/default/default.adapter";
+import { CardBudgetPort } from "../card-budget.types";
+
+export function CardBudget<C extends ElementType = "div">(props: CardBudgetPort<C>) {
+  return withComponentAdapter<CardBudgetPort<C>>(CardBudgetDefaultAdapter)(props);
+}