clients: upgrade shadcn components and clean some hard dependencies b…

…etween components

clients/apps/web/package.json

@@ -76,7 +76,7 @@
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.3.5",
     "react-focus-lock": "^2.13.2",
-    "react-hook-form": "^7.53.2",
+    "react-hook-form": "^7.54.2",
     "react-intersection-observer": "^9.13.1",
     "react-is": "^18.3.1",
     "react-timeago": "^7.2.0",
@@ -154,4 +154,4 @@
     "minimumChangeThreshold": 0,
     "showDetails": true
   }
-}
+}

clients/apps/web/src/components/Accounts/AccountCreateModal.tsx

@@ -1,6 +1,7 @@
 import { ACCOUNT_TYPE_DISPLAY_NAMES } from '@/utils/account'
 import { api } from '@/utils/api'
 import { getValidationErrorsMap } from '@/utils/api/errors'
+import { CONFIG } from '@/utils/config'
 import {
   Account,
   AccountType,
@@ -19,6 +20,8 @@ import {
 } from 'polarkit/components/ui/atoms/select'
 import { ChangeEvent, useState } from 'react'
 
+const stripeConnectWhitelist = CONFIG.STRIPE_COUNTRIES_WHITELIST_CSV.split(',')
+
 const AccountCreateModal = ({
   forOrganizationId,
   forUserId,
@@ -178,7 +181,11 @@ const AccountCreateModal = ({
             )}
 
             <div>
-              <CountryPicker onChange={onChangeCountry} value={country} stripeConnectOnly={true} />
+              <CountryPicker
+                onChange={onChangeCountry}
+                value={country}
+                allowedCountries={stripeConnectWhitelist}
+              />
               <p className="dark:text-polar-500 mt-2 text-justify text-xs text-gray-500">
                 If this is a personal account, please select your country of
                 residence. If this is an organization or business, select the

clients/packages/polarkit/package.json

@@ -51,25 +51,26 @@
     "lint": "TIMING=1 eslint \"**/*.ts*\""
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
     "@mui/icons-material": "^6.1.8",
     "@mui/material": "^6.1.8",
     "@polar-sh/sdk": "workspace:*",
     "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-alert-dialog": "^1.1.1",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-popover": "^1.0.5",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.2.2",
-    "@radix-ui/react-toggle": "^1.0.3",
-    "@radix-ui/react-toggle-group": "^1.0.4",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/react-table": "^8.20.5",
     "class-variance-authority": "^0.7.1",
@@ -82,9 +83,10 @@
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.2",
+    "react-hook-form": "^7.54.2",
     "react-timeago": "^7.2.0",
-    "tailwind-merge": "^2.5.5"
+    "tailwind-merge": "^2.5.5",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@storybook/react": "^8.4.5",

clients/packages/polarkit/src/components/ui/alert-dialog.tsx

@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
-import * as React from 'react'
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 
-import { cn } from '@polarkit/lib/utils'
-import { buttonVariants } from './button'
+import { cn } from "@polarkit/lib/utils"
+import { buttonVariants } from "./button"
 
 const AlertDialog = AlertDialogPrimitive.Root
 
@@ -18,8 +18,8 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',
-      className,
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
     )}
     {...props}
     ref={ref}
@@ -36,8 +36,8 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-background 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%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
-        className,
+        "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",
+        className
       )}
       {...props}
     />
@@ -51,35 +51,35 @@ const AlertDialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
-      className,
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
     )}
     {...props}
   />
 )
-AlertDialogHeader.displayName = 'AlertDialogHeader'
+AlertDialogHeader.displayName = "AlertDialogHeader"
 
 const AlertDialogFooter = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      className,
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
     )}
     {...props}
   />
 )
-AlertDialogFooter.displayName = 'AlertDialogFooter'
+AlertDialogFooter.displayName = "AlertDialogFooter"
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold', className)}
+    className={cn("text-lg font-semibold", className)}
     {...props}
   />
 ))
@@ -91,7 +91,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
 ))
@@ -117,9 +117,9 @@ const AlertDialogCancel = React.forwardRef<
   <AlertDialogPrimitive.Cancel
     ref={ref}
     className={cn(
-      buttonVariants({ variant: 'outline' }),
-      'mt-2 sm:mt-0',
-      className,
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
     )}
     {...props}
   />
