@rulab/adminjs-components 0.0.6 → 0.0.8

package/dist/index.cjs

@@ -32,6 +32,7 @@ var src_exports = {};
 __export(src_exports, {
   CustomSlug: () => CustomSlug_default,
   Editor: () => Editor_default,
+  EditorList: () => EditorList_default,
   EditorShow: () => EditorShow_default,
   StringList: () => StringList_default,
   StringListShow: () => StringListShow_default
@@ -72,6 +73,11 @@ var StyledCustomInput = (0, import_styled_components.styled)(import_design_syste
 var StyledGenerateButton = (0, import_styled_components.styled)(import_design_system.Button)`
   white-space: nowrap;
 `;
+var StyledLabel = import_styled_components.styled.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
+`;
 
 // src/components/CustomSlug/CustomSlug.tsx
 var CustomSlug = ({ property, record, onChange }) => {
@@ -79,7 +85,7 @@ var CustomSlug = ({ property, record, onChange }) => {
   (0, import_react.useEffect)(() => {
     onChange(property.path, inputValue);
   }, [inputValue]);
-  return /* @__PURE__ */ import_react.default.createElement(import_styled_components2.ThemeProvider, { theme: import_design_system2.theme }, /* @__PURE__ */ import_react.default.createElement(import_design_system2.Label, { htmlFor: "customSlug" }, "Slug"), /* @__PURE__ */ import_react.default.createElement(StyledInputWrapper, null, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_styled_components2.ThemeProvider, { theme: import_design_system2.theme }, /* @__PURE__ */ import_react.default.createElement(StyledLabel, { htmlFor: "customSlug" }, property.path), /* @__PURE__ */ import_react.default.createElement(StyledInputWrapper, null, /* @__PURE__ */ import_react.default.createElement(
     StyledCustomInput,
     {
       id: property.path,
@@ -102,13 +108,13 @@ var CustomSlug = ({ property, record, onChange }) => {
 var CustomSlug_default = CustomSlug;
 
 // src/components/StringList/StringList.tsx
+var import_design_system5 = require("@adminjs/design-system");
 var import_react5 = __toESM(require("react"), 1);
 var import_styled_components6 = require("styled-components");
-var import_design_system5 = require("@adminjs/design-system");
 
 // src/components/StringList/styles.ts
-var import_styled_components3 = require("@adminjs/design-system/styled-components");
 var import_design_system3 = require("@adminjs/design-system");
+var import_styled_components3 = require("@adminjs/design-system/styled-components");
 var StyledWrapper = (0, import_styled_components3.styled)(import_design_system3.Box)`
   display: flex;
   flex-direction: column;
@@ -124,17 +130,20 @@ 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`
+var StyledLabel2 = import_styled_components3.styled.div`
   font-size: 12px;
   margin-bottom: 8px;
   text-transform: capitalize;
+`;
+var StyledShowLabel = (0, import_styled_components3.styled)(StyledLabel2)`
   line-height: 16px;
   color: rgb(137, 138, 154);
+  font-weight: 300;
 `;
-var StringListShowWrapper = (0, import_styled_components3.styled)(import_design_system3.Box)`
+var StyledShowWrapper = (0, import_styled_components3.styled)(import_design_system3.Box)`
   margin-bottom: 35px;
 `;
-var ListItem = import_styled_components3.styled.li`
+var StyledListItem = import_styled_components3.styled.li`
   margin-bottom: 5px;
 `;
 
@@ -153,7 +162,7 @@ var import_react2 = __toESM(require("react"), 1);
 
 // src/components/StringList/SortableList/components/SortableItem/styles.ts
 var import_styled_components4 = require("@adminjs/design-system/styled-components");
-var StyledListItem = import_styled_components4.styled.li`
+var StyledListItem2 = import_styled_components4.styled.li`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -165,7 +174,7 @@ var StyledListItem = import_styled_components4.styled.li`
   border-radius: 5px;
   list-style: none;
 `;
-var DragButton = import_styled_components4.styled.button`
+var StyledDragButton = import_styled_components4.styled.button`
   padding: 3px;
   margin-right: 15px;
   cursor: move;
@@ -176,7 +185,7 @@ var DragButton = import_styled_components4.styled.button`
 // src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx
 var DragHandle = ({ context }) => {
   const { attributes, listeners, ref } = (0, import_react2.useContext)(context);
-  return /* @__PURE__ */ import_react2.default.createElement(DragButton, { ...attributes, ...listeners, ref }, /* @__PURE__ */ import_react2.default.createElement("svg", { viewBox: "0 0 20 20", width: "13" }, /* @__PURE__ */ import_react2.default.createElement("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" })));
+  return /* @__PURE__ */ import_react2.default.createElement(StyledDragButton, { ...attributes, ...listeners, ref }, /* @__PURE__ */ import_react2.default.createElement("svg", { viewBox: "0 0 20 20", width: "13" }, /* @__PURE__ */ import_react2.default.createElement("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" })));
 };
 
 // src/components/StringList/SortableList/components/SortableItem/SortableItem.tsx
@@ -203,7 +212,7 @@ function SortableItem({
   const style = {
     opacity: isDragging ? 0.4 : void 0
   };
-  return /* @__PURE__ */ import_react3.default.createElement(SortableItemContext.Provider, { value: context }, /* @__PURE__ */ import_react3.default.createElement(StyledListItem, { ref: setNodeRef, style }, /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement(DragHandle, { context: SortableItemContext }), children), /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement(SortableItemContext.Provider, { value: context }, /* @__PURE__ */ import_react3.default.createElement(StyledListItem2, { ref: setNodeRef, style }, /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement(DragHandle, { context: SortableItemContext }), children), /* @__PURE__ */ import_react3.default.createElement(
     import_design_system4.Button,
     {
       variant: "outlined",
@@ -294,7 +303,7 @@ var StringList = ({
   (0, import_react5.useEffect)(() => {
     onChange(property.path, serializedData);
   }, [serializedData]);
-  return /* @__PURE__ */ import_react5.default.createElement(import_styled_components6.ThemeProvider, { theme: import_design_system5.theme }, /* @__PURE__ */ import_react5.default.createElement(import_design_system5.Label, { htmlFor: "custom" }, "String List"), /* @__PURE__ */ import_react5.default.createElement(StyledWrapper, null, /* @__PURE__ */ import_react5.default.createElement(StyledListWrapper, null, /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(import_styled_components6.ThemeProvider, { theme: import_design_system5.theme }, /* @__PURE__ */ import_react5.default.createElement(StyledLabel2, { htmlFor: "custom" }, property.path), /* @__PURE__ */ import_react5.default.createElement(StyledWrapper, null, /* @__PURE__ */ import_react5.default.createElement(StyledListWrapper, null, /* @__PURE__ */ import_react5.default.createElement(
     SortableList,
     {
       items: list,
@@ -363,7 +372,7 @@ var StringListShow = ({
   record,
   stringListSeparator = separator
 }) => {
-  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}`)))));
+  return /* @__PURE__ */ import_react6.default.createElement(import_styled_components7.ThemeProvider, { theme: import_design_system6.theme }, /* @__PURE__ */ import_react6.default.createElement(StyledShowWrapper, null, /* @__PURE__ */ import_react6.default.createElement(StyledShowLabel, null, property.path), record.params.facts && /* @__PURE__ */ import_react6.default.createElement("ul", null, record.params.facts.split(stringListSeparator).map((item, index) => /* @__PURE__ */ import_react6.default.createElement(StyledListItem, { key: index }, `- ${item}`)))));
 };
 var StringListShow_default = StringListShow;
 
@@ -376,19 +385,21 @@ var import_design_system8 = require("@adminjs/design-system");
 // src/components/Editor/styles.ts
 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`
+var StyledLabel3 = import_styled_components8.styled.div`
   font-size: 12px;
   margin-bottom: 8px;
+  text-transform: capitalize;
+`;
+var StyledShowLabel2 = (0, import_styled_components8.styled)(StyledLabel3)`
   color: rgb(137, 138, 154);
+  font-weight: 300;
 `;
-var EditorWrapper = (0, import_styled_components8.styled)(import_design_system7.Box)`
+var StyledEditorWrapper = (0, import_styled_components8.styled)(import_design_system7.Box)`
   padding: 12px;
   margin-bottom: 24px;
   border: 1px solid rgb(187, 195, 203);
 `;
-var EditorShowWrapper = (0, import_styled_components8.styled)(import_design_system7.Box)`
-  margin-bottom: 24px;
-
+var StyledEditorViewWrapper = (0, import_styled_components8.styled)(import_design_system7.Box)`
   h1,
   h2,
   h3 {
@@ -426,6 +437,9 @@ var EditorShowWrapper = (0, import_styled_components8.styled)(import_design_syst
     list-style: inherit;
   }
 `;
+var StyledEditorShowWrapper = (0, import_styled_components8.styled)(StyledEditorViewWrapper)`
+  margin-bottom: 24px;
+`;
 var StyledEditor = import_styled_components8.styled.div`
   .cdx-block,
   .ce-header {
@@ -519,7 +533,7 @@ var Editor = ({ property, record, onChangeAdmin, editorId }) => {
       ref?.current?.destroy?.();
     };
   }, []);
-  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 })));
+  return /* @__PURE__ */ import_react7.default.createElement(import_styled_components9.ThemeProvider, { theme: import_design_system8.theme }, /* @__PURE__ */ import_react7.default.createElement(StyledLabel3, null, property.path), /* @__PURE__ */ import_react7.default.createElement(StyledEditorWrapper, null, /* @__PURE__ */ import_react7.default.createElement(StyledEditor, { id: editorId })));
 };
 var Editor_default = Editor;
 
@@ -543,13 +557,24 @@ var parseHtml = (jsonData) => {
 // 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(EditorShowWrapper, null, /* @__PURE__ */ import_react8.default.createElement(Label3, null, "Content"), htmlContent && /* @__PURE__ */ import_react8.default.createElement("div", { dangerouslySetInnerHTML: { __html: String(htmlContent) } })));
+  return /* @__PURE__ */ import_react8.default.createElement(import_styled_components10.ThemeProvider, { theme: import_design_system9.theme }, /* @__PURE__ */ import_react8.default.createElement(StyledEditorShowWrapper, null, /* @__PURE__ */ import_react8.default.createElement(StyledShowLabel2, null, property.path), htmlContent && /* @__PURE__ */ import_react8.default.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
 };
 var EditorShow_default = EditorShow;
+
+// src/components/Editor/EditorList.jsx
+var import_react9 = __toESM(require("react"), 1);
+var import_styled_components11 = require("styled-components");
+var import_design_system10 = require("@adminjs/design-system");
+var EditorList = ({ property, record }) => {
+  const htmlContent = parseHtml(record.params[property.path]);
+  return /* @__PURE__ */ import_react9.default.createElement(import_styled_components11.ThemeProvider, { theme: import_design_system10.theme }, /* @__PURE__ */ import_react9.default.createElement(StyledEditorViewWrapper, null, htmlContent && /* @__PURE__ */ import_react9.default.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
+};
+var EditorList_default = EditorList;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CustomSlug,
   Editor,
+  EditorList,
   EditorShow,
   StringList,
   StringListShow

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import React, { FC } from 'react';
 import { EditPropertyProps, ShowPropertyProps } from 'adminjs';
+import React, { FC } from 'react';
 
 type CustomSlugTypes = Omit<EditPropertyProps, "where" | "resource">;
 declare const CustomSlug: FC<CustomSlugTypes>;
@@ -27,4 +27,9 @@ declare function EditorShow({ property, record }: {
     record: any;
 }): React.JSX.Element;
 
-export { CustomSlug, Editor, EditorShow, StringList, StringListShow };
+declare function EditorList({ property, record }: {
+    property: any;
+    record: any;
+}): React.JSX.Element;
+
+export { CustomSlug, Editor, EditorList, EditorShow, StringList, StringListShow };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import React, { FC } from 'react';
 import { EditPropertyProps, ShowPropertyProps } from 'adminjs';
+import React, { FC } from 'react';
 
 type CustomSlugTypes = Omit<EditPropertyProps, "where" | "resource">;
 declare const CustomSlug: FC<CustomSlugTypes>;
@@ -27,4 +27,9 @@ declare function EditorShow({ property, record }: {
     record: any;
 }): React.JSX.Element;
 
-export { CustomSlug, Editor, EditorShow, StringList, StringListShow };
+declare function EditorList({ property, record }: {
+    property: any;
+    record: any;
+}): React.JSX.Element;
+
+export { CustomSlug, Editor, EditorList, EditorShow, StringList, StringListShow };

package/dist/index.js

@@ -4,7 +4,7 @@ import React, {
   useState
 } from "react";
 import { ThemeProvider } from "styled-components";
-import { theme, Label } from "@adminjs/design-system";
+import { theme } from "@adminjs/design-system";
 
 // src/utils/slugifyImport.ts
 import slugify from "slugify";
@@ -23,7 +23,7 @@ var slugifyTitle = (title) => {
 
 // src/components/CustomSlug/styles.ts
 import { styled } from "@adminjs/design-system/styled-components";
-import { Button, Box, Input } from "@adminjs/design-system";
+import { Box, Button, Input } from "@adminjs/design-system";
 var StyledInputWrapper = styled(Box)`
   display: flex;
   margin-bottom: 40px;
@@ -35,6 +35,11 @@ var StyledCustomInput = styled(Input)`
 var StyledGenerateButton = styled(Button)`
   white-space: nowrap;
 `;
+var StyledLabel = styled.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
+`;
 
 // src/components/CustomSlug/CustomSlug.tsx
 var CustomSlug = ({ property, record, onChange }) => {
@@ -42,7 +47,7 @@ var CustomSlug = ({ property, record, onChange }) => {
   useEffect(() => {
     onChange(property.path, inputValue);
   }, [inputValue]);
-  return /* @__PURE__ */ React.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React.createElement(Label, { htmlFor: "customSlug" }, "Slug"), /* @__PURE__ */ React.createElement(StyledInputWrapper, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React.createElement(StyledLabel, { htmlFor: "customSlug" }, property.path), /* @__PURE__ */ React.createElement(StyledInputWrapper, null, /* @__PURE__ */ React.createElement(
     StyledCustomInput,
     {
       id: property.path,
@@ -65,16 +70,16 @@ var CustomSlug = ({ property, record, onChange }) => {
 var CustomSlug_default = CustomSlug;
 
 // src/components/StringList/StringList.tsx
+import { Button as Button3, Input as Input3, theme as theme2 } from "@adminjs/design-system";
 import React5, {
-  useState as useState3,
-  useEffect as useEffect2
+  useEffect as useEffect2,
+  useState as useState3
 } from "react";
 import { ThemeProvider as ThemeProvider2 } from "styled-components";
-import { theme as theme2, Button as Button3, Input as Input3, Label as Label2 } from "@adminjs/design-system";
 
 // src/components/StringList/styles.ts
-import { styled as styled2 } from "@adminjs/design-system/styled-components";
 import { Box as Box2, Input as Input2 } from "@adminjs/design-system";
+import { styled as styled2 } from "@adminjs/design-system/styled-components";
 var StyledWrapper = styled2(Box2)`
   display: flex;
   flex-direction: column;
@@ -90,17 +95,20 @@ var StyledInputWrapper2 = styled2(Box2)`
 var StyledListWrapper = styled2(Box2)`
   margin-bottom: 15px;
 `;
-var StringListShowLabel = styled2.div`
+var StyledLabel2 = styled2.div`
   font-size: 12px;
   margin-bottom: 8px;
   text-transform: capitalize;
+`;
+var StyledShowLabel = styled2(StyledLabel2)`
   line-height: 16px;
   color: rgb(137, 138, 154);
+  font-weight: 300;
 `;
-var StringListShowWrapper = styled2(Box2)`
+var StyledShowWrapper = styled2(Box2)`
   margin-bottom: 35px;
 `;
-var ListItem = styled2.li`
+var StyledListItem = styled2.li`
   margin-bottom: 5px;
 `;
 
@@ -132,7 +140,7 @@ import React2, { useContext } from "react";
 
 // src/components/StringList/SortableList/components/SortableItem/styles.ts
 import { styled as styled3 } from "@adminjs/design-system/styled-components";
-var StyledListItem = styled3.li`
+var StyledListItem2 = styled3.li`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -144,7 +152,7 @@ var StyledListItem = styled3.li`
   border-radius: 5px;
   list-style: none;
 `;
-var DragButton = styled3.button`
+var StyledDragButton = styled3.button`
   padding: 3px;
   margin-right: 15px;
   cursor: move;
@@ -155,7 +163,7 @@ var DragButton = styled3.button`
 // src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx
 var DragHandle = ({ context }) => {
   const { attributes, listeners, ref } = useContext(context);
-  return /* @__PURE__ */ React2.createElement(DragButton, { ...attributes, ...listeners, ref }, /* @__PURE__ */ React2.createElement("svg", { viewBox: "0 0 20 20", width: "13" }, /* @__PURE__ */ React2.createElement("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" })));
+  return /* @__PURE__ */ React2.createElement(StyledDragButton, { ...attributes, ...listeners, ref }, /* @__PURE__ */ React2.createElement("svg", { viewBox: "0 0 20 20", width: "13" }, /* @__PURE__ */ React2.createElement("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" })));
 };
 
 // src/components/StringList/SortableList/components/SortableItem/SortableItem.tsx
@@ -182,7 +190,7 @@ function SortableItem({
   const style = {
     opacity: isDragging ? 0.4 : void 0
   };
-  return /* @__PURE__ */ React3.createElement(SortableItemContext.Provider, { value: context }, /* @__PURE__ */ React3.createElement(StyledListItem, { ref: setNodeRef, style }, /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement(DragHandle, { context: SortableItemContext }), children), /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement(SortableItemContext.Provider, { value: context }, /* @__PURE__ */ React3.createElement(StyledListItem2, { ref: setNodeRef, style }, /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement(DragHandle, { context: SortableItemContext }), children), /* @__PURE__ */ React3.createElement(
     Button2,
     {
       variant: "outlined",
@@ -273,7 +281,7 @@ var StringList = ({
   useEffect2(() => {
     onChange(property.path, serializedData);
   }, [serializedData]);
-  return /* @__PURE__ */ React5.createElement(ThemeProvider2, { theme: theme2 }, /* @__PURE__ */ React5.createElement(Label2, { htmlFor: "custom" }, "String List"), /* @__PURE__ */ React5.createElement(StyledWrapper, null, /* @__PURE__ */ React5.createElement(StyledListWrapper, null, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React5.createElement(ThemeProvider2, { theme: theme2 }, /* @__PURE__ */ React5.createElement(StyledLabel2, { htmlFor: "custom" }, property.path), /* @__PURE__ */ React5.createElement(StyledWrapper, null, /* @__PURE__ */ React5.createElement(StyledListWrapper, null, /* @__PURE__ */ React5.createElement(
     SortableList,
     {
       items: list,
@@ -342,7 +350,7 @@ var StringListShow = ({
   record,
   stringListSeparator = separator
 }) => {
-  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}`)))));
+  return /* @__PURE__ */ React6.createElement(ThemeProvider3, { theme: theme3 }, /* @__PURE__ */ React6.createElement(StyledShowWrapper, null, /* @__PURE__ */ React6.createElement(StyledShowLabel, null, property.path), record.params.facts && /* @__PURE__ */ React6.createElement("ul", null, record.params.facts.split(stringListSeparator).map((item, index) => /* @__PURE__ */ React6.createElement(StyledListItem, { key: index }, `- ${item}`)))));
 };
 var StringListShow_default = StringListShow;
 
@@ -355,19 +363,21 @@ import { theme as theme4 } from "@adminjs/design-system";
 // src/components/Editor/styles.ts
 import { Box as Box3 } from "@adminjs/design-system";
 import { styled as styled5 } from "@adminjs/design-system/styled-components";
-var Label3 = styled5.div`
+var StyledLabel3 = styled5.div`
   font-size: 12px;
   margin-bottom: 8px;
+  text-transform: capitalize;
+`;
+var StyledShowLabel2 = styled5(StyledLabel3)`
   color: rgb(137, 138, 154);
+  font-weight: 300;
 `;
-var EditorWrapper = styled5(Box3)`
+var StyledEditorWrapper = styled5(Box3)`
   padding: 12px;
   margin-bottom: 24px;
   border: 1px solid rgb(187, 195, 203);
 `;
-var EditorShowWrapper = styled5(Box3)`
-  margin-bottom: 24px;
-
+var StyledEditorViewWrapper = styled5(Box3)`
   h1,
   h2,
   h3 {
@@ -405,6 +415,9 @@ var EditorShowWrapper = styled5(Box3)`
     list-style: inherit;
   }
 `;
+var StyledEditorShowWrapper = styled5(StyledEditorViewWrapper)`
+  margin-bottom: 24px;
+`;
 var StyledEditor = styled5.div`
   .cdx-block,
   .ce-header {
@@ -498,12 +511,12 @@ var Editor = ({ property, record, onChangeAdmin, editorId }) => {
       ref?.current?.destroy?.();
     };
   }, []);
-  return /* @__PURE__ */ React7.createElement(ThemeProvider4, { theme: theme4 }, /* @__PURE__ */ React7.createElement(Label3, null, "Text"), /* @__PURE__ */ React7.createElement(EditorWrapper, null, /* @__PURE__ */ React7.createElement(StyledEditor, { id: editorId })));
+  return /* @__PURE__ */ React7.createElement(ThemeProvider4, { theme: theme4 }, /* @__PURE__ */ React7.createElement(StyledLabel3, null, property.path), /* @__PURE__ */ React7.createElement(StyledEditorWrapper, 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 React8 from "react";
 import { ThemeProvider as ThemeProvider5 } from "styled-components";
 import { theme as theme5 } from "@adminjs/design-system";
 
@@ -522,12 +535,23 @@ var parseHtml = (jsonData) => {
 // 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(EditorShowWrapper, null, /* @__PURE__ */ React8.createElement(Label3, null, "Content"), htmlContent && /* @__PURE__ */ React8.createElement("div", { dangerouslySetInnerHTML: { __html: String(htmlContent) } })));
+  return /* @__PURE__ */ React8.createElement(ThemeProvider5, { theme: theme5 }, /* @__PURE__ */ React8.createElement(StyledEditorShowWrapper, null, /* @__PURE__ */ React8.createElement(StyledShowLabel2, null, property.path), htmlContent && /* @__PURE__ */ React8.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
 };
 var EditorShow_default = EditorShow;
+
+// src/components/Editor/EditorList.jsx
+import React9 from "react";
+import { ThemeProvider as ThemeProvider6 } from "styled-components";
+import { theme as theme6 } from "@adminjs/design-system";
+var EditorList = ({ property, record }) => {
+  const htmlContent = parseHtml(record.params[property.path]);
+  return /* @__PURE__ */ React9.createElement(ThemeProvider6, { theme: theme6 }, /* @__PURE__ */ React9.createElement(StyledEditorViewWrapper, null, htmlContent && /* @__PURE__ */ React9.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
+};
+var EditorList_default = EditorList;
 export {
   CustomSlug_default as CustomSlug,
   Editor_default as Editor,
+  EditorList_default as EditorList,
   EditorShow_default as EditorShow,
   StringList_default as StringList,
   StringListShow_default as StringListShow

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rulab/adminjs-components",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/components/CustomSlug/CustomSlug.tsx

@@ -1,3 +1,4 @@
+import { EditPropertyProps } from "adminjs";
 import React, {
   ChangeEvent,
   FC,
@@ -6,16 +7,16 @@ import React, {
   useState,
 } from "react";
 import { ThemeProvider } from "styled-components";
-import { EditPropertyProps } from "adminjs";
 
-import { theme, Label } from "@adminjs/design-system";
+import { theme } from "@adminjs/design-system";
 
 import { slugifyTitle } from "../../utils/index.js";
 
 import {
-  StyledInputWrapper,
   StyledCustomInput,
   StyledGenerateButton,
+  StyledInputWrapper,
+  StyledLabel,
 } from "./styles.js";
 
 type CustomSlugTypes = Omit<EditPropertyProps, "where" | "resource">;
@@ -29,7 +30,7 @@ const CustomSlug: FC<CustomSlugTypes> = ({ property, record, onChange }) => {
 
   return (
     <ThemeProvider theme={theme}>
-      <Label htmlFor="customSlug">Slug</Label>
+      <StyledLabel htmlFor="customSlug">{property.path}</StyledLabel>
       <StyledInputWrapper>
         <StyledCustomInput
           id={property.path}

package/src/components/CustomSlug/styles.ts

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

package/src/components/Editor/Editor.jsx

@@ -3,7 +3,7 @@ import { ThemeProvider } from "styled-components";
 import EditorJS from "@editorjs/editorjs";
 import { theme } from "@adminjs/design-system";
 
-import { Label, StyledEditor, EditorWrapper } from "./styles";
+import { StyledLabel, StyledEditor, StyledEditorWrapper } from "./styles";
 
 import { EDITOR_TOOLS } from "./config";
 
@@ -38,10 +38,10 @@ const Editor = ({ property, record, onChangeAdmin, editorId }) => {
 
   return (
     <ThemeProvider theme={theme}>
-      <Label>Text</Label>
-      <EditorWrapper>
+      <StyledLabel>{property.path}</StyledLabel>
+      <StyledEditorWrapper>
         <StyledEditor id={editorId} />
-      </EditorWrapper>
+      </StyledEditorWrapper>
     </ThemeProvider>
   );
 };

package/src/components/Editor/EditorList.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { ThemeProvider } from "styled-components";
+import { theme } from "@adminjs/design-system";
+
+import { parseHtml } from "../../utils/parseHtml";
+
+import { StyledEditorViewWrapper } from "./styles";
+
+const EditorList = ({ property, record }) => {
+  const htmlContent = parseHtml(record.params[property.path]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <StyledEditorViewWrapper>
+        {htmlContent && (
+          <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
+        )}
+      </StyledEditorViewWrapper>
+    </ThemeProvider>
+  );
+};
+
+export default EditorList;

package/src/components/Editor/EditorShow.jsx

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

package/src/components/Editor/index.ts

@@ -1,2 +1,3 @@
 export * from "./Editor.jsx";
 export * from "./EditorShow.jsx";
+export * from "./EditorList.jsx";

package/src/components/Editor/styles.ts

@@ -1,21 +1,24 @@
 import { Box } from "@adminjs/design-system";
 import { styled } from "@adminjs/design-system/styled-components";
 
-export const Label = styled.div`
+export const StyledLabel = styled.div`
   font-size: 12px;
   margin-bottom: 8px;
+  text-transform: capitalize;
+`;
+
+export const StyledShowLabel = styled(StyledLabel)`
   color: rgb(137, 138, 154);
+  font-weight: 300;
 `;
 
-export const EditorWrapper = styled(Box)`
+export const StyledEditorWrapper = styled(Box)`
   padding: 12px;
   margin-bottom: 24px;
   border: 1px solid rgb(187, 195, 203);
 `;
 
-export const EditorShowWrapper = styled(Box)`
-  margin-bottom: 24px;
-
+export const StyledEditorViewWrapper = styled(Box)`
   h1,
   h2,
   h3 {
@@ -54,6 +57,10 @@ export const EditorShowWrapper = styled(Box)`
   }
 `;
 
+export const StyledEditorShowWrapper = styled(StyledEditorViewWrapper)`
+  margin-bottom: 24px;
+`;
+
 export const StyledEditor = styled.div`
   .cdx-block,
   .ce-header {

package/src/components/StringList/SortableList/SortableList.tsx

@@ -1,5 +1,5 @@
-import React, { Fragment, useMemo, useState } from 'react';
-import type { ReactNode } from 'react';
+import React, { Fragment, useMemo, useState } from "react";
+import type { ReactNode } from "react";
 
 import {
   DndContext,
@@ -9,20 +9,20 @@ import {
   useSensors,
   DragOverlay,
   defaultDropAnimationSideEffects,
-} from '@dnd-kit/core';
+} from "@dnd-kit/core";
 import {
   SortableContext,
   arrayMove,
   sortableKeyboardCoordinates,
   verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
+} from "@dnd-kit/sortable";
 
-import type { DropAnimation } from '@dnd-kit/core';
+import type { DropAnimation } from "@dnd-kit/core";
 
-import { DragHandle, SortableItem } from './components/index.js';
-import { StyledListWrapper } from './styles.js';
+import { SortableItem } from "./components/index.js";
+import { StyledListWrapper } from "./styles.js";
 
-import type { Active, UniqueIdentifier } from '@dnd-kit/core';
+import type { Active, UniqueIdentifier } from "@dnd-kit/core";
 
 interface BaseItem {
   id: UniqueIdentifier;
@@ -39,7 +39,7 @@ const dropAnimationConfig: DropAnimation = {
   sideEffects: defaultDropAnimationSideEffects({
     styles: {
       active: {
-        opacity: '0.4',
+        opacity: "0.4",
       },
     },
   }),

package/src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx

@@ -1,7 +1,7 @@
-import React, { Context, FC, useContext } from 'react';
+import React, { Context, FC, useContext } from "react";
 
-import { DragButton } from './styles.js';
-import type { DragContext } from './types.js';
+import { StyledDragButton } from "./styles.js";
+import type { DragContext } from "./types.js";
 
 interface DragHandlePropsType {
   context: Context<DragContext>;
@@ -11,10 +11,10 @@ export const DragHandle: FC<DragHandlePropsType> = ({ context }) => {
   const { attributes, listeners, ref } = useContext(context);
 
   return (
-    <DragButton {...attributes} {...listeners} ref={ref}>
+    <StyledDragButton {...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>
+    </StyledDragButton>
   );
 };

package/src/components/StringList/SortableList/components/SortableItem/styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '@adminjs/design-system/styled-components';
+import { styled } from "@adminjs/design-system/styled-components";
 
 export const StyledListItem = styled.li`
   display: flex;
@@ -13,7 +13,7 @@ export const StyledListItem = styled.li`
   list-style: none;
 `;
 
-export const DragButton = styled.button`
+export const StyledDragButton = styled.button`
   padding: 3px;
   margin-right: 15px;
   cursor: move;

package/src/components/StringList/StringList.tsx

@@ -1,20 +1,21 @@
+import { Button, Input, theme } from "@adminjs/design-system";
+import { EditPropertyProps } from "adminjs";
 import React, {
-  useState,
-  useEffect,
   ChangeEvent,
+  FC,
   KeyboardEvent,
   SyntheticEvent,
-  FC,
+  useEffect,
+  useState,
 } from "react";
 import { ThemeProvider } from "styled-components";
-import { EditPropertyProps } from "adminjs";
-import { theme, Button, Input, Label } from "@adminjs/design-system";
 
 import {
-  StyledWrapper,
   StyledCustomInput,
-  StyledListWrapper,
   StyledInputWrapper,
+  StyledLabel,
+  StyledListWrapper,
+  StyledWrapper,
 } from "./styles.js";
 
 import { SortableList } from "./SortableList/SortableList.js";
@@ -55,7 +56,7 @@ const StringList: FC<StringListShowPropsType> = ({
 
   return (
     <ThemeProvider theme={theme}>
-      <Label htmlFor="custom">String List</Label>
+      <StyledLabel htmlFor="custom">{property.path}</StyledLabel>
       <StyledWrapper>
         <StyledListWrapper>
           <SortableList

package/src/components/StringList/StringListShow.tsx

@@ -4,7 +4,7 @@ import { ShowPropertyProps } from "adminjs";
 import { ThemeProvider } from "styled-components";
 import { theme } from "@adminjs/design-system";
 
-import { StringListShowLabel, StringListShowWrapper, ListItem } from "./styles";
+import { StyledShowLabel, StyledShowWrapper, StyledListItem } from "./styles";
 import { separator } from "./constants";
 
 interface StringListShowPropsType extends ShowPropertyProps {
@@ -18,18 +18,18 @@ const StringListShow: FC<StringListShowPropsType> = ({
 }) => {
   return (
     <ThemeProvider theme={theme}>
-      <StringListShowWrapper>
-        <StringListShowLabel>{property.name}</StringListShowLabel>
+      <StyledShowWrapper>
+        <StyledShowLabel>{property.path}</StyledShowLabel>
         {record.params.facts && (
           <ul>
             {record.params.facts
               .split(stringListSeparator)
               .map((item: string, index: number) => (
-                <ListItem key={index}>{`- ${item}`}</ListItem>
+                <StyledListItem key={index}>{`- ${item}`}</StyledListItem>
               ))}
           </ul>
         )}
-      </StringListShowWrapper>
+      </StyledShowWrapper>
     </ThemeProvider>
   );
 };

package/src/components/StringList/styles.ts

@@ -1,5 +1,5 @@
-import { styled } from "@adminjs/design-system/styled-components";
 import { Box, Input } from "@adminjs/design-system";
+import { styled } from "@adminjs/design-system/styled-components";
 
 export const StyledWrapper = styled(Box)`
   display: flex;
@@ -20,18 +20,22 @@ export const StyledListWrapper = styled(Box)`
   margin-bottom: 15px;
 `;
 
-export const StringListShowLabel = styled.div`
+export const StyledLabel = styled.div`
   font-size: 12px;
   margin-bottom: 8px;
   text-transform: capitalize;
+`;
+
+export const StyledShowLabel = styled(StyledLabel)`
   line-height: 16px;
   color: rgb(137, 138, 154);
+  font-weight: 300;
 `;
 
-export const StringListShowWrapper = styled(Box)`
+export const StyledShowWrapper = styled(Box)`
   margin-bottom: 35px;
 `;
 
-export const ListItem = styled.li`
+export const StyledListItem = styled.li`
   margin-bottom: 5px;
 `;

package/src/components/index.ts

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