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

package/dist/components/ColorStatus/ColorStatusEdit.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
 import { EditPropertyProps } from "adminjs";
 type ColorStatusTypes = Omit<EditPropertyProps, "where" | "resource">;
-declare const ColorStatus: FC<ColorStatusTypes>;
-export default ColorStatus;
+export declare const ColorStatusEdit: FC<ColorStatusTypes>;
+export default ColorStatusEdit;

package/dist/components/ColorStatus/ColorStatusEdit.js

@@ -41,7 +41,7 @@ const colorStyles = {
     placeholder: (styles) => ({ ...styles, ...dot("#ccc") }),
     singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) }),
 };
-const ColorStatus = ({ property, record, onChange }) => {
+export const ColorStatusEdit = ({ property, record, onChange, }) => {
     const availableValues = property.availableValues;
     const currentOption = availableValues.find((item) => item.value === record.params[property.path]);
     const [selectOption, setCurrentOption] = useState(currentOption);
@@ -52,7 +52,7 @@ const ColorStatus = ({ property, record, onChange }) => {
         onChange(property.path, selectOption?.value);
     }, [selectOption]);
     return (React.createElement(ColorStatusWrapper, null,
-        React.createElement(Label, null, property.path),
+        React.createElement(Label, null, property.label ?? property.path),
         React.createElement(Select, { className: "basic-single", classNamePrefix: "select", defaultValue: selectOption ?? availableValues[0], onChange: handleSelectChange, isClearable: true, name: "color", options: availableValues, styles: colorStyles })));
 };
-export default ColorStatus;
+export default ColorStatusEdit;

package/dist/components/ColorStatus/ColorStatusFeature.d.ts

@@ -0,0 +1,9 @@
+import { ComponentLoader, FeatureType } from "adminjs";
+import type { AvailableValueType } from "./types.js";
+type ColorStatusOptions = {
+    componentLoader?: ComponentLoader;
+    key: string;
+    availableValues?: AvailableValueType[];
+};
+export declare const ColorStatusFeature: (config: ColorStatusOptions) => FeatureType;
+export default ColorStatusFeature;

package/dist/components/ColorStatus/ColorStatusFeature.js

@@ -0,0 +1,23 @@
+import { buildFeature } from "adminjs";
+import { bundleComponent } from "../../utils/bundle-component.js";
+const COMPONENT_NAME = "ColorStatus";
+export const ColorStatusFeature = (config) => {
+    const { componentLoader, key, availableValues = [] } = config;
+    const editComponent = bundleComponent(componentLoader, COMPONENT_NAME, "ColorStatusEdit.js");
+    const listComponent = bundleComponent(componentLoader, COMPONENT_NAME, "ColorStatusList.js");
+    const showComponent = bundleComponent(componentLoader, COMPONENT_NAME, "ColorStatusShow.js");
+    return buildFeature({
+        properties: {
+            [key]: {
+                isVisible: { filter: true, show: true, edit: true, list: true },
+                availableValues,
+                components: {
+                    edit: editComponent,
+                    list: listComponent,
+                    show: showComponent,
+                },
+            },
+        },
+    });
+};
+export default ColorStatusFeature;

package/dist/components/ColorStatus/ColorStatusList.d.ts

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

package/dist/components/ColorStatus/ColorStatusList.js

@@ -1,7 +1,9 @@
 import React from "react";
 import { ColorStatusBadge } from "./styles.js";
