@rulab/adminjs-components 0.1.0-alpha.8 → 0.1.0-beta.1

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./components/index.js";
 export { parseHtml } from "./utils/parseHtml.js";
+export { getComponentLoader, setComponentLoader } from "./utils/component-loader.js";

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from "./components/index.js";
 export { parseHtml } from "./utils/parseHtml.js";
+export { getComponentLoader, setComponentLoader } from "./utils/component-loader.js";

package/dist/types/upload-provider.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="node" />
+export type UploadProviderFile = {
+    buffer: Buffer;
+    filename: string;
+    mimeType: string;
+};
+export type UploadProviderResult = {
+    url: string;
+    [key: string]: any;
+};
+export interface BaseProvider {
+    upload(file: UploadProviderFile): Promise<UploadProviderResult | string>;
+}

package/dist/utils/bundle-component.d.ts

@@ -1,2 +1,2 @@
 import type { ComponentLoader } from 'adminjs';
-export declare const bundleComponent: (loader: ComponentLoader, componentName: string, componentFile: string) => string;
+export declare const bundleComponent: (loader: ComponentLoader | undefined, componentName: string, componentFile: string) => string;

package/dist/utils/bundle-component.js

@@ -1,13 +1,10 @@
 import path from 'path';
 import * as url from 'url';
+import { getComponentLoader } from './component-loader.js';
 const dirname = url.fileURLToPath(new URL('.', import.meta.url));
-//const __filename = url.fileURLToPath(new URL('.', import.meta.url))
-//const __dirname = path.dirname(__filename)
-//const require = createRequire(import.meta.url)
-//const basePath = path.dirname(require.resolve('@rulab/adminjs-components'))
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const bundleComponent = (loader, componentName, componentFile) => {
-    const componentPath = path.join(dirname, '../dist/components', componentName, componentFile);
-    console.log('[bundleComponent] Registering:', componentPath);
-    return loader.add(componentName, componentPath);
+    const resolvedLoader = loader ?? getComponentLoader();
+    const componentPath = path.join(dirname, '../components', componentName, componentFile);
+    const componentId = componentFile.replace(/\.[^.]+$/, '');
+    return resolvedLoader.add(componentId, componentPath);
 };

package/dist/utils/component-loader.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentLoader } from "adminjs";
+export declare const setComponentLoader: (loader: ComponentLoader | unknown) => void;
+export declare const getComponentLoader: () => ComponentLoader;

package/dist/utils/component-loader.js

@@ -0,0 +1,10 @@
+let defaultComponentLoader = null;
+export const setComponentLoader = (loader) => {
+    defaultComponentLoader = loader;
+};
+export const getComponentLoader = () => {
+    if (!defaultComponentLoader) {
+        throw new Error("ComponentLoader is not set. Call setComponentLoader(loader) before using features without explicit loader.");
+    }
+    return defaultComponentLoader;
+};

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export { parseHtml } from "./parseHtml.js";
 export { slugifyTitle } from "./slugifyTitle.js";
+export { getComponentLoader, setComponentLoader } from "./component-loader.js";

package/dist/utils/index.js

@@ -1,2 +1,3 @@
 export { parseHtml } from "./parseHtml.js";
 export { slugifyTitle } from "./slugifyTitle.js";
+export { getComponentLoader, setComponentLoader } from "./component-loader.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rulab/adminjs-components",
-  "version": "0.1.0-alpha.8",
+  "version": "0.1.0-beta.1",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -10,14 +10,21 @@
     "adminjs"
   ],
   "repository": {
-    "url": "https://github.com/rulab/adminjs-components"
+    "url": "git+https://github.com/rulab/adminjs-components.git"
+  },
+  "scripts": {
+    "build": "tsc && node scripts/fix-import-extensions.js",
+    "build-tsup": "tsup",
+    "lint": "tsc"
   },
   "dependencies": {
     "@adminjs/design-system": "^4.1.1",
+    "@adminjs/upload": "^4.0.2",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@editorjs/editorjs": "2.30.2",
     "@editorjs/header": "^2.8.7",
+    "@editorjs/image": "^2.9.2",
     "@editorjs/list": "^1.9.0",
     "@editorjs/paragraph": "^2.11.6",
     "@editorjs/quote": "^2.7.2",
@@ -44,13 +51,7 @@
     "node": ">=18"
   },
   "files": [
-    "dist",
-    "src/components"
+    "dist"
   ],
-  "packageManager": "pnpm@8.15.6",
-  "scripts": {
-    "build": "tsc && node scripts/fix-import-extensions.js",
-    "build-tsup": "tsup",
-    "lint": "tsc"
-  }
-}
+  "packageManager": "pnpm@8.15.6"
+}

package/src/components/ColorStatus/ColorStatusEdit.d.ts

@@ -1,5 +0,0 @@
-import { FC } from "react";
-import { EditPropertyProps } from "adminjs";
-type ColorStatusTypes = Omit<EditPropertyProps, "where" | "resource">;
-declare const ColorStatus: FC<ColorStatusTypes>;
-export default ColorStatus;

package/src/components/ColorStatus/ColorStatusEdit.js

