Confirmation delete modal

.storybook/main.js

@@ -0,0 +1,40 @@
+// module.exports = {
+//   "stories": [
+//     "../src/**/*.stories.mdx",
+//     "../src/**/*.stories.@(js|jsx|ts|tsx)"
+//   ],
+//   "addons": [
+//     "@storybook/addon-links",
+//     "@storybook/addon-essentials",
+//     "@storybook/preset-create-react-app",
+//     "@storybook/addon-controls"
+//   ]
+// }
+const path = require("path");
+const toPath = (_path) => path.join(process.cwd(), _path);
+
+module.exports = {
+  "stories": [
+        "../src/**/*.stories.mdx",
+        "../src/**/*.stories.@(js|jsx|ts|tsx)"
+      ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-controls"
+  ],
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          "@emotion/core": toPath("node_modules/@emotion/react"),
+          "emotion-theming": toPath("node_modules/@emotion/react"),
+        },
+      },
+    };
+  },
+};

.storybook/preview.js

@@ -0,0 +1,17 @@
+import { ChakraProvider}  from "@chakra-ui/react";
+import customTheme from '../src/Theme/theme'
+import { Box } from "@chakra-ui/react";
+import React from 'react';
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+};
+
+export const decorators = [
+  (Story) => (
+    <ChakraProvider resetCSS theme={customTheme}>
+
+        <Story />
+
+    </ChakraProvider>
+  ),
+];

package.json

@@ -0,0 +1,64 @@
+{
+  "name": "eco-knowledge",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@chakra-ui/react": "^1.3.2",
+    "@emotion/react": "^11.1.5",
+    "@emotion/styled": "^11.1.5",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^12.7.0",
+    "babel-eslint": "^10.1.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "framer-motion": "^3.3.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-icons": "^4.2.0",
+    "react-scripts": "4.0.2",
+    "web-vitals": "^1.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public",
+    "chromatic": "npx chromatic --project-token=5db399c64768",
+    "eslint": "eslint .",
+    "eslint:fix": "eslint --fix ."
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.1.21",
+    "@storybook/addon-controls": "^6.1.21",
+    "@storybook/addon-essentials": "^6.1.21",
+    "@storybook/addon-links": "^6.1.21",
+    "@storybook/node-logger": "^6.1.21",
+    "@storybook/preset-create-react-app": "^3.1.6",
+    "@storybook/react": "^6.1.21",
+    "chromatic": "^5.7.0",
+    "eslint": "^7.23.0",
+    "eslint-config-prettier": "^8.1.0",
+    "prettier": "^2.2.1",
+    "prop-types": "^15.7.2"
+  }
+}

src/Components/Button/Button.stories.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Button, HStack } from "@chakra-ui/react";
+export default {
+  title: "Button",
+  component: Button,
+};
+
+export const Variants = () => {
+  return (
+    <HStack spacing="24px">
+      <Button
+        bg="gray.500"
+        color="gray.50"
+        mr="24px"
+        w="76px"
+        h="32px"
+        fontStyle="italic"
+      >
+        Cancel
+      </Button>
+      <Button
+        bg="gray.600"
+        color="gray.50"
+        w="105px"
+        h="32px"
+        fontStyle="italic"
+      >
+        Delete Note
+      </Button>
+    </HStack>
+  );
+};

src/Components/Modal/ConfirmationModal/ConfirmationDeleteModal.js

