Enforce styling rules

Author: bidoubiwa

.editorconfig

@@ -10,6 +10,7 @@ indent_size = 2
 charset = utf-8
 trim_trailing_whitespace = true
 max_line_length = 80
+quote_type = single
 
 [*.{js,ts}]
 quote_type = single

.eslintrc.js

@@ -3,38 +3,44 @@ module.exports = {
     browser: true,
     commonjs: true,
     es2020: true,
-    node: true
+    node: true,
   },
   globals: {
-    strapi: true
+    strapi: true,
   },
   extends: [
+    'eslint:recommended',
     'plugin:react/recommended',
-    'standard',
-    'plugin:cypress/recommended'
+    'plugin:cypress/recommended',
+    'plugin:prettier/recommended',
   ],
   parserOptions: {
     ecmaFeatures: {
-      jsx: true
+      jsx: true,
     },
-    ecmaVersion: 11
+    ecmaVersion: 11,
   },
-  ignorePatterns: ['playground/plugins'],
-  plugins: [
-    'react'
-  ],
+  ignorePatterns: ['playground'],
+  plugins: ['react', 'prettier'],
   settings: {
     react: {
-      version: 'detect'
-    }
+      version: 'detect',
+    },
   },
   rules: {
-    'react/jsx-indent': 'error',
-    'react/jsx-indent-props': [2, 2],
     'cypress/no-unnecessary-waiting': 'off',
     'react/prop-types': 'off',
     'react/jsx-closing-bracket-location': [2, 'tag-aligned'],
     'no-unused-vars': ['error', { varsIgnorePattern: '^omit.*$' }],
-    'array-callback-return': 'off'
-  }
+    'array-callback-return': 'off',
+    'arrow-parens': ['error', 'as-needed'],
+    'prettier/prettier': [
+      'error',
+      {
+        quoteProps: 'consistent',
+        semi: false,
+        arrowParens: 'avoid',
+      },
+    ],
+  },
 }

admin/src/components/Collections.js

