From f9103181cf4e7a0f714658a24f40e393ba351e2d Mon Sep 17 00:00:00 2001 From: Prev Wong Date: Thu, 2 Jan 2020 20:05:20 +0800 Subject: [PATCH] lint basic example --- packages/examples/basic/components/Header.js | 44 +++++-- .../basic/components/SettingsPanel.js | 60 +++++----- packages/examples/basic/components/Toolbox.js | 53 +++++++-- packages/examples/basic/components/Topbar.js | 70 +++++++---- .../examples/basic/components/user/Button.js | 110 ++++++++++++++---- .../examples/basic/components/user/Card.js | 59 ++++++---- .../basic/components/user/Container.js | 49 ++++---- .../examples/basic/components/user/Text.js | 53 +++++---- packages/examples/basic/next.config.js | 29 +++-- packages/examples/basic/pages/_app.js | 14 +-- packages/examples/basic/pages/_document.js | 15 ++- packages/examples/basic/pages/about.js | 30 +++-- packages/examples/basic/pages/index.js | 76 ++++++------ packages/examples/basic/src/Link.js | 33 ++++-- packages/examples/basic/src/ProTip.js | 26 +++-- packages/examples/basic/src/theme.js | 16 +-- 16 files changed, 468 insertions(+), 269 deletions(-) diff --git a/packages/examples/basic/components/Header.js b/packages/examples/basic/components/Header.js index 6115f48c8..d0e4c701f 100644 --- a/packages/examples/basic/components/Header.js +++ b/packages/examples/basic/components/Header.js @@ -1,29 +1,57 @@ import React from "react"; -import { Box, Typography, Grid, Button as MaterialButton } from "@material-ui/core"; +import { + Box, + Typography, + Grid, + Button as MaterialButton +} from "@material-ui/core"; import { useEditor } from "@craftjs/core"; import { Card } from "./user/Card"; import { Button } from "./user/Button"; import { Text } from "./user/Text"; export const Toolbox = () => { - const { connectors, query } = useEditor(); + const { connectors } = useEditor(); return ( - + Drag to add - connectors.create(ref, diff --git a/packages/examples/basic/pages/index.js b/packages/examples/basic/pages/index.js index abd1fc180..68eb78723 100644 --- a/packages/examples/basic/pages/index.js +++ b/packages/examples/basic/pages/index.js @@ -1,57 +1,53 @@ -import React, {useState} from 'react'; +import React, { useState } from "react"; import "../styles/main.css"; -import {Typography, Button as MaterialButton, Paper, Grid, makeStyles} from '@material-ui/core'; -import {Toolbox} from '../components/Toolbox'; -import {Container} from '../components/user/Container'; -import {Button} from '../components/user/Button'; -import {Card, CardBottom, CardTop} from '../components/user/Card'; -import {Text} from '../components/user/Text'; -import {SettingsPanel} from '../components/SettingsPanel'; -import {Editor, Frame, Canvas} from "@craftjs/core"; -import { Topbar } from '../components/Topbar'; +import { Typography, Paper, Grid, makeStyles } from "@material-ui/core"; +import { Toolbox } from "../components/Toolbox"; +import { Container } from "../components/user/Container"; +import { Button } from "../components/user/Button"; +import { Card, CardBottom, CardTop } from "../components/user/Card"; +import { Text } from "../components/user/Text"; +import { SettingsPanel } from "../components/SettingsPanel"; +import { Editor, Frame, Canvas } from "@craftjs/core"; +import { Topbar } from "../components/Topbar"; const useStyles = makeStyles(theme => ({ root: { padding: 0, background: "rgb(252, 253, 253)" } -})) +})); export default function App() { const classes = useStyles(); - const [enabled, setEnabled] = useState(true); - const [json, setJson] = useState(null); return ( -
- Basic Page Editor - - setJson(json)} /> - - - - - -
); } diff --git a/packages/examples/basic/src/Link.js b/packages/examples/basic/src/Link.js index 7d481dba5..af795b227 100644 --- a/packages/examples/basic/src/Link.js +++ b/packages/examples/basic/src/Link.js @@ -1,10 +1,10 @@ /* eslint-disable jsx-a11y/anchor-has-content */ -import React from 'react'; -import PropTypes from 'prop-types'; -import clsx from 'clsx'; -import { useRouter } from 'next/router'; -import NextLink from 'next/link'; -import MuiLink from '@material-ui/core/Link'; +import React from "react"; +import PropTypes from "prop-types"; +import clsx from "clsx"; +import { useRouter } from "next/router"; +import NextLink from "next/link"; +import MuiLink from "@material-ui/core/Link"; const NextComposed = React.forwardRef(function NextComposed(props, ref) { const { as, href, prefetch, ...other } = props; @@ -19,14 +19,14 @@ const NextComposed = React.forwardRef(function NextComposed(props, ref) { NextComposed.propTypes = { as: PropTypes.string, href: PropTypes.string, - prefetch: PropTypes.bool, + prefetch: PropTypes.bool }; // A styled version of the Next.js Link component: // https://nextjs.org/docs/#with-link function Link(props) { const { - activeClassName = 'active', + activeClassName = "active", className: classNameProps, innerRef, naked, @@ -35,14 +35,21 @@ function Link(props) { const router = useRouter(); const className = clsx(classNameProps, { - [activeClassName]: router.pathname === props.href && activeClassName, + [activeClassName]: router.pathname === props.href && activeClassName }); if (naked) { return ; } - return ; + return ( + + ); } Link.propTypes = { @@ -53,7 +60,9 @@ Link.propTypes = { innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), naked: PropTypes.bool, onClick: PropTypes.func, - prefetch: PropTypes.bool, + prefetch: PropTypes.bool }; -export default React.forwardRef((props, ref) => ); +export default React.forwardRef((props, ref) => ( + +)); diff --git a/packages/examples/basic/src/ProTip.js b/packages/examples/basic/src/ProTip.js index e9b38c4db..ca34d6964 100644 --- a/packages/examples/basic/src/ProTip.js +++ b/packages/examples/basic/src/ProTip.js @@ -1,8 +1,8 @@ -import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import Link from '@material-ui/core/Link'; -import SvgIcon from '@material-ui/core/SvgIcon'; -import Typography from '@material-ui/core/Typography'; +import React from "react"; +import { makeStyles } from "@material-ui/core/styles"; +import Link from "@material-ui/core/Link"; +import SvgIcon from "@material-ui/core/SvgIcon"; +import Typography from "@material-ui/core/Typography"; function LightBulbIcon(props) { return ( @@ -14,12 +14,12 @@ function LightBulbIcon(props) { const useStyles = makeStyles(theme => ({ root: { - margin: theme.spacing(6, 0, 3), + margin: theme.spacing(6, 0, 3) }, lightBulb: { - verticalAlign: 'middle', - marginRight: theme.spacing(1), - }, + verticalAlign: "middle", + marginRight: theme.spacing(1) + } })); export default function ProTip() { @@ -27,9 +27,11 @@ export default function ProTip() { return ( - Pro tip: See more{' '} - templates on the - Material-UI documentation. + Pro tip: See more{" "} + + templates + {" "} + on the Material-UI documentation. ); } diff --git a/packages/examples/basic/src/theme.js b/packages/examples/basic/src/theme.js index 21af17c75..15f034c55 100644 --- a/packages/examples/basic/src/theme.js +++ b/packages/examples/basic/src/theme.js @@ -1,22 +1,22 @@ -import { createMuiTheme } from '@material-ui/core/styles'; -import { red } from '@material-ui/core/colors'; +import { createMuiTheme } from "@material-ui/core/styles"; +import { red } from "@material-ui/core/colors"; // Create a theme instance. const theme = createMuiTheme({ palette: { primary: { - main: '#556cd6', + main: "#556cd6" }, secondary: { - main: '#19857b', + main: "#19857b" }, error: { - main: red.A400, + main: red.A400 }, background: { - default: '#fff', - }, - }, + default: "#fff" + } + } }); export default theme;