feat: 🎉 createTheme added and ThemeViewer implementation

createTheme added and ThemeViewer implementation ref: #31
wrappid · Mar 8, 2024 · 1e94430 · 1e94430
1 parent 07a2e42
commit 1e94430
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 0 deletions.
diff --git a/app/components.registry.js b/app/components.registry.js
@@ -10,6 +10,7 @@ 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";
 
 export const ComponentsRegistry = {
   BusinessEntityComp        : { comp: BusinessEntityComp },
@@ -24,4 +25,5 @@ export const ComponentsRegistry = {
   RoutesManager             : { comp: RoutesManager },
   StatusChangeCommentHistory: { comp: StatusChangeCommentHistory },
   StatusChangeForm          : { comp: StatusChangeForm },
+  CreateTheme : {comp: CreateTheme},
 };
diff --git a/app/components/ThemeViewer/CreateTheme.js b/app/components/ThemeViewer/CreateTheme.js
@@ -0,0 +1,60 @@
+import React from "react";
+
+import {
+  CoreButton,
+  CoreH3,
+  CoreH2,
+  BlankLayout,
+  CoreLayoutItem,
+  CoreBox,
+  CoreClasses,
+} from "@wrappid/core";
+
+import JsonEditor from "./JsonEditor";
+import ThemesViewer from "./ThemesViewer";
+function CreateTheme() {
+  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>
+
+            <>
+              {currentState === "Presets" && <ThemesViewer/>}
+
+              {currentState === "Create Theme" && (
+                <CoreH2>Preview State</CoreH2>
+              )}
+
+              {currentState === "Preview" && <CoreH2>Preview State</CoreH2>}
+            </>
+          </CoreBox>
+        </CoreBox>
+      </CoreLayoutItem>
+    </>
+  );
+}
+
+export default CreateTheme;
diff --git a/app/components/ThemeViewer/ThemesViewer.js b/app/components/ThemeViewer/ThemesViewer.js
@@ -0,0 +1,95 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+
+import {
+  CoreH1,
+  CoreBox,
+  setUserTheme,
+  CoreButton,
+  CoreGrid,
+  CoreClasses,
+  CoreTypographyBody1,
+  CoreThemeProvider,
+} from "@wrappid/core";
+
+// eslint-disable-next-line import/no-unresolved
+import {
+  UPDATE_DEFAULT_THEME,
+  WrappidDataContext,
+  WrappidDispatchContext,
+  StylesProvider,
+} from "@wrappid/styles";
+
+function ThemesViewer() {
+  const storeDispatch = useDispatch();
+  const { themes } = React.useContext(WrappidDataContext);
+
+  const handleChangeTheme = (themeId) => {
+    storeDispatch(setUserTheme(themeId));
+  };
+
+  const renderCards = () => {
+    return (
+      <CoreGrid>
+        {Object.keys(themes).map((themeName, index) => {
+          return (
+            <CoreBox gridProps={{ gridSize: 3 }}>
+              <CoreThemeProvider themeID={themeName}>
+                <StylesProvider themeID={themeName}>
+
+                  <CoreGrid
+                    styleClasses={[
+                      CoreClasses.HEIGHT.VH_25,
+                      CoreClasses.BORDER.BORDER,
+                      CoreClasses.BORDER.BORDER_SUCCESS,
+                      CoreClasses.DISPLAY.FLEX,
+                    ]}
+                  >
+                    {/* First Segment for PrimaryColor */}
+                    <CoreBox
+                      gridProps={{
+                        gridSize: { xs: 6 },
+                        styleClasses: [CoreClasses.BG.BG_PRIMARY],
+                      }}
+                    >
+                      Primary Color
+                    </CoreBox>
+
+                    {/* Second Segment for SecondaryColor */}
+                    <CoreBox
+                      gridProps={{
+                        gridSize: { xs: 6 },
+                        styleClasses: [CoreClasses.BG.BG_SECONDARY],
+                      }}
+                    >
+                      Secondary Color
+                    </CoreBox>
+
+                    {/* Third Segment for Text */}
+                    <CoreBox
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="center"
+                    >
+                      <CoreTypographyBody1>test</CoreTypographyBody1>
+                      <CoreButton
+                        key={index}
+                        OnClick={() => handleChangeTheme(themeName)}
+                      >
+                        {themeName}
+                      </CoreButton>
+                    </CoreBox>
+                  </CoreGrid>
+                </StylesProvider>
+              </CoreThemeProvider>
+            </CoreBox>
+          );
+        })}
+      </CoreGrid>
+    );
+  };
+
+  return <>{renderCards()}</>;
+}
+
+export default ThemesViewer;
diff --git a/app/routes.registry.js b/app/routes.registry.js
@@ -1,4 +1,10 @@
 export const RoutesRegistry = {
+  createTheme: {
+    Page        : { appComponent: "CreateTheme", layout: "BlankLayout" },
+    authRequired: false,
+    entityRef   : "components",
+    url         : "createTheme"
+  },
   BUSINESS_ENTITY   : "business_entity",
   FORMS             : "forms",
   HISTORY           : "history/:model/:entityRef",