@rulab/adminjs-components 0.1.0-alpha.8 → 0.1.0-beta.1

package/dist/components/FeatureTabs/FeatureTabsShow.js

@@ -0,0 +1,61 @@
+import { DrawerContent, Tab, Tabs } from "@adminjs/design-system";
+import { styled } from "@adminjs/design-system/styled-components";
+import React, { useEffect, useMemo, useState } from "react";
+import { ActionHeader, BasePropertyComponent, LayoutElementRenderer, } from "adminjs";
+const StyledTabsContent = styled.div `
+  padding-top: ${({ theme }) => theme.space.xl};
+`;
+const DEFAULT_COMMON_LABEL = "Common";
+const buildTabId = (label) => `tab-${label.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-_]/g, "")}`;
+const groupProperties = (properties, commonLabel) => {
+    const commonProps = [];
+    const tabs = new Map();
+    properties.forEach((property) => {
+        const tab = property?.props?.tab ?? property?.custom?.tab;
+        if (tab) {
+            if (!tabs.has(tab)) {
+                tabs.set(tab, []);
+            }
+            tabs.get(tab)?.push(property);
+        }
+        else {
+            commonProps.push(property);
+        }
+    });
+    const entries = [
+        { id: "common", label: commonLabel, properties: commonProps },
+    ];
+    tabs.forEach((props, label) => {
+        entries.push({
+            id: buildTabId(label),
+            label,
+            properties: props,
+        });
+    });
+    return entries;
+};
+export const FeatureTabsShow = (props) => {
+    const { resource, record, action } = props;
+    const commonLabel = resource?.options?.properties?.__featureTabsCommonLabel?.custom?.value ??
+        DEFAULT_COMMON_LABEL;
+    const tabs = useMemo(() => groupProperties(resource.showProperties, commonLabel), [resource.showProperties, commonLabel]);
+    const [currentTab, setCurrentTab] = useState(() => {
+        const commonHasProps = Boolean(tabs[0]?.properties?.length);
+        return commonHasProps ? "common" : tabs[1]?.id ?? "common";
+    });
+    useEffect(() => {
+        const validTab = tabs.find((tab) => tab.id === currentTab);
+        if (!validTab) {
+            const commonHasProps = Boolean(tabs[0]?.properties?.length);
+            setCurrentTab(commonHasProps ? "common" : tabs[1]?.id ?? "common");
+        }
+    }, [tabs, currentTab]);
+    return (React.createElement(DrawerContent, null,
+        action?.showInDrawer ? React.createElement(ActionHeader, { ...props }) : null,
+        action.layout ? (action.layout.map((layoutElement, i) => (React.createElement(LayoutElementRenderer
+        // eslint-disable-next-line react/no-array-index-key
+        , { 
+            // eslint-disable-next-line react/no-array-index-key
+            key: i, layoutElement: layoutElement, ...props, where: "show" })))) : (React.createElement(Tabs, { currentTab: currentTab, onChange: setCurrentTab, contentComponent: StyledTabsContent }, tabs.map((tab) => (React.createElement(Tab, { key: tab.id, id: tab.id, label: tab.label }, tab.properties.map((property) => (React.createElement(BasePropertyComponent, { key: property.propertyPath, where: "show", property: property, resource: resource, record: record }))))))))));
+};
+export default FeatureTabsShow;

package/dist/components/FeatureTabs/index.d.ts

@@ -0,0 +1,4 @@
+export { FeatureTabsEdit } from "./FeatureTabsEdit.js";
+export { FeatureTabsShow } from "./FeatureTabsShow.js";
+export { FeatureTabs } from "./FeatureTabsFeature.js";
+export { default as FeatureTabsFeature } from "./FeatureTabsFeature.js";

package/dist/components/FeatureTabs/index.js

@@ -0,0 +1,4 @@
+export { FeatureTabsEdit } from "./FeatureTabsEdit.js";
+export { FeatureTabsShow } from "./FeatureTabsShow.js";
+export { FeatureTabs } from "./FeatureTabsFeature.js";
+export { default as FeatureTabsFeature } from "./FeatureTabsFeature.js";

package/dist/components/Preview/PreviewAction.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ActionProps } from "adminjs";
+export declare const PreviewAction: FC<ActionProps>;
+export default PreviewAction;

package/dist/components/Preview/PreviewAction.js

@@ -0,0 +1,22 @@
+import { Box, Button, Text } from "@adminjs/design-system";
+import React, { useMemo } from "react";
+const resolveTemplate = (template, params) => template.replace(/\$([A-Za-z0-9_]+)/g, (_, key) => {
+    const value = params?.[key];
+    return value === undefined || value === null ? "" : String(value);
+});
+export const PreviewAction = ({ record, resource }) => {
+    const template = resource?.properties?.__previewUrlTemplate?.custom?.value ?? "";
+    const params = record?.params ?? {};
+    const url = useMemo(() => resolveTemplate(template, params), [template, params]);
+    if (!url) {
+        return (React.createElement(Box, null,
+            React.createElement(Text, null, "Preview URL is not configured.")));
+    }
+    return (React.createElement(Box, { height: "100%", display: "flex", flexDirection: "column" },
+        React.createElement(Box, { mb: "lg", display: "flex", alignItems: "center" },
+            React.createElement(Box, { mr: "md" },
+                React.createElement(Button, { as: "a", variant: "outlined", onClick: () => window.history.back() }, "< Back")),
+            React.createElement(Button, { as: "a", variant: "outlined", href: url, target: "_blank", rel: "noopener" }, "Open in new tab")),
+        React.createElement(Box, { as: "iframe", src: url, title: "Preview", width: "100%", height: "calc(100vh - 300px)", style: { border: "1px solid #e5e7eb", borderRadius: "8px" } })));
+};
+export default PreviewAction;

package/dist/components/Preview/PreviewFeature.d.ts

@@ -0,0 +1,9 @@
+import { ComponentLoader, FeatureType } from "adminjs";
+type PreviewOptions = {
+    componentLoader?: ComponentLoader;
+    url: string;
+    actionName?: string;
+};
+declare const createPreviewFeature: (config: PreviewOptions) => FeatureType;
+export declare const PreviewFeature: (config: PreviewOptions) => FeatureType;
+export default createPreviewFeature;

package/dist/components/Preview/PreviewFeature.js

@@ -0,0 +1,31 @@
+import { buildFeature } from "adminjs";
+import { bundleComponent } from "../../utils/bundle-component.js";
+const COMPONENT_NAME = "Preview";
+const createPreviewFeature = (config) => {
+    const { componentLoader, url, actionName = "preview" } = config;
+    const actionComponent = bundleComponent(componentLoader, COMPONENT_NAME, "PreviewAction.js");
+    return buildFeature({
+        actions: {
+            [actionName]: {
+                actionType: "record",
+                icon: "Eye",
+                label: "Preview",
+                showInDrawer: false,
+                component: actionComponent,
+                handler: async (request, response, context) => ({
+                    record: context.record?.toJSON(context.currentAdmin),
+                }),
+            },
+        },
+        properties: {
+            __previewUrlTemplate: {
+                isVisible: false,
+                custom: {
+                    value: url,
+                },
+            },
+        },
+    });
+};
+export const PreviewFeature = createPreviewFeature;
+export default createPreviewFeature;

package/dist/components/Preview/index.d.ts

@@ -0,0 +1,2 @@
+export { PreviewAction } from "./PreviewAction.js";
+export { PreviewFeature } from "./PreviewFeature.js";

package/dist/components/Preview/index.js

@@ -0,0 +1,2 @@
+export { PreviewAction } from "./PreviewAction.js";
+export { PreviewFeature } from "./PreviewFeature.js";

package/dist/components/Slug/SlugEdit.d.ts

