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

Refactor code and improve usage of package dependencies

Browse Source 
This commit updates the naming convention of icons from Lucide-React, moving some package dependencies to "peerDependencies" in 'team-accounts', 'admin' and 'auth'. Additionally, it includes tweaks to the development server command in apps/web package.json and adds a logger reference to the shared package. Furthermore, cleanup work has been performed within the features and UI packages, and new scripts to interact with Stripe have been added to the root package.json.
This commit is contained in:
giancarlo
2024-03-26 01:34:19 +08:00
parent 95793c42b4
commit ee507e0816
92 changed files with 1691 additions and 1270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/features/accounts/src/components/account-selector.tsx
View File

@@ -3,7 +3,7 @@
import { useEffect, useState } from 'react';
import { CaretSortIcon, PersonIcon } from '@radix-ui/react-icons';
import { CheckIcon, PlusIcon } from 'lucide-react';
import { Check, Plus } from 'lucide-react';
import { Avatar, AvatarFallback, AvatarImage } from '@kit/ui/avatar';
import { Button } from '@kit/ui/button';
@@ -19,7 +19,7 @@ import { If } from '@kit/ui/if';
import { Popover, PopoverContent, PopoverTrigger } from '@kit/ui/popover';
import { cn } from '@kit/ui/utils';
import { CreateOrganizationAccountDialog } from './create-organization-account-dialog';
import { CreateTeamAccountDialog } from '../../../team-accounts/src/components/create-team-account-dialog';
interface AccountSelectorProps {
accounts: Array<{
@@ -64,7 +64,7 @@ export function AccountSelector({
const Icon = (props: { item: string }) => {
return (
<CheckIcon
<Check
className={cn(
'ml-auto h-4 w-4',
value === props.item ? 'opacity-100' : 'opacity-0',
@@ -196,7 +196,7 @@ export function AccountSelector({
setOpen(false);
}}
>
<PlusIcon className="mr-2 h-4 w-4" />
<Plus className="mr-2 h-4 w-4" />
<span>Create Organization</span>
</Button>
@@ -208,7 +208,7 @@ export function AccountSelector({
</Popover>
<If condition={features.enableOrganizationCreation}>
<CreateOrganizationAccountDialog
<CreateTeamAccountDialog
isOpen={isCreatingAccount}
setIsOpen={setIsCreatingAccount}
/>

128
packages/features/accounts/src/components/create-organization-account-dialog.tsx
View File

@@ -1,128 +0,0 @@
import { useState, useTransition } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
import { Button } from '@kit/ui/button';
import { Dialog, DialogContent, DialogTitle } from '@kit/ui/dialog';
import {
Form,
FormControl,
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 { CreateOrganizationAccountSchema } from '../schema/create-organization.schema';
import { createOrganizationAccountAction } from '../server/accounts-server-actions';
export function CreateOrganizationAccountDialog(
props: React.PropsWithChildren<{
isOpen: boolean;
setIsOpen: (isOpen: boolean) => void;
}>,
) {
return (
<Dialog open={props.isOpen} onOpenChange={props.setIsOpen}>
<DialogContent>
<DialogTitle>
<Trans i18nKey={'organization:createOrganizationModalHeading'} />
</DialogTitle>
<CreateOrganizationAccountForm />
</DialogContent>
</Dialog>
);
}
function CreateOrganizationAccountForm() {
const [error, setError] = useState<boolean>();
const [pending, startTransition] = useTransition();
const form = useForm<z.infer<typeof CreateOrganizationAccountSchema>>({
defaultValues: {
name: '',
},
resolver: zodResolver(CreateOrganizationAccountSchema),
});
return (
<Form {...form}>
<form
onSubmit={form.handleSubmit((data) => {
startTransition(async () => {
try {
await createOrganizationAccountAction(data);
} catch (error) {
setError(true);
}
});
})}
>
<div className={'flex flex-col space-y-4'}>
<If condition={error}>
<CreateOrganizationErrorAlert />
</If>
<FormField
name={'name'}
render={({ field }) => {
return (
<FormItem>
<FormLabel>
<Trans i18nKey={'organization:organizationNameLabel'} />
</FormLabel>
<FormControl>
<Input
data-test={'create-organization-name-input'}
required
minLength={2}
maxLength={50}
placeholder={''}
{...field}
/>
</FormControl>
<FormDescription>
Your organization name should be unique and descriptive.
</FormDescription>
<FormMessage />
</FormItem>
);
}}
/>
<Button
data-test={'confirm-create-organization-button'}
disabled={pending}
>
<Trans i18nKey={'organization:createOrganizationSubmitLabel'} />
</Button>
</div>
</form>
</Form>
);
}
function CreateOrganizationErrorAlert() {
return (
<Alert variant={'destructive'}>
<AlertTitle>
<Trans i18nKey={'organization:createOrganizationErrorHeading'} />
</AlertTitle>
<AlertDescription>
<Trans i18nKey={'organization:createOrganizationErrorMessage'} />
</AlertDescription>
</Alert>
);
}

20
packages/features/accounts/src/components/personal-account-dropdown.tsx
View File

@@ -7,11 +7,11 @@ import Link from 'next/link';
import type { Session } from '@supabase/gotrue-js';
import {
EllipsisVerticalIcon,
HomeIcon,
LogOutIcon,
MessageCircleQuestionIcon,
ShieldIcon,
EllipsisVertical,
Home,
LogOut,
MessageCircleQuestion,
Shield,
} from 'lucide-react';
import {
@@ -87,7 +87,7 @@ export function PersonalAccountDropdown({
</span>
</div>
<EllipsisVerticalIcon
<EllipsisVertical
className={'text-muted-foreground hidden h-8 group-hover:flex'}
/>
</If>
@@ -119,7 +119,7 @@ export function PersonalAccountDropdown({
className={'s-full flex items-center space-x-2'}
href={paths.home}
>
<HomeIcon className={'h-5'} />
<Home className={'h-5'} />
<span>
<Trans i18nKey={'common:homeTabLabel'} />
@@ -131,7 +131,7 @@ export function PersonalAccountDropdown({
<DropdownMenuItem asChild>
<Link className={'s-full flex items-center space-x-2'} href={'/docs'}>
<MessageCircleQuestionIcon className={'h-5'} />
<MessageCircleQuestion className={'h-5'} />
<span>
<Trans i18nKey={'common:documentation'} />
@@ -147,7 +147,7 @@ export function PersonalAccountDropdown({
className={'s-full flex items-center space-x-2'}
href={'/admin'}
>
<ShieldIcon className={'h-5'} />
<Shield className={'h-5'} />
<span>Admin</span>
</Link>
@@ -162,7 +162,7 @@ export function PersonalAccountDropdown({
onClick={signOutRequested}
>
<span className={'flex w-full items-center space-x-2'}>
<LogOutIcon className={'h-5'} />
<LogOut className={'h-5'} />
<span>
<Trans i18nKey={'auth:signOut'} />

5
packages/features/accounts/src/components/personal-account-settings/account-danger-zone.tsx
View File

@@ -18,6 +18,8 @@ import { Heading } from '@kit/ui/heading';
import { Input } from '@kit/ui/input';
import { Trans } from '@kit/ui/trans';
import { deletePersonalAccountAction } from '../../server/personal-accounts-server-actions';
export function AccountDangerZone() {
return <DeleteAccountContainer />;
}
@@ -72,7 +74,7 @@ function DeleteAccountForm() {
return (
<Form {...form}>
<form
action={deleteUserAccountAction}
action={deletePersonalAccountAction}
className={'flex flex-col space-y-4'}
>
<div className={'flex flex-col space-y-6'}>
@@ -99,6 +101,7 @@ function DeleteAccountForm() {
<Input
data-test={'delete-account-input-field'}
required
name={'confirmation'}
type={'text'}
className={'w-full'}
placeholder={''}

2
packages/features/accounts/src/components/personal-account-settings/update-email-form-container.tsx
View File

@@ -9,7 +9,7 @@ export function UpdateEmailFormContainer(props: { callbackPath: string }) {
const { data: user, isPending } = useUser();
if (isPending) {
return <LoadingOverlay />;
return <LoadingOverlay fullPage={false} />;
}
if (!user) {

2
packages/features/accounts/src/components/personal-account-settings/update-password-container.tsx
View File

@@ -15,7 +15,7 @@ export function UpdatePasswordFormContainer(
const { data: user, isPending } = useUser();
if (isPending) {
return <LoadingOverlay />;
return <LoadingOverlay fullPage={false} />;
}
const canUpdatePassword = user.identities?.some(

5
packages/features/accounts/src/schema/create-organization.schema.ts
View File

@@ -1,5 +0,0 @@
import { z } from 'zod';
export const CreateOrganizationAccountSchema = z.object({
name: z.string().min(2).max(50),
});

69
packages/features/accounts/src/server/accounts-server-actions.ts
View File

@@ -1,69 +0,0 @@
'use server';
import { redirect } from 'next/navigation';
import { z } from 'zod';
import { Logger } from '@kit/shared/logger';
import { requireAuth } from '@kit/supabase/require-auth';
import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
import { CreateOrganizationAccountSchema } from '../schema/create-organization.schema';
import { AccountsService } from './services/accounts.service';
const ORGANIZATION_ACCOUNTS_PATH = z
.string({
required_error: 'Organization accounts path is required',
})
.min(1)
.parse(process.env.ORGANIZATION_ACCOUNTS_PATH);
export async function createOrganizationAccountAction(
params: z.infer<typeof CreateOrganizationAccountSchema>,
) {
const { name: accountName } = CreateOrganizationAccountSchema.parse(params);
const client = getSupabaseServerActionClient();
const accountsService = new AccountsService(client);
const session = await requireAuth(client);
if (session.error) {
redirect(session.redirectTo);
}
const createAccountResponse =
await accountsService.createNewOrganizationAccount({
name: accountName,
userId: session.data.user.id,
});
if (createAccountResponse.error) {
return handleError(
createAccountResponse.error,
`Error creating organization`,
);
}
const accountHomePath =
ORGANIZATION_ACCOUNTS_PATH + createAccountResponse.data.slug;
redirect(accountHomePath);
}
function handleError<Error = unknown>(
error: Error,
message: string,
organizationId?: string,
) {
const exception = error instanceof Error ? error.message : undefined;
Logger.error(
{
exception,
organizationId,
},
message,
);
throw new Error(message);
}

63
packages/features/accounts/src/server/personal-accounts-server-actions.ts Normal file
View File

@@ -0,0 +1,63 @@
'use server';
import { redirect } from 'next/navigation';
import { Logger } from '@kit/shared/logger';
import { requireAuth } from '@kit/supabase/require-auth';
import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
import { PersonalAccountsService } from './services/personal-accounts.service';
export async function deletePersonalAccountAction(formData: FormData) {
const confirmation = formData.get('confirmation');
if (confirmation !== 'DELETE') {
throw new Error('Confirmation required to delete account');
}
const session = await requireAuth(getSupabaseServerActionClient());
if (session.error) {
redirect(session.redirectTo);
}
const client = getSupabaseServerActionClient();
const service = new PersonalAccountsService(client);
const userId = session.data.user.id;
Logger.info(
{
userId,
name: 'accounts',
},
`Deleting personal account...`,
);
const deleteAccountResponse = await service.deletePersonalAccount({
userId,
});
if (deleteAccountResponse.error) {
Logger.error(
{
error: deleteAccountResponse.error,
name: 'accounts',
},
`Error deleting personal account`,
);
throw new Error('Error deleting personal account');
}
Logger.info(
{
userId,
name: 'accounts',
},
`Personal account deleted successfully.`,
);
await client.auth.signOut();
redirect('/');
}

46
packages/features/accounts/src/server/services/accounts.service.ts
View File

@@ -1,46 +0,0 @@
import { SupabaseClient } from '@supabase/supabase-js';
import { Logger } from '@kit/shared/logger';
import { Database } from '@kit/supabase/database';
/**
* @name AccountsService
* @description Service for managing accounts in the application
* @param Database - The Supabase database type to use
* @example
* const client = getSupabaseClient();
* const accountsService = new AccountsService(client);
*
* accountsService.createNewOrganizationAccount({
* name: 'My Organization',
* userId: '123',
* });
*/
export class AccountsService {
private readonly logger = new AccountsServiceLogger();
constructor(private readonly client: SupabaseClient<Database>) {}
createNewOrganizationAccount(params: { name: string; userId: string }) {
this.logger.logCreateNewOrganizationAccount(params);
return this.client.rpc('create_account', {
account_name: params.name,
});
}
}
class AccountsServiceLogger {
private namespace = 'accounts';
logCreateNewOrganizationAccount(params: { name: string; userId: string }) {
Logger.info(
this.withNamespace(params),
`Creating new organization account...`,
);
}
private withNamespace(params: object) {
return { ...params, name: this.namespace };
}
}

17
packages/features/accounts/src/server/services/personal-accounts.service.ts Normal file
View File

@@ -0,0 +1,17 @@
import { SupabaseClient } from '@supabase/supabase-js';
import { Database } from '@kit/supabase/database';
/**
* @name PersonalAccountsService
* @description Service for managing accounts in the application
* @param Database - The Supabase database type to use
* @example
* const client = getSupabaseClient();
* const accountsService = new AccountsService(client);
*/
export class PersonalAccountsService {
constructor(private readonly client: SupabaseClient<Database>) {}
async deletePersonalAccount(param: { userId: string }) {}
}