@rulab/adminjs-components 0.1.0 → 0.2.0

package/README.md

@@ -1,8 +1,8 @@
 # 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.
+badges, slug and UUID generation, Editor.js content, sortable string lists, tabs
+layout, and record preview.
 
 ## Install
 
@@ -68,6 +68,7 @@ features: [
 ### Slug
 
 Generates a slug from another field and stores it in the target property.
+Use `button` to override the generate button label in edit view.
 
 ```ts
 import { SlugFeature } from "@rulab/adminjs-components";
@@ -76,6 +77,23 @@ features: [
   SlugFeature({
     key: "slug",
     source: "title",
+    button: "Create slug", // optional
+  }),
+]
+```
+
+### UUID
+
+Adds a UUID field with a "Generate UUID" button in edit view.
+Use `button` to override the generate button label.
+
+```ts
+import { UuidFeature } from "@rulab/adminjs-components";
+
+features: [
+  UuidFeature({
+    key: "uuid",
+    button: "Generate ID", // optional
   }),
 ]
 ```

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

@@ -1,13 +1,11 @@
-export function Editor({ property, record, resource, onChange, onChangeAdmin, editorId }: {
+import React from "react";
+type EditorProps = {
     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);
-}>;
+    onChange?: (path: string, value: string | undefined) => void;
+    onChangeAdmin?: (path: string, value: string | undefined) => void;
+    editorId?: string;
+};
+export declare const Editor: ({ property, record, resource, onChange, onChangeAdmin, editorId, }: EditorProps) => React.JSX.Element;
 export default Editor;
-import React from "react";

package/dist/components/Editor/Editor.js

@@ -22,15 +22,15 @@ const getEditorData = (record, property) => {
     try {
         return JSON.parse(raw);
     }
-    catch (error) {
+    catch {
         return "";
     }
 };
-export const Editor = ({ property, record, resource, onChange, onChangeAdmin, editorId }) => {
+export const Editor = ({ property, record, resource, onChange, onChangeAdmin, editorId, }) => {
     const [jsonData, setJsonData] = useState();
     const isSavedData = Boolean(record?.params?.[property.path]);
     const holderId = editorId || property?.props?.editorId || `editor-${property.path}`;
-    const uploadAction = property?.props?.uploadAction;
+    const uploadAction = property?.custom?.uploadAction ?? property?.props?.uploadAction;
     const resourceId = resource?.id;
     const ref = useRef();
     useEffect(() => {
@@ -78,7 +78,7 @@ export const Editor = ({ property, record, resource, onChange, onChangeAdmin, ed
                     holder: holderId,
                     tools,
                     data: isSavedData ? getEditorData(record, property) : "",
-                    async onChange(api, event) {
+                    async onChange(api) {
                         const data = await api.saver.save();
                         setJsonData(JSON.stringify(data));
                     },
@@ -91,6 +91,9 @@ export const Editor = ({ property, record, resource, onChange, onChangeAdmin, ed
             ref?.current?.destroy?.();
         };
     }, []);
-    return (React.createElement(ThemeProvider, { theme: theme }, React.createElement(StyledLabel, null, property.label ?? property.path), React.createElement(StyledEditorWrapper, null, React.createElement(StyledEditor, { id: holderId }))));
+    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/EditorList.d.ts

@@ -1,9 +1,7 @@
-export function EditorList({ property, record }: {
+import React from "react";
+type EditorListProps = {
     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 declare const EditorList: ({ property, record }: EditorListProps) => React.JSX.Element;
 export default EditorList;
-import React from "react";

package/dist/components/Editor/EditorList.js

@@ -5,6 +5,7 @@ import { parseHtml } from "../../utils/parseHtml.js";
 import { StyledEditorViewWrapper } from "./styles.js";
 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 } })))));
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(StyledEditorViewWrapper, null, htmlContent && React.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } }))));
 };
 export default EditorList;

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

@@ -1,9 +1,7 @@
-export function EditorShow({ property, record }: {
+import React from "react";
+type EditorShowProps = {
     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 declare const EditorShow: ({ property, record }: EditorShowProps) => React.JSX.Element;
 export default EditorShow;
-import React from "react";

package/dist/components/Editor/EditorShow.js

@@ -5,6 +5,9 @@ import { parseHtml } from "../../utils/parseHtml.js";
 import { StyledEditorShowWrapper, StyledShowLabel } from "./styles.js";
 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.label ?? 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/Slug/SlugEdit.js

@@ -17,7 +17,7 @@ export const SlugEdit = ({ property, record, resource, onChange, }) => {
         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"))));
+            React.createElement(StyledGenerateButton, { variant: "outlined", onClick: generateSlug }, custom.button ?? "Generate Slug"))));
     function handleInput(e) {
         setInputValue(e.target.value);
     }

package/dist/components/Slug/SlugFeature.js

@@ -2,7 +2,7 @@ import { buildFeature } from "adminjs";
 import { bundleComponent } from "../../utils/bundle-component.js";
 const COMPONENT_NAME = 'Slug';
 export const SlugFeature = (config) => {
-    const { componentLoader, source, key } = config;
+    const { componentLoader, source, key, button } = config;
     const editComponent = bundleComponent(componentLoader, COMPONENT_NAME, 'SlugEdit.js');
     return buildFeature({
         properties: {
@@ -11,7 +11,7 @@ export const SlugFeature = (config) => {
                 components: {
                     edit: editComponent,
                 },
-                custom: { source, key }
+                custom: { source, key, button }
             },
         },
     });

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

@@ -3,5 +3,6 @@ type SlugOptions = {
     componentLoader?: ComponentLoader;
     source: string;
     key: string;
+    button?: string;
 };
 export default SlugOptions;

package/dist/components/Uuid/UuidEdit.d.ts

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

package/dist/components/Uuid/UuidEdit.js

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from "react";
+import { ThemeProvider } from "styled-components";
+import { theme } from "@adminjs/design-system";
+import { StyledCustomInput, StyledGenerateButton, StyledInputWrapper, StyledLabel, } from "./styles.js";
+const generateUuidV4 = () => {
+    if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+        return crypto.randomUUID();
+    }
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (char) => {
+        const random = (Math.random() * 16) | 0;
+        const value = char === "x" ? random : (random & 0x3) | 0x8;
+        return value.toString(16);
+    });
+};
+export const UuidEdit = ({ property, record, onChange, }) => {
+    const { custom } = property;
+    const [inputValue, setInputValue] = useState(record.params[property.path] ?? "");
+    useEffect(() => {
+        onChange(property.path, inputValue);
+    }, [inputValue]);
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(StyledLabel, { htmlFor: "customUuid" }, 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: generateUuid }, custom?.button ?? "Generate UUID"))));
+    function handleInput(e) {
+        setInputValue(e.target.value);
+    }
+    function generateUuid(e) {
+        e.preventDefault();
+        setInputValue(generateUuidV4());
+    }
+};
+export default UuidEdit;

