Upgrade dependencies and enhance UI components

This commit primarily focuses on updating various dependencies, including "@types/react", "@tanstack/react-query", "lucide-react", and others. In addition, several adjustments have been made to UI components, such as adding more properties
This commit is contained in:
giancarlo
2024-05-27 16:12:29 +07:00
parent 127ad5a315
commit 1e047463c8
22 changed files with 648 additions and 521 deletions

View File

@@ -55,11 +55,11 @@
"@marsidev/react-turnstile": "^0.6.1",
"@radix-ui/react-icons": "^1.3.0",
"@supabase/supabase-js": "^2.43.4",
"@tanstack/react-query": "5.37.1",
"@tanstack/react-query-next-experimental": "^5.36.2",
"@tanstack/react-query": "5.39.0",
"@tanstack/react-query-next-experimental": "^5.39.0",
"@tanstack/react-table": "^8.17.3",
"date-fns": "^3.6.0",
"lucide-react": "^0.378.0",
"lucide-react": "^0.379.0",
"next": "14.2.3",
"next-sitemap": "^4.2.3",
"next-themes": "0.3.0",
@@ -80,7 +80,7 @@
"@next/bundle-analyzer": "14.2.3",
"@types/mdx": "^2.0.13",
"@types/node": "^20.12.12",
"@types/react": "^18.3.2",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"autoprefixer": "^10.4.19",
"dotenv-cli": "^7.4.2",

View File

@@ -38,7 +38,7 @@
"@manypkg/cli": "^0.21.4",
"@turbo/gen": "^1.13.3",
"cross-env": "^7.0.3",
"pnpm": "^9.1.1",
"pnpm": "^9.1.3",
"prettier": "^3.2.5",
"turbo": "^1.13.3",
"typescript": "^5.4.5",

View File

@@ -28,9 +28,9 @@
"@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:^",
"@supabase/supabase-js": "^2.43.4",
"@types/react": "^18.3.2",
"@types/react": "^18.3.3",
"date-fns": "^3.6.0",
"lucide-react": "^0.378.0",
"lucide-react": "^0.379.0",
"next": "14.2.3",
"react": "18.3.1",
"react-hook-form": "^7.51.4",

View File

@@ -25,7 +25,7 @@
"@kit/tailwind-config": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:^",
"@types/react": "^18.3.2",
"@types/react": "^18.3.3",
"next": "14.2.3",
"react": "18.3.1",
"zod": "^3.23.8"

View File

@@ -28,7 +28,7 @@
"@kit/tailwind-config": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:^",
"@types/react": "^18.3.2",
"@types/react": "^18.3.3",
"date-fns": "^3.6.0",
"next": "14.2.3",
"react": "18.3.1",

View File

@@ -15,8 +15,8 @@
"./route-handler": "./src/keystatic-route-handler.ts"
},
"dependencies": {
"@keystatic/core": "0.5.15",
"@keystatic/next": "^5.0.0",
"@keystatic/core": "0.5.17",
"@keystatic/next": "^5.0.1",
"@markdoc/markdoc": "^0.4.0"
},
"devDependencies": {
@@ -26,7 +26,7 @@
"@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:^",
"@types/node": "^20.12.12",
"@types/react": "^18.3.2",
"@types/react": "^18.3.3",
"react": "18.3.1",
"zod": "^3.23.8"
},

View File

