Skip to content

Commit 5e0e62b

Browse files
AlexandraBuzilaAlexandraBuzila
committed
Add prettier config and format code
1 parent 145aeb5 commit 5e0e62b

File tree

11 files changed

+165
-150
lines changed

11 files changed

+165
-150
lines changed

‎.vscode/extensions.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
// See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
3+
// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
4+
5+
// List of extensions which should be recommended for users of this workspace.
6+
"recommendations": [
7+
"esbenp.prettier-vscode",
8+
"ms-vscode.vscode-typescript-tslint-plugin"
9+
],
10+
// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
11+
"unwantedRecommendations": []
12+
}

‎.vscode/settings.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"editor.formatOnSave": true,
3+
"editor.defaultFormatter": "esbenp.prettier-vscode",
4+
"prettier.jsxSingleQuote": true,
5+
"prettier.singleQuote": true
6+
}

‎src/App.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
}
2525

2626
@keyframes App-logo-spin {
27-
from { transform: rotate(0deg); }
28-
to { transform: rotate(360deg); }
27+
from {
28+
transform: rotate(0deg);
29+
}
30+
to {
31+
transform: rotate(360deg);
32+
}
2933
}

‎src/App.tsx‎

Lines changed: 47 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,45 @@
1-
import React, { Fragment, useState, useEffect, useCallback } from "react";
1+
import React, { Fragment, useState, useEffect, useCallback } from 'react';
22
import {
33
JsonForms,
44
JsonFormsDispatch,
55
JsonFormsReduxContext
6-
} from "@jsonforms/react";
7-
import { Provider } from "react-redux";
8-
import Grid from "@material-ui/core/Grid";
9-
import Typography from "@material-ui/core/Typography";
10-
import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
11-
import createStyles from "@material-ui/core/styles/createStyles";
12-
import { Tabs, Tab } from "@material-ui/core";
13-
import logo from "./logo.svg";
14-
import "./App.css";
15-
import schema from "./schema.json";
16-
import uischema from "./uischema.json";
17-
import { materialCells, materialRenderers } from "@jsonforms/material-renderers";
18-
import { Store } from "redux";
19-
import { get } from "lodash";
20-
import RatingControl from "./RatingControl";
21-
import ratingControlTester from "./ratingControlTester";
6+
} from '@jsonforms/react';
7+
import { Provider } from 'react-redux';
8+
import Grid from '@material-ui/core/Grid';
9+
import Typography from '@material-ui/core/Typography';
10+
import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
11+
import createStyles from '@material-ui/core/styles/createStyles';
12+
import { Tabs, Tab } from '@material-ui/core';
13+
import logo from './logo.svg';
14+
import './App.css';
15+
import schema from './schema.json';
16+
import uischema from './uischema.json';
17+
import {
18+
materialCells,
19+
materialRenderers
20+
} from '@jsonforms/material-renderers';
21+
import { Store } from 'redux';
22+
import { get } from 'lodash';
23+
import RatingControl from './RatingControl';
24+
import ratingControlTester from './ratingControlTester';
2225

2326
const styles = createStyles({
2427
container: {
25-
padding: "1em"
28+
padding: '1em'
2629
},
2730
title: {
28-
textAlign: "center",
29-
padding: "0.25em"
31+
textAlign: 'center',
32+
padding: '0.25em'
3033
},
3134
dataContent: {
32-
display: "flex",
33-
justifyContent: "center",
34-
borderRadius: "0.25em",
35-
backgroundColor: "#cecece"
35+
display: 'flex',
36+
justifyContent: 'center',
37+
borderRadius: '0.25em',
38+
backgroundColor: '#cecece'
3639
},
3740
demoform: {
38-
margin: "auto",
39-
padding: "1rem"
41+
margin: 'auto',
42+
padding: '1rem'
4043
}
4144
});
4245

@@ -45,25 +48,25 @@ export interface AppProps extends WithStyles<typeof styles> {
4548
}
4649

