@rulab/adminjs-components 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rulab/adminjs-components",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -25,12 +25,15 @@
     "@editorjs/list": "^1.9.0",
     "@editorjs/paragraph": "^2.11.6",
     "adminjs": "^7.8.1",
+    "chroma-js": "^3.0.0",
     "editorjs-html": "^3.4.3",
     "react": "^18.2.0",
+    "react-select": "^5.8.0",
     "slugify": "^1.6.6",
     "styled-components": "^6.1.11"
   },
   "devDependencies": {
+    "@types/chroma-js": "^2.4.4",
     "@types/node": "^20.11.24",
     "@types/react": "^18.2.61",
     "eslint": "^8.57.0",

package/src/components/ColorStatus/ColorStatusEdit.tsx

@@ -0,0 +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.colorStatus,
+  ) 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

@@ -0,0 +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.colorStatus,
+  ) as AvailableValueType;
+
+  return (
+    <ColorStatusBadge color={currentOption.color}>
+      {record.params.colorStatus}
+    </ColorStatusBadge>
+  );
+};
+
+export default ColorStatusList;

package/src/components/ColorStatus/ColorStatusShow.tsx

@@ -0,0 +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.colorStatus,
+  ) as AvailableValueType;
+
+  return (
+    <ColorStatusBadgeWrapper>
+      <ShowLabel>{property.path}</ShowLabel>
+      <ColorStatusBadge color={currentOption.color}>
+        {record.params.colorStatus}
+      </ColorStatusBadge>
+    </ColorStatusBadgeWrapper>
+  );
+};
+
+export default ColorStatusShow;

package/src/components/ColorStatus/index.ts

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

package/src/components/ColorStatus/styles.ts

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

package/src/components/ColorStatus/types.ts

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

package/src/components/Editor/EditorList.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { ThemeProvider } from "styled-components";
+import { theme } from "@adminjs/design-system";
+
+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,4 +1,4 @@
-import React, { memo, useState, useEffect, useRef } from "react";
+import React from "react";
 import { ThemeProvider } from "styled-components";
 import { theme } from "@adminjs/design-system";
 

package/src/components/Editor/index.ts

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

package/src/components/Editor/styles.ts

@@ -18,9 +18,7 @@ export const StyledEditorWrapper = styled(Box)`
   border: 1px solid rgb(187, 195, 203);
 `;
 
-export const StyledEditorShowWrapper = styled(Box)`
-  margin-bottom: 24px;
-
+export const StyledEditorViewWrapper = styled(Box)`
   h1,
   h2,
   h3 {
@@ -59,6 +57,10 @@ export const StyledEditorShowWrapper = styled(Box)`
   }
 `;
 
+export const StyledEditorShowWrapper = styled(StyledEditorViewWrapper)`
+  margin-bottom: 24px;
+`;
+
 export const StyledEditor = styled.div`
   .cdx-block,
   .ce-header {

package/src/components/index.ts

@@ -1,5 +1,9 @@
+export { default as ColorStatusEdit } from "./ColorStatus/ColorStatusEdit.jsx";
+export { default as ColorStatusShow } from "./ColorStatus/ColorStatusShow.js";
+export { default as ColorStatusList } from "./ColorStatus/ColorStatusList.js";
 export { default as CustomSlug } from "./CustomSlug/CustomSlug.js";
-export { default as StringList } from "./StringList/StringList.js";
-export { default as StringListShow } from "./StringList/StringListShow.js";
 export { default as Editor } from "./Editor/Editor.jsx";
+export { default as EditorList } from "./Editor/EditorList.jsx";
 export { default as EditorShow } from "./Editor/EditorShow.jsx";
+export { default as StringList } from "./StringList/StringList.js";
+export { default as StringListShow } from "./StringList/StringListShow.js";