Configure Storybook for Orderbook Component Testing

apps/hestia/.gitignore

@@ -35,3 +35,5 @@ yarn-error.log*
 next-env.d.ts
 
 !/apps/hestia/public/datafeeds/udf/dist/
+
+*storybook.log

apps/hestia/.storybook/main.ts

@@ -0,0 +1,32 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: [
+    "../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)", 
+    "../src/components/**/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../src/app/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../src/app/**/*.stories.@(js|jsx|mjs|ts|tsx)" 
+  ],
+  addons: [
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions")
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {},
+  },
+  staticDirs: ["../public"],
+};
+export default config;

apps/hestia/.storybook/manager.ts

@@ -0,0 +1,3 @@
+import { addons } from '@storybook/manager-api';
+import theme from "./theme"
+addons.setConfig({ theme });

apps/hestia/.storybook/preview.tsx

@@ -0,0 +1,33 @@
+import type { Preview } from "@storybook/react";
+import "@polkadex/ux/dist/index.css";
+import "../src/styles/globals.scss";
+import { Roboto } from "next/font/google";
+import * as React from "react";
+
+const font = Roboto({
+  weight: ["100", "300", "400", "500", "700", "900"],
+  subsets: ["latin"]
+});
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  },
+  decorators: [
+    (Story) => {
+      return (
+        <div className={font.className}>
+          <Story />
+        </div>
+      );
+    }
+  ]
+};
+
+export default preview;

apps/hestia/.storybook/theme.ts

@@ -0,0 +1,23 @@
+import { create } from '@storybook/theming/create';
+//@ts-ignore
+import brandImage from "../public/logo.svg"
+
+export default create({
+  base: 'dark',
+  colorPrimary: '#8B909A',
+  colorSecondary: '#E6007A',
+  appBg: '#06070A',
+  appPreviewBg: '#06070A',
+  appContentBg: '#131419',
+  appBorderRadius: 4,
+  barTextColor: '#fff',
+  barSelectedColor: '#fff',
+  barBg: '#1F2229',
+  inputBg: '#2E303C',
+  inputTextColor: '#fff',
+  inputBorderRadius: 4,
+
+  brandTitle:'Polkadex Orderbook',
+  brandImage,
+  brandUrl:'https://orderbook.polkadex.trade/',
+})

apps/hestia/package.json

@@ -9,7 +9,9 @@
     "generate": "chmod +x copy_charting_library_files.sh && ./copy_charting_library_files.sh",
     "start": "next start",
     "lint": "next lint --fix",
-    "clear": "rm -rf .next"
+    "clear": "rm -rf .next",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@cedelabs/widgets-universal": "^1.2.0",
@@ -22,25 +24,24 @@
     "@polkadex/local-wallets": "^2.3.0",
     "@polkadex/numericals": "^0.4.0",
     "@polkadex/polkadex-api": "^3.6.2",
+    "@polkadex/react-providers": "^2.2.1",
     "@polkadex/subscan": "^1.1.61",
     "@polkadex/thea": "^6.1.1",
-    "@polkadex/ux": "^6.26.0",
-    "@polkadex/react-providers": "^2.2.1",
     "@polkadex/types": "^1.2.2",
+    "@polkadex/ux": "^6.26.0",
     "@polkadot-cloud/assets": "^0.3.4",
     "@remixicon/react": "^4.2.0",
     "@sentry/nextjs": "^7.99.0",
     "@talismn/connect-wallets": "^1.2.3",
     "@tanstack/react-query": "^4.35.0",
     "@tanstack/react-table": "^8.10.1",
-    "autoprefixer": "10.4.16",
     "classnames": "^2.3.2",
     "formik": "^2.4.5",
     "friendly-username-generator": "^2.0.4",
     "next": "^14.0.1",
     "next-i18next": "^15.2.0",
     "next-pwa": "^5.6.0",
-    "postcss": "8.4.31",
+    "postcss": "^8.4.39",
     "react": "^18.2.0",
     "react-csv-downloader": "^3.1.0",
     "react-date-range": "^1.4.0",
@@ -53,17 +54,30 @@
     "sharp": "^0.33.2",
     "sonner": "^1.4.0",
     "tailwind-merge": "^2.2.0",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",
     "usehooks-ts": "^2.9.1",
     "yup": "^1.3.2"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
+    "@storybook/addon-essentials": "^8.2.1",
+    "@storybook/addon-interactions": "^8.2.1",
+    "@storybook/addon-links": "^8.2.1",
+    "@storybook/addon-onboarding": "^8.2.1",
+    "@storybook/blocks": "^8.2.1",
+    "@storybook/manager-api": "^8.2.1",
+    "@storybook/nextjs": "^8.2.1",
+    "@storybook/react": "^8.2.1",
+    "@storybook/test": "^8.2.1",
+    "@storybook/theming": "^8.2.1",
     "@types/node": "^20.8.3",
     "@types/react": "^18.2.48",
     "@types/react-date-range": "^1.4.9",
     "@types/react-dom": "^18.2.18",
     "@types/react-query": "^1.2.9",
+    "autoprefixer": "^10.4.19",
+    "storybook": "^8.2.1",
     "typescript": "^5.0.4"
   }
 }