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

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from \"./components/index.js\";\r\nexport { parseHtml } from \"./utils/parseHtml.js\";\r\n"],"mappings":"AAAA,cAAc;AACd,SAAS,iBAAiB;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rulab/adminjs-components",
-  "version": "0.0.13",
+  "version": "0.1.0-alpha.2",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -12,15 +12,11 @@
   "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",
-    "@editorjs/editorjs": "^2.30.2",
+    "@editorjs/editorjs": "2.30.2",
     "@editorjs/header": "^2.8.7",
     "@editorjs/list": "^1.9.0",
     "@editorjs/paragraph": "^2.11.6",
@@ -46,5 +42,13 @@
   "engines": {
     "node": ">=18"
   },
-  "packageManager": "pnpm@8.15.6"
-}
+  "files": [
+    "dist",
+    "src/components"
+  ],
+  "packageManager": "pnpm@8.15.6",
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "lint": "tsc"
+  }
+}

package/src/components/ColorStatus/ColorStatusEdit.tsx

@@ -1,94 +1,94 @@
-import React, { FC, useState, useEffect } from "react";
-
-import { EditPropertyProps } from "adminjs";
-import Select, { MultiValue, SingleValue, StylesConfig } from "react-select";
-import chroma from "chroma-js";
-
-import { ColorStatusWrapper, Label } from "./styles";
-
-import type { AvailableValueType } from "./types";
-
-type ColorStatusTypes = Omit<EditPropertyProps, "where" | "resource">;
-
-const dot = (color = "transparent") => ({
-  alignItems: "center",
-  display: "flex",
-
-  ":before": {
-    backgroundColor: color,
-    borderRadius: 10,
-    content: '" "',
-    display: "block",
-    marginRight: 8,
-    height: 10,
-    width: 10,
-  },
-});
-
-const colorStyles: StylesConfig<AvailableValueType> = {
-  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()
-          : undefined,
-      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) }),
-};
-
-const ColorStatus: FC<ColorStatusTypes> = ({ property, record, onChange }) => {
-  const availableValues = property.availableValues as AvailableValueType[];
-
-  const currentOption = availableValues.find(
-    (item) => item.value === record.params[property.path],
-  ) as AvailableValueType;
-
-  const [selectOption, setCurrentOption] = useState<
-    SingleValue<AvailableValueType> | undefined
-  >(currentOption);
-
-  const handleSelectChange = (
-    option: SingleValue<AvailableValueType> | MultiValue<AvailableValueType>,
-  ) => {
-    setCurrentOption(option as SingleValue<AvailableValueType>);
-  };
-
-  useEffect(() => {
-    onChange(property.path, selectOption?.value);
-  }, [selectOption]);
-
-  return (
-    <ColorStatusWrapper>
-      <Label>{property.path}</Label>
-      <Select
-        className="basic-single"
-        classNamePrefix="select"
-        defaultValue={selectOption ?? availableValues[0]}
-        onChange={handleSelectChange}
-        isClearable={true}
-        name="color"
-        options={availableValues}
-        styles={colorStyles}
-      />
-    </ColorStatusWrapper>
-  );
-};
-
-export default ColorStatus;
+import React, { FC, useState, useEffect } from "react";
+
+import { EditPropertyProps } from "adminjs";
+import Select, { MultiValue, SingleValue, StylesConfig } from "react-select";
+import chroma from "chroma-js";
+
+import { ColorStatusWrapper, Label } from "./styles";
+
+import type { AvailableValueType } from "./types";
+
+type ColorStatusTypes = Omit<EditPropertyProps, "where" | "resource">;
+
+const dot = (color = "transparent") => ({
+  alignItems: "center",
+  display: "flex",
+
+  ":before": {
+    backgroundColor: color,
+    borderRadius: 10,
+    content: '" "',
+    display: "block",
+    marginRight: 8,
+    height: 10,
+    width: 10,
+  },
+});
+
+const colorStyles: StylesConfig<AvailableValueType> = {
+  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()
+          : undefined,
+      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) }),
+};
+
+const ColorStatus: FC<ColorStatusTypes> = ({ property, record, onChange }) => {
+  const availableValues = property.availableValues as AvailableValueType[];
+
+  const currentOption = availableValues.find(
+    (item) => item.value === record.params[property.path],
+  ) as AvailableValueType;
+
+  const [selectOption, setCurrentOption] = useState<
+    SingleValue<AvailableValueType> | undefined
+  >(currentOption);
+
+  const handleSelectChange = (
+    option: SingleValue<AvailableValueType> | MultiValue<AvailableValueType>,
+  ) => {
+    setCurrentOption(option as SingleValue<AvailableValueType>);
+  };
+
+  useEffect(() => {
+    onChange(property.path, selectOption?.value);
+  }, [selectOption]);
+
+  return (
+    <ColorStatusWrapper>
+      <Label>{property.path}</Label>
+      <Select
+        className="basic-single"
+        classNamePrefix="select"
+        defaultValue={selectOption ?? availableValues[0]}
+        onChange={handleSelectChange}
+        isClearable={true}
+        name="color"
+        options={availableValues}
+        styles={colorStyles}
+      />
+    </ColorStatusWrapper>
+  );
+};
+
+export default ColorStatus;

