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

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";
+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";
+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";
+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";
+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/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";
+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/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";
+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/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

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

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

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

@@ -0,0 +1,145 @@
+import { Box } from "@adminjs/design-system";
+import { styled } from "@adminjs/design-system/styled-components";
+export const StyledLabel = styled.div `
+  font-size: 12px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
+`;
+export const StyledShowLabel = styled(StyledLabel) `
+  color: rgb(137, 138, 154);
+  font-weight: 300;
+`;
+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";
+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";
+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;

package/dist/components/Slug/styles.js

@@ -0,0 +1,20 @@
+// @ts-ignore
+import { styled } from "@adminjs/design-system/styled-components";
+// @ts-ignore
+import { Box, Button, 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;
+`;
+export const StyledLabel = styled.div `
+  font-size: 12px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
+`;

package/dist/components/StringList/SortableList/SortableList.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { ReactNode } from "react";
+import { SortableItem } from "./components/index.js";
+import type { 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;
+}
+export declare function SortableList<T extends BaseItem>({ items, onChange, renderItem, }: Props<T>): React.JSX.Element;
+export declare namespace SortableList {
+    var Item: typeof SortableItem;
+}
+export {};

package/dist/components/StringList/SortableList/SortableList.js

@@ -0,0 +1,37 @@
+import React, { Fragment, useMemo, useState } from "react";
+import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, DragOverlay, defaultDropAnimationSideEffects, } from "@dnd-kit/core";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { SortableItem } from "./components/index.js";
+import { StyledListWrapper } from "./styles.js";
+const dropAnimationConfig = {
+    sideEffects: defaultDropAnimationSideEffects({
+        styles: {
+            active: {
+                opacity: "0.4",
+            },
+        },
+    }),
+};
+export function SortableList({ items, onChange, renderItem, }) {
+    const [active, setActive] = useState(null);
+    const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    return (React.createElement(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);
+        } },
+        React.createElement(SortableContext, { items: items, strategy: verticalListSortingStrategy },
+            React.createElement(StyledListWrapper, { role: "application" }, items.map((item, index) => (React.createElement(Fragment, { key: index }, renderItem(item)))))),
+        React.createElement(DragOverlay, { dropAnimation: dropAnimationConfig }, activeItem ? renderItem(activeItem) : null)));
+}
+SortableList.Item = SortableItem;

package/dist/components/StringList/SortableList/components/SortableItem/DragHandle.d.ts

@@ -0,0 +1,7 @@
+import { Context, FC } from "react";
+import type { DragContext } from "./types.js";
+interface DragHandlePropsType {
+    context: Context<DragContext>;
+}
+export declare const DragHandle: FC<DragHandlePropsType>;
+export {};

package/dist/components/StringList/SortableList/components/SortableItem/DragHandle.js

@@ -0,0 +1,8 @@
+import React, { useContext } from "react";
+import { StyledDragButton } from "./styles.js";
+export const DragHandle = ({ context }) => {
+    const { attributes, listeners, ref } = useContext(context);
+    return (React.createElement(StyledDragButton, { ...attributes, ...listeners, ref: ref },
+        React.createElement("svg", { viewBox: "0 0 20 20", width: "13" },
+            React.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" }))));
+};

package/dist/components/StringList/SortableList/components/SortableItem/SortableItem.d.ts

@@ -0,0 +1,8 @@
+import React, { ChangeEvent } from 'react';
+import type { PropsWithChildren } from 'react';
+interface SortableItemPropsType {
+    id: string;
+    onDelete: (e: ChangeEvent<HTMLInputElement>, id: string) => void;
+}
+export declare function SortableItem({ children, id, onDelete, }: PropsWithChildren<SortableItemPropsType>): React.JSX.Element;
+export {};