feat: migrate DisplayedPrice and create DisplayedPriceWithSymbol

.changeset/quick-ads-pretend.md

@@ -0,0 +1,6 @@
+---
+"@namehash/namekit-react": minor
+"@namehash/ens-utils": minor
+---
+
+Create DisplayedPrice and DisplayedPriceConversion components + new price utilities

apps/storybook.namekit.io/global.css

@@ -5,6 +5,5 @@
 
 .colorful-text {
   font-weight: 700;
-  text-decoration: underline;
   color: lightgreen;
 }

apps/storybook.namekit.io/stories/Namekit/CurrencySymbol.stories.tsx

@@ -1,96 +1,104 @@
 import { Currency } from "@namehash/ens-utils";
-import { CurrencySymbol } from "@namehash/namekit-react/client";
-import { CurrencySymbolSize } from "@namehash/namekit-react/client";
+import {
+  CurrencySymbol,
+  CurrencySymbology,
+} from "@namehash/namekit-react/client";
+import { CurrencyIconSize } from "@namehash/namekit-react/client";
 import type { Meta, StoryObj } from "@storybook/react";
 
-export const ETH: Story = {
-  args: {
-    currency: Currency.Eth,
-    size: CurrencySymbolSize.Large,
-  },
-};
-export const USD: Story = {
-  args: {
-    currency: Currency.Usd,
-    size: CurrencySymbolSize.Large,
+const meta: Meta<typeof CurrencySymbol> = {
+  component: CurrencySymbol,
+  title: "Namekit/CurrencySymbol",
+  argTypes: {
+    currency: {
+      options: Object.values(Currency),
+      control: {
+        labels: Object.keys(Currency),
+        type: "select",
+      },
+    },
+    iconSize: {
+      options: Object.values(CurrencyIconSize),
+      if: { arg: "symbology", eq: CurrencySymbology.Icon },
+      control: {
+        labels: {
+          [CurrencyIconSize.Small]: "Small (16px)",
+          [CurrencyIconSize.Large]: "Large (20px)",
+        },
+        type: "select",
+      },
+    },
+    className: {
+      if: { arg: "symbology", neq: CurrencySymbology.Icon },
+      control: {
+        type: "text",
+      },
+    },
+    describeCurrencyInTooltip: { control: { type: "boolean" } },
+    symbology: {
+      options: Object.keys(CurrencySymbology),
+      control: { type: "select" },
+    },
   },
-};
-export const USDC: Story = {
   args: {
-    currency: Currency.Usdc,
-    size: CurrencySymbolSize.Large,
+    iconSize: CurrencyIconSize.Small,
+    describeCurrencyInTooltip: false,
+    symbology: CurrencySymbology.TextSymbol,
   },
 };
-export const WETH: Story = {
+
+export default meta;
+
+type Story = StoryObj<typeof CurrencySymbol>;
+
+export const AsAnAcronym: Story = {
   args: {
-    currency: Currency.Weth,
-    size: CurrencySymbolSize.Large,
+    currency: Currency.Eth,
+    symbology: CurrencySymbology.Acronym,
   },
 };
-export const DAI: Story = {
+export const AsATextSymbol: Story = {
   args: {
-    currency: Currency.Dai,
-    size: CurrencySymbolSize.Large,
+    currency: Currency.Eth,
+    symbology: CurrencySymbology.TextSymbol,
   },
 };
-export const SmallSize: Story = {
+export const AsASmallIcon: Story = {
   args: {
-    size: CurrencySymbolSize.Small,
     currency: Currency.Eth,
+    iconSize: CurrencyIconSize.Small,
+    symbology: CurrencySymbology.Icon,
   },
 };
-export const LargeSize: Story = {
+export const AsALargeIcon: Story = {
   args: {
-    size: CurrencySymbolSize.Large,
     currency: Currency.Eth,
+    iconSize: CurrencyIconSize.Large,
+    symbology: CurrencySymbology.Icon,
   },
 };
-export const WithCustomSymbolColor: Story = {
+export const WithCustomIconColor: Story = {
+  argTypes: {
+    fill: { control: { type: "color" } },
+  },
   args: {
-    symbolFillColor: "#007bff",
-    size: CurrencySymbolSize.Large,
     currency: Currency.Eth,
+    symbology: CurrencySymbology.Icon,
+    fill: "#007bff",
   },
 };
-export const ShowingTooltipDescription: Story = {
+export const WithCustomFontStyle: Story = {
+  argTypes: {
+    className: { control: { type: "text" } },
+  },
   args: {
-    describeCurrencyInTooltip: true,
-    size: CurrencySymbolSize.Large,
     currency: Currency.Eth,
+    className: "nk-text-3xl colorful-text",
   },
 };
-export const NotShowingTooltipDescription: Story = {
+export const ShowingTooltipDescription: Story = {
   args: {
-    describeCurrencyInTooltip: false,
-    size: CurrencySymbolSize.Large,
     currency: Currency.Eth,
+    describeCurrencyInTooltip: true,
   },
 };
-
-const meta: Meta<typeof CurrencySymbol> = {
-  component: CurrencySymbol,
-  title: "Namekit/CurrencySymbol",
-  argTypes: {
-    symbolFillColor: { control: "color" },
-    currency: {
-      options: [
-        Currency.Eth,
-        Currency.Usd,
-        Currency.Usdc,
-        Currency.Weth,
-        Currency.Dai,
-      ],
-      control: { type: "select" },
-    },
-    size: {
-      options: Object.keys(CurrencySymbolSize),
-      mapping: CurrencySymbolSize,
-      control: { type: "select" },
-    },
-    describeCurrencyInTooltip: { control: { type: "boolean" } },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof CurrencySymbol>;