@@ -1,58 +0,0 @@
-import React, { useState, useEffect } from "react";
-import Select from "react-select";
-import chroma from "chroma-js";
-import { ColorStatusWrapper, Label } from "./styles";
-const dot = (color = "transparent") => ({
-    alignItems: "center",
-    display: "flex",
-    ":before": {
-        backgroundColor: color,
-        borderRadius: 10,
-        content: '" "',
-        display: "block",
-        marginRight: 8,
-        height: 10,
-        width: 10,
-    },
-});
-const 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()
-                    : 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 = ({ 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 (React.createElement(ColorStatusWrapper, null,
-        React.createElement(Label, null, property.path),
-        React.createElement(Select, { className: "basic-single", classNamePrefix: "select", defaultValue: selectOption ?? availableValues[0], onChange: handleSelectChange, isClearable: true, name: "color", options: availableValues, styles: colorStyles })));
-};
-export default ColorStatus;

package/src/components/ColorStatus/ColorStatusEdit.tsx

@@ -1,94 +0,0 @@
-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.d.ts

@@ -1,4 +0,0 @@
-import { FC } from "react";
-import { ShowPropertyProps } from "adminjs";
-declare const ColorStatusList: FC<ShowPropertyProps>;
-export default ColorStatusList;

package/src/components/ColorStatus/ColorStatusList.js

@@ -1,7 +0,0 @@
-import React from "react";
-import { ColorStatusBadge } from "./styles";
-const ColorStatusList = ({ property, record }) => {
-    const currentOption = property.availableValues?.find((item) => item.value === record.params[property.path]);
-    return (React.createElement(ColorStatusBadge, { color: currentOption.color }, record.params[property.path]));
-};
-export default ColorStatusList;

package/src/components/ColorStatus/ColorStatusList.tsx

@@ -1,20 +0,0 @@
-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.d.ts

@@ -1,4 +0,0 @@
-import { FC } from "react";
-import { ShowPropertyProps } from "adminjs";
-declare const ColorStatusShow: FC<ShowPropertyProps>;
-export default ColorStatusShow;

package/src/components/ColorStatus/ColorStatusShow.js

@@ -1,9 +0,0 @@
-import React from "react";
-import { ColorStatusBadgeWrapper, ColorStatusBadge, ShowLabel } from "./styles";
-const ColorStatusShow = ({ property, record }) => {
-    const currentOption = property.availableValues?.find((item) => item.value === record.params[property.path]);
-    return (React.createElement(ColorStatusBadgeWrapper, null,
-        React.createElement(ShowLabel, null, property.path),
-        React.createElement(ColorStatusBadge, { color: currentOption.color }, record.params[property.path])));
-};
-export default ColorStatusShow;

package/src/components/ColorStatus/ColorStatusShow.tsx

@@ -1,23 +0,0 @@
-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.d.ts

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

package/src/components/ColorStatus/index.js

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

package/src/components/ColorStatus/index.ts

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

package/src/components/ColorStatus/styles.d.ts

@@ -1,5 +0,0 @@
-export declare const ColorStatusWrapper: any;
-export declare const Label: any;
-export declare const ShowLabel: any;
-export declare const ColorStatusBadgeWrapper: any;
-export declare const ColorStatusBadge: any;

package/src/components/ColorStatus/styles.js

@@ -1,25 +0,0 @@
-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) => props.color};
-  width: fit-content;
-  padding: 5px 10px;
-  border-radius: 20px;
-  font-size: 12px;
-  color: white;
-  white-space: nowrap;
-`;

package/src/components/ColorStatus/styles.ts

@@ -1,30 +0,0 @@
-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.d.ts

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

package/src/components/ColorStatus/types.ts

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

package/src/components/Editor/Editor.d.ts

@@ -1,8 +0,0 @@
-export default Editor;
-declare function Editor({ property, record, onChangeAdmin, editorId }: {
-    property: any;
-    record: any;
-    onChangeAdmin: any;
-    editorId: any;
-}): React.JSX.Element;
-import React from "react";

package/src/components/Editor/Editor.js

@@ -1,36 +0,0 @@
-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 (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(StyledLabel, null, property.path),
-        React.createElement(StyledEditorWrapper, null,
-            React.createElement(StyledEditor, { id: editorId }))));
-};
-export default Editor;

package/src/components/Editor/Editor.jsx

@@ -1,49 +0,0 @@
-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.d.ts

@@ -1,6 +0,0 @@
-export default EditorList;
-declare function EditorList({ property, record }: {
-    property: any;
-    record: any;
-}): React.JSX.Element;
-import React from "react";

package/src/components/Editor/EditorList.js

@@ -1,11 +0,0 @@
-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 (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(StyledEditorViewWrapper, null, htmlContent && (React.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })))));
-};
-export default EditorList;

package/src/components/Editor/EditorList.jsx

@@ -1,22 +0,0 @@
-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.d.ts

@@ -1,6 +0,0 @@
-export default EditorShow;
-declare function EditorShow({ property, record }: {
-    property: any;
-    record: any;
-}): React.JSX.Element;
-import React from "react";

package/src/components/Editor/EditorShow.js

@@ -1,13 +0,0 @@
-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 (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(StyledEditorShowWrapper, null,
-            React.createElement(StyledShowLabel, null, property.path),
-            htmlContent && (React.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })))));
-};
-export default EditorShow;

package/src/components/Editor/EditorShow.jsx

@@ -1,24 +0,0 @@
-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;