package/dist/components/Uuid/UuidFeature.d.ts

@@ -0,0 +1,4 @@
+import { FeatureType } from "adminjs";
+import UuidOptions from "./UuidOptions.type.js";
+export declare const UuidFeature: (config: UuidOptions) => FeatureType;
+export default UuidFeature;

package/dist/components/Uuid/UuidFeature.js

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

package/dist/components/Uuid/UuidOptions.type.d.ts

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

package/dist/components/Uuid/UuidOptions.type.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Uuid/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledInputWrapper: any;
+export declare const StyledCustomInput: any;
+export declare const StyledGenerateButton: any;
+export declare const StyledLabel: any;

package/dist/components/Uuid/styles.js

@@ -0,0 +1,20 @@
+// @ts-ignore
+import { styled } from "@adminjs/design-system/styled-components";
+// @ts-ignore
+import { Box, Button, Input } from "@adminjs/design-system";
+export const StyledInputWrapper = styled(Box) `
+  display: flex;
+  margin-bottom: 40px;
+`;
+export const StyledCustomInput = styled(Input) `
+  width: 100%;
+  margin-right: 10px;
+`;
+export const StyledGenerateButton = styled(Button) `
+  white-space: nowrap;
+`;
+export const StyledLabel = styled.div `
+  font-size: 12px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
+`;

package/dist/components/index.d.ts

@@ -13,3 +13,4 @@ export { StringListFeature } from "./StringList/StringListFeature.js";
 export { SlugFeature } from "./Slug/SlugFeature.js";
 export { TabsFeature } from "./Tabs/TabsFeature.js";
 export { PreviewFeature } from "./Preview/PreviewFeature.js";
+export { UuidFeature } from "./Uuid/UuidFeature.js";

package/dist/components/index.js

@@ -13,3 +13,4 @@ export { StringListFeature } from "./StringList/StringListFeature.js";
 export { SlugFeature } from "./Slug/SlugFeature.js";
 export { TabsFeature } from "./Tabs/TabsFeature.js";
 export { PreviewFeature } from "./Preview/PreviewFeature.js";
+export { UuidFeature } from "./Uuid/UuidFeature.js";

package/package.json

@@ -1,35 +1,55 @@
 {
   "name": "@rulab/adminjs-components",
-  "version": "0.1.0",
+  "version": "0.2.0",
+  "description": "Prebuilt AdminJS features for common UI needs.",
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "private": false,
   "type": "module",
+  "license": "MIT",
   "keywords": [
-    "adminjs"
+    "adminjs",
+    "components",
+    "react",
+    "editorjs"
   ],
+  "homepage": "https://github.com/rulab/adminjs-components#readme",
+  "bugs": {
+    "url": "https://github.com/rulab/adminjs-components/issues"
+  },
   "repository": {
     "url": "git+https://github.com/rulab/adminjs-components.git"
   },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
   "scripts": {
-    "build": "tsc && node scripts/fix-import-extensions.js",
-    "build-tsup": "tsup",
-    "lint": "tsc"
+    "build": "tsc",
+    "lint": "tsc",
+    "prepublishOnly": "pnpm run build"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
-    "@editorjs/editorjs": "2.30.2",
-    "@editorjs/header": "^2.8.7",
-    "@editorjs/image": "^2.9.2",
-    "@editorjs/list": "^1.9.0",
-    "@editorjs/paragraph": "^2.11.6",
-    "@editorjs/quote": "^2.7.2",
-    "@editorjs/table": "^2.4.1",
+    "@editorjs/editorjs": "~2.30.2",
+    "@editorjs/header": "~2.8.7",
+    "@editorjs/image": "~2.9.2",
+    "@editorjs/list": "~1.9.0",
+    "@editorjs/paragraph": "~2.11.6",
+    "@editorjs/quote": "~2.7.2",
+    "@editorjs/table": "~2.4.1",
     "chroma-js": "^3.0.0",
-    "editorjs-audio-player": "^0.0.3",
-    "editorjs-html": "^3.4.3",
+    "editorjs-audio-player": "~0.0.3",
+    "editorjs-html": "~3.4.3",
     "react-select": "^5.8.0",
     "slugify": "^1.6.6"
   },
@@ -53,7 +73,6 @@
     "@types/node": "^20.11.24",
     "@types/react": "^18.2.61",
     "react": "^18.2.0",
-    "tsup": "^8.1.0",
     "styled-components": "^6.1.11",
     "typescript": "^5.3.2"
   },