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

package/LICENSE

@@ -1,21 +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.
+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/dist/components/ColorStatus/ColorStatusEdit.d.ts

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

package/dist/components/ColorStatus/ColorStatusEdit.js

@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from "react";
+import Select from "react-select";
+import chroma from "chroma-js";
+import { ColorStatusWrapper, Label } from "./styles.js";
+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/dist/components/ColorStatus/ColorStatusList.d.ts

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

package/dist/components/ColorStatus/ColorStatusList.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { ColorStatusBadge } from "./styles.js";
+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/dist/components/ColorStatus/ColorStatusShow.d.ts

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

package/dist/components/ColorStatus/ColorStatusShow.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { ColorStatusBadgeWrapper, ColorStatusBadge, ShowLabel } from "./styles.js";
+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/dist/components/ColorStatus/index.d.ts

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

package/dist/components/ColorStatus/index.js

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

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

@@ -0,0 +1,5 @@
+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/dist/components/ColorStatus/styles.js

@@ -0,0 +1,25 @@
+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/dist/components/ColorStatus/types.d.ts

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

package/dist/components/ColorStatus/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Editor/Editor.d.ts

@@ -0,0 +1,11 @@
+export default Editor;
+declare function Editor({ property, record, onChangeAdmin, editorId }: {
+    property: any;
+    record: any;
+    onChangeAdmin: any;
+    editorId: any;
+}): React.FunctionComponentElement<{
+    children?: React.ReactNode;
+    theme: import("styled-components").DefaultTheme | ((outerTheme?: import("styled-components").DefaultTheme | undefined) => import("styled-components").DefaultTheme);
+}>;
+import React from "react";

package/dist/components/Editor/Editor.js

@@ -0,0 +1,33 @@
+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.js";
+import { EDITOR_TOOLS } from "./config.js";
+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/dist/components/Editor/EditorList.d.ts

@@ -0,0 +1,9 @@
+export default EditorList;
+declare function EditorList({ property, record }: {
+    property: any;
+    record: any;
+}): React.FunctionComponentElement<{
+    children?: React.ReactNode;
+    theme: import("styled-components").DefaultTheme | ((outerTheme?: import("styled-components").DefaultTheme | undefined) => import("styled-components").DefaultTheme);
+}>;
+import React from "react";

package/dist/components/Editor/EditorList.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { theme } from "@adminjs/design-system";
+import { ThemeProvider } from "styled-components";
+import { parseHtml } from "../../utils/parseHtml.js";
+import { StyledEditorViewWrapper } from "./styles.js";
+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/dist/components/Editor/EditorShow.d.ts

@@ -0,0 +1,9 @@
+export default EditorShow;
+declare function EditorShow({ property, record }: {
+    property: any;
+    record: any;
+}): React.FunctionComponentElement<{
+    children?: React.ReactNode;
+    theme: import("styled-components").DefaultTheme | ((outerTheme?: import("styled-components").DefaultTheme | undefined) => import("styled-components").DefaultTheme);
+}>;
+import React from "react";

package/dist/components/Editor/EditorShow.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { ThemeProvider } from "styled-components";
+import { theme } from "@adminjs/design-system";
+import { parseHtml } from "../../utils/parseHtml.js";
+import { StyledEditorShowWrapper, StyledShowLabel } from "./styles.js";
+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/dist/components/Editor/config.d.ts

@@ -0,0 +1,29 @@
+import Quote from "@editorjs/quote";
+import Table from "@editorjs/table";
+export declare const EDITOR_TOOLS: {
+    paragraph: {
+        class: any;
+        inlineToolbar: boolean;
+    };
+    list: {
+        class: any;
+        inlineToolbar: boolean;
+    };
+    header: {
+        class: any;
+        config: {
+            placeholder: string;
+            levels: number[];
+            defaultLevel: number;
+        };
+    };
+    table: {
+        class: typeof Table;
+        inlineToolbar: boolean;
+    };
+    quote: {
+        class: typeof Quote;
+        inlineToolbar: boolean;
+    };
+    audioPlayer: any;
+};

package/dist/components/Editor/config.js

@@ -1,11 +1,34 @@
 import Header from "@editorjs/header";
-import Paragraph from "@editorjs/paragraph";
 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: List,
-    header: Header,
+    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,
 };