@@ -13,7 +13,7 @@
".": "./src/index.ts"
},
"dependencies": {
"@react-email/components": "0.0.18"
"@react-email/components": "0.0.19"
},
"devDependencies": {
"@kit/eslint-config": "workspace:*",

View File

@@ -34,10 +34,10 @@
"@kit/ui": "workspace:^",
"@radix-ui/react-icons": "^1.3.0",
"@supabase/supabase-js": "^2.43.4",
"@tanstack/react-query": "5.37.1",
"@types/react": "^18.3.2",
"@tanstack/react-query": "5.39.0",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"lucide-react": "^0.378.0",
"lucide-react": "^0.379.0",
"next": "14.2.3",
"next-themes": "0.3.0",
"react": "18.3.1",

View File

@@ -21,10 +21,10 @@
"@makerkit/data-loader-supabase-core": "^0.0.8",
"@makerkit/data-loader-supabase-nextjs": "^1.2.3",
"@supabase/supabase-js": "^2.43.4",
"@tanstack/react-query": "5.37.1",
"@tanstack/react-query": "5.39.0",
"@tanstack/react-table": "^8.17.3",
"@types/react": "^18.3.2",
"lucide-react": "^0.378.0",
"@types/react": "^18.3.3",
"lucide-react": "^0.379.0",
"next": "14.2.3",
"react": "18.3.1",
"react-dom": "18.3.1",

View File

@@ -29,9 +29,9 @@
"@marsidev/react-turnstile": "^0.6.1",
"@radix-ui/react-icons": "^1.3.0",
"@supabase/supabase-js": "^2.43.4",
"@tanstack/react-query": "5.37.1",
"@types/react": "^18.3.2",
"lucide-react": "^0.378.0",
"@tanstack/react-query": "5.39.0",
"@types/react": "^18.3.3",
"lucide-react": "^0.379.0",
"next": "14.2.3",
"react-hook-form": "^7.51.4",
"react-i18next": "^14.1.2",

View File

@@ -21,9 +21,9 @@
"@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:*",
"@supabase/supabase-js": "^2.43.4",
"@tanstack/react-query": "5.37.1",
"@types/react": "^18.3.2",
"lucide-react": "^0.378.0",
"@tanstack/react-query": "5.39.0",
"@types/react": "^18.3.3",
"lucide-react": "^0.379.0",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-i18next": "^14.1.2"

View File

@@ -32,13 +32,13 @@
"@kit/tsconfig": "workspace:*",
"@kit/ui": "workspace:^",
"@supabase/supabase-js": "^2.43.4",
"@tanstack/react-query": "5.37.1",
"@tanstack/react-query": "5.39.0",
"@tanstack/react-table": "^8.17.3",
"@types/react": "^18.3.2",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"class-variance-authority": "^0.7.0",
"date-fns": "^3.6.0",
"lucide-react": "^0.378.0",
"lucide-react": "^0.379.0",
"next": "14.2.3",
"react": "18.3.1",
"react-dom": "18.3.1",

View File

@@ -21,7 +21,7 @@
"@kit/shared": "workspace:^",
"@kit/tailwind-config": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@tanstack/react-query": "5.37.1",
"@tanstack/react-query": "5.39.0",
"react-i18next": "^14.1.2"
},
"dependencies": {

View File

@@ -24,7 +24,7 @@
"@kit/sentry": "workspace:*",
"@kit/tailwind-config": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@types/react": "^18.3.2",
"@types/react": "^18.3.3",
"react": "18.3.1"
},
"eslintConfig": {

View File

@@ -25,7 +25,7 @@
"@kit/prettier-config": "workspace:*",
"@kit/tailwind-config": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@types/react": "^18.3.2",
"@types/react": "^18.3.3",
"react": "18.3.1",
"zod": "^3.23.8"
},

View File

@@ -18,7 +18,7 @@
"@kit/prettier-config": "workspace:*",
"@kit/tailwind-config": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@types/react": "^18.3.2",
"@types/react": "^18.3.3",
"react": "18.3.1"
},
"eslintConfig": {

View File

@@ -32,7 +32,7 @@
"@kit/prettier-config": "workspace:*",
"@kit/tailwind-config": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@types/react": "^18.3.2",
"@types/react": "^18.3.3",
"react": "18.3.1"
},
"eslintConfig": {

View File

@@ -29,8 +29,8 @@
"@supabase/gotrue-js": "2.62.2",
"@supabase/ssr": "^0.3.0",
"@supabase/supabase-js": "^2.43.4",
"@tanstack/react-query": "5.37.1",
"@types/react": "^18.3.2",
"@tanstack/react-query": "5.39.0",
"@types/react": "^18.3.3",
"next": "14.2.3",
"react": "18.3.1",
"zod": "^3.23.8"

View File

@@ -31,7 +31,7 @@
"clsx": "^2.1.1",
"cmdk": "1.0.0",
"input-otp": "1.2.4",
"lucide-react": "^0.378.0",
"lucide-react": "^0.379.0",
"react-top-loading-bar": "2.3.1",
"tailwind-merge": "^2.3.0"
},
@@ -42,7 +42,7 @@
"@kit/tsconfig": "workspace:*",
"@radix-ui/react-icons": "^1.3.0",
"@tanstack/react-table": "^8.17.3",
"@types/react": "^18.3.2",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"class-variance-authority": "^0.7.0",
"date-fns": "^3.6.0",

