Merge pull request #126 from cosmology-tech/fix/improve-sb-load

Fix/improve sb load
hyperweb-io · Nov 20, 2023 · 9a29841 · 9a29841
2 parents 8a35563 + 386d1a9
commit 9a29841
Show file tree

Hide file tree

Showing 8 changed files with 210 additions and 52 deletions.
diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "@types/react": "^18.2.21",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
-    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/dynamic": "^2.1.0",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vue/babel-preset-app": "^5.0.8",
     "autoprefixer": "^10.4.14",
@@ -95,9 +95,9 @@
     "@types/react-dom": "^18.2.7"
   },
   "dependencies": {
-    "@vanilla-extract/css": "^1.12.0",
+    "@vanilla-extract/css": "^1.14.0",
     "@vanilla-extract/css-utils": "^0.1.3",
-    "@vanilla-extract/recipes": "^0.4.0",
+    "@vanilla-extract/recipes": "^0.5.1",
     "animejs": "^3.2.1",
     "clsx": "^1.2.1",
     "immer": "^9.0.21",

diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts
@@ -1,18 +1,16 @@
 import { dirname, join } from "path";
+import { mergeConfig, splitVendorChunkPlugin } from "vite";
+import react from "@vitejs/plugin-react";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(jsx|ts|tsx)",
-    "../stories/**/*mdx",
-    "../stories/**/*.stories.@(jsx|ts|tsx)",
-  ],
+  stories: ["../stories/**/*mdx", "../stories/**/*.stories.@(jsx|ts|tsx)"],
   addons: [
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@storybook/addon-interactions"),
-    getAbsolutePath("@storybook/addon-viewport")
+    getAbsolutePath("@storybook/addon-viewport"),
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),
@@ -21,6 +19,32 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
+  core: {
+    builder: "@storybook/builder-vite", // 👈 The builder enabled here.
+  },
+  async viteFinal(config, { configType }) {
+    // return the customized config
+    if (configType === "PRODUCTION") {
+      return mergeConfig(config, {
+        // customize the Vite config here
+        plugins: [react(), splitVendorChunkPlugin(), vanillaExtractPlugin()],
+        build: {
+          rollupOptions: {
+            output: {
+              manualChunks(id: string) {
+                // creating a chunk for mock data
+                if (id.includes("stub/")) {
+                  return "stub";
+                }
+              },
+            },
+          },
+        },
+      });
+    }
+
+    return config;
+  },
 };
 
 export default config;

diff --git a/packages/react/.storybook/preview.tsx b/packages/react/.storybook/preview.tsx
@@ -1,8 +1,9 @@
 import React from "react";
 import type { Preview } from "@storybook/react";
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
 import WithThemeDecorator from "./WithThemeDecorator";
 import { I18nProvider } from "../src";
+import "./story-global.css";
 
 const preview: Preview = {
   parameters: {
@@ -20,9 +21,9 @@ const preview: Preview = {
   decorators: [
     (story) => (
       <WithThemeDecorator>
-        <I18nProvider locale="en-US" currency="USD" >
-        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
-        {story()}
+        <I18nProvider locale="en-US" currency="USD">
+          {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+          {story()}
         </I18nProvider>
       </WithThemeDecorator>
     ),

diff --git a/packages/react/.storybook/story-global.css b/packages/react/.storybook/story-global.css
@@ -0,0 +1,68 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/*
+  2. Remove default margin
+*/
+* {
+  margin: 0;
+}
+
+/*
+  Typographic tweaks!
+  3. Add accessible line-height
+  4. Improve text rendering
+*/
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+/*
+  5. Improve media defaults
+*/
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/*
+  6. Remove built-in form typography styles
+*/
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/*
+  7. Avoid text overflows
+*/
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+/*
+  8. Create a root stacking context
+*/
+#root,
+#__next {
+  isolation: isolate;
+}
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -54,10 +54,9 @@
     "@floating-ui/react": "^0.26.0",
     "@formkit/auto-animate": "1.0.0-beta.6",
     "@react-aria/utils": "^3.21.1",
-    "@vanilla-extract/css": "^1.12.0",
-    "@vanilla-extract/css-utils": "^0.1.3",
-    "@vanilla-extract/dynamic": "^2.0.3",
-    "@vanilla-extract/recipes": "^0.4.0",
+    "@vanilla-extract/css": "^1.14.0",
+    "@vanilla-extract/dynamic": "^2.1.0",
+    "@vanilla-extract/recipes": "^0.5.1",
     "animejs": "^3.2.1",
     "bignumber.js": "^9.1.1",
     "client-only": "^0.0.1",
@@ -110,12 +109,13 @@
     "@storybook/addon-links": "^7.5.3",
     "@storybook/addon-viewport": "^7.5.3",
     "@storybook/blocks": "^7.5.3",
+    "@storybook/builder-vite": "^7.5.3",
     "@storybook/react": "^7.5.3",
     "@storybook/react-vite": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
     "@types/react": "^18.2.34",
     "@vanilla-extract/parcel-transformer": "^1.0.0",
-    "@vanilla-extract/vite-plugin": "^3.8.2",
+    "@vanilla-extract/vite-plugin": "^3.9.2",
     "@vitejs/plugin-react": "^4.1.0",
     "chain-registry": "^1.19.0",
     "parcel": "^2.10.2",

diff --git a/packages/react/stories/asset/AssetListHeader.stories.tsx b/packages/react/stories/asset/AssetListHeader.stories.tsx
@@ -13,11 +13,35 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+export const SingleChainHeader: Story = {
   args: {
-    isSingle: false,
-    total: "144.23",
-    totalOnAll: "732.16",
+    title: "Your asset",
+    singleChainHeader: {
+      label: "Total on Osmosis",
+      value: "144.23",
+    },
+    onDeposit: () => {
+      console.log("onDeposit");
+    },
+    onWithdraw: () => {
+      console.log("onWithdraw");
+    },
+  },
+};
+
+export const MultiChainHeader: Story = {
+  args: {
+    title: "Your assets",
+    multiChainHeader: [
+      {
+        label: "Total on Osmosis",
+        value: "144.23",
+      },
+      {
+        label: "Total across all chains",
+        value: "732.16",
+      },
+    ],
     onDeposit: () => {
       console.log("onDeposit");
     },

diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -18,9 +18,9 @@
   "dependencies": {
     "@fastify/deepmerge": "^1.3.0",
     "@formkit/auto-animate": "1.0.0-beta.6",
-    "@vanilla-extract/css": "^1.12.0",
-    "@vanilla-extract/dynamic": "^2.0.3",
-    "@vanilla-extract/recipes": "^0.4.0",
+    "@vanilla-extract/css": "^1.14.0",
+    "@vanilla-extract/dynamic": "^2.1.0",
+    "@vanilla-extract/recipes": "^0.5.1",
     "animejs": "^3.2.1",
     "copy-to-clipboard": "^3.3.3",
     "immer": "^9.0.19",