@rebasepro/app 0.17.3 → 0.18.0

package/src/components/UserSettingsView.tsx

@@ -1,318 +0,0 @@
-
-import React, { useEffect, useState } from "react";
-import {
-    Avatar,
-    Button,
-    Card,
-    Chip,
-    CircularProgress,
-    cls,
-    IconButton,
-    Tab,
-    Tabs,
-    TextField,
-    Trash2Icon,
-    Typography
-} from "@rebasepro/ui";
-import { useAuthController, useTranslation } from "../hooks";
-
-interface SessionInfo {
-    id: string;
-    userAgent?: string;
-    ipAddress?: string;
-    createdAt: string;
-    isCurrentSession?: boolean;
-}
-
-interface ExtendedAuthController {
-    user: { displayName?: string | null; photoURL?: string | null; email?: string | null } | null;
-    updateProfile?: (displayName: string, photoURL: string) => Promise<void>;
-    changePassword?: (oldPassword: string, newPassword: string) => Promise<void>;
-    fetchSessions?: () => Promise<SessionInfo[]>;
-    revokeSession?: (id: string) => Promise<void>;
-    revokeAllSessions?: () => Promise<void>;
-    signOut: () => Promise<void>;
-}
-
-type ActiveTab = "profile" | "security" | "sessions";
-
-export function UserSettingsView() {
-    const authController = useAuthController() as ExtendedAuthController;
-    const user = authController.user;
-    const { t } = useTranslation();
-
-    const hasPasswordChange = !!authController.changePassword;
-    const [activeTab, setActiveTab] = useState<ActiveTab>("profile");
-
-    // Profile state
-    const [displayName, setDisplayName] = useState(user?.displayName || "");
-    const [photoURL, setPhotoURL] = useState(user?.photoURL || "");
-    const [savingProfile, setSavingProfile] = useState(false);
-    const [profileError, setProfileError] = useState<string | null>(null);
-
-    // Password change state
-    const [currentPassword, setCurrentPassword] = useState("");
-    const [newPassword, setNewPassword] = useState("");
-    const [confirmPassword, setConfirmPassword] = useState("");
-    const [changingPassword, setChangingPassword] = useState(false);
-    const [passwordError, setPasswordError] = useState<string | null>(null);
-    const [passwordSuccess, setPasswordSuccess] = useState<string | null>(null);
-
-    // Sessions state
-    const [sessions, setSessions] = useState<SessionInfo[]>([]);
-    const [loadingSessions, setLoadingSessions] = useState(false);
-    const [sessionsError, setSessionsError] = useState<string | null>(null);
-    const [revokingSessionId, setRevokingSessionId] = useState<string | null>(null);
-    const [revokingAll, setRevokingAll] = useState(false);
-
-    useEffect(() => {
-        setDisplayName(user?.displayName || "");
-        setPhotoURL(user?.photoURL || "");
-        if (activeTab === "sessions") {
-            loadSessions();
-        }
-    }, [activeTab, user]);
-
-    const handleSaveProfile = async () => {
-        setSavingProfile(true);
-        setProfileError(null);
-        try {
-            if (authController.updateProfile) {
-                await authController.updateProfile(displayName, photoURL);
-            } else {
-                throw new Error("updateProfile not implemented in this auth controller.");
-            }
-        } catch (e: unknown) {
-            setProfileError(e instanceof Error ? e.message : String(e));
-        } finally {
-            setSavingProfile(false);
-        }
-    };
-
-    const handleChangePassword = async () => {
-        setPasswordError(null);
-        setPasswordSuccess(null);
-
-        // Validate
-        if (newPassword.length < 8) {
-            setPasswordError(t("password_too_short"));
-            return;
-        }
-        if (newPassword !== confirmPassword) {
-            setPasswordError(t("passwords_dont_match"));
-            return;
-        }
-
-        setChangingPassword(true);
-        try {
-            if (authController.changePassword) {
-                await authController.changePassword(currentPassword, newPassword);
-                setPasswordSuccess(t("password_changed"));
-                setCurrentPassword("");
-                setNewPassword("");
-                setConfirmPassword("");
-                // Backend invalidates all sessions on password change,
-                // so the user will be logged out shortly
-                setTimeout(() => {
-                    authController.signOut();
-                }, 2000);
-            }
-        } catch (e: unknown) {
-            setPasswordError(e instanceof Error ? e.message : String(e));
-        } finally {
-            setChangingPassword(false);
-        }
-    };
-
-    const loadSessions = async () => {
-        setLoadingSessions(true);
-        setSessionsError(null);
-        try {
-            if (authController.fetchSessions) {
-                const fetchedSessions = await authController.fetchSessions();
-                const sortedSessions = (fetchedSessions || []).sort((a: SessionInfo, b: SessionInfo) =>
-                    new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-                );
-                setSessions(sortedSessions);
-            } else {
-                throw new Error("fetchSessions not implemented in this auth controller.");
-            }
-        } catch (e: unknown) {
-            setSessionsError(e instanceof Error ? e.message : String(e));
-        } finally {
-            setLoadingSessions(false);
-        }
-    };
-
-    const handleRevokeSession = async (id: string, isCurrentSession?: boolean) => {
-        setRevokingSessionId(id);
-        try {
-            if (authController.revokeSession) {
-                await authController.revokeSession(id);
-                setSessions(sessions.filter(s => s.id !== id));
-                if (isCurrentSession) {
-                    await authController.signOut();
-                }
-            } else {
-                throw new Error("revokeSession not implemented in this auth controller.");
-            }
-        } catch (e: unknown) {
-            setSessionsError(e instanceof Error ? e.message : String(e));
-        } finally {
-            setRevokingSessionId(null);
-        }
-    };
-
-    const handleRevokeAll = async () => {
-        setRevokingAll(true);
-        try {
-            if (authController.revokeAllSessions) {
-                await authController.revokeAllSessions();
-            } else {
-                throw new Error("revokeAllSessions not implemented in this auth controller.");
-            }
-        } catch (e: unknown) {
-            setSessionsError(e instanceof Error ? e.message : String(e));
-        } finally {
-            setRevokingAll(false);
-        }
-    };
-
-    if (!user) return null;
-
-    return (
-        <div className="flex-grow max-w-4xl w-full mx-auto p-4 sm:p-6 md:p-12">
-            <Typography variant="h4" className="mb-8">{t("account_settings")}</Typography>
-
-            <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as ActiveTab)} className="mb-8">
-                <Tab value="profile">{t("profile")}</Tab>
-                {hasPasswordChange && <Tab value="security">{t("security")}</Tab>}
-                <Tab value="sessions">{t("sessions")}</Tab>
-            </Tabs>
-
-            {activeTab === "profile" && (
-                <div className="flex flex-col gap-6 max-w-xl">
-                    <div className="flex items-center gap-6 mb-2">
-                        <Avatar src={photoURL || undefined} className="w-24 h-24 text-3xl">
-                            {displayName ? displayName[0].toUpperCase() : (user.email ? user.email[0].toUpperCase() : "A")}
-                        </Avatar>
-                    </div>
-                    <TextField
-                        label={t("display_name")}
-                        value={displayName}
-                        onChange={(e) => setDisplayName(e.target.value)}
-                    />
-                    <TextField
-                        label={t("photo_url")}
-                        value={photoURL}
-                        onChange={(e) => setPhotoURL(e.target.value)}
-                    />
-                    {profileError && <Typography color="error">{profileError}</Typography>}
-                    <div className="mt-4">
-                        <Button variant="filled" onClick={handleSaveProfile} disabled={savingProfile}>
-                            {savingProfile ? t("saving") : t("save_profile")}
-                        </Button>
-                    </div>
-                </div>
-            )}
-
-            {activeTab === "security" && hasPasswordChange && (
-                <div className="flex flex-col gap-6 max-w-xl">
-                    <Typography variant="h6" className="mb-2">{t("change_password")}</Typography>
-
-                    <TextField
-                        label={t("current_password")}
-                        type="password"
-                        value={currentPassword}
-                        onChange={(e) => setCurrentPassword(e.target.value)}
-                        autoComplete="current-password"
-                    />
-                    <TextField
-                        label={t("new_password")}
-                        type="password"
-                        value={newPassword}
-                        onChange={(e) => setNewPassword(e.target.value)}
-                        autoComplete="new-password"
-                    />
-                    <TextField
-                        label={t("confirm_password")}
-                        type="password"
-                        value={confirmPassword}
-                        onChange={(e) => setConfirmPassword(e.target.value)}
-                        autoComplete="new-password"
-                    />
-
-                    {passwordError && (
-                        <Typography color="error">{passwordError}</Typography>
-                    )}
-                    {passwordSuccess && (
-                        <Typography className="text-emerald-600 dark:text-emerald-400">{passwordSuccess}</Typography>
-                    )}
-
-                    <div className="mt-4">
-                        <Button
-                            variant="filled"
-                            onClick={handleChangePassword}
-                            disabled={changingPassword || !currentPassword || !newPassword || !confirmPassword}
-                        >
-                            {changingPassword ? t("changing_password") : t("change_password")}
-                        </Button>
-                    </div>
-                </div>
-            )}
-
-            {activeTab === "sessions" && (
-                <div className="flex flex-col gap-4 max-w-3xl">
-                    {loadingSessions ? (
-                        <div className="flex justify-center p-8"><CircularProgress/></div>
-                    ) : sessionsError ? (
-                        <Typography color="error">{sessionsError}</Typography>
-                    ) : sessions.length === 0 ? (
-                        <Typography>{t("no_active_sessions")}</Typography>
-                    ) : (
-                        <div className="flex flex-col gap-4">
-                            <div className="flex justify-end mb-2">
-                                <Button
-                                    variant="text"
-                                    color="error"
-                                    onClick={handleRevokeAll}
-                                    disabled={revokingAll}
-                                >
-                                    {revokingAll ? t("revoking") : t("revoke_all_sessions")}
-                                </Button>
-                            </div>
-                            {sessions.map(session => (
-                                <Card key={session.id} className="flex justify-between items-center p-4">
-                                    <div className="flex flex-col">
-                                        <div className="flex items-center gap-2 mb-1">
-                                            <Typography variant="body1">
-                                                {session.userAgent || t("unknown_device")}
-                                            </Typography>
-                                            {session.isCurrentSession && (
-                                                <Chip colorScheme="blue" size="small">
-                                                    {t("current")}
-                                                </Chip>
-                                            )}
-                                        </div>
-                                        <Typography variant="caption" color="secondary">
-                                            IP: {session.ipAddress || "Unknown"} • Created: {new Date(session.createdAt).toLocaleString()}
-                                        </Typography>
-                                    </div>
-                                    <div className="ml-4">
-                                        {revokingSessionId === session.id ? (
-                                            <CircularProgress size="small"/>
-                                        ) : (
-                                            <IconButton onClick={() => handleRevokeSession(session.id, session.isCurrentSession)} aria-label="Revoke Session">
-                                                <Trash2Icon/>
-                                            </IconButton>
-                                        )}
-                                    </div>
-                                </Card>
-                            ))}
-                        </div>
-                    )}
-                </div>
-            )}
-        </div>
-    );
-}

