feat: hooks + consistent stories

covalenthq · Dec 5, 2023 · 4d245d3 · 4d245d3
1 parent db62c55
commit 4d245d3
Show file tree

Hide file tree

Showing 32 changed files with 704 additions and 673 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,7 +1,10 @@
 import "../src/tailwind-output.css";
 import { themes } from "@storybook/theming";
-import { CovalentProvider } from "../src/utils/store/Covalent";
-import { ChainsProvider } from "../src/utils/store/Chains";
+import {
+    CovalentProvider,
+    ChainsProvider,
+    ThemeProvider,
+} from "../src/utils/store";
 // import { useDarkMode } from 'storybook-dark-mode' // uncomment out this one line for dark mode
 
 export const parameters = {
@@ -58,7 +61,9 @@ const preview: Preview = {
                 apikey={import.meta.env.STORYBOOK_COVALENT_API_KEY}
             >
                 <ChainsProvider>
-                    <Story />
+                    <ThemeProvider theme={{}}>
+                        <Story />
+                    </ThemeProvider>
                 </ChainsProvider>
             </CovalentProvider>
         ),

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 { AddressView } from "./AddressView";
 
-const meta: Meta<typeof Address> = {
+const meta: Meta<typeof AddressView> = {
     title: "Atoms/Address",
-    component: Address,
+    component: AddressView,
 };
 
 export default meta;
 
-type Story = StoryObj<typeof Address>;
+type Story = StoryObj<typeof AddressView>;
 
-export const AddressDisplay: Story = {
+export const Address: Story = {
     args: {
         address: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
     },

diff --git a/src/components/Atoms/Address/Address.tsx → src/components/Atoms/Address/AddressView.tsx b/src/components/Atoms/Address/Address.tsx → src/components/Atoms/Address/AddressView.tsx
@@ -1,8 +1,8 @@
 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 }) => {
+export const AddressView: React.FC<AddressProps> = ({ address }) => {
     return (
         <div className="flex items-center gap-x-2">
             <p>{truncate(address)}</p>

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 { AddressAvatarView } from "./AddressAvatarView";
 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 AddressAvatarView> = {
+    title: "Atoms/Address Avatar",
+    component: AddressAvatarView,
 };
 
 export default meta;
 
-type Story = StoryObj<typeof AddressAvatar>;
+type Story = StoryObj<typeof AddressAvatarView>;
 
-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">
+                    <AddressAvatarView
+                        address={address}
+                        size={size}
+                        type={type}
+                        rounded={rounded}
+                    />
+                </div>
+
+                <div className="m-1 mt-20 flex gap-1">
+                    <AddressAvatarView
+                        address={address}
+                        size={GRK_SIZES.LARGE}
+                        type={"effigy"}
+                    />
+                    <AddressAvatarView
+                        address={address}
+                        size={GRK_SIZES.MEDIUM}
+                        type={"wallet"}
+                    />
+                    <AddressAvatarView
+                        address={address}
+                        size={GRK_SIZES.SMALL}
+                        type={"effigy"}
+                    />
+                    <AddressAvatarView
+                        address={address}
+                        size={GRK_SIZES.EXTRA_SMALL}
+                        type={"fingerprint"}
+                    />
+                    <AddressAvatarView
+                        address={address}
+                        size={GRK_SIZES.EXTRA_EXTRA_SMALL}
+                        type={"wallet"}
+                    />
+                </div>
+            </>
+        );
+    },
 };
diff --git a/...nts/Atoms/AddressAvatar/AddressAvatar.tsx → ...Atoms/AddressAvatar/AddressAvatarView.tsx b/...nts/Atoms/AddressAvatar/AddressAvatar.tsx → ...Atoms/AddressAvatar/AddressAvatarView.tsx
@@ -6,7 +6,7 @@ import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 import { type AddressAvatarProps } from "@/utils/types/atoms.types";
 import { useMemo } from "react";
 
-export const AddressAvatar: React.FC<AddressAvatarProps> = ({
+export const AddressAvatarView: React.FC<AddressAvatarProps> = ({
     address,
     type,
     size,

diff --git a/src/components/Atoms/NetPriceDelta/NetPriceDelta.tsx b/src/components/Atoms/NetPriceDelta/NetPriceDelta.tsx