From c1c404d129e458c960e7b5222ec81cec3a8d2f4d Mon Sep 17 00:00:00 2001 From: darshan420 Date: Thu, 8 Apr 2021 20:25:05 +0530 Subject: [PATCH 1/5] Custom theme added --- src/Theme/Components/button.js | 48 ++++++++++++++++++++++ src/Theme/color.js | 23 +++++++++++ src/Theme/textStyle.js | 73 ++++++++++++++++++++++++++++++++++ src/Theme/theme.js | 22 ++++++++++ src/Theme/typography.js | 46 +++++++++++++++++++++ 5 files changed, 212 insertions(+) create mode 100644 src/Theme/Components/button.js create mode 100644 src/Theme/color.js create mode 100644 src/Theme/textStyle.js create mode 100644 src/Theme/theme.js create mode 100644 src/Theme/typography.js diff --git a/src/Theme/Components/button.js b/src/Theme/Components/button.js new file mode 100644 index 0000000..80905b5 --- /dev/null +++ b/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; diff --git a/src/Theme/color.js b/src/Theme/color.js new file mode 100644 index 0000000..ddcaebf --- /dev/null +++ b/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; diff --git a/src/Theme/textStyle.js b/src/Theme/textStyle.js new file mode 100644 index 0000000..8b33967 --- /dev/null +++ b/src/Theme/textStyle.js @@ -0,0 +1,73 @@ +const textStyles = { + Header: { + H1: { + fontSize: "64", + lineHeight: "72", + fontWeight: "light", + }, + H2: { + fontSize: "48", + lineHeight: "56", + fontWeight: "regular", + }, + H3: { + fontSize: "32", + lineHeight: "36", + fontWeight: "regular", + }, + H4: { + fontSize: "24", + lineHeight: "32", + fontWeight: "bold", + }, + H5: { + fontSize: "24", + lineHeight: "36", + fontWeight: "medium", + }, + H6: { + fontSize: "20", + lineHeight: "28", + fontWeight: "medium", + }, + H7: { + fontSize: "16", + lineHeight: "24", + fontWeight: "medium", + }, + }, + Body: { + b1: { + fontSize: "20", + lineHeight: "30", + fontWeight: "regular", + }, + b2: { + fontSize: "16", + lineHeight: "24", + fontWeight: "regular", + }, + b3: { + fontSize: "14", + lineHeight: "20", + fontWeight: "regular", + }, + b4Button: { + fontSize: "14", + lineHeight: "16", + fontWeight: "medium", + }, + b5Overline: { + fontSize: "12", + lineHeight: "20", + fontWeight: "medium", + }, + b6Caption: { + fontSize: "12", + lineHeight: "16", + fontWeight: "regular", + }, + }, +}; + +export default textStyles; diff --git a/src/Theme/theme.js b/src/Theme/theme.js new file mode 100644 index 0000000..f7b6e43 --- /dev/null +++ b/src/Theme/theme.js @@ -0,0 +1,22 @@ +// my main theme entrypoint file +import { extendTheme } from "@chakra-ui/react"; +import { theme as chakraTheme } from "@chakra-ui/react"; +import colors from "./color"; +import Button from "./Components/button"; +import typography from "./typography"; +import textStyles from "./textStyle"; + +const overrides = { + ...chakraTheme, + ...chakraTheme.fonts, + ...typography, + colors, + textStyles, + components: { + Button, + }, +}; + +const customTheme = extendTheme(overrides); + +export default customTheme; diff --git a/src/Theme/typography.js b/src/Theme/typography.js new file mode 100644 index 0000000..0f7e281 --- /dev/null +++ b/src/Theme/typography.js @@ -0,0 +1,46 @@ +const typography = { + fonts: { + body: "Roboto", + heading: "Roboto", + }, + fontSizes: { + 12: "12px", + 14: "14px", + 16: "16px", + 20: "20px", + 22: "22px", + 24: "24px", + 30: "30px", + 32: "32px", + 36: "36px", + 48: "48px", + 38: "38px", + 46: "46px", + 56: "56px", + 64: "64px", + }, + fontWeights: { + light: "300", + regular: "400", + medium: "500", + bold: "700", + }, + lineHeights: { + 16: "16px", + 20: "20px", + 22: "22px", + 24: "24px", + 28: "28px", + 30: "30px", + 32: "32px", + 36: "36px", + 38: "38px", + 46: "46px", + 48: "48px", + 54: "54px", + 56: "56px", + 64: "64px", + 72: "72px", + }, +}; +export default typography; From ef4de16a30f58bbb01ac86266986934e691fd930 Mon Sep 17 00:00:00 2001 From: darshan420 Date: Thu, 8 Apr 2021 20:27:06 +0530 Subject: [PATCH 2/5] Confirmation-delete-modal added --- src/Components/Button/Button.js | 17 ++++ src/Components/Button/Button.stories.js | 32 +++++++ .../ConfirmationDeleteModal.js | 84 +++++++++++++++++++ .../ConfirmationDeleteModal.stories.js | 34 ++++++++ src/Components/Text/Text.stories.js | 16 ++++ 5 files changed, 183 insertions(+) create mode 100644 src/Components/Button/Button.js create mode 100644 src/Components/Button/Button.stories.js create mode 100644 src/Components/Modal/ConfirmationModal/ConfirmationDeleteModal.js create mode 100644 src/Components/Modal/ConfirmationModal/ConfirmationDeleteModal.stories.js create mode 100644 src/Components/Text/Text.stories.js diff --git a/src/Components/Button/Button.js b/src/Components/Button/Button.js new file mode 100644 index 0000000..4081285 --- /dev/null +++ b/src/Components/Button/Button.js @@ -0,0 +1,17 @@ +import React from "react"; +import PropTypes from "prop-types"; +// 1. Import useStyleConfig +import { useStyleConfig } from "@chakra-ui/react"; +export const Button = (props) => { + const { variant, ...rest } = props; + + // 2. Reference `Button` stored in `theme.components` + const styles = useStyleConfig("Button", { variant }); + + // 3. Pass the computed styles into the `sx` prop + return ; +}; + +Button.propTypes = { + variant: PropTypes.string, +}; diff --git a/src/Components/Button/Button.stories.js b/src/Components/Button/Button.stories.js new file mode 100644 index 0000000..fbac30b --- /dev/null +++ b/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 ( + + + + + ); +}; diff --git a/src/Components/Modal/ConfirmationModal/ConfirmationDeleteModal.js b/src/Components/Modal/ConfirmationModal/ConfirmationDeleteModal.js new file mode 100644 index 0000000..3debc9b --- /dev/null +++ b/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 ( + <> + + + + + + {title} + + + + + + {children} + + + + {/* Modal Footer */} + + + + + + + + ); +}; +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, +}; diff --git a/src/Components/Modal/ConfirmationModal/ConfirmationDeleteModal.stories.js b/src/Components/Modal/ConfirmationModal/ConfirmationDeleteModal.stories.js new file mode 100644 index 0000000..a681399 --- /dev/null +++ b/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 ( + <> + + + 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. + + + ); +} diff --git a/src/Components/Text/Text.stories.js b/src/Components/Text/Text.stories.js new file mode 100644 index 0000000..fd14fe6 --- /dev/null +++ b/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 = () => ( + + 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. + +); From 45c63b7b9e20c8ccfd5fa8753ff39ac0f8f37c15 Mon Sep 17 00:00:00 2001 From: Darshan Patil <30354740+darshan420@users.noreply.github.com> Date: Sun, 11 Apr 2021 18:58:47 +0530 Subject: [PATCH 3/5] Deleted Button.js --- src/Components/Button/Button.js | 17 ----------------- 1 file changed, 17 deletions(-) delete mode 100644 src/Components/Button/Button.js diff --git a/src/Components/Button/Button.js b/src/Components/Button/Button.js deleted file mode 100644 index 4081285..0000000 --- a/src/Components/Button/Button.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -// 1. Import useStyleConfig -import { useStyleConfig } from "@chakra-ui/react"; -export const Button = (props) => { - const { variant, ...rest } = props; - - // 2. Reference `Button` stored in `theme.components` - const styles = useStyleConfig("Button", { variant }); - - // 3. Pass the computed styles into the `sx` prop - return ; -}; - -Button.propTypes = { - variant: PropTypes.string, -}; From eda2f32fa9ad194af4c5c86031f29fdead93d512 Mon Sep 17 00:00:00 2001 From: darshan420 Date: Mon, 12 Apr 2021 12:02:20 +0530 Subject: [PATCH 4/5] Story book setup added --- .storybook/main.js | 40 ++++++++++++++++++++++++++++++++++++++++ .storybook/preview.js | 17 +++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 .storybook/main.js create mode 100644 .storybook/preview.js diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..d3f502d --- /dev/null +++ b/.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"), + }, + }, + }; + }, +}; diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000..e32ffc3 --- /dev/null +++ b/.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) => ( + + + + + + ), +]; From 88d9d12515cdb74ab81bfc5a0c0547d904197db1 Mon Sep 17 00:00:00 2001 From: darshan420 Date: Mon, 12 Apr 2021 12:07:36 +0530 Subject: [PATCH 5/5] package json added --- package.json | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..b53fd93 --- /dev/null +++ b/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" + } +}