From e189e76c3444e528cb3a2485870f2bc844981624 Mon Sep 17 00:00:00 2001 From: Amaresh S M <30730124+amareshsm@users.noreply.github.com> Date: Mon, 27 Jul 2020 23:28:00 +0530 Subject: [PATCH 01/50] Update README.md --- README.md | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 54 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8816613..a70a768 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,57 @@ -[![Build Status](https://travis-ci.org/amareshsm/react-spinner-css.svg?branch=master)](https://travis-ci.org/amareshsm/react-spinner-css) -[![Coverage Status](https://coveralls.io/repos/github/amareshsm/react-spinner-css/badge.svg?branch=master)](https://coveralls.io/github/amareshsm/react-spinner-css?branch=master) +[![Build Status](https://travis-ci.org/amareshsm/react-js-css-loaders.svg?branch=master)](https://travis-ci.org/amareshsm/react-js-css-loaders) +[![Coverage Status](https://coveralls.io/repos/github/amareshsm/react-js-css-loaders/badge.svg?branch=master)](https://coveralls.io/github/amareshsm/react-js-css-loaders?branch=master) +[![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC) +[![1.0](https://badge.fury.io/js/survey-monkey-streams.svg)](//npmjs.com/package/react-js-css-loaders) -# react-CSS-Laoders +# react-js-css-Loaders React CSS Loaders + +## Quick Start: ## + +#### To install package: #### + +using npm: + +``` +npm i react-js-css-loaders +``` + +using yarn: + +``` +yarn add react-js-css-loaders +``` + +### To import Loaders: ### + +``` +import {Moon} from 'react-js-css-loaders' + +const LoaderComponent = (props) => ( +
+ +
+ +) + +export default LoaderComponent + +``` + +### Other modular samples available under `/examples` : ### + +Markup :
+ create-react-app +

     [create-react-app demo](https://github.com/amareshsm/react-js-css-loaders/tree/master/examples/cra)

+
+ +Markup :
+ server side rendering +

     [ssr demo](https://github.com/amareshsm/react-js-css-loaders/tree/master/examples/ssr)

+
+ +Markup :
+ Universal Module Definition (using cdn) +

     [UMD demo](https://github.com/amareshsm/react-js-css-loaders/tree/master/examples/cdn)

+
From cc5e732c5c70849635ed99a6d6de18f3c4c54640 Mon Sep 17 00:00:00 2001 From: Amaresh S M <30730124+amareshsm@users.noreply.github.com> Date: Mon, 27 Jul 2020 23:35:54 +0530 Subject: [PATCH 02/50] Update README.md --- README.md | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index a70a768..8f465de 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ [![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC) [![1.0](https://badge.fury.io/js/survey-monkey-streams.svg)](//npmjs.com/package/react-js-css-loaders) -# react-js-css-Loaders +# react-js-css-loaders React CSS Loaders @@ -41,17 +41,6 @@ export default LoaderComponent ### Other modular samples available under `/examples` : ### -Markup :
- create-react-app -

     [create-react-app demo](https://github.com/amareshsm/react-js-css-loaders/tree/master/examples/cra)

-
- -Markup :
- server side rendering -

     [ssr demo](https://github.com/amareshsm/react-js-css-loaders/tree/master/examples/ssr)

-
- -Markup :
- Universal Module Definition (using cdn) -

     [UMD demo](https://github.com/amareshsm/react-js-css-loaders/tree/master/examples/cdn)

-
+* [create-react-app demo](https://github.com/amareshsm/react-js-css-loaders/tree/master/examples/cra) +* [server side rendering demo](https://github.com/amareshsm/react-js-css-loaders/tree/master/examples/ssr) +* [Universal Module Definition (using cdn) demo](https://github.com/amareshsm/react-js-css-loaders/tree/master/examples/cdn) From 5b567472103c0eb0a28b2ac0a739083a241e506e Mon Sep 17 00:00:00 2001 From: amareshsm Date: Mon, 27 Jul 2020 23:38:37 +0530 Subject: [PATCH 03/50] 1.0.1 --- package-lock.json | 2 +- package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5412660..aceebec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-js-css-loaders", - "version": "1.0.0", + "version": "1.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 938cd81..516e6ce 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-js-css-loaders", - "version": "1.0.0", + "version": "1.0.1", "description": "React CSS Loaders", "main": "dist/bundle.cjs.js", "module": "dist/bundle.esm.js", @@ -98,4 +98,4 @@ "\\.css$": "/mocks/styles.js" } } -} \ No newline at end of file +} From 74d0ad3c12d6bd19aa92f082a7282a9e6db21fa0 Mon Sep 17 00:00:00 2001 From: amareshsm Date: Tue, 28 Jul 2020 00:01:23 +0530 Subject: [PATCH 04/50] 1.0.2 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index aceebec..3561286 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-js-css-loaders", - "version": "1.0.1", + "version": "1.0.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 516e6ce..f8cf82d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-js-css-loaders", - "version": "1.0.1", + "version": "1.0.2", "description": "React CSS Loaders", "main": "dist/bundle.cjs.js", "module": "dist/bundle.esm.js", From 82bc9d96b28a24b53d5e2fcbfc06d1a1de14701a Mon Sep 17 00:00:00 2001 From: amareshsm Date: Tue, 28 Jul 2020 00:12:10 +0530 Subject: [PATCH 05/50] Added cdn link --- .prettierignore | 4 +++- examples/cdn/index.html | 3 +-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/.prettierignore b/.prettierignore index d50be4b..4a1c5a9 100644 --- a/.prettierignore +++ b/.prettierignore @@ -6,4 +6,6 @@ /storybook-static -/coverage \ No newline at end of file +/coverage + +*.md \ No newline at end of file diff --git a/examples/cdn/index.html b/examples/cdn/index.html index 5ed54d8..b183ebc 100644 --- a/examples/cdn/index.html +++ b/examples/cdn/index.html @@ -11,8 +11,7 @@
- - + ` + const Note = `react >= 16.2.0 is peer dependencies and node js version should be >=8.` + const handleDrawerToggle = () => { + setMobileOpen(!mobileOpen) + } + const reactCode = ` +` + + const drawer = ( +
+ +
+ ) + + const container = + window !== undefined ? () => window().document.body : undefined + + return ( +
+ + + + + + + + Installation + + + + +
+ + + + + + React js css loaders is available as an + npm package + and also includes cdn support + + npm + + To Install react-js-css-loaders source files via + npm. + + + npm install react-js-css-loaders --save + + + To Install react-js-css-loaders source files via + yarn. + + + yarn add react-js-css-loaders + + + Note: {Note} + + CDN + + You can also start using react-js-css-loaders with + minimal infra setup - it requires react CDN and our + package CDN link + + + Minified and optimized production versions of React + are available at: + + + {reactCode} + + + To load a specific version of react and react-dom, + replace 16 with the version number. + + + + our package CDN link : + + + + {code} + + + + Note: Affects performance and bandwidth + utilization. + + + + + +
+
+ ) +} +CJS.propTypes = { + /** + * Injected by the documentation to work in an iframe. + * You won't need it on your project. + */ + window: PropTypes.func, +} + +export default CJS diff --git a/documentation/src/components/ESM/index.js b/documentation/src/components/ESM/index.js new file mode 100644 index 0000000..a02d3ae --- /dev/null +++ b/documentation/src/components/ESM/index.js @@ -0,0 +1,283 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' +import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism' +import AppBar from '@material-ui/core/AppBar' +import CssBaseline from '@material-ui/core/CssBaseline' +import Card from '@material-ui/core/Card' +import CardContent from '@material-ui/core/CardContent' +import Drawer from '@material-ui/core/Drawer' +import Hidden from '@material-ui/core/Hidden' +import IconButton from '@material-ui/core/IconButton' +import MenuIcon from '@material-ui/icons/Menu' +import Toolbar from '@material-ui/core/Toolbar' +import Typography from '@material-ui/core/Typography' +import { makeStyles, useTheme } from '@material-ui/core/styles' +import NavItemList from '../NavigationDrawer/NavItems' +import { Grid } from '@material-ui/core' +const drawerWidth = 240 + +const useStyles = makeStyles((theme) => ({ + root: { + display: 'flex', + }, + drawer: { + [theme.breakpoints.up('sm')]: { + width: drawerWidth, + flexShrink: 0, + }, + }, + appBar: { + [theme.breakpoints.up('sm')]: { + width: `calc(100% - ${drawerWidth}px)`, + marginLeft: drawerWidth, + }, + backgroundColor: '#f65959', + display: 'flex', + justifyContent: 'center', + height: 62, + }, + + menuButton: { + marginRight: theme.spacing(2), + [theme.breakpoints.up('sm')]: { + display: 'none', + }, + }, + // necessary for content to be below app bar + toolbar: theme.mixins.toolbar, + drawerPaper: { + width: drawerWidth, + }, + Icon: { + fontSize: '2rem', + color: '#f65959', + padding: '1px 12px 1px 6px', + }, + card: { + backgroundColor: '#fefefe', + padding: 4, + }, + title: { + display: 'flex', + alignItems: 'center', + fontSize: '1.6rem', + fontWeight: 'bold', + margin: '18px 0px', + }, + subTitle: { + fontSize: '1.2rem', + marginTop: '15px', + }, + subTitle2: { + fontSize: '1.1rem', + marginTop: '15px', + }, + Note: { + fontSize: '1.05rem', + marginTop: '15px', + }, + CardAction: { + display: 'flex', + justifyContent: 'flex-end', + }, + highlighter: { + borderRadius: 2, + }, + link: { + color: '#f65959', + height: 34, + justifyContent: 'center', + display: 'flex', + alignItems: 'center', + width: 'auto', + padding: '0px 16px', + borderRadius: 4, + border: '1px solid #f65959', + '&:hover': { + backgroundColor: '#f65959', + color: 'white', + }, + }, + pos: { + marginBottom: 12, + }, + content: { + marginTop: 60, + width: '100%', + padding: theme.spacing(3), + }, + gridContainer: { + boxSizing: 'border-box', + }, + gridItem: { + maxWidth: '100%', + }, +})) + +const ESM = (props) => { + const { window } = props + const classes = useStyles() + const theme = useTheme() + const [mobileOpen, setMobileOpen] = React.useState(false) + const code = `` + const Note = `react >= 16.2.0 is peer dependencies and node js version should be >=8.` + const handleDrawerToggle = () => { + setMobileOpen(!mobileOpen) + } + const reactCode = ` +` + + const drawer = ( +
+ +
+ ) + + const container = + window !== undefined ? () => window().document.body : undefined + + return ( +
+ + + + + + + + Installation + + + + +
+ + + + + + React js css loaders is available as an + npm package + and also includes cdn support + + npm + + To Install react-js-css-loaders source files via + npm. + + + npm install react-js-css-loaders --save + + + To Install react-js-css-loaders source files via + yarn. + + + yarn add react-js-css-loaders + + + Note: {Note} + + CDN + + You can also start using react-js-css-loaders with + minimal infra setup - it requires react CDN and our + package CDN link + + + Minified and optimized production versions of React + are available at: + + + {reactCode} + + + To load a specific version of react and react-dom, + replace 16 with the version number. + + + + our package CDN link : + + + + {code} + + + + Note: Affects performance and bandwidth + utilization. + + + + + +
+
+ ) +} +ESM.propTypes = { + /** + * Injected by the documentation to work in an iframe. + * You won't need it on your project. + */ + window: PropTypes.func, +} + +export default ESM diff --git a/documentation/src/components/Installation/index.js b/documentation/src/components/Installation/index.js new file mode 100644 index 0000000..f37e9d7 --- /dev/null +++ b/documentation/src/components/Installation/index.js @@ -0,0 +1,283 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' +import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism' +import AppBar from '@material-ui/core/AppBar' +import CssBaseline from '@material-ui/core/CssBaseline' +import Card from '@material-ui/core/Card' +import CardContent from '@material-ui/core/CardContent' +import Drawer from '@material-ui/core/Drawer' +import Hidden from '@material-ui/core/Hidden' +import IconButton from '@material-ui/core/IconButton' +import MenuIcon from '@material-ui/icons/Menu' +import Toolbar from '@material-ui/core/Toolbar' +import Typography from '@material-ui/core/Typography' +import { makeStyles, useTheme } from '@material-ui/core/styles' +import NavItemList from '../NavigationDrawer/NavItems' +import { Grid } from '@material-ui/core' +const drawerWidth = 240 + +const useStyles = makeStyles((theme) => ({ + root: { + display: 'flex', + }, + drawer: { + [theme.breakpoints.up('sm')]: { + width: drawerWidth, + flexShrink: 0, + }, + }, + appBar: { + [theme.breakpoints.up('sm')]: { + width: `calc(100% - ${drawerWidth}px)`, + marginLeft: drawerWidth, + }, + backgroundColor: '#f65959', + display: 'flex', + justifyContent: 'center', + height: 62, + }, + + menuButton: { + marginRight: theme.spacing(2), + [theme.breakpoints.up('sm')]: { + display: 'none', + }, + }, + // necessary for content to be below app bar + toolbar: theme.mixins.toolbar, + drawerPaper: { + width: drawerWidth, + }, + Icon: { + fontSize: '2rem', + color: '#f65959', + padding: '1px 12px 1px 6px', + }, + card: { + backgroundColor: '#fefefe', + padding: 4, + }, + title: { + display: 'flex', + alignItems: 'center', + fontSize: '1.6rem', + fontWeight: 'bold', + margin: '18px 0px', + }, + subTitle: { + fontSize: '1.2rem', + marginTop: '15px', + }, + subTitle2: { + fontSize: '1.1rem', + marginTop: '15px', + }, + Note: { + fontSize: '1.05rem', + marginTop: '15px', + }, + CardAction: { + display: 'flex', + justifyContent: 'flex-end', + }, + highlighter: { + borderRadius: 2, + }, + link: { + color: '#f65959', + height: 34, + justifyContent: 'center', + display: 'flex', + alignItems: 'center', + width: 'auto', + padding: '0px 16px', + borderRadius: 4, + border: '1px solid #f65959', + '&:hover': { + backgroundColor: '#f65959', + color: 'white', + }, + }, + pos: { + marginBottom: 12, + }, + contentArea: { + marginTop: 60, + width: '100%', + padding: theme.spacing(3), + }, + gridContainer: { + boxSizing: 'border-box', + }, + gridItem: { + maxWidth: '100%', + }, +})) + +const Installation = (props) => { + const { window } = props + const classes = useStyles() + const theme = useTheme() + const [mobileOpen, setMobileOpen] = React.useState(false) + const code = `` + const Note = `react >= 16.2.0 is peer dependencies and node js version should be >=8.` + const handleDrawerToggle = () => { + setMobileOpen(!mobileOpen) + } + const reactCode = ` +` + + const drawer = ( +
+ +
+ ) + + const container = + window !== undefined ? () => window().document.body : undefined + + return ( +
+ + + + + + + + Installation + + + + +
+ + + + + + React js css loaders is available as an + npm package + and also includes cdn support + + npm + + To Install react-js-css-loaders source files via + npm. + + + npm install react-js-css-loaders --save + + + To Install react-js-css-loaders source files via + yarn. + + + yarn add react-js-css-loaders + + + Note: {Note} + + CDN + + You can also start using react-js-css-loaders with + minimal infra setup - it requires react CDN and our + package CDN link + + + Minified and optimized production versions of React + are available at: + + + {reactCode} + + + To load a specific version of react and react-dom, + replace 16 with the version number. + + + + our package CDN link : + + + + {code} + + + + Note: Affects performance and bandwidth + utilization. + + + + + +
+
+ ) +} +Installation.propTypes = { + /** + * Injected by the documentation to work in an iframe. + * You won't need it on your project. + */ + window: PropTypes.func, +} + +export default Installation diff --git a/documentation/src/components/LandingPage/Landing.js b/documentation/src/components/LandingPage/Landing.js new file mode 100644 index 0000000..9f1ddd4 --- /dev/null +++ b/documentation/src/components/LandingPage/Landing.js @@ -0,0 +1,61 @@ +import React from 'react' +import { Grid } from '@material-ui/core' +import Link from '@material-ui/core/Link' +import GitHubIcon from '@material-ui/icons/GitHub' +import Installation from './installation' +import CJS from './cjs' +import ESM from './esm' +import UMD from './umd' +import useStyles from '../../styles/Landing' + +function Landing() { + const classes = useStyles() + + return ( +
+
+ +
+

CSS LOADERS

+

+ Simple loaders using css +

+
+
+
+ + + + + + +
+ + + + + + + + + + + + + + +
+ ) +} + +export default Landing diff --git a/documentation/src/components/LandingPage/cjs.js b/documentation/src/components/LandingPage/cjs.js new file mode 100644 index 0000000..1c2e997 --- /dev/null +++ b/documentation/src/components/LandingPage/cjs.js @@ -0,0 +1,94 @@ +import React from 'react' +import { makeStyles } from '@material-ui/core' +import Card from '@material-ui/core/Card' +import CardActions from '@material-ui/core/CardActions' +import CardContent from '@material-ui/core/CardContent' +import Link from '@material-ui/core/Link' +import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' +import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism' + +const useStyles = makeStyles((theme) => ({ + Icon: { + fontSize: '2rem', + color: '#f65959', + padding: '1px 12px 1px 6px', + }, + card: { + maxWidth: 'auto', + backgroundColor: '#f5f5f5', + padding: 8, + }, + title: { + display: 'flex', + alignItems: 'center', + fontSize: '1.4rem', + fontWeight: '550', + }, + subTitle: { + fontSize: '0.95rem', + marginTop: '20px', + }, + CardAction: { + display: 'flex', + justifyContent: 'flex-end', + }, + highlighter: { + borderRadius: 2, + }, + link: { + color: '#f65959', + height: 34, + justifyContent: 'center', + display: 'flex', + alignItems: 'center', + width: 'auto', + padding: '0px 16px', + borderRadius: 4, + border: '1px solid #f65959', + '&:hover': { + backgroundColor: '#f65959', + color: 'white', + }, + }, + '@media (max-width: 600px) ': { + title: { + fontSize: '1.2rem', + }, + }, +})) + +const CJS = () => { + const classes = useStyles() + const code = `const React = require('react') +const ReactDOM = require('react-dom/server') +const { Moon } = require('react-js-css-loaders') + +const el = React.createElement(Moon) +const html = ReactDOM.renderToString(el) +` + + return ( + + +
+ + Usage - CJS format +
+ + + {code} + +
+ + + Read More + + +
+ ) +} + +export default CJS diff --git a/documentation/src/components/LandingPage/esm.js b/documentation/src/components/LandingPage/esm.js new file mode 100644 index 0000000..67a60a1 --- /dev/null +++ b/documentation/src/components/LandingPage/esm.js @@ -0,0 +1,95 @@ +import React from 'react' +import { makeStyles } from '@material-ui/core' +import Card from '@material-ui/core/Card' +import CardActions from '@material-ui/core/CardActions' +import CardContent from '@material-ui/core/CardContent' +import Link from '@material-ui/core/Link' +import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' +import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism' + +const useStyles = makeStyles((theme) => ({ + Icon: { + fontSize: '2rem', + color: '#f65959', + padding: '1px 12px 1px 6px', + }, + card: { + maxWidth: 'auto', + backgroundColor: '#f5f5f5', + padding: 8, + }, + title: { + display: 'flex', + alignItems: 'center', + fontSize: '1.4rem', + fontWeight: '550', + }, + subTitle: { + fontSize: '0.95rem', + marginTop: '20px', + }, + CardAction: { + display: 'flex', + justifyContent: 'flex-end', + }, + highlighter: { + borderRadius: 2, + }, + link: { + color: '#f65959', + height: 34, + justifyContent: 'center', + display: 'flex', + alignItems: 'center', + width: 'auto', + padding: '0px 16px', + borderRadius: 4, + border: '1px solid #f65959', + '&:hover': { + backgroundColor: '#f65959', + color: 'white', + }, + }, + '@media (max-width: 600px) ': { + title: { + fontSize: '1.2rem', + }, + }, +})) + +const ESM = () => { + const classes = useStyles() + const code = `import {Moon} from 'react-js-css-loaders' +export const LoaderComponent = (props) => ( +
+ +
+) + ` + + return ( + + +
+ + Usage - ESM format +
+ + + {code} + +
+ + + + Read More + + +
+ ) +} + +export default ESM diff --git a/documentation/src/components/LandingPage/installation.js b/documentation/src/components/LandingPage/installation.js new file mode 100644 index 0000000..677f585 --- /dev/null +++ b/documentation/src/components/LandingPage/installation.js @@ -0,0 +1,108 @@ +import React from 'react' +import { makeStyles } from '@material-ui/core' +import Card from '@material-ui/core/Card' +import CardActions from '@material-ui/core/CardActions' +import CardContent from '@material-ui/core/CardContent' +import Link from '@material-ui/core/Link' +import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' +import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism' +import Typography from '@material-ui/core/Typography' + +const useStyles = makeStyles((theme) => ({ + Icon: { + fontSize: '2rem', + color: '#f65959', + padding: '1px 12px 1px 6px', + }, + card: { + maxWidth: 'auto', + backgroundColor: '#f5f5f5', + padding: 8, + }, + bullet: { + display: 'inline-block', + margin: '0 2px', + transform: 'scale(0.8)', + }, + title: { + display: 'flex', + alignItems: 'center', + fontSize: '1.4rem', + fontWeight: '550', + }, + subTitle: { + fontSize: '0.95rem', + marginTop: '15px', + }, + CardAction: { + display: 'flex', + justifyContent: 'flex-end', + }, + highlighter: { + borderRadius: 2, + }, + link: { + color: '#f65959', + height: 34, + justifyContent: 'center', + display: 'flex', + alignItems: 'center', + width: 'auto', + padding: '0px 16px', + borderRadius: 4, + border: '1px solid #f65959', + '&:hover': { + backgroundColor: '#f65959', + color: 'white', + }, + }, + pos: { + marginBottom: 12, + }, +})) + +const Installation = () => { + const classes = useStyles() + const code = `` + + return ( + + +
+ + Installation +
+ + + Install react-js-css-loaders source files via npm. + + + npm install react-js-css-loaders --save + + + or use CDN. + + + {code} + +
+ + + + Read More + + +
+ ) +} + +export default Installation diff --git a/documentation/src/components/LandingPage/umd.js b/documentation/src/components/LandingPage/umd.js new file mode 100644 index 0000000..c106211 --- /dev/null +++ b/documentation/src/components/LandingPage/umd.js @@ -0,0 +1,96 @@ +import React from 'react' +import { makeStyles } from '@material-ui/core' +import Card from '@material-ui/core/Card' +import CardActions from '@material-ui/core/CardActions' +import CardContent from '@material-ui/core/CardContent' +import Link from '@material-ui/core/Link' +import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' +import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism' + +const useStyles = makeStyles((theme) => ({ + Icon: { + fontSize: '2rem', + color: '#f65959', + padding: '1px 12px 1px 6px', + }, + card: { + maxWidth: 'auto', + backgroundColor: '#f5f5f5', + padding: 8, + }, + title: { + display: 'flex', + alignItems: 'center', + fontSize: '1.4rem', + fontWeight: '550', + }, + subTitle: { + fontSize: '0.95rem', + marginTop: '20px', + }, + CardAction: { + display: 'flex', + justifyContent: 'flex-end', + }, + highlighter: { + borderRadius: 2, + }, + link: { + color: '#f65959', + height: 34, + justifyContent: 'center', + display: 'flex', + alignItems: 'center', + width: 'auto', + padding: '0px 16px', + borderRadius: 4, + border: '1px solid #f65959', + '&:hover': { + backgroundColor: '#f65959', + color: 'white', + }, + }, + '@media (max-width: 600px) ': { + title: { + fontSize: '1.2rem', + }, + }, +})) + +const UMD = () => { + const classes = useStyles() + const code = ` + + +` + + return ( + + +
+ + Usage - UMD format +
+ + + {code} + +
+ + + + Read More + + +
+ ) +} + +export default UMD diff --git a/documentation/src/components/NavigationDrawer/NavItems.js b/documentation/src/components/NavigationDrawer/NavItems.js new file mode 100644 index 0000000..c3fe281 --- /dev/null +++ b/documentation/src/components/NavigationDrawer/NavItems.js @@ -0,0 +1,87 @@ +import React from 'react' +import { makeStyles } from '@material-ui/core/styles' +import ListSubheader from '@material-ui/core/ListSubheader' +import List from '@material-ui/core/List' +import ListItem from '@material-ui/core/ListItem' +import ListItemIcon from '@material-ui/core/ListItemIcon' +import ListItemText from '@material-ui/core/ListItemText' +import Link from '@material-ui/core/Link' + +const useStyles = makeStyles((theme) => ({ + root: { + width: '100%', + maxWidth: 360, + backgroundColor: theme.palette.background.paper, + }, + Icon: { + fontSize: '1.5rem', + color: '#f65959', + padding: '1px 12px 1px 6px', + }, + navbarHeader: { + fontSize: 17, + fontWeight: 600, + color: 'black', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: 62, + }, + Link: { + display: 'flex', + color: 'black', + }, +})) + +export default function NavListItem() { + const classes = useStyles() + + return ( + + } + className={classes.root}> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/documentation/src/components/UMD/index.js b/documentation/src/components/UMD/index.js new file mode 100644 index 0000000..eea26b1 --- /dev/null +++ b/documentation/src/components/UMD/index.js @@ -0,0 +1,283 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' +import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism' +import AppBar from '@material-ui/core/AppBar' +import CssBaseline from '@material-ui/core/CssBaseline' +import Card from '@material-ui/core/Card' +import CardContent from '@material-ui/core/CardContent' +import Drawer from '@material-ui/core/Drawer' +import Hidden from '@material-ui/core/Hidden' +import IconButton from '@material-ui/core/IconButton' +import MenuIcon from '@material-ui/icons/Menu' +import Toolbar from '@material-ui/core/Toolbar' +import Typography from '@material-ui/core/Typography' +import { makeStyles, useTheme } from '@material-ui/core/styles' +import NavItemList from '../NavigationDrawer/NavItems' +import { Grid } from '@material-ui/core' +const drawerWidth = 240 + +const useStyles = makeStyles((theme) => ({ + root: { + display: 'flex', + }, + drawer: { + [theme.breakpoints.up('sm')]: { + width: drawerWidth, + flexShrink: 0, + }, + }, + appBar: { + [theme.breakpoints.up('sm')]: { + width: `calc(100% - ${drawerWidth}px)`, + marginLeft: drawerWidth, + }, + backgroundColor: '#f65959', + display: 'flex', + justifyContent: 'center', + height: 62, + }, + + menuButton: { + marginRight: theme.spacing(2), + [theme.breakpoints.up('sm')]: { + display: 'none', + }, + }, + // necessary for content to be below app bar + toolbar: theme.mixins.toolbar, + drawerPaper: { + width: drawerWidth, + }, + Icon: { + fontSize: '2rem', + color: '#f65959', + padding: '1px 12px 1px 6px', + }, + card: { + backgroundColor: '#fefefe', + padding: 4, + }, + title: { + display: 'flex', + alignItems: 'center', + fontSize: '1.6rem', + fontWeight: 'bold', + margin: '18px 0px', + }, + subTitle: { + fontSize: '1.2rem', + marginTop: '15px', + }, + subTitle2: { + fontSize: '1.1rem', + marginTop: '15px', + }, + Note: { + fontSize: '1.05rem', + marginTop: '15px', + }, + CardAction: { + display: 'flex', + justifyContent: 'flex-end', + }, + highlighter: { + borderRadius: 2, + }, + link: { + color: '#f65959', + height: 34, + justifyContent: 'center', + display: 'flex', + alignItems: 'center', + width: 'auto', + padding: '0px 16px', + borderRadius: 4, + border: '1px solid #f65959', + '&:hover': { + backgroundColor: '#f65959', + color: 'white', + }, + }, + pos: { + marginBottom: 12, + }, + content: { + marginTop: 60, + width: '100%', + padding: theme.spacing(3), + }, + gridContainer: { + boxSizing: 'border-box', + }, + gridItem: { + maxWidth: '100%', + }, +})) + +const UMD = (props) => { + const { window } = props + const classes = useStyles() + const theme = useTheme() + const [mobileOpen, setMobileOpen] = React.useState(false) + const code = `` + const Note = `react >= 16.2.0 is peer dependencies and node js version should be >=8.` + const handleDrawerToggle = () => { + setMobileOpen(!mobileOpen) + } + const reactCode = ` +` + + const drawer = ( +
+ +
+ ) + + const container = + window !== undefined ? () => window().document.body : undefined + + return ( +
+ + + + + + + + Installation + + + + +
+ + + + + + React js css loaders is available as an + npm package + and also includes cdn support + + npm + + To Install react-js-css-loaders source files via + npm. + + + npm install react-js-css-loaders --save + + + To Install react-js-css-loaders source files via + yarn. + + + yarn add react-js-css-loaders + + + Note: {Note} + + CDN + + You can also start using react-js-css-loaders with + minimal infra setup - it requires react CDN and our + package CDN link + + + Minified and optimized production versions of React + are available at: + + + {reactCode} + + + To load a specific version of react and react-dom, + replace 16 with the version number. + + + + our package CDN link : + + + + {code} + + + + Note: Affects performance and bandwidth + utilization. + + + + + +
+
+ ) +} +UMD.propTypes = { + /** + * Injected by the documentation to work in an iframe. + * You won't need it on your project. + */ + window: PropTypes.func, +} + +export default UMD diff --git a/documentation/src/components/cjs.js b/documentation/src/components/cjs.js deleted file mode 100644 index 91e0b43..0000000 --- a/documentation/src/components/cjs.js +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react' -import { makeStyles } from '@material-ui/core' -import Card from '@material-ui/core/Card' -import CardActions from '@material-ui/core/CardActions' -import CardContent from '@material-ui/core/CardContent' -import Button from '@material-ui/core/Button' -import Typography from '@material-ui/core/Typography' - -const useStyles = makeStyles((theme) => ({ - btns: { - '& > *': { - margin: theme.spacing(1), - }, - }, - card: { - backgroundColor: '#f5f5f5', - maxWidth: 'auto', - }, - bullet: { - display: 'inline-block', - margin: '0 2px', - transform: 'scale(0.8)', - }, - title: { - fontSize: 14, - }, - pos: { - marginBottom: 12, - }, -})) - -const CJS = () => { - const classes = useStyles() - const bull = - - return ( - - - - Word of the Day - - - be{bull}nev{bull}o{bull}lent - - - adjective - - - well meaning and kindly. -
- {'"a benevolent smile"'} -
-
- - - -
- ) -} - -export default CJS diff --git a/documentation/src/components/esm.js b/documentation/src/components/esm.js deleted file mode 100644 index 976d1a5..0000000 --- a/documentation/src/components/esm.js +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react' -import { makeStyles } from '@material-ui/core' -import Card from '@material-ui/core/Card' -import CardActions from '@material-ui/core/CardActions' -import CardContent from '@material-ui/core/CardContent' -import Button from '@material-ui/core/Button' -import Typography from '@material-ui/core/Typography' - -const useStyles = makeStyles((theme) => ({ - btns: { - '& > *': { - margin: theme.spacing(1), - }, - }, - card: { - maxWidth: 'auto', - backgroundColor: '#f5f5f5', - }, - bullet: { - display: 'inline-block', - margin: '0 2px', - transform: 'scale(0.8)', - }, - title: { - fontSize: 14, - }, - pos: { - marginBottom: 12, - }, -})) - -const ESM = () => { - const classes = useStyles() - const bull = - - return ( - - - - Word of the Day - - - be{bull}nev{bull}o{bull}lent - - - adjective - - - well meaning and kindly. -
- {'"a benevolent smile"'} -
-
- - - -
- ) -} - -export default ESM diff --git a/documentation/src/components/installation.js b/documentation/src/components/installation.js deleted file mode 100644 index 95df85d..0000000 --- a/documentation/src/components/installation.js +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react' -import { makeStyles } from '@material-ui/core' -import Card from '@material-ui/core/Card' -import CardActions from '@material-ui/core/CardActions' -import CardContent from '@material-ui/core/CardContent' -import Button from '@material-ui/core/Button' -import Typography from '@material-ui/core/Typography' - -const useStyles = makeStyles((theme) => ({ - btns: { - '& > *': { - margin: theme.spacing(1), - }, - }, - downloadIcon: { - fontSize: '2rem', - color: '#3f51b5', - padding: '2px 10px', - }, - card: { - maxWidth: 'auto', - backgroundColor: '#f5f5f5', - padding: 6, - }, - bullet: { - display: 'inline-block', - margin: '0 2px', - transform: 'scale(0.8)', - }, - title: { - display: 'flex', - alignItems: 'center', - fontSize: '1.4rem', - fontWeight: '550', - }, - pos: { - marginBottom: 12, - }, -})) - -const Installation = () => { - const classes = useStyles() - - return ( - - -
- - Installation -
- - - Install react-js-css-loaders source files via npm. - -
- - - -
- ) -} - -export default Installation diff --git a/documentation/src/components/umd.js b/documentation/src/components/umd.js deleted file mode 100644 index d5ce4cc..0000000 --- a/documentation/src/components/umd.js +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react' -import { makeStyles } from '@material-ui/core' -import Card from '@material-ui/core/Card' -import CardActions from '@material-ui/core/CardActions' -import CardContent from '@material-ui/core/CardContent' -import Button from '@material-ui/core/Button' -import Typography from '@material-ui/core/Typography' - -const useStyles = makeStyles((theme) => ({ - btns: { - '& > *': { - margin: theme.spacing(1), - }, - }, - card: { - maxWidth: 'auto', - backgroundColor: '#f5f5f5', - }, - bullet: { - display: 'inline-block', - margin: '0 2px', - transform: 'scale(0.8)', - }, - title: { - fontSize: 14, - }, - pos: { - marginBottom: 12, - }, -})) - -const UMD = () => { - const classes = useStyles() - const bull = - - return ( - - - - Word of the Day - - - be{bull}nev{bull}o{bull}lent - - - adjective - - - well meaning and kindly. -
- {'"a benevolent smile"'} -
-
- - - -
- ) -} - -export default UMD diff --git a/documentation/src/index.css b/documentation/src/index.css index e4628f6..1977b89 100644 --- a/documentation/src/index.css +++ b/documentation/src/index.css @@ -10,19 +10,6 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } -.fa-font { - font-size: 8em; - margin: 10px; -} -.big-text { - font-size: 6rem; -} -.title { - display: flex; - justify-content: center; - align-items: center; -} -.title-text { - display: flex; - flex-direction: column; +a { + text-decoration: none; } diff --git a/documentation/src/styles/AppCss.js b/documentation/src/styles/AppCss.js deleted file mode 100644 index 7f912bb..0000000 --- a/documentation/src/styles/AppCss.js +++ /dev/null @@ -1,55 +0,0 @@ -import { makeStyles } from '@material-ui/core/styles' - -const useStyles = makeStyles((theme) => ({ - title: { - padding: '6rem 6rem 3.5rem 6rem', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }, - cssFontIcon: { - color: '#3f51b5', - fontSize: '7.8rem', - margin: '3rem', - }, - titleText: { - display: 'flex', - flexDirection: 'column', - }, - titleTextBig: { - color: '#3f51b5', - marginBottom: 0, - fontSize: '4.5rem', - }, - titileTextSmall: { - fontSize: '2.5rem', - marginTop: 0, - }, - packageIconDiv: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }, - packageIconGithub: { - fontSize: '3rem', - margin: '5px 10px', - }, - packageIconNpm: { - fontSize: '3rem', - margin: '5px 10px', - color: 'red', - }, - black: { - color: 'black', - }, - gridContainer: { - marginTop: 25, - boxSizing: 'border-box', - padding: 15, - }, - gridItem: { - padding: 10, - }, -})) - -export default useStyles diff --git a/documentation/src/styles/Landing.js b/documentation/src/styles/Landing.js new file mode 100644 index 0000000..bab6985 --- /dev/null +++ b/documentation/src/styles/Landing.js @@ -0,0 +1,185 @@ +import { makeStyles } from '@material-ui/core/styles' + +const useStyles = makeStyles((theme) => ({ + title: { + padding: '6rem 6rem 3.5rem 6rem', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + }, + cssFontIcon: { + color: '#f65959', + fontSize: '7.8rem', + margin: '3rem', + }, + titleText: { + display: 'flex', + flexDirection: 'column', + }, + titleTextBig: { + color: '#f65959', + marginBottom: 0, + fontSize: '4.5rem', + }, + titileTextSmall: { + fontSize: '2.5rem', + marginTop: 0, + }, + packageIconDiv: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + }, + packageIconGithub: { + fontSize: '3rem', + margin: '5px 10px', + }, + packageIconNpm: { + fontSize: '3rem', + margin: '5px 10px', + color: 'red', + }, + black: { + color: 'black', + }, + gridContainer: { + marginTop: 25, + boxSizing: 'border-box', + padding: 15, + }, + gridItem: { + padding: 10, + }, + '@media (max-width: 600px) ': { + title: { + padding: '2rem 0.5rem 1rem 1rem', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + }, + cssFontIcon: { + color: '#f65959', + fontSize: '4.3rem', + margin: '1rem', + }, + titleText: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, + titleTextBig: { + color: '#f65959', + marginBottom: 0, + fontSize: '2.2rem', + }, + titileTextSmall: { + fontSize: '1.1rem', + marginTop: 5, + textAlign: 'center', + }, + packageIconDiv: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + }, + packageIconGithub: { + fontSize: '2.3rem', + margin: '2.5px 10px', + }, + packageIconNpm: { + fontSize: '2.3rem', + margin: '2.5px 10px', + color: 'red', + }, + }, + '@media (min-width: 601px) and (max-width: 768px)': { + title: { + padding: '2rem 0.5rem 1rem 1rem', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + }, + cssFontIcon: { + color: '#f65959', + fontSize: '4.8rem', + margin: '1rem', + }, + titleText: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, + titleTextBig: { + color: '#f65959', + marginBottom: 0, + fontSize: '2.8rem', + }, + titileTextSmall: { + fontSize: '1.7rem', + marginTop: 5, + textAlign: 'center', + }, + packageIconDiv: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + }, + packageIconGithub: { + fontSize: '2.6rem', + margin: '2.5px 10px', + }, + packageIconNpm: { + fontSize: '2.6rem', + margin: '2.5px 10px', + color: 'red', + }, + }, + '@media (min-width: 769px) and (max-width: 992px)': { + title: { + padding: '2rem 0.5rem 1rem 1rem', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + }, + cssFontIcon: { + color: '#f65959', + fontSize: '4.8rem', + margin: '1rem', + }, + titleText: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, + titleTextBig: { + color: '#f65959', + marginBottom: 0, + fontSize: '2.8rem', + }, + titileTextSmall: { + fontSize: '1.7rem', + marginTop: 5, + textAlign: 'center', + }, + packageIconDiv: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + }, + packageIconGithub: { + fontSize: '2.6rem', + margin: '2.5px 10px', + }, + packageIconNpm: { + fontSize: '2.6rem', + margin: '2.5px 10px', + color: 'red', + }, + }, + '@media (min-width: 992px) and @media (max-width: 1200px)': {}, +})) + +export default useStyles From 158864f4541dd04f690984b8b61928b1d208a4d8 Mon Sep 17 00:00:00 2001 From: amareshsm Date: Fri, 31 Jul 2020 23:43:14 +0530 Subject: [PATCH 12/50] updated docs --- documentation/package-lock.json | 13 + documentation/package.json | 1 + .../src/components/ESM/LoadersCode.js | 116 ++++++ documentation/src/components/ESM/index.js | 336 +++++++++++++++--- 4 files changed, 407 insertions(+), 59 deletions(-) create mode 100644 documentation/src/components/ESM/LoadersCode.js diff --git a/documentation/package-lock.json b/documentation/package-lock.json index e7a4179..cacc59b 100644 --- a/documentation/package-lock.json +++ b/documentation/package-lock.json @@ -11083,6 +11083,11 @@ "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=" }, + "prettier": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz", + "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==" + }, "pretty-bytes": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz", @@ -11571,6 +11576,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==" }, + "react-js-css-loaders": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/react-js-css-loaders/-/react-js-css-loaders-1.0.3.tgz", + "integrity": "sha512-ch7dq3wcQbKqkkLSyYEjdcI3S7a5t8lpFJJw/yPj+EtFEsOVJ0d6RLvdKA/AgAIC5So49QtjykSY0akZvwCr4A==", + "requires": { + "prettier": "^2.0.5" + } + }, "react-router": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", diff --git a/documentation/package.json b/documentation/package.json index a995816..0ced74a 100644 --- a/documentation/package.json +++ b/documentation/package.json @@ -11,6 +11,7 @@ "prismjs": "^1.20.0", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-js-css-loaders": "^1.0.3", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", "react-syntax-highlighter": "^13.0.0" diff --git a/documentation/src/components/ESM/LoadersCode.js b/documentation/src/components/ESM/LoadersCode.js new file mode 100644 index 0000000..ec99a31 --- /dev/null +++ b/documentation/src/components/ESM/LoadersCode.js @@ -0,0 +1,116 @@ +export const MoonLoader = `import React from 'react' +import { Moon } from 'react-js-css-loaders' + +export const LoaderComponent = (props) => ( +
+ +
+ ) ` + +export const RevolverLoader = `import React from 'react' +import { Revolver } from 'react-js-css-loaders' + +export const LoaderComponent = (props) => ( +
+ +
+ ) ` + +export const ChaserLoader = `import React from 'react' +import { Chaser } from 'react-js-css-loaders' + +export const LoaderComponent = (props) => ( +
+ +
+ ) ` + +export const RhythmLoader = `import React from 'react' +import { Rhythm } from 'react-js-css-loaders' + +export const LoaderComponent = (props) => ( +
+ +
+ ) ` + +export const ElipsisLoader = `import React from 'react' +import { Elipsis } from 'react-js-css-loaders' + +export const LoaderComponent = (props) => ( +
+ +
+ ) ` + +export const ThrobberLoader = `import React from 'react' +import { Throbber } from 'react-js-css-loaders' + +export const LoaderComponent = (props) => ( +
+ +
+ ) ` + +export const RevolutionLoader = `import React from 'react' +import { Revolution } from 'react-js-css-loaders' + +export const LoaderComponent = (props) => ( +
+ +
+ ) ` + +export const SquareLoader = `import React from 'react' +import { Square } from 'react-js-css-loaders' + +export const LoaderComponent = (props) => ( +
+ +
+ ) ` + +export const CardflipingLoader = `import React from 'react' +import { Cardfliping } from 'react-js-css-loaders' + +export const LoaderComponent = (props) => ( +
+ +
+ ) ` + +export const DewdropsLoader = `import React from 'react' +import { Dewdrops } from 'react-js-css-loaders' + +export const LoaderComponent = (props) => ( +
+ +
+ ) ` + +export const SpinnerLoader = `import React from 'react' +import { Spinner } from 'react-js-css-loaders' + +export const LoaderComponent = (props) => ( +
+ +
+ ) ` + +export const WhirlLoader = `import React from 'react' +import { Whirl } from 'react-js-css-loaders' + +export const LoaderComponent = (props) => ( +
+ +
+ ) ` + +export const EaseinoutLoader = `import React from 'react' +import { Easeinout } from 'react-js-css-loaders' + +export const LoaderComponent = (props) => ( +
+ +
+ ) ` diff --git a/documentation/src/components/ESM/index.js b/documentation/src/components/ESM/index.js index a02d3ae..f35703a 100644 --- a/documentation/src/components/ESM/index.js +++ b/documentation/src/components/ESM/index.js @@ -14,7 +14,37 @@ import Toolbar from '@material-ui/core/Toolbar' import Typography from '@material-ui/core/Typography' import { makeStyles, useTheme } from '@material-ui/core/styles' import NavItemList from '../NavigationDrawer/NavItems' -import { Grid } from '@material-ui/core' +import { Grid, Divider } from '@material-ui/core' +import { + Moon, + Revolver, + Chaser, + Rhythm, + Elipsis, + Throbber, + Revolution, + Square, + Cardfliping, + Dewdrops, + Spinner, + Easeinout, + Whirl, +} from 'react-js-css-loaders' +import { + MoonLoader, + ChaserLoader, + RevolverLoader, + RhythmLoader, + ElipsisLoader, + ThrobberLoader, + RevolutionLoader, + SquareLoader, + CardflipingLoader, + DewdropsLoader, + SpinnerLoader, + EaseinoutLoader, + WhirlLoader, +} from './LoadersCode' const drawerWidth = 240 const useStyles = makeStyles((theme) => ({ @@ -82,7 +112,8 @@ const useStyles = makeStyles((theme) => ({ justifyContent: 'flex-end', }, highlighter: { - borderRadius: 2, + borderRadius: 4, + width: '50%', }, link: { color: '#f65959', @@ -113,6 +144,43 @@ const useStyles = makeStyles((theme) => ({ gridItem: { maxWidth: '100%', }, + loaderSection: { + display: 'flex', + }, + Loader: { + display: 'flex', + width: '50%', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: 'white', + }, + '@media (max-width: 600px) ': { + loaderSection: { + flexDirection: 'column', + }, + Loader: { + width: '100%', + height: 250, + }, + highlighter: { + width: '100%', + }, + content: { + padding: theme.spacing(2), + }, + }, + '@media (min-width: 601px) and (max-width: 768px)': { + loaderSection: { + flexDirection: 'column', + }, + Loader: { + width: '100%', + height: 250, + }, + highlighter: { + width: '100%', + }, + }, })) const ESM = (props) => { @@ -120,13 +188,10 @@ const ESM = (props) => { const classes = useStyles() const theme = useTheme() const [mobileOpen, setMobileOpen] = React.useState(false) - const code = `` - const Note = `react >= 16.2.0 is peer dependencies and node js version should be >=8.` + const handleDrawerToggle = () => { setMobileOpen(!mobileOpen) } - const reactCode = ` -` const drawer = (
@@ -156,7 +221,6 @@ const ESM = (props) => {