Additional stories

package.json

@@ -11,7 +11,7 @@
   "scripts": {
     "build": "npx vite build -c vite.config.lib.ts && tsc --emitDeclarationOnly --outDir dist && tsc-alias -p tsconfig.json && npm run build:patch",
     "watch": "npx vite build -c vite.config.lib.ts --watch",
-    "format": "npx --no-install prettier --write src/*.ts*",
+    "format": "npx --no-install prettier --write src/**/*.ts*",
     "prettier": "npx --no-install prettier -c src/*.ts*",
     "lint": "tsc --noEmit && npm run lint:ts && npm run prettier",
     "lint:ts": "npx --no-install eslint src/*.ts*",
@@ -91,4 +91,4 @@
   "dependencies": {
     "react-inlinesvg": "^2.3.0"
   }
-}
+}

src/components/Autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable react/jsx-props-no-spreading */
+import { Autocomplete } from "./Autocomplete";
+
+export default {
+  title: "Autocomplete",
+  component: Autocomplete,
+};
+
+// A wrapper function from Storybook that allows you to pass in props to your component. We use this for showing controls
+const Template = (args: any) => <Autocomplete {...args} />;
+
+export const AutocompleteSingle = Template.bind({});

src/components/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,23 @@
+import { ReactElement } from "react";
+
+import { Autocomplete as MaterialAutocomplete, TextField } from "@mui/material";
+
+export function Autocomplete(): JSX.Element {
+  return (
+    <MaterialAutocomplete
+      options={top100Films}
+      getOptionLabel={(option: any) => option.title}
+      renderInput={(params) => (
+        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
+      )}
+    />
+  );
+}
+
+const top100Films = [
+  { title: "The Shawshank Redemption", year: 1994 },
+  { title: "The Godfather", year: 1972 },
+  { title: "The Godfather: Part II", year: 1974 },
+  { title: "The Dark Knight", year: 2008 },
+  { title: "12 Angry Men", year: 1957 },
+];

src/components/Button/Button.tsx

@@ -8,6 +8,15 @@ interface Props extends ButtonProps {
   disabled?: boolean;
 }
 