View File

@@ -14,7 +14,7 @@ import { Trans } from './trans';
export function BorderedNavigationMenu(props: React.PropsWithChildren) {
return (
<NavigationMenu className={'h-full'}>
<NavigationMenu>
<NavigationMenuList className={'relative h-full space-x-2'}>
{props.children}
</NavigationMenuList>
@@ -24,17 +24,23 @@ export function BorderedNavigationMenu(props: React.PropsWithChildren) {
export function BorderedNavigationMenuItem(props: {
path: string;
label: string;
label: React.ReactNode | string;
end?: boolean | ((path: string) => boolean);
active?: boolean;
className?: string;
buttonClassName?: string;
}) {
const pathname = usePathname();
const active = props.active ?? isRouteActive(props.path, pathname, props.end);
return (
<NavigationMenuItem>
<Button asChild variant={'ghost'} className={'relative active:shadow-sm'}>
<NavigationMenuItem className={props.className}>
<Button
asChild
variant={'ghost'}
className={cn('relative active:shadow-sm', props.buttonClassName)}
>
<Link
href={props.path}
className={cn('text-sm', {
@@ -43,7 +49,11 @@ export function BorderedNavigationMenuItem(props: {
!active,
})}
>
{typeof props.label === 'string' ? (
<Trans i18nKey={props.label} defaults={props.label} />
) : (
props.label
)}
{active ? (
<span

View File

@@ -30,10 +30,12 @@ export function Stepper(props: {
const Steps = useCallback(() => {
return props.steps.map((labelOrKey, index) => {
const selected = props.currentStep === index;
const complete = props.currentStep > index;
const className = classNameBuilder({
selected,
variant,
complete,
});
const isNumberVariant = variant === 'numbers';
@@ -54,7 +56,9 @@ export function Stepper(props: {
</div>
<If condition={isNumberVariant}>
<StepDivider selected={selected}>{label}</StepDivider>
<StepDivider selected={selected} complete={complete}>
{label}
</StepDivider>
</If>
</Fragment>
);
@@ -68,7 +72,7 @@ export function Stepper(props: {
const containerClassName = cn({
['flex justify-between']: variant === 'numbers',
['flex space-x-1']: variant === 'default',
['flex space-x-0.5']: variant === 'default',
});
return (
@@ -82,15 +86,18 @@ function getClassNameBuilder() {
return cva(``, {
variants: {
variant: {
default: `flex flex-col h-[2.5px] w-full transition-colors duration-500`,
default: `flex flex-col h-[2.5px] w-full transition-all duration-500`,
numbers:
'w-9 h-9 font-bold rounded-full flex items-center justify-center' +
' text-sm border',
'w-9 h-9 font-bold rounded-full flex items-center justify-center text-sm border',
},
selected: {
true: '',
false: '',
},
complete: {
true: '',
false: '',
},
},
compoundVariants: [
{
@@ -101,17 +108,30 @@ function getClassNameBuilder() {
{
variant: 'default',
selected: true,
className: 'bg-primary',
className: 'bg-primary font-medium',
},
{
variant: 'default',
selected: false,
complete: false,
className: 'bg-muted',
},
{
variant: 'default',
selected: false,
complete: true,
className: 'bg-primary',
},
{
variant: 'numbers',
selected: false,
complete: true,
className: 'border-primary text-primary',
},
{
variant: 'numbers',
selected: true,
className: 'text-primary border-primary',
className: 'border-primary bg-primary text-primary-foreground',
},
{
variant: 'numbers',
@@ -128,13 +148,16 @@ function getClassNameBuilder() {
function StepDivider({
selected,
complete,
children,
}: React.PropsWithChildren<{
selected: boolean;
complete: boolean;
}>) {
const spanClassName = cn('font-medium text-sm', {
const spanClassName = cn('font-medium text-sm min-w-max', {
['text-muted-foreground']: !selected,
['text-primary']: selected,
['text-secondary-foreground']: selected || complete,
['font-medium']: selected,
});
const className = cn(
@@ -149,7 +172,7 @@ function StepDivider({
<div
className={
'divider h-[1px] w-full bg-gray-200 transition-colors' +
' dark:bg-dark-600 group-last:hidden'
' group-last:hidden dark:bg-border'
}
/>
</div>

1032
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff