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

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/Editor/EditorFeature.js

@@ -37,7 +37,7 @@ export const EditorFeature = (config) => {
                             size: buffer.length,
                             path: tempPath,
                         };
-                        await fs.writeFile(tempPath, buffer);
+                        await fs.writeFile(tempPath, new Uint8Array(buffer));
                         try {
                             await uploadProvider.upload(uploadedFile, key, context);
                         }

package/dist/components/Slug/SlugEdit.js

@@ -5,7 +5,6 @@ import { theme } from "@adminjs/design-system";
 import { slugifyTitle } from "../../utils/index.js";
 import { StyledCustomInput, StyledGenerateButton, StyledInputWrapper, StyledLabel, } from "./styles.js";
 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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rulab/adminjs-components",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -18,8 +18,6 @@
     "lint": "tsc"
   },
   "dependencies": {
-    "@adminjs/design-system": "^4.1.1",
-    "@adminjs/upload": "^4.0.2",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@editorjs/editorjs": "2.30.2",
@@ -29,22 +27,34 @@
     "@editorjs/paragraph": "^2.11.6",
     "@editorjs/quote": "^2.7.2",
     "@editorjs/table": "^2.4.1",
-    "adminjs": "^7.8.1",
     "chroma-js": "^3.0.0",
     "editorjs-audio-player": "^0.0.3",
     "editorjs-html": "^3.4.3",
-    "react": "^18.2.0",
     "react-select": "^5.8.0",
-    "slugify": "^1.6.6",
+    "slugify": "^1.6.6"
+  },
+  "peerDependencies": {
+    "@adminjs/design-system": "^4.1.1",
+    "@adminjs/upload": "^4.0.2",
+    "adminjs": "^7.8.1",
+    "react": "^18.2.0",
     "styled-components": "^6.1.11"
   },
+  "peerDependenciesMeta": {
+    "@adminjs/upload": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@adminjs/design-system": "^4.1.1",
+    "@adminjs/upload": "^4.0.2",
+    "adminjs": "^7.8.1",
     "@types/chroma-js": "^2.4.4",
     "@types/node": "^20.11.24",
     "@types/react": "^18.2.61",
-    "eslint": "^8.57.0",
-    "tsc-alias": "^1.8.16",
+    "react": "^18.2.0",
     "tsup": "^8.1.0",
+    "styled-components": "^6.1.11",
     "typescript": "^5.3.2"
   },
   "engines": {