feat(core): ⚡ theme related changes

theme related changes

ref: #31

app/components.registry.js

@@ -10,12 +10,11 @@ import PagesManager from "./components/PagesManager";
 import RoutesManager from "./components/RoutesManager";
 import StatusChangeCommentHistory from "./components/StatusChangeCommentHistory";
 import StatusChangeForm from "./components/StatusChangeForm";
-import CreateTheme from "./components/ThemeViewer/CreateTheme";
+import ThemeContent from "./components/ThemeViewer/ThemeContent";
 
 export const ComponentsRegistry = {
   BusinessEntityComp        : { comp: BusinessEntityComp },
   BusinessEntityManager     : { comp: BusinessEntityManager },
-  CreateTheme               : { comp: CreateTheme },
   DataCreator               : { comp: DataCreator },
   DataViewer                : { comp: DataViewer },
   FormBuilder               : { comp: FormBuilder },
@@ -26,4 +25,5 @@ export const ComponentsRegistry = {
   RoutesManager             : { comp: RoutesManager },
   StatusChangeCommentHistory: { comp: StatusChangeCommentHistory },
   StatusChangeForm          : { comp: StatusChangeForm },
+  ThemeContent              : { comp: ThemeContent },
 };

app/components/ThemeViewer/CreateTheme copy.js

@@ -0,0 +1,98 @@
+import React from "react";
+
+const CreateTheme = () => {
+  const [theme, setTheme] = React.useState({
+    backgroundColor: "",
+    name           : "",
+    textColor      : "",
+    // Add more theme properties as needed
+  });
+
+  const handleChange = (event) => {
+    setTheme({
+      ...theme,
+      [event.target.name]: event.target.value,
+    });
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    // Add your logic to save the theme here
+    // console.log(theme);
+  };
+
+  return (
+    <div>
+      <h2>Create and Edit Theme</h2>
+
+      <form onSubmit={handleSubmit}>
+        <label>
+                Theme Name:
+          <input
+            type="text"
+            name="name"
+            value={theme.name}
+            onChange={handleChange}
+          />
+        </label>
+
+        <br />
+
+        <label>
+                Background Color:
+          <input
+            type="text"
+            name="primaryColor"
+            value={theme.primaryColor}
+            onChange={handleChange}
+          />
+        </label>
+
+        <br />
+
+        <label>
+                PrimaryColor Color:
+          <input
+            type="text"
+            name="secondaryColor"
+            value={theme.backgroundColor}
+            onChange={handleChange}
+          />
+        </label>
+
+        <br />
+
+        <label>
+                Background Color:
+          <input
+            type="text"
+            name="secondaryColor"
+            value={theme.backgroundColor}
+            onChange={handleChange}
+          />
+        </label>
+
+        <br />
+
+        <label>
+                Text Color:
+          <input
+            type="text"
+            name="textColor"
+            value={theme.textColor}
+            onChange={handleChange}
+          />
+        </label>
+
+        <br />
+
+        {/* Add more form fields for other theme properties */}
+        <br />
+
+        <button type="submit">Save Theme</button>
+      </form>
+    </div>
+  );
+};
+
+export default CreateTheme;

app/components/ThemeViewer/CreateTheme.js

@@ -1,59 +1,15 @@
-import React from "react";
+import { CoreForm, FORM_EDIT_MODE } from "@wrappid/core";
 
-import {
-  CoreButton,
-  CoreH3,
-  CoreH2,
-  BlankLayout,
-  CoreLayoutItem,
-  CoreBox
-} from "@wrappid/core";
+import { formSchema } from "./ThemeFormSchema";
 
-import ThemesViewer from "./ThemesViewer";
-function CreateTheme() {
-  const [currentState, setCurrentState] = React.useState("Presets");
-
-  const handleStateChange = (state) => {
-    setCurrentState(state);
-  };
+export default function CreateTheme() {
 
   return (
     <>
-      <CoreLayoutItem
-        id={BlankLayout.PLACEHOLDER.CONTENT}
-      >
-        <CoreH3>THEME VIEWER</CoreH3>
-
-        <CoreBox>
-          <CoreBox>
-            <CoreBox>
-              <CoreButton OnClick={() => handleStateChange("Presets")}>
-                Presets
-              </CoreButton>
-
-              <CoreButton OnClick={() => handleStateChange("Create Theme")}>
-                Create Theme
-              </CoreButton>
-
-              <CoreButton OnClick={() => handleStateChange("Preview")}>
-                Preview
-              </CoreButton>
-            </CoreBox>
-
-            <>
-              {currentState === "Presets" && <ThemesViewer/>}
-
-              {currentState === "Create Theme" && (
-                <CoreH2>Preview State</CoreH2>
-              )}
-
-              {currentState === "Preview" && <CoreH2>Preview State</CoreH2>}
-            </>
-          </CoreBox>
-        </CoreBox>
-      </CoreLayoutItem>
+      <CoreForm
+        formId="themeForm"
+        formJson={{ themeForm: formSchema }}
+        mode={FORM_EDIT_MODE}/>
     </>
   );
 }
-
-export default CreateTheme;

app/components/ThemeViewer/ThemeContent.js

@@ -0,0 +1,67 @@
+import React from "react";
+
+import {
+  CoreButton,
+  CoreH3,
+  CoreH2,
+  BlankLayout,
+  CoreLayoutItem,
+  CoreBox,
+  ThemeSelector,
+  CoreClasses
+} from "@wrappid/core";
+
+import CreateTheme from "./CreateTheme";
+import ThemesViewer from "./ThemesViewer";
+function ThemeContent() {
+  const [currentState, setCurrentState] = React.useState("Presets");
+
+  const handleStateChange = (state) => {
+    setCurrentState(state);
+  };
+
+  return (
+    <>
+      <CoreLayoutItem
+        id={BlankLayout.PLACEHOLDER.CONTENT}
+      >
+        <CoreH3>THEME VIEWER</CoreH3>
+
+        <CoreBox>
+          <CoreBox>
+            <CoreBox>
+              <CoreButton OnClick={() => handleStateChange("Presets")}>
+                Presets
+              </CoreButton>
+
+              <CoreButton OnClick={() => handleStateChange("Create Theme")}>
+                Create Theme
+              </CoreButton>
+
+              <CoreButton OnClick={() => handleStateChange("Preview")}>
+                Preview
+              </CoreButton>
+
+            </CoreBox>
+
+            <CoreButton>
+              <ThemeSelector styleClasses={[CoreClasses.WIDTH.VW_25]}/>
+            </CoreButton>
+
+            <>
+              {currentState === "Presets" && <ThemesViewer/>}
+
+              {currentState === "Create Theme" && (
+                <CreateTheme/>
+              )}
+
+              {currentState === "Preview" && <CoreH2>Preview State</CoreH2>}
+            </>
+          </CoreBox>
+        </CoreBox>
+      </CoreLayoutItem>
+    </>
+  );
+}
+
+export default ThemeContent;

app/components/ThemeViewer/ThemeFormSchema.js

@@ -0,0 +1,38 @@
+export const formSchema = {
+  fields: [
+    {
+      gridSize: 6,
+      id      : "PrimaryColor",
+      label   : "Primary Color",
+      type    : "text"
+    },
+    {
+      gridSize: 6,
+      id      : "SecondaryColor",
+      label   : "Secondary Color",
+      type    : "text"
+    },
+    {
+      gridSize: { xs: 6 },
+      id      : "description",
+      label   : "Description",
+      type    : "text"
+    },
+    // eslint-disable-next-line etc/no-commented-out-code
+    // {
+    //   "endpoint"            : "/business/all/IssueReportLabels",
+    //   "getOptionLabel"      : "__PRESCRIPTIONASYNCSELECTS_GET_OPTION_LABEL",
+    //   "getOptionValue"      : "__PRESCRIPTIONASYNCSELECTS_GET_OPTION_VALUE",
+    //   "gridSize"            : 12,
+    //   "id"                  : "labels",
+    //   "isOptionEqualToValue": "__PRESCRIPTIONASYNCSELECTS_IS_OPTIONS_EQUAL_TO_VALUE",
+    //   "itemKey"             : "label",
+    //   "label"               : "Select Labels",
+    //   "multiple"            : true,
+    //   "type"                : "asyncSelect"
+    // },
+
+  ],
+  submitButtonLabel: "Submit",
+
+};

app/routes.registry.js

@@ -6,11 +6,11 @@ export const RoutesRegistry = {
   ROUTES            : "routes",
   STATUS_CHANGE_FORM: "status/:model/:id/:status",
   TABLES            : "tables",
-  createTheme       : {
-    Page        : { appComponent: "CreateTheme", layout: "BlankLayout" },
+  themecontent      : {
+    Page        : { appComponent: "ThemeContent", layout: "BlankLayout" },
     authRequired: false,
     entityRef   : "components",
-    url         : "createTheme"
+    url         : "theme/createTheme"
   },
   themes: {
     Page        : { appComponent: "ThemesViewer" },