Select & MultiSelect Chip Colors - ROWY-135

CONTRIBUTING.md

@@ -22,11 +22,21 @@ to start.
 
 ## Working on existing issues
 
-
-
-Before you get started working on an [issue](https://github.com/rowyio/rowy/issues), please make sure to share that you are working on it by commenting on the issue and posting a message on #contributions channel in Rowy's [Discord](https://discord.com/invite/fjBugmvzZP). The maintainers will then assign the issue to you after making sure any relevant information or context in addition is provided before you can start on the task.
-
-Once you are assigned a task, please provide periodic updates or share any questions or roadblocks on either discord or the Github issue, so that the commmunity or the project maintainers can provide you any feedback or guidance as needed. If you are inactive for more than 1-2 week on a issue that was assigned to you, then we will assume you have stopped working on it and we will unassign it from you - so that we can give a chance to others in the community to work on it.
+Before you get started working on an
+[issue](https://github.com/rowyio/rowy/issues), please make sure to share that
+you are working on it by commenting on the issue and posting a message on
+#contributions channel in Rowy's
+[Discord](https://discord.com/invite/fjBugmvzZP). The maintainers will then
+assign the issue to you after making sure any relevant information or context in
+addition is provided before you can start on the task.
+
+Once you are assigned a task, please provide periodic updates or share any
+questions or roadblocks on either discord or the Github issue, so that the
+commmunity or the project maintainers can provide you any feedback or guidance
+as needed. If you are inactive for more than 1-2 week on a issue that was
+assigned to you, then we will assume you have stopped working on it and we will
+unassign it from you - so that we can give a chance to others in the community
+to work on it.
 
 ## File a feature request
 

README.md

@@ -1,15 +1,14 @@
-<p align="center">
-<img src="src/assets/logo-sticker.svg" alt="Rowy" height="69" />
-</p>
+<a href="https://www.rowy.io/" target="_blank">
+<img width="100%" src="https://user-images.githubusercontent.com/307298/218350866-cfd7c011-2247-4074-8b1d-06c26a4d0b96.png" />
+</a>
 
-<h3 align="center">
-✨ Low-code backend ✨ <br/>
-</h3>
 <h4 align="center">
-Manage your database and build automations as easy as using a spreadsheet. 
+✨ Airtable-like UI for managing database ✨ Build any automation, with or without code ✨
 </h4>
 <p align="center" >
-Connect to your database (Firestore), manage data on an Airtable-like UI with role based access controls. Build cloud function workflows in JS/TS using any NPM or APIs. Forget CLIs, configs, and DevOps. Focus on building your apps with a platform designed for developer productivity. Low-code for Firebase and Google Cloud.
+Connect to your database and create Cloud Functions in low-code - without leaving your browser.<br/>
+Focus on building your apps.
+Low-code for Firebase and Google Cloud.
 </p>
 
 <div align="center">
@@ -27,27 +26,35 @@ Connect to your database (Firestore), manage data on an Airtable-like UI with ro
 [![GitHub stars](https://img.shields.io/github/stars/rowyio/rowy)](https://github.com/rowyio/rowy/stargazers/)
 
 </div>
-<img width="100%" src="https://user-images.githubusercontent.com/307298/157184506-f94f3f5b-e6d3-49df-9a2c-f665511883f2.png" />
 
 ## Live Demo
 
 💥 Check out the [live demo](https://demo.rowy.io/) of Rowy 💥
 
-## Quick Deploy
-
-Set up Rowy on your Google Cloud Platform project with this easy deploy button.
-
-[<img width="250" alt="Guided quick start button" src="https://user-images.githubusercontent.com/307298/185548050-e9208fb6-fe53-4c84-bbfa-53c08e03c15f.png">](https://rowy.app/)
-
-https://rowy.app
-
-## Documentation
-
-You can find the full documentation with how-to guides and templates
-[here](http://docs.rowy.io/).
-
 ## Features
 
+<!-- <table>
+    <tr>
+    <th>
+      <a href="#">Database</a>
+    </th>
+    <th>
+      <a href="#">Code</a>
+    </th>
+    </tr>
+    <tr>
+    <td>
+        <a href="#">
+        <img src=""/>
+    </a>
+    </td>
+    <td>
+        <a href="#">
+        <img src=""/>
+    </a>
+    </td>
+    </tr>
+</table> -->
 https://user-images.githubusercontent.com/307298/157185793-f67511cd-7b7b-4229-9589-d7defbf7a63f.mp4
 
 <!-- <img width="85%" src="https://firebasestorage.googleapis.com/v0/b/rowyio.appspot.com/o/publicDemo%2FRowy%20Website%20Video%20GIF%20Small.gif?alt=media&token=3f699a8f-c1f2-4046-8ed5-e4ff66947cd8" />
@@ -89,26 +96,27 @@ https://user-images.githubusercontent.com/307298/157185793-f67511cd-7b7b-4229-95
 - Built in user management
 - Customizable views for different user roles
 
-## Install
+## Quick guided install
 
-Set up Rowy on your Google Cloud project with this one-click deploy button. Your
-data and cloud functions stay on your own Firestore/GCP.
+Set up Rowy on your Google Cloud Platform project with this easy deploy button. Your
+data and cloud functions stay on your own Firestore/GCP and is managed via a cloud run instance that operates exclusively on your GCP project. So we do do not access or store any of your data on Rowy.
 
-[![Run on Google Cloud](https://deploy.cloud.run/button.svg)](https://rowy.app/)
+[<img width="200" alt="Guided quick start button" src="https://user-images.githubusercontent.com/307298/185548050-e9208fb6-fe53-4c84-bbfa-53c08e03c15f.png">](https://rowy.app/)
+
+https://rowy.app
 
-The one-click deploy makes the process of setting up easy with a step by step
-guide and ensures your project is setup correctly.
+## Documentation
+
+You can find the full documentation with how-to guides and templates
+[here](http://docs.rowy.io/).
 
-It deploys [Rowy Run](https://github.com/rowyio/rowyrun), an open-source Cloud
-Run instance that operates exclusively on your GCP project. So we never have
-access to your service account or any of your data.
+## Manual Install
 
-Alternatively, you can manually install by
-[following this guide](https://docs.rowy.io/setup/install).
+We recommend the [quick guided install](https://github.com/rowyio/rowy#quick-guided-install) option above. Manual install option is only recommended if you want to develop and contribute to the project. Follow this [guide](https://docs.rowy.io/setup/install#option-2-manual-install) for manual setup.
 
 ## Roadmap
 
-[View our roadmap](https://demo.rowy.io/table/roadmap) on Rowy - Upvote,
+[View our roadmap](https://roadmap.rowy.io/) on Rowy - Upvote,
 downvote, share your thoughts!
 
 If you'd like to propose a feature, submit an issue
@@ -129,5 +137,5 @@ If you'd like to propose a feature, submit an issue
 
 ## Help
 
-- Live chat support on [Discord](https://discord.gg/fjBugmvzZP)
+- Live chat support on [Discord](https://www.rowy.io/discord)
 - [Email](mailto:[email protected])

src/components/ColorPickerInput.tsx

@@ -43,6 +43,7 @@ export default function ColorPickerInput({
   const [localValue, setLocalValue] = useState(value);
   const [width, setRef] = useResponsiveWidth();
   const theme = useTheme();
+  const isDark = theme.palette.mode === "dark" ? true : false;
 
   return (
     <Box
@@ -61,6 +62,9 @@ export default function ColorPickerInput({
               boxSizing: "unset",
             },
           },
+          ".rcp-dark": {
+            "--rcp-background": "transparent",
+          },
         },
       ]}
     >
@@ -70,6 +74,7 @@ export default function ColorPickerInput({
         color={localValue}
         onChange={(color) => setLocalValue(color)}
         onChangeComplete={onChangeComplete}
+        dark={isDark}
       />
     </Box>
   );

src/components/ColumnModals/ColumnConfigModal/ColumnConfig.tsx

@@ -78,7 +78,7 @@ export default function ColumnConfigModal({
     ) {
       setShowRebuildPrompt(true);
     }
-    const updatedConfig = set({ ...newConfig }, key, update);
+    const updatedConfig = set(newConfig, key, update); // Modified by @devsgnr, spread operator `{...newConfig}` instead of just `newConfig` was preventing multiple calls from running properly
     setNewConfig(updatedConfig);
     validateSettings();
   };

src/components/FormattedChip.tsx

@@ -1,26 +1,39 @@
 import { Chip, ChipProps } from "@mui/material";
+import palette, { paletteToMui } from "@src/theme/palette";
+import { useTheme } from "@mui/material";
+import { isEqual } from "lodash-es";
 
 export const VARIANTS = ["yes", "no", "maybe"] as const;
 const paletteColor = {
-  yes: "success",
-  maybe: "warning",
-  no: "error",
+  yes: paletteToMui(palette.green),
+  maybe: paletteToMui(palette.yellow),
+  no: paletteToMui(palette.aRed),
 } as const;
 
-// TODO: Create a more generalised solution for this
+// Switched to a more generalized solution - adding backwards compatibility to maintain [Yes, No, Maybe] colors even if no color is selected
+// Modified by @devsgnr
 export default function FormattedChip(props: ChipProps) {
+  const defaultColor = paletteToMui(palette.aGray);
+  const { mode } = useTheme().palette;
+  const fallback = { backgroundColor: defaultColor[mode] };
+  const { sx, ...newProps } = props;
+
   const label =
     typeof props.label === "string" ? props.label.toLowerCase() : "";
+  const inVariant = VARIANTS.includes(label as any);
 
-  if (VARIANTS.includes(label as any)) {
-    return (
-      <Chip
-        size="small"
-        color={paletteColor[label as typeof VARIANTS[number]]}
-        {...props}
-      />
-    );
-  }
-
-  return <Chip size="small" {...props} />;
+  return (
+    <Chip
+      size="small"
+      sx={
+        inVariant && isEqual(props.sx, fallback)
+          ? {
+              backgroundColor:
+                paletteColor[label as typeof VARIANTS[number]][mode],
+            }
+          : props.sx
+      }
+      {...newProps}
+    />
+  );
 }

src/components/SelectColors/CustomizeColorModal.tsx

@@ -0,0 +1,109 @@
+import { FC, useEffect, useState } from "react";
+import Button from "@mui/material/Button";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import { Chip, Typography } from "@mui/material";
+import Modal from "@src/components/Modal";
+import ColorPickerInput from "@src/components/ColorPickerInput";
+import { toColor } from "react-color-palette";
+import { SelectColorThemeOptions } from ".";
+
+interface CustomizeColor {
+  currentColor: SelectColorThemeOptions;
+  onChange: (value: SelectColorThemeOptions) => void;
+}
+
+const CustomizeColorModal: FC<CustomizeColor> = ({
+  currentColor,
+  onChange,
+}) => {
+  const [color, setColor] = useState<SelectColorThemeOptions>(currentColor);
+
+  /* Update color value onFocus */
+  useEffect(() => {
+    setColor(currentColor);
+  }, [currentColor]);
+
+  /* Pass value to the onChange function */
+  const handleChange = (color: SelectColorThemeOptions) => {
+    setColor(color);
+    onChange(color);
+  };
+
+  /* MUI Specific state */
+  const [open, setOpen] = useState<boolean>(false);
+
+  /* MUI Menu event handlers */
+  const handleClick = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div>
+      <Button size="small" color="success" variant="text" onClick={handleClick}>
+        Customise
+      </Button>
+      <Modal
+        title="Customize Color"
+        aria-labelledby="custom-color-picker-modal"
+        aria-describedby="custom-color-picker-modal"
+        open={open}
+        onClose={handleClose}
+        disableBackdropClick
+      >
+        <Box display="grid" gridTemplateColumns="repeat(6, 1fr)" gap={1}>
+          {/* Light Theme Customize Color */}
+          <Box gridColumn="span 3">
+            <ColorPickerInput
+              value={toColor("hex", color.light)}
+              onChangeComplete={(value) =>
+                handleChange({ ...color, ...{ light: value.hex } })
+              }
+            />
+            <Grid container gap={1} py={1} px={2} alignItems="center">
+              <Grid item>
+                <Typography fontSize={13} fontWeight="light">
+                  Light Theme
+                </Typography>
+              </Grid>
+              <Grid item>
+                <Chip
+                  component="small"
+                  size="small"
+                  label="Option 1"
+                  sx={{ backgroundColor: color.light, color: "black" }}
+                />
+              </Grid>
+            </Grid>
+          </Box>
+
+          {/* Dark Theme Customize Color */}
+          <Box gridColumn="span 3">
+            <ColorPickerInput
+              value={toColor("hex", color.dark)}
+              onChangeComplete={(value) =>
+                handleChange({ ...color, ...{ dark: value.hex } })
+              }
+            />
+            <Grid container gap={1} py={1} px={2} alignItems="center">
+              <Grid item>
+                <Typography fontSize={13} fontWeight="light">
+                  Dark Theme
+                </Typography>
+              </Grid>
+              <Grid item>
+                <Chip
+                  component="small"
+                  size="small"
+                  label="Option 1"
+                  sx={{ backgroundColor: color.dark, color: "white" }}
+                />
+              </Grid>
+            </Grid>
+          </Box>
+        </Box>
+      </Modal>
+    </div>
+  );
+};
+
+export default CustomizeColorModal;