@@ -25,7 +25,7 @@ export const ReloadButton = styled(Button)`
 const headers = [
   {
     name: 'Name',
-    value: 'name'
+    value: 'name',
   },
   {
     name: 'In MeiliSearch',
@@ -41,8 +41,8 @@ const headers = [
   },
   {
     name: 'Hooks',
-    value: 'hooked'
-  }
+    value: 'hooked',
+  },
 ]
 
 const Collections = ({ updateCredentials }) => {
@@ -113,7 +113,7 @@ const Collections = ({ updateCredentials }) => {
   // Remove a collection from MeiliSearch
   const removeCollection = async ({ name: collection }) => {
     const res = await request(`/${pluginId}/indexes/${collection}/`, {
-      method: 'DELETE'
+      method: 'DELETE',
     })
     if (res.error) errorNotifications(res)
     else successNotification({ message: `${collection} collection is removed from MeiliSearch!`, duration: 4000 })

admin/src/components/Credentials.js

@@ -15,9 +15,9 @@ const Credentials = ({ setUpdatedCredentials }) => {
 
   useEffect(() => {
     strapi.lockApp()
-    async function fillMeilisearchCredentials () {
+    async function fillMeilisearchCredentials() {
       const { apiKey, host } = await request(`/${pluginId}/credentials/`, {
-        method: 'GET'
+        method: 'GET',
       })
       setApiKey(apiKey)
       setHost(host)
@@ -31,47 +31,51 @@ const Credentials = ({ setUpdatedCredentials }) => {
       method: 'POST',
       body: {
         host: msHost,
-        apiKey: msApiKey
-      }
+        apiKey: msApiKey,
+      },
     })
     strapi.notification.toggle({
       type: 'success',
       message: 'MeiliSearch Credentials Updated!',
-      timeout: 4000
+      timeout: 4000,
     })
     setApiKey(apiKey)
     setHost(host)
     setUpdatedCredentials(prev => !prev)
   }
 
   return (
-      <div className="col-md-12">
-          <Wrapper>
-              <Label htmlFor="MSHost" message="MeiliSearch Host" />
-              <InputText
-                name="MSHost"
-                onChange={({ target: { value } }) => {
-                  setHost(value)
-                }}
-                placeholder="Host"
-                type="text"
-                value={msHost}
-              />
-              <Label htmlFor="MSApiKey" message="MeiliSearch Api Key" />
-              <InputText
-                name="MSApiKey"
-                onChange={({ target: { value } }) => {
-                  setApiKey(value)
-                }}
-                placeholder="apiKey"
-                type="text"
-                value={msApiKey}
-              />
-              <Button className="credentials_button" onClick={addMeilisearchCredentials} style={{ marginTop: '20px' }}>
-                  Add
-              </Button>
-          </Wrapper>
-      </div>
+    <div className="col-md-12">
+      <Wrapper>
+        <Label htmlFor="MSHost" message="MeiliSearch Host" />
+        <InputText
+          name="MSHost"
+          onChange={({ target: { value } }) => {
+            setHost(value)
+          }}
+          placeholder="Host"
+          type="text"
+          value={msHost}
+        />
+        <Label htmlFor="MSApiKey" message="MeiliSearch Api Key" />
+        <InputText
+          name="MSApiKey"
+          onChange={({ target: { value } }) => {
+            setApiKey(value)
+          }}
+          placeholder="apiKey"
+          type="text"
+          value={msApiKey}
+        />
+        <Button
+          className="credentials_button"
+          onClick={addMeilisearchCredentials}
+          style={{ marginTop: '20px' }}
+        >
+          Add
+        </Button>
+      </Wrapper>
+    </div>
   )
 }
 

admin/src/containers/App/index.js

@@ -17,18 +17,18 @@ import HomePage from '../HomePage'
 const theme = {
   colors: {
     backgroundColor: '#ffffff',
-    shadows: '#e3e9f3'
-  }
+    shadows: '#e3e9f3',
+  },
 }
 
 const App = () => {
   return (
-      <ThemeProvider theme={theme} >
-          <Switch>
-              <Route path={`/plugins/${pluginId}`} component={HomePage} exact />
-              <Route component={NotFound} />
-          </Switch>
-      </ThemeProvider>
+    <ThemeProvider theme={theme}>
+      <Switch>
+        <Route path={`/plugins/${pluginId}`} component={HomePage} exact />
+        <Route component={NotFound} />
+      </Switch>
+    </ThemeProvider>
   )
 }
 

admin/src/containers/HomePage/index.js

@@ -16,16 +16,16 @@ const HomePage = () => {
   const { formatMessage } = useGlobalContext()
 
   return (
-      <div className="container-fluid" style={{ padding: '18px 30px 66px 30px' }}>
-          <Header
-            title={{
-              label: formatMessage({ id: getTrad('plugin.name') })
-            }}
-            content={formatMessage({ id: getTrad('header.description') })}
-          />
-          <Credentials setUpdatedCredentials={setUpdatedCredentials} />
-          <Collections updateCredentials={updateCredentials} />
-      </div>
+    <div className="container-fluid" style={{ padding: '18px 30px 66px 30px' }}>
+      <Header
+        title={{
+          label: formatMessage({ id: getTrad('plugin.name') }),
+        }}
+        content={formatMessage({ id: getTrad('header.description') })}
+      />
+      <Credentials setUpdatedCredentials={setUpdatedCredentials} />
+      <Collections updateCredentials={updateCredentials} />
+    </div>
   )
 }
 

admin/src/containers/Initializer/index.js

@@ -20,7 +20,7 @@ const Initializer = ({ updatePlugin }) => {
 }
 
 Initializer.propTypes = {
-  updatePlugin: PropTypes.func.isRequired
+  updatePlugin: PropTypes.func.isRequired,
 }
 
 export default Initializer

admin/src/index.js

@@ -6,7 +6,8 @@ import lifecycles from './lifecycles'
 import trads from './translations'
 
 export default strapi => {
-  const pluginDescription = pluginPkg.strapi.description || pluginPkg.description
+  const pluginDescription =
+    pluginPkg.strapi.description || pluginPkg.description
   const icon = pluginPkg.strapi.icon
   const name = pluginPkg.strapi.name
 
@@ -33,7 +34,7 @@ export default strapi => {
           icon,
           label: {
             id: `${pluginId}.plugin.name`,
-            defaultMessage: name
+            defaultMessage: name,
           },
           name,
           permissions: [
@@ -42,10 +43,10 @@ export default strapi => {
             //   action: '', // the action name should be plugins::plugin-name.actionType
             //   subject: null,
             // },
-          ]
-        }
-      ]
-    }
+          ],
+        },
+      ],
+    },
   }
 
   return strapi.registerPlugin(plugin)

admin/src/lifecycles.js

@@ -1,3 +1,3 @@
-function lifecycles () {}
+function lifecycles() {}
 
 export default lifecycles

admin/src/pluginId.js

@@ -1,7 +1,4 @@
 const pluginPkg = require('../../package.json')
-const pluginId = pluginPkg.name.replace(
-  /^strapi-plugin-/i,
-  ''
-)
+const pluginId = pluginPkg.name.replace(/^strapi-plugin-/i, '')
 
 module.exports = pluginId