4750
const data = {
48-
name: "Send email to Adrian",
49-
description: "Confirm if you have passed the subject\nHereby ...",
51+
name: 'Send email to Adrian',
52+
description: 'Confirm if you have passed the subject\nHereby ...',
5053
done: true,
51-
recurrence: "Daily",
54+
recurrence: 'Daily',
5255
rating: 3
5356
};
5457

5558
const getDataAsStringFromStore = (store: Store) =>
5659
store
5760
? JSON.stringify(
58-
get(store.getState(), ["jsonforms", "core", "data"]),
61+
get(store.getState(), ['jsonforms', 'core', 'data']),
5962
null,
6063
2
6164
)
62-
: "";
65+
: '';
6366

6467
const App = ({ store, classes }: AppProps) => {
6568
const [tabIdx, setTabIdx] = useState(0);
66-
const [displayDataAsString, setDisplayDataAsString] = useState("");
69+
const [displayDataAsString, setDisplayDataAsString] = useState('');
6770
const [standaloneData, setStandaloneData] = useState(data);
6871
const handleTabChange = useCallback(
6972
(event: any, newValue: number) => {
@@ -92,38 +95,38 @@ const App = ({ store, classes }: AppProps) => {
9295

9396
return (
9497
<Fragment>
95-
<div className="App">
96-
<header className="App-header">
97-
<img src={logo} className="App-logo" alt="logo" />
98-
<h1 className="App-title">Welcome to JSON Forms with React</h1>
99-
<p className="App-intro">More Forms. Less Code.</p>
98+
<div className='App'>
99+
<header className='App-header'>
100+
<img src={logo} className='App-logo' alt='logo' />
101+
<h1 className='App-title'>Welcome to JSON Forms with React</h1>
102+
<p className='App-intro'>More Forms. Less Code.</p>
100103
</header>
101104
</div>
102105

103106
<Grid
104107
container
105-
justify={"center"}
108+
justify={'center'}
106109
spacing={1}
107110
className={classes.container}
108111
>
109112
<Grid item sm={6}>
110-
<Typography variant={"h3"} className={classes.title}>
113+
<Typography variant={'h3'} className={classes.title}>
111114
Bound data
112115
</Typography>
113116
<div className={classes.dataContent}>
114-
<pre id="boundData">{displayDataAsString}</pre>
117+
<pre id='boundData'>{displayDataAsString}</pre>
115118
</div>
116119
</Grid>
117120
<Grid item sm={6}>
118-
<Typography variant={"h3"} className={classes.title}>
121+
<Typography variant={'h3'} className={classes.title}>
119122
Rendered form
120123
</Typography>
121124
<Tabs value={tabIdx} onChange={handleTabChange}>
122-
<Tab label="via Redux" />
123-
<Tab label="Standalone" />
125+
<Tab label='via Redux' />
126+
<Tab label='Standalone' />
124127
</Tabs>
125128
{tabIdx === 0 && (
126-
<div className={classes.demoform} id="form">
129+
<div className={classes.demoform} id='form'>
127130
{store ? (
128131
<Provider store={store}>
129132
<JsonFormsReduxContext>

‎src/Rating.tsx‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as React from 'react';
22

33
// TODO: typings
44
export class Rating extends React.Component<any, any> {
5-
65
constructor(props: any) {
76
super(props);
87
this.state = {
@@ -42,28 +41,28 @@ export class Rating extends React.Component<any, any> {
4241
render() {
4342
const { onClick } = this.props;
4443

45-
return (<div id="#/properties/rating">
46-
<p>
47-
Rating:
48-
</p>
49-
{
50-
[0, 1, 2, 3, 4].map(i => {
51-
const rating = this.state.hoverAt != null ? this.state.hoverAt : this.state.rating;
52-
53-
return <span onMouseOver={() => this.handleMouseOver(i)}
54-
onMouseOut={() => this.handleMouseOut()}
55-
onClick={() => {
56-
this.handleClick(i);
57-
onClick({ value: i + 1 });
44+
return (
45+
<div id='#/properties/rating'>
46+
<p>Rating:</p>
47+
{[0, 1, 2, 3, 4].map(i => {
48+
const rating =
49+
this.state.hoverAt != null ? this.state.hoverAt : this.state.rating;
5850

59-
}}
60-
key={`${this.props.id}_${i}`}
61-
>
62-
{i < rating ? '\u2605' : '\u2606'}
63-
</span>;
64-
})
65-
}
66-
</div>
51+
return (
52+
<span
53+
onMouseOver={() => this.handleMouseOver(i)}
54+
onMouseOut={() => this.handleMouseOut()}
55+
onClick={() => {
56+
this.handleClick(i);
57+
onClick({ value: i + 1 });
58+
}}
59+
key={`${this.props.id}_${i}`}
60+
>
61+
{i < rating ? '\u2605' : '\u2606'}
62+
</span>
63+
);
64+
})}
65+
</div>
6766
);
6867
}
6968
}

‎src/RatingControl.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import * as React from 'react';
2-
import {withJsonFormsControlProps} from '@jsonforms/react';
3-
import {Rating} from './Rating';
2+
import { withJsonFormsControlProps } from '@jsonforms/react';
3+
import { Rating } from './Rating';
44

55
interface RatingControlProps {
66
data: any;
77
handleChange(path: string, value: any): void;
8-
path: string
8+
path: string;
99
}
1010

1111
const RatingControl = ({ data, handleChange, path }: RatingControlProps) => (

‎src/index.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,36 +7,37 @@ import { combineReducers, createStore, Reducer, AnyAction } from 'redux';
77
import schema from './schema.json';
88
import uischema from './uischema.json';
99
import { Actions, jsonformsReducer, JsonFormsState } from '@jsonforms/core';
10-
import { materialCells, materialRenderers } from '@jsonforms/material-renderers';
10+
import {
11+
materialCells,
12+
materialRenderers
13+
} from '@jsonforms/material-renderers';
1114
import RatingControl from './RatingControl';
12-
import ratingControlTester from './ratingControlTester'
15+
import ratingControlTester from './ratingControlTester';
1316

1417
// Setup Redux store
1518
const data = {
1619
name: 'Send email to Adrian',
1720
description: 'Confirm if you have passed the subject\nHereby ...',
1821
done: true,
1922
recurrence: 'Daily',
20-
rating: 3,
23+
rating: 3
2124
};
2225

2326
const initState: JsonFormsState = {
24-
jsonforms: {
25-
cells: materialCells,
26-
renderers: materialRenderers
27-
}
27+
jsonforms: {
28+
cells: materialCells,
29+
renderers: materialRenderers
2830
}
31+
};
2932

30-
const rootReducer: Reducer<JsonFormsState, AnyAction> = combineReducers({ jsonforms: jsonformsReducer() });
33+
const rootReducer: Reducer<JsonFormsState, AnyAction> = combineReducers({
34+
jsonforms: jsonformsReducer()
35+
});
3136
const store = createStore(rootReducer, initState);
3237
store.dispatch(Actions.init(data, schema, uischema));
3338

34-
3539
// Register custom renderer for the Redux tab
3640
store.dispatch(Actions.registerRenderer(ratingControlTester, RatingControl));
3741

38-
ReactDOM.render(
39-
<App store={store}/>,
40-
document.getElementById('root')
41-
);
42+
ReactDOM.render(<App store={store} />, document.getElementById('root'));
4243
registerServiceWorker();

‎src/ratingControlTester.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { rankWith, scopeEndsWith } from "@jsonforms/core";
1+
import { rankWith, scopeEndsWith } from '@jsonforms/core';
22

33
export default rankWith(
44
3, //increase rank as needed
5-
scopeEndsWith("rating")
5+
scopeEndsWith('rating')
66
);

‎src/schema.json‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,11 @@
2121
},
2222
"recurrence": {
2323
"type": "string",
24-
"enum": [
25-
"Never",
26-
"Daily",
27-
"Weekly",
28-
"Monthly"
29-
]
24+
"enum": ["Never", "Daily", "Weekly", "Monthly"]
3025
},
3126
"recurrence_interval": {
3227
"type": "integer"
3328
}
3429
},
35-
"required": [
36-
"name",
37-
"due_date"
38-
]
30+
"required": ["name", "due_date"]
3931
}

0 commit comments

Comments
 (0)