@djangocfg/layouts 2.1.426 → 2.1.427

package/src/layouts/SettingsLayout/store.ts

@@ -0,0 +1,47 @@
+'use client';
+
+/**
+ * SettingsDialog store.
+ *
+ * Holds only transient dialog state: whether it's open and which section is
+ * active. Section *definitions* are NOT stored here — they're passed as props
+ * to `<SettingsDialog />` so they can include live JSX/handlers from the host
+ * app. Consumers open the dialog imperatively via `useSettingsDialog()` or
+ * declaratively via the URL hash (see `useSettingsUrl`).
+ *
+ * Mirrors the established `useProfileDialogStore` pattern so both dialogs feel
+ * identical to wire up. ProfileLayout's store stays separate and untouched.
+ */
+
+import { create } from 'zustand';
+
+interface SettingsDialogState {
+  /** Whether the dialog is visible. */
+  isOpen: boolean;
+  /**
+   * Active section id, or null to mean "fall back to the first section".
+   * Kept separate from isOpen so a deep-link can preset the section before open.
+   */
+  activeSection: string | null;
+  /** Open the dialog, optionally on a specific section. */
+  open: (sectionId?: string) => void;
+  /** Close the dialog. Leaves activeSection as-is (cheap to reopen same spot). */
+  close: () => void;
+  /** Toggle visibility. */
+  toggle: () => void;
+  /** Switch the active section (no-op on open state). */
+  setSection: (sectionId: string) => void;
+}
+
+export const useSettingsDialogStore = create<SettingsDialogState>((set) => ({
+  isOpen: false,
+  activeSection: null,
+  open: (sectionId) =>
+    set((state) => ({
+      isOpen: true,
+      activeSection: sectionId ?? state.activeSection,
+    })),
+  close: () => set({ isOpen: false }),
+  toggle: () => set((state) => ({ isOpen: !state.isOpen })),
+  setSection: (sectionId) => set({ activeSection: sectionId }),
+}));

package/src/layouts/SettingsLayout/types.ts

