feat: Install and configure prettier for consistant formatting

Author: mayank1513

.prettierignore

@@ -0,0 +1 @@
+package-lock.json

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "arrowParens": "avoid",
+  "jsxBracketSameLine": true,
+  "bracketSameLine": true
+}

package-lock.json

@@ -27,6 +27,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "jsdom": "^24.1.0",
+    "prettier": "^3.3.1",
     "start-server-and-test": "^2.0.4",
     "typescript": "~5.4.5",
     "vite": "^5.2.12",
@@ -35,6 +36,7 @@
   "scripts": {
     "dev": "vite --port 3000",
     "build": "tsc && vite build",
+    "format": "prettier --write \"**/*.{ts,tsx,md,css,scss}\"",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview --port 3000",
     "test": "vitest run --coverage",

package.json

@@ -1,11 +1,11 @@
 import { FC } from 'react';
 
 export const Header: FC = () => (
-  <div className='App'>
-    <header className='App-header'>
-      <img src='./logo.svg' className='App-logo' alt='logo' />
-      <h1 className='App-title'>Welcome to JSON Forms with React</h1>
-      <p className='App-intro'>More Forms. Less Code.</p>
+  <div className="App">
+    <header className="App-header">
+      <img src="./logo.svg" className="App-logo" alt="logo" />
+      <h1 className="App-title">Welcome to JSON Forms with React</h1>
+      <p className="App-intro">More Forms. Less Code.</p>
     </header>
   </div>
 );

src/components/Header.tsx

@@ -64,20 +64,18 @@ export const JsonFormsDemo: FC = () => {
       container
       justifyContent={'center'}
       spacing={1}
-      style={classes.container}
-    >
+      style={classes.container}>
       <Grid item sm={6}>
         <Typography variant={'h4'}>Bound data</Typography>
         <div style={classes.dataContent}>
-          <pre id='boundData'>{stringifiedData}</pre>
+          <pre id="boundData">{stringifiedData}</pre>
         </div>
         <Button
           style={classes.resetButton}
           onClick={clearData}
-          color='primary'
-          variant='contained'
-          data-testid='clear-data'
-        >
+          color="primary"
+          variant="contained"
+          data-testid="clear-data">
           Clear data
         </Button>
       </Grid>

src/components/JsonFormsDemo.tsx

@@ -11,21 +11,20 @@ export const Rating: FC<RatingProps> = ({ id, value, updateValue }) => {
   const [hoverAt, setHoverAt] = useState<number | null>(null);
 
   return (
-    <div id='#/properties/rating' className='rating'>
+    <div id="#/properties/rating" className="rating">
       <InputLabel shrink style={{ marginTop: '0.8em' }}>
         Rating
       </InputLabel>
       <div style={{ cursor: 'pointer', fontSize: '18px' }}>
-        {[0, 1, 2, 3, 4].map((i) => {
+        {[0, 1, 2, 3, 4].map(i => {
           const fullStars = hoverAt ?? value;
 
           return (
             <span
               onMouseOver={() => setHoverAt(i + 1)}
               onMouseOut={() => setHoverAt(null)}
               onClick={() => updateValue(i + 1)}
-              key={`${id}_${i}`}
-            >
+              key={`${id}_${i}`}>
               {i < fullStars ? '\u2605' : '\u2606'}
             </span>
           );

src/components/Rating.tsx

@@ -28,5 +28,5 @@ createRoot(rootEl).render(
       <CssBaseline />
       <App />
     </ThemeProvider>
-  </StrictMode>
+  </StrictMode>,
 );

src/main.tsx

@@ -2,5 +2,5 @@ import { rankWith, scopeEndsWith } from '@jsonforms/core';
 
 export default rankWith(
   3, //increase rank as needed
-  scopeEndsWith('rating')
+  scopeEndsWith('rating'),
 );