fix: improve vue connect modal (#210)

* chore: upgrade storybook * fix(vue): style bug with mitosis
hyperweb-io · Oct 30, 2024 · e61b1b9 · e61b1b9
1 parent 68b182b
commit e61b1b9
Show file tree

Hide file tree

Showing 11 changed files with 11,412 additions and 22,839 deletions.
diff --git a/packages/react/.storybook/preview.tsx b/packages/react/.storybook/preview.tsx
@@ -18,6 +18,7 @@ const preview: Preview = {
       viewports: INITIAL_VIEWPORTS,
     },
   },
+
   decorators: [
     (story) => (
       <WithThemeDecorator>
@@ -28,6 +29,8 @@ const preview: Preview = {
       </WithThemeDecorator>
     ),
   ],
+
+  tags: ["autodocs"]
 };
 
 export default preview;
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -128,7 +128,7 @@
     "@chain-registry/osmosis": "^1.62.59",
     "@chain-registry/types": "^0.18.19",
     "@chain-registry/utils": "^1.46.59",
-    "@chromatic-com/storybook": "^2.0.2",
+    "@chromatic-com/storybook": "^3.1.0",
     "@parcel/config-default": "^2.12.0",
     "@parcel/core": "^2.12.0",
     "@parcel/optimizer-swc": "^2.12.0",
@@ -142,14 +142,14 @@
     "@parcel/transformer-typescript-types": "^2.12.0",
     "@react-types/combobox": "^3.12.1",
     "@react-types/shared": "^3.25.0",
-    "@storybook/addon-essentials": "^8.3.0",
-    "@storybook/addon-interactions": "^8.3.0",
-    "@storybook/addon-links": "^8.3.0",
-    "@storybook/addon-viewport": "^8.3.0",
-    "@storybook/blocks": "^8.3.0",
-    "@storybook/react": "^8.3.0",
-    "@storybook/react-vite": "^8.3.0",
-    "@storybook/test": "^8.3.0",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-viewport": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-vite": "^8.3.6",
+    "@storybook/test": "^8.3.6",
     "@types/react": "latest",
     "@vanilla-extract/parcel-transformer": "^1.0.9",
     "@vanilla-extract/vite-plugin": "^4.0.15",
@@ -161,10 +161,10 @@
     "parcel-optimizer-unlink-css": "workspace:*",
     "parcel-resolver-ts-base-url": "^1.3.1",
     "prop-types": "^15.8.1",
-    "storybook": "^8.3.0",
-    "storybook-react-rsbuild": "^0.1.0",
+    "storybook": "^8.3.6",
+    "storybook-react-rsbuild": "^0.1.2",
     "vite": "^5.4.2",
     "vite-plugin-replace": "^0.1.1"
   },
   "gitHead": "05adf69046d07d6f764b96cf54cbaa492de06d95"