package/dist/components/Editor/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Editor.jsx";
+export * from "./EditorShow.jsx";
+export * from "./EditorList.jsx";

package/dist/components/Editor/index.js

@@ -1 +1,3 @@
-export { default } from "./Editor.jsx";
+export * from "./Editor.jsx";
+export * from "./EditorShow.jsx";
+export * from "./EditorList.jsx";

package/dist/components/Editor/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledLabel: any;
+export declare const StyledShowLabel: any;
+export declare const StyledEditorWrapper: any;
+export declare const StyledEditorViewWrapper: any;
+export declare const StyledEditorShowWrapper: any;
+export declare const StyledEditor: any;

package/dist/components/Editor/styles.js

@@ -1,64 +1,145 @@
 import { Box } from "@adminjs/design-system";
 import { styled } from "@adminjs/design-system/styled-components";
-export const Label = styled.div `
-  font-size: 12px;
-  margin-bottom: 8px;
+export const StyledLabel = styled.div `
+  font-size: 12px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
 `;
-export const EditorWrapper = styled(Box) `
-  padding: 12px;
-  border: 1px solid rgb(187, 195, 203);
+export const StyledShowLabel = styled(StyledLabel) `
+  color: rgb(137, 138, 154);
+  font-weight: 300;
 `;
-export const StyledEditor = styled.div `
-  .cdx-block,
-  .ce-header {
-    padding-left: 58px;
-  }
-
-  .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;
-  }
+export const StyledEditorWrapper = styled(Box) `
+  padding: 12px;
+  margin-bottom: 24px;
+  border: 1px solid rgb(187, 195, 203);
+`;
+export const StyledEditorViewWrapper = styled(Box) `
+  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;
+  }
+`;
+export const StyledEditorShowWrapper = styled(StyledEditorViewWrapper) `
+  margin-bottom: 24px;
+`;
+export const StyledEditor = styled.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;
+  }
 `;

package/dist/components/Slug/SlugEdit.d.ts

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

package/dist/components/Slug/SlugEdit.js

@@ -0,0 +1,27 @@
+import React, { useEffect, useState, } from "react";
+import { ThemeProvider } from "styled-components";
+import { theme } from "@adminjs/design-system";
+import { slugifyTitle } from "../../utils/index.js";
+import { StyledCustomInput, StyledGenerateButton, StyledInputWrapper, StyledLabel, } from "./styles.js";
+const SlugEdit = ({ property, record, resource, onChange, }) => {
+    const [inputValue, setInputValue] = useState(record.params.slug);
+    useEffect(() => {
+        onChange(property.path, inputValue);
+    }, [inputValue]);
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(StyledLabel, { htmlFor: "customSlug" }, property.path),
+        React.createElement(StyledInputWrapper, null,
+            React.createElement(StyledCustomInput, { id: property.path, name: property.path, value: inputValue, onChange: handleInput }),
+            React.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));
+        }
+    }
+};
+export default SlugEdit;

package/dist/components/Slug/SlugFeature.d.ts

@@ -0,0 +1,7 @@
+import { ComponentLoader, FeatureType } from "adminjs";
+type SlugOptions = {
+    componentLoader: ComponentLoader;
+    key: string;
+};
+declare const SlugFeature: (config: SlugOptions) => FeatureType;
+export default SlugFeature;

package/dist/components/Slug/SlugFeature.js

@@ -0,0 +1,21 @@
+import { buildFeature } from "adminjs";
+import { bundleComponent } from "../../utils/bundle-component.js";
+const COMPONENT_NAME = 'Slug';
+const SlugFeature = (config) => {
+    const { componentLoader, key } = config;
+    const slugFeature = () => {
+        const editComponent = bundleComponent(componentLoader, COMPONENT_NAME, 'SlugEdit.js');
+        return buildFeature({
+            properties: {
+                [key]: {
+                    isVisible: { show: false, edit: true, list: false, filter: false },
+                    components: {
+                        edit: editComponent,
+                    },
+                },
+            },
+        });
+    };
+    return slugFeature();
+};
+export default SlugFeature;

package/dist/components/Slug/index.d.ts

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

package/dist/components/Slug/index.js

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

package/dist/components/Slug/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledInputWrapper: any;
+export declare const StyledCustomInput: any;
+export declare const StyledGenerateButton: any;
+export declare const StyledLabel: any;