move component library into project

.eslintrc.js

@@ -2,22 +2,17 @@ module.exports = {
   env: {
     node: true,
     jest: true,
-    browser: true,
+    browser: true
   },
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaVersion: 12,
     sourceType: "module",
     ecmaFeatures: {
-      jsx: true,
-    },
+      jsx: true
+    }
   },
-  extends: [
-    "plugin:prettier/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-  ],
+  extends: ["plugin:prettier/recommended", "plugin:react-hooks/recommended", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:storybook/recommended"],
   plugins: ["@typescript-eslint", "simple-import-sort", "unused-imports", "no-relative-import-paths"],
   rules: {
     "prettier/prettier": ["error"],
@@ -40,19 +35,17 @@ module.exports = {
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/ban-ts-ignore": "off",
-    "no-relative-import-paths/no-relative-import-paths": ["warn"],
+    "no-relative-import-paths/no-relative-import-paths": ["warn"]
   },
   ignorePatterns: ["build", "node_modules"],
   globals: {
     React: true,
-    JSX: true,
+    JSX: true
   },
-  overrides: [
-    {
-      files: ["**/*.js", "**/*.jsx"],
-      rules: {
-        "no-undef": "error",
-      },
-    },
-  ],
-};
+  overrides: [{
+    files: ["**/*.js", "**/*.jsx"],
+    rules: {
+      "no-undef": "error"
+    }
+  }]
+};

.storybook/main.ts

@@ -0,0 +1,13 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,48 @@
+import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+
+import { BrowserRouter } from "react-router-dom";
+import { dark as darkTheme } from "../src/themes/dark.js";
+import { light as lightTheme } from "../src/themes/light.js";
+import "../src/style.scss";
+import React from "react";
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+export const globalTypes = {
+  theme: {
+    name: "Theme",
+    description: "Global theme for components",
+    defaultValue: "dark",
+    toolbar: {
+      icon: "circlehollow",
+      // Array of plain string values or MenuItem shape (see below)
+      items: ["light", "dark"],
+      // Property that specifies if the name of the item will be displayed
+      showName: true,
+    },
+  },
+};
+
+export const decorators = [
+  (Story, options) => {
+    const { globals } = options;
+    const theme = globals.theme === "dark" ? darkTheme : lightTheme;
+    return (
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <BrowserRouter>
+            <CssBaseline />
+            <Story />
+          </BrowserRouter>
+        </ThemeProvider>
+      </StyledEngineProvider>
+    );
+  },
+];

index.d.ts

@@ -3,3 +3,69 @@ declare module "*.png";
 declare module "*.svg";
 
 export default global;
+
+declare module "@mui/material/styles" {
+  interface ThemeOptions {
+    colors: {
+      paper: {
+        background: React.CSSProperties["background"];
+        card: React.CSSProperties["color"];
+        cardHover: React.CSSProperties["color"];
+      };
+      feedback: {
+        success: React.CSSProperties["color"];
+        userFeedback: React.CSSProperties["color"];
+        error: React.CSSProperties["color"];
+        warning: React.CSSProperties["color"];
+        pnlGain: React.CSSProperties["color"];
+      };
+      gray: {
+        700: React.CSSProperties["color"];
+        600: React.CSSProperties["color"];
+        500: React.CSSProperties["color"];
+        90: React.CSSProperties["color"];
+        40: React.CSSProperties["color"];
+        10: React.CSSProperties["color"];
+      };
+      primary: {
+        300: React.CSSProperties["color"];
+        100: React.CSSProperties["color"];
+      };
+      special: {
+        olyZaps: React.CSSProperties["color"];
+      };
+    };
+    special: any;
+  }
+  interface Theme {
+    colors: {
+      paper: {
+        background: React.CSSProperties["background"];
+        card: React.CSSProperties["color"];
+        cardHover: React.CSSProperties["color"];
+      };
+      feedback: {
+        success: React.CSSProperties["color"];
+        userFeedback: React.CSSProperties["color"];
+        error: React.CSSProperties["color"];
+        warning: React.CSSProperties["color"];
+        pnlGain: React.CSSProperties["color"];
+      };
+      gray: {
+        700: React.CSSProperties["color"];
+        600: React.CSSProperties["color"];
+        500: React.CSSProperties["color"];
+        90: React.CSSProperties["color"];
+        40: React.CSSProperties["color"];
+        10: React.CSSProperties["color"];
+      };
+      primary: {
+        300: React.CSSProperties["color"];
+        100: React.CSSProperties["color"];
+      };
+      special: {
+        olyZaps: React.CSSProperties["color"];
+      };
+    };
+  }
+}

package.json

@@ -34,9 +34,9 @@
     "@mui/material": "^5.15.1",
     "@mui/system": "^5.15.1",
     "@mui/x-data-grid": "^6.18.5",
-    "@olympusdao/component-library": "3.1.7",
     "@olympusdao/treasury-subgraph-client": "^1.1.0",
     "@rainbow-me/rainbowkit": "^0.12.18",
+    "@react-spring/web": "^9.7.2",
     "@reduxjs/toolkit": "^1.9.3",
     "@tanstack/react-query": "^4.2.3",
     "@types/recharts": "^1.8.29",
@@ -73,6 +73,13 @@
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@ethersproject/abi": "^5.7.0",
     "@ethersproject/bytes": "^5.6.1",
+    "@storybook/addon-essentials": "^7.0.12",
+    "@storybook/addon-interactions": "^7.0.12",
+    "@storybook/addon-links": "^7.0.12",
+    "@storybook/blocks": "^7.0.12",
+    "@storybook/react": "^7.0.12",
+    "@storybook/react-vite": "^7.0.12",
+    "@storybook/testing-library": "^0.0.14-next.2",
     "@redocly/cli": "^1.6.0",
     "@tanstack/react-query-devtools": "^4.19.1",
     "@testing-library/dom": "^9.3.3",
@@ -109,6 +116,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-storybook": "^0.6.12",
     "eslint-plugin-unused-imports": "^3.0.0",
     "fast-check": "^3.15.0",
     "happy-dom": "^12.10.3",
@@ -128,6 +136,8 @@
     "rollup-plugin-polyfill-node": "^0.13.0",
     "sass": "^1.69.5",
     "shelljs": "^0.8.5",
+    "storybook": "^7.0.12",
+    "storybook-addon-designs": "^6.3.1",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "type-graphql": "^1.1.1",
@@ -154,6 +164,8 @@
     "typechain:build": "yarn run typechain --target ethers-v5 --out-dir src/typechain src/abi/*.json src/abi/**/*.json",
     "postinstall": "yarn typechain:build",
     "prepare": "husky install",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "codegen:bundle": "redocly bundle https://raw.githubusercontent.com/OlympusDAO/cooler-loans-api/main/openapi/openapi.yml -o tmp/openapi.yaml",
     "codegen": "yarn codegen:bundle && orval && yarn lint:fix"
   },

src/components/CallToAction/CallToAction.tsx

@@ -1,7 +1,7 @@
 import "src/components/CallToAction/CallToAction.scss";
 
 import { Box, Typography } from "@mui/material";
-import { Paper, PrimaryButton, TertiaryButton } from "@olympusdao/component-library";
+import { Paper, PrimaryButton, TertiaryButton } from "src/components/library";
 
 export const LearnMoreButton = () => (
   <TertiaryButton href="https://docs.olympusdao.finance/main/basics/migration" style={{ marginRight: "10.5px" }}>

src/components/Chart/ExpandedChart.tsx

@@ -1,8 +1,8 @@
 import { Grid, Link, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/material";
-import { Modal, Tooltip } from "@olympusdao/component-library";
 import React, { useEffect } from "react";
 import { ResponsiveContainer } from "recharts";
 import GraphLogo from "src/assets/icons/graph-grt-logo.svg?react";
+import { Modal, Tooltip } from "src/components/library";
 
 const ExpandedChart = ({
   open,

src/components/ConnectButton/ConnectButton.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, SvgIcon, useMediaQuery, useTheme } from "@mui/material";
-import { Icon, OHMButtonProps, PrimaryButton } from "@olympusdao/component-library";
 import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit";
 import WalletIcon from "src/assets/icons/wallet.svg?react";
+import { Icon, OHMButtonProps, PrimaryButton } from "src/components/library";
 import { trackGAEvent } from "src/helpers/analytics/trackGAEvent";
 
 const fireAnalyticsEvent = () => {

src/components/DevFaucet/index.tsx

@@ -1,6 +1,6 @@
 import { Box, FormControl, MenuItem, Select, Typography } from "@mui/material";
-import { SecondaryButton } from "@olympusdao/component-library";
 import { useState } from "react";
+import { SecondaryButton } from "src/components/library";
 import { useFaucet } from "src/components/TopBar/Wallet/hooks/useFaucet";
 
 export const DevFaucet = () => {

src/components/Messages/Messages.tsx

@@ -1,6 +1,6 @@
 import Alert from "@mui/material/Alert";
-import { Icon } from "@olympusdao/component-library";
 import { resolveValue, toast as hotToast } from "react-hot-toast";
+import { Icon } from "src/components/library";
 
 // A component that displays error messages
 const Messages = ({ toast }: { toast: any }) => {

src/components/Migration/MigrationModal.tsx

@@ -2,8 +2,8 @@ import "src/components/Migration/MigrationModal.scss";
 
 import { Box, Button, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { InfoTooltip, Modal, Tab, Tabs } from "@olympusdao/component-library";
 import { useDispatch } from "react-redux";
+import { InfoTooltip, Modal, Tab, Tabs } from "src/components/library";
 import { trim } from "src/helpers";
 import { useMigrationData } from "src/helpers/Migration";
 import { useAppSelector } from "src/hooks";
@@ -112,8 +112,8 @@ function MigrationModal({ open, handleClose }: { open: boolean; handleClose: any
           isMigrationComplete || !oldAssetsDetected
             ? `Migration complete`
             : isAllApproved
-            ? `You are now ready to migrate`
-            : `You have assets ready to migrate to v2`
+              ? `You are now ready to migrate`
+              : `You have assets ready to migrate to v2`
         }
       >
         <>

src/components/Migration/MigrationModalSingle.tsx

@@ -2,8 +2,8 @@ import "src/components/Migration/MigrationModal.scss";
 
 import { Box, Button, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { InfoTooltip, Modal, Tab, Tabs } from "@olympusdao/component-library";
 import { useDispatch } from "react-redux";
+import { InfoTooltip, Modal, Tab, Tabs } from "src/components/library";
 import { trim } from "src/helpers";
 import { useMigrationData } from "src/helpers/Migration";
 import { changeMigrationApproval, migrateSingle, TokenType } from "src/slices/MigrateThunk";

src/components/Sidebar/NavContent.tsx

@@ -1,11 +1,10 @@
 import { Box, Link, Paper, SvgIcon, Typography, useTheme } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { Icon } from "@olympusdao/component-library";
 import React from "react";
 import { NavLink } from "react-router-dom";
 import lendAndBorrowIcon from "src/assets/icons/lendAndBorrow.svg?react";
 import OlympusIcon from "src/assets/icons/olympus-nav-header.svg?react";
-import NavItem from "src/components/library/NavItem";
+import { Icon, NavItem } from "src/components/library";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
 import { BondDiscount } from "src/views/Bond/components/BondDiscount";

src/components/StagingNotification.test.tsx

@@ -9,7 +9,7 @@ vi.mock("@mui/material", () => ({
   useMediaQuery: vi.fn(),
 }));
 
-vi.mock("@olympusdao/component-library", () => ({
+vi.mock("src/components/library", () => ({
   WarningNotification: (props: any) => <div>{props.children}</div>,
 }));
 

src/components/StagingNotification.tsx

@@ -1,6 +1,6 @@
 import { Box, useMediaQuery } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { WarningNotification } from "@olympusdao/component-library";
+import { WarningNotification } from "src/components/library";
 import { Environment } from "src/helpers/environment/Environment/Environment";
 
 const PREFIX = "StagingNotification";

src/components/TokenAllowanceGuard/TokenAllowanceGuard.tsx

@@ -1,9 +1,9 @@
 import { Box, Grid, Typography } from "@mui/material";
 import { Skeleton } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { PrimaryButton } from "@olympusdao/component-library";
 import { ethers } from "ethers";
 import React, { ReactNode } from "react";
+import { PrimaryButton } from "src/components/library";
 import { useApproveToken } from "src/components/TokenAllowanceGuard/hooks/useApproveToken";
 import { AddressMap } from "src/constants/addresses";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";

src/components/TopBar/ThemeSwitch.tsx

@@ -1,6 +1,6 @@
 import { Box } from "@mui/material";
 import ToggleButton from "@mui/material/ToggleButton";
-import { Icon } from "@olympusdao/component-library";
+import { Icon } from "src/components/library";
 
 interface IThemeSwitcherProps {
   theme: string;

src/components/WalletBalance/WalletBalance.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { Icon } from "@olympusdao/component-library";
 import { FC, useState } from "react";
+import { Icon } from "src/components/library";
 
 const PREFIX = "WalletBalance";