@greatapps/common 1.1.219 → 1.1.221

package/src/components/account/ConfigurationsMyAccountModal.tsx

@@ -1,150 +1,150 @@
-'use client';
-
-import { IconLock, IconSettings2, IconUser, IconX } from '@tabler/icons-react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/data-display/Tabs';
-import { Button } from '../ui/buttons/Button';
-import { cn } from '../../infra/utils/clsx';
-import { AccountSectionType } from '../../enums/AccountSectionType';
-import { MyProfileSection } from './sections/MyProfileSection';
-import { PreferencesSection } from './sections/PreferencesSection';
-import { ChangePasswordSection } from './sections/ChangePasswordSection';
-import { SecuritySection } from './sections/SecuritySection';
-import useConfigurationsModal from './hooks/useConfigurationsModal';
-import useIsMobile from '../../hooks/useIsMobile';
-import { useAccountModals } from '../../store/useAccountModals';
-
-export default function ConfigurationsMyAccountModal() {
-  const {
-    activeModal,
-    config,
-    initialSection,
-    openDeleteAccount,
-    openIsntPossibleDelete,
-    close,
-  } = useAccountModals();
-
-  const open = activeModal === 'configurations';
-  const { hasActiveSubscription } = config;
-
-  const isMobile = useIsMobile();
-  const { activeSection, setActiveSection } = useConfigurationsModal({
-    isOpen: open,
-    initialSection,
-  });
-
-  const handleDeleteAccount = () => {
-    close();
-    if (hasActiveSubscription) {
-      openIsntPossibleDelete();
-    } else {
-      openDeleteAccount();
-    }
-  };
-
-  const tabTriggerClasses = cn(
-    'border-0! px-0 py-0',
-
-    'lg:rounded-md lg:flex lg:items-center lg:gap-2 lg:p-3 lg:justify-start lg:w-full',
-    'lg:bg-white lg:hover:bg-gray-100 lg:active:bg-gray-50 lg:border-0',
-    'lg:data-[state=active]:bg-gray-50',
-
-    'flex items-center gap-1.5 px-3 py-3 justify-center whitespace-nowrap',
-    'border-b-2 border-transparent',
-    'data-[state=active]:bg-gray-50 rounded-lg',
-
-    'text-gray-500 data-[state=active]:text-gray-950',
-    'hover:text-gray-900 transition-colors'
-  );
-
-  return (
-    <Dialog open={open} onOpenChange={close}>
-      <DialogContent
-        showCloseButton={!isMobile}
-        overlayClassName="bg-black/20 lg:bg-black/50"
-        className="
-          flex flex-col p-0 gap-0 max-w-full! overflow-x-hidden border-0
-          rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0!
-          lg:flex-row lg:w-[892px]! lg:max-w-[892px]! lg:h-[626px]! lg:rounded-lg lg:border
-          lg:top-[50%]! lg:bottom-auto! lg:left-[50%]! lg:right-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!"
-      >
-        <DialogHeader className="sr-only">
-          <DialogTitle>Configurações</DialogTitle>
-        </DialogHeader>
-        <div className="md:hidden flex items-center justify-between px-5 py-3 border-b border-gray-200">
-          <span className="text-gray-950 paragraph-medium-semibold">Configurações</span>
-          <button
-            type="button"
-            className="size-8 flex items-center justify-center text-gray-500 cursor-pointer"
-            onClick={close}
-          >
-            <IconX size={18} />
-          </button>
-        </div>
-        <Tabs
-          value={activeSection}
-          onValueChange={(value) => setActiveSection(value as AccountSectionType)}
-          orientation="vertical"
-          className="flex lg:flex-row flex-col w-full h-full flex-1 lg:h-full lg:pt-0 lg:gap-0"
-        >
-          <TabsList
-            className={cn(
-              'flex gap-0 bg-transparent border-b-0',
-
-              'lg:flex-col lg:items-stretch lg:justify-start lg:w-auto lg:min-w-60',
-              'lg:border-r lg:border-gray-200 lg:pl-5 lg:pr-5 lg:pt-5 lg:gap-5 lg:overflow-x-visible lg:self-stretch',
-
-              'flex-row items-center justify-start w-full overflow-x-auto scrollbar-hide shrink-0',
-              'px-4 py-3',
-              '[mask-image:linear-gradient(to_right,transparent,black_16px,black_calc(100%-24px),transparent)] lg:[mask-image:none]'
-            )}
-          >
-            <span className="hidden lg:block paragraph-medium-semibold text-gray-950 mb-0">
-              Configurações
-            </span>
-
-            <div className="lg:flex lg:flex-col flex flex-row lg:gap-0 gap-0 lg:w-full">
-              <TabsTrigger value={AccountSectionType.MY_PROFILE} className={tabTriggerClasses}>
-                <IconUser size={20} className="shrink-0" />
-                <span className="paragraph-small-medium">Meu perfil</span>
-              </TabsTrigger>
-
-              <TabsTrigger value={AccountSectionType.PREFERENCES} className={tabTriggerClasses}>
-                <IconSettings2 size={20} className="shrink-0" />
-                <span className="paragraph-small-medium">Preferências</span>
-              </TabsTrigger>
-
-              <TabsTrigger value={AccountSectionType.SECURITY} className={tabTriggerClasses}>
-                <IconLock size={20} className="shrink-0" />
-                <span className="paragraph-small-medium">Segurança</span>
-              </TabsTrigger>
-            </div>
-          </TabsList>
-
-          <div className="w-full flex-1 min-h-0 lg:h-full overflow-hidden lg:overflow-visible relative">
-            <TabsContent value={AccountSectionType.MY_PROFILE} className="h-full! relative overflow-hidden">
-              <MyProfileSection onClose={close} />
-            </TabsContent>
-
-            <TabsContent value={AccountSectionType.SECURITY} className="h-full! relative overflow-hidden">
-              <SecuritySection
-                setActiveSection={setActiveSection}
-                onClose={close}
-                hasActiveSubscription={hasActiveSubscription}
-                onDeleteAccount={handleDeleteAccount}
-              />
-            </TabsContent>
-
-            <TabsContent value={AccountSectionType.CHANGE_PASSWORD} className="h-full! relative overflow-hidden">
-              <ChangePasswordSection onBack={() => setActiveSection(AccountSectionType.SECURITY)} />
-            </TabsContent>
-
-            <TabsContent value={AccountSectionType.PREFERENCES} className="h-full! relative overflow-hidden">
-              <PreferencesSection onClose={close} />
-            </TabsContent>
-          </div>
-        </Tabs>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { IconLock, IconSettings2, IconUser, IconX } from '@tabler/icons-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/data-display/Tabs';
+import { Button } from '../ui/buttons/Button';
+import { cn } from '../../infra/utils/clsx';
+import { AccountSectionType } from '../../enums/AccountSectionType';
+import { MyProfileSection } from './sections/MyProfileSection';
+import { PreferencesSection } from './sections/PreferencesSection';
+import { ChangePasswordSection } from './sections/ChangePasswordSection';
+import { SecuritySection } from './sections/SecuritySection';
+import useConfigurationsModal from './hooks/useConfigurationsModal';
+import useIsMobile from '../../hooks/useIsMobile';
+import { useAccountModals } from '../../store/useAccountModals';
+
+export default function ConfigurationsMyAccountModal() {
+  const {
+    activeModal,
+    config,
+    initialSection,
+    openDeleteAccount,
+    openIsntPossibleDelete,
+    close,
+  } = useAccountModals();
+
+  const open = activeModal === 'configurations';
+  const { hasActiveSubscription } = config;
+
+  const isMobile = useIsMobile();
+  const { activeSection, setActiveSection } = useConfigurationsModal({
+    isOpen: open,
+    initialSection,
+  });
+
+  const handleDeleteAccount = () => {
+    close();
+    if (hasActiveSubscription) {
+      openIsntPossibleDelete();
+    } else {
+      openDeleteAccount();
+    }
+  };
+
+  const tabTriggerClasses = cn(
+    'border-0! px-0 py-0',
+
+    'lg:rounded-md lg:flex lg:items-center lg:gap-2 lg:p-3 lg:justify-start lg:w-full',
+    'lg:bg-white lg:hover:bg-gray-100 lg:active:bg-gray-50 lg:border-0',
+    'lg:data-[state=active]:bg-gray-50',
+
+    'flex items-center gap-1.5 px-3 py-3 justify-center whitespace-nowrap',
+    'border-b-2 border-transparent',
+    'data-[state=active]:bg-gray-50 rounded-lg',
+
+    'text-gray-500 data-[state=active]:text-gray-950',
+    'hover:text-gray-900 transition-colors'
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={close}>
+      <DialogContent
+        showCloseButton={!isMobile}
+        overlayClassName="bg-black/20 lg:bg-black/50"
+        className="
+          flex flex-col p-0 gap-0 max-w-full! overflow-x-hidden border-0
+          rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0!
+          lg:flex-row lg:w-[892px]! lg:max-w-[892px]! lg:h-[626px]! lg:rounded-lg lg:border
+          lg:top-[50%]! lg:bottom-auto! lg:left-[50%]! lg:right-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!"
+      >
+        <DialogHeader className="sr-only">
+          <DialogTitle>Configurações</DialogTitle>
+        </DialogHeader>
+        <div className="md:hidden flex items-center justify-between px-5 py-3 border-b border-gray-200">
+          <span className="text-gray-950 paragraph-medium-semibold">Configurações</span>
+          <button
+            type="button"
+            className="size-8 flex items-center justify-center text-gray-500 cursor-pointer"
+            onClick={close}
+          >
+            <IconX size={18} />
+          </button>
+        </div>
+        <Tabs
+          value={activeSection}
+          onValueChange={(value) => setActiveSection(value as AccountSectionType)}
+          orientation="vertical"
+          className="flex lg:flex-row flex-col w-full h-full flex-1 lg:h-full lg:pt-0 lg:gap-0"
+        >
+          <TabsList
+            className={cn(
+              'flex gap-0 bg-transparent border-b-0',
+
+              'lg:flex-col lg:items-stretch lg:justify-start lg:w-auto lg:min-w-60',
+              'lg:border-r lg:border-gray-200 lg:pl-5 lg:pr-5 lg:pt-5 lg:gap-5 lg:overflow-x-visible lg:self-stretch',
+
+              'flex-row items-center justify-start w-full overflow-x-auto scrollbar-hide shrink-0',
+              'px-4 py-3',
+              '[mask-image:linear-gradient(to_right,transparent,black_16px,black_calc(100%-24px),transparent)] lg:[mask-image:none]'
+            )}
+          >
+            <span className="hidden lg:block paragraph-medium-semibold text-gray-950 mb-0">
+              Configurações
+            </span>
+
+            <div className="lg:flex lg:flex-col flex flex-row lg:gap-0 gap-0 lg:w-full">
+              <TabsTrigger value={AccountSectionType.MY_PROFILE} className={tabTriggerClasses}>
+                <IconUser size={20} className="shrink-0" />
+                <span className="paragraph-small-medium">Meu perfil</span>
+              </TabsTrigger>
+
+              <TabsTrigger value={AccountSectionType.PREFERENCES} className={tabTriggerClasses}>
+                <IconSettings2 size={20} className="shrink-0" />
+                <span className="paragraph-small-medium">Preferências</span>
+              </TabsTrigger>
+
+              <TabsTrigger value={AccountSectionType.SECURITY} className={tabTriggerClasses}>
+                <IconLock size={20} className="shrink-0" />
+                <span className="paragraph-small-medium">Segurança</span>
+              </TabsTrigger>
+            </div>
+          </TabsList>
+
+          <div className="w-full flex-1 min-h-0 lg:h-full overflow-hidden lg:overflow-visible relative">
+            <TabsContent value={AccountSectionType.MY_PROFILE} className="h-full! relative overflow-hidden">
+              <MyProfileSection onClose={close} />
+            </TabsContent>
+
+            <TabsContent value={AccountSectionType.SECURITY} className="h-full! relative overflow-hidden">
+              <SecuritySection
+                setActiveSection={setActiveSection}
+                onClose={close}
+                hasActiveSubscription={hasActiveSubscription}
+                onDeleteAccount={handleDeleteAccount}
+              />
+            </TabsContent>
+
+            <TabsContent value={AccountSectionType.CHANGE_PASSWORD} className="h-full! relative overflow-hidden">
+              <ChangePasswordSection onBack={() => setActiveSection(AccountSectionType.SECURITY)} />
+            </TabsContent>
+
+            <TabsContent value={AccountSectionType.PREFERENCES} className="h-full! relative overflow-hidden">
+              <PreferencesSection onClose={close} />
+            </TabsContent>
+          </div>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/ConfirmDeleteAccountModal.tsx

@@ -1,55 +1,55 @@
-'use client';
-
-import { IconAlertTriangle } from '@tabler/icons-react';
-import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { Button } from '../ui/buttons/Button';
-import { Toast } from '../ui/feedback/Toast';
-import { useAccountModals } from '../../store/useAccountModals';
-
-export default function ConfirmDeleteAccountModal() {
-  const { activeModal, pagesCount, close } = useAccountModals();
-  const open = activeModal === 'confirmDelete';
-
-  const handleConfirm = () => {
-    toast.custom((t) => (
-      <Toast variant="success" message="Conta excluída com sucesso" toastId={t} />
-    ));
-    close();
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={close}>
-      <DialogContent className="flex flex-col p-0 gap-0 max-w-[calc(100%-2rem)]! w-full rounded-lg border sm:max-w-[400px]! lg:max-w-[470px]! lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!">
-        <div className="flex flex-col gap-5 p-4 lg:p-5">
-          <DialogHeader className="p-0">
-            <DialogTitle className="paragraph-medium-semibold text-gray-950">
-              Uma pena te ver ir!
-            </DialogTitle>
-          </DialogHeader>
-
-          <div className="bg-red-50 p-4 lg:p-5 rounded-lg flex items-center gap-4">
-            <IconAlertTriangle size={20} className="text-red-500 shrink-0" strokeWidth={2} />
-            <p className="paragraph-small-regular text-gray-600">
-              Todas suas{' '}
-              <span className="font-semibold text-gray-950">{pagesCount} páginas</span>{' '}
-              serão deletadas permanentemente. Essa ação é{' '}
-              <span className="font-semibold text-gray-950">irreversível!</span>
-            </p>
-          </div>
-        </div>
-
-        <div className="h-px bg-gray-200" />
-
-        <div className="flex items-center gap-2 p-4 lg:p-5">
-          <Button className="h-10 flex-1" onClick={close}>
-            Manter minha conta
-          </Button>
-          <Button variant="secondary" className="h-10! flex-1" onClick={handleConfirm}>
-            Excluir mesmo assim
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Button } from '../ui/buttons/Button';
+import { Toast } from '../ui/feedback/Toast';
+import { useAccountModals } from '../../store/useAccountModals';
+
+export default function ConfirmDeleteAccountModal() {
+  const { activeModal, pagesCount, close } = useAccountModals();
+  const open = activeModal === 'confirmDelete';
+
+  const handleConfirm = () => {
+    toast.custom((t) => (
+      <Toast variant="success" message="Conta excluída com sucesso" toastId={t} />
+    ));
+    close();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={close}>
+      <DialogContent className="flex flex-col p-0 gap-0 max-w-[calc(100%-2rem)]! w-full rounded-lg border sm:max-w-[400px]! lg:max-w-[470px]! lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!">
+        <div className="flex flex-col gap-5 p-4 lg:p-5">
+          <DialogHeader className="p-0">
+            <DialogTitle className="paragraph-medium-semibold text-gray-950">
+              Uma pena te ver ir!
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="bg-red-50 p-4 lg:p-5 rounded-lg flex items-center gap-4">
+            <IconAlertTriangle size={20} className="text-red-500 shrink-0" strokeWidth={2} />
+            <p className="paragraph-small-regular text-gray-600">
+              Todas suas{' '}
+              <span className="font-semibold text-gray-950">{pagesCount} páginas</span>{' '}
+              serão deletadas permanentemente. Essa ação é{' '}
+              <span className="font-semibold text-gray-950">irreversível!</span>
+            </p>
+          </div>
+        </div>
+
+        <div className="h-px bg-gray-200" />
+
+        <div className="flex items-center gap-2 p-4 lg:p-5">
+          <Button className="h-10 flex-1" onClick={close}>
+            Manter minha conta
+          </Button>
+          <Button variant="secondary" className="h-10! flex-1" onClick={handleConfirm}>
+            Excluir mesmo assim
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/ConfirmGlobalPreferencesModal.tsx

@@ -1,66 +1,66 @@
-'use client';
-
-import { IconAlertTriangle } from '@tabler/icons-react';
-import { Button } from '../ui/buttons/Button';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from '../ui/overlay/Dialog';
-import { Separator } from '../ui/data-display/Separator';
-
-interface ConfirmGlobalPreferencesModalProps {
-  open: boolean;
-  onConfirm: () => void;
-  onCancel: () => void;
-}
-
-export default function ConfirmGlobalPreferencesModal({
-  open,
-  onConfirm,
-  onCancel,
-}: ConfirmGlobalPreferencesModalProps) {
-  return (
-    <Dialog open={open} onOpenChange={onCancel}>
-      <DialogContent className="flex flex-col p-0 gap-0 md:w-[386px]! lg:w-[386px]! max-w-[386px]! max-[386px]:w-[calc(100%-32px)]">
-        <DialogHeader className="sr-only">
-          <DialogTitle>Alterar preferências globais</DialogTitle>
-          <DialogDescription>
-            Confirmação de alteração de preferências globais da conta
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="flex flex-col gap-3 p-5">
-          <div className="flex items-center justify-center bg-gray-50 rounded-lg size-10">
-            <IconAlertTriangle size={24} className="text-gray-950" />
-          </div>
-          <div className="flex flex-col gap-2">
-            <span className="paragraph-medium-semibold text-gray-950">
-              Alterar preferências globais
-            </span>
-            <span className="paragraph-small-regular text-gray-600">
-              Você está alterando configurações que impactam{' '}
-              <span className="paragraph-small-semibold text-gray-950">
-                todos os usuários da conta
-              </span>
-              . Deseja confirmar?
-            </span>
-          </div>
-        </div>
-
-        <Separator className="w-full" />
-
-        <div className="flex items-center gap-2 p-5">
-          <Button onClick={onConfirm} className="h-10!">
-            Confirmar
-          </Button>
-          <Button variant="secondary" onClick={onCancel} className="h-10!">
-            Cancelar
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { Button } from '../ui/buttons/Button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '../ui/overlay/Dialog';
+import { Separator } from '../ui/data-display/Separator';
+
+interface ConfirmGlobalPreferencesModalProps {
+  open: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export default function ConfirmGlobalPreferencesModal({
+  open,
+  onConfirm,
+  onCancel,
+}: ConfirmGlobalPreferencesModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onCancel}>
+      <DialogContent className="flex flex-col p-0 gap-0 md:w-[386px]! lg:w-[386px]! max-w-[386px]! max-[386px]:w-[calc(100%-32px)]">
+        <DialogHeader className="sr-only">
+          <DialogTitle>Alterar preferências globais</DialogTitle>
+          <DialogDescription>
+            Confirmação de alteração de preferências globais da conta
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3 p-5">
+          <div className="flex items-center justify-center bg-gray-50 rounded-lg size-10">
+            <IconAlertTriangle size={24} className="text-gray-950" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <span className="paragraph-medium-semibold text-gray-950">
+              Alterar preferências globais
+            </span>
+            <span className="paragraph-small-regular text-gray-600">
+              Você está alterando configurações que impactam{' '}
+              <span className="paragraph-small-semibold text-gray-950">
+                todos os usuários da conta
+              </span>
+              . Deseja confirmar?
+            </span>
+          </div>
+        </div>
+
+        <Separator className="w-full" />
+
+        <div className="flex items-center gap-2 p-5">
+          <Button onClick={onConfirm} className="h-10!">
+            Confirmar
+          </Button>
+          <Button variant="secondary" onClick={onCancel} className="h-10!">
+            Cancelar
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}