65 |
66 | {/* progress bar fill */}
67 |
68 |
69 |
70 | {/* progress label */}
71 | { showLabel ? (
72 |
{ label }
73 | ) : '' }
74 |
75 | );
76 | }
77 |
78 | //prop types initialize
79 | ProgressBar.propTypes = {
80 | className : PropTypes.string,
81 | percentage : PropTypes.number,
82 | size : PropTypes.oneOf(['small', 'medium', 'large']),
83 | label : PropTypes.any,
84 | labelPosition : PropTypes.oneOf(['left', 'center', 'right']),
85 | showLabel : PropTypes.bool,
86 | color : PropTypes.string
87 | }
88 |
89 | export default ProgressBar;
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | ## Available Scripts
4 |
5 | In the project directory, you can run:
6 |
7 | ### `npm start`
8 |
9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 |
12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console.
14 |
15 | ### `npm test`
16 |
17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19 |
20 | ### `npm run build`
21 |
22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 |
25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed!
27 |
28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29 |
30 | ### `npm run eject`
31 |
32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33 |
34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35 |
36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37 |
38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39 |
40 | ## Learn More
41 |
42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43 |
44 | To learn React, check out the [React documentation](https://reactjs.org/).
45 |
46 | ### Code Splitting
47 |
48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
49 |
50 | ### Analyzing the Bundle Size
51 |
52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
53 |
54 | ### Making a Progressive Web App
55 |
56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
57 |
58 | ### Advanced Configuration
59 |
60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61 |
62 | ### Deployment
63 |
64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65 |
66 | ### `npm run build` fails to minify
67 |
68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
69 |
--------------------------------------------------------------------------------
/src/components/pages/components/ChartsPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | /* Styles */
4 | import { Box, Row, Container, ChartDonut, ChartPie, ChartRadar, ChartLine, ChartBar } from './../../styles';
5 | /* Styles */
6 |
7 | const ChartsPage = () => {
8 | //donut items
9 | const donutItems = [
10 | {
11 | label: 'Android',
12 | data: 1040,
13 | color: "#7757F7"
14 | },
15 | {
16 | label: 'iOS',
17 | data: 674,
18 | color: "#6E55CE"
19 | },
20 | {
21 | label: 'Win. Phone',
22 | data: 233,
23 | color: "#5742A7"
24 | }
25 | ];
26 |
27 | //radar items
28 | const radarItems = {
29 | labels : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
30 | data : [{
31 | label: 'Android Downloads',
32 | color:'#7757F7',
33 | data : [203, 175, 377, 245, 289, 200]
34 | },
35 | {
36 | label: 'iOS Downloads',
37 | color:'#6E55CE',
38 | data : [14, 33, 85, 124, 203, 201]
39 | }]
40 | };
41 |
42 | //line items
43 | const lineItems = {
44 | labels : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
45 | data : [
46 | {
47 | label: 'Android Downloads',
48 | color:'#7757F7',
49 | data : [203, 175, 377, 245, 289, 200]
50 | },
51 | {
52 | label: 'iOS Downloads',
53 | color:'#6E55CE',
54 | data : [14, 33, 85, 124, 203, 201]
55 | }
56 | ]
57 | };
58 |
59 | return(
60 |
61 |
62 | Charts
63 |
64 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 | );
93 | }
94 |
95 | export default ChartsPage;
--------------------------------------------------------------------------------
/src/components/styles/Carousel.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | //libs
4 | import PropTypes from 'prop-types'; // prop types
5 |
6 | const Carousel = (props) => {
7 | //get custom class
8 | const customClassName = typeof props.className !== 'undefined' ? props.className : '';
9 |
10 | //get unique id
11 | const id = typeof props.id !== 'undefined' ? props.id : 'myCarousel';
12 |
13 | //get array of item
14 | const items = typeof props.items !== 'undefined' ? props.items : [];
15 |
16 | //get indicators
17 | const indicators = typeof props.indicators !== 'undefined' ? props.indicators : true;
18 |
19 | //get controls
20 | const useControls = typeof props.controls !== 'undefined' ? props.controls : true;
21 |
22 | return(
23 |
24 | {/* Indicators */}
25 | {indicators ? (
26 |
27 | { items.map((item, index) => (
28 |
31 | ) : ''}
32 |
33 | {/* Main Carousel Items */}
34 |
35 | { items.map((item, index) => (
36 |
37 |
38 | { item.useCaption ? (
39 |
40 |
{ item.title }
41 | { item.subTitle }
42 |
43 | ) : '' }
44 |
45 | )) }
46 |
47 |
48 | {/* Controls */}
49 | { useControls ? (
50 |
60 | ) : '' }
61 |
62 | );
63 | }
64 |
65 | //prop types initialize
66 | Carousel.propTypes = {
67 | className: PropTypes.string,
68 | id : PropTypes.string,
69 | items : PropTypes.array,
70 | indicators : PropTypes.bool,
71 | controls : PropTypes.bool,
72 | }
73 |
74 | export default Carousel;
--------------------------------------------------------------------------------
/src/components/pages/components/BadgePage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | /* Styles */
4 | import { Box, BoxTitle, Row, Container, Badge } from './../../styles';
5 | /* Styles */
6 |
7 | const BadgePage = () => {
8 | return(
9 |
10 |
11 | Badges
12 |
13 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
29 |
30 |
31 |
32 |
39 |
40 |
41 |
42 |
46 |
47 |
48 |
49 |
50 |
51 |
53 |
56 |
57 |
58 |
59 |
60 |
61 | );
62 | }
63 |
64 | export default BadgePage;
--------------------------------------------------------------------------------
/src/components/styles/UserCard.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | //libs
4 | import PropTypes from 'prop-types'; // prop types
5 |
6 | const UserCard = (props) => {
7 | //get custom class
8 | const customClassName = typeof props.className !== 'undefined' ? props.className : '';
9 |
10 | //get avatar
11 | const avatar = typeof props.avatar !== 'undefined' ? props.avatar : '';
12 |
13 | //get background
14 | const background = typeof props.background !== 'undefined' ? props.background : '';
15 |
16 | //get title
17 | const title = typeof props.title !== 'undefined' ? props.title : '';
18 |
19 | //get sub title
20 | const subTitle = typeof props.subTitle !== 'undefined' ? props.subTitle : '';
21 |
22 | //get button outlined
23 | const isHorizontal = typeof props.isHorizontal !== 'undefined' ? props.isHorizontal : false;
24 |
25 | //get is handle click
26 | const isHandleClick = typeof props.handleClick !== 'undefined' ? ' click-available ' : ' ';
27 |
28 | return(
29 |
30 | { isHorizontal ? (
31 | // horizontal
32 |
33 |
34 |
35 |
36 |
37 |
38 | { title }
39 |
40 |
41 | { subTitle }
42 |
43 |
44 | { props.children }
45 |
46 |
47 |
48 | ) : (
49 | // vertical
50 |
51 |
52 | { background!=='' ? (
53 |
54 | ) : '' }
55 |
56 |
57 |
58 |
59 |
60 | { title }
61 |
62 |
63 | { subTitle }
64 |
65 |
66 | { props.children }
67 |
68 |
69 | ) }
70 |
71 |
72 |
73 | );
74 | }
75 |
76 | //prop types initialize
77 | UserCard.propTypes = {
78 | className: PropTypes.string,
79 | avatar: PropTypes.string,
80 | background: PropTypes.string,
81 | title: PropTypes.string,
82 | subTitle: PropTypes.string,
83 | isHorizontal: PropTypes.bool,
84 | handleClick: PropTypes.func,
85 | }
86 |
87 | export default UserCard;
--------------------------------------------------------------------------------
/src/components/pages/documentation/components/Alerts.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react';
2 | import DocsExample from './../DocsExample';
3 | import {
4 | Alert
5 | } from '../../../styles';
6 |
7 | const Alerts = () => {
8 | return (
9 |
10 |
14 |
55 |
69 |
70 |
71 |
72 |
73 |
74 |
15 |
16 | Modals
17 |
18 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | setShowModal(true)}
29 | label="Show Modal"/>
30 |
31 | {/* Modal */}
32 | setShowModal(false)}>
36 |
37 | {/* Modal Body */}
38 | Modal body
39 |
40 |
41 |
42 |
43 | setShowSmallModal(true)}
46 | label="Small Modal"/>
47 |
48 | {/* Modal */}
49 | setShowSmallModal(false)}>
54 |
55 | {/* Modal Body */}
56 | Modal body
57 |
58 |
59 |
60 |
61 | setShowLargeModal(true)}
64 | label="Large Modal"/>
65 |
66 | {/* Modal */}
67 | setShowLargeModal(false)}>
72 |
73 | {/* Modal Body */}
74 | Modal body
75 |
76 |
77 |
78 |
79 |
80 |
81 |
100 | { options !== null ? (
101 |
104 |
105 | );
106 | }
107 |
108 | //prop types initialize
109 | ChartBar.propTypes = {
110 | items : PropTypes.object,
111 | title : PropTypes.string,
112 | legend: PropTypes.oneOf(["none", "top", "bottom", "right", "left"])
113 | }
114 |
115 | export default ChartBar;
--------------------------------------------------------------------------------
/src/components/styles/ChartLine.js:
--------------------------------------------------------------------------------
1 | //default react
2 | import React from 'react';
3 |
4 | //libs
5 | import Chart from 'react-apexcharts';
6 | import PropTypes from 'prop-types'; // prop types
7 |
8 | const ChartLine = (props) => {
9 | //get items & init data
10 | const items = typeof props.items !== 'undefined' ? props.items : [];
11 |
12 | //init default options
13 | let options = null;
14 |
15 | //init default error messages
16 | let error = "";
17 |
18 | //try setting chart options
19 |
20 | try{
21 | //get datas
22 | let dataItems = items.data;
23 | let labels = items.labels;
24 | let colors = dataItems.map(item => (item.color));
25 | let seriesData = dataItems.map(item => {
26 | return {
27 | name : item.label,
28 | data : item.data
29 | }
30 | })
31 |
32 | options = {
33 | series:seriesData,
34 | colors: colors,
35 | yaxis:{
36 | axisBorder:{
37 | show:false
38 | }
39 | },
40 | xaxis: {
41 | categories: labels
42 | },
43 | }
44 |
45 | //check title
46 | if(typeof props.title !== 'undefined'){
47 | options = Object.assign({}, options, {
48 | title: {
49 | text: props.title
50 | }
51 | })
52 | }
53 |
54 | //check legend
55 | const legend = typeof props.legend !== 'undefined' ? props.legend.toLowerCase() : "none";
56 | let legendPosition = 'none';
57 | switch(legend){
58 | case 'top':
59 | legendPosition = 'top';
60 | break;
61 | case 'bottom':
62 | legendPosition = 'bottom';
63 | break;
64 | case 'left':
65 | legendPosition = 'left';
66 | break;
67 | case 'right':
68 | legendPosition = 'right';
69 | break;
70 | default:
71 | legendPosition = 'none';
72 | break;
73 | }
74 | if(legendPosition!=='none'){
75 | //add legend
76 | options = Object.assign({}, options, {
77 | legend: {
78 | fontSize: 10,
79 | position: legendPosition,
80 | markers:{
81 | width:8,
82 | height:8,
83 | }
84 | }
85 | });
86 | }else{
87 | options = Object.assign({}, options, {
88 | legend: {
89 | show : false
90 | }
91 | });
92 | }
93 | }catch(err){
94 | //set error messages
95 | error = err.message;
96 | }
97 |
98 | return(
99 |
100 | { options !== null ? (
101 |
104 |
105 | );
106 | }
107 |
108 | //prop types initialize
109 | ChartLine.propTypes = {
110 | items : PropTypes.object,
111 | title : PropTypes.string,
112 | legend: PropTypes.oneOf(["none", "top", "bottom", "right", "left"])
113 | }
114 |
115 | export default ChartLine;
--------------------------------------------------------------------------------
/src/components/styles/index.js:
--------------------------------------------------------------------------------
1 | // this is portal file to export all styles
2 |
3 | /* Styles */
4 |
5 | //Menu
6 | import Menu from './Menu';
7 | import MenuLink from './MenuLink';
8 |
9 | //Avatar
10 | import Avatar from './Avatar';
11 |
12 | //text
13 | import H1 from './H1';
14 | import H2 from './H2';
15 | import H3 from './H3';
16 | import H4 from './H4';
17 | import H5 from './H5';
18 |
19 | //box
20 | import Box from './Box.js';
21 | import BoxTitle from './BoxTitle.js';
22 |
23 | //grid
24 | import Container from './Container.js';
25 | import Row from './Row.js';
26 | import Col from './Col.js';
27 |
28 | //alert
29 | import Alert from './Alert.js';
30 |
31 | //badge
32 | import Badge from './Badge.js';
33 |
34 | //button
35 | import Button from './Button.js';
36 |
37 | //forms
38 | import Form from './Form';
39 | import FormGroup from './FormGroup';
40 | import Input from './Input';
41 | import Select from './Select';
42 | import Textarea from './Textarea';
43 | import Checkbox from './Checkbox';
44 |
45 | //cards
46 | import IconCard from './IconCard.js';
47 | import UserCard from './UserCard';
48 | import ImageCard from './ImageCard';
49 | import ImageCardTitle from './ImageCardTitle';
50 | import ImageCardSubTitle from './ImageCardSubTitle';
51 | import ImageCardDescription from './ImageCardDescription';
52 | import ProductCard from './ProductCard';
53 | import ProductCardName from './ProductCardName';
54 | import ProductCardImage from './ProductCardImage';
55 | import ProductCardPrice from './ProductCardPrice';
56 | import ProductCardDescription from './ProductCardDescription';
57 | import ProductCardCategory from './ProductCardCategory';
58 |
59 | //breadcrumbs
60 | import Breadcrumb from './Breadcrumb';
61 | import BreadcrumbItem from './BreadcrumbItem';
62 |
63 | //carousel
64 | import Carousel from './Carousel';
65 |
66 | //charts
67 | import ChartDonut from './ChartDonut';
68 | import ChartPie from './ChartPie';
69 | import ChartRadar from './ChartRadar';
70 | import ChartLine from './ChartLine';
71 | import ChartBar from './ChartBar';
72 |
73 | //collapse
74 | import Collapse from './Collapse';
75 | import Accordion from './Accordion';
76 |
77 | //modal
78 | import Modal from './Modal';
79 |
80 | //dropdown
81 | import Dropdown from './Dropdown';
82 | import DropdownItem from './DropdownItem';
83 |
84 | //table
85 | import Table from './Table';
86 |
87 | //Progress Bar
88 | import ProgressBar from './ProgressBar';
89 |
90 | /* Styles */
91 |
92 | //multiple export
93 | export {
94 | Menu,
95 | MenuLink,
96 | Avatar,
97 | H1,
98 | H2,
99 | H3,
100 | H4,
101 | H5,
102 | Box,
103 | BoxTitle,
104 | Button,
105 | Form,
106 | FormGroup,
107 | Input,
108 | Textarea,
109 | Select,
110 | Checkbox,
111 | Container,
112 | Row,
113 | Col,
114 | Alert,
115 | Badge,
116 | IconCard,
117 | UserCard,
118 | ImageCard,
119 | ImageCardTitle,
120 | ImageCardSubTitle,
121 | ImageCardDescription,
122 | ProductCard,
123 | ProductCardName,
124 | ProductCardImage,
125 | ProductCardPrice,
126 | ProductCardDescription,
127 | ProductCardCategory,
128 | Breadcrumb,
129 | BreadcrumbItem,
130 | Carousel,
131 | ChartDonut,
132 | ChartPie,
133 | ChartRadar,
134 | ChartLine,
135 | ChartBar,
136 | Collapse,
137 | Accordion,
138 | Modal,
139 | Dropdown,
140 | DropdownItem,
141 | Table,
142 | ProgressBar,
143 | };
--------------------------------------------------------------------------------
/src/components/pages/FAQPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | /* components */
4 | import { Breadcrumb, BreadcrumbItem, Container, Row, Accordion, Col } from '../styles';
5 |
6 | const FAQPage = () => {
7 | /* array of faq */
8 | const faq = [
9 | {
10 | key : 'What is REFAST template?',
11 | body : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
12 | },
13 | {
14 | key : 'How to buy this template?',
15 | body : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
16 | },
17 | {
18 | key : 'Where do i download the file to?',
19 | body : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
20 | },
21 | {
22 | key : 'I have trouble installing this template on my website',
23 | body : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
24 | },
25 | {
26 | key : 'I need more information about this website.',
27 | body : (
28 | click
here to get more information about this product.
35 | {/* page title */}
36 |
37 | Frequently Asked Questions
38 |
39 | {/* breadcrumb info */}
40 |
41 |
42 | Page
43 |
44 |
45 | FAQ
46 |
47 |
48 |
49 |
50 |
51 |
52 |
54 |
55 |
56 |
57 |
104 | { options !== null ? (
105 |
108 |
109 | );
110 | }
111 |
112 | //prop types initialize
113 | ChartPie.propTypes = {
114 | items : PropTypes.array,
115 | title : PropTypes.string,
116 | legend: PropTypes.oneOf(["none", "top", "bottom", "right", "left"])
117 | }
118 |
119 | export default ChartPie;
--------------------------------------------------------------------------------
/src/components/pages/SignupPage.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Link } from 'react-router-dom';
3 | import { Box, BoxTitle, Form, FormGroup, Input, Button, Checkbox, H4, Textarea } from '../styles';
4 |
5 | const SignupPage = () => {
6 | /* hooks */
7 | const [name, setName] = useState('');
8 | const [email, setEmail] = useState('');
9 | const [password, setPassword] = useState('');
10 | const [address, setAddress] = useState('');
11 | const [agreed, setAgreed] = useState(false);
12 |
13 | return(
14 |
15 | {/* logo and header information */}
16 |
17 |
18 |
19 | REACT ADMIN TEMPLATE
20 |
21 |
22 |
23 | {/* content form */}
24 |
25 |
9 | NodeJS - install node js from its official website here http://nodejs.org/ .
12 | NPM - npm will automaticly installed with NodeJS.
14 |
18 | {`node -v`}
19 |
20 | result:
21 |
22 | {`v12.13.0`}
23 |
24 | and check NPM version by typing
25 |
26 | {`npm -v`}
27 |
28 | result:
29 |
30 | {`v6.12.0`}
31 |
32 |
33 |
38 | {`npm install -g serve
39 | serve -s build`}
40 |
41 |
42 | it will show information of your server running host and port:
43 |
44 | {`Serving!
45 |
46 | - Local: http://localhost:5000
47 | - On Your Network: http://192.168.1.15:5000
48 |
49 | Copied local address to clipboard!`}
50 |
51 | then you can run demo by simply run http://localhost:5000 in your browser.
52 |
53 |
61 | All main components (ProgressBar, Box, Charts, etc) in src/components/styles .
62 |
63 | )}/>
64 |
65 | {`src/
66 | components/
67 | /apps /* example app */
68 | /layout /* Navbar, Menubar, Notification & Message Panel here */
69 | /pages /* Authorization, Misc, Error pages, Docs and etc. */
70 | /styles /* this contains all components template style */
71 | helpers/
72 | /* all helpers file */
73 | redux/
74 | actions/ /* all redux actions */
75 | reducers/ /* all reducers */
76 | store.js /* redux create store */
77 | sass/
78 | _calendar.scss /* big calendar and datetime picker styles */
79 | _colors.scss /* all colors in 1 file make it easy to change */
80 | _components.scss /* all styles use in components */
81 | _desktop.scss /* desktop resolution styles */
82 | _menu.scss /* menu styles */
83 | _mobile.scss /* mobile resolution styles */
84 | _tablet.scss /* tablet resolution styles */
85 | _variables.scss /* global variables */
86 | index.scss /* put all scss together */
87 | `}
88 |
89 |
90 | )
91 | }
92 |
93 | export default Installation;
--------------------------------------------------------------------------------
/src/components/styles/Dropdown.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | //libs
4 | import PropTypes from 'prop-types'; // prop types
5 |
6 | const Dropdown = (props) => {
7 | //get custom class
8 | const customClassName = typeof props.className !== 'undefined' ? props.className : '';
9 |
10 | //get position
11 | const inputPosition = typeof props.position !== 'undefined' ? props.position : '';
12 | let position;
13 | switch(inputPosition){
14 | case 'top':
15 | position = 'dropup'
16 | break;
17 | case 'left':
18 | position = 'dropleft'
19 | break;
20 | case 'right':
21 | position = 'dropright'
22 | break;
23 | default:
24 | position = ' '
25 | break;
26 | }
27 | position = position !== ' ' ? 'btn-group '+position+' ' : '';
28 |
29 | //get button color
30 | const inputButtonType = typeof props.color !== 'undefined' ? props.color : ' btn-primary';
31 | let useAnotherColor = false;
32 | let anotherColor = '';
33 | let buttonType;
34 | switch(inputButtonType){
35 | case 'success':
36 | buttonType = 'btn-success'
37 | break;
38 | case 'danger':
39 | buttonType = 'btn-danger'
40 | break;
41 | case 'warning':
42 | buttonType = 'btn-warning'
43 | break;
44 | case 'primary':
45 | buttonType = 'btn-primary'
46 | break;
47 | case 'info':
48 | buttonType = 'btn-info'
49 | break;
50 | default:
51 | buttonType = 'btn-primary';
52 | useAnotherColor = true;
53 | anotherColor = props.color;
54 | break;
55 | }
56 |
57 | //get button size
58 | const inputButtonSize = typeof props.size !== 'undefined' ? props.size : 'medium';
59 | let buttonSize;
60 | switch(inputButtonSize){
61 | case 'small':
62 | buttonSize = 'btn-sm'
63 | break;
64 | case 'medium':
65 | buttonSize = 'btn-md'
66 | break;
67 | case 'large':
68 | buttonSize = 'btn-lg'
69 | break;
70 | default:
71 | buttonSize = 'btn-md'
72 | break;
73 | }
74 | //add space between class
75 | buttonSize = ' ' + buttonSize;
76 |
77 | //get button icon
78 | const buttonIcon = typeof props.icon !== 'undefined' ? props.icon : '';
79 |
80 | //get button enable
81 | const disabled = typeof props.disabled !== 'undefined' ? (props.disabled ? ' disabled ' : ' ') : ' ';
82 |
83 | //get has arrow icon
84 | const arrowIcon = typeof props.hasArrowIcon !== 'undefined' ? (props.hasArrowIcon ? ' ' : ' remove-icon ') : ' ';
85 |
86 | let customStyle = {};
87 | if(useAnotherColor){
88 | customStyle = {
89 | backgroundColor: anotherColor
90 | }
91 | }
92 |
93 | return(
94 |
95 |
96 | {/* show button icon */}
97 | {buttonIcon !== '' ? (
98 |
104 |
105 | { props.children }
106 |
107 |
121 | { options !== null ? (
122 |
125 |
126 | );
127 | }
128 |
129 | //prop types initialize
130 | ChartRadar.propTypes = {
131 | items : PropTypes.object,
132 | title : PropTypes.string,
133 | size : PropTypes.number,
134 | legend: PropTypes.oneOf(["none", "top", "bottom", "right", "left"])
135 | }
136 |
137 | export default ChartRadar;
--------------------------------------------------------------------------------
/src/components/pages/components/DropdownsPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | /* Styles */
4 | import { Box, Row, Container, Col, Dropdown, DropdownItem, BoxTitle } from './../../styles';
5 | /* Styles */
6 |
7 | const DropdownsPage = () => {
8 | return(
9 |
10 |
11 | Dropdowns
12 |
13 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
26 | Link 1
27 | Link 2
28 | Link 2
29 |
30 | Link 3
31 |
32 |
33 |
36 | Link 1
37 | Link 2
38 | Link 2
39 |
40 | Link 3
41 |
42 |
43 |
46 | Link 1
47 | Link 2
48 | Link 2
49 |
50 | Link 3
51 |
52 |
53 |
56 | Link 1
57 | Link 2
58 | Link 2
59 |
60 | Link 3
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
32 |
36 |
69 |
71 | )
72 | }
73 |
74 | export default Carousels;
75 | `
76 | )}
77 | properties={(
78 | `Carousel.propTypes = {
79 | className: PropTypes.string, //custom className
80 | id : PropTypes.string, //ATTENTION: this field is required, you must provided unique id for carousel
81 | items : PropTypes.array, //array of items
82 | indicators : PropTypes.bool, //is carousel show indicators
83 | controls : PropTypes.bool, //is show arrow controls
84 | }`
85 | )}
86 | />
87 |
88 |
92 |
125 |
127 | )
128 | }
129 |
130 | export default Carousels;
131 | `
132 | )}
133 | />
134 |
135 | )
136 | }
137 |
138 | export default Carousels;
--------------------------------------------------------------------------------
/src/components/layouts/Navbar.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | //libs
4 | import { Link } from 'react-router-dom';
5 | import { connect } from 'react-redux';
6 |
7 | /* redux */
8 | import { logout } from './../../redux/actions/authAction';
9 |
10 | /* components */
11 | import NotificationContainer from './NotificationContainer.js'
12 | import MessageContainer from './MessageContainer.js'
13 | import { Avatar } from '../styles';
14 | /* components */
15 |
16 | const Navbar = (props) => {
17 | /* trigger logout */
18 | const logoutProcess = () => {
19 | props.logout(() => {
20 | //put your callback actions here
21 | });
22 | }
23 |
24 | //notification hooks
25 | const [openNotification, setOpenNotification] = useState(false);
26 | //message hooks
27 | const [openMessage, setOpenMessage] = useState(false);
28 |
29 | return(
30 |
31 |
35 |
37 |
38 |
39 |
40 |
41 |
42 | {
43 | //open notification & close message
44 | if(openMessage){
45 | setOpenMessage(false);
46 | }
47 | setOpenNotification(!openNotification);
48 | }
49 | } className="nav-link click-available" role="button" aria-expanded="false">
50 | 8
52 |
53 |
54 |
55 |
56 |
57 | {
58 | //close notification & open message
59 | if(openNotification){
60 | setOpenNotification(false);
61 | }
62 | setOpenMessage(!openMessage);
63 | } } className="nav-link click-available" role="button" aria-expanded="false">
64 | 2
66 |
67 |
68 |
69 |
70 |
71 |
73 |
74 |
Profile
75 |
Change Password
76 |
77 |
Logout
78 |
80 |
81 |
83 | );
84 | }
85 |
86 | /* map redux states to be accessed by global props */
87 | const mapStateToProps = state => ({
88 | });
89 |
90 | /* connect use react redux */
91 | export default connect(mapStateToProps, {
92 | /* redux actions to be accessed by global props */
93 | logout
94 | })(Navbar);
--------------------------------------------------------------------------------
/src/components/layouts/NotificationContainer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | //libs
4 | import PropTypes from 'prop-types'; // prop types
5 |
6 | //components
7 | import NotificationPreview from './NotificationPreview.js';
8 |
9 | const NotificationContainer = (props) => {
10 | //get is open
11 | const isOpen = typeof props.isOpen !== 'undefined' ? props.isOpen : false;
12 | let navWidthResult = isOpen ? '320px' : '0px';
13 |
14 | //slide left nav
15 | if(isOpen){
16 | //document.getElementById("root").style.marginLeft = "320px";
17 | }else{
18 | //document.getElementById("root").style.marginLeft = "0px";
19 | }
20 |
21 | /* Set the width of the side navigation to 0 */
22 | const closeNav = () => {
23 | props.setOpenNotification(false);
24 | }
25 |
26 | return(
27 |
30 |
31 |
33 |
×
34 |
35 |
43 |
51 |
59 |
67 |
75 |
83 |
91 |
99 |
REFAST - Readme
4 |
5 |
33 |
34 |
35 | Environment Setup
36 |
37 |
38 | REFAST is using 16.10.2 of react version, using full hooks and functional components and Redux,
39 | it requires NodeJS and NPM (Node Package Manager) to start developing.
40 |
41 |
42 | NodeJS - install node js from its official website here https://nodejs.org/en/ .
43 |
44 |
45 | NPM - npm will automaticly installed with NodeJS.
46 |
47 |
48 |
49 |
50 | after installation finish you can check version of NodeJS by typing in your terminal or cmd
51 |
52 | node -v
53 | result:
54 | v12.13.0
55 | and check NPM version by typing
56 | npm -v
57 | result:
58 | v6.12.0
59 |
60 | Run Demo
61 | to run demo simply install serve and run serve on your machine:
62 | npm install -g serve
63 | serve -s build
64 | it will show information of your server running host and port:
65 | Serving!
66 |
67 | - Local: http://localhost:5000
68 | - On Your Network: http://192.168.1.15:5000
69 |
70 | Copied local address to clipboard!
71 | then you can run demo by simply run http://localhost:5000 in your browser.
72 |
73 | Folder Structures
74 | below is template folder structure that will make you easy to find components or files.
75 |
76 | All main components (ProgressBar, Box, Charts, etc) in
src/components/styles .
77 |
78 |
src/
79 | components/
80 | /apps
81 | /layout
82 | /pages
83 | /styles
84 | helpers/
85 |
86 | redux/
87 | actions/
88 | reducers/
89 | store.js
90 | sass/
91 | _calendar.scss
92 | _colors.scss
93 | _components.scss
94 | _desktop.scss
95 | _menu.scss
96 | _mobile.scss
97 | _tablet.scss
98 | _variables.scss
99 | index.scss
100 |
101 |
Documentation
102 | you can read components docs here
https://refast.netlify.com/documentation .
103 |
104 | You must login first (empty email and password accepted) only for demo purpose.
105 |
106 |
107 |
--------------------------------------------------------------------------------
/src/components/pages/components/CollapsePage.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | /* Styles */
4 | import { Box, Row, Container, Button, Collapse, BoxTitle, Accordion, Alert } from './../../styles';
5 | /* Styles */
6 |
7 | const CollapsePage = () => {
8 | const [isOpen, setIsOpen] = useState(false);
9 | const [isNestedOpen, setIsNestedOpen] = useState(false);
10 | const [isNestedSubOpen, setIsNestedSubOpen] = useState(false);
11 |
12 | const accordionItems = [
13 | {
14 | key : 'Button 1',
15 | body : (
16 |
17 |
18 | Successfully deploy to staging.
19 |
20 |
21 | )
22 | },
23 | {
24 | key : 'Button 2',
25 | body : "Lorem ipsup dolor sir amet"
26 | }
27 | ];
28 |
29 | return(
30 |
31 |
32 | Collapse
33 |
34 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | { setIsOpen(!isOpen) }}/>
44 |
47 |
48 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
49 |
50 |
51 |
52 |
53 |
54 |
55 | { setIsNestedOpen(!isNestedOpen) }}/>
57 |
60 |
61 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
62 |
63 | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
64 |
65 |
{ setIsNestedSubOpen(!isNestedSubOpen) }}>
66 | {isNestedSubOpen ?
67 | (
68 |
69 | ) : (
)}
70 |
71 |
73 |
74 |
75 |
76 |
77 |
79 |
80 |
81 |
82 |
83 |
84 | );
85 | }
86 |
87 | export default CollapsePage;
--------------------------------------------------------------------------------
/src/components/pages/components/ButtonPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | /* Styles */
4 | import { Box, BoxTitle, Row, Container, Button } from './../../styles';
5 | /* Styles */
6 |
7 | const ButtonPage = () => {
8 | return(
9 |
10 |
11 | Buttons
12 |
13 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
44 |
45 |
46 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
72 |
73 |
74 |
75 |
76 |
77 | );
78 | }
79 |
80 | export default ButtonPage;
--------------------------------------------------------------------------------
/src/components/styles/Input.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 |
3 | //libs
4 | import PropTypes from 'prop-types'; // prop types
5 |
6 | const Input = (props) => {
7 | //get custom class
8 | const customClassName = typeof props.className !== 'undefined' ? props.className : '';
9 |
10 | //get type
11 | let inputType = typeof props.type !== 'undefined' ? props.type : 'text';
12 | const [type, setType] = useState(inputType);
13 |
14 | //get name
15 | const inputName = typeof props.name !== 'undefined' ? props.name : '';
16 |
17 | //get id
18 | const inputId = typeof props.id !== 'undefined' ? props.id : '';
19 |
20 | //get maxLength
21 | const maxLength = typeof props.maxLength !== 'undefined' ? props.maxLength : 9999;
22 | const [currentLength, setCurrentLength] = useState(0);
23 | useEffect(() => {
24 | setCurrentLength(() => {
25 | //check if value already set
26 | return typeof props.value !== 'undefined' ? props.value.length : 0
27 | });
28 | }, [props.value]);
29 |
30 | //get pattern
31 | let pattern = typeof props.pattern !== 'undefined' ? props.pattern : '';
32 |
33 | //get auto complete
34 | const autoComplete = typeof props.autoComplete !== 'undefined' ? props.autoComplete : false;
35 |
36 | //get required
37 | const isRequired = typeof props.required !== 'undefined' ? props.required : false;
38 |
39 | //get is valid
40 | const isValid = typeof props.isValid !== 'undefined' ? (props.isValid == null ? '' : (props.isValid ? 'valid ' : 'invalid ')) : ' ';
41 |
42 | //get message
43 | let message = typeof props.message !== 'undefined' ? props.message : '';
44 |
45 | //get icon
46 | let icon = typeof props.icon !== 'undefined' ? props.icon : '';
47 |
48 | //custom attr
49 | let attrs = {};
50 | if(pattern !== ''){
51 | attrs['pattern'] = pattern;
52 | }
53 | if(inputId !== ''){
54 | attrs['id'] = inputId;
55 | }
56 | attrs['required'] = isRequired;
57 |
58 | return(
59 |
60 | {/* message for input */}
61 | { message !== '' ? (
62 |
63 | { message }
64 |
65 | ) : '' }
66 |
67 | {/* check icon */}
68 | { icon !== '' ? (
69 |
70 | ) : '' }
71 |
72 | {/* input element */}
73 |
{
87 | // custom handle change
88 | if(maxLength!==9999){
89 | setCurrentLength(e.target.value.length);
90 | }
91 | }}
92 | />
93 |
94 | {/* password type */}
95 | { inputType.toLowerCase() === 'password' ? (
96 |
97 | {
98 | inputType = type.toLowerCase()==='password' ? 'text' : 'password';
99 | setType(inputType);
100 | }}>
101 |
102 | ) : '' }
103 |
104 | {/* max length help label */}
105 | { maxLength !== 9999 ? (
106 |
107 | { currentLength } / { maxLength }
108 |
109 | ) : '' }
110 |
111 | );
112 | }
113 |
114 | //prop types initialize
115 | Input.propTypes = {
116 | style : PropTypes.object,
117 | className : PropTypes.string,
118 | value : PropTypes.any,
119 | type : PropTypes.string,
120 | name : PropTypes.string,
121 | id : PropTypes.string,
122 | maxLength : PropTypes.number,
123 | autoComplete : PropTypes.bool,
124 | required : PropTypes.bool,
125 | pattern : PropTypes.string,
126 | placeholder : PropTypes.string,
127 | handleChange : PropTypes.func,
128 | handleKeyPress : PropTypes.func,
129 | handleKeyDown : PropTypes.func,
130 | isValid : PropTypes.bool,
131 | message : PropTypes.string,
132 | icon : PropTypes.string,
133 | }
134 |
135 | export default Input;
--------------------------------------------------------------------------------
/src/components/pages/documentation/components/Box.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react';
2 | import DocsExample from './../DocsExample';
3 | import {
4 | Box,
5 | BoxTitle,
6 | Row
7 | } from '../../../styles';
8 |
9 | const BoxDocumentation = () => {
10 | return (
11 |
12 |
16 |
17 |
18 | small 6
19 |
24 |
25 | small 6
26 |
31 |
32 |
33 |
34 | medium 8, offset 2
35 |
38 |
39 |
40 | )}
41 | code={(
42 | `import React from 'react';
43 | import { Row, Box } from './styles';
44 |
45 | const Box = () => {
46 | return(
47 |
48 |
49 |
50 | small 6
51 |
56 |
57 | small 6
58 |
63 |
64 |
65 |
66 | medium 8, offset 2
67 |
70 |
71 |
72 | )
73 | }
74 |
75 | export default Box;
76 | `
77 | )}
78 | properties={(
79 | `Box.propTypes = {
80 | style : PropTypes.object, //your custom style object here
81 | className: PropTypes.string, //your custom class here
82 | xs: PropTypes.number,
83 | xsOffset: PropTypes.number,
84 | sm: PropTypes.number,
85 | smOffset: PropTypes.number,
86 | md: PropTypes.number,
87 | mdOffset: PropTypes.number,
88 | lg: PropTypes.number,
89 | lgOffset: PropTypes.number,
90 | isTransparent: PropTypes.bool, //is box white background or transparent
91 | }`
92 | )}
93 | />
94 |
98 |
99 |
100 |
103 |
104 |
107 |
108 |
111 |
112 |
121 |
122 |
123 |
126 |
127 |
130 |
131 |
134 |
135 |
136 | )
137 | }
138 |
139 | export default Box;
140 | `
141 | )}
142 | />
143 |
144 | )
145 | }
146 |
147 | export default BoxDocumentation;
--------------------------------------------------------------------------------
/src/components/pages/components/ProgressBarPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | /* Styles */
4 | import { Box, Row, Container, ProgressBar, Col, BoxTitle } from './../../styles';
5 | /* Styles */
6 |
7 | const ProgressBarPage = () => {
8 | return(
9 |
10 |
11 | Progress Bar
12 |
13 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
26 |
27 |
30 |
31 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
56 |
57 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
80 |
81 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
128 |
129 | {/* check if use icon */}
130 | { buttonIcon !== '' ? (
136 | );
137 | }
138 |
139 | //prop types initialize
140 | Button.propTypes = {
141 | style : PropTypes.object,
142 | className: PropTypes.string,
143 | id: PropTypes.string,
144 | icon: PropTypes.string,
145 | type: PropTypes.oneOf(['button', 'submit']),
146 | color: PropTypes.string,
147 | size: PropTypes.oneOf(['small', 'medium', 'large']),
148 | label: PropTypes.string,
149 | disabled: PropTypes.bool,
150 | isOutlined: PropTypes.bool,
151 | isRounded: PropTypes.bool,
152 | isFull: PropTypes.bool,
153 | handleClick: PropTypes.func,
154 | }
155 |
156 | export default Button;
--------------------------------------------------------------------------------
14 |