@rebasepro/admin 0.2.3 → 0.2.5

package/src/collection_editor/ui/collection_editor/properties/MarkdownPropertyField.tsx

@@ -41,15 +41,15 @@ export function MarkdownPropertyField({
     const htmlPath = `${baseMarkdownPath}.html`;
     const transformPastedTextPath = `${baseMarkdownPath}.transformPastedText`;
 
-    const fileNameValue = getIn(values, fileName) ?? "{rand}_{file}";
-    const storagePathValue = getIn(values, storagePath) ?? "/";
+    const fileNameValue = (getIn(values, fileName) as string | undefined) ?? "{rand}_{file}";
+    const storagePathValue = (getIn(values, storagePath) as string | undefined) ?? "/";
     const maxSizeValue = getIn(values, maxSize);
 
     // Markdown config values - check if markdown is an object or boolean
     const markdownValue = getIn(values, "markdown");
     const isMarkdownObject = typeof markdownValue === "object" && markdownValue !== null;
-    const htmlValue = isMarkdownObject ? (markdownValue.html ?? true) : true;
-    const transformPastedTextValue = isMarkdownObject ? (markdownValue.transformPastedText ?? false) : false;
+    const htmlValue = isMarkdownObject ? (((markdownValue as Record<string, unknown>).html as boolean | undefined) ?? true) : true;
+    const transformPastedTextValue = isMarkdownObject ? (((markdownValue as Record<string, unknown>).transformPastedText as boolean | undefined) ?? false) : false;
 
     const hasFilenameCallback = typeof fileNameValue === "function";
     const hasStoragePathCallback = typeof storagePathValue === "function";
@@ -209,7 +209,7 @@ export function MarkdownPropertyField({
                         setFieldValue("defaultValue", e.target.value === "" ? undefined : e.target.value);
                     }}
                     label={t("default_value")}
-                    value={getIn(values, "defaultValue") ?? ""}/>
+                    value={(getIn(values, "defaultValue") as string | undefined) ?? ""}/>
 
             </div>
         </>

package/src/collection_editor/ui/collection_editor/properties/NumberPropertyField.tsx

@@ -15,12 +15,12 @@ export function NumberPropertyField({ disabled }: {
     const { t } = useTranslation();
 
     const columnTypePath = "columnType";
-    const columnTypeValue: string | undefined = getIn(values, columnTypePath);
-    const columnTypeError: string | undefined = getIn(touched, columnTypePath) && getIn(errors, columnTypePath);
+    const columnTypeValue: string | undefined = getIn(values, columnTypePath) as string | undefined;
+    const columnTypeError: string | undefined = (getIn(touched, columnTypePath) && getIn(errors, columnTypePath)) as string | undefined;
 
     const isIdPath = "isId";
-    const isIdValue: string | boolean | undefined = getIn(values, isIdPath);
-    const isIdError: string | undefined = getIn(touched, isIdPath) && getIn(errors, isIdPath);
+    const isIdValue: string | boolean | undefined = getIn(values, isIdPath) as string | boolean | undefined;
+    const isIdError: string | undefined = (getIn(touched, isIdPath) && getIn(errors, isIdPath)) as string | undefined;
 
     return (
         <>
@@ -109,7 +109,7 @@ export function NumberPropertyField({ disabled }: {
                         setFieldValue("defaultValue", e.target.value === "" ? undefined : parseFloat(e.target.value));
                     }}
                     label={t("default_value")}
-                    value={getIn(values, "defaultValue") ?? ""}/>
+                    value={(getIn(values, "defaultValue") as string | number | undefined) ?? ""}/>
 
             </div>
         </>

package/src/collection_editor/ui/collection_editor/properties/ReferencePropertyField.tsx

@@ -34,8 +34,8 @@ export function ReferencePropertyField({
         </div>;
 
     const pathPath = asString ? "reference.slug" : (multiple ? "of.slug" : "path");
-    const pathValue: string | undefined = getIn(values, pathPath);
-    const pathError: string | undefined = showErrors && getIn(errors, pathPath);
+    const pathValue: string | undefined = getIn(values, pathPath) as string | undefined;
+    const pathError: string | undefined = (showErrors && getIn(errors, pathPath)) as string | undefined;
 
     return (
         <>

package/src/collection_editor/ui/collection_editor/properties/RepeatPropertyField.tsx

@@ -33,8 +33,8 @@ export function RepeatPropertyField({
     } = useFormex<ArrayProperty>();
 
     const [propertyDialogOpen, setPropertyDialogOpen] = useState(false);
-    const ofProperty = getIn(values, "of");
-    const ofPropertyError = getIn(touched, "of") && getIn(errors, "of");
+    const ofProperty = getIn(values, "of") as Property | undefined;
+    const ofPropertyError = (getIn(touched, "of") && getIn(errors, "of")) as string | undefined;
 
     const onPropertyChanged = ({ id, property, namespace }:
         { id?: string, property: Property, namespace?: string }) => {

package/src/collection_editor/ui/collection_editor/properties/StoragePropertyField.tsx

@@ -61,16 +61,16 @@ export function StoragePropertyField({
     const imageResizeFormat = `${imageResize}.format`;
     const imageResizeQuality = `${imageResize}.quality`;
 
-    const fileNameValue = getIn(values, fileName) ?? "{rand}_{file}";
-    const storagePathValue = getIn(values, storagePath) ?? "/";
-    const maxSizeValue = getIn(values, maxSize);
+    const fileNameValue = (getIn(values, fileName) as string | undefined) ?? "{rand}_{file}";
+    const storagePathValue = (getIn(values, storagePath) as string | undefined) ?? "/";
+    const maxSizeValue = getIn(values, maxSize) as number | undefined;
 
     // Image resize values
-    const imageResizeMaxWidthValue = getIn(values, imageResizeMaxWidth);
-    const imageResizeMaxHeightValue = getIn(values, imageResizeMaxHeight);
-    const imageResizeModeValue = getIn(values, imageResizeMode) ?? "cover";
-    const imageResizeFormatValue = getIn(values, imageResizeFormat) ?? "original";
-    const imageResizeQualityValue = getIn(values, imageResizeQuality);
+    const imageResizeMaxWidthValue = getIn(values, imageResizeMaxWidth) as number | undefined;
+    const imageResizeMaxHeightValue = getIn(values, imageResizeMaxHeight) as number | undefined;
+    const imageResizeModeValue = (getIn(values, imageResizeMode) as string | undefined) ?? "cover";
+    const imageResizeFormatValue = (getIn(values, imageResizeFormat) as string | undefined) ?? "original";
+    const imageResizeQualityValue = getIn(values, imageResizeQuality) as number | undefined;
 
     const storedValue = getIn(values, acceptedFiles);
     const fileTypesValue: string[] | undefined = Array.isArray(storedValue) ? storedValue : undefined;

package/src/collection_editor/ui/collection_editor/properties/StringPropertyField.tsx

@@ -21,12 +21,12 @@ export function StringPropertyField({
     const { t } = useTranslation();
 
     const columnTypePath = "columnType";
-    const columnTypeValue: string | undefined = getIn(values, columnTypePath);
-    const columnTypeError: string | undefined = getIn(touched, columnTypePath) && getIn(errors, columnTypePath);
+    const columnTypeValue: string | undefined = getIn(values, columnTypePath) as string | undefined;
+    const columnTypeError: string | undefined = (getIn(touched, columnTypePath) && getIn(errors, columnTypePath)) as string | undefined;
 
     const isIdPath = "isId";
-    const isIdValue: string | boolean | undefined = getIn(values, isIdPath);
-    const isIdError: string | undefined = getIn(touched, isIdPath) && getIn(errors, isIdPath);
+    const isIdValue: string | boolean | undefined = getIn(values, isIdPath) as string | boolean | undefined;
+    const isIdError: string | undefined = (getIn(touched, isIdPath) && getIn(errors, isIdPath)) as string | undefined;
 
     return (
         <>
@@ -140,7 +140,7 @@ export function StringPropertyField({
                         setFieldValue("defaultValue", e.target.value === "" ? undefined : e.target.value);
                     }}
                     label={t("default_value")}
-                    value={getIn(values, "defaultValue") ?? ""}/>
+                    value={(getIn(values, "defaultValue") as string | undefined) ?? ""}/>
 
             </div>
         </>

package/src/collection_editor/ui/collection_editor/properties/UrlPropertyField.tsx

@@ -15,7 +15,8 @@ export function UrlPropertyField({
 
     const { values, setFieldValue } = useFormex();
 
-    const urlValue = getIn(values, "url");
+    const urlRawValue = getIn(values, "url");
+    const urlValue = typeof urlRawValue === "string" ? urlRawValue : "[NONE]";
 
     return (
         <>
@@ -82,7 +83,7 @@ export function UrlPropertyField({
                         setFieldValue("defaultValue", e.target.value === "" ? undefined : e.target.value);
                     }}
                     label={"Default value"}
-                    value={getIn(values, "defaultValue") ?? ""}/>
+                    value={(getIn(values, "defaultValue") as string | undefined) ?? ""}/>
 
             </div>
         </>

package/src/collection_editor/ui/collection_editor/properties/VectorPropertyField.tsx

@@ -9,8 +9,8 @@ export function VectorPropertyField({ disabled }: {
     const { values, setFieldValue, touched, errors } = useFormex();
 
     const dimensionsPath = "dimensions";
-    const dimensionsValue = getIn(values, dimensionsPath);
-    const dimensionsError = getIn(touched, dimensionsPath) && getIn(errors, dimensionsPath);
+    const dimensionsValue = getIn(values, dimensionsPath) as number | undefined;
+    const dimensionsError = (getIn(touched, dimensionsPath) && getIn(errors, dimensionsPath)) as string | undefined;
 
     return (
         <div className={"col-span-12"}>

package/src/collection_editor/ui/collection_editor/properties/validation/ArrayPropertyValidation.tsx

@@ -30,7 +30,7 @@ export function ArrayPropertyValidation({
             <GeneralPropertyValidation disabled={disabled}/>
 
             {min && <div className={"col-span-6"}>
-                <DebouncedTextField value={getIn(values, validationMin)}
+                <DebouncedTextField value={getIn(values, validationMin) as number | undefined}
                     disabled={disabled}
                     label={t("min_length")}
                     name={validationMin}
@@ -39,7 +39,7 @@ export function ArrayPropertyValidation({
                     onChange={handleChange}/>
             </div>}
             {max && <div className={"col-span-6"}>
-                <DebouncedTextField value={getIn(values, validationMax)}
+                <DebouncedTextField value={getIn(values, validationMax) as number | undefined}
                     disabled={disabled}
                     label={t("max_length")}
                     name={validationMax}

package/src/collection_editor/ui/collection_editor/properties/validation/GeneralPropertyValidation.tsx

@@ -52,7 +52,7 @@ export function GeneralPropertyValidation({ disabled }: {
             {getIn(values, validationRequired) && <div className={"col-span-12"}>
                 <DebouncedTextField
                     disabled={disabled}
-                    value={getIn(values, validationRequiredMessage)}
+                    value={getIn(values, validationRequiredMessage) as string | undefined}
                     label={t("required_message")}
                     name={validationRequiredMessage}
                     size="small"

package/src/collection_editor/ui/collection_editor/properties/validation/NumberPropertyValidation.tsx

@@ -31,7 +31,7 @@ export function NumberPropertyValidation({ disabled }: {
 
 
             <div className={"col-span-6"}>
-                <DebouncedTextField value={getIn(values, validationMin)}
+                <DebouncedTextField value={getIn(values, validationMin) as number | undefined}
                     label={t("min_value")}
                     name={validationMin}
                     type="number"
@@ -41,12 +41,11 @@ export function NumberPropertyValidation({ disabled }: {
             </div>
 
             <div className={"col-span-6"}>
-                <DebouncedTextField value={getIn(values, validationMax)}
+                <DebouncedTextField value={getIn(values, validationMax) as number | undefined}
                     label={t("max_value")}
                     name={validationMax}
                     type="number"
                     size="small"
-
                     disabled={disabled}
                     onChange={handleChange}/>
             </div>
@@ -54,24 +53,22 @@ export function NumberPropertyValidation({ disabled }: {
 
             <div className={"col-span-6"}>
                 <DebouncedTextField
-                    value={getIn(values, validationLessThan)}
+                    value={getIn(values, validationLessThan) as number | undefined}
                     label={t("less_than")}
                     name={validationLessThan}
                     type="number"
                     size="small"
-
                     disabled={disabled}
                     onChange={handleChange}/>
             </div>
 
             <div className={"col-span-6"}>
                 <DebouncedTextField
-                    value={getIn(values, validationMoreThan)}
+                    value={getIn(values, validationMoreThan) as number | undefined}
                     label={t("more_than")}
                     name={validationMoreThan}
                     type="number"
                     size="small"
-
                     disabled={disabled}
                     onChange={handleChange}/>
             </div>

package/src/collection_editor/ui/collection_editor/properties/validation/StringPropertyValidation.tsx

@@ -49,7 +49,7 @@ export function StringPropertyValidation({
     const matchesError = getIn(errors, validationMatches);
 
     const matchesValue = getIn(values, validationMatches);
-    const matchesStringValue = typeof matchesValue === "string" ? matchesValue : serializeRegExp(matchesValue);
+    const matchesStringValue = typeof matchesValue === "string" ? matchesValue : serializeRegExp(matchesValue as RegExp);
     return (
         <div className={"grid grid-cols-12 gap-2"}>
 
@@ -101,7 +101,7 @@ export function StringPropertyValidation({
             <div className={"grid grid-cols-12 gap-2 col-span-12"}>
                 {length && <div className={"col-span-4"}>
                     <DebouncedTextField
-                        value={getIn(values, validationLength)}
+                        value={getIn(values, validationLength) as number | undefined}
                         label={t("exact_length")}
                         name={validationLength}
                         type="number"
@@ -112,7 +112,7 @@ export function StringPropertyValidation({
                 </div>}
 
                 {min && <div className={"col-span-4"}>
-                    <DebouncedTextField value={getIn(values, validationMin)}
+                    <DebouncedTextField value={getIn(values, validationMin) as number | undefined}
                         label={t("min_length")}
                         name={validationMin}
                         type="number"
@@ -123,7 +123,7 @@ export function StringPropertyValidation({
                 </div>}
 
                 {max && <div className={"col-span-4"}>
-                    <DebouncedTextField value={getIn(values, validationMax)}
+                    <DebouncedTextField value={getIn(values, validationMax) as number | undefined}
                         label={t("max_length")}
                         name={validationMax}
                         type="number"

package/src/components/ArrayContainer.tsx

@@ -60,7 +60,7 @@ export interface ArrayContainerProps<T> {
     max?: number;
 }
 
-const buildIdsMap = (value: any[]) =>
+const buildIdsMap = (value: unknown[]) =>
     value && Array.isArray(value) && value.length > 0
         ? value
             .map((v, index) => {
@@ -143,7 +143,7 @@ function SortableItem({
 type ArrayContainerItemProps = {
     nodeRef: (node: HTMLElement | null) => void;
     style: React.CSSProperties;
-    dragHandleProps: any;
+    dragHandleProps: Record<string, unknown>;
     index: number;
     internalId: number;
     size?: "small" | "medium";
@@ -220,7 +220,7 @@ export function ArrayItemOptions({
     sortable,
     addInIndex
 }: {
-    dragHandleProps: any;
+    dragHandleProps: Record<string, unknown>;
     direction?: "row" | "column";
     disabled: boolean;
     remove: (index: number) => void;

package/src/components/DefaultAppBar.tsx

@@ -44,8 +44,27 @@ export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
 
     dropDownActions?: React.ReactNode;
 
+    /**
+     * Whether to render the dark/light/system mode toggle in the app bar.
+     * Set to `false` when the drawer owns this action.
+     * @default true
+     */
     includeModeToggle?: boolean;
 
+    /**
+     * Whether to render the language switcher in the app bar.
+     * Set to `false` when the drawer owns this action.
+     * @default true
+     */
+    includeLanguageToggle?: boolean;
+
+    /**
+     * Whether to render the user avatar / menu in the app bar.
+     * Set to `false` when the drawer owns this action.
+     * @default true
+     */
+    includeUserMenu?: boolean;
+
     className?: string;
 
     style?: React.CSSProperties;
@@ -67,6 +86,8 @@ export const DefaultAppBar = function DefaultAppBar({
     startAdornment,
     dropDownActions,
     includeModeToggle = true,
+    includeLanguageToggle = true,
+    includeUserMenu = true,
     className,
     style,
     user: userProp,
@@ -193,8 +214,6 @@ export const DefaultAppBar = function DefaultAppBar({
             </div>
             {startAdornment}
 
-            {startAdornment}
-
             <div className={"grow"}/>
 
             {endAdornment &&
@@ -202,7 +221,7 @@ export const DefaultAppBar = function DefaultAppBar({
                     {endAdornment}
                 </ErrorBoundary>}
 
-            <LanguageToggle/>
+            {includeLanguageToggle && <LanguageToggle/>}
 
             {includeModeToggle &&
                 <Menu
@@ -220,34 +239,36 @@ export const DefaultAppBar = function DefaultAppBar({
                         size={iconSize.smallest}/>{t("system_mode")}</MenuItem>
                 </Menu>}
 
-            <Menu trigger={<div aria-label="User menu" role="button">{avatarComponent}</div>}>
-                {user && <div className={"px-4 py-2 mb-2"}>
-                    {user.displayName && <Typography variant={"body1"} color={"secondary"}>
-                        {user.displayName}
-                    </Typography>}
-                    {user.email && <Typography variant={"body2"} color={"secondary"}>
-                        {user.email}
-                    </Typography>}
-                </div>}
-
-                {dropDownActions}
-
-                {!dropDownActions && <>
-                    <MenuItem onClick={() => navigate("/settings")}>
-                        <SettingsIcon/>
-                        {t("project_settings")}
-                    </MenuItem>
-                    <MenuItem onClick={async () => {
-                        await authController.signOut();
-                        // replace current route with home
-                        navigate("/");
-                    }}>
-                        <LogOutIcon/>
-                        {t("log_out")}
-                    </MenuItem>
-                </>}
-
-            </Menu>
+
+            {includeUserMenu &&
+                <Menu trigger={<div aria-label="User menu" role="button">{avatarComponent}</div>}>
+                    {user && <div className={"px-4 py-2 mb-2"}>
+                        {user.displayName && <Typography variant={"body1"} color={"secondary"}>
+                            {user.displayName}
+                        </Typography>}
+                        {user.email && <Typography variant={"body2"} color={"secondary"}>
+                            {user.email}
+                        </Typography>}
+                    </div>}
+
+                    {dropDownActions}
+
+                    {!dropDownActions && <>
+                        <MenuItem onClick={() => navigate("/settings")}>
+                            <SettingsIcon/>
+                            {t("account_settings")}
+                        </MenuItem>
+                        <MenuItem onClick={async () => {
+                            await authController.signOut();
+                            // replace current route with home
+                            navigate("/");
+                        }}>
+                            <LogOutIcon/>
+                            {t("log_out")}
+                        </MenuItem>
+                    </>}
+
+                </Menu>}
 
         </div>
     );