Merge pull request #135 from cosmology-tech/fix/improve-8

Fix/improve 8

lerna.json

@@ -8,7 +8,7 @@
   "registry": "https://registry.npmjs.org",
   "command": {
     "create": {
-      "homepage": "https://github.com/cosmology-tech/ui-kit",
+      "homepage": "https://github.com/cosmology-tech/interchain-ui",
       "license": "SEE LICENSE IN LICENSE",
       "access": "restricted"
     },

package.json

@@ -70,6 +70,7 @@
     "gluegun": "^5.1.2",
     "husky": "^8.0.3",
     "lerna": "^6.6.1",
+    "lerna-changelog": "^2.2.0",
     "listr2": "^5.0.8",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
@@ -108,5 +109,16 @@
     "packages": [
       "packages/*"
     ]
+  },
+  "changelog": {
+    "labels": {
+      "feat": "New Feature",
+      "fix": "Bug Fix",
+      "doc": "Documentation",
+      "refactor": "Refactor",
+      "breaking": "Breaking Change",
+      "enhancement": "Enhancement",
+      "chore": "Chore"
+    }
   }
 }

packages/react/package.json

@@ -104,13 +104,13 @@
     "@parcel/reporter-bundle-analyzer": "^2.10.2",
     "@parcel/transformer-typescript-tsc": "^2.10.2",
     "@parcel/transformer-typescript-types": "^2.10.2",
-    "@storybook/addon-essentials": "^7.6.3",
-    "@storybook/addon-interactions": "^7.6.3",
-    "@storybook/addon-links": "^7.6.3",
-    "@storybook/addon-viewport": "^7.6.3",
-    "@storybook/blocks": "^7.6.3",
-    "@storybook/react": "^7.6.3",
-    "@storybook/react-vite": "^7.6.3",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addon-viewport": "^7.6.4",
+    "@storybook/blocks": "^7.6.4",
+    "@storybook/react": "^7.6.4",
+    "@storybook/react-vite": "^7.6.4",
     "@storybook/testing-library": "^0.2.2",
     "@types/react": "^18.2.34",
     "@vanilla-extract/parcel-transformer": "^1.0.0",
@@ -123,7 +123,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.6.3",
+    "storybook": "^7.6.4",
     "type-fest": "^4.2.0",
     "vite-plugin-replace": "^0.1.1",
     "vite-tsconfig-paths": "^4.2.1"

packages/react/stories/governance/GovernanceProposals.stories.tsx

@@ -79,14 +79,79 @@ const proposalListData: GovernanceProposalListData = [
   },
 ];
 
+const pendingProposalListData: GovernanceProposalListData = [
+  {
+    title: "January",
+    proposals: [
+      {
+        status: "passed",
+        title: "Signaling Proposal: Ion 🧿 DAO & Treasury",
+        id: "#00121",
+        endTime: "2022-01-11 10:48",
+        votes: {
+          yes: 650,
+          no: 200,
+          abstain: 400,
+          noWithVeto: 34,
+        },
+      },
+    ],
+  },
+  {
+    title: "February",
+    proposals: [
+      {
+        status: "pending",
+        title: "Signaling Proposal: Ion 🧿 DAO & Treasury",
+        id: "#00120",
+        endTime: "2022-01-11 10:48",
+        votes: {
+          yes: 500,
+          no: 678,
+          abstain: 45,
+          noWithVeto: 34,
+        },
+      },
+      {
+        status: "passed",
+        title: "Signaling Proposal: Ion 🧿 DAO & Treasury",
+        id: "#00121",
+        endTime: "2022-01-11 10:48",
+        votes: {
+          yes: 650,
+          no: 200,
+          abstain: 400,
+          noWithVeto: 34,
+        },
+      },
+      {
+        status: "rejected",
+        title: "Signaling Proposal: Ion 🧿 DAO & Treasury",
+        id: "#00122",
+        endTime: "2022-01-11 10:48",
+        votes: {
+          yes: 245,
+          no: 777,
+          abstain: 100,
+          noWithVeto: 560,
+        },
+      },
+    ],
+  },
+];
+
 const PrimaryExample = () => {
+  const [tabId, setTabId] = React.useState(0);
+
   const proposalsRender = React.useMemo(
     () => (
       <Box py="$10">
-        <GovernanceProposalList list={proposalListData} />
+        <GovernanceProposalList
+          list={tabId === 1 ? pendingProposalListData : proposalListData}
+        />
       </Box>
     ),
-    [proposalListData]
+    [proposalListData, pendingProposalListData, tabId]
   );
 
   const tabs = React.useMemo(
@@ -108,7 +173,7 @@ const PrimaryExample = () => {
         content: proposalsRender,
       },
     ],
-    []
+    [proposalsRender]
   );
 
   return (
@@ -124,7 +189,13 @@ const PrimaryExample = () => {
         Proposals
       </Text>
 
-      <Tabs tabs={tabs} />
+      <Tabs
+        tabs={tabs}
+        onActiveTabChange={(id) => {
+          console.log(id);
+          setTabId(id);
+        }}
+      />
     </Box>
   );
 };