@@ -0,0 +1,84 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Button } from "@chakra-ui/react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  Text,
+} from "@chakra-ui/react";
+
+export const ConfirmationDeleteModal = ({
+  width,
+  height,
+  padding,
+  title = "Modal Title",
+  isModalOpen = false,
+  closeModal,
+  children = "Modal body content",
+}) => {
+  return (
+    <>
+      <Modal isOpen={isModalOpen} onClose={closeModal}>
+        <ModalOverlay bg="rgba(61, 77, 81, 0.3)" />
+        <ModalContent
+          borderRadius="4px"
+          width={width}
+          padding={padding}
+          maxWidth="704px"
+          height={height}
+        >
+          <ModalHeader p="0 0 8px 0">
+            <Text textStyle="Body.b1" color="gray.600">
+              {title}
+            </Text>
+          </ModalHeader>
+
+          <ModalBody p="0 0 0 " pl={["10px", "16px"]}>
+            <Text textStyle="Body.b2" color="gray.500">
+              {children}
+            </Text>
+          </ModalBody>
+
+          {/* Modal Footer */}
+          <ModalFooter p="0">
+            <Button
+              bg="gray.500"
+              color="gray.50"
+              mr="24px"
+              w="76px"
+              h="32px"
+              fontStyle="italic"
+              onClick={closeModal}
+            >
+              Cancel
+            </Button>
+            <Button
+              bg="gray.600"
+              color="gray.50"
+              w="105px"
+              h="32px"
+              fontStyle="italic"
+            >
+              Delete Note
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+ConfirmationDeleteModal.displayName = "ConfirmationDeleteModal";
+ConfirmationDeleteModal.propTypes = {
+  title: PropTypes.string,
+  children: PropTypes.string,
+  width:
+    PropTypes.arrayOf(PropTypes.number) || PropTypes.arrayOf(PropTypes.string),
+  height: PropTypes.number,
+  padding: PropTypes.arrayOf(PropTypes.string),
+  isModalOpen: PropTypes.bool,
+  closeModal: PropTypes.func,
+};

src/Components/Modal/ConfirmationModal/ConfirmationDeleteModal.stories.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { Modal, Button } from "@chakra-ui/react";
+import { useDisclosure } from "@chakra-ui/react";
+import { ConfirmationDeleteModal } from "./ConfirmationDeleteModal";
+
+export default {
+  title: "Modal",
+  component: Modal,
+};
+
+export function DeleteModal() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return (
+    <>
+      <Button onClick={onOpen} variant="primary" bg="gray.400" size="md">
+        Delete Note
+      </Button>
+      <ConfirmationDeleteModal
+        width={[400, 704]}
+        height={246}
+        padding={["10px", "32px"]}
+        title="Are you sure you would like to delete this note?"
+        isModalOpen={isOpen}
+        closeModal={onClose}
+      >
+        All the peices fit together like a puzzle. If one peice is broken, the
+        others will not fit together properly. Remember to keep track
+        ofeverything and keep ahead of the game so as not to miss the
+        importantbits. Speaking to colleagues regarding these issues is a good
+        idea.
+      </ConfirmationDeleteModal>
+    </>
+  );
+}

src/Components/Text/Text.stories.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { Text, HStack } from "@chakra-ui/react";
+
+export default {
+  title: "Text",
+  component: Text,
+};
+
+export const TextComponent = () => (
+  <Text textStyle="Body.b2" color="gray.500">
+    All the peices fit together like a puzzle. If one peice is broken, the
+    others will not fit together properly. Remember to keep track of everything
+    and keep ahead of the game so as not to miss the important bits. Speaking to
+    colleagues regarding these issues is a good idea.
+  </Text>
+);

src/Theme/Components/button.js

@@ -0,0 +1,48 @@
+// All my button override
+const Button = {
+  // The styles all button have in common
+  baseStyle: {
+    fontWeight: "medium",
+    fontSize: "14px",
+    lineHeight: "16px",
+  },
+  // 3 sizes: sm, md(default), lg
+  sizes: {
+    sm: {
+      width: "111px",
+      height: "32px",
+      padding: "8px 16px",
+    },
+    md: {
+      width: "127px",
+      height: "32px",
+      padding: "12px  24px",
+    },
+
+    lg: {
+      width: "143px",
+      height: "48px",
+      padding: "16px  32px",
+    },
+  },
+  // 3 variants: primary(solid), secondary , tertiary
+  variants: {
+    primary: {
+      bg: "primaryTeal.600",
+      color: "gray.50",
+      fontWeight: "medium",
+      borderRadius: "4px",
+    },
+    secondary: {
+      border: "2px solid",
+      borderColor: "primaryTeal.600",
+    },
+  },
+  // The default size and variant values
+  defaultProps: {
+    variant: "primary",
+    size: "md",
+  },
+};
+
+export default Button;

src/Theme/color.js

@@ -0,0 +1,23 @@
+// All custom colors declared here
+const colors = {
+  gray: {
+    50: "#FFFFFF",
+    100: "#F7FBFD",
+    200: "#EEF4F6",
+    300: "#D4DFE3",
+    400: "#94A3A8",
+    500: "#5A6D72",
+    600: "#3D4D51",
+    700: "#222C2F",
+  },
+  primaryTeal: {
+    100: "#E0F6FF",
+    200: "#B4E4F8",
+    300: "#82C6E3",
+    400: "#4CA6CD",
+    500: "#25799D",
+    600: "#0E5E81",
+    700: "#004766",
+  },
+};
+export default colors;