zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: bump version to 2.20.1 in package.json and refactor layout and… (#404)

Browse Source 
* chore: bump version to 2.20.1 in package.json and refactor layout and form components

- Incremented application version from 2.20.0 to 2.20.1 in package.json.
- Refactored RootLayout to optimize asynchronous calls and introduced getRootClassName function for better class management.
- Updated font handling in getFontsClassName function to streamline class generation.
- Enhanced various authentication form components by replacing Input with EmailInput and PasswordInput for improved consistency and usability.
- Adjusted layout styles in AuthLayoutShell and other components for better responsiveness.

* fix: improve content rendering fallback logic in ContentRenderer component

- Enhanced the ContentRenderer function to explicitly check for the presence of a renderer before returning content.
- Added a fallback mechanism to return raw content as React nodes when no renderer is found, improving robustness and user experience.
This commit is contained in:
Giancarlo Buomprisco
2025-11-02 16:14:21 +07:00
committed by GitHub
parent 116d41a284
commit ac12c9355c
14 changed files with 248 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/web/app/layout.tsx
View File

@@ -1,6 +1,7 @@
import { headers } from 'next/headers';
import { Toaster } from '@kit/ui/sonner';
import { cn } from '@kit/ui/utils';
import { RootProviders } from '~/components/root-providers';
import { getFontsClassName } from '~/lib/fonts';
@@ -19,13 +20,17 @@ export default async function RootLayout({
}: {
children: React.ReactNode;
}) {
const { language } = await createI18nServerInstance();
const theme = await getRootTheme();
const className = getFontsClassName(theme);
const nonce = await getCspNonce();
const [theme, nonce, i18n] = await Promise.all([
getRootTheme(),
getCspNonce(),
createI18nServerInstance(),
]);
const className = getRootClassName(theme);
const language = i18n.language;
return (
<html lang={language} className={`${className} overscroll-y-none`}>
<html lang={language} className={className}>
<body>
<RootProviders theme={theme} lang={language} nonce={nonce}>
{children}
@@ -37,6 +42,15 @@ export default async function RootLayout({
);
}
function getRootClassName(theme: string) {
const fontsClassName = getFontsClassName(theme);
return cn(
'bg-background min-h-screen overscroll-y-none antialiased',
fontsClassName,
);
}
async function getCspNonce() {
const headersStore = await headers();

2
apps/web/lib/fonts.ts
View File

@@ -42,7 +42,7 @@ export function getFontsClassName(theme?: string) {
[],
);
return cn('bg-background min-h-screen antialiased', ...font, {
return cn(...font, {
dark,
light,
});

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "next-supabase-saas-kit-turbo",
"version": "2.20.0",
"version": "2.20.1",
"private": true,
"sideEffects": false,
"engines": {

49
packages/cms/core/src/content-renderer.tsx
View File

@@ -1,4 +1,5 @@
import type { CmsType } from '@kit/cms-types';
import { CmsType } from '@kit/cms-types';
import { createRegistry } from '@kit/shared/registry';
const CMS_CLIENT = process.env.CMS_CLIENT as CmsType;
@@ -7,42 +8,34 @@ interface ContentRendererProps {
type?: CmsType;
}
// Create a registry for CMS client implementations
const cmsContentRendererRegistry = createRegistry<
React.ComponentType<ContentRendererProps>,
CmsType
>();
export async function ContentRenderer({
content,
type = CMS_CLIENT,
}: ContentRendererProps) {
const Renderer = await getContentRenderer(type);
const Renderer = await cmsContentRendererRegistry.get(type);
return Renderer ? <Renderer content={content} /> : null;
if (Renderer) {
return <Renderer content={content} />;
}
// fallback to the raw content if no renderer is found
return content as React.ReactNode;
}
/**
* Gets the content renderer for the specified CMS client.
*
* @param {CmsType} type - The type of CMS client.
*/
async function getContentRenderer(type: CmsType) {
switch (type) {
case 'keystatic': {
const { KeystaticContentRenderer } = await import(
'@kit/keystatic/renderer'
);
cmsContentRendererRegistry.register('keystatic', async () => {
const { KeystaticContentRenderer } = await import('@kit/keystatic/renderer');
return KeystaticContentRenderer;
}
});
case 'wordpress': {
const { WordpressContentRenderer } = await import(
'@kit/wordpress/renderer'
);
cmsContentRendererRegistry.register('wordpress', async () => {
const { WordpressContentRenderer } = await import('@kit/wordpress/renderer');
return WordpressContentRenderer;
}
default: {
console.error(`Unknown CMS client: ${type as string}`);
return null;
}
}
}
});

2
packages/features/auth/src/components/auth-layout.tsx
View File

@@ -21,7 +21,7 @@ export function AuthLayoutShell({
<div
className={cn(
'bg-background flex w-full max-w-[23rem] flex-col gap-y-6 rounded-lg px-6 md:w-8/12 md:px-8 md:py-6 lg:w-5/12 lg:px-8 xl:w-4/12 xl:py-8',
'bg-background flex w-full max-w-[22rem] flex-col gap-y-6 rounded-lg px-6 md:w-8/12 md:px-8 md:py-6 lg:w-5/12 lg:px-8 xl:w-4/12 xl:py-8',
contentClassName,
)}
>

30
packages/features/auth/src/components/email-input.tsx Normal file
View File

@@ -0,0 +1,30 @@
'use client';
import { Mail } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from '@kit/ui/input-group';
export function EmailInput(props: React.ComponentProps<'input'>) {
const { t } = useTranslation('auth');
return (
<InputGroup className="dark:bg-background">
<InputGroupAddon>
<Mail className="h-4 w-4" />
</InputGroupAddon>
<InputGroupInput
data-test={'email-input'}
required
type="email"
placeholder={t('emailPlaceholder')}
{...props}
/>
</InputGroup>
);
}

11
packages/features/auth/src/components/existing-account-hint.tsx
View File

@@ -70,11 +70,7 @@ export function ExistingAccountHintImpl({
return (
<If condition={Boolean(methodDescription)}>
<Alert
data-test={'existing-account-hint'}
variant="info"
className={className}
>
<Alert data-test={'existing-account-hint'} className={className}>
<UserCheck className="h-4 w-4" />
<AlertDescription>
@@ -84,10 +80,7 @@ export function ExistingAccountHintImpl({
components={{
method: <span className="font-medium" />,
signInLink: (
<Link
href={signInPath}
className="font-medium underline hover:no-underline"
/>
<Link href={signInPath} className="font-medium underline" />
),
}}
/>

10
packages/features/auth/src/components/magic-link-auth-container.tsx
View File

@@ -19,12 +19,12 @@ import {
FormMessage,
} from '@kit/ui/form';
import { If } from '@kit/ui/if';
import { Input } from '@kit/ui/input';
import { toast } from '@kit/ui/sonner';
import { Trans } from '@kit/ui/trans';
import { useCaptcha } from '../captcha/client';
import { useLastAuthMethod } from '../hooks/use-last-auth-method';
import { EmailInput } from './email-input';
import { TermsAndConditionsFormField } from './terms-and-conditions-form-field';
export function MagicLinkAuthContainer({
@@ -118,13 +118,7 @@ export function MagicLinkAuthContainer({
</FormLabel>
<FormControl>
<Input
data-test={'email-input'}
required
type="email"
placeholder={t('auth:emailPlaceholder')}
{...field}
/>
<EmailInput data-test="email-input" {...field} />
</FormControl>
<FormMessage />

10
packages/features/auth/src/components/otp-sign-in-container.tsx
View File

@@ -17,7 +17,6 @@ import {
FormItem,
FormMessage,
} from '@kit/ui/form';
import { Input } from '@kit/ui/input';
import {
InputOTP,
InputOTPGroup,
@@ -30,6 +29,7 @@ import { Trans } from '@kit/ui/trans';
import { useCaptcha } from '../captcha/client';
import { useLastAuthMethod } from '../hooks/use-last-auth-method';
import { AuthErrorAlert } from './auth-error-alert';
import { EmailInput } from './email-input';
const EmailSchema = z.object({ email: z.string().email() });
const OtpSchema = z.object({ token: z.string().min(6).max(6) });
@@ -216,13 +216,7 @@ function OtpEmailForm({
render={({ field }) => (
<FormItem>
<FormControl>
<Input
required
type="email"
placeholder="email@example.com"
data-test="otp-email-input"
{...field}
/>
<EmailInput data-test="otp-email-input" {...field} />
</FormControl>
<FormMessage />

46
packages/features/auth/src/components/password-input.tsx Normal file
View File

@@ -0,0 +1,46 @@
'use client';
import { useState } from 'react';
import { Eye, EyeOff, Lock } from 'lucide-react';
import { Button } from '@kit/ui/button';
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from '@kit/ui/input-group';
export function PasswordInput(props: React.ComponentProps<'input'>) {
const [showPassword, setShowPassword] = useState(false);
return (
<InputGroup className="dark:bg-background">
<InputGroupAddon>
<Lock className="h-4 w-4" />
</InputGroupAddon>
<InputGroupInput
data-test="password-input"
type={showPassword ? 'text' : 'password'}
placeholder={'************'}
{...props}
/>
<InputGroupAddon align="inline-end">
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? (
<EyeOff className="h-4 w-4" />
) : (
<Eye className="h-4 w-4" />
)}
</Button>
</InputGroupAddon>
</InputGroup>
);
}

36
packages/features/auth/src/components/password-sign-in-form.tsx
View File

@@ -3,7 +3,7 @@
import Link from 'next/link';
import { zodResolver } from '@hookform/resolvers/zod';
import { ArrowRight } from 'lucide-react';
import { ArrowRight, Mail } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import type { z } from 'zod';
@@ -14,14 +14,18 @@ import {
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@kit/ui/form';
import { If } from '@kit/ui/if';
import { Input } from '@kit/ui/input';
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from '@kit/ui/input-group';
import { Trans } from '@kit/ui/trans';
import { PasswordSignInSchema } from '../schemas/password-sign-in.schema';
import { PasswordInput } from './password-input';
export function PasswordSignInForm({
onSubmit,
@@ -48,23 +52,26 @@ export function PasswordSignInForm({
className={'flex w-full flex-col gap-y-4'}
onSubmit={form.handleSubmit(onSubmit)}
>
<div className={'flex flex-col space-y-2.5'}>
<FormField
control={form.control}
name={'email'}
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans i18nKey={'common:emailAddress'} />
</FormLabel>
<FormControl>
<Input
<InputGroup className="dark:bg-background">
<InputGroupAddon>
<Mail className="h-4 w-4" />
</InputGroupAddon>
<InputGroupInput
data-test={'email-input'}
required
type="email"
placeholder={t('emailPlaceholder')}
{...field}
/>
</InputGroup>
</FormControl>
<FormMessage />
@@ -77,18 +84,8 @@ export function PasswordSignInForm({
name={'password'}
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans i18nKey={'common:password'} />
</FormLabel>
<FormControl>
<Input
required
data-test={'password-input'}
type="password"
placeholder={''}
{...field}
/>
<PasswordInput {...field} />
</FormControl>
<FormMessage />
@@ -109,6 +106,7 @@ export function PasswordSignInForm({
</FormItem>
)}
/>
</div>
<Button
data-test="auth-submit-button"

51
packages/features/auth/src/components/password-sign-up-form.tsx
View File

@@ -3,7 +3,6 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { ArrowRight } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { Button } from '@kit/ui/button';
import {
@@ -12,14 +11,14 @@ import {
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@kit/ui/form';
import { If } from '@kit/ui/if';
import { Input } from '@kit/ui/input';
import { Trans } from '@kit/ui/trans';
import { PasswordSignUpSchema } from '../schemas/password-sign-up.schema';
import { EmailInput } from './email-input';
import { PasswordInput } from './password-input';
import { TermsAndConditionsFormField } from './terms-and-conditions-form-field';
interface PasswordSignUpFormProps {
@@ -43,8 +42,6 @@ export function PasswordSignUpForm({
onSubmit,
loading,
}: PasswordSignUpFormProps) {
const { t } = useTranslation();
const form = useForm({
resolver: zodResolver(PasswordSignUpSchema),
defaultValues: {
@@ -60,23 +57,14 @@ export function PasswordSignUpForm({
className={'flex w-full flex-col gap-y-4'}
onSubmit={form.handleSubmit(onSubmit)}
>
<div className={'flex flex-col space-y-2.5'}>
<FormField
control={form.control}
name={'email'}
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans i18nKey={'common:emailAddress'} />
</FormLabel>
<FormControl>
<Input
data-test={'email-input'}
required
type="email"
placeholder={t('emailPlaceholder')}
{...field}
/>
<EmailInput data-test={'email-input'} {...field} />
</FormControl>
<FormMessage />
@@ -89,19 +77,8 @@ export function PasswordSignUpForm({
name={'password'}
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans i18nKey={'common:password'} />
</FormLabel>
<FormControl>
<Input
required
data-test={'password-input'}
type="password"
autoComplete="new-password"
placeholder={''}
{...field}
/>
<PasswordInput {...field} />
</FormControl>
<FormMessage />
@@ -114,28 +91,22 @@ export function PasswordSignUpForm({
name={'repeatPassword'}
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans i18nKey={'auth:repeatPassword'} />
</FormLabel>
<FormControl>
<Input
required
<PasswordInput
data-test={'repeat-password-input'}
type="password"
placeholder={''}
{...field}
/>
</FormControl>
<FormMessage />
<FormDescription className={'pb-2 text-xs'}>
<Trans i18nKey={'auth:repeatPasswordHint'} />
<FormDescription>
<Trans i18nKey={'auth:repeatPasswordDescription'} />
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</div>
<If condition={displayTermsCheckbox}>
<TermsAndConditionsFormField />

14
packages/features/auth/src/components/resend-auth-link-form.tsx
View File

@@ -13,12 +13,12 @@ import {
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@kit/ui/form';
import { Input } from '@kit/ui/input';
import { Trans } from '@kit/ui/trans';
import { useCaptcha } from '../captcha/client';
import { EmailInput } from './email-input';
export function ResendAuthLinkForm(props: {
redirectPath?: string;
@@ -71,20 +71,18 @@ export function ResendAuthLinkForm(props: {
{captcha.field}
<FormField
name={'email'}
render={({ field }) => {
return (
<FormItem>
<FormLabel>
<Trans i18nKey={'common:emailAddress'} />
</FormLabel>
<FormControl>
<Input type="email" required {...field} />
<EmailInput data-test="email-input" {...field} />
</FormControl>
<FormMessage />
</FormItem>
);
}}
name={'email'}
/>
<Button disabled={resendLink.isPending}>

27
packages/features/auth/src/components/update-password-form.tsx
View File

@@ -15,16 +15,16 @@ import { Button } from '@kit/ui/button';
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@kit/ui/form';
import { Heading } from '@kit/ui/heading';
import { Input } from '@kit/ui/input';
import { Trans } from '@kit/ui/trans';
import { PasswordResetSchema } from '../schemas/password-reset.schema';
import { PasswordInput } from './password-input';
export function UpdatePasswordForm(params: {
redirectTo: string;
@@ -72,22 +72,13 @@ export function UpdatePasswordForm(params: {
toast.success(t('account:updatePasswordSuccessMessage'));
})}
>
<div className={'flex-col space-y-4'}>
<div className={'flex-col space-y-2.5'}>
<FormField
name={'password'}
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans i18nKey={'common:password'} />
</FormLabel>
<FormControl>
<Input
required
type="password"
autoComplete={'new-password'}
{...field}
/>
<PasswordInput autoComplete={'new-password'} {...field} />
</FormControl>
<FormMessage />
@@ -99,14 +90,14 @@ export function UpdatePasswordForm(params: {
name={'repeatPassword'}
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans i18nKey={'common:repeatPassword'} />
</FormLabel>
<FormControl>
<Input required type="password" {...field} />
<PasswordInput autoComplete={'new-password'} {...field} />
</FormControl>
<FormDescription>
<Trans i18nKey={'common:repeatPassword'} />
</FormDescription>
<FormMessage />
</FormItem>
)}