From a3c5099b95795473e60cae9a80f9cd2d4528c986 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Fri, 7 Jan 2022 21:15:56 +0330 Subject: [PATCH] reza added button and tag --- package.json | 10 + src/App.css | 60 +- src/App.js | 43 +- src/Views/Home/Main/index.js | 51 + src/Views/Home/Sidebar/index.js | 119 + src/Views/Home/index.js | 16 + src/components/Alert/index.js | 11 + .../Button/black-downward-arrow.svg | 8 + src/components/Button/black-left-arrow.svg | 8 + src/components/Button/black-right-arrow.svg | 8 + src/components/Button/black-upward-arrow.png | Bin 0 -> 385 bytes src/components/Button/index.js | 139 + .../Button/white-downward-arrow.svg | 3 + src/components/Button/white-left-arrow.svg | 6 + src/components/Button/white-right-arrow.svg | 8 + src/components/Button/white-upward-arrow.svg | 3 + src/components/CircularProgressbar/index.js | 38 + src/components/Code/copy.png | Bin 0 -> 7760 bytes src/components/Code/index.js | 74 + src/components/Counter/index.js | 11 + src/components/Input/index.js | 15 +- src/components/Range/index.js | 9 + src/components/Recharts/index.js | 32 + src/components/Search/index.js | 4 +- src/components/SelectCheckbox/index.js | 10 +- src/components/SelectRadio/index.js | 10 +- src/components/SidebarCategoryHover/Col.js | 8 +- src/components/SidebarCategoryHover/index.js | 2 +- src/components/SidebarCategoryHover/list.js | 15 +- src/components/Slider/index.js | 8 + src/components/StarRating/index.js | 16 + src/components/Stepper/index.js | 84 + src/components/Tag/black-cancle-icon.svg | 8 + src/components/Tag/index.js | 25 + src/components/Toast/index.js | 11 + .../VerticalExpandableProductFilter/index.js | 4 +- src/components/search-with-suggest/index.js | 6 +- src/redux/actions/components.js | 12 + src/redux/actions/index.js | 1 + src/redux/data.js | 450 + src/redux/index.js | 6 + src/redux/reducers/components.js | 16 + src/redux/reducers/index.js | 1 + src/redux/store.js | 14 + src/router.js | 45 + yarn.lock | 7493 +++++++++-------- 46 files changed, 5309 insertions(+), 3612 deletions(-) create mode 100644 src/Views/Home/Main/index.js create mode 100644 src/Views/Home/Sidebar/index.js create mode 100644 src/Views/Home/index.js create mode 100644 src/components/Alert/index.js create mode 100644 src/components/Button/black-downward-arrow.svg create mode 100644 src/components/Button/black-left-arrow.svg create mode 100644 src/components/Button/black-right-arrow.svg create mode 100644 src/components/Button/black-upward-arrow.png create mode 100644 src/components/Button/index.js create mode 100644 src/components/Button/white-downward-arrow.svg create mode 100644 src/components/Button/white-left-arrow.svg create mode 100644 src/components/Button/white-right-arrow.svg create mode 100644 src/components/Button/white-upward-arrow.svg create mode 100644 src/components/CircularProgressbar/index.js create mode 100644 src/components/Code/copy.png create mode 100644 src/components/Code/index.js create mode 100644 src/components/Counter/index.js create mode 100644 src/components/Range/index.js create mode 100644 src/components/Recharts/index.js create mode 100644 src/components/Slider/index.js create mode 100644 src/components/StarRating/index.js create mode 100644 src/components/Stepper/index.js create mode 100644 src/components/Tag/black-cancle-icon.svg create mode 100644 src/components/Tag/index.js create mode 100644 src/components/Toast/index.js create mode 100644 src/redux/actions/components.js create mode 100644 src/redux/actions/index.js create mode 100644 src/redux/data.js create mode 100644 src/redux/index.js create mode 100644 src/redux/reducers/components.js create mode 100644 src/redux/reducers/index.js create mode 100644 src/redux/store.js create mode 100644 src/router.js diff --git a/package.json b/package.json index c72c877..af1e496 100644 --- a/package.json +++ b/package.json @@ -9,9 +9,19 @@ "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "lodash": "^4.17.21", + "rc-slider": "^9.7.5", "react": "^17.0.2", + "react-circular-progressbar": "^2.0.4", + "react-code-blocks": "^0.0.9-0", "react-dom": "^17.0.2", + "react-redux": "^7.2.6", + "react-router-dom": "^6.2.1", "react-scripts": "4.0.3", + "react-star-rating-component": "^1.4.1", + "recharts": "^2.1.8", + "redux": "^4.1.2", + "redux-devtools-extension": "^2.13.9", + "redux-thunk": "^2.4.1", "sass": "^1.43.4", "web-vitals": "^1.0.1" }, diff --git a/src/App.css b/src/App.css index 98c3f15..9092ab7 100644 --- a/src/App.css +++ b/src/App.css @@ -1,59 +1,3 @@ -.App { - text-align: center; +body{ direction: rtl; - padding: 10px; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -.en { - direction: ltr; - text-align: left; -} - -.fa { - direction: rtl; - text-align: right; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -/* clears the ‘X’ from Internet Explorer */ -input[type=search]::-ms-clear { display: none; width : 0; height: 0; } -input[type=search]::-ms-reveal { display: none; width : 0; height: 0; } -/* clears the ‘X’ from Chrome */ -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-results-button, -input[type="search"]::-webkit-search-results-decoration { display: none; } - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index a4f615c..3c154a5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,40 +1,17 @@ -import Search from './components/Search'; -import SearchWithSuggest from './components/search-with-suggest'; -import Input from './components/Input'; -import Radio from './components/Radio'; -import Checkbox from './components/Checkbox'; -import SelectRadio from './components/SelectRadio'; -import SelectCheckbox from './components/SelectCheckbox'; -import Switch from './components/Switch'; -import VerticalExpandableProductFilter from './components/VerticalExpandableProductFilter'; -import SidebarCategoryHover from './components/SidebarCategoryHover'; +import Router from './router.js'; +import {Provider} from 'react-redux'; +import store from './redux/store'; +import 'rc-slider/assets/index.css'; +import 'react-circular-progressbar/dist/styles.css'; -import './App.css'; +import "./App.css"; function App() { return ( -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
+ + + ); } -export default App; \ No newline at end of file +export default App; diff --git a/src/Views/Home/Main/index.js b/src/Views/Home/Main/index.js new file mode 100644 index 0000000..dc66e46 --- /dev/null +++ b/src/Views/Home/Main/index.js @@ -0,0 +1,51 @@ +import React from "react"; +import { connect } from "react-redux"; +import Code from "../../../components/Code"; + +function Main({ activeComponent }) { + return ( +
+
+
+

+ {activeComponent?.content?.name} +

+ {activeComponent?.content?.component} + {activeComponent?.content?.code && ( + + )} + {/*

Props

*/} + {activeComponent?.props?.length > 0 && ( + + + + + + + + + + + + {activeComponent?.props?.map((prop, index) => ( + + + + + + + + ))} + +
NameTypeRequiredDefault valueDescription
{prop.name}{prop.type}{prop.required}{prop.defaultValue}{prop.description}
+ )} +
+
+ ); +} + +const mapStateToProps = (state) => ({ + activeComponent: state.components.activeComponent, +}); + +export default connect(mapStateToProps, {})(Main); diff --git a/src/Views/Home/Sidebar/index.js b/src/Views/Home/Sidebar/index.js new file mode 100644 index 0000000..45432fb --- /dev/null +++ b/src/Views/Home/Sidebar/index.js @@ -0,0 +1,119 @@ +import React from "react"; +import { connect } from "react-redux"; +import { components } from "../../../redux/actions"; + +function Sidebar({ list, setActive }) { + return ( +
+
+ logo +
+
    + {list.map((material, index) => ( +
  • setActive(material)} + > + {material.name} +
  • + ))} +
+
+ ); +} + +const mapStateToProps = (state) => ({ + list: state.components.list, +}); + +export default connect(mapStateToProps, { + setActive: components.activeComponent, +})(Sidebar); + +Sidebar.defaultProps = { + materials: [ + { + name: "Button", + }, + { + name: "TextInput", + }, + { + name: "Search", + }, + { + name: "Radio", + }, + { + name: "Check Box", + }, + { + name: "Select Box", + }, + { + name: "Category", + }, + { + name: "Tag", + }, + { + name: "Slider", + }, + { + name: "Counters", + }, + { + name: "Features", + }, + { + name: "Calendar", + }, + { + name: "Date Picker", + }, + { + name: "Alert", + }, + { + name: "Reaction", + }, + { + name: "Step", + }, + { + name: "Vote Status", + }, + { + name: "Comment", + }, + { + name: "Info Box", + }, + { + name: "Quote", + }, + { + name: "Blog", + }, + { + name: "Percent", + }, + { + name: "Chart", + }, + { + name: "Bottom Navigation", + }, + { + name: "Navbar", + }, + { + name: "Product", + }, + ], +}; diff --git a/src/Views/Home/index.js b/src/Views/Home/index.js new file mode 100644 index 0000000..c21f2f2 --- /dev/null +++ b/src/Views/Home/index.js @@ -0,0 +1,16 @@ +import React from "react"; +import Sidebar from "./Sidebar"; +import Main from "./Main"; + +function Home() { + return ( +
+
+
+ +
+
+ ); +} + +export default Home; diff --git a/src/components/Alert/index.js b/src/components/Alert/index.js new file mode 100644 index 0000000..288bf12 --- /dev/null +++ b/src/components/Alert/index.js @@ -0,0 +1,11 @@ +import React from 'react' + +function Alert() { + return ( +
+ +
+ ) +} + +export default Alert; diff --git a/src/components/Button/black-downward-arrow.svg b/src/components/Button/black-downward-arrow.svg new file mode 100644 index 0000000..c540675 --- /dev/null +++ b/src/components/Button/black-downward-arrow.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Button/black-left-arrow.svg b/src/components/Button/black-left-arrow.svg new file mode 100644 index 0000000..bc9b3f6 --- /dev/null +++ b/src/components/Button/black-left-arrow.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Button/black-right-arrow.svg b/src/components/Button/black-right-arrow.svg new file mode 100644 index 0000000..c540675 --- /dev/null +++ b/src/components/Button/black-right-arrow.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Button/black-upward-arrow.png b/src/components/Button/black-upward-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..180df5df1f66765d51cbc207edc7af288941655e GIT binary patch literal 385 zcmV-{0e=38P)UjOe{v|PM?J5X@_p&UH zd7huC2y8s7lmJ@$zW)Ua@2(avj4}H(O$!ciGAxecZC%&jfLPrEnx;8>p7+VYO@bk) z3*cNrTez1F%Eggk7z$F`xpdq!0R2edNU$MPS57J1XxJE(ByJRpf|9~LgiS$7;09qF z6c^VElR$BBC`=MH6^Fv2C_2H}^wutV>CP!mi*a+Yqok^;4c1@pU~T{Vl}7a?2b=!D zS{IsF7={*lorOsWr{DD@+;08=UE-8wSt9;-!7c63{Da00000NkvXXu0mjf3Q?k> literal 0 HcmV?d00001 diff --git a/src/components/Button/index.js b/src/components/Button/index.js new file mode 100644 index 0000000..a3d29de --- /dev/null +++ b/src/components/Button/index.js @@ -0,0 +1,139 @@ +import React from "react"; + +import whiteLeftArrow from "./white-left-arrow.svg"; +import whiteRightArrow from "./white-right-arrow.svg"; +import whiteUpwardArrow from "./white-upward-arrow.svg"; +import whiteDownwardArrow from "./white-downward-arrow.svg"; + +import blackRightArrow from "./black-right-arrow.svg"; +import blackLeftArrow from "./black-left-arrow.svg"; +import blackUpwardArrow from "./black-upward-arrow.png"; +import blackDownwardArrow from "./black-downward-arrow.svg"; + +const Button = ({ + buttonBgColor, + circleArrowBgClr, + buttonTextColor, + buttonBorder, + buttonBorderColor, + buttonBorderRadius, + imageMarginRight, + imageWidth, + imageHeight, + // icons + leftArrowWhite, + rightArrowWhite, + upwardArrowWhite, + downwardArrowWhite, + leftArrowBlack, + rightArrowBlack, + upwardArrowBlack, + downwardArrowBlack, + circleArrow, +}) => { + return ( + + ); +}; + +export default Button; + +// color classes that i defined in tailwind.config.js and we can use for text color: +// ----> text-grayTextColor +// ----> text-white + +// color classes that i defined in tailwind.config.js and we can use for background color: +// ----> bg-darkGreenBg +// ----> bg-midGrayBgColor + +// color classes that i defined in tailwind.config.js and we can use for border color: +// ----> border-lightBlueBorderColor + +Button.defaultProps = { + buttonBgColor: "bg-darkGreenBg", + circleArrowBgClr: "bg-darkGreenBg", + buttonTextColor: "text-white", + buttonBorder: "border-b-4", + buttonBorderColor: "border-lightBlueBorderColor", + buttonBorderRadius: "rounded", + buttonPaddingX: "px-6", + buttonPaddingY: "py-4", + imageMarginRight: "mr-1", + imageWidth: "w-4", + imageHeight: "h-4", + // icons + leftArrowWhite: false, + rightArrowWhite: false, + upwardArrowWhite: false, + downwardArrowWhite: false, + leftArrowBlack: false, + rightArrowBlack: false, + upwardArrowBlack: false, + downwardArrowBlack: false, + circleArrow: false, +}; diff --git a/src/components/Button/white-downward-arrow.svg b/src/components/Button/white-downward-arrow.svg new file mode 100644 index 0000000..ed3c63b --- /dev/null +++ b/src/components/Button/white-downward-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Button/white-left-arrow.svg b/src/components/Button/white-left-arrow.svg new file mode 100644 index 0000000..a97c3c7 --- /dev/null +++ b/src/components/Button/white-left-arrow.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Button/white-right-arrow.svg b/src/components/Button/white-right-arrow.svg new file mode 100644 index 0000000..b22a9ac --- /dev/null +++ b/src/components/Button/white-right-arrow.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Button/white-upward-arrow.svg b/src/components/Button/white-upward-arrow.svg new file mode 100644 index 0000000..c9cb456 --- /dev/null +++ b/src/components/Button/white-upward-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/CircularProgressbar/index.js b/src/components/CircularProgressbar/index.js new file mode 100644 index 0000000..c347843 --- /dev/null +++ b/src/components/CircularProgressbar/index.js @@ -0,0 +1,38 @@ +import React from "react"; +import { + CircularProgressbar, + buildStyles, + CircularProgressbarWithChildren, +} from "react-circular-progressbar"; + +function CustomCircularProgressbar() { + const percentage = 66; + + return ( + <> +
+ +
+
+ + + +
+ + ); +} + +export default CustomCircularProgressbar; diff --git a/src/components/Code/copy.png b/src/components/Code/copy.png new file mode 100644 index 0000000000000000000000000000000000000000..e1742c4e8d02df8e99ad198c7e7d8cd966f77342 GIT binary patch literal 7760 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 Y1_nMyY$JaIx4#hT?Z>$Deb~SL3rnB(-v9sr literal 0 HcmV?d00001 diff --git a/src/components/Code/index.js b/src/components/Code/index.js new file mode 100644 index 0000000..504c59a --- /dev/null +++ b/src/components/Code/index.js @@ -0,0 +1,74 @@ +import { useState } from "react"; +import copyIcon from "./copy.png"; + +function Code({ code }) { + const [copied, setCopied] = useState(false); + const [height, setHeight] = useState(350); + const copyToClipboard = () => { + setCopied(true); + let copyText = document.getElementById(code).innerText; + /* Select the text field */ + // copyText.setSelectionRange(0, 99999); /* For mobile devices */ + + /* Copy the text inside the text field */ + navigator.clipboard.writeText(copyText); + }; + return ( +
+
+
+ copy copyToClipboard()} + /> + + Copied! + +
+
setHeight(() => (height == 350 ? "auto" : 350))} + > + {height === 350 ? "Read more" : "Close"} +
+
+
+        {code}
+      
+
+ ); +} + +Code.defaultProps = { + code: `class HelloMessage extends React.Component { + handlePress = () => { + alert('Hello') + } + render() { + return ( +
+

Hello {this.props.name}

+ +
+ ); + } + } + ReactDOM.render( + , + mountNode + );`, +}; + +export default Code; diff --git a/src/components/Counter/index.js b/src/components/Counter/index.js new file mode 100644 index 0000000..714d73b --- /dev/null +++ b/src/components/Counter/index.js @@ -0,0 +1,11 @@ +import React from 'react' + +function Counter({}) { + return ( +
+ +
+ ) +} + +export default Counter diff --git a/src/components/Input/index.js b/src/components/Input/index.js index 2a701e5..254129c 100644 --- a/src/components/Input/index.js +++ b/src/components/Input/index.js @@ -38,14 +38,14 @@ export default function Input(props) { return (