Fix: nft improve (#128)

* fix(nft): add thumbnailBehavior prop * fix(nft): support generic prop for price items * fix(nft): improve nft controlled props and label props * fix(nft): allow custom details buttons
hyperweb-io · Nov 23, 2023 · 874852c · 874852c
1 parent 0100a50
commit 874852c
Show file tree

Hide file tree

Showing 16 changed files with 439 additions and 124 deletions.
diff --git a/packages/react/stories/nft/NftMint.stories.tsx b/packages/react/stories/nft/NftMint.stories.tsx
@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import NftMint from "../../src/ui/nft-mint";
@@ -28,12 +29,29 @@ export const Primary: Story = {
     limited: 50,
     imgSrc:
       "https://res.cloudinary.com/stargaze/image/upload/f_auto,w_700/ighabxq1rjqr5xblblue",
-    starsPrice: 0.01063943,
-    onMint: () => {
-      console.log("onMint");
-    },
-    onChange: (value) => {
+    pricePerToken: 0.01063943,
+    tokenName: "STARS",
+  },
+  render: (props) => {
+    const [amount, setAmount] = React.useState<number>(0);
+    const onChange = (value) => {
       console.log("onChange", value);
-    },
+      setAmount(value);
+    };
+
+    const onMint = () => {
+      setAmount(0);
+      console.log("minted and reset amount to 0");
+    };
+
+    return (
+      <NftMint
+        {...props}
+        amount={amount}
+        defaultAmount={0}
+        onChange={onChange}
+        onMint={onMint}
+      />
+    );
   },
 };