+const button = {
+  borderRadius: "6px",
+  fontWeight: 400,
+  fontSize: "15px",
+  letterSpacing: 0,
+  padding: "7px 20px",
+  boxShadow: "none",
+};
+
 export function Button({
   text,
   onClick,
@@ -23,6 +32,7 @@ export function Button({
       disableElevation
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...rest}
+      sx={{ ...button }}
     >
       {text}
     </MuiButton>

src/components/Card/Card.tsx

@@ -1,12 +1,6 @@
 import { ReactElement } from "react";
 
-import {
-  Card as MaterialCard,
-  Paper,
-  Typography,
-  styled,
-
-} from "@mui/material";
+import { Card as MaterialCard, Paper, Typography, styled } from "@mui/material";
 import SVG from "react-inlinesvg";
 import { theme } from "../../theme";
 import { icons } from "../../icons";
@@ -56,7 +50,7 @@ export function Card(props: Props): JSX.Element {
           "button:last-child": {
             marginRight: "-8px",
           },
-          border: `1px solid ${props.warningDialog ? "#9F6DEA":"#02E098"}`,
+          border: `1px solid ${props.warningDialog ? "#9F6DEA" : "#02E098"}`,
         }}
       >
         {props.warningDialog && (

src/components/Chip/Chip.stories.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable react/jsx-props-no-spreading */
+import { Chip } from "./Chip";
+
+export default {
+  title: "Chip",
+  component: Chip,
+};
+
+// A wrapper function from Storybook that allows you to pass in props to your component. We use this for showing controls
+const Template = (args: any) => <Chip {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  label: "Chip",
+  closeButton: false,
+};

src/components/Chip/Chip.tsx

@@ -0,0 +1,54 @@
+import { MouseEvent, ReactElement } from "react";
+import { Chip as MuiChip, Avatar } from "@mui/material";
+import type { ChipProps } from "@mui/material/Chip";
+import SVG from "react-inlinesvg";
+import { icons } from "../../icons";
+import { theme } from "../../theme";
+
+interface Props extends ChipProps {
+  key: string;
+  onClick?: (event: MouseEvent) => void;
+  disabled?: boolean;
+  closeButton?: boolean;
+  //  data-testid?: string;
+  label: string;
+}
+
+export function Chip({
+  key,
+  onClick,
+  disabled,
+  label,
+  closeButton,
+  ...rest
+}: Props): ReactElement {
+  return (
+    <MuiChip
+      key={key}
+      variant="outlined"
+      avatar={
+        closeButton ? (
+          <Avatar
+            variant="circular"
+            sx={{ cursor: "pointer" }}
+            onClick={onClick}
+            data-testid="todo"
+          >
+            <SVG
+              width="15px"
+              src={icons.removeLabel}
+              fill={theme.palette.text.secondary}
+            />
+          </Avatar>
+        ) : null
+      }
+      label={label}
+    />
+  );
+}
+
+Chip.defaultProps = {
+  onClick: null,
+  disabled: false,
+  closeButton: true,
+};

src/components/Dialog/Dialog.stories.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable react/jsx-props-no-spreading */
+import { IconButton } from "../IconButton/IconButton";
+import { Dialog } from "./Dialog";
+
+const imgSrc = (src: string, type = "svg"): string =>
+  new URL(`/src/assets/${src}.${type}`, import.meta.url).href;
+
+export default {
+  title: "Dialog",
+  component: Dialog,
+  argTypes: {
+    // remove some property from the controls UI
+    // TODO possibly move this into a separate file
+    TriggerButton: {
+      table: {
+        disable: true,
+      },
+    },
+    warningDialog: {
+      table: {
+        disable: true,
+      },
+    },
+    close: {
+      table: {
+        disable: true,
+      },
+    },
+    afterClose: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+// A wrapper function from Storybook that allows you to pass in props to your component. We use this for showing controls
+const Template = (args: any) => (
+  <Dialog
+    {...args}
+    TriggerButton={
+      <IconButton
+        tooltip={{
+          name: "Open Dialog",
+        }}
+        icon={imgSrc("icon")}
+        size="medium"
+      />
+    }
+  />
+);
+
+export const StandardDialog = Template.bind({});
+export const ConfirmationDialog = Template.bind({});
+StandardDialog.args = {
+  title: "Standard Dialog",
+  children: "Content",
+  buttons: true,
+};
+ConfirmationDialog.args = {
+  title: "Confirmation Dialog",
+  children: "Content",
+  warningDialog: "true",
+  buttons: true,
+};

src/components/Dialog/Dialog.tsx

@@ -0,0 +1,99 @@
+import { ReactElement, useState, cloneElement, useEffect } from "react";
+import { Box, Dialog as MaterialDialog, Typography } from "@mui/material";
+import { Card } from "../Card/Card";
+import { Button } from "../Button/Button";
+
+interface Props {
+  children?: ReactElement | null;
+  TriggerButton: JSX.Element;
+  title: string;
+  warningDialog?: boolean;
+  close?: boolean;
+  afterClose?: () => void;
+  buttons?: boolean;
+}
+
+export function Dialog({
+  children,
+  title,
+  TriggerButton,
+  close,
+  warningDialog,
+  afterClose,
+  buttons,
+}: Props): ReactElement | null {
+  const [open, setOpen] = useState<boolean>(false);
+
+  const handleClick = (): void => {
+    setOpen(true);
+  };
+
+  const handleClose = (): void => {
+    setOpen(false);
+    // Reset defaults when Dialog is closed
+    if (afterClose) {
+      afterClose();
+    }
+  };
+
+  // externally close the Dialog
+  useEffect(() => {
+    if (close) {
+      setOpen(false);
+    }
+  }, [close]);
+
+  const dialogContent = (
+    <>
+      <Card
+        title={title}
+        handleClose={handleClose}
+        closeButton
+        warningDialog={warningDialog}
+      >
+        <>
+          <Typography>{children}</Typography>
+
+          {buttons && (
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                marginTop: "60px",
+              }}
+            >
+              <Button text="Button" color="secondary" variant="outlined" />
+              <Button
+                text="Button"
+                color={warningDialog ? "secondary" : "primary"}
+              />
+            </Box>
+          )}
+        </>
+      </Card>
+    </>
+  );
+
+  return (
+    <>
+      {cloneElement(TriggerButton, {
+        onClick: () => {
+          handleClick();
+          const { onClick } = TriggerButton.props as { onClick?: () => void };
+          if (onClick) onClick();
+        },
+      })}
+      <MaterialDialog open={open} onClose={handleClose}>
+        {dialogContent}
+      </MaterialDialog>
+    </>
+  );
+}
+
+Dialog.defaultProps = {
+  children: null,
+  close: null,
+  afterClose: null,
+  warningDialog: null,
+  buttons: false,
+};

src/components/Popper/Popper.tsx

@@ -0,0 +1,44 @@
+import {
+  Popper as MaterialPopper,
+  ClickAwayListener,
+  PopperPlacementType,
+  PopperProps,
+} from "@mui/material";
+
+interface Props extends PopperProps {
+  open: boolean;
+  anchorEl: HTMLButtonElement | null;
+  el: JSX.Element;
+  handleClickAway?: () => void;
+  offset?: [number, number];
+  popperPlacement?: PopperPlacementType;
+}
+
+export function Popper(props: Props): JSX.Element {
+  return (
+    <ClickAwayListener onClickAway={props.handleClickAway}>
+      <MaterialPopper
+        open={props.open}
+        anchorEl={props.anchorEl}
+        style={{ display: "flex" }}
+        placement={props.popperPlacement}
+        modifiers={[
+          {
+            name: "offset",
+            options: {
+              offset: props.offset,
+            },
+          },
+        ]}
+      >
+        {props.el}
+      </MaterialPopper>
+    </ClickAwayListener>
+  );
+}
+
+Popper.defaultProps = {
+  handleClickAway: null,
+  popperPlacement: "right",
+  offset: [10, 10],
+};