package/src/components/ColorStatus/ColorStatusList.tsx

@@ -1,20 +1,20 @@
-import React, { FC } from "react";
-import { ShowPropertyProps } from "adminjs";
-
-import { ColorStatusBadge } from "./styles";
-
-import type { AvailableValueType } from "./types";
-
-const ColorStatusList: FC<ShowPropertyProps> = ({ property, record }) => {
-  const currentOption = property.availableValues?.find(
-    (item) => item.value === record.params[property.path],
-  ) as AvailableValueType;
-
-  return (
-    <ColorStatusBadge color={currentOption.color}>
-      {record.params[property.path]}
-    </ColorStatusBadge>
-  );
-};
-
-export default ColorStatusList;
+import React, { FC } from "react";
+import { ShowPropertyProps } from "adminjs";
+
+import { ColorStatusBadge } from "./styles";
+
+import type { AvailableValueType } from "./types";
+
+const ColorStatusList: FC<ShowPropertyProps> = ({ property, record }) => {
+  const currentOption = property.availableValues?.find(
+    (item) => item.value === record.params[property.path],
+  ) as AvailableValueType;
+
+  return (
+    <ColorStatusBadge color={currentOption.color}>
+      {record.params[property.path]}
+    </ColorStatusBadge>
+  );
+};
+
+export default ColorStatusList;

package/src/components/ColorStatus/ColorStatusShow.tsx

@@ -1,23 +1,23 @@
-import React, { FC } from "react";
-import { ShowPropertyProps } from "adminjs";
-
-import { ColorStatusBadgeWrapper, ColorStatusBadge, ShowLabel } from "./styles";
-
-import type { AvailableValueType } from "./types";
-
-const ColorStatusShow: FC<ShowPropertyProps> = ({ property, record }) => {
-  const currentOption = property.availableValues?.find(
-    (item) => item.value === record.params[property.path],
-  ) as AvailableValueType;
-
-  return (
-    <ColorStatusBadgeWrapper>
-      <ShowLabel>{property.path}</ShowLabel>
-      <ColorStatusBadge color={currentOption.color}>
-        {record.params[property.path]}
-      </ColorStatusBadge>
-    </ColorStatusBadgeWrapper>
-  );
-};
-
-export default ColorStatusShow;
+import React, { FC } from "react";
+import { ShowPropertyProps } from "adminjs";
+
+import { ColorStatusBadgeWrapper, ColorStatusBadge, ShowLabel } from "./styles";
+
+import type { AvailableValueType } from "./types";
+
+const ColorStatusShow: FC<ShowPropertyProps> = ({ property, record }) => {
+  const currentOption = property.availableValues?.find(
+    (item) => item.value === record.params[property.path],
+  ) as AvailableValueType;
+
+  return (
+    <ColorStatusBadgeWrapper>
+      <ShowLabel>{property.path}</ShowLabel>
+      <ColorStatusBadge color={currentOption.color}>
+        {record.params[property.path]}
+      </ColorStatusBadge>
+    </ColorStatusBadgeWrapper>
+  );
+};
+
+export default ColorStatusShow;

package/src/components/ColorStatus/index.ts

@@ -1,3 +1,3 @@
-export * from "./ColorStatusEdit.js";
-export * from "./ColorStatusShow.js";
-export * from "./ColorStatusList.js";
+export * from "./ColorStatusEdit.js";
+export * from "./ColorStatusShow.js";
+export * from "./ColorStatusList.js";

package/src/components/ColorStatus/styles.ts

