🅾️ Added JSON data files, and rearranging some components

Signed-off-by: Srikant Sahoo <[email protected]>

Author: srikant-code

package-lock.json

@@ -0,0 +1,46 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+import { ICONS } from "../../utils/constants";
+import IconButton from "@material-ui/core/IconButton";
+import PositionedPopper from "./popper";
+import KeyShortcuts from "./keyShortcuts";
+import KEY_SHORTCUTS from "../../utils/keyShortcuts";
+import Theme from "../../utils/theme";
+import { ICONS_SVG } from "../../utils/theme";
+import IconWrapper from "./iconWrapper";
+import Avatar from "@material-ui/core/Avatar";
+
+const useStyles = makeStyles((theme) => ({
+  small: {
+    width: theme.spacing(3),
+    height: theme.spacing(3),
+  },
+  large: {
+    width: theme.spacing(7),
+    height: theme.spacing(7),
+  },
+}));
+
+// TODO: Add badges and avatars.js(which will contain a list of MetabAvatar)
+// and <AvatarGroup />(Material UI component)
+// Documentation: https://material-ui.com/components/avatars/
+
+const MetabAvatar = (props) => {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  return (
+    <>
+      {props.type === "letter" ? (
+        <Avatar className={classes.small} variant="square">
+          H
+        </Avatar> // classname - small | large, variant - square | rounded
+      ) : (
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      )}
+    </>
+  );
+};
+
+export default MetabAvatar;

src/components/atomic/avatar.js

@@ -32,6 +32,7 @@ const useStyles = makeStyles((theme) => ({
 // -title,
 // extra sizes of icon
 
+// TODO: This is ICON BUTTON but also create a normal button and its variants
 const MetabIconButton = (props) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState(null);
@@ -58,15 +59,13 @@ const MetabIconButton = (props) => {
           : handleMouseEnter("bottom")
       }
       onMouseLeave={handleMouseLeave()}
-      title={props.title ? props.title : ""}
-    >
+      title={props.title ? props.title : ""}>
       {props?.showPopOver && props?.popOverContent ? (
         <PositionedPopper
           open={open}
           anchorEl={anchorEl}
           placement={placement}
-          paperCSS={props?.paperCSS}
-        >
+          paperCSS={props?.paperCSS}>
           {props?.popOverContent ? (
             <>
               {props?.children?.name ? (
@@ -90,8 +89,7 @@ const MetabIconButton = (props) => {
           <img
             src={props.iconURL ? props.iconURL : ICONS[0]}
             alt={props.iconAltText ? props.iconAltText : "icon"}
-            style={{ width: "15px", height: "15px" }}
-          ></img>
+            style={{ width: "15px", height: "15px" }}></img>
         ) : (
           <IconWrapper css={props.children?.css}>
             {props.children?.svg}

src/components/atomic/avatars.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+import { ICONS } from "../../utils/constants";
+import IconButton from "@material-ui/core/IconButton";
+import PositionedPopper from "./popper";
+import KeyShortcuts from "./keyShortcuts";
+import KEY_SHORTCUTS from "../../utils/keyShortcuts";
+import Theme from "../../utils/theme";
+import { ICONS_SVG } from "../../utils/theme";
+import IconWrapper from "./iconWrapper";
+import { Chip } from "@material-ui/core";
+import DoneIcon from "@material-ui/icons/Done";
+
+const useStyles = makeStyles((theme) => ({
+  button: {
+    width: "fit-content",
+    height: "fit-content",
+  },
+}));
+
+// MetabChip contains logic for one chip
+// TODO: Remove excessive import statements
+
+const MetabChip = (props) => {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleDelete = () => {
+    console.info("You clicked the delete icon.");
+  };
+
+  const handleClick = () => {
+    console.info("You clicked the Chip.");
+  };
+
+  // TODO: onclick, clickable property, onDelete, Avatar(with img & letter)
+  // Documentation: https://material-ui.com/components/chips/#chip
+
+  return (
+    <Chip
+      size={props?.size ? props.size : "small"} // small or medium
+      variant={props?.variant ? props.variant : "default"} // default or outlined
+      label={props?.label ? props.label : "chip"}
+      avatar={"wda"} // TODO: CustomAvatar <Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />
+      onClick={handleClick}
+      onDelete={handleDelete}
+      deleteIcon={<DoneIcon />}
+      icon={<DoneIcon />}
+      href={props?.href ? props.href : "#chip"}
+    />
+  );
+};
+
+export default MetabChip;

src/components/atomic/buttons.js renamed to src/components/atomic/button.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Chip from "@material-ui/core/Chip";
+import Paper from "@material-ui/core/Paper";
+import TagFacesIcon from "@material-ui/icons/TagFaces";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    justifyContent: "center",
+    flexWrap: "wrap",
+    listStyle: "none",
+    padding: theme.spacing(0.5),
+    margin: 0,
+  },
+  chip: {
+    margin: theme.spacing(0.5),
+  },
+}));
+
+// Documentation: https://material-ui.com/components/chips/#chip
+// TODO: Customize chips array to your needs, pass on chip array
+
+export default function MetabChips() {
+  const classes = useStyles();
+  const [chipData, setChipData] = React.useState([
+    { key: 0, label: "Angular" },
+    { key: 1, label: "jQuery" },
+    { key: 2, label: "Polymer" },
+    { key: 3, label: "React" },
+    { key: 4, label: "Vue.js" },
+  ]);
+
+  const handleDelete = (chipToDelete) => () => {
+    setChipData((chips) =>
+      chips.filter((chip) => chip.key !== chipToDelete.key)
+    );
+  };
+
+  return (
+    <Paper component="ul" className={classes.root}>
+      {chipData.map((data) => {
+        let icon;
+
+        if (data.label === "React") {
+          icon = <TagFacesIcon />;
+        }
+
+        return (
+          <li key={data.key}>
+            <Chip
+              icon={icon}
+              label={data.label}
+              onDelete={data.label === "React" ? undefined : handleDelete(data)}
+              className={classes.chip}
+            />
+          </li>
+        );
+      })}
+    </Paper>
+  );
+}

src/components/atomic/chip.js

@@ -6,6 +6,9 @@ const useStyles = (props) =>
     svg: { ...props.css },
   });
 
+// TODO: IconWrapper - write proper comments don't know what it is doing but
+// it is used inside buttons.js MetabIconButton Component
+
 const IconWrapper = (props) => {
   const { svg } = useStyles(props)();
 

src/components/atomic/chips.js

@@ -14,6 +14,9 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+// KeyShortcuts has the logic to display Key shortcuts with proper
+// TODO: OS key layouts
+
 const KeyShortcuts = (props) => {
   const classes = useStyles();
   let keys = props.children.split("|");