From d85a892d6a6ad11d04742cb1a22a3cab7b58207a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Voron?= Date: Thu, 16 Jan 2025 15:27:48 +0100 Subject: [PATCH] clients: upgrade shadcn components and clean some hard dependencies between components --- clients/apps/web/package.json | 4 +- .../Accounts/AccountCreateModal.tsx | 9 +- clients/packages/polarkit/package.json | 14 +- .../src/components/ui/alert-dialog.tsx | 54 ++-- .../src/components/ui/atoms/CountryPicker.tsx | 61 ++-- .../src/components/ui/atoms/TextArea.tsx | 4 +- .../polarkit/src/components/ui/button.tsx | 2 +- .../polarkit/src/components/ui/calendar.tsx | 15 +- .../polarkit/src/components/ui/card.tsx | 20 +- .../polarkit/src/components/ui/command.tsx | 7 +- .../src/components/ui/dropdown-menu.tsx | 8 +- .../polarkit/src/components/ui/form.tsx | 4 +- .../polarkit/src/components/ui/input.tsx | 7 +- .../polarkit/src/components/ui/table.tsx | 9 +- .../polarkit/src/components/ui/tabs.tsx | 4 +- .../polarkit/src/components/ui/textarea.tsx | 32 +-- .../src/components/ui/toggle-group.tsx | 4 +- .../polarkit/src/components/ui/toggle.tsx | 8 +- clients/pnpm-lock.yaml | 261 +++++++++--------- 19 files changed, 263 insertions(+), 264 deletions(-) diff --git a/clients/apps/web/package.json b/clients/apps/web/package.json index 4187d0f66a..d42a6a078e 100644 --- a/clients/apps/web/package.json +++ b/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 } -} +} \ No newline at end of file diff --git a/clients/apps/web/src/components/Accounts/AccountCreateModal.tsx b/clients/apps/web/src/components/Accounts/AccountCreateModal.tsx index 901be5ce90..06cf2e2f2f 100644 --- a/clients/apps/web/src/components/Accounts/AccountCreateModal.tsx +++ b/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 = ({ )}
- +

If this is a personal account, please select your country of residence. If this is an organization or business, select the diff --git a/clients/packages/polarkit/package.json b/clients/packages/polarkit/package.json index b807a24237..254d780e43 100644 --- a/clients/packages/polarkit/package.json +++ b/clients/packages/polarkit/package.json @@ -51,16 +51,17 @@ "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", @@ -68,8 +69,8 @@ "@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", diff --git a/clients/packages/polarkit/src/components/ui/alert-dialog.tsx b/clients/packages/polarkit/src/components/ui/alert-dialog.tsx index cdc6b280f7..9dd47580fc 100644 --- a/clients/packages/polarkit/src/components/ui/alert-dialog.tsx +++ b/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) => ( @@ -51,13 +51,13 @@ const AlertDialogHeader = ({ }: React.HTMLAttributes) => (

) -AlertDialogHeader.displayName = 'AlertDialogHeader' +AlertDialogHeader.displayName = "AlertDialogHeader" const AlertDialogFooter = ({ className, @@ -65,13 +65,13 @@ const AlertDialogFooter = ({ }: React.HTMLAttributes) => (
) -AlertDialogFooter.displayName = 'AlertDialogFooter' +AlertDialogFooter.displayName = "AlertDialogFooter" const AlertDialogTitle = React.forwardRef< React.ElementRef, @@ -79,7 +79,7 @@ const AlertDialogTitle = React.forwardRef< >(({ className, ...props }, ref) => ( )) @@ -91,7 +91,7 @@ const AlertDialogDescription = React.forwardRef< >(({ className, ...props }, ref) => ( )) @@ -117,9 +117,9 @@ const AlertDialogCancel = React.forwardRef< @@ -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, } diff --git a/clients/packages/polarkit/src/components/ui/atoms/CountryPicker.tsx b/clients/packages/polarkit/src/components/ui/atoms/CountryPicker.tsx index 87869aecab..3d31aa6a91 100644 --- a/clients/packages/polarkit/src/components/ui/atoms/CountryPicker.tsx +++ b/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 ( >(({ className, ...props }, ref) => ( - + )) TableHeader.displayName = "TableHeader" @@ -42,7 +42,10 @@ const TableFooter = React.forwardRef< >(({ className, ...props }, ref) => ( tr]:last:border-b-0", + className + )} {...props} /> )) @@ -55,7 +58,7 @@ const TableRow = React.forwardRef< {} - -const Textarea = React.forwardRef( - ({ className, ...props }, ref) => { - return ( -