@rulab/adminjs-components 0.0.3 → 0.0.5

package/dist/bundle.js

@@ -0,0 +1,8 @@
+import path from "path";
+import * as url from "url";
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+const bundleComponent = (loader, componentName) => {
+    const componentPath = path.join(__dirname, `./components/${componentName}`);
+    return loader.add(componentName, componentPath);
+};
+export default bundleComponent;

package/dist/components/CustomSlug/CustomSlug.jsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState, } from "react";
+import { ThemeProvider } from "styled-components";
+import { theme, Label } from "@adminjs/design-system";
+import { slugifyTitle } from "../../utils/index.js";
+import { StyledInputWrapper, StyledCustomInput, StyledGenerateButton, } from "./styles.js";
+const CustomSlug = ({ property, record, onChange }) => {
+    const [inputValue, setInputValue] = useState(record.params.slug);
+    useEffect(() => {
+        onChange(property.path, inputValue);
+    }, [inputValue]);
+    return (<ThemeProvider theme={theme}>
+      <Label htmlFor="customSlug">Slug</Label>
+      <StyledInputWrapper>
+        <StyledCustomInput id={property.path} name={property.path} value={inputValue} onChange={handleInput}/>
+        <StyledGenerateButton variant="outlined" onClick={generateSlug}>
+          Generate Slug
+        </StyledGenerateButton>
+      </StyledInputWrapper>
+    </ThemeProvider>);
+    function handleInput(e) {
+        setInputValue(e.target.value);
+    }
+    function generateSlug(e) {
+        e.preventDefault();
+        const title = record.title;
+        setInputValue(slugifyTitle(title));
+    }
+};
+export default CustomSlug;

package/dist/components/CustomSlug/index.js

@@ -0,0 +1 @@
+export { default } from "./CustomSlug.js";

package/dist/components/CustomSlug/styles.js