-}
+}
diff --git a/packages/react/stories/ConnectModal.stories.tsx b/packages/react/stories/ConnectModal.stories.tsx
@@ -22,16 +22,21 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const LIMIT_WALLETS = 4;
+
 function convert(ws: typeof wallets) {
-  return ws.map((wallet) => ({
-    ...wallet,
-    logo: wallet.extends
-      ? WalletPluginSystem[wallet.extends].logo
-      : wallet.logo,
-    badge: wallet.extends ? WalletPluginSystem[wallet.extends].text : undefined,
-    btmLogo: wallet.extends ? wallet.logo : undefined,
-  }));
-  // .slice(0, 2);
+  return ws
+    .map((wallet) => ({
+      ...wallet,
+      logo: wallet.extends
+        ? WalletPluginSystem[wallet.extends].logo
+        : wallet.logo,
+      badge: wallet.extends
+        ? WalletPluginSystem[wallet.extends].text
+        : undefined,
+      btmLogo: wallet.extends ? wallet.logo : undefined,
+    }))
+    .slice(0, LIMIT_WALLETS);
 }
 
 export const Primary: Story = {

diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -89,15 +89,15 @@
   },
   "devDependencies": {
     "@chain-registry/client": "^1.48.59",
-    "@chromatic-com/storybook": "^2.0.2",
-    "@storybook/addon-essentials": "^8.3.0",
-    "@storybook/addon-interactions": "^8.3.0",
-    "@storybook/addon-links": "^8.3.0",
-    "@storybook/addon-onboarding": "^8.3.0",
-    "@storybook/blocks": "^8.3.0",
-    "@storybook/test": "^8.3.0",
-    "@storybook/vue3": "^8.3.0",
-    "@storybook/vue3-vite": "^8.3.0",
+    "@chromatic-com/storybook": "^3.1.0",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-onboarding": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/test": "^8.3.6",
+    "@storybook/vue3": "^8.3.6",
+    "@storybook/vue3-vite": "^8.3.6",
     "@types/animejs": "^3.1.12",
     "@types/lodash": "^4.17.7",
     "@types/node": "^20.16.2",
@@ -108,15 +108,15 @@
     "@vue/compiler-sfc": "^3.4.38",
     "@vue/eslint-config-prettier": "^9.0.0",
     "eslint": "^8.57.0",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.10.1",
     "eslint-plugin-vue": "^9.27.0",
     "flexsearch": "^0.7.43",
     "globby": "^14.0.2",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "shiki-es": "^0.14.0",
-    "storybook": "^8.3.0",
+    "storybook": "^8.3.6",
     "tslib": "^2.7.0",
     "typescript": "^5.5.4",
     "vite": "^5.4.2",

diff --git a/packages/vue/scaffolds/modal/modal.css.ts b/packages/vue/scaffolds/modal/modal.css.ts
@@ -75,8 +75,10 @@ export const modalPanel = style({
   boxShadow:
     "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
   overflow: "hidden",
-  display: "inline-block", // Change to inline-block
-  minWidth: "280px", // Add a minimum width
+  display: "inline-block",
+  minWidth: "280px",
+  width: "fit-content",
+  margin: "0 auto",
 });
 
 // Define the CSS variables
@@ -90,8 +92,8 @@ const modalContentBase = style({
   height: "auto",
   flexDirection: "column",
   borderRadius: themeVars.radii.xl,
-  width: "auto", // Change to auto
-  maxWidth: "100%", // Add maxWidth
+  width: "auto",
+  maxWidth: "100%",
 });
 
 export const modalContent = styleVariants({
@@ -122,8 +124,8 @@ export const modalAnimateContainer = style({
 });
 
 export const modalChildren = style({
-  width: "100%", // Change to 100%
-  minWidth: "280px", // Add minWidth
+  width: "100%",
+  minWidth: "280px",
   boxSizing: "border-box",
   paddingLeft: themeVars.space[7],
   paddingRight: themeVars.space[7],
@@ -133,10 +135,6 @@ export const modalChildren = style({
 
 export const modalHeader = style({
   position: "relative",
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  marginBottom: "1rem",
 });
 
 export const modalCloseButton = style({

diff --git a/packages/vue/scaffolds/modal/modal.vue b/packages/vue/scaffolds/modal/modal.vue
@@ -133,26 +133,34 @@ defineExpose({ isOpen });
               ]"
             >
               <div
-                :class="[styles.modalContent, contentClassName, themeClass]"
+                :class="[
+                  styles.modalContent[theme],
+                  contentClassName,
+                  themeClass,
+                ]"
                 data-modal-part="content"
               >
                 <div :class="[styles.modalHeader, themeClass]">
-                  <component
-                    :is="header"
+                  <slot
+                    name="header"
                     :closeButtonProps="{
                       onClick: onCloseButtonClick,
                       class: [styles.modalCloseButton, themeClass],
                     }"
-                  />
+                  >
+                    <component
+                      v-if="header"
+                      :is="header"
+                      :closeButtonProps="{
+                        onClick: onCloseButtonClick,
+                        class: [styles.modalCloseButton, themeClass],
+                      }"
+                    />
+                  </slot>
                 </div>
 
                 <div
-                  :class="[
-                    styles.modalBody,
-                    styles.modalChildren,
-                    childrenClassName,
-                    themeClass,
-                  ]"
+                  :class="[styles.modalChildren, childrenClassName, themeClass]"
                   data-modal-part="children"
                 >
                   <slot></slot>

diff --git a/packages/vue/stories/ConnectModal.stories.ts b/packages/vue/stories/ConnectModal.stories.ts
@@ -1,4 +1,4 @@
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import Modal from "../src/ui/modal/modal.vue";
 import Button from "../src/ui/button/button.vue";
@@ -23,15 +23,22 @@ export default meta;
 
 type Story = StoryObj<typeof Modal>;
 
-function convert(ws: typeof wallets) {
-  return ws.map((wallet) => ({
-    ...wallet,
-    logo: wallet.extends
-      ? WalletPluginSystem[wallet.extends].logo
-      : wallet.logo,
-    badge: wallet.extends ? WalletPluginSystem[wallet.extends].text : undefined,
-    btmLogo: wallet.extends ? wallet.logo : undefined,
-  }));
+const INITIAL_LIMIT = 4;
+const FINAL_LIMIT = 2;
+
+function convert(ws: typeof wallets, limit: number) {
+  return ws
+    .map((wallet) => ({
+      ...wallet,
+      logo: wallet.extends
+        ? WalletPluginSystem[wallet.extends].logo
+        : wallet.logo,
+      badge: wallet.extends
+        ? WalletPluginSystem[wallet.extends].text
+        : undefined,
+      btmLogo: wallet.extends ? wallet.logo : undefined,
+    }))
+    .slice(0, limit);
 }
 
 export const Primary: Story = {
@@ -47,6 +54,14 @@ export const Primary: Story = {
     setup() {
       const isOpen = ref(false);
       const hasBack = ref(false);
+      const walletLimit = ref(INITIAL_LIMIT);
+
+      onMounted(() => {
+        setTimeout(() => {
+          walletLimit.value = FINAL_LIMIT;
+        }, 1000);
+      });
+
       const onClose = () => {
         isOpen.value = false;
         hasBack.value = false;
@@ -57,7 +72,7 @@ export const Primary: Story = {
       const onNext = () => {
         hasBack.value = true;
       };
-      const convertedWallets = convert(wallets);
+      const convertedWallets = convert(wallets, walletLimit.value);
 
       return {
         args,
@@ -68,6 +83,9 @@ export const Primary: Story = {
         onNext,
         convertedWallets,
         qrCodeProps,
+        closeButtonProps: {
+          onClick: onClose,
+        },
       };
     },
     template: `
@@ -79,7 +97,8 @@ export const Primary: Story = {
         >
           <template #header="{ closeButtonProps }">
             <ConnectModalHead
-              title="Connect Wallet"
+              id="connect-modal-head-title"
+              title="Select your wallet"
               :hasCloseButton="true"
               :hasBackButton="hasBack"
               @back="onBack"

diff --git a/packages/vue/stories/ConnectModalHead.stories.ts b/packages/vue/stories/ConnectModalHead.stories.ts
@@ -19,6 +19,7 @@ type Story = StoryObj<typeof ConnectModalHead>;
 export const Primary: Story = {
   args: {
     title: "Connect Wallet",
+    id: "connect-modal-head-title",
     hasCloseButton: true,
     hasBackButton: false,
   },