@m5kdev/web-ui 0.1.4 → 0.2.0

package/src/modules/auth/components/OrganizationSettingsRoute.tsx

@@ -1,280 +0,0 @@
-import { Button, Card, CardBody, CardHeader, Chip, Input, Spinner, Textarea } from "@heroui/react";
-import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
-import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-
-type OrganizationDetails = {
-  id: string;
-  name: string;
-  slug: string;
-  logo?: string | null;
-  metadata?: Record<string, unknown> | null;
-};
-
-export type OrganizationSettingsRouteLabels = {
-  settingsTitle: string;
-  settingsDescription: string;
-  settingsNoActive: string;
-  settingsManageOnly: string;
-  formName: string;
-  formSlug: string;
-  formMetadata: string;
-  formMetadataInvalidJson: string;
-  formMetadataInvalid: string;
-  saveButton: string;
-  updateSuccess: string;
-  updateError: string;
-  loadError: string;
-};
-
-export type OrganizationSettingsRouteProps = {
-  managerRoles?: string[];
-  onInvalidateScopedQueries?: () => void | Promise<void>;
-};
-
-function OrganizationStateCard({ title, message }: { title: string; message: string }) {
-  return (
-    <div className="p-6">
-      <Card>
-        <CardHeader className="text-lg font-semibold">{title}</CardHeader>
-        <CardBody>{message}</CardBody>
-      </Card>
-    </div>
-  );
-}
-
-function useOrganizationAccess({
-  managerRoles,
-  onInvalidateScopedQueries,
-}: Pick<OrganizationSettingsRouteProps, "managerRoles" | "onInvalidateScopedQueries">) {
-  const { data: session, registerSession } = useSession();
-  const queryClient = useQueryClient();
-
-  const activeOrganizationId = session?.session.activeOrganizationId ?? "";
-  const activeOrganizationRole =
-    (session?.session as { activeOrganizationRole?: string } | undefined)?.activeOrganizationRole ??
-    "";
-  const managerRoleSet = useMemo(() => new Set(managerRoles ?? ["admin", "owner"]), [managerRoles]);
-  const canManageOrganization = managerRoleSet.has(activeOrganizationRole);
-
-  const refreshOrganizationQueries = useCallback(async () => {
-    await Promise.allSettled([
-      queryClient.invalidateQueries({ queryKey: ["auth-organization-list"] }),
-      queryClient.invalidateQueries({
-        queryKey: ["auth-organization-details", activeOrganizationId],
-      }),
-      queryClient.invalidateQueries({
-        queryKey: ["auth-organization-members", activeOrganizationId],
-      }),
-      queryClient.invalidateQueries({
-        queryKey: ["auth-organization-invitations", activeOrganizationId],
-      }),
-    ]);
-
-    registerSession(() => {
-      void onInvalidateScopedQueries?.();
-    });
-  }, [activeOrganizationId, onInvalidateScopedQueries, queryClient, registerSession]);
-
-  return {
-    activeOrganizationId,
-    activeOrganizationRole,
-    canManageOrganization,
-    refreshOrganizationQueries,
-  };
-}
-
-function useOrganizationConfig() {
-  const { t } = useTranslation();
-
-  const translatedLabels = useMemo<OrganizationSettingsRouteLabels>(
-    () => ({
-      settingsTitle: t("web-ui:organization.settings.title"),
-      settingsDescription: t("web-ui:organization.settings.description"),
-      settingsNoActive: t("web-ui:organization.settings.noActive"),
-      settingsManageOnly: t("web-ui:organization.settings.manageOnly"),
-      formName: t("web-ui:organization.settings.form.name"),
-      formSlug: t("web-ui:organization.settings.form.slug"),
-      formMetadata: t("web-ui:organization.settings.form.metadata"),
-      formMetadataInvalidJson: t("web-ui:organization.settings.form.metadataInvalidJson"),
-      formMetadataInvalid: t("web-ui:organization.settings.form.metadataInvalid"),
-      saveButton: t("web-ui:organization.settings.button.save"),
-      updateSuccess: t("web-ui:organization.settings.updateSuccess"),
-      updateError: t("web-ui:organization.settings.updateError"),
-      loadError: t("web-ui:organization.settings.loadError"),
-    }),
-    [t]
-  );
-
-  const translatedRoleLabels = useMemo<Record<string, string>>(
-    () => ({
-      member: t("web-ui:organization.roles.member"),
-      admin: t("web-ui:organization.roles.admin"),
-      owner: t("web-ui:organization.roles.owner"),
-    }),
-    [t]
-  );
-
-  return { resolvedLabels: translatedLabels, resolvedRoleLabels: translatedRoleLabels };
-}
-
-export function OrganizationSettingsRoute({
-  managerRoles,
-  onInvalidateScopedQueries,
-}: OrganizationSettingsRouteProps) {
-  const { resolvedLabels, resolvedRoleLabels } = useOrganizationConfig();
-
-  const {
-    activeOrganizationId,
-    activeOrganizationRole,
-    canManageOrganization,
-    refreshOrganizationQueries,
-  } = useOrganizationAccess({ managerRoles, onInvalidateScopedQueries });
-
-  const [organizationName, setOrganizationName] = useState("");
-  const [organizationSlug, setOrganizationSlug] = useState("");
-  const [organizationMetadata, setOrganizationMetadata] = useState("{}");
-  const [isSavingOrganization, setIsSavingOrganization] = useState(false);
-
-  const organizationQuery = useQuery({
-    queryKey: ["auth-organization-details", activeOrganizationId],
-    enabled: Boolean(activeOrganizationId && canManageOrganization),
-    queryFn: async () => {
-      const { data, error } = await authClient.organization.getFullOrganization({
-        query: {
-          organizationId: activeOrganizationId,
-          membersLimit: 200,
-        },
-      });
-      if (error) {
-        throw new Error(error.message ?? resolvedLabels.loadError);
-      }
-      return data as OrganizationDetails | null;
-    },
-  });
-
-  useEffect(() => {
-    const organization = organizationQuery.data;
-    if (!organization) {
-      return;
-    }
-
-    setOrganizationName(organization.name ?? "");
-    setOrganizationSlug(organization.slug ?? "");
-    setOrganizationMetadata(JSON.stringify(organization.metadata ?? {}, null, 2));
-  }, [organizationQuery.data]);
-
-  const onUpdateOrganization = async () => {
-    if (!canManageOrganization || !activeOrganizationId) {
-      return;
-    }
-
-    try {
-      setIsSavingOrganization(true);
-      let parsedMetadata: Record<string, unknown>;
-      try {
-        parsedMetadata = organizationMetadata.trim()
-          ? (JSON.parse(organizationMetadata) as Record<string, unknown>)
-          : {};
-      } catch (parseError) {
-        const message =
-          parseError instanceof SyntaxError
-            ? resolvedLabels.formMetadataInvalidJson
-            : parseError instanceof Error
-              ? parseError.message
-              : resolvedLabels.formMetadataInvalid;
-        throw new Error(message);
-      }
-
-      const { error } = await authClient.organization.update({
-        organizationId: activeOrganizationId,
-        data: {
-          name: organizationName.trim(),
-          slug: organizationSlug.trim(),
-          metadata: parsedMetadata,
-        },
-      });
-
-      if (error) {
-        throw new Error(error.message ?? resolvedLabels.updateError);
-      }
-
-      await refreshOrganizationQueries();
-      toast.success(resolvedLabels.updateSuccess);
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : resolvedLabels.updateError);
-    } finally {
-      setIsSavingOrganization(false);
-    }
-  };
-
-  if (!activeOrganizationId) {
-    return (
-      <OrganizationStateCard
-        title={resolvedLabels.settingsTitle}
-        message={resolvedLabels.settingsNoActive}
-      />
-    );
-  }
-
-  if (!canManageOrganization) {
-    return (
-      <OrganizationStateCard
-        title={resolvedLabels.settingsTitle}
-        message={resolvedLabels.settingsManageOnly}
-      />
-    );
-  }
-
-  if (organizationQuery.isLoading) {
-    return (
-      <div className="p-6 flex justify-center">
-        <Spinner />
-      </div>
-    );
-  }
-
-  return (
-    <div className="p-6">
-      <Card>
-        <CardHeader className="flex items-center justify-between">
-          <div className="flex flex-col">
-            <h2 className="text-xl font-semibold">{resolvedLabels.settingsTitle}</h2>
-            <p className="text-sm text-default-500">{resolvedLabels.settingsDescription}</p>
-          </div>
-          <Chip variant="flat" color="primary">
-            {resolvedRoleLabels[activeOrganizationRole] ??
-              activeOrganizationRole ??
-              resolvedRoleLabels.member}
-          </Chip>
-        </CardHeader>
-        <CardBody className="grid gap-3">
-          <Input
-            label={resolvedLabels.formName}
-            value={organizationName}
-            onValueChange={setOrganizationName}
-          />
-          <Input
-            label={resolvedLabels.formSlug}
-            value={organizationSlug}
-            onValueChange={setOrganizationSlug}
-          />
-          <Textarea
-            label={resolvedLabels.formMetadata}
-            value={organizationMetadata}
-            onValueChange={setOrganizationMetadata}
-            minRows={4}
-          />
-          <div className="flex justify-end">
-            <Button color="primary" isLoading={isSavingOrganization} onPress={onUpdateOrganization}>
-              {resolvedLabels.saveButton}
-            </Button>
-          </div>
-        </CardBody>
-      </Card>
-    </div>
-  );
-}

