Fix eslint

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
     'plugin:react/jsx-runtime',
     'google',
   ],
+  'root': true,
   'parserOptions': {
     'ecmaFeatures': {
       'jsx': true,
@@ -34,7 +35,7 @@ module.exports = {
     'linebreak-style': ['error', process.platform === 'win32' ? 'windows' : 'unix'],
     'max-len': [
       'error',
-      {'code': 80, 'ignoreStrings': true},
+      { 'code': 80, 'ignoreStrings': true },
     ],
     'no-restricted-imports': [
       'error',

examples/api-list/package.json

@@ -20,13 +20,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
+  }, 
   "browserslist": {
     "production": [
       ">0.2%",

examples/api-list/src/App.js

@@ -1,36 +1,36 @@
-import { useEffect } from "react";
-import Container from "@mui/material/Container";
-import CircularProgress from "@mui/material/CircularProgress";
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import CardContent from "@mui/material/CardContent";
-import CardMedia from "@mui/material/CardMedia";
-import Typography from "@mui/material/Typography";
-import { CardActionArea } from "@mui/material";
-import Stack from "@mui/material/Stack";
-import Button from "@mui/material/Button";
+import {useEffect} from 'react';
+import Container from '@mui/material/Container';
+import CircularProgress from '@mui/material/CircularProgress';
+import Grid from '@mui/material/Grid';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Typography from '@mui/material/Typography';
+import {CardActionArea} from '@mui/material';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
 
-import "./App.css";
+import './App.css';
 
-import { useStore } from "./store";
+import {useStore} from './store';
 
 function App() {
   const [images, setImages] = useStore.images();
   const [loading, setLoading] = useStore.loading();
   const [error, setError] = useStore.error();
 
   useEffect(() => {
-    fetch("https://picsum.photos/v2/list")
-      .then((response) => response.json())
-      .then((images) => {
-        setImages(images);
-      })
-      .catch((error) => {
-        setError(error);
-      })
-      .finally(() => {
-        setLoading(false);
-      });
+    fetch('https://picsum.photos/v2/list')
+        .then((response) => response.json())
+        .then((images) => {
+          setImages(images);
+        })
+        .catch((error) => {
+          setError(error);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
     // eslint-disable-next-line
   }, []);
 
@@ -41,7 +41,7 @@ function App() {
       direction="column"
       alignItems="center"
       justifyContent="center"
-      style={{ minHeight: "100vh" }}
+      style={{minHeight: '100vh'}}
     >
       <CircularProgress />
     </Grid>
@@ -50,19 +50,19 @@ function App() {
   const ListView = (
     <Grid
       container
-      spacing={{ xs: 2, md: 3 }}
-      columns={{ xs: 4, sm: 8, md: 12 }}
+      spacing={{xs: 2, md: 3}}
+      columns={{xs: 4, sm: 8, md: 12}}
     >
       {images.slice(0, 12).map((data) => {
-        const { author, download_url, id } = data;
+        const {author, downloadUrl, id} = data;
         return (
           <Grid item xs={2} sm={4} md={4} key={id}>
-            <Card sx={{ maxHeight: 345 }}>
+            <Card sx={{maxHeight: 345}}>
               <CardActionArea>
                 <CardMedia
                   component="img"
                   height="140"
-                  image={download_url}
+                  image={downloadUrl}
                   alt="green iguana"
                 />
                 <CardContent>
@@ -84,8 +84,8 @@ function App() {
    */
   const ViewToShow = loading ? LoadingView : error ? ErrorView : ListView;
   return (
-    <Container maxWidth="lg" sx={{ mb: 4 }}>
-      <Stack spacing={2} direction="row" sx={{ py: 4 }}>
+    <Container maxWidth="lg" sx={{mb: 4}}>
+      <Stack spacing={2} direction="row" sx={{py: 4}}>
         <Button variant="contained" onClick={() => setLoading(!loading)}>
           Toggle Loading State
         </Button>

examples/api-list/src/index.js

@@ -1,14 +1,15 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import App from "./App";
+// eslint-disable-next-line no-restricted-imports
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
 // import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+    document.getElementById('root'),
 );
 
 // If you want to start measuring performance in your app, pass a function

examples/api-list/src/reportWebVitals.js

@@ -1,6 +1,6 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+    import('web-vitals').then(({getCLS, getFID, getFCP, getLCP, getTTFB}) => {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);
       getFCP(onPerfEntry);

examples/api-list/src/store.js

@@ -1,6 +1,6 @@
-import createStore from "teaful";
+import createStore from 'teaful';
 
-export const { useStore } = createStore({
+export const {useStore} = createStore({
   images: [],
   loading: true,
   error: false,

examples/todo-list/src/AddTodoTask.js

@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { useStore } from './store';
+import {useState} from 'react';
+import {useStore} from './store';
 
 export default function AddTodoTask() {
   const [counter, setCounter] = useState(0);
@@ -14,7 +14,7 @@ export default function AddTodoTask() {
 
     setTodo({
       ...todo,
-      [counter]: { text: e.target.children[0].value, id: counter },
+      [counter]: {text: e.target.children[0].value, id: counter},
     });
     e.target.children[0].value = '';
     setCounter(counter + 1);

examples/todo-list/src/TodoList.js

@@ -1,4 +1,4 @@
-import { useStore } from './store';
+import {useStore} from './store';
 
 import Task from './Task';
 
@@ -9,21 +9,21 @@ export default function TodoList() {
 
   const resolve = (task) => {
     deleteTask(task.id);
-    setDone({ ...done, [task.id]: { ...task } });
+    setDone({...done, [task.id]: {...task}});
   };
 
   const unresolve = (task) => {
     deleteTask(task.id, true);
-    setTodo({ ...todo, [task.id]: { ...task } });
+    setTodo({...todo, [task.id]: {...task}});
   };
 
   const deleteTask = (id, resolved) => {
     if (resolved) {
-      const newDoneList = { ...done };
+      const newDoneList = {...done};
       delete newDoneList[id];
       setDone(newDoneList);
     } else {
-      const newTodoList = { ...todo };
+      const newTodoList = {...todo};
       delete newTodoList[id];
       setTodo(newTodoList);
     }

package.json

@@ -54,7 +54,8 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "lint": "eslint ./package ./tests",
-    "format": "eslint --fix ./package ./tests ./examples",
+    "format": "eslint --fix ./package ./tests",
+    "format:examples": "eslint --fix ./examples",
     "test": "jest ./package ./tests",
     "test:example:todo-list": "jest ./examples/todo-list",
     "test:examples": "jest ./examples",