@rulab/adminjs-components 0.0.4 → 0.0.6

package/dist/index.cjs

@@ -33,7 +33,8 @@ __export(src_exports, {
   CustomSlug: () => CustomSlug_default,
   Editor: () => Editor_default,
   EditorShow: () => EditorShow_default,
-  StringList: () => StringList_default
+  StringList: () => StringList_default,
+  StringListShow: () => StringListShow_default
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -111,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%;
@@ -122,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);
@@ -261,8 +276,16 @@ function SortableList({
 }
 SortableList.Item = SortableItem;
 
+// src/components/StringList/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)("");
@@ -317,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 {
@@ -331,24 +354,79 @@ 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
+}) => {
+  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 EditorShowWrapper = (0, import_styled_components8.styled)(import_design_system7.Box)`
+  margin-bottom: 24px;
+
+  h1,
+  h2,
+  h3 {
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+
+  h1 {
+    font-size: 18px;
+  }
+
+  h2 {
+    font-size: 16px;
+  }
+
+  h3 {
+    font-size: 14px;
+  }
+
+  p {
+    margin-bottom: 8px;
+  }
+
+  ol,
+  ul {
+    margin-left: 20px;
+    margin-bottom: 8px;
+  }
+
+  ol {
+    list-style: auto;
+  }
+
+  ul {
+    list-style: inherit;
+  }
+`;
+var StyledEditor = import_styled_components8.styled.div`
   .cdx-block,
   .ce-header {
     padding-left: 58px;
@@ -418,13 +496,13 @@ var EDITOR_TOOLS = {
 
 // src/components/Editor/Editor.jsx
 var Editor = ({ property, record, onChangeAdmin, editorId }) => {
-  const [jsonData, setJsonData] = (0, import_react6.useState)();
+  const [jsonData, setJsonData] = (0, import_react7.useState)();
   const isSavedData = Boolean(record.params[property.path]);
-  const ref = (0, import_react6.useRef)();
-  (0, import_react6.useEffect)(() => {
+  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,
@@ -441,14 +519,14 @@ 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_react7 = __toESM(require("react"), 1);
-var import_styled_components9 = require("styled-components");
-var import_design_system8 = require("@adminjs/design-system");
+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);
@@ -465,7 +543,7 @@ var parseHtml = (jsonData) => {
 // src/components/Editor/EditorShow.jsx
 var EditorShow = ({ property, record }) => {
   const htmlContent = parseHtml(record.params[property.path]);
-  return /* @__PURE__ */ import_react7.default.createElement(import_styled_components9.ThemeProvider, { theme: import_design_system8.theme }, /* @__PURE__ */ import_react7.default.createElement(Label3, null, "Content"), htmlContent && /* @__PURE__ */ import_react7.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(EditorShowWrapper, null, /* @__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:
@@ -473,5 +551,6 @@ var EditorShow_default = EditorShow;
   CustomSlug,
   Editor,
   EditorShow,
-  StringList
+  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;
@@ -19,4 +27,4 @@ declare function EditorShow({ property, record }: {
     record: any;
 }): React.JSX.Element;
 
-export { CustomSlug, Editor, EditorShow, StringList };
+export { CustomSlug, Editor, EditorShow, StringList, StringListShow };

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;
@@ -19,4 +27,4 @@ declare function EditorShow({ property, record }: {
     record: any;
 }): React.JSX.Element;
 
-export { CustomSlug, Editor, EditorShow, StringList };
+export { CustomSlug, Editor, EditorShow, StringList, StringListShow };

package/dist/index.js

@@ -78,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%;
@@ -89,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";
@@ -241,8 +255,16 @@ function SortableList({
 }
 SortableList.Item = SortableItem;
 
+// src/components/StringList/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("");
@@ -297,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 {
@@ -311,11 +333,24 @@ 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
+}) => {
+  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";
@@ -323,11 +358,53 @@ 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 EditorShowWrapper = styled5(Box3)`
+  margin-bottom: 24px;
+
+  h1,
+  h2,
+  h3 {
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+
+  h1 {
+    font-size: 18px;
+  }
+
+  h2 {
+    font-size: 16px;
+  }
+
+  h3 {
+    font-size: 14px;
+  }
+
+  p {
+    margin-bottom: 8px;
+  }
+
+  ol,
+  ul {
+    margin-left: 20px;
+    margin-bottom: 8px;
+  }
+
+  ol {
+    list-style: auto;
+  }
+
+  ul {
+    list-style: inherit;
+  }
+`;
 var StyledEditor = styled5.div`
   .cdx-block,
   .ce-header {
@@ -398,13 +475,13 @@ var EDITOR_TOOLS = {
 
 // src/components/Editor/Editor.jsx
 var Editor = ({ property, record, onChangeAdmin, editorId }) => {
-  const [jsonData, setJsonData] = useState4();
+  const [jsonData, setJsonData] = useState5();
   const isSavedData = Boolean(record.params[property.path]);
-  const ref = useRef();
-  useEffect3(() => {
+  const ref = useRef2();
+  useEffect4(() => {
     onChangeAdmin(property.path, jsonData);
   }, [jsonData]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!ref.current) {
       const editor = new EditorJS({
         holder: editorId,
@@ -421,14 +498,14 @@ 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 React7, { memo as memo2, useState as useState5, useEffect as useEffect4, useRef as useRef2 } from "react";
-import { ThemeProvider as ThemeProvider4 } from "styled-components";
-import { theme as theme4 } from "@adminjs/design-system";
+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";
@@ -445,12 +522,13 @@ var parseHtml = (jsonData) => {
 // src/components/Editor/EditorShow.jsx
 var EditorShow = ({ property, record }) => {
   const htmlContent = parseHtml(record.params[property.path]);
-  return /* @__PURE__ */ React7.createElement(ThemeProvider4, { theme: theme4 }, /* @__PURE__ */ React7.createElement(Label3, null, "Content"), htmlContent && /* @__PURE__ */ React7.createElement("div", { dangerouslySetInnerHTML: { __html: String(htmlContent) } }));
+  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) } })));
 };
 var EditorShow_default = EditorShow;
 export {
   CustomSlug_default as CustomSlug,
   Editor_default as Editor,
   EditorShow_default as EditorShow,
-  StringList_default as StringList
+  StringList_default as StringList,
+  StringListShow_default as StringListShow
 };

package/package.json

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

package/src/components/Editor/EditorShow.jsx

@@ -4,6 +4,8 @@ import { theme } from "@adminjs/design-system";
 
 import { parseHtml } from "../../utils/parseHtml";
 
+import { EditorShowWrapper } from "./styles";
+
 import { Label } from "./styles";
 
 const EditorShow = ({ property, record }) => {
@@ -11,10 +13,12 @@ const EditorShow = ({ property, record }) => {
 
   return (
     <ThemeProvider theme={theme}>
-      <Label>Content</Label>
-      {htmlContent && (
-        <div dangerouslySetInnerHTML={{ __html: String(htmlContent) }} />
-      )}
+      <EditorShowWrapper>
+        <Label>Content</Label>
+        {htmlContent && (
+          <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
+        )}
+      </EditorShowWrapper>
     </ThemeProvider>
   );
 };

package/src/components/Editor/styles.ts

@@ -4,13 +4,56 @@ 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);
 `;
 
+export const EditorShowWrapper = styled(Box)`
+  margin-bottom: 24px;
+
+  h1,
+  h2,
+  h3 {
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+
+  h1 {
+    font-size: 18px;
+  }
+
+  h2 {
+    font-size: 16px;
+  }
+
+  h3 {
+    font-size: 14px;
+  }
+
+  p {
+    margin-bottom: 8px;
+  }
+
+  ol,
+  ul {
+    margin-left: 20px;
+    margin-bottom: 8px;
+  }
+
+  ol {
+    list-style: auto;
+  }
+
+  ul {
+    list-style: inherit;
+  }
+`;
+
 export const StyledEditor = styled.div`
   .cdx-block,
   .ce-header {

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,4 +1,5 @@
 export { default as CustomSlug } from "./CustomSlug/CustomSlug.js";
 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";