-const ColorStatusList = ({ property, record }) => {
+export const ColorStatusList = ({ property, record }) => {
     const currentOption = property.availableValues?.find((item) => item.value === record.params[property.path]);
-    return (React.createElement(ColorStatusBadge, { color: currentOption.color }, record.params[property.path]));
+    const currentValue = record.params[property.path];
+    const displayValue = currentOption?.label ?? currentValue;
+    return (React.createElement(ColorStatusBadge, { color: currentOption?.color }, displayValue));
 };
 export default ColorStatusList;

package/dist/components/ColorStatus/ColorStatusShow.d.ts

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

package/dist/components/ColorStatus/ColorStatusShow.js

@@ -1,9 +1,11 @@
 import React from "react";
 import { ColorStatusBadgeWrapper, ColorStatusBadge, ShowLabel } from "./styles.js";
-const ColorStatusShow = ({ property, record }) => {
+export const ColorStatusShow = ({ property, record }) => {
     const currentOption = property.availableValues?.find((item) => item.value === record.params[property.path]);
+    const currentValue = record.params[property.path];
+    const displayValue = currentOption?.label ?? currentValue;
     return (React.createElement(ColorStatusBadgeWrapper, null,
-        React.createElement(ShowLabel, null, property.path),
-        React.createElement(ColorStatusBadge, { color: currentOption.color }, record.params[property.path])));
+        React.createElement(ShowLabel, null, property.label ?? property.path),
+        React.createElement(ColorStatusBadge, { color: currentOption?.color }, displayValue)));
 };
 export default ColorStatusShow;

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

@@ -1,3 +1,4 @@
-export * from "./ColorStatusEdit.js";
-export * from "./ColorStatusShow.js";
-export * from "./ColorStatusList.js";
+export { ColorStatusEdit } from "./ColorStatusEdit.js";
+export { ColorStatusShow } from "./ColorStatusShow.js";
+export { ColorStatusList } from "./ColorStatusList.js";
+export { ColorStatusFeature } from "./ColorStatusFeature.js";

package/dist/components/ColorStatus/index.js

@@ -1,3 +1,4 @@
-export * from "./ColorStatusEdit.js";
-export * from "./ColorStatusShow.js";
-export * from "./ColorStatusList.js";
+export { ColorStatusEdit } from "./ColorStatusEdit.js";
+export { ColorStatusShow } from "./ColorStatusShow.js";
+export { ColorStatusList } from "./ColorStatusList.js";
+export { ColorStatusFeature } from "./ColorStatusFeature.js";

package/dist/components/ColorStatus/styles.js

