feat: consistent stories

covalenthq · Dec 6, 2023 · fa9cf9f · fa9cf9f
1 parent db62c55
commit fa9cf9f
Show file tree

Hide file tree

Showing 32 changed files with 157 additions and 192 deletions.
diff --git a/src/components/Atoms/Address/Address.stories.tsx b/src/components/Atoms/Address/Address.stories.tsx
@@ -1,16 +1,16 @@
 import { type Meta, type StoryObj } from "@storybook/react";
-import { Address } from "./Address";
+import { Address as AddressComponent } from "./Address";
 
-const meta: Meta<typeof Address> = {
+const meta: Meta<typeof AddressComponent> = {
     title: "Atoms/Address",
-    component: Address,
+    component: AddressComponent,
 };
 
 export default meta;
 
-type Story = StoryObj<typeof Address>;
+type Story = StoryObj<typeof AddressComponent>;
 
-export const AddressDisplay: Story = {
+export const Address: Story = {
     args: {
         address: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
     },

diff --git a/src/components/Atoms/Address/Address.tsx b/src/components/Atoms/Address/Address.tsx
@@ -1,5 +1,5 @@
 import { copyToClipboard, truncate } from "@/utils/functions";
-import { IconWrapper } from "@/components/Atoms/IconWrapper/IconWrapper";
+import { IconWrapper } from "@/components/Shared";
 import { type AddressProps } from "@/utils/types/atoms.types";
 
 export const Address: React.FC<AddressProps> = ({ address }) => {

diff --git a/src/components/Atoms/AddressAvatar/AddressAvatar.stories.tsx b/src/components/Atoms/AddressAvatar/AddressAvatar.stories.tsx
@@ -1,65 +1,63 @@
 import { type Meta, type StoryObj } from "@storybook/react";
-import { AddressAvatar } from "./AddressAvatar";
+import { AddressAvatar as AddressAvatarComponent } from "./AddressAvatar";
 import { type AddressAvatarProps } from "@/utils/types/atoms.types";
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
 
-const meta: Meta<typeof AddressAvatar> = {
-    title: "Atoms/AddressAvatar",
-    component: AddressAvatar,
+const meta: Meta<typeof AddressAvatarComponent> = {
+    title: "Atoms/Address Avatar",
+    component: AddressAvatarComponent,
 };
 
 export default meta;
 
-type Story = StoryObj<typeof AddressAvatar>;
+type Story = StoryObj<typeof AddressAvatarComponent>;
 
-const render = ({ size, type, address, rounded }: AddressAvatarProps) => {
-    return (
-        <>
-            <div className="m-1">
-                <AddressAvatar
-                    address={address}
-                    size={size}
-                    type={type}
-                    rounded={rounded}
-                />
-            </div>
-
-            <div className="m-1 mt-20 flex gap-1">
-                <AddressAvatar
-                    address={address}
-                    size={GRK_SIZES.LARGE}
-                    type={"effigy"}
-                />
-                <AddressAvatar
-                    address={address}
-                    size={GRK_SIZES.MEDIUM}
-                    type={"wallet"}
-                />
-                <AddressAvatar
-                    address={address}
-                    size={GRK_SIZES.SMALL}
-                    type={"effigy"}
-                />
-                <AddressAvatar
-                    address={address}
-                    size={GRK_SIZES.EXTRA_SMALL}
-                    type={"fingerprint"}
-                />
-                <AddressAvatar
-                    address={address}
-                    size={GRK_SIZES.EXTRA_EXTRA_SMALL}
-                    type={"wallet"}
-                />
-            </div>
-        </>
-    );
-};
-
-export const AvatarSizes: Story = {
+export const AddressAvatar: Story = {
     args: {
         size: GRK_SIZES.SMALL,
         type: "fingerprint",
         address: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
     },
-    render: render,
+    render: ({ size, type, address, rounded }: AddressAvatarProps) => {
+        return (
+            <>
+                <div className="m-1">
+                    <AddressAvatarComponent
+                        address={address}
+                        size={size}
+                        type={type}
+                        rounded={rounded}
+                    />
+                </div>
+
+                <div className="m-1 mt-20 flex gap-1">
+                    <AddressAvatarComponent
+                        address={address}
+                        size={GRK_SIZES.LARGE}
+                        type={"effigy"}
+                    />
+                    <AddressAvatarComponent
+                        address={address}
+                        size={GRK_SIZES.MEDIUM}
+                        type={"wallet"}
+                    />
+                    <AddressAvatarComponent
+                        address={address}
+                        size={GRK_SIZES.SMALL}
+                        type={"effigy"}
+                    />
+                    <AddressAvatarComponent
+                        address={address}
+                        size={GRK_SIZES.EXTRA_SMALL}
+                        type={"fingerprint"}
+                    />
+                    <AddressAvatarComponent
+                        address={address}
+                        size={GRK_SIZES.EXTRA_EXTRA_SMALL}
+                        type={"wallet"}
+                    />
+                </div>
+            </>
+        );
+    },
 };
diff --git a/src/components/Atoms/NetPriceDelta/NetPriceDelta.tsx b/src/components/Atoms/NetPriceDelta/NetPriceDelta.tsx
diff --git a/src/components/Atoms/TokenAvatar/TokenAvatar.stories.tsx b/src/components/Atoms/TokenAvatar/TokenAvatar.stories.tsx
@@ -1,78 +1,78 @@
 import { type Meta, type StoryObj } from "@storybook/react";
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
-import { TokenAvatar } from "./TokenAvatar";
+import { TokenAvatar as TokenAvatarComponent } from "./TokenAvatar";
 
-const meta: Meta<typeof TokenAvatar> = {
+const meta: Meta<typeof TokenAvatarComponent> = {
     title: "Atoms/TokenAvatar",
-    component: TokenAvatar,
+    component: TokenAvatarComponent,
 };
 
 export default meta;
 
-type Story = StoryObj<typeof TokenAvatar>;
+type Story = StoryObj<typeof TokenAvatarComponent>;
 
-export const TokenAvatarDisplay: Story = {
+export const TokenAvatar: Story = {
     args: {
         size: GRK_SIZES.SMALL,
     },
     render: () => {
         return (
             <>
                 <div className="m-1">
-                    <TokenAvatar
+                    <TokenAvatarComponent
                         token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.MEDIUM}
                     />
                 </div>
                 <div className="m-1 mt-20 flex gap-1">
-                    <TokenAvatar
+                    <TokenAvatarComponent
                         token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.EXTRA_EXTRA_SMALL}
                     />
 
-                    <TokenAvatar
+                    <TokenAvatarComponent
                         token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.EXTRA_SMALL}
                     />
-                    <TokenAvatar
+                    <TokenAvatarComponent
                         token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.SMALL}
                     />
-                    <TokenAvatar
+                    <TokenAvatarComponent
                         token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.MEDIUM}
                     />
-                    <TokenAvatar
+                    <TokenAvatarComponent
                         token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.LARGE}
                     />
                 </div>
                 <div className="m-1 mt-20 flex gap-3">
-                    <TokenAvatar
+                    <TokenAvatarComponent
                         token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.EXTRA_SMALL}
                         chain_color={"grey"}
                         sub_url={
                             "https://www.datocms-assets.com/86369/1699425239-uniswap.jpg"
                         }
                     />
-                    <TokenAvatar
+                    <TokenAvatarComponent
                         token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.SMALL}
                         chain_color={"grey"}
                         sub_url={
                             "https://www.datocms-assets.com/86369/1699425239-uniswap.jpg"
                         }
                     />
-                    <TokenAvatar
+                    <TokenAvatarComponent
                         token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.MEDIUM}
                         chain_color={"grey"}
                         sub_url={
                             "https://www.datocms-assets.com/86369/1699425239-uniswap.jpg"
                         }
                     />
-                    <TokenAvatar
+                    <TokenAvatarComponent
                         token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.LARGE}
                         chain_color={"grey"}

diff --git a/...countCardView/AccountCardView.stories.tsx → ...cules/AccountCard/AccountCard.stories.tsx b/...countCardView/AccountCardView.stories.tsx → ...cules/AccountCard/AccountCard.stories.tsx
@@ -1,11 +1,11 @@
 import { type Meta, type StoryObj } from "@storybook/react";
-import { AccountCardView } from "./AccountCardView";
+import { AccountCard as AccountCardComponent } from "./AccountCard";
 
-type Story = StoryObj<typeof AccountCardView>;
+type Story = StoryObj<typeof AccountCardComponent>;
 
-const meta: Meta<typeof AccountCardView> = {
+const meta: Meta<typeof AccountCardComponent> = {
     title: "Molecules",
-    component: AccountCardView,
+    component: AccountCardComponent,
 };
 
 export default meta;

diff --git a/...cules/AccountCardView/AccountCardView.tsx → ...nts/Molecules/AccountCard/AccountCard.tsx b/...cules/AccountCardView/AccountCardView.tsx → ...nts/Molecules/AccountCard/AccountCard.tsx
@@ -9,11 +9,11 @@ import QRCode from "react-qr-code";
 import { useState } from "react";
 import { useToast } from "../../../utils/hooks/use-toast";
 import { AddressAvatar } from "../../Atoms/AddressAvatar/AddressAvatar";
-import { IconWrapper } from "../../Atoms/IconWrapper/IconWrapper";
+import { IconWrapper } from "../../Shared";
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
-import { type AccountCardViewProps } from "@/utils/types/molecules.types";
+import { type AccountCardProps } from "@/utils/types/molecules.types";
 
-export const AccountCardView: React.FC<AccountCardViewProps> = ({
+export const AccountCard: React.FC<AccountCardProps> = ({
     address,
     type = "effigy",
     name = "Unnamed Wallet",

diff --git a/...orPriceView/NFTFloorPriceView.stories.tsx → ...s/NFTFloorPrice/NFTFloorPrice.stories.tsx b/...orPriceView/NFTFloorPriceView.stories.tsx → ...s/NFTFloorPrice/NFTFloorPrice.stories.tsx
@@ -1,12 +1,12 @@
 import { type Meta, type StoryObj } from "@storybook/react";
-import { NFTFloorPriceView } from "./NFTFloorPriceView";
+import { NFTFloorPrice as NFTFloorPriceComponent } from "./NFTFloorPrice";
 import { NFT_COLLECTIONS } from "@/utils/constants/shared.constants";
 
-type Story = StoryObj<typeof NFTFloorPriceView>;
+type Story = StoryObj<typeof NFTFloorPriceComponent>;
 
-const meta: Meta<typeof NFTFloorPriceView> = {
+const meta: Meta<typeof NFTFloorPriceComponent> = {
     title: "Molecules/NFTs",
-    component: NFTFloorPriceView,
+    component: NFTFloorPriceComponent,
 };
 
 export default meta;

diff --git a/...s/NFTFloorPriceView/NFTFloorPriceView.tsx → ...ules/NFTs/NFTFloorPrice/NFTFloorPrice.tsx b/...s/NFTFloorPriceView/NFTFloorPriceView.tsx → ...ules/NFTs/NFTFloorPrice/NFTFloorPrice.tsx
@@ -16,9 +16,9 @@ import {
 } from "@/utils/constants/shared.constants";
 import { CHART_COLORS } from "@/utils/constants/shared.constants";
 import { useCovalent } from "@/utils/store/Covalent";
-import { type NFTFloorPriceViewProps } from "@/utils/types/molecules.types";
+import { type NFTFloorPriceProps } from "@/utils/types/molecules.types";
 
-export const NFTFloorPriceView: React.FC<NFTFloorPriceViewProps> = ({
+export const NFTFloorPrice: React.FC<NFTFloorPriceProps> = ({
     chain_name,
     collection_address,
 }) => {

diff --git a/...esCountView/NFTSalesCountView.stories.tsx → ...s/NFTSalesCount/NFTSalesCount.stories.tsx b/...esCountView/NFTSalesCountView.stories.tsx → ...s/NFTSalesCount/NFTSalesCount.stories.tsx
@@ -1,12 +1,12 @@
 import { type Meta, type StoryObj } from "@storybook/react";
-import { NFTSalesCountView } from "./NFTSalesCountView";
+import { NFTSalesCount as NFTSalesCountComponent } from "./NFTSalesCount";
 import { NFT_COLLECTIONS } from "@/utils/constants/shared.constants";
 
-type Story = StoryObj<typeof NFTSalesCountView>;
+type Story = StoryObj<typeof NFTSalesCountComponent>;
 
-const meta: Meta<typeof NFTSalesCountView> = {
+const meta: Meta<typeof NFTSalesCountComponent> = {
     title: "Molecules/NFTs",
-    component: NFTSalesCountView,
+    component: NFTSalesCountComponent,
 };
 
 export default meta;

diff --git a/...s/NFTSalesCountView/NFTSalesCountView.tsx → ...ules/NFTs/NFTSalesCount/NFTSalesCount.tsx b/...s/NFTSalesCountView/NFTSalesCountView.tsx → ...ules/NFTs/NFTSalesCount/NFTSalesCount.tsx
@@ -8,9 +8,9 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { GRK_SIZES, PERIOD } from "@/utils/constants/shared.constants";
 import { CHART_COLORS } from "@/utils/constants/shared.constants";
 import { useCovalent } from "@/utils/store/Covalent";
-import { type NFTSalesCountViewProps } from "@/utils/types/molecules.types";
+import { type NFTSalesCountProps } from "@/utils/types/molecules.types";
 
-export const NFTSalesCountView: React.FC<NFTSalesCountViewProps> = ({
+export const NFTSalesCount: React.FC<NFTSalesCountProps> = ({
     chain_name,
     collection_address,
 }) => {

diff --git a/...s/NFTVolumeView/NFTVolumeView.stories.tsx → ...ules/NFTs/NFTVolume/NFTVolume.stories.tsx b/...s/NFTVolumeView/NFTVolumeView.stories.tsx → ...ules/NFTs/NFTVolume/NFTVolume.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from "@storybook/react";
-import { NFTVolumeView } from "./NFTVolumeView";
+import { NFTVolume as NFTVolumeView } from "./NFTVolume";
 import { NFT_COLLECTIONS } from "@/utils/constants/shared.constants";
 
 type Story = StoryObj<typeof NFTVolumeView>;

diff --git a/...ules/NFTs/NFTVolumeView/NFTVolumeView.tsx → ...ts/Molecules/NFTs/NFTVolume/NFTVolume.tsx b/...ules/NFTs/NFTVolumeView/NFTVolumeView.tsx → ...ts/Molecules/NFTs/NFTVolume/NFTVolume.tsx
@@ -12,10 +12,10 @@ import {
 } from "@/utils/constants/shared.constants";
 import { CHART_COLORS } from "@/utils/constants/shared.constants";
 import { useCovalent } from "@/utils/store/Covalent";
-import { type NFTVolumeViewProps } from "@/utils/types/molecules.types";
+import { type NFTVolumeProps } from "@/utils/types/molecules.types";
 import { prettifyCurrency } from "@covalenthq/client-sdk";
 
-export const NFTVolumeView: React.FC<NFTVolumeViewProps> = ({
+export const NFTVolume: React.FC<NFTVolumeProps> = ({
     chain_name,
     collection_address,
 }) => {