From e61b1b908b84273e2985820942fef16e0bfc2988 Mon Sep 17 00:00:00 2001 From: Ha Gia Phat Date: Wed, 30 Oct 2024 09:07:14 +0700 Subject: [PATCH] fix: improve vue connect modal (#210) * chore: upgrade storybook * fix(vue): style bug with mitosis --- packages/react/.storybook/preview.tsx | 3 + packages/react/package.json | 24 +- .../react/stories/ConnectModal.stories.tsx | 23 +- packages/vue/package.json | 22 +- packages/vue/scaffolds/modal/modal.css.ts | 18 +- packages/vue/scaffolds/modal/modal.vue | 28 +- packages/vue/stories/ConnectModal.stories.ts | 43 +- .../vue/stories/ConnectModalHead.stories.ts | 1 + pnpm-lock.yaml | 34052 +++++----------- .../connect-modal-head.lite.tsx | 25 +- src/ui/connect-modal/connect-modal.lite.tsx | 12 +- 11 files changed, 11412 insertions(+), 22839 deletions(-) diff --git a/packages/react/.storybook/preview.tsx b/packages/react/.storybook/preview.tsx index cf02f57f..20e2e018 100644 --- a/packages/react/.storybook/preview.tsx +++ b/packages/react/.storybook/preview.tsx @@ -18,6 +18,7 @@ const preview: Preview = { viewports: INITIAL_VIEWPORTS, }, }, + decorators: [ (story) => ( @@ -28,6 +29,8 @@ const preview: Preview = { ), ], + + tags: ["autodocs"] }; export default preview; diff --git a/packages/react/package.json b/packages/react/package.json index 778b6471..f698e864 100644 --- 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" -} \ No newline at end of file +} diff --git a/packages/react/stories/ConnectModal.stories.tsx b/packages/react/stories/ConnectModal.stories.tsx index 686bd5ce..af801b4e 100644 --- a/packages/react/stories/ConnectModal.stories.tsx +++ b/packages/react/stories/ConnectModal.stories.tsx @@ -22,16 +22,21 @@ export default meta; type Story = StoryObj; +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 index 4dddd8e6..c90f46f7 100644 --- 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,7 +108,7 @@ "@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", @@ -116,7 +116,7 @@ "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 index 3012d64d..60a11d86 100644 --- 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 index 363a96ac..ff49972d 100644 --- a/packages/vue/scaffolds/modal/modal.vue +++ b/packages/vue/scaffolds/modal/modal.vue @@ -133,26 +133,34 @@ defineExpose({ isOpen }); ]" >
- + > + +
diff --git a/packages/vue/stories/ConnectModal.stories.ts b/packages/vue/stories/ConnectModal.stories.ts index 365e9550..81632440 100644 --- 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; -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 = { >