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 +
+ +
+ ); +} + +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 0000000..180df5d Binary files /dev/null and b/src/components/Button/black-upward-arrow.png differ 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 0000000..e1742c4 Binary files /dev/null and b/src/components/Code/copy.png differ 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 (