diff --git a/packages/react/stories/nft/NftProfile.stories.tsx b/packages/react/stories/nft/NftProfile.stories.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import NftProfile from "../../src/ui/nft-profile";
+import type { NftProfileCardProps } from "../../src/ui/nft-profile-card/nft-profile-card.types";
 
 const meta: Meta<typeof NftProfile> = {
   component: NftProfile,
@@ -14,10 +15,197 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const list1: NftProfileCardProps[] = [
+  {
+    imgSrc:
+      "https://res.cloudinary.com/stargaze/image/upload/w_700/m4sxagqpu98z76lcggyj.jpg",
+    name: "Bad Kid #9501",
+    priceItems: [
+      {
+        label: "Highest offer",
+        value: "450",
+      },
+      {
+        label: "Listing price",
+        value: "373",
+      },
+    ],
+  },
+  {
+    imgSrc:
+      "https://res.cloudinary.com/stargaze/image/upload/w_700/wnfkydgxvp2vf0fqq277.jpg",
+    name: "Bad Kid #9502",
+    priceItems: [
+      {
+        label: "Highest offer",
+        value: "450",
+      },
+      {
+        label: "Listing price",
+        value: "373",
+      },
+    ],
+  },
+  {
+    imgSrc:
+      "https://res.cloudinary.com/stargaze/image/upload/w_700/zkmiu7m7jelttu6ewrvu.jpg",
+    name: "Bad Kid #9505",
+    priceItems: [
+      {
+        label: "Highest offer",
+        value: "450",
+      },
+      {
+        label: "Listing price",
+        value: "373",
+      },
+    ],
+  },
+  {
+    imgSrc:
+      "https://res.cloudinary.com/stargaze/image/upload/w_700/yisqceq5imrkgrzml02b.jpg",
+    name: "Bad Kid #9506",
+    priceItems: [
+      {
+        label: "Highest offer",
+        value: "450",
+      },
+      {
+        label: "Listing price",
+        value: "373",
+      },
+    ],
+  },
+  {
+    imgSrc:
+      "https://res.cloudinary.com/stargaze/image/upload/w_700/benc6jvttlv9nbemyxch.jpg",
+    name: "Bad Kid #9508",
+    priceItems: [
+      {
+        label: "Highest offer",
+        value: "450",
+      },
+      {
+        label: "Listing price",
+        value: "373",
+      },
+    ],
+  },
+  {
+    imgSrc:
+      "https://res.cloudinary.com/stargaze/image/upload/w_700/ndkbjpwtgys09w1xxwny.jpg",
+    name: "Bad Kid #9509",
+    priceItems: [
+      {
+        label: "Highest offer",
+        value: "450",
+      },
+      {
+        label: "Listing price",
+        value: "373",
+      },
+    ],
+  },
+];
+
+const list2: NftProfileCardProps[] = [
+  {
+    imgSrc:
+      "https://ipfs-gw.stargaze-apis.com/ipfs/bafybeibl5rrhfola4m2gxyzfji63fxyboeic36pjxjmrnmgablqhy3mnvy/3054.png",
+    name: "Bad Kid #9501",
+    priceItems: [
+      {
+        label: "Highest offer",
+        value: "450",
+      },
+      {
+        label: "Listing price",
+        value: "373",
+      },
+    ],
+  },
+  {
+    imgSrc:
+      "https://ipfs-gw.stargaze-apis.com/ipfs/bafybeibl5rrhfola4m2gxyzfji63fxyboeic36pjxjmrnmgablqhy3mnvy/6.png",
+    name: "Bad Kid #9502",
+    priceItems: [
+      {
+        label: "Highest offer",
+        value: "450",
+      },
+      {
+        label: "Listing price",
+        value: "373",
+      },
+    ],
+  },
+  {
+    imgSrc:
+      "https://ipfs-gw.stargaze-apis.com/ipfs/bafybeicf6q3az6bk4fyilhgk7ytgkctxjb3jsm4542cxtb6r4xsb35zoni/images/608.png",
+    name: "Bad Kid #9505",
+    priceItems: [
+      {
+        label: "Highest offer",
+        value: "450",
+      },
+      {
+        label: "Listing price",
+        value: "373",
+      },
+    ],
+  },
+  {
+    imgSrc:
+      "https://ipfs-gw.stargaze-apis.com/ipfs/bafybeicf6q3az6bk4fyilhgk7ytgkctxjb3jsm4542cxtb6r4xsb35zoni/images/444.png",
+    name: "Bad Kid #9506",
+    priceItems: [
+      {
+        label: "Highest offer",
+        value: "450",
+      },
+      {
+        label: "Listing price",
+        value: "373",
+      },
+    ],
+  },
+  {
+    imgSrc:
+      "https://ipfs-gw.stargaze-apis.com/ipfs/bafybeicf6q3az6bk4fyilhgk7ytgkctxjb3jsm4542cxtb6r4xsb35zoni/images/668.png",
+    name: "Bad Kid #9508",
+    priceItems: [
+      {
+        label: "Highest offer",
+        value: "450",
+      },
+      {
+        label: "Listing price",
+        value: "373",
+      },
+    ],
+  },
+  {
+    imgSrc:
+      "https://res.cloudinary.com/stargaze/image/upload/w_700/ndkbjpwtgys09w1xxwny.jpg",
+    name: "Bad Kid #9509",
+    priceItems: [
+      {
+        label: "Highest offer",
+        value: "450",
+      },
+      {
+        label: "Listing price",
+        value: "373",
+      },
+    ],
+  },
+];
+
 /* This is primary NftProfile */
 export const Primary: Story = {
   args: {
     title: "Profile",
+    thumbnailBehavior: "contain",
     headerButtonLabel: "View on Stargaze",
     meta: [
       {
@@ -38,49 +226,6 @@ export const Primary: Story = {
     onView() {
       console.log("onView");
     },
-    list: [
-      {
-        imgSrc:
-          "https://res.cloudinary.com/stargaze/image/upload/w_700/m4sxagqpu98z76lcggyj.jpg",
-        name: "Bad Kid #9501",
-        highestOffer: "450",
-        listPrice: "373",
-      },
-      {
-        imgSrc:
-          "https://res.cloudinary.com/stargaze/image/upload/w_700/wnfkydgxvp2vf0fqq277.jpg",
-        name: "Bad Kid #9502",
-        highestOffer: "450",
-        listPrice: "373",
-      },
-      {
-        imgSrc:
-          "https://res.cloudinary.com/stargaze/image/upload/w_700/zkmiu7m7jelttu6ewrvu.jpg",
-        name: "Bad Kid #9505",
-        highestOffer: "450",
-        listPrice: "373",
-      },
-      {
-        imgSrc:
-          "https://res.cloudinary.com/stargaze/image/upload/w_700/yisqceq5imrkgrzml02b.jpg",
-        name: "Bad Kid #9506",
-        highestOffer: "450",
-        listPrice: "373",
-      },
-      {
-        imgSrc:
-          "https://res.cloudinary.com/stargaze/image/upload/w_700/benc6jvttlv9nbemyxch.jpg",
-        name: "Bad Kid #9508",
-        highestOffer: "450",
-        listPrice: "373",
-      },
-      {
-        imgSrc:
-          "https://res.cloudinary.com/stargaze/image/upload/w_700/ndkbjpwtgys09w1xxwny.jpg",
-        name: "Bad Kid #9509",
-        highestOffer: "450",
-        listPrice: "373",
-      },
-    ],
+    list: list2,
   },
 };
diff --git a/src/styles/rainbow-sprinkles.css.ts b/src/styles/rainbow-sprinkles.css.ts
@@ -16,12 +16,19 @@ const allSpace = { ...themeVars.space, ...extendedSpace };
 const margins = themeVars.space;
 
 const responsiveProperties = defineProperties({
-  conditions: transformBreakpoints<{ mobile: {}; tablet: {}; desktop: {}, mdMobile: {} }>(
-    breakpoints
-  ),
+  conditions: transformBreakpoints<{
+    mobile: {};
+    tablet: {};
+    desktop: {};
+    mdMobile: {};
+  }>(breakpoints),
   defaultCondition: "mobile",
   dynamicProperties: {
     display: true,
+    backgroundImage: true,
+    backgroundSize: true,
+    backgroundPosition: true,
+    backgroundRepeat: true,
     objectFit: true,
     flex: true,
     flexBasis: true,

diff --git a/src/ui/icon/icon.lite.tsx b/src/ui/icon/icon.lite.tsx
@@ -709,8 +709,8 @@ export default function Icon(props: IconProps) {
           y="0px"
           viewBox="0 0 432 432"
           style={{
-            "enable-background": "new 0 0 432 432",
-            "background-color": "black",
+            enableBackground: "new 0 0 432 432",
+            backgroundColor: "black",
           }}
         >
           <g>