From 8a614bd6fc1b37c1c8068c5fc06014ed2c355f49 Mon Sep 17 00:00:00 2001 From: giancarlo Date: Wed, 27 Mar 2024 01:19:20 +0800 Subject: [PATCH] Refactor auth methods, remove i18n, and update UI This commit covers a variety of actions that includes the refactoring of the authentication components to accept paths and invite tokens as props instead of a singular callback prop, thereby improving the component's flexibility. This refactor process removes 'withI18n' calls as i18n functionalities are no longer used. The commit also contains several adjustments to the UI components, including the authorization layout, pricing table, and sign-up page. It also includes minor changes to error messages, specifically those related to password resetting. Lastly, several peer dependencies are removed in the 'package.json' files and changes made to the 'browser.client.ts' file providing a significant code cleanup. --- .../app/(dashboard)/home/(user)/loading.tsx | 4 +- .../(dashboard)/home/[account]/loading.tsx | 4 +- apps/web/app/(dashboard)/home/loading.tsx | 4 +- apps/web/app/(marketing)/loading.tsx | 5 - apps/web/app/auth/password-reset/page.tsx | 6 +- apps/web/app/auth/sign-up/page.tsx | 15 +- apps/web/app/loading.tsx | 4 +- apps/web/app/update-password/page.tsx | 11 +- apps/web/config/auth.config.ts | 6 +- apps/web/config/paths.config.ts | 2 +- apps/web/public/locales/en/auth.json | 3 +- packages/billing-gateway/package.json | 2 - packages/billing/package.json | 2 - .../billing/src/components/pricing-table.tsx | 22 +-- packages/features/accounts/package.json | 2 - .../auth/src/components/auth-layout.tsx | 2 +- .../components/magic-link-auth-container.tsx | 140 +++++++++++------- .../auth/src/components/oauth-providers.tsx | 19 ++- .../src/components/password-reset-form.tsx | 23 ++- .../password-reset-request-container.tsx | 7 +- .../components/sign-in-methods-container.tsx | 15 +- .../components/sign-up-methods-container.tsx | 33 ++--- packages/features/team-accounts/package.json | 2 - .../src/schema/update-invitation-schema.ts | 2 +- packages/shared/package.json | 3 - .../supabase/src/clients/browser.client.ts | 8 +- packages/ui/package.json | 2 - packages/ui/src/makerkit/global-loader.tsx | 2 + pnpm-lock.yaml | 69 ++++----- 29 files changed, 215 insertions(+), 204 deletions(-) delete mode 100644 apps/web/app/(marketing)/loading.tsx diff --git a/apps/web/app/(dashboard)/home/(user)/loading.tsx b/apps/web/app/(dashboard)/home/(user)/loading.tsx index bbf9ff827..4ea53181d 100644 --- a/apps/web/app/(dashboard)/home/(user)/loading.tsx +++ b/apps/web/app/(dashboard)/home/(user)/loading.tsx @@ -1,5 +1,3 @@ import { GlobalLoader } from '@kit/ui/global-loader'; -import { withI18n } from '~/lib/i18n/with-i18n'; - -export default withI18n(GlobalLoader); +export default GlobalLoader; diff --git a/apps/web/app/(dashboard)/home/[account]/loading.tsx b/apps/web/app/(dashboard)/home/[account]/loading.tsx index bbf9ff827..4ea53181d 100644 --- a/apps/web/app/(dashboard)/home/[account]/loading.tsx +++ b/apps/web/app/(dashboard)/home/[account]/loading.tsx @@ -1,5 +1,3 @@ import { GlobalLoader } from '@kit/ui/global-loader'; -import { withI18n } from '~/lib/i18n/with-i18n'; - -export default withI18n(GlobalLoader); +export default GlobalLoader; diff --git a/apps/web/app/(dashboard)/home/loading.tsx b/apps/web/app/(dashboard)/home/loading.tsx index bbf9ff827..4ea53181d 100644 --- a/apps/web/app/(dashboard)/home/loading.tsx +++ b/apps/web/app/(dashboard)/home/loading.tsx @@ -1,5 +1,3 @@ import { GlobalLoader } from '@kit/ui/global-loader'; -import { withI18n } from '~/lib/i18n/with-i18n'; - -export default withI18n(GlobalLoader); +export default GlobalLoader; diff --git a/apps/web/app/(marketing)/loading.tsx b/apps/web/app/(marketing)/loading.tsx deleted file mode 100644 index bbf9ff827..000000000 --- a/apps/web/app/(marketing)/loading.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { GlobalLoader } from '@kit/ui/global-loader'; - -import { withI18n } from '~/lib/i18n/with-i18n'; - -export default withI18n(GlobalLoader); diff --git a/apps/web/app/auth/password-reset/page.tsx b/apps/web/app/auth/password-reset/page.tsx index b004b2c51..4afe49f20 100644 --- a/apps/web/app/auth/password-reset/page.tsx +++ b/apps/web/app/auth/password-reset/page.tsx @@ -18,6 +18,8 @@ export const generateMetadata = async () => { }; function PasswordResetPage() { + const redirectPath = `${pathsConfig.auth.callback}?next=${pathsConfig.auth.passwordUpdate}`; + return ( <> @@ -25,9 +27,7 @@ function PasswordResetPage() {
- +
diff --git a/apps/web/app/auth/sign-up/page.tsx b/apps/web/app/auth/sign-up/page.tsx index eab64cfa2..8c5792a15 100644 --- a/apps/web/app/auth/sign-up/page.tsx +++ b/apps/web/app/auth/sign-up/page.tsx @@ -18,7 +18,15 @@ export const generateMetadata = async () => { }; }; -function SignUpPage() { +interface Props { + searchParams: { + invite_token?: string; + }; +} + +function SignUpPage({ searchParams }: Props) { + const inviteToken = searchParams.invite_token; + return ( <> @@ -27,7 +35,10 @@ function SignUpPage() {
diff --git a/apps/web/app/loading.tsx b/apps/web/app/loading.tsx index bbf9ff827..4ea53181d 100644 --- a/apps/web/app/loading.tsx +++ b/apps/web/app/loading.tsx @@ -1,5 +1,3 @@ import { GlobalLoader } from '@kit/ui/global-loader'; -import { withI18n } from '~/lib/i18n/with-i18n'; - -export default withI18n(GlobalLoader); +export default GlobalLoader; diff --git a/apps/web/app/update-password/page.tsx b/apps/web/app/update-password/page.tsx index 6dbb5295c..27a852f61 100644 --- a/apps/web/app/update-password/page.tsx +++ b/apps/web/app/update-password/page.tsx @@ -2,6 +2,7 @@ import { redirect } from 'next/navigation'; import { PasswordResetForm } from '@kit/auth/password-reset'; import { AuthLayoutShell } from '@kit/auth/shared'; +import { requireAuth } from '@kit/supabase/require-auth'; import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client'; import { AppLogo } from '~/components/app-logo'; @@ -10,18 +11,16 @@ import { withI18n } from '~/lib/i18n/with-i18n'; async function PasswordResetPage() { const client = getSupabaseServerComponentClient(); - const user = await client.auth.getUser(); + const auth = await requireAuth(client); // we require the user to be logged in to access this page - if (!user.data) { - redirect(pathsConfig.auth.passwordReset); + if (auth.error) { + redirect(auth.redirectTo); } - const redirectTo = `/${pathsConfig.auth.callback}?next=${pathsConfig.app.home}`; - return ( - + ); } diff --git a/apps/web/config/auth.config.ts b/apps/web/config/auth.config.ts index 0a035e585..f1f9057cf 100644 --- a/apps/web/config/auth.config.ts +++ b/apps/web/config/auth.config.ts @@ -8,7 +8,6 @@ const AuthConfigSchema = z.object({ providers: z.object({ password: z.boolean(), magicLink: z.boolean(), - otp: z.boolean(), oAuth: providers.array(), }), }); @@ -17,9 +16,8 @@ const authConfig = AuthConfigSchema.parse({ // NB: Enable the providers below in the Supabase Console // in your production project providers: { - password: true, - magicLink: false, - otp: false, + password: false, + magicLink: true, oAuth: ['google'], }, }); diff --git a/apps/web/config/paths.config.ts b/apps/web/config/paths.config.ts index c9bd9e605..e2b58f9a2 100644 --- a/apps/web/config/paths.config.ts +++ b/apps/web/config/paths.config.ts @@ -29,7 +29,7 @@ const pathsConfig = PathsSchema.parse({ verifyMfa: '/auth/verify', callback: '/auth/callback', passwordReset: '/auth/password-reset', - passwordUpdate: '/password-reset', + passwordUpdate: '/update-password', }, app: { home: '/home', diff --git a/apps/web/public/locales/en/auth.json b/apps/web/public/locales/en/auth.json index a204dd887..d617722ac 100644 --- a/apps/web/public/locales/en/auth.json +++ b/apps/web/public/locales/en/auth.json @@ -38,7 +38,8 @@ "passwordLengthError": "Please provide a password with at least 6 characters", "sendEmailLink": "Send Email Link", "sendingEmailLink": "Sending Email Link...", - "sendLinkSuccess": "We sent you a link to your email! Follow the link to sign in.", + "sendLinkSuccessDescription": "Check your email, we just sent you a link. Follow the link to sign in.", + "sendLinkSuccess": "We send you a link.", "sendLinkSuccessToast": "Link successfully sent", "getNewLink": "Get a new link", "verificationCode": "Verification Code", diff --git a/packages/billing-gateway/package.json b/packages/billing-gateway/package.json index f12166bb4..f7f68abbc 100644 --- a/packages/billing-gateway/package.json +++ b/packages/billing-gateway/package.json @@ -14,8 +14,6 @@ "./components": "./src/components/index.ts" }, "peerDependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0", "zod": "^3.22.4", "@kit/ui": "0.1.0", "@kit/stripe": "0.1.0", diff --git a/packages/billing/package.json b/packages/billing/package.json index 72ffd47d7..1902f64b7 100644 --- a/packages/billing/package.json +++ b/packages/billing/package.json @@ -15,8 +15,6 @@ "./schema": "./src/schema/index.ts" }, "peerDependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0", "zod": "^3.22.4", "@kit/ui": "0.1.0", "@kit/supabase": "0.1.0", diff --git a/packages/billing/src/components/pricing-table.tsx b/packages/billing/src/components/pricing-table.tsx index 1845cf409..01f23866f 100644 --- a/packages/billing/src/components/pricing-table.tsx +++ b/packages/billing/src/components/pricing-table.tsx @@ -53,7 +53,7 @@ export function PricingTable({
{config.products.map((product) => { @@ -107,6 +107,7 @@ function PricingItem( product: { name: string; + currency: string; description: string; badge?: string; highlighted?: boolean; @@ -122,12 +123,8 @@ function PricingItem( className={cn( ` relative flex w-full flex-col justify-between space-y-6 rounded-lg - p-6 lg:w-4/12 xl:max-w-xs xl:p-8 2xl:w-3/12 + border p-6 lg:w-4/12 xl:max-w-xs xl:p-8 2xl:w-3/12 `, - { - ['dark:border-dark-900 border border-gray-100']: !highlighted, - ['border-primary border-2']: highlighted, - }, )} >
@@ -142,7 +139,7 @@ function PricingItem( `flex space-x-1 rounded-md px-2 py-1 text-xs font-medium`, { ['text-primary-foreground bg-primary']: highlighted, - ['bg-gray-50 text-gray-500 dark:text-gray-800']: !highlighted, + ['text-muted-foreground bg-gray-50']: !highlighted, }, )} > @@ -161,7 +158,10 @@ function PricingItem(
- {props.plan.price} + + {props.product.currency} + {props.plan.price} + @@ -223,10 +223,12 @@ function Price({ children }: React.PropsWithChildren) { return (
{children} diff --git a/packages/features/accounts/package.json b/packages/features/accounts/package.json index 8aa4d7926..01e3e16e1 100644 --- a/packages/features/accounts/package.json +++ b/packages/features/accounts/package.json @@ -21,8 +21,6 @@ "@kit/tsconfig": "0.1.0" }, "peerDependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0", "@kit/supabase": "0.1.0", "@kit/ui": "0.1.0", "@kit/shared": "0.1.0", diff --git a/packages/features/auth/src/components/auth-layout.tsx b/packages/features/auth/src/components/auth-layout.tsx index b229c7e8a..e39e1e385 100644 --- a/packages/features/auth/src/components/auth-layout.tsx +++ b/packages/features/auth/src/components/auth-layout.tsx @@ -9,7 +9,7 @@ export function AuthLayoutShell({ className={ 'flex h-screen flex-col items-center justify-center space-y-4' + ' dark:lg:bg-background md:space-y-8 lg:space-y-12 lg:bg-gray-50' + - ' animate-in fade-in slide-in-from-top-8 duration-1000' + ' animate-in fade-in slide-in-from-top-8 zoom-in-95 duration-1000' } > {Logo && } diff --git a/packages/features/auth/src/components/magic-link-auth-container.tsx b/packages/features/auth/src/components/magic-link-auth-container.tsx index d6b805521..30527ad27 100644 --- a/packages/features/auth/src/components/magic-link-auth-container.tsx +++ b/packages/features/auth/src/components/magic-link-auth-container.tsx @@ -1,98 +1,132 @@ 'use client'; -import type { FormEventHandler } from 'react'; -import { useCallback } from 'react'; - +import { zodResolver } from '@hookform/resolvers/zod'; +import { CheckIcon } from '@radix-ui/react-icons'; +import { useForm } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import { toast } from 'sonner'; +import { z } from 'zod'; import { useSignInWithOtp } from '@kit/supabase/hooks/use-sign-in-with-otp'; -import { Alert, AlertDescription } from '@kit/ui/alert'; +import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert'; import { Button } from '@kit/ui/button'; +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from '@kit/ui/form'; import { If } from '@kit/ui/if'; import { Input } from '@kit/ui/input'; -import { Label } from '@kit/ui/label'; import { Trans } from '@kit/ui/trans'; export function MagicLinkAuthContainer({ - inviteCode, + inviteToken, redirectUrl, }: { - inviteCode?: string; + inviteToken?: string; redirectUrl: string; }) { const { t } = useTranslation(); const signInWithOtpMutation = useSignInWithOtp(); - const onSubmit: FormEventHandler = useCallback( - (event) => { - event.preventDefault(); + const form = useForm({ + resolver: zodResolver( + z.object({ + email: z.string().email(), + }), + ), + defaultValues: { + email: '', + }, + }); - const target = event.currentTarget; - const data = new FormData(target); - const email = data.get('email') as string; - const queryParams = inviteCode ? `?inviteCode=${inviteCode}` : ''; + const onSubmit = ({ email }: { email: string }) => { + const queryParams = inviteToken ? `?invite_token=${inviteToken}` : ''; + const emailRedirectTo = [redirectUrl, queryParams].join(''); - const emailRedirectTo = [redirectUrl, queryParams].join(''); - - const promise = signInWithOtpMutation.mutateAsync({ + const promise = () => + signInWithOtpMutation.mutateAsync({ email, options: { emailRedirectTo, }, }); - toast.promise(promise, { - loading: t('auth:sendingEmailLink'), - success: t(`auth:sendLinkSuccessToast`), - error: t(`auth:errors.link`), - }); - }, - [inviteCode, redirectUrl, signInWithOtpMutation, t], - ); + toast.promise(promise, { + loading: t('auth:sendingEmailLink'), + success: t(`auth:sendLinkSuccessToast`), + error: t(`auth:errors.link`), + }); + }; if (signInWithOtpMutation.data) { return ( - + + + + + + + ); } return ( -
- - - - - - - + + + + + + + -
- - -
- + +
+ + ); } diff --git a/packages/features/auth/src/components/oauth-providers.tsx b/packages/features/auth/src/components/oauth-providers.tsx index 391b60928..c2e18b9ac 100644 --- a/packages/features/auth/src/components/oauth-providers.tsx +++ b/packages/features/auth/src/components/oauth-providers.tsx @@ -13,10 +13,13 @@ import { AuthErrorAlert } from './auth-error-alert'; import { AuthProviderButton } from './auth-provider-button'; export const OauthProviders: React.FC<{ - returnUrl?: string; - inviteCode?: string; + inviteToken?: string; enabledProviders: Provider[]; - redirectUrl: string; + + paths: { + callback: string; + returnPath: string; + }; }> = (props) => { const signInWithProviderMutation = useSignInWithProvider(); @@ -57,16 +60,16 @@ export const OauthProviders: React.FC<{ const origin = window.location.origin; const queryParams = new URLSearchParams(); - if (props.returnUrl) { - queryParams.set('next', props.returnUrl); + if (props.paths.returnPath) { + queryParams.set('next', props.paths.returnPath); } - if (props.inviteCode) { - queryParams.set('inviteCode', props.inviteCode); + if (props.inviteToken) { + queryParams.set('invite_token', props.inviteToken); } const redirectPath = [ - props.redirectUrl, + props.paths.callback, queryParams.toString(), ].join('?'); diff --git a/packages/features/auth/src/components/password-reset-form.tsx b/packages/features/auth/src/components/password-reset-form.tsx index 3b0464ded..b8a2f8f8c 100644 --- a/packages/features/auth/src/components/password-reset-form.tsx +++ b/packages/features/auth/src/components/password-reset-form.tsx @@ -3,6 +3,11 @@ import Link from 'next/link'; import { zodResolver } from '@hookform/resolvers/zod'; +import { + ArrowLeftIcon, + CheckIcon, + ExclamationTriangleIcon, +} from '@radix-ui/react-icons'; import { useForm } from 'react-hook-form'; import type { z } from 'zod'; @@ -112,7 +117,9 @@ export function PasswordResetForm(params: { redirectTo: string }) { function SuccessState() { return (
- + + + @@ -123,8 +130,12 @@ function SuccessState() { -
@@ -135,12 +146,14 @@ function ErrorState(props: { onRetry: () => void }) { return (
+ + - + - + diff --git a/packages/features/auth/src/components/password-reset-request-container.tsx b/packages/features/auth/src/components/password-reset-request-container.tsx index be61484ae..f3adb6e40 100644 --- a/packages/features/auth/src/components/password-reset-request-container.tsx +++ b/packages/features/auth/src/components/password-reset-request-container.tsx @@ -26,7 +26,9 @@ const PasswordResetSchema = z.object({ email: z.string().email(), }); -export function PasswordResetRequestContainer(params: { redirectTo: string }) { +export function PasswordResetRequestContainer(params: { + redirectPath: string; +}) { const { t } = useTranslation('auth'); const resetPasswordMutation = useRequestResetPassword(); const error = resetPasswordMutation.error; @@ -55,7 +57,8 @@ export function PasswordResetRequestContainer(params: { redirectTo: string }) { onSubmit={form.handleSubmit(({ email }) => { return resetPasswordMutation.mutateAsync({ email, - redirectTo: params.redirectTo, + redirectTo: new URL(params.redirectPath, window.location.origin) + .href, }); })} className={'w-full'} diff --git a/packages/features/auth/src/components/sign-in-methods-container.tsx b/packages/features/auth/src/components/sign-in-methods-container.tsx index ce9c27dfe..9419beaad 100644 --- a/packages/features/auth/src/components/sign-in-methods-container.tsx +++ b/packages/features/auth/src/components/sign-in-methods-container.tsx @@ -9,7 +9,6 @@ import { isBrowser } from '@supabase/ssr'; import { Divider } from '@kit/ui/divider'; import { If } from '@kit/ui/if'; -import { EmailOtpContainer } from './email-otp-container'; import { MagicLinkAuthContainer } from './magic-link-auth-container'; import { OauthProviders } from './oauth-providers'; import { PasswordSignInContainer } from './password-sign-in-container'; @@ -23,7 +22,6 @@ export function SignInMethodsContainer(props: { providers: { password: boolean; magicLink: boolean; - otp: boolean; oAuth: Provider[]; }; }) { @@ -48,20 +46,15 @@ export function SignInMethodsContainer(props: { - - - - diff --git a/packages/features/auth/src/components/sign-up-methods-container.tsx b/packages/features/auth/src/components/sign-up-methods-container.tsx index ded16c3c6..0908ed3f7 100644 --- a/packages/features/auth/src/components/sign-up-methods-container.tsx +++ b/packages/features/auth/src/components/sign-up-methods-container.tsx @@ -7,27 +7,27 @@ import { isBrowser } from '@supabase/ssr'; import { Divider } from '@kit/ui/divider'; import { If } from '@kit/ui/if'; -import { EmailOtpContainer } from './email-otp-container'; import { MagicLinkAuthContainer } from './magic-link-auth-container'; import { OauthProviders } from './oauth-providers'; import { EmailPasswordSignUpContainer } from './password-sign-up-container'; export function SignUpMethodsContainer(props: { - callbackPath: string; + paths: { + callback: string; + appHome: string; + }; providers: { password: boolean; magicLink: boolean; - otp: boolean; oAuth: Provider[]; }; - inviteCode?: string; + inviteToken?: string; }) { - const redirectUrl = new URL( - props.callbackPath, - isBrowser() ? window?.location.origin : '', - ).toString(); + const redirectUrl = isBrowser() + ? new URL(props.paths.callback, window?.location.origin).toString() + : ''; return ( <> @@ -37,26 +37,21 @@ export function SignUpMethodsContainer(props: { - - - - diff --git a/packages/features/team-accounts/package.json b/packages/features/team-accounts/package.json index 44a236fba..873f710c6 100644 --- a/packages/features/team-accounts/package.json +++ b/packages/features/team-accounts/package.json @@ -18,8 +18,6 @@ "@kit/tsconfig": "0.1.0" }, "peerDependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0", "@kit/supabase": "0.1.0", "@kit/ui": "0.1.0", "@kit/shared": "0.1.0", diff --git a/packages/features/team-accounts/src/schema/update-invitation-schema.ts b/packages/features/team-accounts/src/schema/update-invitation-schema.ts index abdf4e675..44674f13a 100644 --- a/packages/features/team-accounts/src/schema/update-invitation-schema.ts +++ b/packages/features/team-accounts/src/schema/update-invitation-schema.ts @@ -5,6 +5,6 @@ import { Database } from '@kit/supabase/database'; type Role = Database['public']['Enums']['account_role']; export const UpdateInvitationSchema = z.object({ - id: z.bigint(), + invitationId: z.number(), role: z.custom(() => z.string().min(1)), }); diff --git a/packages/shared/package.json b/packages/shared/package.json index 625d3e368..5308f98cd 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -16,9 +16,6 @@ "./cookies/*": "./src/cookies/*.ts", "./utils": "./src/utils.ts" }, - "peerDependencies": { - "react": "^18.2.0" - }, "dependencies": { "pino": "^8.19.0" }, diff --git a/packages/supabase/src/clients/browser.client.ts b/packages/supabase/src/clients/browser.client.ts index aa81c7d9d..331c0d955 100644 --- a/packages/supabase/src/clients/browser.client.ts +++ b/packages/supabase/src/clients/browser.client.ts @@ -1,11 +1,13 @@ +import { SupabaseClient } from '@supabase/supabase-js'; + import { invariant } from '@epic-web/invariant'; import { createBrowserClient } from '@supabase/ssr'; import { Database } from '../database.types'; -let client: ReturnType>; +let client: SupabaseClient; -export function getSupabaseBrowserClient() { +export function getSupabaseBrowserClient() { const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL; const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY; @@ -16,7 +18,7 @@ export function getSupabaseBrowserClient() { return client; } - client = createBrowserClient(SUPABASE_URL, SUPABASE_ANON_KEY); + client = createBrowserClient(SUPABASE_URL, SUPABASE_ANON_KEY); return client; } diff --git a/packages/ui/package.json b/packages/ui/package.json index d25adc1ee..f89bbdc91 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -40,8 +40,6 @@ "lucide-react": "0.307.0", "class-variance-authority": "^0.7.0", "date-fns": "^3.2.0", - "react": "18.2.0", - "react-dom": "18.2.0", "react-hook-form": "^7.49.2" }, "devDependencies": { diff --git a/packages/ui/src/makerkit/global-loader.tsx b/packages/ui/src/makerkit/global-loader.tsx index f2c2176ed..1d0d90e9f 100644 --- a/packages/ui/src/makerkit/global-loader.tsx +++ b/packages/ui/src/makerkit/global-loader.tsx @@ -1,3 +1,5 @@ +'use client'; + import { LoadingOverlay } from './loading-overlay'; import { TopLoadingBarIndicator } from './top-loading-bar-indicator'; import { Trans } from './trans'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cddc199ec..8c9aac75a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -207,12 +207,6 @@ importers: lucide-react: specifier: ^0.361.0 version: 0.361.0(react@18.2.0) - react: - specifier: ^18.2.0 - version: 18.2.0 - react-dom: - specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) zod: specifier: ^3.22.4 version: 3.22.4 @@ -247,15 +241,12 @@ importers: '@kit/ui': specifier: 0.1.0 version: link:../ui + '@supabase/supabase-js': + specifier: ^2.39.8 + version: 2.40.0 lucide-react: specifier: ^0.361.0 version: 0.361.0(react@18.2.0) - react: - specifier: ^18.2.0 - version: 18.2.0 - react-dom: - specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) zod: specifier: ^3.22.4 version: 3.22.4 @@ -272,9 +263,6 @@ importers: '@kit/tsconfig': specifier: 0.1.0 version: link:../../tooling/typescript - '@supabase/supabase-js': - specifier: ^2.39.8 - version: 2.40.0 packages/emails: dependencies: @@ -312,12 +300,6 @@ importers: lucide-react: specifier: ^0.360.0 version: 0.360.0(react@18.2.0) - react: - specifier: ^18.2.0 - version: 18.2.0 - react-dom: - specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) devDependencies: '@kit/eslint-config': specifier: 0.2.0 @@ -407,12 +389,6 @@ importers: lucide-react: specifier: ^0.360.0 version: 0.360.0(react@18.2.0) - react: - specifier: ^18.2.0 - version: 18.2.0 - react-dom: - specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) devDependencies: '@kit/eslint-config': specifier: 0.2.0 @@ -488,9 +464,6 @@ importers: pino: specifier: ^8.19.0 version: 8.19.0 - react: - specifier: ^18.2.0 - version: 18.2.0 devDependencies: '@kit/eslint-config': specifier: 0.2.0 @@ -638,9 +611,15 @@ importers: cmdk: specifier: ^0.2.0 version: 0.2.1(@types/react@18.2.71)(react-dom@18.2.0)(react@18.2.0) + date-fns: + specifier: ^3.2.0 + version: 3.6.0 lucide-react: specifier: 0.307.0 version: 0.307.0(react@18.2.0) + react-hook-form: + specifier: ^7.49.2 + version: 7.51.1(react@18.2.0) react-i18next: specifier: ^14.1.0 version: 14.1.0(i18next@23.10.1)(react-dom@18.2.0)(react@18.2.0) @@ -675,27 +654,15 @@ importers: '@types/react-dom': specifier: ^18.2.18 version: 18.2.22 - date-fns: - specifier: ^3.2.0 - version: 3.6.0 eslint: specifier: ^8.56.0 version: 8.57.0 prettier: specifier: ^3.2.4 version: 3.2.5 - react: - specifier: 18.2.0 - version: 18.2.0 react-day-picker: specifier: ^8.10.0 version: 8.10.0(date-fns@3.6.0)(react@18.2.0) - react-dom: - specifier: 18.2.0 - version: 18.2.0(react@18.2.0) - react-hook-form: - specifier: ^7.49.2 - version: 7.51.1(react@18.2.0) tailwindcss: specifier: 3.4.1 version: 3.4.1 @@ -4226,22 +4193,26 @@ packages: resolution: {integrity: sha512-BNzC5XhCzzCaggJ8s53DP+WeHHGT/NfTsx2wUSSGKR2/ikLFQTBCDzMvGz/PxYMqRko/LwncQtKXGOYp1PkPaw==} dependencies: '@supabase/node-fetch': 2.6.15 + dev: false /@supabase/gotrue-js@2.62.2: resolution: {integrity: sha512-AP6e6W9rQXFTEJ7sTTNYQrNf0LCcnt1hUW+RIgUK+Uh3jbWvcIST7wAlYyNZiMlS9+PYyymWQ+Ykz/rOYSO0+A==} dependencies: '@supabase/node-fetch': 2.6.15 + dev: false /@supabase/node-fetch@2.6.15: resolution: {integrity: sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==} engines: {node: 4.x || >=6.0.0} dependencies: whatwg-url: 5.0.0 + dev: false /@supabase/postgrest-js@1.9.2: resolution: {integrity: sha512-I6yHo8CC9cxhOo6DouDMy9uOfW7hjdsnCxZiaJuIVZm1dBGTFiQPgfMa9zXCamEWzNyWRjZvupAUuX+tqcl5Sw==} dependencies: '@supabase/node-fetch': 2.6.15 + dev: false /@supabase/realtime-js@2.9.3: resolution: {integrity: sha512-lAp50s2n3FhGJFq+wTSXLNIDPw5Y0Wxrgt44eM5nLSA3jZNUUP3Oq2Ccd1CbZdVntPCWLZvJaU//pAd2NE+QnQ==} @@ -4253,6 +4224,7 @@ packages: transitivePeerDependencies: - bufferutil - utf-8-validate + dev: false /@supabase/ssr@0.1.0(@supabase/supabase-js@2.40.0): resolution: {integrity: sha512-bIVrkqjAK5G3KjkIMKYKtAOlCgRRplEWjrlyRyXSOYtgDieiOhk2ZyNAPsEOa1By9OZVxuX5eAW1fitdnuxayw==} @@ -4268,6 +4240,7 @@ packages: resolution: {integrity: sha512-OpLoDRjFwClwc2cjTJZG8XviTiQH4Ik8sCiMK5v7et0MDu2QlXjCAW3ljxJB5+z/KazdMOTnySi+hysxWUPu3w==} dependencies: '@supabase/node-fetch': 2.6.15 + dev: false /@supabase/supabase-js@2.40.0: resolution: {integrity: sha512-XF8OrsA13DYBL074sHH4M0NhXJCWhQ0R5JbVeVUytZ0coPMS9krRdzxl+0c4z4LLjqbm/Wdz0UYlTYM9MgnDag==} @@ -4281,6 +4254,7 @@ packages: transitivePeerDependencies: - bufferutil - utf-8-validate + dev: false /@swc/core-darwin-arm64@1.3.101: resolution: {integrity: sha512-mNFK+uHNPRXSnfTOG34zJOeMl2waM4hF4a2NY7dkMXrPqw9CoJn4MwTXJcyMiSz1/BnNjjTCHF3Yhj0jPxmkzQ==} @@ -4716,6 +4690,7 @@ packages: /@types/phoenix@1.6.4: resolution: {integrity: sha512-B34A7uot1Cv0XtaHRYDATltAdKx0BvVKNgYNqE4WjtPUa4VQJM7kxeXcVKaH+KS+kCmZ+6w+QaUdcljiheiBJA==} + dev: false /@types/prismjs@1.26.3: resolution: {integrity: sha512-A0D0aTXvjlqJ5ZILMz3rNfDBOx9hHxLZYv2by47Sm/pqW35zzjusrZTryatjN/Rf8Us2gZrJD+KeHbUSTux1Cw==} @@ -4786,6 +4761,7 @@ packages: resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==} dependencies: '@types/node': 20.11.30 + dev: false /@typescript-eslint/eslint-plugin@7.4.0(@typescript-eslint/parser@7.4.0)(eslint@8.57.0)(typescript@5.4.3): resolution: {integrity: sha512-yHMQ/oFaM7HZdVrVm/M2WHaNPgyuJH4WelkSVEWSSsir34kxW2kDJCxlXRhhGWEsMN0WAW/vLpKfKVcm8k+MPw==} @@ -9748,7 +9724,7 @@ packages: dependencies: nanoid: 3.3.7 picocolors: 1.0.0 - source-map-js: 1.0.2 + source-map-js: 1.2.0 dev: false /prelude-ls@1.2.1: @@ -10034,6 +10010,7 @@ packages: react: ^16.8.0 || ^17 || ^18 dependencies: react: 18.2.0 + dev: false /react-i18next@14.1.0(i18next@23.10.1)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-3KwX6LHpbvGQ+sBEntjV4sYW3Zovjjl3fpoHbUwSgFHf0uRBcbeCBLR5al6ikncI5+W0EFb71QXZmfop+J6NrQ==} @@ -11113,7 +11090,7 @@ packages: dependencies: '@alloc/quick-lru': 5.2.0 arg: 5.0.2 - chokidar: 3.5.3 + chokidar: 3.6.0 didyoumean: 1.2.2 dlv: 1.1.3 fast-glob: 3.3.2 @@ -11296,6 +11273,7 @@ packages: /tr46@0.0.3: resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==} + dev: false /tree-cli@0.6.7: resolution: {integrity: sha512-jfnB5YKY6Glf6bsFmQ9W97TtkPVLnHsjOR6ZdRf4zhyFRQeLheasvzE5XBJI2Hxt7ZyMyIbXUV7E2YPZbixgtA==} @@ -11872,6 +11850,7 @@ packages: /webidl-conversions@3.0.1: resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} + dev: false /webpack-bundle-analyzer@4.10.1: resolution: {integrity: sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==} @@ -11946,6 +11925,7 @@ packages: dependencies: tr46: 0.0.3 webidl-conversions: 3.0.1 + dev: false /which-boxed-primitive@1.0.2: resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==} @@ -12087,6 +12067,7 @@ packages: optional: true utf-8-validate: optional: true + dev: false /xmlhttprequest-ssl@2.0.0: resolution: {integrity: sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==}