package/src/components/common/index.ts

@@ -1,6 +0,0 @@
-export * from "./types";
-export * from "./useDebouncedData";
-export * from "./useColumnsIds";
-export * from "./useDataTableController";
-export * from "./useScrollRestoration";
-export * from "./table_height";

package/src/components/common/table_height.tsx

@@ -1,21 +0,0 @@
-/**
- * @group Components
- */
-export type TableSize = "xs" | "s" | "m" | "l" | "xl";
-
-export function getRowHeight(size: TableSize): number {
-    switch (size) {
-        case "xl":
-            return 400;
-        case "l":
-            return 280;
-        case "m":
-            return 140;
-        case "s":
-            return 80;
-        case "xs":
-            return 54;
-        default:
-            throw Error("Missing mapping for collection size -> height");
-    }
-}

package/src/components/common/types.tsx

@@ -1,66 +0,0 @@
-import type { Property, Entity } from "@rebasepro/types";
-import { CollectionSize, SelectedCellProps } from "@rebasepro/cms-types";
-
-export type DataCollectionTableController<M extends Record<string, unknown>> = {
-
-    /**
-     * This cell is displayed as selected
-     */
-    selectedCell?: SelectedCellProps;
-    /**
-     * Store used to sync selection state across cells efficiently.
-     */
-    selectionStore?: { getEntity: () => SelectedCellProps | undefined; subscribe: (cb: () => void) => () => void };
-    /**
-     * Select a table cell
-     * @param cell
-     */
-    select: (cell?: SelectedCellProps<M>) => void;
-    /**
-     * The cell that is displayed as a popup view.
-     * @param cell
-     */
-    setPopupCell?: (cell?: SelectedCellProps<M>) => void;
-    /**
-     * Callback used when the value of a cell has changed.
-     * @param params
-     */
-    onValueChange?: (params: OnCellValueChangeParams<unknown, Entity<M>>) => void;
-    /**
-     * Size of the elements in the collection
-     */
-    size: CollectionSize;
-}
-
-/**
- * Props passed in a callback when the content of a cell in a table has been edited
- * @group Collection components
- */
-export interface OnCellValueChangeParams<T = unknown, D = unknown> {
-    value: T,
-    propertyKey: string,
-    data?: D,
-    onValueUpdated: () => void
-    setError: (e: Error | undefined) => void
-}
-
-/**
- * @group Collection components
- */
-export type UniqueFieldValidator = (props: {
-    name: string,
-    value: unknown,
-    property: Property,
-    entityId?: string | number
-}) => Promise<boolean>;
-
-/**
- * Callback when a cell has changed in a table
- * @group Collection components
- */
-export type OnCellValueChange<T, M extends Record<string, unknown>> = (params: OnCellValueChangeParams<T, Entity<M>>) => Promise<void> | void;
-
-/**
- * @group Collection components
- */
-export type OnColumnResizeParams = { width: number, key: string };