@@ -128,14 +128,14 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 
 export {
   AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
   AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogOverlay,
-  AlertDialogPortal,
+  AlertDialogFooter,
   AlertDialogTitle,
-  AlertDialogTrigger,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
 }

clients/packages/polarkit/src/components/ui/atoms/CountryPicker.tsx

@@ -1,7 +1,11 @@
 'use client'
 
-import { CONFIG } from '@/utils/config'
-import { countries, getCountryData, getEmojiFlag, TCountryCode } from 'countries-list'
+import {
+  countries,
+  getCountryData,
+  getEmojiFlag,
+  TCountryCode,
+} from 'countries-list'
 
 import {
   Select,
@@ -12,45 +16,46 @@ import {
 } from 'polarkit/components/ui/atoms/select'
 
 const getCountryList = (codes: TCountryCode[]) => {
-  return codes.map((countryCode) => ({
-    code: countryCode,
-    country: getCountryData(countryCode),
-    emoji: getEmojiFlag(countryCode),
-  })).sort((a, b) => a.country.name.localeCompare(b.country.name))
+  return codes
+    .map((countryCode) => ({
+      code: countryCode,
+      country: getCountryData(countryCode),
+      emoji: getEmojiFlag(countryCode),
+    }))
+    .sort((a, b) => a.country.name.localeCompare(b.country.name))
 }
 
 const countryCodes = Object.keys(countries) as TCountryCode[]
-const allCountries = getCountryList(countryCodes.filter((countryCode) => {
-  switch (countryCode.toUpperCase()) {
-    // US Trade Embargos (Stripe can check regions)
-    case 'CU':
-    case 'IR':
-    case 'KP':
-    case 'SY':
-    case 'RU':
-      return false
-    default:
-      return true
-  }
-}))
-
-const stripeConnectWhitelist = CONFIG.STRIPE_COUNTRIES_WHITELIST_CSV.split(
-  ',',
-) as TCountryCode[]
-const stripeConnectCountries = getCountryList(stripeConnectWhitelist)
+const allCountries = getCountryList(
+  countryCodes.filter((countryCode) => {
+    switch (countryCode.toUpperCase()) {
+      // US Trade Embargos (Stripe can check regions)
+      case 'CU':
+      case 'IR':
+      case 'KP':
+      case 'SY':
+      case 'RU':
+        return false
+      default:
+        return true
+    }
+  }),
+)
 
 const CountryPicker = ({
   value,
   onChange,
   autoComplete,
-  stripeConnectOnly = false,
+  allowedCountries,
 }: {
   value?: string
   onChange: (value: string) => void
   autoComplete?: string
-  stripeConnectOnly?: boolean
+  allowedCountries?: string[]
 }) => {
-  const countryMap = stripeConnectOnly ? stripeConnectCountries : allCountries
+  const countryMap = allowedCountries
+    ? getCountryList(allowedCountries as TCountryCode[])
+    : allCountries
   return (
     <Select onValueChange={onChange} value={value} autoComplete={autoComplete}>
       <SelectTrigger>

clients/packages/polarkit/src/components/ui/atoms/TextArea.tsx

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react'
 import { twMerge } from 'tailwind-merge'
-import { Textarea, TextareaProps } from '../textarea'
+import { Textarea } from '../textarea'
 
-export interface TextAreaProps extends TextareaProps {
+export interface TextAreaProps extends React.ComponentProps<'textarea'> {
   resizable?: boolean | undefined
 }
 

clients/packages/polarkit/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@polarkit/lib/utils"
 
 const buttonVariants = cva(
-  "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",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {

clients/packages/polarkit/src/components/ui/calendar.tsx

@@ -36,29 +36,30 @@ function Calendar({
         head_cell:
           "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
         row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-range-start)]:rounded-l-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
           buttonVariants({ variant: "ghost" }),
           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
         ),
-        day_range_start: "day-range-start",
         day_range_end: "day-range-end",
         day_selected:
           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
         day_today: "bg-accent text-accent-foreground",
         day_outside:
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-primary-foreground aria-selected:opacity-30",
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
         day_disabled: "text-muted-foreground opacity-50",
         day_range_middle:
           "aria-selected:bg-accent aria-selected:text-accent-foreground",
         day_hidden: "invisible",
         ...classNames,
       }}
       components={{
-        // @ts-ignore
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        // @ts-ignore
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
       }}
       {...props}
     />