Merge branch 'release-1.0.48'

client/.storybook/main.js

@@ -0,0 +1,12 @@
+const path = require("path");
+
+module.exports = {
+  stories: ["../src/components/UI/**/*.stories.js"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-controls",
+    "storybook-addon-material-ui",
+  ],
+};

client/.storybook/preview.js

@@ -0,0 +1,8 @@
+import { muiTheme } from "storybook-addon-material-ui";
+import { theme as adminTheme } from "../src/theme/adminTheme.js";
+import clientTheme from "../src/theme/clientTheme.js";
+
+export const decorators = [muiTheme([adminTheme, clientTheme])];
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+};

client/package.json

@@ -13,7 +13,9 @@
     "eject": "react-scripts eject",
     "format": "prettier --write  \"**/*.{js,jsx}\"",
     "lint": "eslint -c .eslintrc.json --ignore-path .eslintignore  \"**/*.{js,jsx}\"",
-    "lint:fix": "eslint -c .eslintrc.json --ignore-path .eslintignore --fix  \"**/*.{js,jsx}\""
+    "lint:fix": "eslint -c .eslintrc.json --ignore-path .eslintignore --fix  \"**/*.{js,jsx}\"",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "dependencies": {
     "@date-io/moment": "^1.3.13",
@@ -60,6 +62,14 @@
     ]
   },
   "devDependencies": {
-    "prettier": "^2.2.1"
+    "@storybook/addon-actions": "^6.1.20",
+    "@storybook/addon-essentials": "^6.1.20",
+    "@storybook/addon-links": "^6.1.20",
+    "@storybook/node-logger": "^6.1.20",
+    "@storybook/preset-create-react-app": "^3.1.6",
+    "@storybook/react": "^6.1.20",
+    "prettier": "^2.2.1",
+    "react-syntax-highlighter": "^15.4.3",
+    "storybook-addon-material-ui": "^0.9.0-alpha.24"
   }
 }

client/src/App.js

@@ -7,7 +7,7 @@ import {
 } from "react-router-dom";
 import { makeStyles, ThemeProvider } from "@material-ui/core/styles";
 import { Grid, CssBaseline } from "@material-ui/core";
-import theme from "theme/materialUI";
+import theme from "theme/clientTheme";
 import { logout } from "services/account-service";
 import { tenantId, defaultCoordinates } from "helpers/Configuration";
 
@@ -47,7 +47,7 @@ import Home from "components/FoodSeeker/Home";
 import Results from "components/FoodSeeker/ResultsContainer";
 import Suggestion from "components/FoodSeeker/Suggestion";
 import ImportFile from "components/Admin/ImportOrganizations/ImportFile";
