@rulab/adminjs-components 0.0.13 → 0.1.0-alpha.10

package/dist/index.js

@@ -1,757 +1,2 @@
-// src/components/ColorStatus/ColorStatusEdit.tsx
-import React, { useState, useEffect } from "react";
-import Select from "react-select";
-import chroma from "chroma-js";
-
-// src/components/ColorStatus/styles.ts
-import { styled } from "@adminjs/design-system/styled-components";
-var ColorStatusWrapper = styled.div`
-  margin-bottom: 24px;
-`;
-var Label = styled.div`
-  font-size: 12px;
-  margin-bottom: 8px;
-`;
-var ShowLabel = styled.div`
-  font-size: 12px;
-  margin-bottom: 8px;
-  color: rgb(137, 138, 154);
-`;
-var ColorStatusBadgeWrapper = styled.div`
-  margin-bottom: 20px;
-`;
-var ColorStatusBadge = styled.div`
-  background-color: ${(props) => props.color};
-  width: fit-content;
-  padding: 5px 10px;
-  border-radius: 20px;
-  font-size: 12px;
-  color: white;
-  white-space: nowrap;
-`;
-
-// src/components/ColorStatus/ColorStatusEdit.tsx
-var dot = (color = "transparent") => ({
-  alignItems: "center",
-  display: "flex",
-  ":before": {
-    backgroundColor: color,
-    borderRadius: 10,
-    content: '" "',
-    display: "block",
-    marginRight: 8,
-    height: 10,
-    width: 10
-  }
-});
-var colorStyles = {
-  control: (styles) => ({ ...styles, backgroundColor: "white" }),
-  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
-    const color = chroma(data.color);
-    return {
-      ...styles,
-      backgroundColor: isSelected ? data.color : isFocused ? color.alpha(0.1).css() : void 0,
-      color: isSelected ? chroma.contrast(color, "white") > 2 ? "white" : "black" : data.color,
-      ":active": {
-        ...styles[":active"],
-        backgroundColor: isSelected ? data.color : color.alpha(0.3).css()
-      }
-    };
-  },
-  input: (styles) => ({ ...styles, ...dot() }),
-  placeholder: (styles) => ({ ...styles, ...dot("#ccc") }),
-  singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) })
-};
-var ColorStatus = ({ property, record, onChange }) => {
-  const availableValues = property.availableValues;
-  const currentOption = availableValues.find(
-    (item) => item.value === record.params[property.path]
-  );
-  const [selectOption, setCurrentOption] = useState(currentOption);
-  const handleSelectChange = (option) => {
-    setCurrentOption(option);
-  };
-  useEffect(() => {
-    onChange(property.path, selectOption?.value);
-  }, [selectOption]);
-  return /* @__PURE__ */ React.createElement(ColorStatusWrapper, null, /* @__PURE__ */ React.createElement(Label, null, property.path), /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      className: "basic-single",
-      classNamePrefix: "select",
-      defaultValue: selectOption ?? availableValues[0],
-      onChange: handleSelectChange,
-      isClearable: true,
-      name: "color",
-      options: availableValues,
-      styles: colorStyles
-    }
-  ));
-};
-var ColorStatusEdit_default = ColorStatus;
-
-// src/components/ColorStatus/ColorStatusShow.tsx
-import React2 from "react";
-var ColorStatusShow = ({ property, record }) => {
-  const currentOption = property.availableValues?.find(
-    (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[property.path]));
-};
-var ColorStatusShow_default = ColorStatusShow;
-
-// src/components/ColorStatus/ColorStatusList.tsx
-import React3 from "react";
-var ColorStatusList = ({ property, record }) => {
-  const currentOption = property.availableValues?.find(
-    (item) => item.value === record.params[property.path]
-  );
-  return /* @__PURE__ */ React3.createElement(ColorStatusBadge, { color: currentOption.color }, record.params[property.path]);
-};
-var ColorStatusList_default = ColorStatusList;
-
-// src/components/CustomSlug/CustomSlug.tsx
-import React4, {
-  useEffect as useEffect2,
-  useState as useState2
-} from "react";
-import { ThemeProvider } from "styled-components";
-import { theme } from "@adminjs/design-system";
-
-// src/utils/parseHtml.ts
-import edjsHTML from "editorjs-html";
-var 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>`;
-  }
-};
-var audioPlayerParser = (block) => {
-  return `<audio controls src={${block.data.src}} />`;
-};
-var parseHtml = (jsonData) => {
-  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/utils/slugifyImport.ts
-import slugify from "slugify";
-var slugifyImport_default = slugify;
-
-// src/utils/slugifyTitle.ts
-var slugifyTitle = (title) => {
-  return slugifyImport_default(title, {
-    replacement: "-",
-    remove: /[*+~.()'"!:@]/g,
-    lower: true,
-    locale: "vi",
-    trim: true
-  });
-};
-
-// src/components/CustomSlug/styles.ts
-import { styled as styled2 } from "@adminjs/design-system/styled-components";
-import { Box, Button, Input } from "@adminjs/design-system";
-var StyledInputWrapper = styled2(Box)`
-  display: flex;
-  margin-bottom: 40px;
-`;
-var StyledCustomInput = styled2(Input)`
-  width: 100%;
-  margin-right: 10px;
-`;
-var StyledGenerateButton = styled2(Button)`
-  white-space: nowrap;
-`;
-var StyledLabel = styled2.div`
-  font-size: 12px;
-  margin-bottom: 8px;
-  text-transform: capitalize;
-`;
-
-// src/components/CustomSlug/CustomSlug.tsx
-var CustomSlug = ({
-  property,
-  record,
-  resource,
-  onChange
-}) => {
-  const [inputValue, setInputValue] = useState2(record.params.slug);
-  useEffect2(() => {
-    onChange(property.path, inputValue);
-  }, [inputValue]);
-  return /* @__PURE__ */ React4.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React4.createElement(StyledLabel, { htmlFor: "customSlug" }, property.path), /* @__PURE__ */ React4.createElement(StyledInputWrapper, null, /* @__PURE__ */ React4.createElement(
-    StyledCustomInput,
-    {
-      id: property.path,
-      name: property.path,
-      value: inputValue,
-      onChange: handleInput
-    }
-  ), /* @__PURE__ */ React4.createElement(StyledGenerateButton, { variant: "outlined", onClick: generateSlug }, "Generate Slug")));
-  function handleInput(e) {
-    setInputValue(e.target.value);
-  }
-  function generateSlug(e) {
-    e.preventDefault();
-    const slugSource = record.params[property.props.sourceField ?? resource.titleProperty.name];
-    if (slugSource) {
-      setInputValue(slugifyTitle(slugSource));
-    }
-  }
-};
-var CustomSlug_default = CustomSlug;
-
-// src/components/Editor/Editor.jsx
-import React5, { memo, useState as useState3, useEffect as useEffect3, useRef } from "react";
-import { ThemeProvider as ThemeProvider2 } from "styled-components";
-import EditorJS from "@editorjs/editorjs";
-import { theme as theme2 } from "@adminjs/design-system";
-
-// src/components/Editor/styles.ts
-import { Box as Box2 } from "@adminjs/design-system";
-import { styled as styled3 } from "@adminjs/design-system/styled-components";
-var StyledLabel2 = styled3.div`
-  font-size: 12px;
-  margin-bottom: 8px;
-  text-transform: capitalize;
-`;
-var StyledShowLabel = styled3(StyledLabel2)`
-  color: rgb(137, 138, 154);
-  font-weight: 300;
-`;
-var StyledEditorWrapper = styled3(Box2)`
-  padding: 12px;
-  margin-bottom: 24px;
-  border: 1px solid rgb(187, 195, 203);
-`;
-var StyledEditorViewWrapper = styled3(Box2)`
-  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;
-  }
-
-  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: 4px;
-    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;
-  }
-
-  .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;
-  }
-`;
-
-// src/components/Editor/config.ts
-import Header from "@editorjs/header";
-import List from "@editorjs/list";
-import Paragraph from "@editorjs/paragraph";
-import Quote from "@editorjs/quote";
-import Table from "@editorjs/table";
-import AudioPlayer from "editorjs-audio-player";
-var EDITOR_TOOLS = {
-  paragraph: {
-    class: Paragraph,
-    inlineToolbar: true
-  },
-  list: {
-    class: List,
-    inlineToolbar: true
-  },
-  header: {
-    class: Header,
-    config: {
-      placeholder: "Enter a header",
-      levels: [2, 3, 4],
-      defaultLevel: 2
-    }
-  },
-  table: {
-    class: Table,
-    inlineToolbar: true
-  },
-  quote: {
-    class: Quote,
-    inlineToolbar: true
-  },
-  audioPlayer: AudioPlayer
-};
-
-// src/components/Editor/Editor.jsx
-var Editor = ({ property, record, onChangeAdmin, editorId }) => {
-  const [jsonData, setJsonData] = useState3();
-  const isSavedData = Boolean(record.params[property.path]);
-  const ref = useRef();
-  useEffect3(() => {
-    onChangeAdmin(property.path, jsonData);
-  }, [jsonData]);
-  useEffect3(() => {
-    if (!ref.current) {
-      const editor = new EditorJS({
-        holder: editorId,
-        tools: EDITOR_TOOLS,
-        data: isSavedData ? JSON.parse(record.params[property.path]) : "",
-        async onChange(api, event) {
-          const data = await api.saver.save();
-          setJsonData(JSON.stringify(data));
-        }
-      });
-      ref.current = editor;
-    }
-    return () => {
-      ref?.current?.destroy?.();
-    };
-  }, []);
-  return /* @__PURE__ */ React5.createElement(ThemeProvider2, { theme: theme2 }, /* @__PURE__ */ React5.createElement(StyledLabel2, null, property.path), /* @__PURE__ */ React5.createElement(StyledEditorWrapper, null, /* @__PURE__ */ React5.createElement(StyledEditor, { id: editorId })));
-};
-var Editor_default = Editor;
-
-// src/components/Editor/EditorList.jsx
-import React6 from "react";
-import { theme as theme3 } from "@adminjs/design-system";
-import { ThemeProvider as ThemeProvider3 } from "styled-components";
-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 } })));
-};
-var EditorList_default = EditorList;
-
-// src/components/Editor/EditorShow.jsx
-import React7 from "react";
-import { ThemeProvider as ThemeProvider4 } from "styled-components";
-import { theme as theme4 } from "@adminjs/design-system";
-var EditorShow = ({ property, record }) => {
-  const htmlContent = parseHtml(record.params[property.path]);
-  return /* @__PURE__ */ React7.createElement(ThemeProvider4, { theme: theme4 }, /* @__PURE__ */ React7.createElement(StyledEditorShowWrapper, null, /* @__PURE__ */ React7.createElement(StyledShowLabel, null, property.path), htmlContent && /* @__PURE__ */ React7.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
-};
-var EditorShow_default = EditorShow;
-
-// src/components/StringList/StringList.tsx
-import { Button as Button3, Input as Input3, theme as theme5 } from "@adminjs/design-system";
-import React11, {
-  useEffect as useEffect4,
-  useState as useState5
-} from "react";
-import { ThemeProvider as ThemeProvider5 } from "styled-components";
-
-// src/components/StringList/styles.ts
-import { Box as Box3, Input as Input2 } from "@adminjs/design-system";
-import { styled as styled4 } from "@adminjs/design-system/styled-components";
-var StyledWrapper = styled4(Box3)`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 45px;
-`;
-var StyledCustomInput2 = styled4(Input2)`
-  width: 100%;
-  margin-right: 10px;
-`;
-var StyledInputWrapper2 = styled4(Box3)`
-  display: flex;
-`;
-var StyledListWrapper = styled4(Box3)`
-  margin-bottom: 15px;
-`;
-var StyledLabel3 = styled4.div`
-  font-size: 12px;
-  margin-bottom: 8px;
-  text-transform: capitalize;
-`;
-var StyledShowLabel2 = styled4(StyledLabel3)`
-  line-height: 16px;
-  color: rgb(137, 138, 154);
-  font-weight: 300;
-`;
-var StyledShowWrapper = styled4(Box3)`
-  margin-bottom: 35px;
-`;
-var StyledListItem = styled4.li`
-  margin-bottom: 5px;
-`;
-
-// src/components/StringList/SortableList/SortableList.tsx
-import React10, { Fragment, useMemo as useMemo2, useState as useState4 } from "react";
-import {
-  DndContext,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  DragOverlay,
-  defaultDropAnimationSideEffects
-} from "@dnd-kit/core";
-import {
-  SortableContext,
-  arrayMove,
-  sortableKeyboardCoordinates,
-  verticalListSortingStrategy
-} from "@dnd-kit/sortable";
-
-// src/components/StringList/SortableList/components/SortableItem/SortableItem.tsx
-import React9, { createContext, useMemo } from "react";
-import { useSortable } from "@dnd-kit/sortable";
-import { Button as Button2, Icon } from "@adminjs/design-system";
-
-// src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx
-import React8, { useContext } from "react";
-
-// src/components/StringList/SortableList/components/SortableItem/styles.ts
-import { styled as styled5 } from "@adminjs/design-system/styled-components";
-var StyledListItem2 = styled5.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;
-`;
-var StyledDragButton = styled5.button`
-  padding: 3px;
-  margin-right: 15px;
-  cursor: move;
-  background: none;
-  border: none;
-`;
-
-// src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx
-var DragHandle = ({ context }) => {
-  const { attributes, listeners, ref } = useContext(context);
-  return /* @__PURE__ */ React8.createElement(StyledDragButton, { ...attributes, ...listeners, ref }, /* @__PURE__ */ React8.createElement("svg", { viewBox: "0 0 20 20", width: "13" }, /* @__PURE__ */ React8.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
-var SortableItemContext = createContext({
-  attributes: {},
-  listeners: void 0,
-  ref() {
-  }
-});
-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 : void 0
-  };
-  return /* @__PURE__ */ React9.createElement(SortableItemContext.Provider, { value: context }, /* @__PURE__ */ React9.createElement(StyledListItem2, { ref: setNodeRef, style }, /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement(DragHandle, { context: SortableItemContext }), children), /* @__PURE__ */ React9.createElement(
-    Button2,
-    {
-      variant: "outlined",
-      color: "danger",
-      size: "icon",
-      onClick: (e) => onDelete(e, id)
-    },
-    /* @__PURE__ */ React9.createElement(Icon, { icon: "X", color: "red" })
-  )));
-}
-
-// src/components/StringList/SortableList/styles.ts
-import { styled as styled6 } from "@adminjs/design-system/styled-components";
-var StyledListWrapper2 = styled6.ul`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 0;
-  list-style: none;
-`;
-
-// src/components/StringList/SortableList/SortableList.tsx
-var dropAnimationConfig = {
-  sideEffects: defaultDropAnimationSideEffects({
-    styles: {
-      active: {
-        opacity: "0.4"
-      }
-    }
-  })
-};
-function SortableList({
-  items,
-  onChange,
-  renderItem
-}) {
-  const [active, setActive] = useState4(null);
-  const activeItem = useMemo2(
-    () => items.find((item) => item.id === active?.id),
-    [active, items]
-  );
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates
-    })
-  );
-  return /* @__PURE__ */ React10.createElement(
-    DndContext,
-    {
-      sensors,
-      onDragStart: ({ active: active2 }) => {
-        setActive(active2);
-      },
-      onDragEnd: ({ active: active2, over }) => {
-        if (over && active2.id !== over?.id) {
-          const activeIndex = items.findIndex(({ id }) => id === active2.id);
-          const overIndex = items.findIndex(({ id }) => id === over.id);
-          onChange(arrayMove(items, activeIndex, overIndex));
-        }
-        setActive(null);
-      },
-      onDragCancel: () => {
-        setActive(null);
-      }
-    },
-    /* @__PURE__ */ React10.createElement(SortableContext, { items, strategy: verticalListSortingStrategy }, /* @__PURE__ */ React10.createElement(StyledListWrapper2, { role: "application" }, items.map((item, index) => /* @__PURE__ */ React10.createElement(Fragment, { key: index }, renderItem(item))))),
-    /* @__PURE__ */ React10.createElement(DragOverlay, { dropAnimation: dropAnimationConfig }, activeItem ? renderItem(activeItem) : null)
-  );
-}
-SortableList.Item = SortableItem;
-
-// src/components/StringList/constants.ts
-var separator = "|";
-
-// src/components/StringList/StringList.tsx
-var StringList = ({
-  record,
-  onChange,
-  property,
-  stringListSeparator = separator
-}) => {
-  const stringListValue = record.params?.[property.path] ?? property.props.value ?? "";
-  const initialList = stringListValue ? prepareDataForList(stringListValue) : [];
-  const [inputValue, setInputValue] = useState5("");
-  const [list, setList] = useState5(initialList);
-  const serializedData = prepareDataForDatabase(list);
-  useEffect4(() => {
-    onChange(property.path, serializedData);
-  }, [serializedData]);
-  return /* @__PURE__ */ React11.createElement(ThemeProvider5, { theme: theme5 }, /* @__PURE__ */ React11.createElement(StyledLabel3, { htmlFor: "custom" }, property.path), /* @__PURE__ */ React11.createElement(StyledWrapper, null, /* @__PURE__ */ React11.createElement(StyledListWrapper, null, /* @__PURE__ */ React11.createElement(
-    SortableList,
-    {
-      items: list,
-      onChange: setList,
-      renderItem: (item) => /* @__PURE__ */ React11.createElement(SortableList.Item, { id: item.id, onDelete: handleDeleteButton }, item.value)
-    }
-  )), /* @__PURE__ */ React11.createElement(StyledInputWrapper2, null, /* @__PURE__ */ React11.createElement(
-    Input3,
-    {
-      id: "stringList",
-      name: property.path,
-      value: serializedData,
-      hidden: true
-    }
-  ), /* @__PURE__ */ React11.createElement(
-    StyledCustomInput2,
-    {
-      id: "custom",
-      name: "customInput",
-      value: inputValue,
-      onChange: handleInput,
-      onKeyPress: handleEnterPress
-    }
-  ), /* @__PURE__ */ React11.createElement(Button3, { variant: "outlined", onClick: handleAddButton }, "Add"))));
-  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(list2) {
-    return list2.map(({ value }) => value).join(stringListSeparator);
-  }
-  function prepareDataForList(str) {
-    return str.split(stringListSeparator).map((item) => createListObject(item));
-  }
-  function createListObject(value) {
-    return {
-      id: `${Date.now()}-${Math.floor(Math.random() * 1e3)}`,
-      value
-    };
-  }
-};
-var StringList_default = StringList;
-
-// src/components/StringList/StringListShow.tsx
-import React12 from "react";
-import { ThemeProvider as ThemeProvider6 } from "styled-components";
-import { theme as theme6 } from "@adminjs/design-system";
-var StringListShow = ({
-  property,
-  record,
-  stringListSeparator = separator
-}) => {
-  return /* @__PURE__ */ React12.createElement(ThemeProvider6, { theme: theme6 }, /* @__PURE__ */ React12.createElement(StyledShowWrapper, null, /* @__PURE__ */ React12.createElement(StyledShowLabel2, null, property.path), record.params.facts && /* @__PURE__ */ React12.createElement("ul", null, record.params.facts.split(stringListSeparator).map((item, index) => /* @__PURE__ */ React12.createElement(StyledListItem, { key: index }, `- ${item}`)))));
-};
-var StringListShow_default = StringListShow;
-export {
-  ColorStatusEdit_default as ColorStatusEdit,
-  ColorStatusList_default as ColorStatusList,
-  ColorStatusShow_default as ColorStatusShow,
-  CustomSlug_default as CustomSlug,
-  Editor_default as Editor,
-  EditorList_default as EditorList,
-  EditorShow_default as EditorShow,
-  StringList_default as StringList,
-  StringListShow_default as StringListShow,
-  parseHtml
-};
+export * from "./components/index.js";
+export { parseHtml } from "./utils/parseHtml.js";