[multisig-toolkit] shadcn update (MystenLabs#12642)

## Description New shadcn-ui CLI dropped, which makes it a lot easier to run. ## 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 · Jun 30, 2023 · 2104fb8 · 2104fb8
1 parent 4001d64
commit 2104fb8
Show file tree

Hide file tree

Showing 19 changed files with 313 additions and 358 deletions.
diff --git a/dapps/multisig-toolkit/components.json b/dapps/multisig-toolkit/components.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "default",
+	"rsc": false,
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "src/index.css",
+		"baseColor": "slate",
+		"cssVariables": true
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils"
+	}
+}
diff --git a/dapps/multisig-toolkit/package.json b/dapps/multisig-toolkit/package.json
@@ -12,7 +12,8 @@
 		"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"
+		"lint:fix": "pnpm run eslint:fix && pnpm run prettier:fix",
+		"shadcnui": "pnpm dlx shadcn-ui@latest"
 	},
 	"dependencies": {
 		"@fontsource/inter": "^4.5.15",

diff --git a/dapps/multisig-toolkit/src/components/header.tsx b/dapps/multisig-toolkit/src/components/header.tsx
@@ -13,8 +13,8 @@ export function Header() {
 	return (
 		<div className="border-b px-8 py-4 flex items-center justify-between">
 			<div className="flex items-center gap-2">
-				<KeyRound strokeWidth={2} size={18} className="text-white/80" />
-				<h1 className="font-bold text-lg bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
+				<KeyRound strokeWidth={2} size={18} className="text-primary/80" />
+				<h1 className="font-bold text-lg bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/60">
 					Sui MultiSig Toolkit
 				</h1>
 			</div>

diff --git a/dapps/multisig-toolkit/src/components/ui/alert.tsx b/dapps/multisig-toolkit/src/components/ui/alert.tsx
@@ -1,19 +1,18 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
-
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '@/lib/utils';
 
 const alertVariants = cva(
-	'relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11',
+	'relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
 	{
 		variants: {
 			variant: {
 				default: 'bg-background text-foreground',
 				destructive:
-					'text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive',
+					'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
 			},
 		},
 		defaultVariants: {

diff --git a/dapps/multisig-toolkit/src/components/ui/button.tsx b/dapps/multisig-toolkit/src/components/ui/button.tsx
@@ -1,28 +1,28 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
-
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
+	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
 	{
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
 				destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-				outline: 'border border-input hover:bg-accent hover:text-accent-foreground',
+				outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
 				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
 				ghost: 'hover:bg-accent hover:text-accent-foreground',
-				link: 'underline-offset-4 hover:underline text-primary',
+				link: 'text-primary underline-offset-4 hover:underline',
 			},
 			size: {
-				default: 'h-10 py-2 px-4',
-				sm: 'h-9 px-3 rounded-md',
-				lg: 'h-11 px-8 rounded-md',
+				default: 'h-10 px-4 py-2',
+				sm: 'h-9 rounded-md px-3',
+				lg: 'h-11 rounded-md px-8',
+				icon: 'h-10 w-10',
 			},
 		},
 		defaultVariants: {

diff --git a/dapps/multisig-toolkit/src/components/ui/card.tsx b/dapps/multisig-toolkit/src/components/ui/card.tsx
@@ -1,6 +1,5 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
-
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
@@ -28,7 +27,7 @@ const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HT
 		// eslint-disable-next-line jsx-a11y/heading-has-content
 		<h3
 			ref={ref}
-			className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+			className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
 			{...props}
 		/>
 	),

diff --git a/dapps/multisig-toolkit/src/components/ui/command.tsx b/dapps/multisig-toolkit/src/components/ui/command.tsx
@@ -1,6 +1,5 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
-
 import * as React from 'react';
 import { DialogProps } from '@radix-ui/react-dialog';
 import { Command as CommandPrimitive } from 'cmdk';
@@ -29,7 +28,7 @@ interface CommandDialogProps extends DialogProps {}
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 	return (
 		<Dialog {...props}>
-			<DialogContent className="overflow-hidden p-0 shadow-2xl">
+			<DialogContent className="overflow-hidden p-0 shadow-lg">
 				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 					{children}
 				</Command>

diff --git a/dapps/multisig-toolkit/src/components/ui/dialog.tsx b/dapps/multisig-toolkit/src/components/ui/dialog.tsx
@@ -1,6 +1,5 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
-
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
@@ -11,12 +10,8 @@ const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = ({ className, children, ...props }: DialogPrimitive.DialogPortalProps) => (
-	<DialogPrimitive.Portal className={cn(className)} {...props}>
-		<div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
-			{children}
-		</div>
-	</DialogPrimitive.Portal>
+const DialogPortal = ({ className, ...props }: DialogPrimitive.DialogPortalProps) => (
+	<DialogPrimitive.Portal className={cn(className)} {...props} />
 );
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
 
@@ -27,7 +22,7 @@ const DialogOverlay = React.forwardRef<
 	<DialogPrimitive.Overlay
 		ref={ref}
 		className={cn(
-			'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
+			'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
 			className,
 		)}
 		{...props}
@@ -44,7 +39,7 @@ const DialogContent = React.forwardRef<
 		<DialogPrimitive.Content
 			ref={ref}
 			className={cn(
-				'fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0',
+				'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
 				className,
 			)}
 			{...props}

diff --git a/dapps/multisig-toolkit/src/components/ui/form.tsx b/dapps/multisig-toolkit/src/components/ui/form.tsx
@@ -1,6 +1,5 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
-
 import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';

diff --git a/dapps/multisig-toolkit/src/components/ui/navigation-menu.tsx b/dapps/multisig-toolkit/src/components/ui/navigation-menu.tsx
diff --git a/dapps/multisig-toolkit/src/components/ui/popover.tsx b/dapps/multisig-toolkit/src/components/ui/popover.tsx
@@ -1,6 +1,5 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
-
 import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
@@ -20,7 +19,7 @@ const PopoverContent = React.forwardRef<
 			align={align}
 			sideOffset={sideOffset}
 			className={cn(
-				'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+				'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
 				className,
 			)}
 			{...props}

diff --git a/dapps/multisig-toolkit/src/components/ui/tabs.tsx b/dapps/multisig-toolkit/src/components/ui/tabs.tsx
@@ -1,6 +1,5 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
-
 import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 

diff --git a/dapps/multisig-toolkit/src/components/ui/textarea.tsx b/dapps/multisig-toolkit/src/components/ui/textarea.tsx
@@ -1,6 +1,5 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
-
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';