packages/react/stories/nft/NftMint.stories.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import NftMint from "../../src/ui/nft-mint";
+import bipz1 from "../../static/nft/bipz-1.jpeg";
 
 const meta: Meta<typeof NftMint> = {
   component: NftMint,
@@ -27,8 +28,7 @@ export const Primary: Story = {
     available: 2948,
     priceDisplayAmount: 64,
     limited: 50,
-    imgSrc:
-      "https://res.cloudinary.com/stargaze/image/upload/f_auto,w_700/ighabxq1rjqr5xblblue",
+    imgSrc: bipz1,
     pricePerToken: 0.01063943,
     tokenName: "STARS",
   },

packages/react/stories/nft/NftProfile.stories.tsx

@@ -2,6 +2,15 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import NftProfile from "../../src/ui/nft-profile";
+
+// Assets
+import badkid1 from "../../static/nft/badkid-3543.jpeg";
+import badkid2 from "../../static/nft/badkid-6674.jpeg";
+import badkid3 from "../../static/nft/badkid-8051.jpeg";
+import badkid4 from "../../static/nft/badkid-8052.jpeg";
+import badkid5 from "../../static/nft/badkid-9168.jpeg";
+import badkid6 from "../../static/nft/badkid-9486.jpeg";
+
 import type { NftProfileCardProps } from "../../src/ui/nft-profile-card/nft-profile-card.types";
 
 const meta: Meta<typeof NftProfile> = {
@@ -17,102 +26,8 @@ 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",
+    imgSrc: badkid1,
+    name: "Bad Kid #3543",
     priceItems: [
       {
         label: "Highest offer",
@@ -125,9 +40,8 @@ const list2: NftProfileCardProps[] = [
     ],
   },
   {
-    imgSrc:
-      "https://ipfs-gw.stargaze-apis.com/ipfs/bafybeibl5rrhfola4m2gxyzfji63fxyboeic36pjxjmrnmgablqhy3mnvy/6.png",
-    name: "Bad Kid #9502",
+    imgSrc: badkid2,
+    name: "Bad Kid #6674",
     priceItems: [
       {
         label: "Highest offer",
@@ -140,9 +54,8 @@ const list2: NftProfileCardProps[] = [
     ],
   },
   {
-    imgSrc:
-      "https://ipfs-gw.stargaze-apis.com/ipfs/bafybeicf6q3az6bk4fyilhgk7ytgkctxjb3jsm4542cxtb6r4xsb35zoni/images/608.png",
-    name: "Bad Kid #9505",
+    imgSrc: badkid3,
+    name: "Bad Kid #8051",
     priceItems: [
       {
         label: "Highest offer",
@@ -155,9 +68,8 @@ const list2: NftProfileCardProps[] = [
     ],
   },
   {
-    imgSrc:
-      "https://ipfs-gw.stargaze-apis.com/ipfs/bafybeicf6q3az6bk4fyilhgk7ytgkctxjb3jsm4542cxtb6r4xsb35zoni/images/444.png",
-    name: "Bad Kid #9506",
+    imgSrc: badkid4,
+    name: "Bad Kid #8052",
     priceItems: [
       {
         label: "Highest offer",
@@ -170,9 +82,8 @@ const list2: NftProfileCardProps[] = [
     ],
   },
   {
-    imgSrc:
-      "https://ipfs-gw.stargaze-apis.com/ipfs/bafybeicf6q3az6bk4fyilhgk7ytgkctxjb3jsm4542cxtb6r4xsb35zoni/images/668.png",
-    name: "Bad Kid #9508",
+    imgSrc: badkid5,
+    name: "Bad Kid #9168",
     priceItems: [
       {
         label: "Highest offer",
@@ -185,9 +96,8 @@ const list2: NftProfileCardProps[] = [
     ],
   },
   {
-    imgSrc:
-      "https://res.cloudinary.com/stargaze/image/upload/w_700/ndkbjpwtgys09w1xxwny.jpg",
-    name: "Bad Kid #9509",
+    imgSrc: badkid6,
+    name: "Bad Kid #9486",
     priceItems: [
       {
         label: "Highest offer",
@@ -226,6 +136,6 @@ export const Primary: Story = {
     onView() {
       console.log("onView");
     },
-    list: list2.slice(0, 1),
+    list: list1,
   },
 };