@rulab/adminjs-components 0.0.9 → 0.0.11

package/dist/index.cjs

@@ -38,7 +38,8 @@ __export(src_exports, {
   EditorList: () => EditorList_default,
   EditorShow: () => EditorShow_default,
   StringList: () => StringList_default,
-  StringListShow: () => StringListShow_default
+  StringListShow: () => StringListShow_default,
+  parseHtml: () => parseHtml
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -109,7 +110,7 @@ var colorStyles = {
 var ColorStatus = ({ property, record, onChange }) => {
   const availableValues = property.availableValues;
   const currentOption = availableValues.find(
-    (item) => item.value === record.params.colorStatus
+    (item) => item.value === record.params[property.path]
   );
   const [selectOption, setCurrentOption] = (0, import_react.useState)(currentOption);
   const handleSelectChange = (option) => {
@@ -138,9 +139,9 @@ var ColorStatusEdit_default = ColorStatus;
 var import_react2 = __toESM(require("react"), 1);
 var ColorStatusShow = ({ property, record }) => {
   const currentOption = property.availableValues?.find(
-    (item) => item.value === record.params.colorStatus
+    (item) => item.value === record.params[property.path]
   );
-  return /* @__PURE__ */ import_react2.default.createElement(ColorStatusBadgeWrapper, null, /* @__PURE__ */ import_react2.default.createElement(ShowLabel, null, property.path), /* @__PURE__ */ import_react2.default.createElement(ColorStatusBadge, { color: currentOption.color }, record.params.colorStatus));
+  return /* @__PURE__ */ import_react2.default.createElement(ColorStatusBadgeWrapper, null, /* @__PURE__ */ import_react2.default.createElement(ShowLabel, null, property.path), /* @__PURE__ */ import_react2.default.createElement(ColorStatusBadge, { color: currentOption.color }, record.params[property.path]));
 };
 var ColorStatusShow_default = ColorStatusShow;
 
@@ -148,9 +149,9 @@ var ColorStatusShow_default = ColorStatusShow;
 var import_react3 = __toESM(require("react"), 1);
 var ColorStatusList = ({ property, record }) => {
   const currentOption = property.availableValues?.find(
-    (item) => item.value === record.params.colorStatus
+    (item) => item.value === record.params[property.path]
   );
-  return /* @__PURE__ */ import_react3.default.createElement(ColorStatusBadge, { color: currentOption.color }, record.params.colorStatus);
+  return /* @__PURE__ */ import_react3.default.createElement(ColorStatusBadge, { color: currentOption.color }, record.params[property.path]);
 };
 var ColorStatusList_default = ColorStatusList;
 
@@ -174,6 +175,42 @@ var slugifyTitle = (title) => {
   });
 };
 
+// src/utils/parseHtml.ts
+var import_editorjs_html = __toESM(require("editorjs-html"), 1);
+var parseHtml = (jsonData) => {
+  function tableParser(block) {
+    const rows = block.data.content.map((row, index) => {
+      const tableHtml = [];
+      if (block.data.withHeadings && index === 0) {
+        tableHtml.push(`<tr>${row.map((cell) => `<th>${cell}</th>`)}</tr>`);
+      } else {
+        tableHtml.push(`<tr>${row.map((cell) => `<td>${cell}</td>`)}</tr>`);
+      }
+      return tableHtml;
+    });
+    if (block.data.withHeadings) {
+      const heading = rows[0];
+      const [, ...content] = rows;
+      return `<table><thead>${heading.join("")}</thead><tbody>${content.join("")}</tbody></table>`;
+    } else {
+      return `<table><tbody>${rows.join("")}</tbody></table>`;
+    }
+  }
+  const audioPlayerParser = (block) => {
+    return `<audio controls src={${block.data.src}} />`;
+  };
+  const edjsParser = (0, import_editorjs_html.default)({
+    table: tableParser,
+    audioPlayer: audioPlayerParser
+  });
+  try {
+    const data = edjsParser.parse(JSON.parse(jsonData));
+    return String(data).replace(/>,</g, "><");
+  } catch (e) {
+    console.log("error", e);
+  }
+};
+
 // src/components/CustomSlug/styles.ts
 var import_styled_components2 = require("@adminjs/design-system/styled-components");
 var import_design_system = require("@adminjs/design-system");
@@ -282,16 +319,50 @@ var StyledEditorViewWrapper = (0, import_styled_components4.styled)(import_desig
   ul {
     list-style: inherit;
   }
+
+  table,
+  audio {
+    margin: 16px 0;
+  }
+
+  table,
+  th,
+  td {
+    border: 1px solid;
+  }
+
+  th {
+    font-weight: bold;
+  }
+
+  th,
+  td {
+    padding: 4px;
+  }
+
+  blockquote {
+    display: block;
+    padding: 5px 8px;
+    width: fit-content;
+    border-radius: 10px;
+    background-color: #e6e6e6;
+  }
 `;
 var StyledEditorShowWrapper = (0, import_styled_components4.styled)(StyledEditorViewWrapper)`
   margin-bottom: 24px;
 `;
 var StyledEditor = import_styled_components4.styled.div`
+  audio,
   .cdx-block,
   .ce-header {
     padding-left: 58px;
   }
 
+  input {
+    margin-left: 58px;
+    width: auto;
+  }
+
   .cdx-list {
     padding-left: 85px;
   }
@@ -345,13 +416,26 @@ var StyledEditor = import_styled_components4.styled.div`
 var import_header = __toESM(require("@editorjs/header"), 1);
 var import_paragraph = __toESM(require("@editorjs/paragraph"), 1);
 var import_list = __toESM(require("@editorjs/list"), 1);
+var import_table = __toESM(require("@editorjs/table"), 1);
+var import_quote = __toESM(require("@editorjs/quote"), 1);
+var import_editorjs_audio_player = __toESM(require("editorjs-audio-player"), 1);
 var EDITOR_TOOLS = {
   paragraph: {
     class: import_paragraph.default,
     inlineToolbar: true
   },
   list: import_list.default,
-  header: import_header.default
+  header: {
+    class: import_header.default,
+    config: {
+      placeholder: "Enter a header",
+      levels: [2, 3, 4],
+      defaultLevel: 2
+    }
+  },
+  table: import_table.default,
+  quote: import_quote.default,
+  audioPlayer: import_editorjs_audio_player.default
 };
 
 // src/components/Editor/Editor.jsx
@@ -384,23 +468,9 @@ var Editor = ({ property, record, onChangeAdmin, editorId }) => {
 var Editor_default = Editor;
 
 // src/components/Editor/EditorList.jsx
+var import_design_system5 = require("@adminjs/design-system");
 var import_react6 = __toESM(require("react"), 1);
 var import_styled_components6 = require("styled-components");
-var import_design_system5 = 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/EditorList.jsx
 var EditorList = ({ property, record }) => {
   const htmlContent = parseHtml(record.params[property.path]);
   return /* @__PURE__ */ import_react6.default.createElement(import_styled_components6.ThemeProvider, { theme: import_design_system5.theme }, /* @__PURE__ */ import_react6.default.createElement(StyledEditorViewWrapper, null, htmlContent && /* @__PURE__ */ import_react6.default.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
@@ -695,5 +765,6 @@ var StringListShow_default = StringListShow;
   EditorList,
   EditorShow,
   StringList,
-  StringListShow
+  StringListShow,
+  parseHtml
 });

package/dist/index.d.cts

@@ -39,4 +39,6 @@ interface StringListShowPropsType extends ShowPropertyProps {
 }
 declare const StringListShow: FC<StringListShowPropsType>;
 
-export { ColorStatus as ColorStatusEdit, ColorStatusList, ColorStatusShow, CustomSlug, Editor, EditorList, EditorShow, StringList, StringListShow };
+declare const parseHtml: (jsonData: string) => string | undefined;
+
+export { ColorStatus as ColorStatusEdit, ColorStatusList, ColorStatusShow, CustomSlug, Editor, EditorList, EditorShow, StringList, StringListShow, parseHtml };

package/dist/index.d.ts

@@ -39,4 +39,6 @@ interface StringListShowPropsType extends ShowPropertyProps {
 }
 declare const StringListShow: FC<StringListShowPropsType>;
 
-export { ColorStatus as ColorStatusEdit, ColorStatusList, ColorStatusShow, CustomSlug, Editor, EditorList, EditorShow, StringList, StringListShow };
+declare const parseHtml: (jsonData: string) => string | undefined;
+
+export { ColorStatus as ColorStatusEdit, ColorStatusList, ColorStatusShow, CustomSlug, Editor, EditorList, EditorShow, StringList, StringListShow, parseHtml };

package/dist/index.js

@@ -65,7 +65,7 @@ var colorStyles = {
 var ColorStatus = ({ property, record, onChange }) => {
   const availableValues = property.availableValues;
   const currentOption = availableValues.find(
-    (item) => item.value === record.params.colorStatus
+    (item) => item.value === record.params[property.path]
   );
   const [selectOption, setCurrentOption] = useState(currentOption);
   const handleSelectChange = (option) => {
@@ -94,9 +94,9 @@ var ColorStatusEdit_default = ColorStatus;
 import React2 from "react";
 var ColorStatusShow = ({ property, record }) => {
   const currentOption = property.availableValues?.find(
-    (item) => item.value === record.params.colorStatus
+    (item) => item.value === record.params[property.path]
   );
-  return /* @__PURE__ */ React2.createElement(ColorStatusBadgeWrapper, null, /* @__PURE__ */ React2.createElement(ShowLabel, null, property.path), /* @__PURE__ */ React2.createElement(ColorStatusBadge, { color: currentOption.color }, record.params.colorStatus));
+  return /* @__PURE__ */ React2.createElement(ColorStatusBadgeWrapper, null, /* @__PURE__ */ React2.createElement(ShowLabel, null, property.path), /* @__PURE__ */ React2.createElement(ColorStatusBadge, { color: currentOption.color }, record.params[property.path]));
 };
 var ColorStatusShow_default = ColorStatusShow;
 
@@ -104,9 +104,9 @@ var ColorStatusShow_default = ColorStatusShow;
 import React3 from "react";
 var ColorStatusList = ({ property, record }) => {
   const currentOption = property.availableValues?.find(
-    (item) => item.value === record.params.colorStatus
+    (item) => item.value === record.params[property.path]
   );
-  return /* @__PURE__ */ React3.createElement(ColorStatusBadge, { color: currentOption.color }, record.params.colorStatus);
+  return /* @__PURE__ */ React3.createElement(ColorStatusBadge, { color: currentOption.color }, record.params[property.path]);
 };
 var ColorStatusList_default = ColorStatusList;
 
@@ -133,6 +133,42 @@ var slugifyTitle = (title) => {
   });
 };
 
+// src/utils/parseHtml.ts
+import edjsHTML from "editorjs-html";
+var parseHtml = (jsonData) => {
+  function tableParser(block) {
+    const rows = block.data.content.map((row, index) => {
+      const tableHtml = [];
+      if (block.data.withHeadings && index === 0) {
+        tableHtml.push(`<tr>${row.map((cell) => `<th>${cell}</th>`)}</tr>`);
+      } else {
+        tableHtml.push(`<tr>${row.map((cell) => `<td>${cell}</td>`)}</tr>`);
+      }
+      return tableHtml;
+    });
+    if (block.data.withHeadings) {
+      const heading = rows[0];
+      const [, ...content] = rows;
+      return `<table><thead>${heading.join("")}</thead><tbody>${content.join("")}</tbody></table>`;
+    } else {
+      return `<table><tbody>${rows.join("")}</tbody></table>`;
+    }
+  }
+  const audioPlayerParser = (block) => {
+    return `<audio controls src={${block.data.src}} />`;
+  };
+  const edjsParser = edjsHTML({
+    table: tableParser,
+    audioPlayer: audioPlayerParser
+  });
+  try {
+    const data = edjsParser.parse(JSON.parse(jsonData));
+    return String(data).replace(/>,</g, "><");
+  } catch (e) {
+    console.log("error", e);
+  }
+};
+
 // src/components/CustomSlug/styles.ts
 import { styled as styled2 } from "@adminjs/design-system/styled-components";
 import { Box, Button, Input } from "@adminjs/design-system";
@@ -241,16 +277,50 @@ var StyledEditorViewWrapper = styled3(Box2)`
   ul {
     list-style: inherit;
   }
+
+  table,
+  audio {
+    margin: 16px 0;
+  }
+
+  table,
+  th,
+  td {
+    border: 1px solid;
+  }
+
+  th {
+    font-weight: bold;
+  }
+
+  th,
+  td {
+    padding: 4px;
+  }
+
+  blockquote {
+    display: block;
+    padding: 5px 8px;
+    width: fit-content;
+    border-radius: 10px;
+    background-color: #e6e6e6;
+  }
 `;
 var StyledEditorShowWrapper = styled3(StyledEditorViewWrapper)`
   margin-bottom: 24px;
 `;
 var StyledEditor = styled3.div`
+  audio,
   .cdx-block,
   .ce-header {
     padding-left: 58px;
   }
 
+  input {
+    margin-left: 58px;
+    width: auto;
+  }
+
   .cdx-list {
     padding-left: 85px;
   }
@@ -304,13 +374,26 @@ var StyledEditor = styled3.div`
 import Header from "@editorjs/header";
 import Paragraph from "@editorjs/paragraph";
 import List from "@editorjs/list";
+import Table from "@editorjs/table";
+import Quote from "@editorjs/quote";
+import AudioPlayer from "editorjs-audio-player";
 var EDITOR_TOOLS = {
   paragraph: {
     class: Paragraph,
     inlineToolbar: true
   },
   list: List,
-  header: Header
+  header: {
+    class: Header,
+    config: {
+      placeholder: "Enter a header",
+      levels: [2, 3, 4],
+      defaultLevel: 2
+    }
+  },
+  table: Table,
+  quote: Quote,
+  audioPlayer: AudioPlayer
 };
 
 // src/components/Editor/Editor.jsx
@@ -343,23 +426,9 @@ var Editor = ({ property, record, onChangeAdmin, editorId }) => {
 var Editor_default = Editor;
 
 // src/components/Editor/EditorList.jsx
+import { theme as theme3 } from "@adminjs/design-system";
 import React6 from "react";
 import { ThemeProvider as ThemeProvider3 } from "styled-components";
-import { theme as theme3 } 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/EditorList.jsx
 var EditorList = ({ property, record }) => {
   const htmlContent = parseHtml(record.params[property.path]);
   return /* @__PURE__ */ React6.createElement(ThemeProvider3, { theme: theme3 }, /* @__PURE__ */ React6.createElement(StyledEditorViewWrapper, null, htmlContent && /* @__PURE__ */ React6.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
@@ -669,5 +738,6 @@ export {
   EditorList_default as EditorList,
   EditorShow_default as EditorShow,
   StringList_default as StringList,
-  StringListShow_default as StringListShow
+  StringListShow_default as StringListShow,
+  parseHtml
 };

package/package.json

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

package/src/components/ColorStatus/ColorStatusEdit.tsx

@@ -57,7 +57,7 @@ const ColorStatus: FC<ColorStatusTypes> = ({ property, record, onChange }) => {
   const availableValues = property.availableValues as AvailableValueType[];
 
   const currentOption = availableValues.find(
-    (item) => item.value === record.params.colorStatus,
+    (item) => item.value === record.params[property.path],
   ) as AvailableValueType;
 
   const [selectOption, setCurrentOption] = useState<

package/src/components/ColorStatus/ColorStatusList.tsx

@@ -7,12 +7,12 @@ import type { AvailableValueType } from "./types";
 
 const ColorStatusList: FC<ShowPropertyProps> = ({ property, record }) => {
   const currentOption = property.availableValues?.find(
-    (item) => item.value === record.params.colorStatus,
+    (item) => item.value === record.params[property.path],
   ) as AvailableValueType;
 
   return (
     <ColorStatusBadge color={currentOption.color}>
-      {record.params.colorStatus}
+      {record.params[property.path]}
     </ColorStatusBadge>
   );
 };

package/src/components/ColorStatus/ColorStatusShow.tsx

@@ -7,14 +7,14 @@ import type { AvailableValueType } from "./types";
 
 const ColorStatusShow: FC<ShowPropertyProps> = ({ property, record }) => {
   const currentOption = property.availableValues?.find(
-    (item) => item.value === record.params.colorStatus,
+    (item) => item.value === record.params[property.path],
   ) as AvailableValueType;
 
   return (
     <ColorStatusBadgeWrapper>
       <ShowLabel>{property.path}</ShowLabel>
       <ColorStatusBadge color={currentOption.color}>
-        {record.params.colorStatus}
+        {record.params[property.path]}
       </ColorStatusBadge>
     </ColorStatusBadgeWrapper>
   );

package/src/components/CustomSlug/CustomSlug.tsx

@@ -19,9 +19,14 @@ import {
   StyledLabel,
 } from "./styles.js";
 
-type CustomSlugTypes = Omit<EditPropertyProps, "where" | "resource">;
+type CustomSlugTypes = Omit<EditPropertyProps, "where">;
 
-const CustomSlug: FC<CustomSlugTypes> = ({ property, record, onChange }) => {
+const CustomSlug: FC<CustomSlugTypes> = ({
+  property,
+  record,
+  resource,
+  onChange,
+}) => {
   const [inputValue, setInputValue] = useState(record.params.slug);
 
   useEffect(() => {
@@ -51,9 +56,11 @@ const CustomSlug: FC<CustomSlugTypes> = ({ property, record, onChange }) => {
 
   function generateSlug(e: SyntheticEvent<HTMLInputElement>) {
     e.preventDefault();
-    const title = record.params.title;
-    if (title) {
-      setInputValue(slugifyTitle(title));
+    const slugSource =
+      record.params[property.props.sourceField ?? resource.titleProperty.name];
+
+    if (slugSource) {
+      setInputValue(slugifyTitle(slugSource));
     }
   }
 };