From cae7e8e3c20892ddfab900fa7c941d8950cd5965 Mon Sep 17 00:00:00 2001 From: Gameonn Date: Wed, 4 May 2022 10:09:07 +0530 Subject: [PATCH 1/3] Add ButtonType component --- package-lock.json | 13 ++++---- package.json | 1 + src/App.js | 5 ++- src/Button.js | 34 -------------------- src/components/Button.js | 39 +++++++++++++++++++++++ src/{ => components}/Button.module.css | 0 src/components/ButtonType.js | 38 +++++++++++++++++++++++ src/{ => components}/Main.js | 43 +++++++++++++++----------- src/{ => components}/Page.js | 0 9 files changed, 112 insertions(+), 61 deletions(-) delete mode 100644 src/Button.js create mode 100644 src/components/Button.js rename src/{ => components}/Button.module.css (100%) create mode 100644 src/components/ButtonType.js rename src/{ => components}/Main.js (84%) rename src/{ => components}/Page.js (100%) diff --git a/package-lock.json b/package-lock.json index 834c5e5..5976b9f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", "@testing-library/user-event": "^13.5.0", + "nanoid": "^3.3.4", "react": "^18.0.0", "react-dom": "^18.0.0", "react-scripts": "5.0.1", @@ -11151,9 +11152,9 @@ } }, "node_modules/nanoid": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz", - "integrity": "sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==", + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -24075,9 +24076,9 @@ } }, "nanoid": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz", - "integrity": "sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==" + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==" }, "natural-compare": { "version": "1.4.0", diff --git a/package.json b/package.json index e71c92d..3a9bba3 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", "@testing-library/user-event": "^13.5.0", + "nanoid": "^3.3.4", "react": "^18.0.0", "react-dom": "^18.0.0", "react-scripts": "5.0.1", diff --git a/src/App.js b/src/App.js index e6a8ee4..bed7f3b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,13 @@ -import Page from "./Page"; +import Page from "./components/Page"; import "./App.css"; const App = () => { - console.log("App"); return (
- Created By: Gameonn{" "} + Created By: Gameonn - devChallenges.io
diff --git a/src/Button.js b/src/Button.js deleted file mode 100644 index ecfd5f3..0000000 --- a/src/Button.js +++ /dev/null @@ -1,34 +0,0 @@ -import styles from "./Button.module.css"; - -const Button = ({ - variant, - text, - disableShadow, - states, - disabled, - size, - color, - startIcon, - endIcon, - children -}) => { - return ( - - ); -}; - -export default Button; diff --git a/src/components/Button.js b/src/components/Button.js new file mode 100644 index 0000000..10cc692 --- /dev/null +++ b/src/components/Button.js @@ -0,0 +1,39 @@ +import styles from "./Button.module.css"; + +const Button = (...props) => { + console.log(props, "Button"); + return

Hey

; +}; + +// const Button = ({ +// variant, +// text, +// disableShadow, +// states, +// disabled, +// size, +// color, +// startIcon, +// endIcon, +// children +// }) => { +// return ( +// +// ); +// }; + +export default Button; diff --git a/src/Button.module.css b/src/components/Button.module.css similarity index 100% rename from src/Button.module.css rename to src/components/Button.module.css diff --git a/src/components/ButtonType.js b/src/components/ButtonType.js new file mode 100644 index 0000000..e3cb549 --- /dev/null +++ b/src/components/ButtonType.js @@ -0,0 +1,38 @@ +import Button from "./Button"; +import { FlexboxGrid, Divider } from "rsuite"; +import { nanoid } from "nanoid"; + +let styleObj = { + display: "block", + height: "40px" +}; + +const ButtonType = ({ title, types, set }) => { + // console.log(types, "types"); + let item = {}; + let selectedTypes = Object.fromEntries( + Object.keys(types).filter(([key]) => key.includes(set)) + )[set]; + // console.log(selectedTypes); + return ( +
+ {title} + + {selectedTypes && + selectedTypes.map(type => { + item[set] = type; + return ( + + {`
+ ); +}; + +export default ButtonType; diff --git a/src/Main.js b/src/components/Main.js similarity index 84% rename from src/Main.js rename to src/components/Main.js index 280ddcb..b4d6934 100644 --- a/src/Main.js +++ b/src/components/Main.js @@ -1,4 +1,5 @@ import Button from "./Button"; +import ButtonType from "./ButtonType"; import { FlexboxGrid, Divider } from "rsuite"; let styleObj = { @@ -6,30 +7,36 @@ let styleObj = { height: "40px" }; +const variantTypes = ["", "outline", "text"]; +const colorTypes = ["default", "primary", "danger", "secondary"]; +const sizeTypes = ["xs", "sm", "md", "lg"]; +const startIconTypes = ["home", "bookmarks", "bolt", "book"]; +const endIconTypes = ["toys", "whatshot", "weekend", "vignette"]; + +const types = { + color: ["default", "primary", "danger", "secondary"], + size: ["xs", "sm", "md", "lg"], + variant: ["", "outline", "text"], + startIcon: ["home", "bookmarks", "bolt", "book"], + endIcon: ["toys", "whatshot", "weekend", "vignette"] +}; + const Main = () => { - console.log("Main"); return (

Buttons


- Normal - - - {`
+ ); +}; + +export default ButtonType; diff --git a/src/components/ButtonType.js b/src/components/ButtonType.js deleted file mode 100644 index e3cb549..0000000 --- a/src/components/ButtonType.js +++ /dev/null @@ -1,38 +0,0 @@ -import Button from "./Button"; -import { FlexboxGrid, Divider } from "rsuite"; -import { nanoid } from "nanoid"; - -let styleObj = { - display: "block", - height: "40px" -}; - -const ButtonType = ({ title, types, set }) => { - // console.log(types, "types"); - let item = {}; - let selectedTypes = Object.fromEntries( - Object.keys(types).filter(([key]) => key.includes(set)) - )[set]; - // console.log(selectedTypes); - return ( -
- {title} - - {selectedTypes && - selectedTypes.map(type => { - item[set] = type; - return ( - - {`
- ); -}; - -export default ButtonType; diff --git a/src/components/Main.js b/src/components/Main.js index b4d6934..c90268d 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -1,5 +1,5 @@ -import Button from "./Button"; -import ButtonType from "./ButtonType"; +import Button from "./Button/Button"; +import ButtonType from "./Button/ButtonType"; import { FlexboxGrid, Divider } from "rsuite"; let styleObj = { @@ -16,7 +16,7 @@ const endIconTypes = ["toys", "whatshot", "weekend", "vignette"]; const types = { color: ["default", "primary", "danger", "secondary"], size: ["xs", "sm", "md", "lg"], - variant: ["", "outline", "text"], + variant: ["", "outline", "bold", "text"], startIcon: ["home", "bookmarks", "bolt", "book"], endIcon: ["toys", "whatshot", "weekend", "vignette"] }; @@ -29,12 +29,8 @@ const Main = () => { - - + + Colors diff --git a/src/components/Menu.js b/src/components/Menu.js new file mode 100644 index 0000000..26696e7 --- /dev/null +++ b/src/components/Menu.js @@ -0,0 +1,102 @@ +import React, { useState } from "react"; +import { Sidenav, Nav, Dropdown, Navbar, Sidebar } from "rsuite"; +import { + ArrowRightLine as AngleRight, + Code, + SiteFill, + ArrowLeftLine as AngleLeft, + Peoples as Group, + Rate, + AdvancedAnalytics as LogoAnalytics, + Dashboard, + Grid +} from "@rsuite/icons"; +import "rsuite/dist/rsuite.min.css"; + +const headerStyles = { + padding: 18, + fontSize: 16, + height: 56, + background: "#34c3ff", + color: " #fff", + whiteSpace: "nowrap", + overflow: "hidden" +}; + +const NavToggle = ({ expand, onChange }) => { + return ( + + + + + + ); +}; + +const Menu = () => { + const [expand, setExpand] = useState(true); + return ( +
+ + +
+ + + Devchallenges.io + +
+ + + + + + + setExpand(!expand)} /> + +
+ ); +}; + +export default Menu; diff --git a/src/components/Page.js b/src/components/Page.js index d8a8ec9..b256567 100644 --- a/src/components/Page.js +++ b/src/components/Page.js @@ -1,118 +1,13 @@ -import React, { useState } from "react"; +import React from "react"; import Main from "./Main"; -import { - Sidenav, - Nav, - Dropdown, - Navbar, - Container, - Sidebar, - // Header, - Content -} from "rsuite"; -import { - ArrowRightLine as AngleRight, - Code, - SiteFill, - ArrowLeftLine as AngleLeft, - Peoples as Group, - Rate, - AdvancedAnalytics as LogoAnalytics, - Dashboard, - Grid -} from "@rsuite/icons"; -import "rsuite/dist/rsuite.min.css"; - -const headerStyles = { - padding: 18, - fontSize: 16, - height: 56, - background: "#34c3ff", - color: " #fff", - whiteSpace: "nowrap", - overflow: "hidden" -}; - -const NavToggle = ({ expand, onChange }) => { - return ( - - - - - - ); -}; +import Menu from "./Menu"; +import { Container, Content } from "rsuite"; const Page = () => { - const [expand, setExpand] = useState(true); return (
- - -
- - - Devchallenges.io - -
- - - - - - - setExpand(!expand)} /> - - +
diff --git a/src/index.js b/src/index.js index d563c0f..3d1e2a5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,13 +1,16 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import { BrowserRouter } from "react-router-dom"; +import "./index.css"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + + + ); From 0fc26b573541cb1568153373f3eb8ea5e7c98afd Mon Sep 17 00:00:00 2001 From: Gameonn Date: Sat, 10 Sep 2022 10:37:12 +0530 Subject: [PATCH 3/3] Remove unused declarations --- src/components/Main.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/Main.js b/src/components/Main.js index c90268d..76b27d2 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -4,21 +4,15 @@ import { FlexboxGrid, Divider } from "rsuite"; let styleObj = { display: "block", - height: "40px" + height: "40px", }; -const variantTypes = ["", "outline", "text"]; -const colorTypes = ["default", "primary", "danger", "secondary"]; -const sizeTypes = ["xs", "sm", "md", "lg"]; -const startIconTypes = ["home", "bookmarks", "bolt", "book"]; -const endIconTypes = ["toys", "whatshot", "weekend", "vignette"]; - const types = { color: ["default", "primary", "danger", "secondary"], size: ["xs", "sm", "md", "lg"], variant: ["", "outline", "bold", "text"], startIcon: ["home", "bookmarks", "bolt", "book"], - endIcon: ["toys", "whatshot", "weekend", "vignette"] + endIcon: ["toys", "whatshot", "weekend", "vignette"], }; const Main = () => {