UI Base package (MystenLabs#13024)

## Description Describe the changes or additions included in this PR. ## Test Plan How did you test the new or updated feature? --- If your changes are not user-facing and not a breaking change, you can skip the following section. Otherwise, please indicate what changed, and then add to the Release Notes section as highlighted during the release process. ### Type of Change (Check all that apply) - [ ] protocol change - [ ] user-visible impact - [ ] breaking change for a client SDKs - [ ] breaking change for FNs (FN binary must upgrade) - [ ] breaking change for validators or node operators (must upgrade binaries) - [ ] breaking change for on-chain data layout - [ ] necessitate either a data wipe or data migration ### Release notes
kakudo · Jul 18, 2023 · 993f7c0 · 993f7c0
1 parent a9ba97a
commit 993f7c0
Show file tree

Hide file tree

Showing 23 changed files with 2,709 additions and 1,293 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -12,6 +12,7 @@
     "sui-wallet",
     "sui-explorer",
     "@mysten/core",
+    "@mysten/ui",
     "sui-wallet-adapter-demo",
     "wallet-kit-site",
     "sponsored-transactions"

diff --git a/apps/explorer/package.json b/apps/explorer/package.json
@@ -34,6 +34,7 @@
 		"@mysten/core": "workspace:*",
 		"@mysten/icons": "workspace:*",
 		"@mysten/sui.js": "workspace:*",
+		"@mysten/ui": "workspace:*",
 		"@mysten/wallet-kit": "workspace:*",
 		"@radix-ui/react-collapsible": "^1.0.3",
 		"@radix-ui/react-dropdown-menu": "^2.0.5",
@@ -56,8 +57,8 @@
 		"@visx/shape": "^3.0.0",
 		"@visx/tooltip": "^3.1.2",
 		"bignumber.js": "^9.1.1",
-		"class-variance-authority": "^0.5.2",
-		"clsx": "^1.2.1",
+		"class-variance-authority": "^0.7.0",
+		"clsx": "^2.0.0",
 		"d3-array": "^3.2.3",
 		"date-fns": "^2.29.3",
 		"framer-motion": "^10.11.6",
@@ -80,12 +81,12 @@
 		"@amplitude/ampli": "^1.31.5",
 		"@babel/core": "^7.21.4",
 		"@playwright/test": "^1.32.3",
-		"@storybook/addon-a11y": "7.0.4",
-		"@storybook/addon-essentials": "7.0.4",
-		"@storybook/addons": "7.0.4",
-		"@storybook/react": "7.0.4",
-		"@storybook/react-vite": "7.0.20",
-		"@storybook/theming": "7.0.4",
+		"@storybook/addon-a11y": "^7.0.27",
+		"@storybook/addon-essentials": "^7.0.27",
+		"@storybook/addons": "^7.0.27",
+		"@storybook/react": "^7.0.27",
+		"@storybook/react-vite": "^7.0.27",
+		"@storybook/theming": "^7.0.27",
 		"@testing-library/dom": "^9.2.0",
 		"@testing-library/jest-dom": "^5.16.2",
 		"@testing-library/react": "^14.0.0",
@@ -102,7 +103,7 @@
 		"playwright": "^1.32.3",
 		"postcss": "^8.4.24",
 		"start-server-and-test": "^2.0.0",
-		"storybook": "7.0.4",
+		"storybook": "^7.0.27",
 		"tailwindcss": "^3.3.1",
 		"tsconfig-paths": "^4.2.0",
 		"typescript": "^5.0.4",

diff --git a/apps/explorer/src/components/module/module-functions-interaction/ModuleFunction.tsx b/apps/explorer/src/components/module/module-functions-interaction/ModuleFunction.tsx
@@ -8,6 +8,7 @@ import {
 	getExecutionStatusError,
 	TransactionBlock,
 } from '@mysten/sui.js';
+import { Button } from '@mysten/ui';
 import { useWalletKit, ConnectButton } from '@mysten/wallet-kit';
 import { useMutation } from '@tanstack/react-query';
 import clsx from 'clsx';
@@ -19,7 +20,6 @@ import { FunctionExecutionResult } from './FunctionExecutionResult';
 import { useFunctionParamsDetails } from './useFunctionParamsDetails';
 import { useFunctionTypeArguments } from './useFunctionTypeArguments';
 import { useZodForm } from '~/hooks/useZodForm';
-import { Button } from '~/ui/Button';
 import { DisclosureBox } from '~/ui/DisclosureBox';
 import { Input } from '~/ui/Input';
 

diff --git a/apps/explorer/src/components/validator/StakeButton.tsx b/apps/explorer/src/components/validator/StakeButton.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useFeatureIsOn } from '@growthbook/growthbook-react';
+import { Button } from '@mysten/ui';
 import {
 	ConnectButton,
 	useWalletKit,
@@ -10,8 +11,6 @@ import {
 } from '@mysten/wallet-kit';
 import { useParams } from 'react-router-dom';
 
-import { Button } from '~/ui/Button';
-
 // This is a custom feature supported by the Sui Wallet:
 type StakeInput = { validatorAddress: string };
 type SuiWalletStakeFeature = {
@@ -44,11 +43,14 @@ export function StakeButton() {
 
 	if (!stakeSupportedWallets.length) {
 		return (
-			<Button
-				size="lg"
-				href="https://chrome.google.com/webstore/detail/sui-wallet/opcgpfmipidbgpenhmajoajpbobppdil"
-			>
-				Install Sui Wallet to stake SUI
+			<Button size="lg" asChild>
+				<a
+					href="https://chrome.google.com/webstore/detail/sui-wallet/opcgpfmipidbgpenhmajoajpbobppdil"
+					target="_blank"
+					rel="noreferrer noopener"
+				>
+					Install Sui Wallet to stake SUI
+				</a>
 			</Button>
 		);
 	}

diff --git a/apps/explorer/src/ui/Button.tsx b/apps/explorer/src/ui/Button.tsx
diff --git a/apps/explorer/src/ui/stories/Button.stories.tsx b/apps/explorer/src/ui/stories/Button.stories.tsx
diff --git a/apps/explorer/src/ui/stories/PlayPause.stories.tsx b/apps/explorer/src/ui/stories/PlayPause.stories.tsx
@@ -1,11 +1,11 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { Button } from '@mysten/ui';
 import { type Meta, type StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
 import { PlayPause, type PlayPauseProps } from '../PlayPause';
-import { Button } from '~/ui/Button';
 
 export default {
 	component: PlayPause,

diff --git a/apps/explorer/tailwind.config.ts b/apps/explorer/tailwind.config.ts
@@ -5,5 +5,6 @@ import preset from '@mysten/core/tailwind.config';
 import { type Config } from 'tailwindcss';
 
 export default {
+	content: ['./src/**/*.{js,jsx,ts,tsx}', './node_modules/@mysten/ui/src/**/*.{js,jsx,ts,tsx}'],
 	presets: [preset],
 } satisfies Partial<Config>;
diff --git a/apps/ui/.storybook/main.ts b/apps/ui/.storybook/main.ts
@@ -0,0 +1,23 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	addons: [
+		'@storybook/addon-a11y',
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+	],
+	framework: {
+		name: '@storybook/react-vite',
+		options: {},
+	},
+	docs: {
+		autodocs: 'tag',
+	},
+};
+
+export default config;
diff --git a/apps/ui/.storybook/preview.ts b/apps/ui/.storybook/preview.ts
@@ -0,0 +1,20 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import '../src/styles.css';
+
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/,
+			},
+		},
+	},
+};
+
+export default preview;
diff --git a/apps/ui/package.json b/apps/ui/package.json
@@ -0,0 +1,54 @@
+{
+	"name": "@mysten/ui",
+	"private": true,
+	"sideEffects": false,
+	"main": "./src/index.ts",
+	"author": "Mysten Labs <build@mystenlabs.com>",
+	"repository": {
+		"type": "git",
+		"url": "github.com:MystenLabs/sui.git"
+	},
+	"license": "Apache-2.0",
+	"exports": {
+		".": {
+			"import": "./src/index.ts",
+			"types": "./src/index.ts"
+		},
+		"./css": {
+			"import": "./src/styles.css"
+		}
+	},
+	"scripts": {
+		"prettier:check": "prettier -c --ignore-unknown .",
+		"prettier:fix": "prettier -w --ignore-unknown .",
+		"eslint:check": "eslint --max-warnings=0 .",
+		"eslint:fix": "pnpm run eslint:check --fix",
+		"lint": "pnpm run eslint:check && pnpm run prettier:check",
+		"lint:fix": "pnpm run eslint:fix && pnpm run prettier:fix",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"dependencies": {
+		"@mysten/core": "workspace:*",
+		"@mysten/icons": "workspace:*",
+		"@radix-ui/react-slot": "^1.0.2",
+		"class-variance-authority": "^0.7.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	},
+	"devDependencies": {
+		"@storybook/addon-a11y": "^7.0.27",
+		"@storybook/addon-essentials": "^7.0.27",
+		"@storybook/addon-interactions": "^7.0.27",
+		"@storybook/addon-links": "^7.0.27",
+		"@storybook/blocks": "^7.0.27",
+		"@storybook/react": "^7.0.27",
+		"@storybook/react-vite": "^7.0.27",
+		"@storybook/testing-library": "^0.2.0",
+		"@types/react": "^18.0.35",
+		"prop-types": "^15.8.1",
+		"storybook": "^7.0.27",
+		"tailwindcss": "^3.3.1",
+		"typescript": "^5.0.4"
+	}
+}
diff --git a/apps/ui/postcss.config.js b/apps/ui/postcss.config.js
@@ -0,0 +1,9 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};