@@ -1,10 +1,11 @@
 import { styled } from "@adminjs/design-system/styled-components";
 export const ColorStatusWrapper = styled.div `
-  margin-bottom: 24px;
+  margin-bottom: 45px;
 `;
 export const Label = styled.div `
   font-size: 12px;
   margin-bottom: 8px;
+  text-transform: capitalize;
 `;
 export const ShowLabel = styled.div `
   font-size: 12px;

package/dist/components/Editor/Editor.d.ts

@@ -1,11 +1,13 @@
-export default Editor;
-declare function Editor({ property, record, onChangeAdmin, editorId }: {
+export function Editor({ property, record, resource, onChange, onChangeAdmin, editorId }: {
     property: any;
     record: any;
+    resource: any;
+    onChange: any;
     onChangeAdmin: any;
     editorId: any;
 }): React.FunctionComponentElement<{
     children?: React.ReactNode;
     theme: import("styled-components").DefaultTheme | ((outerTheme?: import("styled-components").DefaultTheme | undefined) => import("styled-components").DefaultTheme);
 }>;
+export default Editor;
 import React from "react";

package/dist/components/Editor/Editor.js

@@ -1,33 +1,96 @@
-import React, { memo, useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { ThemeProvider } from "styled-components";
-import EditorJS from "@editorjs/editorjs";
 import { theme } from "@adminjs/design-system";
+import { ApiClient } from "adminjs";
 import { StyledLabel, StyledEditor, StyledEditorWrapper } from "./styles.js";
 import { EDITOR_TOOLS } from "./config.js";
-const Editor = ({ property, record, onChangeAdmin, editorId }) => {
+const readFileAsBase64 = (file) => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+        const result = reader.result ?? "";
+        const base64 = String(result).split(",")[1] ?? "";
+        resolve(base64);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+});
+const getEditorData = (record, property) => {
+    const raw = record?.params?.[property.path];
+    if (!raw) {
+        return "";
+    }
+    try {
+        return JSON.parse(raw);
+    }
+    catch (error) {
+        return "";
+    }
+};
+export const Editor = ({ property, record, resource, onChange, onChangeAdmin, editorId }) => {
     const [jsonData, setJsonData] = useState();
-    const isSavedData = Boolean(record.params[property.path]);
+    const isSavedData = Boolean(record?.params?.[property.path]);
+    const holderId = editorId || property?.props?.editorId || `editor-${property.path}`;
+    const uploadAction = property?.props?.uploadAction;
+    const resourceId = resource?.id;
     const ref = useRef();
     useEffect(() => {
-        onChangeAdmin(property.path, jsonData);
+        const changeHandler = onChange ?? onChangeAdmin;
+        if (changeHandler) {
+            changeHandler(property.path, jsonData);
+        }
     }, [jsonData]);
     useEffect(() => {
         if (!ref.current) {
-            const editor = new EditorJS({
-                holder: editorId,
-                tools: EDITOR_TOOLS,
-                data: isSavedData ? JSON.parse(record.params[property.path]) : "",
-                async onChange(api, event) {
-                    const data = await api.saver.save();
-                    setJsonData(JSON.stringify(data));
-                },
-            });
-            ref.current = editor;
+            const init = async () => {
+                const { default: EditorJS } = await import("@editorjs/editorjs");
+                const tools = { ...EDITOR_TOOLS };
+                if (uploadAction && resourceId) {
+                    const { default: ImageTool } = await import("@editorjs/image");
+                    const api = new ApiClient();
+                    tools.image = {
+                        class: ImageTool,
+                        config: {
+                            uploader: {
+                                uploadByFile: async (file) => {
+                                    const base64 = await readFileAsBase64(file);
+                                    const response = await api.resourceAction({
+                                        resourceId,
+                                        actionName: uploadAction,
+                                        data: {
+                                            file: {
+                                                name: file.name,
+                                                type: file.type,
+                                                base64,
+                                            },
+                                        },
+                                    });
+                                    const url = response?.data?.data?.url;
+                                    if (!url) {
+                                        return { success: 0 };
+                                    }
+                                    return { success: 1, file: { url } };
+                                },
+                            },
+                        },
+                    };
+                }
+                const editor = new EditorJS({
+                    holder: holderId,
+                    tools,
+                    data: isSavedData ? getEditorData(record, property) : "",
+                    async onChange(api, event) {
+                        const data = await api.saver.save();
+                        setJsonData(JSON.stringify(data));
+                    },
+                });
+                ref.current = editor;
+            };
+            void init();
         }
         return () => {
             ref?.current?.destroy?.();
         };
     }, []);
-    return (React.createElement(ThemeProvider, { theme: theme }, React.createElement(StyledLabel, null, property.path), React.createElement(StyledEditorWrapper, null, React.createElement(StyledEditor, { id: editorId }))));
+    return (React.createElement(ThemeProvider, { theme: theme }, React.createElement(StyledLabel, null, property.label ?? property.path), React.createElement(StyledEditorWrapper, null, React.createElement(StyledEditor, { id: holderId }))));
 };
 export default Editor;

package/dist/components/Editor/EditorFeature.d.ts

@@ -0,0 +1,10 @@
+import { ComponentLoader, FeatureType } from "adminjs";
+import type { BaseProvider } from "@adminjs/upload";
+type EditorOptions = {
+    componentLoader?: ComponentLoader;
+    key: string;
+    uploadProvider?: BaseProvider;
+    uploadActionName?: string;
+};
+export declare const EditorFeature: (config: EditorOptions) => FeatureType;
+export default EditorFeature;

package/dist/components/Editor/EditorFeature.js

@@ -0,0 +1,82 @@
+import { buildFeature } from "adminjs";
+import { Buffer } from "node:buffer";
+import { promises as fs } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { bundleComponent } from "../../utils/bundle-component.js";
+import { slugifyTitle } from "../../utils/slugifyTitle.js";
+const COMPONENT_NAME = "Editor";
+export const EditorFeature = (config) => {
+    const { componentLoader, key, uploadProvider } = config;
+    const uploadActionName = config.uploadActionName ?? "editorUpload";
+    const editComponent = bundleComponent(componentLoader, COMPONENT_NAME, "Editor.js");
+    const listComponent = bundleComponent(componentLoader, COMPONENT_NAME, "EditorList.js");
+    const showComponent = bundleComponent(componentLoader, COMPONENT_NAME, "EditorShow.js");
+    return buildFeature({
+        actions: uploadProvider
+            ? {
+                [uploadActionName]: {
+                    actionType: "resource",
+                    isVisible: false,
+                    handler: async (request, _response, context) => {
+                        const file = request?.payload?.file;
+                        if (!file?.base64) {
+                            return {
+                                data: { error: "No file provided." },
+                                notice: { message: "No file provided.", type: "error" },
+                            };
+                        }
+                        const buffer = Buffer.from(file.base64, "base64");
+                        const originalName = file.name ?? "upload";
+                        const filename = slugifyFilename(originalName);
+                        const key = `${Date.now()}-${filename}`;
+                        const tempPath = join(tmpdir(), `${Date.now()}-${filename}`);
+                        const uploadedFile = {
+                            name: filename,
+                            type: file.type ?? "application/octet-stream",
+                            size: buffer.length,
+                            path: tempPath,
+                        };
+                        await fs.writeFile(tempPath, buffer);
+                        try {
+                            await uploadProvider.upload(uploadedFile, key, context);
+                        }
+                        finally {
+                            await fs.unlink(tempPath).catch(() => undefined);
+                        }
+                        const baseUrl = uploadProvider.opts?.baseUrl;
+                        const url = baseUrl
+                            ? `${baseUrl.replace(/\/$/, "")}/${key}`
+                            : await uploadProvider.path(key, uploadProvider.bucket, context);
+                        if (!url) {
+                            return {
+                                data: { error: "Upload failed." },
+                                notice: { message: "Upload failed.", type: "error" },
+                            };
+                        }
+                        return { data: { url } };
+                    },
+                },
+            }
+            : undefined,
+        properties: {
+            [key]: {
+                isVisible: { filter: true, show: true, edit: true, list: true },
+                props: uploadProvider ? { uploadAction: uploadActionName } : undefined,
+                components: {
+                    edit: editComponent,
+                    list: listComponent,
+                    show: showComponent,
+                },
+            },
+        },
+    });
+};
+const slugifyFilename = (name) => {
+    const lastDot = name.lastIndexOf(".");
+    const base = lastDot > 0 ? name.slice(0, lastDot) : name;
+    const ext = lastDot > 0 ? name.slice(lastDot) : "";
+    const slug = slugifyTitle(base) || "file";
+    return `${slug}${ext}`;
+};
+export default EditorFeature;

package/dist/components/Editor/EditorList.d.ts

@@ -1,9 +1,9 @@
-export default EditorList;
-declare function EditorList({ property, record }: {
+export function EditorList({ property, record }: {
     property: any;
     record: any;
 }): React.FunctionComponentElement<{
     children?: React.ReactNode;
     theme: import("styled-components").DefaultTheme | ((outerTheme?: import("styled-components").DefaultTheme | undefined) => import("styled-components").DefaultTheme);
 }>;
+export default EditorList;
 import React from "react";

package/dist/components/Editor/EditorList.js

@@ -3,7 +3,7 @@ import { theme } from "@adminjs/design-system";
 import { ThemeProvider } from "styled-components";
 import { parseHtml } from "../../utils/parseHtml.js";
 import { StyledEditorViewWrapper } from "./styles.js";
-const EditorList = ({ property, record }) => {
+export const EditorList = ({ property, record }) => {
     const htmlContent = parseHtml(record.params[property.path]);
     return (React.createElement(ThemeProvider, { theme: theme }, React.createElement(StyledEditorViewWrapper, null, htmlContent && (React.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })))));
 };

package/dist/components/Editor/EditorShow.d.ts

@@ -1,9 +1,9 @@
-export default EditorShow;
-declare function EditorShow({ property, record }: {
+export function EditorShow({ property, record }: {
     property: any;
     record: any;
 }): React.FunctionComponentElement<{
     children?: React.ReactNode;
     theme: import("styled-components").DefaultTheme | ((outerTheme?: import("styled-components").DefaultTheme | undefined) => import("styled-components").DefaultTheme);
 }>;
+export default EditorShow;
 import React from "react";

package/dist/components/Editor/EditorShow.js

@@ -3,8 +3,8 @@ import { ThemeProvider } from "styled-components";
 import { theme } from "@adminjs/design-system";
 import { parseHtml } from "../../utils/parseHtml.js";
 import { StyledEditorShowWrapper, StyledShowLabel } from "./styles.js";
-const EditorShow = ({ property, record }) => {
+export const EditorShow = ({ property, record }) => {
     const htmlContent = parseHtml(record.params[property.path]);
-    return (React.createElement(ThemeProvider, { theme: theme }, React.createElement(StyledEditorShowWrapper, null, React.createElement(StyledShowLabel, null, property.path), htmlContent && (React.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })))));
+    return (React.createElement(ThemeProvider, { theme: theme }, React.createElement(StyledEditorShowWrapper, null, React.createElement(StyledShowLabel, null, property.label ?? property.path), htmlContent && (React.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })))));
 };
 export default EditorShow;

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

@@ -1,3 +1,4 @@
-export * from "./Editor.jsx";
-export * from "./EditorShow.jsx";
-export * from "./EditorList.jsx";
+export { Editor } from "./Editor.js";
+export { EditorShow } from "./EditorShow.js";
+export { EditorList } from "./EditorList.js";
+export { EditorFeature } from "./EditorFeature.js";

package/dist/components/Editor/index.js

@@ -1,3 +1,4 @@
-export * from "./Editor.jsx";
-export * from "./EditorShow.jsx";
-export * from "./EditorList.jsx";
+export { Editor } from "./Editor.js";
+export { EditorShow } from "./EditorShow.js";
+export { EditorList } from "./EditorList.js";
+export { EditorFeature } from "./EditorFeature.js";

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

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

package/dist/components/FeatureTabs/FeatureTabsEdit.js

@@ -0,0 +1,105 @@
+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 FeatureTabsEdit = (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 formTag = undefined;
+    const footerTag = undefined;
+    const commonLabel = resource?.options?.properties?.__featureTabsCommonLabel?.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 FeatureTabsEdit;

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

@@ -0,0 +1,8 @@
+import { ComponentLoader, FeatureType } from "adminjs";
+type FeatureTabsOptions = {
+    componentLoader?: ComponentLoader;
+    commonTabLabel?: string;
+};
+declare const FeatureTabsFeature: (config: FeatureTabsOptions) => FeatureType;
+export declare const FeatureTabs: (config: FeatureTabsOptions) => FeatureType;
+export default FeatureTabsFeature;

package/dist/components/FeatureTabs/FeatureTabsFeature.js

@@ -0,0 +1,28 @@
+import { buildFeature } from "adminjs";
+import { bundleComponent } from "../../utils/bundle-component.js";
+const COMPONENT_NAME = "FeatureTabs";
+const FeatureTabsFeature = (config) => {
+    const { componentLoader, commonTabLabel } = config;
+    const editComponent = bundleComponent(componentLoader, COMPONENT_NAME, "FeatureTabsEdit.js");
+    const showComponent = bundleComponent(componentLoader, COMPONENT_NAME, "FeatureTabsShow.js");
+    return buildFeature({
+        actions: {
+            edit: {
+                component: editComponent,
+            },
+            show: {
+                component: showComponent,
+            },
+        },
+        properties: {
+            __featureTabsCommonLabel: {
+                isVisible: false,
+                custom: {
+                    value: commonTabLabel,
+                },
+            },
+        },
+    });
+};
+export const FeatureTabs = FeatureTabsFeature;
+export default FeatureTabsFeature;

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

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