package/src/modules/auth/components/OrganizationSwitcher.tsx

@@ -1,148 +0,0 @@
-import { Button, Select, SelectItem } from "@heroui/react";
-import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
-import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
-import { useQuery } from "@tanstack/react-query";
-import { Building2 } from "lucide-react";
-import { useCallback, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router";
-import { toast } from "sonner";
-import { useSidebar } from "#components/ui/sidebar";
-import { cn } from "#utils";
-
-type OrganizationOption = {
-  id: string;
-  name: string;
-  slug: string;
-};
-
-export type OrganizationSwitcherProps = {
-  onInvalidateScopedQueries?: () => void | Promise<void>;
-  managerRoles?: string[];
-  managerPath?: string;
-  fallbackPath?: string;
-};
-
-export function OrganizationSwitcher({
-  onInvalidateScopedQueries,
-  managerRoles = ["admin", "owner"],
-  managerPath = "/organization/members",
-  fallbackPath = "/",
-}: OrganizationSwitcherProps) {
-  const { t } = useTranslation();
-  const { data: session, registerSession } = useSession();
-  const { open } = useSidebar();
-  const [isSwitching, setIsSwitching] = useState(false);
-  const activeOrganizationId = session?.session.activeOrganizationId ?? null;
-  const activeOrganizationRole =
-    (session?.session as { activeOrganizationRole?: string } | undefined)?.activeOrganizationRole ??
-    "";
-  const managerRoleSet = useMemo(() => new Set(managerRoles), [managerRoles]);
-  const canManageOrganization = managerRoleSet.has(activeOrganizationRole);
-
-  const {
-    data: organizations = [],
-    isError,
-    error,
-    refetch,
-  } = useQuery({
-    queryKey: ["auth-organization-list"],
-    queryFn: async () => {
-      const { data, error } = await authClient.organization.list();
-      if (error) {
-        throw new Error(
-          error.message ?? t("web-ui:organization.switcher.failedToLoadOrganizations")
-        );
-      }
-      return (data ?? []) as OrganizationOption[];
-    },
-  });
-
-  const handleSwitchOrganization = useCallback(
-    async (organizationId: string) => {
-      if (!organizationId || organizationId === activeOrganizationId || isSwitching) {
-        return;
-      }
-
-      try {
-        setIsSwitching(true);
-        const { error } = await authClient.organization.setActive({ organizationId });
-        if (error) {
-          throw new Error(
-            error.message ?? t("web-ui:organization.switcher.failedToSwitchOrganization")
-          );
-        }
-
-        registerSession(() => {
-          void onInvalidateScopedQueries?.();
-        });
-        toast.success(t("web-ui:organization.switcher.organizationSwitched"));
-      } catch (error) {
-        toast.error(
-          error instanceof Error
-            ? error.message
-            : t("web-ui:organization.switcher.failedToSwitchOrganization")
-        );
-      } finally {
-        setIsSwitching(false);
-      }
-    },
-    [activeOrganizationId, isSwitching, onInvalidateScopedQueries, registerSession, t]
-  );
-
-  if (!open) {
-    return (
-      <Button
-        as={Link}
-        to={canManageOrganization ? managerPath : fallbackPath}
-        variant="light"
-        size="sm"
-        isIconOnly
-        aria-label={t("web-ui:organization.switcher.label")}
-      >
-        <Building2 className="h-4 w-4" />
-      </Button>
-    );
-  }
-
-  if (isError) {
-    return (
-      <div className="mb-4 flex flex-col gap-2">
-        <p className="text-sm text-destructive">
-          {error instanceof Error
-            ? error.message
-            : t("web-ui:organization.switcher.failedToLoadOrganizations")}
-        </p>
-        <Button size="sm" variant="flat" onPress={() => void refetch()}>
-          {t("web-ui:organization.switcher.retry")}
-        </Button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="mb-4">
-      <Select
-        size="sm"
-        label={t("web-ui:organization.switcher.label")}
-        selectedKeys={activeOrganizationId ? [activeOrganizationId] : []}
-        disallowEmptySelection
-        isDisabled={isSwitching || organizations.length === 0}
-        onSelectionChange={(keys) => {
-          const selectedOrganizationId = Array.from(keys as Set<string>)[0];
-          if (selectedOrganizationId) {
-            void handleSwitchOrganization(selectedOrganizationId);
-          }
-        }}
-        classNames={{
-          trigger: cn("min-h-10"),
-          value: cn("text-sm"),
-        }}
-      >
-        {organizations.map((organization) => (
-          <SelectItem key={organization.id}>{organization.name}</SelectItem>
-        ))}
-      </Select>
-    </div>
-  );
-}

package/src/modules/auth/components/ProfileRoute.tsx

@@ -1,104 +0,0 @@
-import { Button, Card, CardBody, CardHeader, Input } from "@heroui/react";
-
-import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
-import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
-import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-import { z } from "zod";
-import { AvatarUpload } from "#components/AvatarUpload";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "#components/ui/form";
-
-const profileSchema = z.object({
-  name: z.string().min(2, "Name must be at least 2 characters"),
-  image: z.string().nullable(),
-});
-
-type ProfileFormValues = z.infer<typeof profileSchema>;
-
-export function ProfileRoute() {
-  const { t } = useTranslation();
-  const { data: session } = useSession();
-
-  const form = useForm<ProfileFormValues>({
-    defaultValues: {
-      name: session?.user?.name || "",
-      image: session?.user?.image || null,
-    },
-  });
-
-  function onSubmit(data: ProfileFormValues) {
-    authClient
-      .updateUser(data)
-      .then(() => {
-        toast.success(t("web-ui:profile.updated"), {
-          description: t("web-ui:profile.updateDescription"),
-        });
-      })
-      .catch(() => {
-        toast.error(t("web-ui:profile.error"), {
-          description: t("web-ui:profile.errorDescription"),
-        });
-      });
-  }
-
-  return (
-    <div className="container py-10 px-4">
-      <Card>
-        <CardHeader className="flex flex-col gap-1">
-          <p className="text-xl font-semibold">{t("web-ui:profile.settings.title")}</p>
-          <p className="text-sm text-default-600">{t("web-ui:profile.settings.description")}</p>
-        </CardHeader>
-        <CardBody>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-              <div className="flex justify-center">
-                <FormField
-                  control={form.control}
-                  name="image"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormControl>
-                        <AvatarUpload
-                          currentAvatarUrl={field.value}
-                          onUploadComplete={(url) => {
-                            console.log(url);
-                            field.onChange(url);
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Name</FormLabel>
-                    <FormControl>
-                      <Input placeholder={t("web-ui:profile.placeholders.name")} {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <Button type="submit">Save Changes</Button>
-            </form>
-          </Form>
-        </CardBody>
-      </Card>
-    </div>
-  );
-}