@@ -1,5 +1,5 @@
 import { EditPropertyProps } from "adminjs";
 import { FC } from "react";
 type CustomSlugTypes = Omit<EditPropertyProps, "where">;
-declare const SlugEdit: FC<CustomSlugTypes>;
+export declare const SlugEdit: FC<CustomSlugTypes>;
 export default SlugEdit;

package/dist/components/Slug/SlugEdit.js

@@ -1,15 +1,21 @@
+import { flat } from "adminjs";
 import React, { useEffect, useState, } from "react";
 import { ThemeProvider } from "styled-components";
 import { theme } from "@adminjs/design-system";
 import { slugifyTitle } from "../../utils/index.js";
 import { StyledCustomInput, StyledGenerateButton, StyledInputWrapper, StyledLabel, } from "./styles.js";
-const SlugEdit = ({ property, record, resource, onChange, }) => {
-    const [inputValue, setInputValue] = useState(record.params.slug);
+export const SlugEdit = ({ property, record, resource, onChange, }) => {
+    console.log("✅ SlugEdit loaded", { property });
+    const { params } = record;
+    const { custom } = property;
+    const source = flat.get(params, custom.source);
+    const key = flat.get(params, custom.key);
+    const [inputValue, setInputValue] = useState(key);
     useEffect(() => {
         onChange(property.path, inputValue);
     }, [inputValue]);
     return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(StyledLabel, { htmlFor: "customSlug" }, property.path),
+        React.createElement(StyledLabel, { htmlFor: "customSlug" }, property.label ?? property.path),
         React.createElement(StyledInputWrapper, null,
             React.createElement(StyledCustomInput, { id: property.path, name: property.path, value: inputValue, onChange: handleInput }),
             React.createElement(StyledGenerateButton, { variant: "outlined", onClick: generateSlug }, "Generate Slug"))));

package/dist/components/Slug/SlugFeature.d.ts

@@ -1,7 +1,4 @@
-import { ComponentLoader, FeatureType } from "adminjs";
-type SlugOptions = {
-    componentLoader: ComponentLoader;
-    key: string;
-};
-declare const SlugFeature: (config: SlugOptions) => FeatureType;
+import { FeatureType } from "adminjs";
+import SlugOptions from "./SlugOptions.type.js";
+export declare const SlugFeature: (config: SlugOptions) => FeatureType;
 export default SlugFeature;

package/dist/components/Slug/SlugFeature.js

@@ -1,21 +1,19 @@
 import { buildFeature } from "adminjs";
 import { bundleComponent } from "../../utils/bundle-component.js";
 const COMPONENT_NAME = 'Slug';
