@rulab/adminjs-components 0.1.0-alpha.9 → 0.1.0-beta.2

package/README.md

@@ -1 +1,162 @@
-# adminjs-components
+# adminjs-components
+
+Prebuilt AdminJS components and features for common UI needs: colored status
+badges, slug generation, Editor.js content, sortable string lists, tabs layout,
+and record preview.
+
+## Install
+
+```bash
+pnpm add @rulab/adminjs-components
+# or
+npm install @rulab/adminjs-components
+```
+
+## Quick start
+
+```ts
+import AdminJS from "adminjs";
+import { ComponentLoader } from "adminjs";
+import { setComponentLoader, ColorStatusFeature } from "@rulab/adminjs-components";
+
+const componentLoader = new ComponentLoader();
+setComponentLoader(componentLoader);
+
+const admin = new AdminJS({
+  componentLoader,
+  resources: [
+    {
+      resource: YourResource,
+      features: [
+        ColorStatusFeature({
+          key: "status",
+          availableValues: [
+            { value: "draft", label: "Draft", color: "#64748b" },
+            { value: "published", label: "Published", color: "#16a34a" },
+          ],
+        }),
+      ],
+    },
+  ],
+});
+```
+
+You can also pass `componentLoader` into every feature instead of calling
+`setComponentLoader`.
+
+## Components and features
+
+### ColorStatus
+
+Renders a colored badge in edit/list/show based on a list of available values.
+
+```ts
+import { ColorStatusFeature } from "@rulab/adminjs-components";
+
+features: [
+  ColorStatusFeature({
+    key: "status",
+    availableValues: [
+      { value: "draft", label: "Draft", color: "#64748b" },
+      { value: "review", label: "In review", color: "#f59e0b" },
+      { value: "published", label: "Published", color: "#16a34a" },
+    ],
+  }),
+]
+```
+
+### Slug
+
+Generates a slug from another field and stores it in the target property.
+
+```ts
+import { SlugFeature } from "@rulab/adminjs-components";
+
+features: [
+  SlugFeature({
+    key: "slug",
+    source: "title",
+  }),
+]
+```
+
+### Editor
+
+Editor.js field for rich content. Supports optional image upload via
+`@adminjs/upload` provider.
+
+```ts
+import { EditorFeature } from "@rulab/adminjs-components";
+import { BaseProvider } from "@adminjs/upload";
+
+const uploadProvider = new BaseProvider({
+  bucket: "my-bucket",
+  baseUrl: "https://cdn.example.com",
+});
+
+features: [
+  EditorFeature({
+    key: "content",
+    uploadProvider, // optional
+  }),
+]
+```
+
+### StringList
+
+Sortable list stored as a single string (comma-separated by default).
+
+```ts
+import { StringListFeature } from "@rulab/adminjs-components";
+
+features: [
+  StringListFeature({
+    key: "facts",
+  }),
+]
+```
+
+### Tabs
+
+Groups edit/show fields into tabs based on property `props.tab` or
+`custom.tab`. Fields without a tab go to a common group.
+
+```ts
+import { TabsFeature } from "@rulab/adminjs-components";
+
+features: [
+  TabsFeature({
+    commonTabLabel: "Common",
+  }),
+]
+
+// resource options example
+properties: {
+  title: { props: { tab: "Main" } },
+  description: { props: { tab: "Main" } },
+  seoTitle: { props: { tab: "SEO" } },
+  seoDescription: { props: { tab: "SEO" } },
+},
+```
+
+### Preview
+
+Adds a record action that renders an iframe preview. The `url` can include
+template variables like `$id` or `$slug`.
+
+```ts
+import { PreviewFeature } from "@rulab/adminjs-components";
+
+features: [
+  PreviewFeature({
+    url: "https://example.com/posts/$id",
+    actionName: "preview", // optional
+  }),
+]
+```
+
+## Utilities
+
+- `setComponentLoader(loader)` and `getComponentLoader()` to reuse a single
+  AdminJS `ComponentLoader`.
+- `parseHtml(html)` helper to transform stored Editor.js output into HTML.

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, new Uint8Array(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;