@rulab/adminjs-components 0.2.0 → 0.2.2

package/README.md

@@ -1,5 +1,7 @@
 # adminjs-components
 
+<a id="top"></a>
+
 Prebuilt AdminJS components and features for common UI needs: colored status
 badges, slug and UUID generation, Editor.js content, sortable string lists, tabs
 layout, and record preview.
@@ -46,9 +48,19 @@ You can also pass `componentLoader` into every feature instead of calling
 
 ## Components and features
 
+- [ColorStatus](#colorstatus)
+- [Slug](#slug)
+- [UUID](#uuid)
+- [Editor](#editor)
+- [StringList](#stringlist)
+- [Tabs](#tabs)
+- [Preview](#preview)
+
 ### ColorStatus
 
 Renders a colored badge in edit/list/show based on a list of available values.
+By default (`nullable: false`) the first option is auto-selected in new records.
+Set `nullable: true` to allow an empty value.
 
 ```ts
 import { ColorStatusFeature } from "@rulab/adminjs-components";
@@ -56,6 +68,7 @@ import { ColorStatusFeature } from "@rulab/adminjs-components";
 features: [
   ColorStatusFeature({
     key: "status",
+    nullable: false, // optional, default false
     availableValues: [
       { value: "draft", label: "Draft", color: "#64748b" },
       { value: "review", label: "In review", color: "#f59e0b" },
@@ -65,6 +78,8 @@ features: [
 ]
 ```
 
+[Back to top](#top)
+
 ### Slug
 
 Generates a slug from another field and stores it in the target property.
@@ -82,6 +97,8 @@ features: [
 ]
 ```
 
+[Back to top](#top)
+
 ### UUID
 
 Adds a UUID field with a "Generate UUID" button in edit view.
@@ -98,10 +115,12 @@ features: [
 ]
 ```
 
+[Back to top](#top)
+
 ### Editor
 
 Editor.js field for rich content. Supports optional image upload via
-`@adminjs/upload` provider.
+`@adminjs/upload` provider, plus built-in audio and video blocks.
 
 ```ts
 import { EditorFeature } from "@rulab/adminjs-components";
@@ -120,9 +139,12 @@ features: [
 ]
 ```
 
+[Back to top](#top)
+
 ### StringList
 
 Sortable list stored as a single string (comma-separated by default).
+Use `separator` to override the delimiter used for storing and rendering values.
 
 ```ts
 import { StringListFeature } from "@rulab/adminjs-components";
@@ -130,21 +152,25 @@ import { StringListFeature } from "@rulab/adminjs-components";
 features: [
   StringListFeature({
     key: "facts",
+    separator: "|", // optional, default "|"
   }),
 ]
 ```
 
+[Back to top](#top)
+
 ### Tabs
 
 Groups edit/show fields into tabs based on property `props.tab` or
 `custom.tab`. Fields without a tab go to a common group.
+`commonTabLabel` is optional and defaults to `"Common"`.
 
 ```ts
 import { TabsFeature } from "@rulab/adminjs-components";
 
 features: [
   TabsFeature({
-    commonTabLabel: "Common",
+    commonTabLabel: "General", // optional, default "Common"
   }),
 ]
 
@@ -157,6 +183,8 @@ properties: {
 },
 ```
 
+[Back to top](#top)
+
 ### Preview
 
 Adds a record action that renders an iframe preview. The `url` can include
@@ -173,6 +201,8 @@ features: [
 ]
 ```
 
+[Back to top](#top)
+
 ## Utilities
 
 - `setComponentLoader(loader)` and `getComponentLoader()` to reuse a single

package/dist/components/ColorStatus/ColorStatusEdit.js

@@ -43,8 +43,12 @@ const colorStyles = {
 };
 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);
+    const nullable = Boolean(property.custom?.nullable);
+    const isNewRecord = !record.id;
+    const currentValue = record.params[property.path];
+    const currentOption = availableValues.find((item) => item.value === currentValue);
+    const initialOption = currentOption ?? (!nullable && isNewRecord ? availableValues[0] : null);
+    const [selectOption, setCurrentOption] = useState(initialOption);
     const handleSelectChange = (option) => {
         setCurrentOption(option);
     };
@@ -53,6 +57,6 @@ export const ColorStatusEdit = ({ property, record, onChange, }) => {
     }, [selectOption]);
     return (React.createElement(ColorStatusWrapper, null,
         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 })));
+        React.createElement(Select, { className: "basic-single", classNamePrefix: "select", value: selectOption, onChange: handleSelectChange, isClearable: nullable, name: "color", options: availableValues, styles: colorStyles })));
 };
 export default ColorStatusEdit;

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

@@ -4,6 +4,7 @@ type ColorStatusOptions = {
     componentLoader?: ComponentLoader;
     key: string;
     availableValues?: AvailableValueType[];
+    nullable?: boolean;
 };
 export declare const ColorStatusFeature: (config: ColorStatusOptions) => FeatureType;
 export default ColorStatusFeature;

package/dist/components/ColorStatus/ColorStatusFeature.js

@@ -2,7 +2,10 @@ 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 { componentLoader, key, availableValues = [], nullable = false } = config;
+    const values = nullable
+        ? [{ value: null, label: "", color: "#ffffff" }, ...availableValues]
+        : availableValues;
     const editComponent = bundleComponent(componentLoader, COMPONENT_NAME, "ColorStatusEdit.js");
     const listComponent = bundleComponent(componentLoader, COMPONENT_NAME, "ColorStatusList.js");
     const showComponent = bundleComponent(componentLoader, COMPONENT_NAME, "ColorStatusShow.js");
@@ -10,7 +13,10 @@ export const ColorStatusFeature = (config) => {
         properties: {
             [key]: {
                 isVisible: { filter: true, show: true, edit: true, list: true },
-                availableValues,
+                availableValues: values,
+                custom: {
+                    nullable,
+                },
                 components: {
                     edit: editComponent,
                     list: listComponent,

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

@@ -26,4 +26,5 @@ export declare const EDITOR_TOOLS: {
         inlineToolbar: boolean;
     };
     audioPlayer: any;
+    video: any;
 };

package/dist/components/Editor/config.js

@@ -5,6 +5,8 @@ import Quote from "@editorjs/quote";
 import Table from "@editorjs/table";
 // @ts-ignore
 import AudioPlayer from "editorjs-audio-player";
+// @ts-ignore
+import SimpleVideo from "simple-video-editorjs";
 export const EDITOR_TOOLS = {
     paragraph: {
         class: Paragraph,
@@ -31,4 +33,5 @@ export const EDITOR_TOOLS = {
         inlineToolbar: true,
     },
     audioPlayer: AudioPlayer,
+    video: SimpleVideo,
 };

package/dist/components/StringList/StringList.js

@@ -3,8 +3,9 @@ import React, { useEffect, useState, } from "react";
 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";
-export const StringList = ({ record, onChange, property, stringListSeparator = separator, }) => {
+const DEFAULT_SEPARATOR = "|";
+export const StringList = ({ record, onChange, property, stringListSeparator = DEFAULT_SEPARATOR, }) => {
+    const separatorValue = property.props?.stringListSeparator ?? stringListSeparator;
     const stringListValue = record.params?.[property.path] ?? property.props.value ?? "";
     const initialList = stringListValue
         ? prepareDataForList(stringListValue)
@@ -45,10 +46,10 @@ export const StringList = ({ record, onChange, property, stringListSeparator = s
         setList(newData);
     }
     function prepareDataForDatabase(list) {
-        return list.map(({ value }) => value).join(stringListSeparator);
+        return list.map(({ value }) => value).join(separatorValue);
     }
     function prepareDataForList(str) {
-        return str.split(stringListSeparator).map((item) => createListObject(item));
+        return str.split(separatorValue).map((item) => createListObject(item));
     }
     function createListObject(value) {
         return {

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

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

package/dist/components/StringList/StringListFeature.js

@@ -2,13 +2,14 @@ import { buildFeature } from "adminjs";
 import { bundleComponent } from "../../utils/bundle-component.js";
 const COMPONENT_NAME = "StringList";
 export const StringListFeature = (config) => {
-    const { componentLoader, key } = config;
+    const { componentLoader, key, separator } = 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 },
+                props: separator ? { stringListSeparator: separator } : undefined,
                 components: {
                     edit: editComponent,
                     show: showComponent,

package/dist/components/StringList/StringListShow.js

@@ -2,13 +2,15 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import { theme } from "@adminjs/design-system";
 import { StyledShowLabel, StyledShowWrapper, StyledListItem } from "./styles.js";
-import { separator } from "./constants.js";
-export const StringListShow = ({ property, record, stringListSeparator = separator, }) => {
+const DEFAULT_SEPARATOR = "|";
+export const StringListShow = ({ property, record, stringListSeparator = DEFAULT_SEPARATOR, }) => {
+    const separatorValue = property.props?.stringListSeparator ?? stringListSeparator;
+    const value = record.params[property.path];
     return (React.createElement(ThemeProvider, { theme: theme },
         React.createElement(StyledShowWrapper, null,
             React.createElement(StyledShowLabel, null, property.label ?? property.path),
-            record.params.facts && (React.createElement("ul", null, record.params.facts
-                .split(stringListSeparator)
+            value && (React.createElement("ul", null, value
+                .split(separatorValue)
                 .map((item, index) => (React.createElement(StyledListItem, { key: index }, `- ${item}`))))))));
 };
 export default StringListShow;

package/dist/utils/parseHtml.js

@@ -20,12 +20,20 @@ const tableParser = (block) => {
     }
 };
 const audioPlayerParser = (block) => {
-    return `<audio controls src={${block.data.src}} />`;
+    return `<audio controls src="${block.data.src}"></audio>`;
+};
+const videoParser = (block) => {
+    const controls = block.data.controls === false ? "" : " controls";
+    const autoplay = block.data.autoplay ? " autoplay" : "";
+    const muted = block.data.muted ? " muted" : "";
+    const caption = block.data.caption ? `<figcaption>${block.data.caption}</figcaption>` : "";
+    return `<figure><video src="${block.data.url}"${controls}${autoplay}${muted}></video>${caption}</figure>`;
 };
 export const parseHtml = (jsonData) => {
     const edjsParser = edjsHTML({
         table: tableParser,
         audioPlayer: audioPlayerParser,
+        video: videoParser,
     });
     try {
         const data = edjsParser.parse(JSON.parse(jsonData));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rulab/adminjs-components",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Prebuilt AdminJS features for common UI needs.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -51,6 +51,7 @@
     "editorjs-audio-player": "~0.0.3",
     "editorjs-html": "~3.4.3",
     "react-select": "^5.8.0",
+    "simple-video-editorjs": "~1.4.9",
     "slugify": "^1.6.6"
   },
   "peerDependencies": {