-import newTheme from "./theme/newTheme";
+import adminTheme from "./theme/adminTheme";
 
 const useStyles = makeStyles({
   app: () => ({
@@ -209,10 +209,10 @@ function App() {
                   </div>
                 </div>
               </Route>
-              {/* 
-              Following route provides backward-compatibilty for the 
-              http"//foodoasis.la/search Link that has been published at  
-              http://publichealth.lacounty.gov/eh/LACFRI/ShareAndDonate.htm 
+              {/*
+              Following route provides backward-compatibilty for the
+              http"//foodoasis.la/search Link that has been published at
+              http://publichealth.lacounty.gov/eh/LACFRI/ShareAndDonate.htm
               */}
               <Redirect from="/search" to="/organizations" />
               <Route path="/organizations">
@@ -228,7 +228,7 @@ function App() {
                 <Suggestion setToast={setToast} />
               </Route>
               <Route path="/organizationedit/:id?">
-                <ThemeProvider theme={newTheme}>
+                <ThemeProvider theme={adminTheme}>
                   <div className={classes.OrganizationEditWrapper}>
                     <OrganizationEdit setToast={setToast} user={user} />
                   </div>
@@ -243,7 +243,7 @@ function App() {
                 </div>
               </Route>
               <Route path="/verificationadmin">
-                <ThemeProvider theme={newTheme}>
+                <ThemeProvider theme={adminTheme}>
                   <div className={classes.verificationAdminWrapper}>
                     <VerificationAdmin
                       user={user}

client/src/components/Admin/ui/PrimaryButton.js

@@ -6,11 +6,11 @@ import PropTypes from "prop-types";
 import classNames from "classnames";
 import {
   white,
-  primaryColor,
-  hoverColor,
-  bodyTextColor,
-  inactiveButtonColor,
-  inactiveButtonTextColor,
+  primary,
+  hover,
+  bodyText,
+  inactiveButton,
+  inactiveButtonText,
 } from "../../../theme/colors";
 
 /**
@@ -30,46 +30,46 @@ const useStyles = makeStyles((theme) => ({
     color: white,
   },
   text: {
-    color: bodyTextColor,
+    color: bodyText,
     borderRadius: 0,
     "&:hover": {
       backgroundColor: "transparent",
-      borderBottom: `3px solid ${hoverColor}`,
+      borderBottom: `3px solid ${hover}`,
       transition: "none",
       margin: "-3px 0 -6px",
     },
     margin: "3px 0",
   },
   contained: {
-    backgroundColor: primaryColor,
+    backgroundColor: primary,
     "&:hover": {
-      backgroundColor: hoverColor,
+      backgroundColor: hover,
       "&:disabled": {
-        backgroundColor: inactiveButtonColor,
+        backgroundColor: inactiveButton,
       },
     },
     "&:disabled": {
-      backgroundColor: inactiveButtonColor,
-      color: inactiveButtonTextColor,
+      backgroundColor: inactiveButton,
+      color: inactiveButtonText,
     },
     lineHeight: "17px",
   },
   outlined: {
     backgroundColor: "transparent",
-    border: `1px solid ${primaryColor}`,
-    color: primaryColor,
+    border: `1px solid ${primary}`,
+    color: primary,
     "&:hover": {
       backgroundColor: "transparent",
-      border: `1px solid ${hoverColor}`,
-      color: hoverColor,
+      border: `1px solid ${hover}`,
+      color: hover,
       "&:disabled": {
         backgroundColor: "transparent",
       },
     },
     "&:disabled": {
       backgroundColor: "transparent",
-      border: `1px solid ${inactiveButtonTextColor}`,
-      color: inactiveButtonTextColor,
+      border: `1px solid ${inactiveButtonText}`,
+      color: inactiveButtonText,
     },
   },
   bigButtonStyles: theme.typography.overline,

client/src/components/FoodSeeker/ResultsFilters.js

@@ -11,7 +11,7 @@ import {
 } from "constants/stakeholder";
 import { isMobile } from "helpers";
 
-import theme from "theme/materialUI";
+import theme from "theme/clientTheme";
 import SwitchViewsButton from "components/FoodSeeker/SwitchViewsButton";
 import Search from "components/FoodSeeker/Search";
 
@@ -294,7 +294,7 @@ const ResultsFilters = ({
             className={classes.submit}
             startIcon={
               <SearchIcon fontSize="large" className={classes.searchIcon} />
-            } 
+            }
           /> */}
           </form>
         </Grid>

client/src/components/FoodSeeker/ResultsMap.js

@@ -10,7 +10,7 @@ import { DEFAULT_CATEGORIES } from "constants/stakeholder";
 import { isMobile } from "helpers";
 import StakeholderPreview from "components/FoodSeeker/StakeholderPreview";
 import StakeholderDetails from "components/FoodSeeker/StakeholderDetails";
-import theme from "theme/materialUI";
+import theme from "theme/clientTheme";
 import { defaultCoordinates } from "helpers/Configuration";
 
 const styles = {

client/src/components/UI/Box.js

@@ -0,0 +1,19 @@
+import React from "react";
+import MaterialBox from "@material-ui/core/Box";
+import PropTypes from "prop-types";
+
+const Box = ({ color = "#313233", bgcolor = "#F9F9F9", children, ...rest }) => {
+  return (
+    <MaterialBox color={color} bgcolor="#F9F9F9" p={3} {...rest}>
+      {children}
+    </MaterialBox>
+  );
+};
+
+Box.propTypes = {
+  color: PropTypes.string,
+  bgcolor: PropTypes.string,
+  children: PropTypes.element.isRequired,
+};
+
+export default Box;

client/src/components/UI/Button.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { Button as MaterialButton } from "@material-ui/core";
+import PropTypes from "prop-types";
+import { ICON_DICT } from "./IconButton";
+
+const Base = ({ children, color = "primary", ...props }) => {
+  return (
+    <MaterialButton variant="contained" color={color} {...props}>
+      {children}
+    </MaterialButton>
+  );
+};
+
+Base.propTypes = {
+  children: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  color: PropTypes.string,
+};
+
+const Button = ({ icon, children, ...props }) => {
+  const Icon = ICON_DICT[icon];
+  if (icon) {
+    return (
+      <Base startIcon={<Icon />} {...props}>
+        {children}
+      </Base>
+    );
+  }
+  return <Base {...props}>{children}</Base>;
+};
+
+export default Button;
+
+Button.propTypes = {
+  kind: PropTypes.string,
+  icon: PropTypes.oneOf([
+    "add",
+    "delete",
+    "check",
+    "close",
+    "save",
+    "edit",
+    "cancel",
+    "search",
+    "details",
+    "remove",
+  ]),
+};

client/src/components/UI/IconButton.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { IconButton as MaterialIconButton } from "@material-ui/core";
+import PropTypes from "prop-types";
+import {
+  Add,
+  ArrowDownward,
+  ArrowUpward,
+  Cancel,
+  Check,
+  Close,
+  Delete,
+  Details,
+  Edit,
+  Remove,
+  Save,
+  Search,
+} from "@material-ui/icons";
+
+const IconButton = ({ kind, ...props }) => {
+  const Icon = ICON_DICT[kind];
+  return (
+    <MaterialIconButton
+      variant="contained"
+      color="default"
+      aria-label={props.ariaLabel}
+      {...props}
+    >
+      <Icon />
+    </MaterialIconButton>
+  );
+};
+
+IconButton.propTypes = {
+  ariaLabel: PropTypes.string.isRequired,
+  kind: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+};
+
+export default IconButton;
+
+export const ICON_DICT = {
+  add: Add,
+  arrowUp: ArrowUpward,
+  arrowDown: ArrowDownward,
+  delete: Delete,
+  check: Check,
+  close: Close,
+  save: Save,
+  edit: Edit,
+  cancel: Cancel,
+  search: Search,
+  details: Details,
+  remove: Remove,
+};

client/src/components/UI/Input.js

@@ -0,0 +1,21 @@
+import React from "react";
+import TextField from "@material-ui/core/TextField";
+import PropTypes from "prop-types";
+
+const Input = (props) => {
+  return (
+    <TextField
+      {...props}
+      label={props.label}
+      onChange={(e) => props.onChange(e.target.value)}
+    />
+  );
+};
+
+Input.propTypes = {
+  label: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
+};
+
+export default Input;

client/src/components/UI/helpers.js

@@ -0,0 +1,5 @@
+import { muiTheme } from "storybook-addon-material-ui";
+import { theme as adminTheme } from "../../theme/adminTheme";
+import clientTheme from "../../theme/clientTheme";
+
+export const decorators = muiTheme([adminTheme, clientTheme]);