@@ -0,0 +1,107 @@
+/**
+ * SettingsLayout — public types.
+ *
+ * A settings surface modeled on the Claude.ai modal: a left section-nav rail
+ * (grouped, searchable) and a right scrollable detail panel, rendered as a
+ * dialog and/or inline page. Sections are plain config objects so apps extend
+ * the surface by appending to an array — no JSX registry, no context plumbing.
+ */
+
+import type * as React from 'react';
+
+/**
+ * A logical grouping of sections in the nav rail. Groups render as a labelled
+ * cluster (e.g. "Account", "Workspace"). Unknown / omitted groups fall into the
+ * implicit default group, which renders first with no header.
+ */
+export interface SettingsGroup {
+  /** Stable key, referenced by `SettingsSection.group`. */
+  id: string;
+  /** Header shown above the group's items. Omit for an unlabelled cluster. */
+  label?: React.ReactNode;
+  /** Sort order among groups (ascending). Defaults to declaration order. */
+  order?: number;
+}
+
+/**
+ * One settings section = one nav entry + one detail panel.
+ *
+ * Mirrors the old `ProfileTab` shape (`{ value, label, content }`) so migrating
+ * a ProfileLayout tab into a SettingsLayout section is a near-rename.
+ */
+export interface SettingsSection {
+  /** Unique id. Used as the active key and the URL hash segment (`#settings/<id>`). */
+  id: string;
+  /** Nav label. */
+  label: React.ReactNode;
+  /** Optional icon (lucide component or any SVG-ish element type). */
+  icon?: React.ComponentType<{ className?: string }>;
+  /** Group id this section belongs to. Falls into the default group when omitted. */
+  group?: string;
+  /** Heading shown at the top of the detail panel. Defaults to `label`. */
+  title?: React.ReactNode;
+  /** Sub-heading under the panel title. */
+  description?: React.ReactNode;
+  /** The panel body. Rendered only while this section is active (Radix unmounts closed dialogs). */
+  content: React.ReactNode;
+  /** Extra terms the search box matches against, beyond the label. */
+  keywords?: string[];
+  /** Sort order within the group (ascending). Defaults to declaration order. */
+  order?: number;
+  /** Optional trailing accessory in the nav row (badge, chevron, count). */
+  badge?: React.ReactNode;
+  /** Hide from the rail without removing (e.g. gated by plan). Still reachable by id. */
+  hidden?: boolean;
+}
+
+/** Toggle flags for the built-in sections shipped by SettingsLayout. */
+export interface SettingsBuiltins {
+  /** Account / profile fields + preferences. Default: true. */
+  account?: boolean;
+  /** Two-factor / security. Default: false (opt-in, needs API support). */
+  security?: boolean;
+  /** API keys. Default: true. */
+  apiKeys?: boolean;
+}
+
+/** Shared configuration consumed by both the dialog and the inline form. */
+export interface SettingsContent {
+  /** Dialog/page title. Default: "Settings". */
+  title?: React.ReactNode;
+  /** App-provided sections, merged after the enabled built-ins. */
+  sections?: SettingsSection[];
+  /** Group definitions for ordering/labelling. Optional — sections can name ad-hoc groups. */
+  groups?: SettingsGroup[];
+  /** Which built-in sections to include. */
+  builtins?: SettingsBuiltins;
+  /** Section id to open first. Defaults to the first visible section. */
+  initialSection?: string;
+  /** Show the search box above the nav rail. Default: true. */
+  searchable?: boolean;
+  /** Allow account deletion in the account section. Default: true. */
+  enableDeleteAccount?: boolean;
+}
+
+/** Props for the inline (non-dialog) `<SettingsForm />`. */
+export interface SettingsFormProps extends SettingsContent {
+  /** Controlled active section. When set, the form does not own selection state. */
+  activeSection?: string;
+  /** Called when the user picks a section (controlled mode). */
+  onSectionChange?: (id: string) => void;
+  /** Fired when an unauthenticated user reaches the surface. */
+  onUnauthenticated?: () => void;
+  /** Drop the outer card chrome (border/rounding) — used when embedded in a dialog. */
+  bare?: boolean;
+  className?: string;
+}
+
+/** Props for the globally-mounted `<SettingsDialog />`. */
+export interface SettingsDialogProps extends SettingsContent {
+  /**
+   * Sync open/close + active section with the URL hash (`#settings/<id>`).
+   * Lets users deep-link and the back button close. Default: true.
+   */
+  syncUrl?: boolean;
+  /** Hash namespace; the segment before the section id. Default: "settings". */
+  urlKey?: string;
+}

package/src/layouts/index.ts

@@ -30,4 +30,4 @@ export * from './AuthLayout';
 export * from './AdminLayout';
 
 // Additional layouts
-export * from './ProfileLayout';
+export * from './SettingsLayout';

package/src/layouts/types/index.ts

@@ -22,7 +22,6 @@ export type {
 
 // External provider configs (re-export for convenience)
 export type { AnalyticsConfig } from '../../snippets/Analytics/types';
-export type { PwaInstallConfig } from '@djangocfg/ui-nextjs/pwa';
 export type {
   ErrorBoundaryConfig,
   ErrorTrackingConfig,

package/src/layouts/types/layout.types.ts

@@ -9,7 +9,6 @@ import type { AuthConfig } from '@djangocfg/api/auth';
 
 // Import provider configs from their modules
 import type { AnalyticsConfig } from '../../snippets/Analytics/types';
-import type { PwaInstallConfig } from '@djangocfg/ui-nextjs/pwa';
 import type { ErrorBoundaryConfig, ErrorTrackingConfig } from '../../components/errors/types';
 
 /**
@@ -62,9 +61,6 @@ export interface BaseLayoutProps {
   /** Error boundary configuration (from components/errors, enabled by default) */
   errorBoundary?: ErrorBoundaryConfig;
 
-  /** PWA Install configuration (from snippets/PWAInstall) */
-  pwaInstall?: PwaInstallConfig;
-
   /** Monitor configuration — initialises window.monitor + auto-captures JS errors & console */
   monitor?: MonitorConfig;
 

package/src/layouts/ProfileLayout/ProfileDialog/ProfileDialog.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@djangocfg/ui-core/components';
-
-import { ProfileForm } from '../ProfileForm';
-import { useProfileDialogStore } from './store';
-
-export interface ProfileDialogProps {
-  title?: string;
-}
-
-export const ProfileDialog: React.FC<ProfileDialogProps> = ({ title }) => {
-  const {
-    isOpen,
-    close,
-    initialTab,
-    tabs,
-    slots,
-    enable2FA,
-    enableAPIKeys,
-    enableDeleteAccount,
-    title: storeTitle,
-  } = useProfileDialogStore();
-
-  // Title precedence: explicit dialog prop > value passed to open() > ProfileForm default.
-  const resolvedTitle = title ?? storeTitle;
-
-  return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && close()}>
-      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto p-0">
-        <DialogHeader className="sr-only">
-          <DialogTitle>Profile</DialogTitle>
-        </DialogHeader>
-        {/* Undefined fields fall through to ProfileForm's own defaults
-          * (e.g. enableAPIKeys defaults to true), so this stays backward
-          * compatible with bare open() / open({ initialTab }). */}
-        <ProfileForm
-          title={resolvedTitle}
-          defaultTab={initialTab}
-          tabs={tabs}
-          slots={slots}
-          enable2FA={enable2FA}
-          enableAPIKeys={enableAPIKeys}
-          enableDeleteAccount={enableDeleteAccount}
-        />
-      </DialogContent>
-    </Dialog>
-  );
-};