-const SlugFeature = (config) => {
-    const { componentLoader, key } = config;
-    const slugFeature = () => {
-        const editComponent = bundleComponent(componentLoader, COMPONENT_NAME, 'SlugEdit');
-        return buildFeature({
-            properties: {
-                [key]: {
-                    isVisible: { show: false, edit: true, list: false, filter: false },
-                    components: {
-                        edit: editComponent,
-                    },
+export const SlugFeature = (config) => {
+    const { componentLoader, source, key } = config;
+    const editComponent = bundleComponent(componentLoader, COMPONENT_NAME, 'SlugEdit.js');
+    return buildFeature({
+        properties: {
+            [key]: {
+                isVisible: { filter: true, show: true, edit: true, list: true },
+                components: {
+                    edit: editComponent,
                 },
+                custom: { source, key }
             },
-        });
-    };
-    return slugFeature();
+        },
+    });
 };
 export default SlugFeature;

package/dist/components/Slug/SlugOptions.type.d.ts

@@ -0,0 +1,7 @@
+import { ComponentLoader } from "adminjs";
+type SlugOptions = {
+    componentLoader?: ComponentLoader;
+    source: string;
+    key: string;
+};
+export default SlugOptions;

package/dist/components/StringList/StringList.d.ts

@@ -4,5 +4,5 @@ type StringListTypes = Omit<EditPropertyProps, "where" | "resource">;
 interface StringListShowPropsType extends StringListTypes {
     stringListSeparator?: string;
 }
-declare const StringList: FC<StringListShowPropsType>;
+export declare const StringList: FC<StringListShowPropsType>;
 export default StringList;

package/dist/components/StringList/StringList.js

@@ -4,7 +4,7 @@ import { ThemeProvider } from "styled-components";
 import { StyledCustomInput, StyledInputWrapper, StyledLabel, StyledListWrapper, StyledWrapper, } from "./styles.js";
 import { SortableList } from "./SortableList/SortableList.js";
 import { separator } from "./constants.js";
-const StringList = ({ record, onChange, property, stringListSeparator = separator, }) => {
+export const StringList = ({ record, onChange, property, stringListSeparator = separator, }) => {
     const stringListValue = record.params?.[property.path] ?? property.props.value ?? "";
     const initialList = stringListValue
         ? prepareDataForList(stringListValue)
@@ -16,12 +16,12 @@ const StringList = ({ record, onChange, property, stringListSeparator = separato
         onChange(property.path, serializedData);
     }, [serializedData]);
     return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(StyledLabel, { htmlFor: "custom" }, property.path),
+        React.createElement(StyledLabel, { htmlFor: "custom" }, property.label ?? property.path),
         React.createElement(StyledWrapper, null,
-            React.createElement(StyledListWrapper, null,
+            React.createElement(StyledListWrapper, { "$hasItems": list.length > 0 },
                 React.createElement(SortableList, { items: list, onChange: setList, renderItem: (item) => (React.createElement(SortableList.Item, { id: item.id, onDelete: handleDeleteButton }, item.value)) })),
             React.createElement(StyledInputWrapper, null,
-                React.createElement(Input, { id: "stringList", name: property.path, value: serializedData, hidden: true }),
+                React.createElement(Input, { id: "stringList", name: property.path, value: serializedData, hidden: true, readOnly: true }),
                 React.createElement(StyledCustomInput, { id: "custom", name: "customInput", value: inputValue, onChange: handleInput, onKeyPress: handleEnterPress }),
                 React.createElement(Button, { variant: "outlined", onClick: handleAddButton }, "Add")))));
     function handleInput(e) {

package/dist/components/StringList/StringListFeature.d.ts

@@ -0,0 +1,7 @@
+import { ComponentLoader, FeatureType } from "adminjs";
+type StringListOptions = {
+    componentLoader?: ComponentLoader;
+    key: string;
+};
+export declare const StringListFeature: (config: StringListOptions) => FeatureType;
+export default StringListFeature;

package/dist/components/StringList/StringListFeature.js

@@ -0,0 +1,20 @@
+import { buildFeature } from "adminjs";
+import { bundleComponent } from "../../utils/bundle-component.js";
+const COMPONENT_NAME = "StringList";
+export const StringListFeature = (config) => {
+    const { componentLoader, key } = config;
+    const editComponent = bundleComponent(componentLoader, COMPONENT_NAME, "StringList.js");
+    const showComponent = bundleComponent(componentLoader, COMPONENT_NAME, "StringListShow.js");
+    return buildFeature({
+        properties: {
+            [key]: {
+                isVisible: { filter: true, show: true, edit: true, list: true },
+                components: {
+                    edit: editComponent,
+                    show: showComponent,
+                },
+            },
+        },
+    });
+};
+export default StringListFeature;

package/dist/components/StringList/StringListShow.d.ts

@@ -3,5 +3,5 @@ import { ShowPropertyProps } from "adminjs";
 interface StringListShowPropsType extends ShowPropertyProps {
     stringListSeparator?: string;
 }
-declare const StringListShow: FC<StringListShowPropsType>;
+export declare const StringListShow: FC<StringListShowPropsType>;
 export default StringListShow;

package/dist/components/StringList/StringListShow.js

@@ -3,10 +3,10 @@ import { ThemeProvider } from "styled-components";
 import { theme } from "@adminjs/design-system";
 import { StyledShowLabel, StyledShowWrapper, StyledListItem } from "./styles.js";
 import { separator } from "./constants.js";
-const StringListShow = ({ property, record, stringListSeparator = separator, }) => {
+export const StringListShow = ({ property, record, stringListSeparator = separator, }) => {
     return (React.createElement(ThemeProvider, { theme: theme },
         React.createElement(StyledShowWrapper, null,
-            React.createElement(StyledShowLabel, null, property.path),
+            React.createElement(StyledShowLabel, null, property.label ?? property.path),
             record.params.facts && (React.createElement("ul", null, record.params.facts
                 .split(stringListSeparator)
                 .map((item, index) => (React.createElement(StyledListItem, { key: index }, `- ${item}`))))))));

package/dist/components/StringList/index.d.ts

@@ -1,2 +1,3 @@
-export * from "./StringList.js";
-export * from "./StringListShow.js";
+export { StringList } from "./StringList.js";
+export { StringListShow } from "./StringListShow.js";
+export { StringListFeature } from "./StringListFeature.js";

package/dist/components/StringList/index.js

@@ -1,2 +1,3 @@
-export * from "./StringList.js";
-export * from "./StringListShow.js";
+export { StringList } from "./StringList.js";
+export { StringListShow } from "./StringListShow.js";
+export { StringListFeature } from "./StringListFeature.js";

package/dist/components/StringList/styles.js

@@ -13,7 +13,8 @@ export const StyledInputWrapper = styled(Box) `
   display: flex;
 `;
 export const StyledListWrapper = styled(Box) `
-  margin-bottom: 15px;
+  margin-bottom: ${({ $hasItems }) => ($hasItems ? "15px" : "4px")};
+  min-height: 0;
 `;
 export const StyledLabel = styled.div `
   font-size: 12px;

package/dist/components/Tabs/TabsEdit.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ActionProps } from "adminjs";
+export declare const TabsEdit: FC<ActionProps>;
+export default TabsEdit;

package/dist/components/Tabs/TabsEdit.js

@@ -0,0 +1,103 @@
+import { Box, Button, DrawerContent, DrawerFooter, Icon, Tab, Tabs } from "@adminjs/design-system";
+import { styled } from "@adminjs/design-system/styled-components";
+import React, { useEffect, useMemo, useState } from "react";
+import { BasePropertyComponent, LayoutElementRenderer, useRecord, useTranslation, ActionHeader, } from "adminjs";
+const StyledTabButton = styled.button `
+  background: none;
+  border: none;
+  padding: ${({ theme }) => `${theme.space.sm} ${theme.space.xl}`};
+  cursor: pointer;
+  border-bottom: 2px solid ${({ theme }) => theme.colors.border};
+  color: ${({ theme }) => theme.colors.grey60};
+  user-select: none;
+  ${({ theme }) => ({
+    fontFamily: theme.font,
+    fontSize: theme.fontSizes.md,
+    lineHeight: theme.lineHeights.lg,
+})};
+  ${({ active, theme }) => active
+    ? `
+    border-color: ${theme.colors.primary100};
+    color: ${theme.colors.primary100};
+  `
+    : ""}
+`;
+const StyledTabsContent = styled.div `
+  padding-top: ${({ theme }) => theme.space.xl};
+`;
+const TabButton = ({ onClick, active, tabId, role, children }) => (React.createElement(StyledTabButton, { type: "button", onClick: onClick, "data-tab-id": tabId, role: role, active: active }, children));
+const DEFAULT_COMMON_LABEL = "Common";
+const buildTabId = (label) => `tab-${label.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-_]/g, "")}`;
+const groupProperties = (properties, commonLabel) => {
+    const commonProps = [];
+    const tabs = new Map();
+    properties.forEach((property) => {
+        const tab = property?.props?.tab ?? property?.custom?.tab;
+        if (tab) {
+            if (!tabs.has(tab)) {
+                tabs.set(tab, []);
+            }
+            tabs.get(tab)?.push(property);
+        }
+        else {
+            commonProps.push(property);
+        }
+    });
+    const entries = [
+        { id: "common", label: commonLabel, properties: commonProps },
+    ];
+    tabs.forEach((props, label) => {
+        entries.push({
+            id: buildTabId(label),
+            label,
+            properties: props,
+        });
+    });
+    return entries;
+};
+export const TabsEdit = (props) => {
+    const { record: initialRecord, resource, action } = props;
+    const { record, handleChange, submit: handleSubmit, loading, setRecord, } = useRecord(initialRecord, resource.id);
+    const { translateButton } = useTranslation();
+    useEffect(() => {
+        if (initialRecord) {
+            setRecord(initialRecord);
+        }
+    }, [initialRecord]);
+    const submit = (event) => {
+        event.preventDefault();
+        handleSubmit().then((response) => {
+            if (response.data.redirectUrl) {
+                window.location.assign(response.data.redirectUrl);
+            }
+        });
+        return false;
+    };
+    const commonLabel = resource?.options?.properties?.__tabsCommonLabel?.custom?.value ??
+        DEFAULT_COMMON_LABEL;
+    const tabs = useMemo(() => groupProperties(resource.editProperties, commonLabel), [resource.editProperties, commonLabel]);
+    const [currentTab, setCurrentTab] = useState(() => {
+        const commonHasProps = Boolean(tabs[0]?.properties?.length);
+        return commonHasProps ? "common" : tabs[1]?.id ?? "common";
+    });
+    useEffect(() => {
+        const validTab = tabs.find((tab) => tab.id === currentTab);
+        if (!validTab) {
+            const commonHasProps = Boolean(tabs[0]?.properties?.length);
+            setCurrentTab(commonHasProps ? "common" : tabs[1]?.id ?? "common");
+        }
+    }, [tabs, currentTab]);
+    return (React.createElement(Box, { as: "form", onSubmit: submit, flex: true, flexDirection: "column" },
+        React.createElement(DrawerContent, null,
+            action?.showInDrawer ? React.createElement(ActionHeader, { ...props }) : null,
+            action.layout ? (action.layout.map((layoutElement, i) => (React.createElement(LayoutElementRenderer
+            // eslint-disable-next-line react/no-array-index-key
+            , { 
+                // eslint-disable-next-line react/no-array-index-key
+                key: i, layoutElement: layoutElement, ...props, where: "edit", onChange: handleChange, record: record })))) : (React.createElement(Tabs, { currentTab: currentTab, onChange: setCurrentTab, buttonComponent: TabButton, contentComponent: StyledTabsContent }, tabs.map((tab) => (React.createElement(Tab, { key: tab.id, id: tab.id, label: tab.label }, tab.properties.map((property) => (React.createElement(BasePropertyComponent, { key: property.propertyPath, where: "edit", onChange: handleChange, property: property, resource: resource, record: record }))))))))),
+        React.createElement(DrawerFooter, null,
+            React.createElement(Button, { variant: "contained", type: "submit", "data-testid": "button-save", disabled: loading },
+                loading ? React.createElement(Icon, { icon: "Loader", spin: true }) : null,
+                translateButton("save", resource.id)))));
+};
+export default TabsEdit;

package/dist/components/Tabs/TabsFeature.d.ts

@@ -0,0 +1,7 @@
+import { ComponentLoader, FeatureType } from "adminjs";
+type TabsOptions = {
+    componentLoader?: ComponentLoader;
+    commonTabLabel?: string;
+};
+export declare const TabsFeature: (config: TabsOptions) => FeatureType;
+export {};

package/dist/components/Tabs/TabsFeature.js

@@ -0,0 +1,26 @@
+import { buildFeature } from "adminjs";
+import { bundleComponent } from "../../utils/bundle-component.js";
+const COMPONENT_NAME = "Tabs";
+export const TabsFeature = (config) => {
+    const { componentLoader, commonTabLabel } = config;
+    const editComponent = bundleComponent(componentLoader, COMPONENT_NAME, "TabsEdit.js");
+    const showComponent = bundleComponent(componentLoader, COMPONENT_NAME, "TabsShow.js");
+    return buildFeature({
+        actions: {
+            edit: {
+                component: editComponent,
+            },
+            show: {
+                component: showComponent,
+            },
+        },
+        properties: {
+            __tabsCommonLabel: {
+                isVisible: false,
+                custom: {
+                    value: commonTabLabel,
+                },
+            },
+        },
+    });
+};

package/dist/components/Tabs/TabsShow.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ActionProps } from "adminjs";
+export declare const TabsShow: FC<ActionProps>;
+export default TabsShow;

package/dist/components/Tabs/TabsShow.js

@@ -0,0 +1,61 @@
+import { DrawerContent, Tab, Tabs } from "@adminjs/design-system";
+import { styled } from "@adminjs/design-system/styled-components";
+import React, { useEffect, useMemo, useState } from "react";
+import { ActionHeader, BasePropertyComponent, LayoutElementRenderer, } from "adminjs";
+const StyledTabsContent = styled.div `
+  padding-top: ${({ theme }) => theme.space.xl};
+`;
+const DEFAULT_COMMON_LABEL = "Common";
+const buildTabId = (label) => `tab-${label.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-_]/g, "")}`;
+const groupProperties = (properties, commonLabel) => {
+    const commonProps = [];
+    const tabs = new Map();
+    properties.forEach((property) => {
+        const tab = property?.props?.tab ?? property?.custom?.tab;
+        if (tab) {
+            if (!tabs.has(tab)) {
+                tabs.set(tab, []);
+            }
+            tabs.get(tab)?.push(property);
+        }
+        else {
+            commonProps.push(property);
+        }
+    });
+    const entries = [
+        { id: "common", label: commonLabel, properties: commonProps },
+    ];
+    tabs.forEach((props, label) => {
+        entries.push({
+            id: buildTabId(label),
+            label,
+            properties: props,
+        });
+    });
+    return entries;
+};
+export const TabsShow = (props) => {
+    const { resource, record, action } = props;
+    const commonLabel = resource?.options?.properties?.__tabsCommonLabel?.custom?.value ??
+        DEFAULT_COMMON_LABEL;
+    const tabs = useMemo(() => groupProperties(resource.showProperties, commonLabel), [resource.showProperties, commonLabel]);
+    const [currentTab, setCurrentTab] = useState(() => {
+        const commonHasProps = Boolean(tabs[0]?.properties?.length);
+        return commonHasProps ? "common" : tabs[1]?.id ?? "common";
+    });
+    useEffect(() => {
+        const validTab = tabs.find((tab) => tab.id === currentTab);
+        if (!validTab) {
+            const commonHasProps = Boolean(tabs[0]?.properties?.length);
+            setCurrentTab(commonHasProps ? "common" : tabs[1]?.id ?? "common");
+        }
+    }, [tabs, currentTab]);
+    return (React.createElement(DrawerContent, null,
+        action?.showInDrawer ? React.createElement(ActionHeader, { ...props }) : null,
+        action.layout ? (action.layout.map((layoutElement, i) => (React.createElement(LayoutElementRenderer
+        // eslint-disable-next-line react/no-array-index-key
+        , { 
+            // eslint-disable-next-line react/no-array-index-key
+            key: i, layoutElement: layoutElement, ...props, where: "show" })))) : (React.createElement(Tabs, { currentTab: currentTab, onChange: setCurrentTab, contentComponent: StyledTabsContent }, tabs.map((tab) => (React.createElement(Tab, { key: tab.id, id: tab.id, label: tab.label }, tab.properties.map((property) => (React.createElement(BasePropertyComponent, { key: property.propertyPath, where: "show", property: property, resource: resource, record: record }))))))))));
+};
+export default TabsShow;

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,3 @@
+export { TabsEdit } from "./TabsEdit.js";
+export { TabsShow } from "./TabsShow.js";
+export { TabsFeature } from "./TabsFeature.js";

package/dist/components/Tabs/index.js

@@ -0,0 +1,3 @@
+export { TabsEdit } from "./TabsEdit.js";
+export { TabsShow } from "./TabsShow.js";
+export { TabsFeature } from "./TabsFeature.js";

package/dist/components/index.d.ts

@@ -1,7 +1,15 @@
-export { default as ColorStatusEdit } from "./ColorStatus/ColorStatusEdit.js";
-export { default as ColorStatusShow } from "./ColorStatus/ColorStatusShow.js";
-export { default as ColorStatusList } from "./ColorStatus/ColorStatusList.js";
-export { default as SlugEdit } from "./Slug/SlugEdit.js";
-export { default as StringList } from "./StringList/StringList.js";
-export { default as StringListShow } from "./StringList/StringListShow.js";
-export { default as SlugFeature } from "./Slug/SlugFeature.js";
+export { ColorStatusEdit } from "./ColorStatus/ColorStatusEdit.js";
+export { ColorStatusShow } from "./ColorStatus/ColorStatusShow.js";
+export { ColorStatusList } from "./ColorStatus/ColorStatusList.js";
+export { ColorStatusFeature } from "./ColorStatus/ColorStatusFeature.js";
+export { SlugEdit } from "./Slug/SlugEdit.js";
+export { Editor } from "./Editor/Editor.js";
+export { EditorList } from "./Editor/EditorList.js";
+export { EditorShow } from "./Editor/EditorShow.js";
+export { EditorFeature } from "./Editor/EditorFeature.js";
+export { StringList } from "./StringList/StringList.js";
+export { StringListShow } from "./StringList/StringListShow.js";
+export { StringListFeature } from "./StringList/StringListFeature.js";
+export { SlugFeature } from "./Slug/SlugFeature.js";
+export { TabsFeature } from "./Tabs/TabsFeature.js";
+export { PreviewFeature } from "./Preview/PreviewFeature.js";

package/dist/components/index.js

@@ -1,10 +1,15 @@
-export { default as ColorStatusEdit } from "./ColorStatus/ColorStatusEdit.js";
-export { default as ColorStatusShow } from "./ColorStatus/ColorStatusShow.js";
-export { default as ColorStatusList } from "./ColorStatus/ColorStatusList.js";
-export { default as SlugEdit } from "./Slug/SlugEdit.js";
-//export { default as Editor } from "./Editor/Editor.jsx";
-//export { default as EditorList } from "./Editor/EditorList.jsx";
-//export { default as EditorShow } from "./Editor/EditorShow.jsx";
-export { default as StringList } from "./StringList/StringList.js";
-export { default as StringListShow } from "./StringList/StringListShow.js";
-export { default as SlugFeature } from "./Slug/SlugFeature.js";
+export { ColorStatusEdit } from "./ColorStatus/ColorStatusEdit.js";
+export { ColorStatusShow } from "./ColorStatus/ColorStatusShow.js";
+export { ColorStatusList } from "./ColorStatus/ColorStatusList.js";
+export { ColorStatusFeature } from "./ColorStatus/ColorStatusFeature.js";
+export { SlugEdit } from "./Slug/SlugEdit.js";
+export { Editor } from "./Editor/Editor.js";
+export { EditorList } from "./Editor/EditorList.js";
+export { EditorShow } from "./Editor/EditorShow.js";
+export { EditorFeature } from "./Editor/EditorFeature.js";
+export { StringList } from "./StringList/StringList.js";
+export { StringListShow } from "./StringList/StringListShow.js";
+export { StringListFeature } from "./StringList/StringListFeature.js";
+export { SlugFeature } from "./Slug/SlugFeature.js";
+export { TabsFeature } from "./Tabs/TabsFeature.js";
+export { PreviewFeature } from "./Preview/PreviewFeature.js";