Updated theme from tmanundercover:master (#3)

* Fixed Customized Themeprovider values - fixes responsiveness and fonts passthru from theme Removed TheWebsiteTheme in favor of useTheme or useContext(CustomizedThemeContext) * pulling the font faces through Sanity Theme object * fixed theming for storybook stories. * removed some project specific values in favor of environment variables
chowworks · Nov 28, 2023 · 80c1be4 · 80c1be4
1 parent 13e1644
commit 80c1be4
Show file tree

Hide file tree

Showing 74 changed files with 1,867 additions and 1,945 deletions.
diff --git a/README.md b/README.md
@@ -32,6 +32,7 @@ Application that serves as the website builder from React Components
   REACT_APP_MESSAGING_SENDER_ID=
   REACT_APP_APP_ID=
   REACT_APP_FIREBASE_ANALYTICS_TRACKING_ID=
+  REACT_APP_BASE_ROUTE=
   ```
 
 #### Firebase
@@ -48,6 +49,7 @@ Application that serves as the website builder from React Components
   ```
   SANITY_PROJECTID=
   SANITY_DB=development
+  SANITY_APIVERSION=
   SANITY_API_TOKEN=
   SENDGRID_API_KEY=
   SENDGRID_FROM_EMAIL=

diff --git a/functions/package.json b/functions/package.json
@@ -1,5 +1,6 @@
 {
   "name": "functions",
+  "version": "0.3.1",
   "scripts": {
     "lint": "eslint --ext .js,.ts .",
     "build": "tsc",
@@ -18,7 +19,7 @@
   "main": "lib/index.js",
   "dependencies": {
     "@sanity/client": "^3.4.1",
-    "@sanity/image-url": "^1.0.1",
+    "@sanity/image-url": "^1.0.2",
     "@sanity/types": "^2.34.0",
     "@sendgrid/mail": "^7.7.0",
     "@shopify/shopify-api": "^8.0.2",
@@ -34,7 +35,6 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@types/firebase": "^3.2.1",
     "@types/json-bigint": "^1.0.1",
     "@types/node-fetch": "^2.5.12",
     "@types/uuid": "^9.0.7",

diff --git a/functions/src/sanityClient.ts b/functions/src/sanityClient.ts
@@ -3,7 +3,7 @@ const client = require("@sanity/client");
 export const sanityClient = client({
   projectId: process.env.SANITY_PROJECTID,
   dataset: process.env.SANITY_DB,
-  apiVersion: "2021-03-25",
+  apiVersion: process.env.SANITY_APIVERSION,
   token: process.env.SANITY_API_TOKEN,
   useCdn: false,
 });

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,13 +1,14 @@
 {
   "name": "chowworks-website",
-  "version": "0.0.0",
+  "version": "0.3.1",
+  "license": "GPL-3.0-or-later",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.11",
+    "@mui/icons-material": "^5.14.18",
     "@mui/material": "^5.14.18",
-    "@mui/styles": "^5.14.11",
+    "@mui/styles": "^5.14.18",
     "@storybook/addon-mdx-gfm": "^7.4.6",
     "@storybook/react-webpack5": "^7.4.6",
     "@tanstack/react-query": "^4.36.1",
@@ -112,7 +113,7 @@
     "@types/react-router": "^5.1.19",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-syntax-highlighter": "^13.5.0",
-    "@types/uuid": "^8.3.4",
+    "@types/uuid": "^9.0.0",
     "@types/validator": "^13.7.7",
     "storybook-addon-material-ui": "^0.9.0-alpha.24",
     "url-loader": "^4.1.1"

diff --git a/public/index.html b/public/index.html
@@ -36,7 +36,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
 
-    <title>Chow Works</title>
+    <meta name="title" content="__META_OG_TITLE__"/>
     <meta name="description" content="__META_DESCRIPTION__"/>
     <meta name="og:title" content="__META_OG_TITLE__"/>
     <meta name="og:description" content="__META_OG_DESCRIPTION__"/>

diff --git a/sanityIo/package.json b/sanityIo/package.json
@@ -1,11 +1,11 @@
 {
   "name": "the-handsomest-nerd-sanity",
   "private": true,
-  "version": "0.0.0",
-  "description": "",
+  "version": "0.3.1",
+  "description": "Sanity CMS for React Website Builder",
   "main": "package.json",
   "author": "theHandsomestNerd <hello@thehandsomestnerd.com>",
-  "license": "UNLICENSED",
+  "license": "GPL-3.0-or-later",
   "scripts": {
     "start": "sanity start",
     "build": "sanity build",

diff --git a/sanityIo/schemas/mui/MuiBreakpoints.js b/sanityIo/schemas/mui/MuiBreakpoints.js
@@ -3,11 +3,6 @@ export default {
     title: 'MUI Breakpoints',
     type: 'object',
     fields: [
-        {
-            name: 'name',
-            title: 'Name',
-            type: 'string',
-        },
         {
             name: 'xs',
             title: 'XS',
@@ -33,11 +28,5 @@ export default {
             title: 'XL',
             type: 'string',
         },
-    ],
-    preview: {
-        select: {
-            title: 'name',
-            media: 'image',
-        },
-    },
+    ]
 }
diff --git a/sanityIo/schemas/mui/MuiColorPalatte.js b/sanityIo/schemas/mui/MuiColorPalatte.js
@@ -25,11 +25,6 @@ export default {
     title: 'MUI Color Palette',
     type: 'object',
     fields: [
-        {
-            name: 'name',
-            title: 'Name',
-            type: 'string',
-        },
         {
             name: 'defaultBackground',
             title: 'Default Background Color',
@@ -60,6 +55,12 @@ export default {
             type: 'string',
            options: {list: listing}
         },
+        {
+            name: 'buttonOutlineColor',
+            title: 'Button Outline Color',
+            type: 'string',
+            options: {list: listing}
+        },
        {
             name: 'secondaryTextColor',
             title: 'Secondary Text Color',
@@ -73,10 +74,5 @@ export default {
            options: {list: listing}
         },
 
-    ],
-    preview: {
-        select: {
-            title: 'name',
-        },
-    },
+    ]
 }
diff --git a/sanityIo/schemas/mui/MuiFontFace.js b/sanityIo/schemas/mui/MuiFontFace.js
@@ -0,0 +1,48 @@
+export default {
+    name: 'MuiFontFace',
+    title: 'MUI Font Face',
+    type: 'object',
+    fields: [
+        {
+            name: 'name',
+            title: 'Name',
+            type: 'string',
+        },
+        {
+            name: 'fontSize',
+            title: 'Font Size',
+            type: 'string',
+        },
+        {
+            name: 'fontStyle',
+            title: 'Font Style',
+            type: 'string',
+        },
+        {
+            name: 'fontWeight',
+            title: 'Font Weight',
+            type: 'string',
+        },
+        {
+            name: 'lineHeight',
+            title: 'Line Height',
+            type: 'string',
+        },
+        {
+            name: 'letterSpacing',
+            title: 'Letter Spacing',
+            type: 'string',
+        },
+        {
+            name: 'textTransform',
+            title: 'Text Transform',
+            type: 'string',
+        },
+        {
+            name: 'mediaQueries',
+            title: 'Media Queries',
+            type: "array",
+            of:[{type: "MuiMediaQuery"}],
+        },
+    ]
+}
diff --git a/sanityIo/schemas/mui/MuiMediaQuery.js b/sanityIo/schemas/mui/MuiMediaQuery.js
@@ -0,0 +1,27 @@
+export default {
+    name: 'MuiMediaQuery',
+    title: 'MUI Media Query',
+    type: 'object',
+    fields: [
+        {
+            name: 'breakpoint',
+            title: 'Breakpoint',
+            type: "array",
+            of:[{type: "string", options: {
+                    list: [
+                        {value: "xs", title: "XS"},
+                        {value: "sm", title: "SM"},
+                        {value: "md", title: "MD"},
+                        {value: "lg", title: "LG"},
+                        {value: "xl", title: "XL"},
+                    ]
+                }}],
+
+        },
+        {
+            name: 'typography',
+            title: 'Typography',
+            type: 'MuiFontFace',
+        },
+    ]
+}
diff --git a/sanityIo/schemas/mui/MuiTypography.js b/sanityIo/schemas/mui/MuiTypography.js
@@ -3,27 +3,28 @@ export default {
     title: 'MUI Typography',
     type: 'object',
     fields: [
-        {
-            name: 'title',
-            title: 'Title',
-            type: 'string',
-        },
         {
             name: 'fontFamily',
             title: 'Font Family',
             type: "array",
             of:[{type: "string", options: {
                     list: [
-                        {value: "OSWALD", title: "Oswald"},
-                        {value: "INTER", title: "Inter"},
-                        {value: "PROMPT", title: "Prompt"},
-                        {value: "RALEWAY", title: "Raleway"},
-                        {value: "POPPINS", title: "Poppins"},
-                        {value: "MONTESERRAT", title: "Monteserrat"}
+                        {value: "Oswald", title: "Oswald"},
+                        {value: "Inter", title: "Inter"},
+                        {value: "Prompt", title: "Prompt"},
+                        {value: "Raleway", title: "Raleway"},
+                        {value: "Poppins", title: "Poppins"},
+                        {value: "Monteserrat", title: "Monteserrat"}
                     ]
                 }}],
 
         },
+        {
+            name: 'fontFaces',
+            title: 'Font Faces',
+            type: "array",
+            of:[{type: "MuiFontFace"}],
+        },
     ],
     preview: {
         select: {

diff --git a/sanityIo/schemas/schema.js b/sanityIo/schemas/schema.js
@@ -86,6 +86,8 @@ import AnimatedHeroContentSection from "./sections/hero/AnimatedHeroContentSecti
 import HeroSlideContent from "./sections/hero/HeroSlideContent";
 import AnimatedAboutUsSection from "./services/AnimatedAboutUsSection";
 import AnimatedServicesSection from "./services/AnimatedServicesSection";
+import MuiFontFace from "./mui/MuiFontFace";
+import MuiMediaQuery from "./mui/MuiMediaQuery";
 
 // Then we give our schema to the builder and provide the result to Sanity
 export default [
@@ -170,6 +172,8 @@ export default [
     MuiTheme,
     category,
     MuiTypography,
+    MuiFontFace,
+    MuiMediaQuery,
     MuiColorPalatte,
     BusinessContact,
     scheduleGroup,

diff --git a/src/App.tsx b/src/App.tsx
@@ -11,13 +11,6 @@ import SnackbarProvider from "./components/modal-context/SnackbarProvider";
 import PageMux from "./components/templates/mackenzies-mind/pages/PageMux";
 import CustomizedThemeProvider from "./components/customized-theme-provider/CustomizedThemeProvider";
 
-export enum RoutesEnum {
-    MAINROUTE = "/chow-works/:pageSlug",
-    HOMEROUTE = "/chow-works/home",
-
-    ERROR = '/error'
-}
-
 function App() {
     const queryClient = new QueryClient({
         defaultOptions: {
@@ -49,11 +42,11 @@ function App() {
 
                                                     <Grid item>
                                                         <Routes>
-                                                            <Route path={RoutesEnum.MAINROUTE} element={<PageMux/>}/>
-                                                            <Route path={RoutesEnum.ERROR} element={<FourOhFour/>}/>
+                                                            <Route path={"/"+process.env.REACT_APP_BASE_ROUTE +"/:pageSlug"} element={<PageMux/>}/>
+                                                            <Route path={'/error'} element={<FourOhFour/>}/>
                                                             <Route path={"/*"}
                                                                    element={<Navigate
-                                                                       to={RoutesEnum.HOMEROUTE}/>}/>
+                                                                       to={"/"+process.env.REACT_APP_BASE_ROUTE+"/home"}/>}/>
                                                         </Routes>
                                                     </Grid>
                                                 </Grid>

diff --git a/src/common/sanityIo/BlockContentAnnotations.tsx b/src/common/sanityIo/BlockContentAnnotations.tsx
@@ -65,9 +65,12 @@ export const ButtonMarkRender = (props: React.PropsWithChildren<{}> & BlockConte
 
     return <Grid container item>
         <Button
-            style={props?.mark?.color === 'mint' ? props?.mark?.variant === 'contained' ? {backgroundColor: "", borderRadius: "20px"} : {backgroundColor: 'transparent', borderColor: "", borderRadius: "20px"} : {borderRadius: "20px"}}
+            style={props?.mark?.color === 'mint' ? props?.mark?.variant === 'contained' ? {
+                backgroundColor: "",
+                borderRadius: "20px"
+            } : {backgroundColor: 'transparent', borderColor: "", borderRadius: "20px"} : {borderRadius: "20px"}}
             variant={props?.mark?.variant as 'text' | 'outlined' | 'contained'}
-            color={props?.mark?.color != 'mint' ? props?.mark?.color : 'inherit'}
+            color={props?.mark?.color !== 'mint' ? props?.mark?.color : 'inherit'}
             href={props?.mark?.buttonLink}>
             <Typography variant='button'
                         style={{color: textColor}}>{props?.children}</Typography>
@@ -97,17 +100,11 @@ export const ListItemRender: React.FunctionComponent = (props: React.PropsWithCh
                                           className={classes.orderedListIndex}>{(props?.index ?? 0) + 1}.</Typography>}
                     </ListItemIcon>
                 </Grid>
-                <Grid item wrap='nowrap'>
+                <Grid item wrap='nowrap' container>
                     <ListItemText>{props.children}</ListItemText>
                 </Grid>
             </Grid>
 
         </ListItem>
     </Grid>)
-}
-
-export default {
-    UtmLinkRender,
-    ListRender,
-    ListItemRender
-}
+}