Shared components dark theme palette

cyclops-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyclopsui/cyclops-ui",
-  "version": "0.1.0",
+  "version": "0.1.15",
   "private": false,
   "license": "Apache-2.0",
   "dependencies": {

cyclops-ui/src/components/form/TemplateFormFields.tsx

@@ -15,8 +15,10 @@ import { WarningTwoTone } from "@ant-design/icons";
 import Link from "antd/lib/typography/Link";
 import { SuggestionInputField } from "./fields/string/SuggestionInput";
 import "./custom.css";
+import { TemplateFormFieldsContextProvider } from "./TemplateFormFieldsContext";
 
 interface Props {
+  themePalette?: "dark" | "light";
   isModuleEdit: boolean;
   fields: any[];
   parentFieldID: string[];
@@ -273,6 +275,7 @@ const NoFieldsAlert = () => {
 };
 
 const TemplateFormFields = ({
+  themePalette = "light",
   isModuleEdit,
   fields,
   initialValues,
@@ -289,17 +292,19 @@ const TemplateFormFields = ({
 
   return (
     <div className={"module-form-fields"}>
-      {mapFields(
-        isModuleEdit,
-        fields,
-        initialValues,
-        parentFieldID,
-        parent,
-        level,
-        arrayIndexLifetime,
-        arrayField,
-        required,
-      )}
+      <TemplateFormFieldsContextProvider themePalette={themePalette}>
+        {mapFields(
+          isModuleEdit,
+          fields,
+          initialValues,
+          parentFieldID,
+          parent,
+          level,
+          arrayIndexLifetime,
+          arrayField,
+          required,
+        )}
+      </TemplateFormFieldsContextProvider>
     </div>
   );
 };

cyclops-ui/src/components/form/TemplateFormFieldsContext.tsx

@@ -0,0 +1,38 @@
+import React, { createContext, ReactNode, useContext } from "react";
+
+interface TemplateFormFieldsContextType {
+  themePalette?: "dark" | "light";
+}
+
+const TemplateFormFieldsContext = createContext<
+  TemplateFormFieldsContextType | undefined
+>(undefined);
+
+interface TemplateFormFieldsContextProviderProps {
+  themePalette?: "dark" | "light";
+  children: ReactNode;
+}
+
+export const TemplateFormFieldsContextProvider: React.FC<
+  TemplateFormFieldsContextProviderProps
+> = ({ themePalette, children }) => {
+  return (
+    <TemplateFormFieldsContext.Provider
+      value={{
+        themePalette,
+      }}
+    >
+      {children}
+    </TemplateFormFieldsContext.Provider>
+  );
+};
+
+export const useTemplateFormFields = (): TemplateFormFieldsContextType => {
+  const context = useContext(TemplateFormFieldsContext);
+  if (!context) {
+    throw new Error(
+      "useTemplateFormFields must be used within a TemplateFormFieldsContextProvider",
+    );
+  }
+  return context;
+};

cyclops-ui/src/components/form/fields/array/ArrayField.tsx

@@ -16,6 +16,7 @@ import {
 } from "@ant-design/icons";
 import { mapFields } from "../../TemplateFormFields";
 import { collapseColor } from "../utils";
+import { useTemplateFormFields } from "../../TemplateFormFieldsContext";
 
 interface Props {
   field: any;
@@ -36,6 +37,8 @@ export const ArrayField = ({
   uniqueFieldName,
   isModuleEdit,
 }: Props) => {
+  const { themePalette } = useTemplateFormFields();
+
   const [open, setOpen] = useState(false);
 
   let header = <Row>{field.name}</Row>;
@@ -93,7 +96,7 @@ export const ArrayField = ({
                   borderRadius: "7px",
                   padding: "12px",
                   width: "100%",
-                  backgroundColor: "#fafafa",
+                  backgroundColor: themePalette === "dark" ? "#444" : "#fafafa",
                 }}
               >
                 {arrFields.map((arrField, index) => (
@@ -146,80 +149,85 @@ export const ArrayField = ({
     }
     if (field.items.type === "object") {
       return (
-        <Collapse
-          size={"small"}
-          bordered={false}
-          onChange={function (value: string | string[]) {
-            setOpen(value.length > 0);
-          }}
+        <div
+          className={`nested-fields ${themePalette === "dark" ? "dark" : ""}`}
         >
-          <Collapse.Panel
-            key={fieldName}
-            header={header}
-            style={{
-              borderRadius: "7px",
-              backgroundColor: collapseColor(open),
+          <Collapse
+            size={"small"}
+            bordered={false}
+            onChange={function (value: string | string[]) {
+              setOpen(value.length > 0);
             }}
-            forceRender={true}
           >
-            <Form.Item
-              wrapperCol={{ span: 16 }}
+            <Collapse.Panel
+              key={fieldName}
+              header={header}
               style={{
-                paddingTop: "8px",
-                marginBottom: "0",
+                borderRadius: "7px",
+                backgroundColor: collapseColor(open, themePalette),
               }}
+              forceRender={true}
             >
-              <Form.List name={formItemName}>
-                {(arrFields, { add, remove }) => (
-                  <>
-                    {arrFields.map((arrField) => (
-                      <Col
-                        key={arrField.key}
-                        style={{ padding: 0, paddingBottom: "12px" }}
-                      >
-                        <div
-                          style={{
-                            border: "solid 1.5px #c3c3c3",
-                            borderRadius: "7px",
-                            padding: "12px",
-                            width: "100%",
-                            backgroundColor: "#fafafa",
-                          }}
+              <Form.Item
+                wrapperCol={{ span: 16 }}
+                style={{
+                  paddingTop: "8px",
+                  marginBottom: "0",
+                }}
+              >
+                <Form.List name={formItemName}>
+                  {(arrFields, { add, remove }) => (
+                    <>
+                      {arrFields.map((arrField) => (
+                        <Col
+                          key={arrField.key}
+                          style={{ padding: 0, paddingBottom: "12px" }}
                         >
-                          {mapFields(
-                            isModuleEdit,
-                            field.items.properties,
-                            initialFields,
-                            [...uniqueFieldName, String("")],
-                            "",
-                            level + 1,
-                            2,
-                            arrField,
-                            field.items.required,
-                          )}
-                          <MinusCircleOutlined
-                            style={{ fontSize: "16px" }}
-                            onClick={() => remove(arrField.name)}
-                          />
-                        </div>
-                      </Col>
-                    ))}
-                    <Form.Item style={{ marginBottom: "0" }}>
-                      <Button
-                        type="dashed"
-                        onClick={() => add()}
-                        block
-                        icon={<PlusOutlined />}
-                      >
-                        Add
-                      </Button>
-                    </Form.Item>
-                  </>
-                )}
-              </Form.List>
-            </Form.Item>
-          </Collapse.Panel>
-        </Collapse>
+                          <div
+                            style={{
+                              border: "solid 1.5px #c3c3c3",
+                              borderRadius: "7px",
+                              padding: "12px",
+                              width: "100%",
+                              backgroundColor:
+                                themePalette === "dark" ? "#444" : "#fafafa",
+                            }}
+                          >
+                            {mapFields(
+                              isModuleEdit,
+                              field.items.properties,
+                              initialFields,
+                              [...uniqueFieldName, String("")],
+                              "",
+                              level + 1,
+                              2,
+                              arrField,
+                              field.items.required,
+                            )}
+                            <MinusCircleOutlined
+                              style={{ fontSize: "16px" }}
+                              onClick={() => remove(arrField.name)}
+                            />
+                          </div>
+                        </Col>
+                      ))}
+                      <Form.Item style={{ marginBottom: "0" }}>
+                        <Button
+                          type="dashed"
+                          onClick={() => add()}
+                          block
+                          icon={<PlusOutlined />}
+                        >
+                          Add
+                        </Button>
+                      </Form.Item>
+                    </>
+                  )}
+                </Form.List>
+              </Form.Item>
+            </Collapse.Panel>
+          </Collapse>
+        </div>
       );
     }
   };

cyclops-ui/src/components/form/fields/array/custom.css

@@ -0,0 +1,3 @@
+.nested-fields.dark .ant-collapse-content-box {
+  background-color: #444;
+}

cyclops-ui/src/components/form/fields/map/MapField.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Button, Col, Divider, Form, Input, Row } from "antd";
 import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 import TextArea from "antd/es/input/TextArea";
+import { useTemplateFormFields } from "../../TemplateFormFieldsContext";
 
 interface Props {
   field: any;
@@ -18,6 +19,8 @@ export const MapField = ({
   formItemName,
   isRequired,
 }: Props) => {
+  const { themePalette } = useTemplateFormFields();
+
   return (
     <Form.Item
       wrapperCol={{ span: level === 0 ? 16 : 24 }}
@@ -44,7 +47,7 @@ export const MapField = ({
               borderRadius: "7px",
               padding: "12px",
               width: "100%",
-              backgroundColor: "#fafafa",
+              backgroundColor: themePalette === "dark" ? "#444" : "#fafafa",
             }}
           >
             {fields.map((arrField, index) => (

cyclops-ui/src/components/form/fields/object/ObjectField.tsx

@@ -3,6 +3,9 @@ import { Col, Collapse, Form, Row, Tooltip } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import { mapFields } from "../../TemplateFormFields";
 import { collapseColor } from "../utils";
+import { useTemplateFormFields } from "../../TemplateFormFieldsContext";
+
+import "./custom.css";
 
 interface Props {
   field: any;
@@ -27,6 +30,8 @@ export const ObjectField = ({
   arrayIndexLifetime,
   isModuleEdit,
 }: Props) => {
+  const { themePalette } = useTemplateFormFields();
+
   const [open, setOpen] = useState(false);
 
   let header = <Row>{field.display_name}</Row>;
@@ -53,6 +58,7 @@ export const ObjectField = ({
     <Col
       span={level === 0 ? 16 : 24}
       offset={level === 0 ? 2 : 0}
+      className={`nested-fields ${themePalette === "dark" ? "dark" : ""}`}
       style={{
         paddingTop: "8px",
         paddingBottom: "8px",
@@ -74,7 +80,7 @@ export const ObjectField = ({
           header={header}
           style={{
             borderRadius: "7px",
-            backgroundColor: collapseColor(open),
+            backgroundColor: collapseColor(open, themePalette),
           }}
           forceRender={true}
         >

cyclops-ui/src/components/form/fields/object/custom.css

@@ -0,0 +1,3 @@
+.nested-fields.dark .ant-collapse-content-box {
+  background-color: #555;
+}

cyclops-ui/src/components/form/fields/utils.tsx

@@ -17,10 +17,21 @@ export const isFieldNullOrUndefined = (
   return !obj || obj[fieldName] === null || obj[fieldName] === undefined;
 };
 
-export function collapseColor(open: boolean): string {
+export function collapseColor(
+  open: boolean,
+  themePalette?: "dark" | "light",
+): string {
   if (open) {
+    if (themePalette === "dark") {
+      return "#a35702";
+    }
+
     return "#faca93";
   } else {
+    if (themePalette === "dark") {
+      return "#bd6502";
+    }
+
     return "#fae8d4";
   }
 }