@@ -1,30 +1,30 @@
-import { styled } from "@adminjs/design-system/styled-components";
-
-export const ColorStatusWrapper = styled.div`
-  margin-bottom: 24px;
-`;
-
-export const Label = styled.div`
-  font-size: 12px;
-  margin-bottom: 8px;
-`;
-
-export const ShowLabel = styled.div`
-  font-size: 12px;
-  margin-bottom: 8px;
-  color: rgb(137, 138, 154);
-`;
-
-export const ColorStatusBadgeWrapper = styled.div`
-  margin-bottom: 20px;
-`;
-
-export const ColorStatusBadge = styled.div`
-  background-color: ${(props: any) => props.color};
-  width: fit-content;
-  padding: 5px 10px;
-  border-radius: 20px;
-  font-size: 12px;
-  color: white;
-  white-space: nowrap;
-`;
+import { styled } from "@adminjs/design-system/styled-components";
+
+export const ColorStatusWrapper = styled.div`
+  margin-bottom: 24px;
+`;
+
+export const Label = styled.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+`;
+
+export const ShowLabel = styled.div`
+  font-size: 12px;
+  margin-bottom: 8px;
+  color: rgb(137, 138, 154);
+`;
+
+export const ColorStatusBadgeWrapper = styled.div`
+  margin-bottom: 20px;
+`;
+
+export const ColorStatusBadge = styled.div`
+  background-color: ${(props: any) => props.color};
+  width: fit-content;
+  padding: 5px 10px;
+  border-radius: 20px;
+  font-size: 12px;
+  color: white;
+  white-space: nowrap;
+`;

package/src/components/ColorStatus/types.ts

@@ -1,5 +1,5 @@
-export type AvailableValueType = {
-  value: string;
-  label: string;
-  color: string;
-};
+export type AvailableValueType = {
+  value: string;
+  label: string;
+  color: string;
+};

package/src/components/Editor/Editor.jsx

@@ -1,49 +1,49 @@
-import React, { memo, useState, useEffect, useRef } from "react";
-import { ThemeProvider } from "styled-components";
-import EditorJS from "@editorjs/editorjs";
-import { theme } from "@adminjs/design-system";
-
-import { StyledLabel, StyledEditor, StyledEditorWrapper } from "./styles";
-
-import { EDITOR_TOOLS } from "./config";
-
-const Editor = ({ property, record, onChangeAdmin, editorId }) => {
-  const [jsonData, setJsonData] = useState();
-  const isSavedData = Boolean(record.params[property.path]);
-
-  const ref = useRef();
-
-  useEffect(() => {
-    onChangeAdmin(property.path, jsonData);
-  }, [jsonData]);
-
-  useEffect(() => {
-    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 (
-    <ThemeProvider theme={theme}>
-      <StyledLabel>{property.path}</StyledLabel>
-      <StyledEditorWrapper>
-        <StyledEditor id={editorId} />
-      </StyledEditorWrapper>
-    </ThemeProvider>
-  );
-};
-
-export default Editor;
+import React, { memo, useState, useEffect, useRef } from "react";
+import { ThemeProvider } from "styled-components";
+import EditorJS from "@editorjs/editorjs";
+import { theme } from "@adminjs/design-system";
+
+import { StyledLabel, StyledEditor, StyledEditorWrapper } from "./styles";
+
+import { EDITOR_TOOLS } from "./config";
+
+const Editor = ({ property, record, onChangeAdmin, editorId }) => {
+  const [jsonData, setJsonData] = useState();
+  const isSavedData = Boolean(record.params[property.path]);
+
+  const ref = useRef();
+
+  useEffect(() => {
+    onChangeAdmin(property.path, jsonData);
+  }, [jsonData]);
+
+  useEffect(() => {
+    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 (
+    <ThemeProvider theme={theme}>
+      <StyledLabel>{property.path}</StyledLabel>
+      <StyledEditorWrapper>
+        <StyledEditor id={editorId} />
+      </StyledEditorWrapper>
+    </ThemeProvider>
+  );
+};
+
+export default Editor;

package/src/components/Editor/EditorList.jsx

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

package/src/components/Editor/EditorShow.jsx

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

package/src/components/Editor/config.ts

@@ -1,35 +1,35 @@
-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";
-// @ts-ignore
-import AudioPlayer from "editorjs-audio-player";
-
-export const 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,
-};
+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";
+// @ts-ignore
+import AudioPlayer from "editorjs-audio-player";
+
+export const 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,
+};