@rulab/adminjs-components 0.2.0 → 0.2.1

package/README.md

@@ -49,6 +49,8 @@ You can also pass `componentLoader` into every feature instead of calling
 ### 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 +58,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" },
@@ -123,6 +126,7 @@ features: [
 ### 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,6 +134,7 @@ import { StringListFeature } from "@rulab/adminjs-components";
 features: [
   StringListFeature({
     key: "facts",
+    separator: "|", // optional, default "|"
   }),
 ]
 ```
@@ -138,13 +143,14 @@ features: [
 
 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"
   }),
 ]
 

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rulab/adminjs-components",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Prebuilt AdminJS features for common UI needs.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",