package/src/layouts/ProfileLayout/ProfileDialog/index.ts

@@ -1,4 +0,0 @@
-export { ProfileDialog } from './ProfileDialog';
-export type { ProfileDialogProps } from './ProfileDialog';
-export { useProfileDialogStore } from './store';
-export type { ProfileDialogContent } from './store';

package/src/layouts/ProfileLayout/ProfileDialog/store.ts

@@ -1,51 +0,0 @@
-import { create } from 'zustand';
-
-import type { ProfileTabValueOrCustom } from '../hooks/useProfileTabs';
-import type { ProfileSlots, ProfileTab } from '../types';
-
-/**
- * Content the dialog renders into <ProfileForm>. All optional — anything
- * omitted in `open()` falls back to ProfileForm's own default. Lets any caller
- * open the profile dialog with custom tabs/slots/flags in one line.
- */
-export interface ProfileDialogContent {
-  initialTab?: ProfileTabValueOrCustom;
-  tabs?: ProfileTab[];
-  slots?: ProfileSlots;
-  enable2FA?: boolean;
-  enableAPIKeys?: boolean;
-  enableDeleteAccount?: boolean;
-  title?: string;
-}
-
-interface ProfileDialogState extends ProfileDialogContent {
-  isOpen: boolean;
-  open: (options?: ProfileDialogContent) => void;
-  close: () => void;
-  toggle: () => void;
-}
-
-/** Content fields reset to undefined on close (keeps `isOpen` separate). */
-const EMPTY_CONTENT: Required<{ [K in keyof ProfileDialogContent]: undefined }> = {
-  initialTab: undefined,
-  tabs: undefined,
-  slots: undefined,
-  enable2FA: undefined,
-  enableAPIKeys: undefined,
-  enableDeleteAccount: undefined,
-  title: undefined,
-};
-
-export const useProfileDialogStore = create<ProfileDialogState>((set) => ({
-  isOpen: false,
-  ...EMPTY_CONTENT,
-  open: (options) =>
-    set({
-      isOpen: true,
-      // Replace (not merge) content so a previous open()'s tabs/flags don't leak.
-      ...EMPTY_CONTENT,
-      ...options,
-    }),
-  close: () => set({ isOpen: false, ...EMPTY_CONTENT }),
-  toggle: () => set((state) => ({ isOpen: !state.isOpen })),
-}));

package/src/layouts/ProfileLayout/ProfileForm/context.tsx

