@rulab/adminjs-components 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Roman Daud
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# adminjs-components

package/dist/index.cjs

@@ -0,0 +1,333 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CustomSlug: () => CustomSlug_default,
+  StringList: () => StringList_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/CustomSlug/CustomSlug.tsx
+var import_react = __toESM(require("react"), 1);
+var import_styled_components2 = require("styled-components");
+var import_design_system2 = require("@adminjs/design-system");
+
+// src/utils/slugifyImport.ts
+var import_slugify = __toESM(require("slugify"), 1);
+var slugifyImport_default = import_slugify.default;
+
+// src/utils/slugifyTitle.ts
+var slugifyTitle = (title) => {
+  return slugifyImport_default(title, {
+    replacement: "-",
+    remove: void 0,
+    lower: true,
+    locale: "vi",
+    trim: true
+  });
+};
+
+// src/components/CustomSlug/styles.ts
+var import_styled_components = require("@adminjs/design-system/styled-components");
+var import_design_system = require("@adminjs/design-system");
+var StyledInputWrapper = (0, import_styled_components.styled)(import_design_system.Box)`
+  display: flex;
+  margin-bottom: 40px;
+`;
+var StyledCustomInput = (0, import_styled_components.styled)(import_design_system.Input)`
+  width: 100%;
+  margin-right: 10px;
+`;
+var StyledGenerateButton = (0, import_styled_components.styled)(import_design_system.Button)`
+  white-space: nowrap;
+`;
+
+// src/components/CustomSlug/CustomSlug.tsx
+var CustomSlug = ({ property, record, onChange }) => {
+  const [inputValue, setInputValue] = (0, import_react.useState)(record.params.slug);
+  (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(
+    StyledCustomInput,
+    {
+      id: property.path,
+      name: property.path,
+      value: inputValue,
+      onChange: handleInput
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(StyledGenerateButton, { variant: "outlined", onClick: generateSlug }, "Generate Slug")));
+  function handleInput(e) {
+    setInputValue(e.target.value);
+  }
+  function generateSlug(e) {
+    e.preventDefault();
+    const title = record.title;
+    setInputValue(slugifyTitle(title));
+  }
+};
+var CustomSlug_default = CustomSlug;
+
+// src/components/StringList/StringList.tsx
+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 StyledWrapper = (0, import_styled_components3.styled)(import_design_system3.Box)`
+  display: flex;
+  flex-direction: column;
+`;
+var StyledCustomInput2 = (0, import_styled_components3.styled)(import_design_system3.Input)`
+  width: 100%;
+  margin-right: 10px;
+`;
+var StyledInputWrapper2 = (0, import_styled_components3.styled)(import_design_system3.Box)`
+  display: flex;
+`;
+var StyledListWrapper = (0, import_styled_components3.styled)(import_design_system3.Box)`
+  margin-bottom: 15px;
+`;
+
+// src/components/StringList/SortableList/SortableList.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_core = require("@dnd-kit/core");
+var import_sortable2 = require("@dnd-kit/sortable");
+
+// src/components/StringList/SortableList/components/SortableItem/SortableItem.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_sortable = require("@dnd-kit/sortable");
+var import_design_system4 = require("@adminjs/design-system");
+
+// src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx
+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`
+  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 DragButton = import_styled_components4.styled.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 } = (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" })));
+};
+
+// src/components/StringList/SortableList/components/SortableItem/SortableItem.tsx
+var SortableItemContext = (0, import_react3.createContext)({
+  attributes: {},
+  listeners: void 0,
+  ref() {
+  }
+});
+function SortableItem({
+  children,
+  id,
+  onDelete
+}) {
+  const { attributes, isDragging, listeners, setNodeRef, setActivatorNodeRef } = (0, import_sortable.useSortable)({ id });
+  const context = (0, import_react3.useMemo)(
+    () => ({
+      attributes,
+      listeners,
+      ref: setActivatorNodeRef
+    }),
+    [attributes, listeners, setActivatorNodeRef]
+  );
+  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(
+    import_design_system4.Button,
+    {
+      variant: "outlined",
+      color: "danger",
+      size: "icon",
+      onClick: (e) => onDelete(e, id)
+    },
+    /* @__PURE__ */ import_react3.default.createElement(import_design_system4.Icon, { icon: "X", color: "red" })
+  )));
+}
+
+// src/components/StringList/SortableList/styles.ts
+var import_styled_components5 = require("@adminjs/design-system/styled-components");
+var StyledListWrapper2 = import_styled_components5.styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0;
+  list-style: none;
+`;
+
+// src/components/StringList/SortableList/SortableList.tsx
+var dropAnimationConfig = {
+  sideEffects: (0, import_core.defaultDropAnimationSideEffects)({
+    styles: {
+      active: {
+        opacity: "0.4"
+      }
+    }
+  })
+};
+function SortableList({
+  items,
+  onChange,
+  renderItem
+}) {
+  const [active, setActive] = (0, import_react4.useState)(null);
+  const activeItem = (0, import_react4.useMemo)(
+    () => items.find((item) => item.id === active?.id),
+    [active, items]
+  );
+  const sensors = (0, import_core.useSensors)(
+    (0, import_core.useSensor)(import_core.PointerSensor),
+    (0, import_core.useSensor)(import_core.KeyboardSensor, {
+      coordinateGetter: import_sortable2.sortableKeyboardCoordinates
+    })
+  );
+  return /* @__PURE__ */ import_react4.default.createElement(
+    import_core.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((0, import_sortable2.arrayMove)(items, activeIndex, overIndex));
+        }
+        setActive(null);
+      },
+      onDragCancel: () => {
+        setActive(null);
+      }
+    },
+    /* @__PURE__ */ import_react4.default.createElement(import_sortable2.SortableContext, { items, strategy: import_sortable2.verticalListSortingStrategy }, /* @__PURE__ */ import_react4.default.createElement(StyledListWrapper2, { role: "application" }, items.map((item, index) => /* @__PURE__ */ import_react4.default.createElement(import_react4.Fragment, { key: index }, renderItem(item))))),
+    /* @__PURE__ */ import_react4.default.createElement(import_core.DragOverlay, { dropAnimation: dropAnimationConfig }, activeItem ? renderItem(activeItem) : null)
+  );
+}
+SortableList.Item = SortableItem;
+
+// src/components/StringList/StringList.tsx
+var StringList = ({ record, onChange, property }) => {
+  const stringListValue = record.params?.[property.path] ?? property.props.value ?? "";
+  const initialList = stringListValue ? prepareDataForList(stringListValue) : [];
+  const [inputValue, setInputValue] = (0, import_react5.useState)("");
+  const [list, setList] = (0, import_react5.useState)(initialList);
+  const serializedData = prepareDataForDatabase(list);
+  (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(
+    SortableList,
+    {
+      items: list,
+      onChange: setList,
+      renderItem: (item) => /* @__PURE__ */ import_react5.default.createElement(SortableList.Item, { id: item.id, onDelete: handleDeleteButton }, item.value)
+    }
+  )), /* @__PURE__ */ import_react5.default.createElement(StyledInputWrapper2, null, /* @__PURE__ */ import_react5.default.createElement(
+    import_design_system5.Input,
+    {
+      id: "stringList",
+      name: property.path,
+      value: serializedData,
+      hidden: true
+    }
+  ), /* @__PURE__ */ import_react5.default.createElement(
+    StyledCustomInput2,
+    {
+      id: "custom",
+      name: "customInput",
+      value: inputValue,
+      onChange: handleInput,
+      onKeyPress: handleEnterPress
+    }
+  ), /* @__PURE__ */ import_react5.default.createElement(import_design_system5.Button, { 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("|");
+  }
+  function prepareDataForList(str) {
+    return str.split("|").map((item) => createListObject(item));
+  }
+  function createListObject(value) {
+    return {
+      id: `${Date.now()}-${Math.floor(Math.random() * 1e3)}`,
+      value
+    };
+  }
+};
+var StringList_default = StringList;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CustomSlug,
+  StringList
+});