package/src/components/common/useColumnsIds.tsx

@@ -1,261 +0,0 @@
-import type { Property, MapProperty, Properties, RelationProperty } from "@rebasepro/types";
-import { useMemo } from "react";
-;
-import { getChildViewDeclaringProperties, getChildViewRelationPropertyKeys, getSubcollections } from "@rebasepro/common";
-import type { AdminCollection } from "@rebasepro/cms-types";
-import { getPropertyInPath } from "../../collections/property-path";
-import { isDisabled } from "../../collections/property_presentation";
-
-export type PropertyColumnConfig = {
-    key: string;
-    disabled: boolean;
-};
-
-export function getSubcollectionColumnId(collection: AdminCollection<any>) {
-    return `subcollection:${collection.slug}`;
-}
-
-/**
- * The jump-to-tab columns a collection table does not need, because the relation
- * behind them already has a column of its own.
- *
- * Every child view gets a 200px button column that opens its tab. For a relation
- * declared in `relations` that button is the relation's only presence in the
- * table. For one declared as a property it is the second: the property's own
- * column is already there, hydrated by the list fetch's `include: ["*"]`, showing
- * the child rows themselves — and carrying the *same heading*, because the tab
- * takes its name from the declaring property. Two columns called "Applications",
- * one of them a button, and nothing in the header to tell them apart.
- *
- * The property column wins: it shows what the children are, and each chip in it
- * opens one. The tab stays reachable by opening the record, which is what the
- * rest of the table's rows do anyway.
- *
- * Unless the author hid that column — `hideFromCollection` on the property, or a
- * `propertiesOrder` that omits it, is a statement about the column and not about
- * the relation, so the button comes back rather than the relation dropping out
- * of the table altogether.
- */
-export function getRedundantChildViewColumnIds<M extends Record<string, any>>(collection: AdminCollection<M>): Set<string> {
-    const redundant = new Set<string>();
-    const properties = collection.properties ?? {};
-    const order = collection.propertiesOrder as string[] | undefined;
-
-    for (const [viewKey, propertyKey] of getChildViewDeclaringProperties(collection)) {
-        const property = properties[propertyKey] as Property | undefined;
-        if (!property || property.admin?.hideFromCollection) continue;
-        if (order && !order.includes(propertyKey)) continue;
-        redundant.add(`subcollection:${viewKey}`);
-    }
-
-    return redundant;
-}
-
-export function useColumnIds<M extends Record<string, any>>(collection: AdminCollection<M>, includeSubcollections: boolean): PropertyColumnConfig[] {
-    return useMemo(() => {
-        if (collection.propertiesOrder) {
-            return hideAndExpandKeys(collection, collection.propertiesOrder);
-        }
-        return getDefaultColumnKeys(collection, includeSubcollections);
-    }, [collection, includeSubcollections]);
-}
-
-function hideAndExpandKeys<M extends Record<string, any>>(collection: AdminCollection<M>, keys: string[]): PropertyColumnConfig[] {
-
-    // First, figure out which spread map roots have individual child keys in the order
-    // If so, we should NOT auto-expand them - just use the explicit child keys
-    const rootsWithExplicitChildren = new Set<string>();
-    for (const key of keys) {
-        if (key.includes(".")) {
-            const rootKey = key.split(".")[0];
-            const rootProperty = collection.properties[rootKey];
-            if (rootProperty && rootProperty.type === "map" && rootProperty.admin?.spreadChildren && rootProperty.properties) {
-                rootsWithExplicitChildren.add(rootKey);
-            }
-        }
-    }
-
-    // Track processed keys to avoid duplicates
-    const processedPropertyKeys = new Set<string>();
-
-    // Both column paths funnel through here, including a `propertiesOrder` that
-    // was saved back with the button column in it.
-    const redundantChildViewColumns = getRedundantChildViewColumnIds(collection);
-
-    const result = keys.flatMap((key) => {
-        // Skip if already processed (handles duplicates in propertiesOrder)
-        if (processedPropertyKeys.has(key)) return [null];
-        if (redundantChildViewColumns.has(key)) return [null];
-
-        // Check if it's a top-level property
-        const property = collection.properties[key];
-        if (property) {
-            processedPropertyKeys.add(key);
-            if (property.admin?.hideFromCollection)
-                return [null];
-            if (property.admin?.disabled && typeof property.admin?.disabled === "object" && property.admin?.disabled.hidden)
-                return [null];
-
-            if (property.type === "map" && property.admin?.spreadChildren && property.properties) {
-                // Check if this spread map has explicit child keys in propertiesOrder
-                if (rootsWithExplicitChildren.has(key)) {
-                    // DON'T auto-expand - the children are explicitly listed elsewhere
-                    return [null];
-                }
-                // Auto-expand all children
-                const childConfigs = getColumnKeysForProperty(property, key);
-                childConfigs.forEach(c => processedPropertyKeys.add(c.key));
-                return childConfigs;
-            }
-            return [{
-                key,
-                disabled: isDisabled(property) || Boolean(property.admin?.readOnly)
-            }];
-        }
-
-        // Check if it's a nested key like "data.mode" (for spread map properties)
-        if (key.includes(".")) {
-            const rootKey = key.split(".")[0];
-            const rootProperty = collection.properties[rootKey];
-
-            if (rootProperty && rootProperty.type === "map" && rootProperty.properties) {
-                const nestedProperty = getPropertyInPath(collection.properties, key) as Property | undefined;
-                if (nestedProperty) {
-                    processedPropertyKeys.add(key);
-                    // Mark root as seen
-                    processedPropertyKeys.add(rootKey);
-
-                    if (nestedProperty.admin?.hideFromCollection)
-                        return [null];
-                    if (nestedProperty.admin?.disabled && typeof nestedProperty.admin?.disabled === "object" && nestedProperty.admin?.disabled.hidden)
-                        return [null];
-
-                    return [{
-                        key,
-                        disabled: isDisabled(rootProperty) || Boolean(rootProperty.admin?.readOnly) ||
-                            isDisabled(nestedProperty) || Boolean(nestedProperty.admin?.readOnly)
-                    }];
-                }
-            }
-        }
-
-        // Check additional fields
-        const additionalField = collection.additionalFields?.find(field => field.key === key);
-        if (additionalField) {
-            return [{
-                key,
-                disabled: true
-            }];
-        }
-
-        // Check subcollections
-        const subcollections = getSubcollections(collection);
-        if (subcollections) {
-            const subCollection = subcollections
-                .find(subCol => getSubcollectionColumnId(subCol) === key);
-            if (subCollection) {
-                return [{
-                    key,
-                    disabled: true
-                }];
-            }
-        }
-
-        return [null];
-    }).filter(Boolean) as PropertyColumnConfig[];
-
-    // Add any missing properties that weren't in propertiesOrder
-    // This ensures properties NEVER disappear
-    for (const propKey of Object.keys(collection.properties)) {
-        // Skip if already processed
-        if (processedPropertyKeys.has(propKey)) continue;
-
-        const property = collection.properties[propKey];
-        if (!property) continue;
-        if (property.admin?.hideFromCollection) continue;
-        if (property.admin?.disabled && typeof property.admin?.disabled === "object" && property.admin?.disabled.hidden) continue;
-
-        if (property.type === "map" && property.admin?.spreadChildren && property.properties) {
-            // For spread maps, add all children that weren't already added
-            const allChildConfigs = getColumnKeysForProperty(property as MapProperty, propKey);
-            for (const childConfig of allChildConfigs) {
-                if (!processedPropertyKeys.has(childConfig.key)) {
-                    result.push(childConfig);
-                    processedPropertyKeys.add(childConfig.key);
-                }
-            }
-        } else {
-            result.push({
-                key: propKey,
-                disabled: isDisabled(property) || Boolean(property.admin?.readOnly)
-            });
-            processedPropertyKeys.add(propKey);
-        }
-    }
-
-    return result;
-}
-
-function getDefaultColumnKeys<M extends Record<string, any> = any>(collection: AdminCollection<M>, includeSubCollections: boolean) {
-    const propertyKeys = Object.keys(collection.properties);
-
-    const additionalFields = collection.additionalFields ?? [];
-    const subCollections: AdminCollection[] = getSubcollections(collection) ?? [];
-
-    const columnIds: string[] = [
-        ...propertyKeys,
-        // Filter out additional fields whose key already exists in propertyKeys to avoid duplicate column keys
-        ...additionalFields.filter((field) => !propertyKeys.includes(field.key)).map((field) => field.key)
-    ];
-
-    if (includeSubCollections) {
-        const subCollectionIds = subCollections
-            .map((collection) => getSubcollectionColumnId(collection));
-        columnIds.push(...subCollectionIds.filter((subColId) => !columnIds.includes(subColId)));
-    }
-
-    return hideAndExpandKeys(collection, columnIds);
-}
-
-export function getColumnKeysForProperty(property: Property, key: string, disabled?: boolean): PropertyColumnConfig[] {
-    // A key with no property behind it describes no column. Callers walk whole
-    // property maps here to build a table's columns, so reading `.type` off a
-    // hole threw away every other column with it.
-    if (!property) return [];
-    if (property.type === "map" && property.admin?.spreadChildren && property.properties) {
-        return Object.entries(property.properties)
-            .flatMap(([childKey, childProperty]) => getColumnKeysForProperty(
-                childProperty as Readonly<Property>,
-                `${key}.${childKey}`,
-                disabled || isDisabled(property) || Boolean(property.admin?.readOnly))
-            );
-    }
-    return [{
-        key,
-        disabled: disabled || isDisabled(property) || Boolean(property.admin?.readOnly)
-    }];
-}
-
-export function getFormFieldKeys(collection: AdminCollection): string[] {
-    const properties = collection.properties ?? {};
-    // A many-relation the entity view already lists as a tab is not an input:
-    // the tab is the treatment, and rendering the same declaration again as a
-    // picker asked the author to select a collection's own children from a
-    // dropdown. `renderInForm` is how a project that wants the picker asks for
-    // it back — opt in, because the tab is the default.
-    const consumedByChildView = getChildViewRelationPropertyKeys(collection);
-    const propertyKeys = Object.keys(properties).filter(key => {
-        if (!consumedByChildView.has(key)) return true;
-        return (properties[key] as RelationProperty).admin?.renderInForm === true;
-    });
-    const additionalFields = collection.additionalFields ?? [];
-    const allKeys = [
-        ...propertyKeys,
-        ...additionalFields.map((field) => field.key)
-    ];
-
-    if (collection.propertiesOrder) {
-        return collection.propertiesOrder.filter(key => allKeys.includes(key));
-    }
-    return allKeys;
-}