@@ -1,123 +0,0 @@
-'use client';
-
-import React, { createContext, useCallback, useContext, useMemo } from 'react';
-
-import { useAuth } from '@djangocfg/api/auth';
-import { useAppT } from '@djangocfg/i18n';
-import { toast } from '@djangocfg/ui-core/hooks';
-
-import { profileLogger } from '../../../utils/logger';
-import { useLogout } from '../../../hooks';
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Types
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface ProfileLabels {
-  title: string;
-  personalInfo: string;
-  work: string;
-  security: string;
-  apiKeys: string;
-  preferences: string;
-  firstName: string;
-  lastName: string;
-  phone: string;
-  company: string;
-  position: string;
-  addFirstName: string;
-  addLastName: string;
-  addPhone: string;
-  addCompany: string;
-  addPosition: string;
-  signOut: string;
-  deleteAccount: string;
-  profileUpdated: string;
-  failedToUpdate: string;
-  notAuthenticated: string;
-  pleaseLogIn: string;
-  loading: string;
-  save: string;
-  saving: string;
-  cancel: string;
-}
-
-interface ProfileContextValue {
-  labels: ProfileLabels;
-  onLogout: () => void;
-  onFieldSave: (field: string, value: string) => Promise<void>;
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Context
-// ─────────────────────────────────────────────────────────────────────────────
-
-const ProfileContext = createContext<ProfileContextValue | null>(null);
-
-export const useProfileContext = (): ProfileContextValue => {
-  const ctx = useContext(ProfileContext);
-  if (!ctx) throw new Error('useProfileContext must be used within ProfileProvider');
-  return ctx;
-};
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Provider
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface ProfileProviderProps {
-  children: React.ReactNode;
-  title?: string;
-}
-
-export const ProfileProvider: React.FC<ProfileProviderProps> = ({ children, title }) => {
-  const { updateProfile } = useAuth();
-  const t = useAppT();
-  const onLogout = useLogout();
-
-  const labels = useMemo<ProfileLabels>(() => ({
-    title: title || t('layouts.profilePage.title'),
-    personalInfo: t('layouts.profilePage.personalInfo'),
-    work: t('layouts.profilePage.work'),
-    security: t('layouts.profilePage.security'),
-    apiKeys: 'API Keys',
-    preferences: 'Preferences',
-    firstName: t('layouts.profilePage.firstName'),
-    lastName: t('layouts.profilePage.lastName'),
-    phone: t('layouts.profilePage.phone'),
-    company: t('layouts.profilePage.company'),
-    position: t('layouts.profilePage.position'),
-    addFirstName: t('layouts.profilePage.addFirstName') || 'Add first name',
-    addLastName: t('layouts.profilePage.addLastName') || 'Add last name',
-    addPhone: t('layouts.profilePage.addPhone') || 'Add phone number',
-    addCompany: t('layouts.profilePage.addCompany') || 'Add company',
-    addPosition: t('layouts.profilePage.addPosition') || 'Add position',
-    signOut: t('layouts.profilePage.signOut'),
-    deleteAccount: t('layouts.profilePage.deleteAccount'),
-    profileUpdated: t('layouts.profilePage.profileUpdated'),
-    failedToUpdate: t('layouts.profilePage.failedToUpdate'),
-    notAuthenticated: t('layouts.profilePage.notAuthenticated'),
-    pleaseLogIn: t('layouts.profilePage.pleaseLogIn'),
-    loading: t('ui.states.loading'),
-    save: t('layouts.profilePage.save'),
-    saving: t('layouts.profilePage.saving'),
-    cancel: t('layouts.profilePage.cancel'),
-  }), [t, title]);
-
-  const onFieldSave = useCallback(async (field: string, value: string) => {
-    try {
-      await updateProfile({ [field]: value });
-      toast.success(labels.profileUpdated);
-    } catch (error: unknown) {
-      profileLogger.error('Profile update error:', error);
-      const apiErr = error as { response?: Record<string, string[]> };
-      toast.error(apiErr?.response?.[field]?.[0] || labels.failedToUpdate);
-      throw error;
-    }
-  }, [updateProfile, labels]);
-
-  return (
-    <ProfileContext.Provider value={{ labels, onLogout, onFieldSave }}>
-      {children}
-    </ProfileContext.Provider>
-  );
-};

package/src/layouts/ProfileLayout/ProfileForm/index.tsx

@@ -1,147 +0,0 @@
-'use client';
-
-import React, { useEffect } from 'react';
-
-import { useAuth } from '@djangocfg/api/auth';
-import { useAppT } from '@djangocfg/i18n';
-import {
-  Preloader,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '@djangocfg/ui-core/components';
-
-import { ApiKeySection, ProfileHeader, ProfileTab, TwoFactorSection } from '../components';
-import { ProfileProvider, useProfileContext } from './context';
-import { useProfileTabs } from '../hooks/useProfileTabs';
-import type { ProfileFormProps } from '../types';
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Built-in tab panels
-// ─────────────────────────────────────────────────────────────────────────────
-
-function TabSecurity() {
-  return (
-    <div className="pt-4 space-y-4">
-      <TwoFactorSection />
-    </div>
-  );
-}
-
-function TabApiKeys() {
-  return (
-    <div className="pt-4 space-y-4">
-      <ApiKeySection />
-    </div>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Content (inside ProfileProvider)
-// ─────────────────────────────────────────────────────────────────────────────
-
-function ProfileContent({
-  onUnauthenticated,
-  enable2FA,
-  enableAPIKeys = true,
-  enableDeleteAccount = true,
-  tabs = [],
-  slots,
-  defaultTab,
-}: ProfileFormProps) {
-  const { labels } = useProfileContext();
-  const { user, isLoading } = useAuth();
-
-  const extraTabValues = React.useMemo(() => tabs.map((t) => t.value), [tabs]);
-
-  const { tab, setTab, allowed } = useProfileTabs({
-    enable2FA,
-    enableAPIKeys,
-    extraTabValues,
-    defaultTab,
-  });
-
-  const handleTabChange = React.useCallback(
-    (value: string) => setTab(value),
-    [setTab],
-  );
-
-  useEffect(() => {
-    if (onUnauthenticated && !user && !isLoading) onUnauthenticated();
-  }, [onUnauthenticated, user, isLoading]);
-
-  if (isLoading) {
-    return <Preloader variant="fullscreen" text={labels.loading} size="lg" backdrop backdropOpacity={80} />;
-  }
-
-  if (!user) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold mb-4">{labels.notAuthenticated}</h1>
-          <p className="text-muted-foreground">{labels.pleaseLogIn}</p>
-        </div>
-      </div>
-    );
-  }
-
-  // ── Prepare data before render ──
-
-  const extraTriggers = tabs.map((t) => (
-    <TabsTrigger key={t.value} value={t.value}>{t.label}</TabsTrigger>
-  ));
-  const extraPanels = tabs.map((t) => (
-    <TabsContent key={t.value} value={t.value}>{t.content}</TabsContent>
-  ));
-  const footer = slots?.footer ?? null;
-
-  // ── Render ──
-
-  return (
-    <div className="container mx-auto px-4 py-6 md:py-10 max-w-3xl">
-      <ProfileHeader slots={slots} enableDeleteAccount={enableDeleteAccount} />
-
-      <Tabs value={tab} onValueChange={handleTabChange} className="mt-2">
-        <TabsList variant="underline" scrollable>
-          <TabsTrigger value="profile">{labels.personalInfo}</TabsTrigger>
-          {enable2FA && <TabsTrigger value="security">{labels.security}</TabsTrigger>}
-          {enableAPIKeys && <TabsTrigger value="api-keys">{labels.apiKeys}</TabsTrigger>}
-          {extraTriggers}
-        </TabsList>
-
-        <TabsContent value="profile">
-          <ProfileTab />
-        </TabsContent>
-
-        {enable2FA && (
-          <TabsContent value="security">
-            <TabSecurity />
-          </TabsContent>
-        )}
-
-        {enableAPIKeys && (
-          <TabsContent value="api-keys">
-            <TabApiKeys />
-          </TabsContent>
-        )}
-
-        {extraPanels}
-      </Tabs>
-
-      {footer && <div className="mt-8">{footer}</div>}
-    </div>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Export
-// ─────────────────────────────────────────────────────────────────────────────
-
-export const ProfileForm: React.FC<ProfileFormProps> = ({ title, ...props }) => (
-  <ProfileProvider title={title}>
-    <ProfileContent title={title} {...props} />
-  </ProfileProvider>
-);
-
-export { useProfileContext } from './context';