fix: eslint issue

.eslintrc.js

@@ -9,9 +9,12 @@ module.exports = {
     "plugin:@typescript-eslint/recommended",
     "plugin:jest/recommended",
     // Prettier
+    "react-app",
+    "plugin:jsx-a11y/recommended",
     "plugin:prettier/recommended",
     "prettier",
   ],
+  plugins: ["jsx-a11y", "prettier"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaFeatures: {

package.json

@@ -52,7 +52,7 @@
     "@rollup/plugin-node-resolve": "13.0.6",
     "@types/fs-extra": "9.0.13",
     "@types/inquirer": "8.1.3",
-    "@types/jest": "27.0.2",
+    "@types/jest": "^27.0.2",
     "@types/lodash.camelcase": "4.3.6",
     "@types/node": "16.11.7",
     "@types/prettier": "2.4.2",
@@ -64,10 +64,17 @@
     "chalk": "4.1.2",
     "commitlint": "14.1.0",
     "cross-env": "7.0.3",
-    "eslint": "8.2.0",
+    "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jest": "25.2.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "^7.27.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-testing-library": "^5.0.0",
     "fs-extra": "10.0.0",
     "husky": "7.0.4",
     "inquirer": "8.2.0",
@@ -89,7 +96,7 @@
     "ts-node": "10.4.0",
     "tslib": "2.3.1",
     "typedoc": "0.22.9",
-    "typescript": "4.4.4"
+    "typescript": "^4.5.2"
   },
   "engines": {
     "node": ">=10.17.0"
@@ -111,4 +118,4 @@
     "last 2 iOS versions",
     "last 2 ChromeAndroid versions"
   ]
-}
+}

packages/bun/package.json

@@ -40,12 +40,6 @@
     "test": "craco test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",

packages/bun/src/App.test.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

packages/bun/src/App.tsx

@@ -1,20 +1,20 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import logo from "./logo.svg";
+import "./App.css";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+    <div className='App'>
+      <header className='App-header'>
+        <img src={logo} className='App-logo' alt='logo' />
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
         </p>
         <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
+          className='App-link'
+          href='https://reactjs.org'
+          target='_blank'
+          rel='noopener noreferrer'
         >
           Learn React
         </a>

packages/bun/src/components/index.ts

@@ -1 +1 @@
-export { }
+export {};

packages/bun/src/index.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+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')
+  document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function

packages/bun/src/pages/index.ts

@@ -1 +1 @@
-export { }
+export {};

packages/bun/src/reportWebVitals.ts

@@ -1,8 +1,8 @@
-import { ReportHandler } from 'web-vitals';
+import { ReportHandler } from "web-vitals";
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   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);

packages/bun/src/setupTests.ts

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

packages/lettuce/package.json

@@ -33,7 +33,7 @@
     "graphql": "^16.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-native": "^0.66.3",
+    "react-native": "^0.64.3",
     "react-use": "^17.3.1"
   }
 }

packages/meat/package.json

@@ -62,9 +62,8 @@
     "@babel/core": "7.16.0",
     "@types/react": "17.0.35",
     "@types/react-native": "0.66.4",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
     "expo-yarn-workspaces": "1.6.0",
     "metro-config": "0.66.2",
     "typescript": "4.4.4"
   }
-}
+}

packages/recipe/src/colors.ts

@@ -1,3 +1,14 @@
 export const colors = {
-  primary: {},
+  primary: {
+    50: "#E3F2F9",
+    100: "#C5E4F3",
+    200: "#A2D4EC",
+    300: "#7AC1E4",
+    400: "#47A9DA",
+    500: "#0088CC",
+    600: "#007AB8",
+    700: "#006BA1",
+    800: "#005885",
+    900: "#003F5E",
+  },
 };