@@ -0,0 +1,15 @@
+// @ts-ignore
+import { styled } from "@adminjs/design-system/styled-components";
+// @ts-ignore
+import { Button, Box, 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;
+`;

package/dist/components/Editor/config.js

@@ -0,0 +1,11 @@
+import Header from "@editorjs/header";
+import Paragraph from "@editorjs/paragraph";
+import List from "@editorjs/list";
+export const EDITOR_TOOLS = {
+    paragraph: {
+        class: Paragraph,
+        inlineToolbar: true,
+    },
+    list: List,
+    header: Header,
+};

package/dist/components/Editor/index.js

@@ -0,0 +1 @@
+export { default } from "./Editor.jsx";

package/dist/components/Editor/styles.js

@@ -0,0 +1,64 @@
+import { Box } from "@adminjs/design-system";
+import { styled } from "@adminjs/design-system/styled-components";
+export const Label = styled.div `
+  font-size: 12px;
+  margin-bottom: 8px;
+`;
+export const EditorWrapper = styled(Box) `
+  padding: 12px;
+  border: 1px solid rgb(187, 195, 203);
+`;
+export const StyledEditor = styled.div `
+  .cdx-block,
+  .ce-header {
+    padding-left: 58px;
+  }
+
+  .cdx-list {
+    padding-left: 85px;
+  }
+
+  .ce-block__content {
+    width: 100%;
+    max-width: none;
+  }
+
+  .ce-toolbar__content {
+    max-width: none;
+    left: 0;
+  }
+
+  .ce-toolbar__actions {
+    left: 0;
+  }
+
+  h1.ce-header {
+    font-size: 22px;
+    font-weight: bold;
+  }
+
+  h2.ce-header {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  h3.ce-header {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  h4.ce-header {
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  h5.ce-header {
+    font-size: 15px;
+    font-weight: bold;
+  }
+
+  h6.ce-header {
+    font-size: 14px;
+    font-weight: bold;
+  }
+`;

package/dist/components/StringList/SortableList/SortableList.jsx

@@ -0,0 +1,43 @@
+import React, { Fragment, useMemo, useState } from 'react';
+import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, DragOverlay, defaultDropAnimationSideEffects, } from '@dnd-kit/core';
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { SortableItem } from './components/index.js';
+import { StyledListWrapper } from './styles.js';
+const dropAnimationConfig = {
+    sideEffects: defaultDropAnimationSideEffects({
+        styles: {
+            active: {
+                opacity: '0.4',
+            },
+        },
+    }),
+};
+export function SortableList({ items, onChange, renderItem, }) {
+    const [active, setActive] = useState(null);
+    const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    return (<DndContext sensors={sensors} onDragStart={({ active }) => {
+            setActive(active);
+        }} onDragEnd={({ active, over }) => {
+            if (over && active.id !== over?.id) {
+                const activeIndex = items.findIndex(({ id }) => id === active.id);
+                const overIndex = items.findIndex(({ id }) => id === over.id);
+                onChange(arrayMove(items, activeIndex, overIndex));
+            }
+            setActive(null);
+        }} onDragCancel={() => {
+            setActive(null);
+        }}>
+      <SortableContext items={items} strategy={verticalListSortingStrategy}>
+        <StyledListWrapper role="application">
+          {items.map((item, index) => (<Fragment key={index}>{renderItem(item)}</Fragment>))}
+        </StyledListWrapper>
+      </SortableContext>
+      <DragOverlay dropAnimation={dropAnimationConfig}>
+        {activeItem ? renderItem(activeItem) : null}
+      </DragOverlay>
+    </DndContext>);
+}
+SortableList.Item = SortableItem;

package/dist/components/StringList/SortableList/components/SortableItem/DragHandle.jsx

@@ -0,0 +1,10 @@
+import React, { useContext } from 'react';
+import { DragButton } from './styles.js';
+export const DragHandle = ({ context }) => {
+    const { attributes, listeners, ref } = useContext(context);
+    return (<DragButton {...attributes} {...listeners} ref={ref}>
+      <svg viewBox="0 0 20 20" width="13">
+        <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
+      </svg>
+    </DragButton>);
+};

package/dist/components/StringList/SortableList/components/SortableItem/SortableItem.jsx

@@ -0,0 +1,32 @@
+import React, { createContext, useMemo } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { Button, Icon } from '@adminjs/design-system';
+import { DragHandle } from './DragHandle.js';
+import { StyledListItem } from './styles.js';
+const SortableItemContext = createContext({
+    attributes: {},
+    listeners: undefined,
+    ref() { },
+});
+export function SortableItem({ children, id, onDelete, }) {
+    const { attributes, isDragging, listeners, setNodeRef, setActivatorNodeRef } = useSortable({ id });
+    const context = useMemo(() => ({
+        attributes,
+        listeners,
+        ref: setActivatorNodeRef,
+    }), [attributes, listeners, setActivatorNodeRef]);
+    const style = {
+        opacity: isDragging ? 0.4 : undefined,
+    };
+    return (<SortableItemContext.Provider value={context}>
+      <StyledListItem ref={setNodeRef} style={style}>
+        <div>
+          <DragHandle context={SortableItemContext}/>
+          {children}
+        </div>
+        <Button variant="outlined" color="danger" size="icon" onClick={(e) => onDelete(e, id)}>
+          <Icon icon="X" color="red"/>
+        </Button>
+      </StyledListItem>
+    </SortableItemContext.Provider>);
+}

package/dist/components/StringList/SortableList/components/SortableItem/styles.js

@@ -0,0 +1,20 @@
+import { styled } from '@adminjs/design-system/styled-components';
+export const StyledListItem = styled.li `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+  padding: 10px 20px 10px 15px;
+  box-shadow:
+    0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05),
+    0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
+  border-radius: 5px;
+  list-style: none;
+`;
+export const DragButton = styled.button `
+  padding: 3px;
+  margin-right: 15px;
+  cursor: move;
+  background: none;
+  border: none;
+`;

package/dist/components/StringList/SortableList/components/SortableItem/types.js

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

package/dist/components/StringList/SortableList/components/index.js

@@ -0,0 +1,2 @@
+export { SortableItem } from './SortableItem/SortableItem.js';
+export { DragHandle } from './SortableItem/DragHandle.js';

package/dist/components/StringList/SortableList/index.js

@@ -0,0 +1 @@
+export { SortableList } from './SortableList.js';

package/dist/components/StringList/SortableList/styles.js

@@ -0,0 +1,8 @@
+import { styled } from '@adminjs/design-system/styled-components';
+export const StyledListWrapper = styled.ul `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0;
+  list-style: none;
+`;

package/dist/components/StringList/StringList.jsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect, } from "react";
+import { ThemeProvider } from "styled-components";
+import { theme, Button, Input, Label } from "@adminjs/design-system";
+import { StyledWrapper, StyledCustomInput, StyledListWrapper, StyledInputWrapper, } from "./styles.js";
+import { SortableList } from "./SortableList/SortableList.js";
+const StringList = ({ record, onChange, property }) => {
+    const stringListValue = record.params?.[property.path] ?? property.props.value ?? "";
+    const initialList = stringListValue
+        ? prepareDataForList(stringListValue)
+        : [];
+    const [inputValue, setInputValue] = useState("");
+    const [list, setList] = useState(initialList);
+    const serializedData = prepareDataForDatabase(list);
+    useEffect(() => {
+        onChange(property.path, serializedData);
+    }, [serializedData]);
+    return (<ThemeProvider theme={theme}>
+      <Label htmlFor="custom">String List</Label>
+      <StyledWrapper>
+        <StyledListWrapper>
+          <SortableList items={list} onChange={setList} renderItem={(item) => (<SortableList.Item id={item.id} onDelete={handleDeleteButton}>
+                {item.value}
+              </SortableList.Item>)}/>
+        </StyledListWrapper>
+        <StyledInputWrapper>
+          <Input id="stringList" name={property.path} value={serializedData} hidden/>
+          <StyledCustomInput id="custom" name="customInput" value={inputValue} onChange={handleInput} onKeyPress={handleEnterPress}/>
+          <Button variant="outlined" onClick={handleAddButton}>
+            Add
+          </Button>
+        </StyledInputWrapper>
+      </StyledWrapper>
+    </ThemeProvider>);
+    function handleInput(e) {
+        setInputValue(e.target.value);
+    }
+    function handleEnterPress(e) {
+        if (e.key === "Enter") {
+            handleAddButton(e);
+        }
+    }
+    function handleAddButton(e) {
+        e.preventDefault();
+        if (Boolean(inputValue)) {
+            setList([...list, createListObject(inputValue)]);
+            setInputValue("");
+        }
+    }
+    function handleDeleteButton(e, id) {
+        e.preventDefault();
+        const newData = list.filter((item) => item.id !== id);
+        setList(newData);
+    }
+    function prepareDataForDatabase(list) {
+        return list.map(({ value }) => value).join("|");
+    }
+    function prepareDataForList(str) {
+        return str.split("|").map((item) => createListObject(item));
+    }
+    function createListObject(value) {
+        return {
+            id: `${Date.now()}-${Math.floor(Math.random() * 1000)}`,
+            value: value,
+        };
+    }
+};
+export default StringList;

package/dist/components/StringList/index.js

@@ -0,0 +1 @@
+export { default } from "./StringList.js";

package/dist/components/StringList/styles.js

@@ -0,0 +1,16 @@
+import { styled } from "@adminjs/design-system/styled-components";
+import { Box, Input } from "@adminjs/design-system";
+export const StyledWrapper = styled(Box) `
+  display: flex;
+  flex-direction: column;
+`;
+export const StyledCustomInput = styled(Input) `
+  width: 100%;
+  margin-right: 10px;
+`;
+export const StyledInputWrapper = styled(Box) `
+  display: flex;
+`;
+export const StyledListWrapper = styled(Box) `
+  margin-bottom: 15px;
+`;

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export { default as CustomSlug } from "./CustomSlug/CustomSlug.js";
+export { default as StringList } from "./StringList/StringList.js";
+export { default as Editor } from "./Editor";

package/dist/editorFeature.js

@@ -0,0 +1,16 @@
+import { buildFeature, } from "adminjs";
+import bundleComponent from "./bundle.js";
+const editorFeature = (options) => {
+    const { componentLoader, name } = options;
+    const editComponent = bundleComponent(componentLoader, "Editor");
+    return buildFeature({
+        properties: {
+            [name]: {
+                components: {
+                    edit: editComponent,
+                },
+            },
+        },
+    });
+};
+export default editorFeature;

package/dist/index.cjs

@@ -32,7 +32,9 @@ var src_exports = {};
 __export(src_exports, {
   CustomSlug: () => CustomSlug_default,
   Editor: () => Editor_default,
-  StringList: () => StringList_default
+  EditorShow: () => EditorShow_default,
+  StringList: () => StringList_default,
+  StringListShow: () => StringListShow_default
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -49,7 +51,7 @@ var slugifyImport_default = import_slugify.default;
 var slugifyTitle = (title) => {
   return slugifyImport_default(title, {
     replacement: "-",
-    remove: void 0,
+    remove: /[*+~.()'"!:@]/g,
     lower: true,
     locale: "vi",
     trim: true
@@ -91,8 +93,10 @@ var CustomSlug = ({ property, record, onChange }) => {
   }
   function generateSlug(e) {
     e.preventDefault();
-    const title = record.title;
-    setInputValue(slugifyTitle(title));
+    const title = record.params.title;
+    if (title) {
+      setInputValue(slugifyTitle(title));
+    }
   }
 };
 var CustomSlug_default = CustomSlug;
@@ -108,6 +112,7 @@ var import_design_system3 = require("@adminjs/design-system");
 var StyledWrapper = (0, import_styled_components3.styled)(import_design_system3.Box)`
   display: flex;
   flex-direction: column;
+  margin-bottom: 45px;
 `;
 var StyledCustomInput2 = (0, import_styled_components3.styled)(import_design_system3.Input)`
   width: 100%;
@@ -119,6 +124,19 @@ var StyledInputWrapper2 = (0, import_styled_components3.styled)(import_design_sy
 var StyledListWrapper = (0, import_styled_components3.styled)(import_design_system3.Box)`
   margin-bottom: 15px;
 `;
+var StringListShowLabel = import_styled_components3.styled.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
+  line-height: 16px;
+  color: rgb(137, 138, 154);
+`;
+var StringListShowWrapper = (0, import_styled_components3.styled)(import_design_system3.Box)`
+  margin-bottom: 35px;
+`;
+var ListItem = import_styled_components3.styled.li`
+  margin-bottom: 5px;
+`;
 
 // src/components/StringList/SortableList/SortableList.tsx
 var import_react4 = __toESM(require("react"), 1);
@@ -258,8 +276,16 @@ function SortableList({
 }
 SortableList.Item = SortableItem;
 
+// src/constants.ts
+var separator = "|";
+
 // src/components/StringList/StringList.tsx
-var StringList = ({ record, onChange, property }) => {
+var StringList = ({
+  record,
+  onChange,
+  property,
+  stringListSeparator = separator
+}) => {
   const stringListValue = record.params?.[property.path] ?? property.props.value ?? "";
   const initialList = stringListValue ? prepareDataForList(stringListValue) : [];
   const [inputValue, setInputValue] = (0, import_react5.useState)("");
@@ -314,10 +340,10 @@ var StringList = ({ record, onChange, property }) => {
     setList(newData);
   }
   function prepareDataForDatabase(list2) {
-    return list2.map(({ value }) => value).join("|");
+    return list2.map(({ value }) => value).join(stringListSeparator);
   }
   function prepareDataForList(str) {
-    return str.split("|").map((item) => createListObject(item));
+    return str.split(stringListSeparator).map((item) => createListObject(item));
   }
   function createListObject(value) {
     return {
@@ -328,24 +354,40 @@ var StringList = ({ record, onChange, property }) => {
 };
 var StringList_default = StringList;
 
-// src/components/Editor/Editor.jsx
+// src/components/StringList/StringListShow.tsx
 var import_react6 = __toESM(require("react"), 1);
-var import_styled_components8 = require("styled-components");
+var import_styled_components7 = require("styled-components");
+var import_design_system6 = require("@adminjs/design-system");
+var StringListShow = ({
+  property,
+  record,
+  stringListSeparator = separator
+}) => {
+  console.log(stringListSeparator, "stringListSeparator");
+  return /* @__PURE__ */ import_react6.default.createElement(import_styled_components7.ThemeProvider, { theme: import_design_system6.theme }, /* @__PURE__ */ import_react6.default.createElement(StringListShowWrapper, null, /* @__PURE__ */ import_react6.default.createElement(StringListShowLabel, null, property.name), record.params.facts && /* @__PURE__ */ import_react6.default.createElement("ul", null, record.params.facts.split(stringListSeparator).map((item, index) => /* @__PURE__ */ import_react6.default.createElement(ListItem, { key: index }, `- ${item}`)))));
+};
+var StringListShow_default = StringListShow;
+
+// src/components/Editor/Editor.jsx
+var import_react7 = __toESM(require("react"), 1);
+var import_styled_components9 = require("styled-components");
 var import_editorjs = __toESM(require("@editorjs/editorjs"), 1);
-var import_design_system7 = require("@adminjs/design-system");
+var import_design_system8 = require("@adminjs/design-system");
 
 // src/components/Editor/styles.ts
-var import_design_system6 = require("@adminjs/design-system");
-var import_styled_components7 = require("@adminjs/design-system/styled-components");
-var Label3 = import_styled_components7.styled.div`
+var import_design_system7 = require("@adminjs/design-system");
+var import_styled_components8 = require("@adminjs/design-system/styled-components");
+var Label3 = import_styled_components8.styled.div`
   font-size: 12px;
   margin-bottom: 8px;
+  color: rgb(137, 138, 154);
 `;
-var EditorWrapper = (0, import_styled_components7.styled)(import_design_system6.Box)`
+var EditorWrapper = (0, import_styled_components8.styled)(import_design_system7.Box)`
   padding: 12px;
+  margin-bottom: 24px;
   border: 1px solid rgb(187, 195, 203);
 `;
-var StyledEditor = import_styled_components7.styled.div`
+var StyledEditor = import_styled_components8.styled.div`
   .cdx-block,
   .ce-header {
     padding-left: 58px;
@@ -415,21 +457,18 @@ var EDITOR_TOOLS = {
 
 // src/components/Editor/Editor.jsx
 var Editor = ({ property, record, onChangeAdmin, editorId }) => {
-  const [jsonData, setJsonData] = (0, import_react6.useState)();
-  console.log(
-    record.params[property.path],
-    "record.params[property.path].path"
-  );
-  const ref = (0, import_react6.useRef)();
-  (0, import_react6.useEffect)(() => {
+  const [jsonData, setJsonData] = (0, import_react7.useState)();
+  const isSavedData = Boolean(record.params[property.path]);
+  const ref = (0, import_react7.useRef)();
+  (0, import_react7.useEffect)(() => {
     onChangeAdmin(property.path, jsonData);
   }, [jsonData]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!ref.current) {
       const editor = new import_editorjs.default({
         holder: editorId,
         tools: EDITOR_TOOLS,
-        data: JSON.parse(record.params[property.path]),
+        data: isSavedData ? JSON.parse(record.params[property.path]) : "",
         async onChange(api, event) {
           const data = await api.saver.save();
           setJsonData(JSON.stringify(data));
@@ -441,12 +480,38 @@ var Editor = ({ property, record, onChangeAdmin, editorId }) => {
       ref?.current?.destroy?.();
     };
   }, []);
-  return /* @__PURE__ */ import_react6.default.createElement(import_styled_components8.ThemeProvider, { theme: import_design_system7.theme }, /* @__PURE__ */ import_react6.default.createElement(Label3, null, "Text"), /* @__PURE__ */ import_react6.default.createElement(EditorWrapper, null, /* @__PURE__ */ import_react6.default.createElement(StyledEditor, { id: editorId })));
+  return /* @__PURE__ */ import_react7.default.createElement(import_styled_components9.ThemeProvider, { theme: import_design_system8.theme }, /* @__PURE__ */ import_react7.default.createElement(Label3, null, "Text"), /* @__PURE__ */ import_react7.default.createElement(EditorWrapper, null, /* @__PURE__ */ import_react7.default.createElement(StyledEditor, { id: editorId })));
 };
 var Editor_default = Editor;
+
+// src/components/Editor/EditorShow.jsx
+var import_react8 = __toESM(require("react"), 1);
+var import_styled_components10 = require("styled-components");
+var import_design_system9 = require("@adminjs/design-system");
+
+// src/utils/parseHtml.ts
+var import_editorjs_html = __toESM(require("editorjs-html"), 1);
+var parseHtml = (jsonData) => {
+  const edjsParser = (0, import_editorjs_html.default)();
+  try {
+    const data = edjsParser.parse(JSON.parse(String(jsonData)));
+    return String(data).replace(/>,</g, "><");
+  } catch (e) {
+    return;
+  }
+};
+
+// src/components/Editor/EditorShow.jsx
+var EditorShow = ({ property, record }) => {
+  const htmlContent = parseHtml(record.params[property.path]);
+  return /* @__PURE__ */ import_react8.default.createElement(import_styled_components10.ThemeProvider, { theme: import_design_system9.theme }, /* @__PURE__ */ import_react8.default.createElement(Label3, null, "Content"), htmlContent && /* @__PURE__ */ import_react8.default.createElement("div", { dangerouslySetInnerHTML: { __html: String(htmlContent) } }));
+};
+var EditorShow_default = EditorShow;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CustomSlug,
   Editor,
-  StringList
+  EditorShow,
+  StringList,
+  StringListShow
 });

package/dist/index.d.cts

@@ -1,11 +1,19 @@
 import React, { FC } from 'react';
-import { EditPropertyProps } from 'adminjs';
+import { EditPropertyProps, ShowPropertyProps } from 'adminjs';
 
 type CustomSlugTypes = Omit<EditPropertyProps, "where" | "resource">;
 declare const CustomSlug: FC<CustomSlugTypes>;
 
 type StringListTypes = Omit<EditPropertyProps, "where" | "resource">;
-declare const StringList: FC<StringListTypes>;
+interface StringListShowPropsType$1 extends StringListTypes {
+    stringListSeparator?: string;
+}
+declare const StringList: FC<StringListShowPropsType$1>;
+
+interface StringListShowPropsType extends ShowPropertyProps {
+    stringListSeparator?: string;
+}
+declare const StringListShow: FC<StringListShowPropsType>;
 
 declare function Editor({ property, record, onChangeAdmin, editorId }: {
     property: any;
@@ -14,4 +22,9 @@ declare function Editor({ property, record, onChangeAdmin, editorId }: {
     editorId: any;
 }): React.JSX.Element;
 
-export { CustomSlug, Editor, StringList };
+declare function EditorShow({ property, record }: {
+    property: any;
+    record: any;
+}): React.JSX.Element;
+
+export { CustomSlug, Editor, EditorShow, StringList, StringListShow };

package/dist/index.d.mts

@@ -0,0 +1,8 @@
+import { FeatureType, ComponentLoader } from 'adminjs';
+
+type EditorOptions = {
+    componentLoader: ComponentLoader;
+};
+declare const editorFeature: (options: EditorOptions) => FeatureType;
+
+export { editorFeature as default, editorFeature };

package/dist/index.d.ts

@@ -1,11 +1,19 @@
 import React, { FC } from 'react';
-import { EditPropertyProps } from 'adminjs';
+import { EditPropertyProps, ShowPropertyProps } from 'adminjs';
 
 type CustomSlugTypes = Omit<EditPropertyProps, "where" | "resource">;
 declare const CustomSlug: FC<CustomSlugTypes>;
 
 type StringListTypes = Omit<EditPropertyProps, "where" | "resource">;
-declare const StringList: FC<StringListTypes>;
+interface StringListShowPropsType$1 extends StringListTypes {
+    stringListSeparator?: string;
+}
+declare const StringList: FC<StringListShowPropsType$1>;
+
+interface StringListShowPropsType extends ShowPropertyProps {
+    stringListSeparator?: string;
+}
+declare const StringListShow: FC<StringListShowPropsType>;
 
 declare function Editor({ property, record, onChangeAdmin, editorId }: {
     property: any;
@@ -14,4 +22,9 @@ declare function Editor({ property, record, onChangeAdmin, editorId }: {
     editorId: any;
 }): React.JSX.Element;
 
-export { CustomSlug, Editor, StringList };
+declare function EditorShow({ property, record }: {
+    property: any;
+    record: any;
+}): React.JSX.Element;
+
+export { CustomSlug, Editor, EditorShow, StringList, StringListShow };

package/dist/index.js

@@ -14,7 +14,7 @@ var slugifyImport_default = slugify;
 var slugifyTitle = (title) => {
   return slugifyImport_default(title, {
     replacement: "-",
-    remove: void 0,
+    remove: /[*+~.()'"!:@]/g,
     lower: true,
     locale: "vi",
     trim: true
@@ -56,8 +56,10 @@ var CustomSlug = ({ property, record, onChange }) => {
   }
   function generateSlug(e) {
     e.preventDefault();
-    const title = record.title;
-    setInputValue(slugifyTitle(title));
+    const title = record.params.title;
+    if (title) {
+      setInputValue(slugifyTitle(title));
+    }
   }
 };
 var CustomSlug_default = CustomSlug;
@@ -76,6 +78,7 @@ import { Box as Box2, Input as Input2 } from "@adminjs/design-system";
 var StyledWrapper = styled2(Box2)`
   display: flex;
   flex-direction: column;
+  margin-bottom: 45px;
 `;
 var StyledCustomInput2 = styled2(Input2)`
   width: 100%;
@@ -87,6 +90,19 @@ var StyledInputWrapper2 = styled2(Box2)`
 var StyledListWrapper = styled2(Box2)`
   margin-bottom: 15px;
 `;
+var StringListShowLabel = styled2.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
+  line-height: 16px;
+  color: rgb(137, 138, 154);
+`;
+var StringListShowWrapper = styled2(Box2)`
+  margin-bottom: 35px;
+`;
+var ListItem = styled2.li`
+  margin-bottom: 5px;
+`;
 
 // src/components/StringList/SortableList/SortableList.tsx
 import React4, { Fragment, useMemo as useMemo2, useState as useState2 } from "react";
@@ -239,8 +255,16 @@ function SortableList({
 }
 SortableList.Item = SortableItem;
 
+// src/constants.ts
+var separator = "|";
+
 // src/components/StringList/StringList.tsx
-var StringList = ({ record, onChange, property }) => {
+var StringList = ({
+  record,
+  onChange,
+  property,
+  stringListSeparator = separator
+}) => {
   const stringListValue = record.params?.[property.path] ?? property.props.value ?? "";
   const initialList = stringListValue ? prepareDataForList(stringListValue) : [];
   const [inputValue, setInputValue] = useState3("");
@@ -295,10 +319,10 @@ var StringList = ({ record, onChange, property }) => {
     setList(newData);
   }
   function prepareDataForDatabase(list2) {
-    return list2.map(({ value }) => value).join("|");
+    return list2.map(({ value }) => value).join(stringListSeparator);
   }
   function prepareDataForList(str) {
-    return str.split("|").map((item) => createListObject(item));
+    return str.split(stringListSeparator).map((item) => createListObject(item));
   }
   function createListObject(value) {
     return {
@@ -309,11 +333,25 @@ var StringList = ({ record, onChange, property }) => {
 };
 var StringList_default = StringList;
 
-// src/components/Editor/Editor.jsx
-import React6, { memo, useState as useState4, useEffect as useEffect3, useRef } from "react";
+// src/components/StringList/StringListShow.tsx
+import React6 from "react";
 import { ThemeProvider as ThemeProvider3 } from "styled-components";
-import EditorJS from "@editorjs/editorjs";
 import { theme as theme3 } from "@adminjs/design-system";
+var StringListShow = ({
+  property,
+  record,
+  stringListSeparator = separator
+}) => {
+  console.log(stringListSeparator, "stringListSeparator");
+  return /* @__PURE__ */ React6.createElement(ThemeProvider3, { theme: theme3 }, /* @__PURE__ */ React6.createElement(StringListShowWrapper, null, /* @__PURE__ */ React6.createElement(StringListShowLabel, null, property.name), record.params.facts && /* @__PURE__ */ React6.createElement("ul", null, record.params.facts.split(stringListSeparator).map((item, index) => /* @__PURE__ */ React6.createElement(ListItem, { key: index }, `- ${item}`)))));
+};
+var StringListShow_default = StringListShow;
+
+// src/components/Editor/Editor.jsx
+import React7, { memo as memo2, useState as useState5, useEffect as useEffect4, useRef as useRef2 } from "react";
+import { ThemeProvider as ThemeProvider4 } from "styled-components";
+import EditorJS from "@editorjs/editorjs";
+import { theme as theme4 } from "@adminjs/design-system";
 
 // src/components/Editor/styles.ts
 import { Box as Box3 } from "@adminjs/design-system";
@@ -321,9 +359,11 @@ import { styled as styled5 } from "@adminjs/design-system/styled-components";
 var Label3 = styled5.div`
   font-size: 12px;
   margin-bottom: 8px;
+  color: rgb(137, 138, 154);
 `;
 var EditorWrapper = styled5(Box3)`
   padding: 12px;
+  margin-bottom: 24px;
   border: 1px solid rgb(187, 195, 203);
 `;
 var StyledEditor = styled5.div`
@@ -396,21 +436,18 @@ var EDITOR_TOOLS = {
 
 // src/components/Editor/Editor.jsx
 var Editor = ({ property, record, onChangeAdmin, editorId }) => {
-  const [jsonData, setJsonData] = useState4();
-  console.log(
-    record.params[property.path],
-    "record.params[property.path].path"
-  );
-  const ref = useRef();
-  useEffect3(() => {
+  const [jsonData, setJsonData] = useState5();
+  const isSavedData = Boolean(record.params[property.path]);
+  const ref = useRef2();
+  useEffect4(() => {
     onChangeAdmin(property.path, jsonData);
   }, [jsonData]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!ref.current) {
       const editor = new EditorJS({
         holder: editorId,
         tools: EDITOR_TOOLS,
-        data: JSON.parse(record.params[property.path]),
+        data: isSavedData ? JSON.parse(record.params[property.path]) : "",
         async onChange(api, event) {
           const data = await api.saver.save();
           setJsonData(JSON.stringify(data));
@@ -422,11 +459,37 @@ var Editor = ({ property, record, onChangeAdmin, editorId }) => {
       ref?.current?.destroy?.();
     };
   }, []);
-  return /* @__PURE__ */ React6.createElement(ThemeProvider3, { theme: theme3 }, /* @__PURE__ */ React6.createElement(Label3, null, "Text"), /* @__PURE__ */ React6.createElement(EditorWrapper, null, /* @__PURE__ */ React6.createElement(StyledEditor, { id: editorId })));
+  return /* @__PURE__ */ React7.createElement(ThemeProvider4, { theme: theme4 }, /* @__PURE__ */ React7.createElement(Label3, null, "Text"), /* @__PURE__ */ React7.createElement(EditorWrapper, null, /* @__PURE__ */ React7.createElement(StyledEditor, { id: editorId })));
 };
 var Editor_default = Editor;
+
+// src/components/Editor/EditorShow.jsx
+import React8, { memo as memo3, useState as useState6, useEffect as useEffect5, useRef as useRef3 } from "react";
+import { ThemeProvider as ThemeProvider5 } from "styled-components";
+import { theme as theme5 } from "@adminjs/design-system";
+
+// src/utils/parseHtml.ts
+import edjsHTML from "editorjs-html";
+var parseHtml = (jsonData) => {
+  const edjsParser = edjsHTML();
+  try {
+    const data = edjsParser.parse(JSON.parse(String(jsonData)));
+    return String(data).replace(/>,</g, "><");
+  } catch (e) {
+    return;
+  }
+};
+
+// src/components/Editor/EditorShow.jsx
+var EditorShow = ({ property, record }) => {
+  const htmlContent = parseHtml(record.params[property.path]);
+  return /* @__PURE__ */ React8.createElement(ThemeProvider5, { theme: theme5 }, /* @__PURE__ */ React8.createElement(Label3, null, "Content"), htmlContent && /* @__PURE__ */ React8.createElement("div", { dangerouslySetInnerHTML: { __html: String(htmlContent) } }));
+};
+var EditorShow_default = EditorShow;
 export {
   CustomSlug_default as CustomSlug,
   Editor_default as Editor,
-  StringList_default as StringList
+  EditorShow_default as EditorShow,
+  StringList_default as StringList,
+  StringListShow_default as StringListShow
 };

package/dist/index.mjs

@@ -0,0 +1,37 @@
+// src/features/editorFeature.ts
+import {
+  buildFeature
+} from "adminjs";
+
+// src/bundle.ts
+import path from "path";
+import * as url from "url";
+var __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+var bundle = (loader, componentName) => {
+  const componentPath = path.join(__dirname, `./components/${componentName}`);
+  return loader.add(componentName, componentPath);
+};
+var bundle_default = bundle;
+
+// src/features/editorFeature.ts
+var editorFeature = (options) => {
+  const { componentLoader } = options;
+  const editComponent = bundle_default(componentLoader, "Editor");
+  return buildFeature({
+    properties: {
+      editor: {
+        components: {
+          edit: editComponent
+        }
+      }
+    }
+  });
+};
+var editorFeature_default = editorFeature;
+
+// src/index.ts
+var src_default = editorFeature_default;
+export {
+  src_default as default,
+  editorFeature_default as editorFeature
+};

package/dist/utils/index.js

@@ -0,0 +1 @@
+export { slugifyTitle } from "./slugifyTitle.js";

package/dist/utils/slugifyImport.js

@@ -0,0 +1,3 @@
+// This is a fix of typescript module import error
+import * as slugify from "slugify";
+export default slugify;

package/dist/utils/slugifyTitle.js

@@ -0,0 +1,10 @@
+import * as slugify from "slugify";
+export const slugifyTitle = (title) => {
+    return slugify.default(title, {
+        replacement: "-",
+        remove: undefined,
+        lower: true,
+        locale: "vi",
+        trim: true,
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rulab/adminjs-components",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -25,6 +25,7 @@
     "@editorjs/list": "^1.9.0",
     "@editorjs/paragraph": "^2.11.6",
     "adminjs": "^7.8.1",
+    "editorjs-html": "^3.4.3",
     "react": "^18.2.0",
     "slugify": "^1.6.6",
     "styled-components": "^6.1.11"

package/src/components/CustomSlug/CustomSlug.tsx

@@ -50,8 +50,10 @@ const CustomSlug: FC<CustomSlugTypes> = ({ property, record, onChange }) => {
 
   function generateSlug(e: SyntheticEvent<HTMLInputElement>) {
     e.preventDefault();
-    const title = record.title;
-    setInputValue(slugifyTitle(title));
+    const title = record.params.title;
+    if (title) {
+      setInputValue(slugifyTitle(title));
+    }
   }
 };
 

package/src/components/Editor/Editor.jsx

@@ -9,6 +9,7 @@ import { EDITOR_TOOLS } from "./config";
 
 const Editor = ({ property, record, onChangeAdmin, editorId }) => {
   const [jsonData, setJsonData] = useState();
+  const isSavedData = Boolean(record.params[property.path]);
 
   const ref = useRef();
 
@@ -21,7 +22,7 @@ const Editor = ({ property, record, onChangeAdmin, editorId }) => {
       const editor = new EditorJS({
         holder: editorId,
         tools: EDITOR_TOOLS,
-        data: JSON.parse(record.params[property.path]),
+        data: isSavedData ? JSON.parse(record.params[property.path]) : "",
         async onChange(api, event) {
           const data = await api.saver.save();
           setJsonData(JSON.stringify(data));

package/src/components/Editor/EditorShow.jsx

@@ -0,0 +1,22 @@
+import React, { memo, useState, useEffect, useRef } from "react";
+import { ThemeProvider } from "styled-components";
+import { theme } from "@adminjs/design-system";
+
+import { parseHtml } from "../../utils/parseHtml";
+
+import { Label } from "./styles";
+
+const EditorShow = ({ property, record }) => {
+  const htmlContent = parseHtml(record.params[property.path]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Label>Content</Label>
+      {htmlContent && (
+        <div dangerouslySetInnerHTML={{ __html: String(htmlContent) }} />
+      )}
+    </ThemeProvider>
+  );
+};
+
+export default EditorShow;

package/src/components/Editor/index.ts

@@ -1 +1,2 @@
-export { default } from "./Editor.jsx";
+export * from "./Editor.jsx";
+export * from "./EditorShow.jsx";

package/src/components/Editor/styles.ts

@@ -4,10 +4,12 @@ import { styled } from "@adminjs/design-system/styled-components";
 export const Label = styled.div`
   font-size: 12px;
   margin-bottom: 8px;
+  color: rgb(137, 138, 154);
 `;
 
 export const EditorWrapper = styled(Box)`
   padding: 12px;
+  margin-bottom: 24px;
   border: 1px solid rgb(187, 195, 203);
 `;
 

package/src/components/StringList/StringList.tsx

@@ -18,6 +18,7 @@ import {
 } from "./styles.js";
 
 import { SortableList } from "./SortableList/SortableList.js";
+import { separator } from "./constants.js";
 
 type ListDataTypes = {
   id: string;
@@ -26,7 +27,16 @@ type ListDataTypes = {
 
 type StringListTypes = Omit<EditPropertyProps, "where" | "resource">;
 
-const StringList: FC<StringListTypes> = ({ record, onChange, property }) => {
+interface StringListShowPropsType extends StringListTypes {
+  stringListSeparator?: string;
+}
+
+const StringList: FC<StringListShowPropsType> = ({
+  record,
+  onChange,
+  property,
+  stringListSeparator = separator,
+}) => {
   const stringListValue =
     record.params?.[property.path] ?? property.props.value ?? "";
 
@@ -107,11 +117,11 @@ const StringList: FC<StringListTypes> = ({ record, onChange, property }) => {
   }
 
   function prepareDataForDatabase(list: ListDataTypes[]) {
-    return list.map(({ value }) => value).join("|");
+    return list.map(({ value }) => value).join(stringListSeparator);
   }
 
   function prepareDataForList(str: string) {
-    return str.split("|").map((item) => createListObject(item));
+    return str.split(stringListSeparator).map((item) => createListObject(item));
   }
 
   function createListObject(value: string) {

package/src/components/StringList/StringListShow.tsx

@@ -0,0 +1,37 @@
+import React, { memo, useState, useEffect, useRef, FC } from "react";
+import { ShowPropertyProps } from "adminjs";
+
+import { ThemeProvider } from "styled-components";
+import { theme } from "@adminjs/design-system";
+
+import { StringListShowLabel, StringListShowWrapper, ListItem } from "./styles";
+import { separator } from "./constants";
+
+interface StringListShowPropsType extends ShowPropertyProps {
+  stringListSeparator?: string;
+}
+
+const StringListShow: FC<StringListShowPropsType> = ({
+  property,
+  record,
+  stringListSeparator = separator,
+}) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <StringListShowWrapper>
+        <StringListShowLabel>{property.name}</StringListShowLabel>
+        {record.params.facts && (
+          <ul>
+            {record.params.facts
+              .split(stringListSeparator)
+              .map((item: string, index: number) => (
+                <ListItem key={index}>{`- ${item}`}</ListItem>
+              ))}
+          </ul>
+        )}
+      </StringListShowWrapper>
+    </ThemeProvider>
+  );
+};
+
+export default StringListShow;

package/src/components/StringList/constants.ts

@@ -0,0 +1 @@
+export const separator = "|";

package/src/components/StringList/index.ts

@@ -1 +1,2 @@
-export { default } from "./StringList.js";
+export * from "./StringList.js";
+export * from "./StringListShow.js";

package/src/components/StringList/styles.ts

@@ -4,6 +4,7 @@ import { Box, Input } from "@adminjs/design-system";
 export const StyledWrapper = styled(Box)`
   display: flex;
   flex-direction: column;
+  margin-bottom: 45px;
 `;
 
 export const StyledCustomInput = styled(Input)`
@@ -18,3 +19,19 @@ export const StyledInputWrapper = styled(Box)`
 export const StyledListWrapper = styled(Box)`
   margin-bottom: 15px;
 `;
+
+export const StringListShowLabel = styled.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
+  line-height: 16px;
+  color: rgb(137, 138, 154);
+`;
+
+export const StringListShowWrapper = styled(Box)`
+  margin-bottom: 35px;
+`;
+
+export const ListItem = styled.li`
+  margin-bottom: 5px;
+`;

package/src/components/index.ts

@@ -1,3 +1,5 @@
 export { default as CustomSlug } from "./CustomSlug/CustomSlug.js";
 export { default as StringList } from "./StringList/StringList.js";
-export { default as Editor } from "./Editor";
+export { default as StringListShow } from "./StringList/StringListShow.js";
+export { default as Editor } from "./Editor/Editor.jsx";
+export { default as EditorShow } from "./Editor/EditorShow.jsx";

package/src/utils/parseHtml.ts

@@ -0,0 +1,12 @@
+import edjsHTML from "editorjs-html";
+
+export const parseHtml = (jsonData?: string) => {
+  const edjsParser = edjsHTML();
+
+  try {
+    const data = edjsParser.parse(JSON.parse(String(jsonData)));
+    return String(data).replace(/>,</g, "><");
+  } catch (e) {
+    return;
+  }
+};

package/src/utils/slugifyTitle.ts

@@ -3,7 +3,7 @@ import slugify from "./slugifyImport.js";
 export const slugifyTitle = (title: string) => {
   return slugify(title, {
     replacement: "-",
-    remove: undefined,
+    remove: /[*+~.()'"!:@]/g,
     lower: true,
     locale: "vi",
     trim: true,