package/dist/index.d.cts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { EditPropertyProps } from 'adminjs';
+
+type CustomSlugTypes = Omit<EditPropertyProps, "where" | "resource">;
+declare const CustomSlug: FC<CustomSlugTypes>;
+
+type StringListTypes = Omit<EditPropertyProps, "where" | "resource">;
+declare const StringList: FC<StringListTypes>;
+
+export { CustomSlug, StringList };

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { EditPropertyProps } from 'adminjs';
+
+type CustomSlugTypes = Omit<EditPropertyProps, "where" | "resource">;
+declare const CustomSlug: FC<CustomSlugTypes>;
+
+type StringListTypes = Omit<EditPropertyProps, "where" | "resource">;
+declare const StringList: FC<StringListTypes>;
+
+export { CustomSlug, StringList };

package/dist/index.js

@@ -0,0 +1,314 @@
+// src/components/CustomSlug/CustomSlug.tsx
+import React, {
+  useEffect,
+  useState
+} from "react";
+import { ThemeProvider } from "styled-components";
+import { theme, Label } from "@adminjs/design-system";
+
+// 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: void 0,
+    lower: true,
+    locale: "vi",
+    trim: true
+  });
+};
+
+// src/components/CustomSlug/styles.ts
+import { styled } from "@adminjs/design-system/styled-components";
+import { Button, Box, Input } from "@adminjs/design-system";
+var StyledInputWrapper = styled(Box)`
+  display: flex;
+  margin-bottom: 40px;
+`;
+var StyledCustomInput = styled(Input)`
+  width: 100%;
+  margin-right: 10px;
+`;
+var StyledGenerateButton = styled(Button)`
+  white-space: nowrap;
+`;
+
+// src/components/CustomSlug/CustomSlug.tsx
+var CustomSlug = ({ property, record, onChange }) => {
+  const [inputValue, setInputValue] = useState(record.params.slug);
+  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(
+    StyledCustomInput,
+    {
+      id: property.path,
+      name: property.path,
+      value: inputValue,
+      onChange: handleInput
+    }
+  ), /* @__PURE__ */ React.createElement(StyledGenerateButton, { variant: "outlined", onClick: generateSlug }, "Generate Slug")));
+  function handleInput(e) {
+    setInputValue(e.target.value);
+  }
+  function generateSlug(e) {
+    e.preventDefault();
+    const title = record.title;
+    setInputValue(slugifyTitle(title));
+  }
+};
+var CustomSlug_default = CustomSlug;
+
+// src/components/StringList/StringList.tsx
+import React5, {
+  useState as useState3,
+  useEffect as useEffect2
+} 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";
+var StyledWrapper = styled2(Box2)`
+  display: flex;
+  flex-direction: column;
+`;
+var StyledCustomInput2 = styled2(Input2)`
+  width: 100%;
+  margin-right: 10px;
+`;
+var StyledInputWrapper2 = styled2(Box2)`
+  display: flex;
+`;
+var StyledListWrapper = styled2(Box2)`
+  margin-bottom: 15px;
+`;
+
+// src/components/StringList/SortableList/SortableList.tsx
+import React4, { Fragment, useMemo as useMemo2, useState as useState2 } 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 React3, { 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 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`
+  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 DragButton = styled3.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__ */ 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" })));
+};
+
+// 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__ */ 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(
+    Button2,
+    {
+      variant: "outlined",
+      color: "danger",
+      size: "icon",
+      onClick: (e) => onDelete(e, id)
+    },
+    /* @__PURE__ */ React3.createElement(Icon, { icon: "X", color: "red" })
+  )));
+}
+
+// src/components/StringList/SortableList/styles.ts
+import { styled as styled4 } from "@adminjs/design-system/styled-components";
+var StyledListWrapper2 = styled4.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] = useState2(null);
+  const activeItem = useMemo2(
+    () => items.find((item) => item.id === active?.id),
+    [active, items]
+  );
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  return /* @__PURE__ */ React4.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__ */ React4.createElement(SortableContext, { items, strategy: verticalListSortingStrategy }, /* @__PURE__ */ React4.createElement(StyledListWrapper2, { role: "application" }, items.map((item, index) => /* @__PURE__ */ React4.createElement(Fragment, { key: index }, renderItem(item))))),
+    /* @__PURE__ */ React4.createElement(DragOverlay, { dropAnimation: dropAnimationConfig }, activeItem ? renderItem(activeItem) : null)
+  );
+}
+SortableList.Item = SortableItem;
+
+// src/components/StringList/StringList.tsx
+var StringList = ({ record, onChange, property }) => {
+  const stringListValue = record.params?.[property.path] ?? property.props.value ?? "";
+  const initialList = stringListValue ? prepareDataForList(stringListValue) : [];
+  const [inputValue, setInputValue] = useState3("");
+  const [list, setList] = useState3(initialList);
+  const serializedData = prepareDataForDatabase(list);
+  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(
+    SortableList,
+    {
+      items: list,
+      onChange: setList,
+      renderItem: (item) => /* @__PURE__ */ React5.createElement(SortableList.Item, { id: item.id, onDelete: handleDeleteButton }, item.value)
+    }
+  )), /* @__PURE__ */ React5.createElement(StyledInputWrapper2, null, /* @__PURE__ */ React5.createElement(
+    Input3,
+    {
+      id: "stringList",
+      name: property.path,
+      value: serializedData,
+      hidden: true
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    StyledCustomInput2,
+    {
+      id: "custom",
+      name: "customInput",
+      value: inputValue,
+      onChange: handleInput,
+      onKeyPress: handleEnterPress
+    }
+  ), /* @__PURE__ */ React5.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("|");
+  }
+  function prepareDataForList(str) {
+    return str.split("|").map((item) => createListObject(item));
+  }
+  function createListObject(value) {
+    return {
+      id: `${Date.now()}-${Math.floor(Math.random() * 1e3)}`,
+      value
+    };
+  }
+};
+var StringList_default = StringList;
+export {
+  CustomSlug_default as CustomSlug,
+  StringList_default as StringList
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@rulab/adminjs-components",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "private": false,
+  "type": "module",
+  "keywords": ["adminjs"],
+  "repository": {
+    "url": "https://github.com/rulab/adminjs-components"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "lint": "tsc"
+  },
+  "dependencies": {
+    "@adminjs/design-system": "^4.1.1",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "adminjs": "^7.8.1",
+    "react": "^18.2.0",
+    "slugify": "^1.6.6",
+    "styled-components": "^6.1.11"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.61",
+    "eslint": "^8.57.0",
+    "tsup": "^8.1.0",
+    "typescript": "^5.3.2"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "packageManager": "pnpm@8.15.6"
+}

package/src/components/CustomSlug/CustomSlug.tsx

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

package/src/components/CustomSlug/index.ts

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

package/src/components/CustomSlug/styles.ts

@@ -0,0 +1,18 @@
+// @ts-ignore
+import { styled } from "@adminjs/design-system/styled-components";
+// @ts-ignore
+import { Button, Box, Input } from "@adminjs/design-system";
+
+export const StyledInputWrapper = styled(Box)`
+  display: flex;
+  margin-bottom: 40px;
+`;
+
+export const StyledCustomInput = styled(Input)`
+  width: 100%;
+  margin-right: 10px;
+`;
+
+export const StyledGenerateButton = styled(Button)`
+  white-space: nowrap;
+`;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+import type { DraggableSyntheticListeners } from '@dnd-kit/core';
+
+export interface DragContext {
+  attributes: Record<string, any>;
+  listeners: DraggableSyntheticListeners;
+  ref(node: HTMLElement | null): void;
+}

package/src/components/StringList/SortableList/components/index.ts

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

package/src/components/StringList/SortableList/index.ts

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

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

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

package/src/components/StringList/StringList.tsx

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

package/src/components/StringList/index.ts

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

package/src/components/StringList/styles.ts

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

package/src/components/index.ts

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

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./components/index.js";

package/src/utils/index.ts

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

package/src/utils/slugifyImport.ts

@@ -0,0 +1,4 @@
+// This is a fix of typescript module import error
+import slugify from "slugify";
+
+export default slugify as unknown as typeof slugify.default;

package/src/utils/slugifyTitle.ts

@@ -0,0 +1,11 @@
+import slugify from "./slugifyImport.js";
+
+export const slugifyTitle = (title: string) => {
+  return slugify(title, {
+    replacement: "-",
+    remove: undefined,
+    lower: true,
+    locale: "vi",
+    trim: true,
+  });
+};

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "lib": ["es2022", "dom", "dom.iterable"],
+    "jsx": "react",
+    "noEmit": true
+  }
+}