Add eslint and prettier config locally, add eslint-plugin-grommet (#2540

) * Add eslint and prettier config locally, add eslint-plugin-grommet * Update yarn.lock
grommet · Apr 22, 2022 · a86c3ff · a86c3ff
1 parent 3d43a2c
commit a86c3ff
Show file tree

Hide file tree

Showing 14 changed files with 227 additions and 81 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,2 +1,69 @@
-const scripts = require('@hpe/project-scripts');
-module.exports = scripts.eslint;
+// (C) Copyright 2022 Hewlett Packard Enterprise Development LP.
+
+module.exports = {
+  parser: 'babel-eslint',
+  extends: [
+    'airbnb',
+    'plugin:jsx-a11y/recommended',
+    'prettier',
+    'prettier/react',
+    'plugin:grommet/recommended',
+  ],
+  plugins: ['react', 'jsx-a11y', 'react-hooks', 'prettier'],
+  env: {
+    browser: true,
+    jest: true,
+  },
+  globals: {
+    it: true,
+    expect: true,
+    describe: true,
+    jest: true,
+    document: true,
+    test: true,
+    window: true,
+    fetch: true,
+    WebSocket: true,
+    alert: true,
+  },
+  rules: {
+    semi: [2, 'always'],
+    indent: 'off',
+    'comma-dangle': ['error', 'always-multiline'],
+    'object-curly-spacing': ['error', 'always'],
+    'no-console': 0,
+    'no-useless-concat': 0,
+    'max-len': [2, { ignoreUrls: true, ignoreRegExpLiterals: true }],
+    'jsx-a11y/href-no-hash': 0,
+    'jsx-a11y/anchor-is-valid': 0,
+    'react/jsx-indent': 0,
+    'react/jsx-wrap-multilines': 0,
+    'react/jsx-filename-extension': 0,
+    'implicit-arrow-linebreak': 0,
+    'import/no-named-as-default': 0,
+    'import/newline-after-import': 1,
+    'react/no-unescaped-entities': 0,
+    'react/jsx-first-prop-new-line': [1, 'multiline'],
+    'import/prefer-default-export': 0,
+    'class-methods-use-this': 0,
+    'operator-linebreak': 0,
+    'react/require-default-props': 0,
+    'react/react-in-jsx-scope': 0,
+    'react/no-danger': 0,
+    'react/prefer-stateless-function': 0,
+    'react/no-array-index-key': 0,
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'no-return-assign': 0,
+    'react/destructuring-assignment': 0,
+    'react/forbid-prop-types': 0,
+    'react/jsx-one-expression-per-line': 0,
+    'react/static-property-placement': 0,
+    'react/jsx-props-no-spreading': 0,
+    'import/no-extraneous-dependencies': 0,
+    'import/no-cycle': 0,
+    'global-require': 0,
+    'import/no-dynamic-require': 0,
+    quotes: [2, 'single', { avoidEscape: true }],
+  },
+};
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,2 +1,14 @@
-const scripts = require("@hpe/project-scripts");
-module.exports = scripts.prettier;
+// (C) Copyright 2022 Hewlett Packard Enterprise Development LP.
+
+module.exports = {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  jsxSingleQuote: false,
+  arrowParens: 'avoid',
+};
diff --git a/aries-site/src/components/cards/ExampleImagePreview.js b/aries-site/src/components/cards/ExampleImagePreview.js
@@ -3,18 +3,19 @@ import PropTypes from 'prop-types';
 import Link from 'next/link';
 import { Anchor, Box, Card, Image } from 'grommet';
 
-export const ExampleImagePreview = ({ label, href, ...rest }) => (
+export const ExampleImagePreview = ({ alt, label, href, ...rest }) => (
   <Box align="start" gap="medium">
     <Link href={href} passHref>
       <Card width="medium" height="215px" round="small" overflow="hidden">
-        <Image fit="cover" {...rest} />
+        <Image fit="cover" alt={alt} {...rest} />
       </Card>
     </Link>
     {label && href && <Anchor label={label} href={href} />}
   </Box>
 );
 
 ExampleImagePreview.propTypes = {
+  alt: PropTypes.string,
   figma: PropTypes.string,
   href: PropTypes.string,
   label: PropTypes.string,

diff --git a/aries-site/src/examples/components/card/CardWithImage.js b/aries-site/src/examples/components/card/CardWithImage.js
@@ -5,6 +5,8 @@ export const CardWithImage = () => (
   <Card background="background-front">
     <Box height="small" width="medium">
       <Image
+        alt={`View of the Golden Gate Bridge with San Francisco in the 
+        background on a sunny day with partial clouds.`}
         src="https://images.unsplash.com/photo-1501594907352-04cda38ebc29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2389&q=80"
         fit="cover"
       />

diff --git a/aries-site/src/examples/components/notifications/TaxonomyTable.js b/aries-site/src/examples/components/notifications/TaxonomyTable.js
@@ -1,3 +1,4 @@
+/* eslint-disable grommet/datatable-aria-describedby */
 import React from 'react';
 import { Box, DataTable, Text } from 'grommet';
 

diff --git a/aries-site/src/examples/components/spinner/ContentSpinnerExample.js b/aries-site/src/examples/components/spinner/ContentSpinnerExample.js
@@ -86,7 +86,13 @@ export const ContentSpinnerExample = () => {
       >
         <Tab title="Customer Details">
           <Box align="center" justify="center" height={{ min: 'small' }}>
-            <Spinner size="medium" />
+            <Spinner
+              size="medium"
+              message={{
+                start: 'Loading customer details.',
+                end: 'Customer details have been loaded.',
+              }}
+            />
           </Box>
         </Tab>
         <Tab title="Customization">

diff --git a/aries-site/src/examples/components/spinner/ListSpinnerExample.js b/aries-site/src/examples/components/spinner/ListSpinnerExample.js
@@ -54,6 +54,12 @@ export const ListSpinnerExample = () => (
         </Box>
       )}
     </List>
-    <Spinner alignSelf="center" />
+    <Spinner
+      alignSelf="center"
+      message={{
+        start: 'Loading more data.',
+        end: 'Data has been loaded.',
+      }}
+    />
   </Box>
 );
diff --git a/aries-site/src/examples/components/spinner/SpinnerExample.js b/aries-site/src/examples/components/spinner/SpinnerExample.js
@@ -1,4 +1,11 @@
 import React from 'react';
 import { Spinner } from 'grommet';
 
-export const SpinnerExample = () => <Spinner />;
+export const SpinnerExample = () => (
+  <Spinner
+    message={{
+      start: 'Loading data.',
+      end: 'Data has been loaded.',
+    }}
+  />
+);
diff --git a/aries-site/src/examples/templates/filtering/PersistentFiltering.js b/aries-site/src/examples/templates/filtering/PersistentFiltering.js
@@ -35,6 +35,8 @@ const allData = [
     employeeCount: 200,
     image:
       'https://images.unsplash.com/photo-1584704135557-d8bf7ca50eae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
+    alt: `City buildings with bikes and cars parked on the street on a 
+    sunny day.`,
     locationType: 'Office',
     name: 'Allerod, Denmark (ALL)',
     status: 'Online',
@@ -45,6 +47,7 @@ const allData = [
     employeeCount: 700,
     image:
       'https://images.unsplash.com/photo-1539037116277-4db20889f2d4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
+    alt: 'View overlooking central intersection of Madrid at sunset.',
     locationType: 'Office',
     name: 'Madrid, Spain (ESM)',
     status: 'Offline',
@@ -56,6 +59,8 @@ const allData = [
     employeeCount: 1100,
     image:
       'https://images.unsplash.com/photo-1503424886307-b090341d25d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1955&q=80',
+    alt: `Valley of green grass and trees with yellow leaves surrounded by tall 
+    mountains with snowy peaks.`,
     locationType: 'Office',
     name: 'Fort Collins, CO',
     status: 'Online',
@@ -67,6 +72,8 @@ const allData = [
     employeeCount: 1000,
     image:
       'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2389&q=80',
+    alt: `City buildings with bikes and cars parked on the street on a 
+      sunny day.`,
     locationType: 'Customer Center',
     name: 'WW Corporate Headquarters - San Jose, CA',
     status: 'Online',
@@ -77,6 +84,8 @@ const allData = [
     employeeCount: 300,
     image:
       'https://images.unsplash.com/photo-1534430480872-3498386e7856?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
+    alt: `View from helicopter of New York City skyline with Empire State 
+    Building at the center.`,
     locationType: 'Customer Center',
     name: 'New York, NY',
     status: 'Offline',
@@ -88,6 +97,8 @@ const allData = [
     employeeCount: 500,
     image:
       'https://images.unsplash.com/photo-1584450150050-4b9bdbd51f68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
+    alt: `View looking up at European style apartments with green trees on 
+    the sides and a blue sky in the background.`,
     locationType: 'Customer Center',
     name: 'Amstelveen HQ, NL',
     status: 'Online',
@@ -825,7 +836,7 @@ const Results = ({ data }) => {
             }}
           >
             <Box height="small" fill="horizontal">
-              <Image src={datum.image} fit="cover" />
+              <Image alt={datum.alt} src={datum.image} fit="cover" />
             </Box>
             <CardBody gap="xsmall" pad="medium" justify="between">
               <Box flex={false}>

diff --git a/aries-site/src/examples/templates/global-header/components/MockGlobalHeader.js b/aries-site/src/examples/templates/global-header/components/MockGlobalHeader.js
@@ -2,20 +2,37 @@ import PropTypes from 'prop-types';
 import { Box, Image, ResponsiveContext } from 'grommet';
 import { useContext } from 'react';
 
+const globalHeaderAlt = `HPE Global Header which features HPE logo on the far 
+left, navigational elements in the center, and a menu dropdown on the far 
+right.`;
+
+const globalFooterAlt = `HPE Global Footer which features HPE copyright on the 
+far left and navigational elements such as Privacy and Terms of Use on the far 
+right.`;
+
 export const MockGlobalHeader = ({ children }) => {
   const size = useContext(ResponsiveContext);
 
   return ['xsmall', 'small'].includes(size) ? (
     <Box fill>
-      <Image src="/templateImages/globalheader-small.png" />
+      <Image
+        alt={globalHeaderAlt}
+        src="/templateImages/globalheader-small.png"
+      />
       {children}
-      <Image src="/templateImages/globalheader-footer-small.png" />
+      <Image
+        alt={globalFooterAlt}
+        src="/templateImages/globalheader-footer-small.png"
+      />
     </Box>
   ) : (
     <Box fill>
-      <Image src="/templateImages/globalheader.png" />
+      <Image alt={globalHeaderAlt} src="/templateImages/globalheader.png" />
       {children}
-      <Image src="/templateImages/globalheader-footer.png" />
+      <Image
+        alt={globalFooterAlt}
+        src="/templateImages/globalheader-footer.png"
+      />
     </Box>
   );
 };

diff --git a/aries-site/src/examples/templates/list-views/ListImageIdentifierExample.js b/aries-site/src/examples/templates/list-views/ListImageIdentifierExample.js
@@ -5,58 +5,68 @@ const data = [
   {
     name: 'Eric Soderberg',
     description: 'San Jose, CA',
+    alt: `View of the Golden Gate Bridge with San Francisco in the 
+    background on a sunny day with partial clouds.`,
     image:
       'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2389&q=80',
   },
   {
     name: 'Shimi Yacobi',
     description: 'Fort Collins, CO',
+    alt: `Valley of green grass and trees with yellow leaves surrounded by tall 
+    mountains with snowy peaks.`,
     image:
       'https://images.unsplash.com/photo-1503424886307-b090341d25d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1955&q=80',
   },
   {
     name: 'Chris Carlozzi',
     description: 'San Jose, CA',
+    alt: `View of the Golden Gate Bridge with San Francisco in the 
+    background on a sunny day with partial clouds.`,
     image:
       'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2389&q=80',
   },
   {
     name: 'Taylor Seamans',
     description: 'San Jose, CA',
+    alt: `View of the Golden Gate Bridge with San Francisco in the 
+    background on a sunny day with partial clouds.`,
     image:
       'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2389&q=80',
   },
   {
     name: 'Brittany Archibeque',
     description: 'Fort Collins, CO',
+    alt: `Valley of green grass and trees with yellow leaves surrounded by tall 
+    mountains with snowy peaks.`,
     image:
       'https://images.unsplash.com/photo-1503424886307-b090341d25d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1955&q=80',
   },
 ];
 
 export const ListImageIdentifierExample = () => (
-    <Box width={{ max: 'xxlarge' }} margin="auto" fill>
-      <List
-        background="background-front"
-        data={data}
-        onClickItem={e => {
-          // eslint-disable-next-line no-alert
-          alert(`You clicked on ${e.item.name}`);
-        }}
-      >
-        {(datum, index) => (
-          <Box direction="row" gap="small" key={index}>
-            <Box width="xxsmall" height="xxsmall">
-              <Image src={datum.image} fit="cover" />
-            </Box>
-            <Box>
-              <Text weight="bold" size="large">
-                {datum.name}
-              </Text>
-              <Text size="small">{datum.description}</Text>
-            </Box>
+  <Box width={{ max: 'xxlarge' }} margin="auto" fill>
+    <List
+      background="background-front"
+      data={data}
+      onClickItem={e => {
+        // eslint-disable-next-line no-alert
+        alert(`You clicked on ${e.item.name}`);
+      }}
+    >
+      {(datum, index) => (
+        <Box direction="row" gap="small" key={index}>
+          <Box width="xxsmall" height="xxsmall">
+            <Image alt={datum.alt} src={datum.image} fit="cover" />
           </Box>
-        )}
-      </List>
-    </Box>
-  );
+          <Box>
+            <Text weight="bold" size="large">
+              {datum.name}
+            </Text>
+            <Text size="small">{datum.description}</Text>
+          </Box>
+        </Box>
+      )}
+    </List>
+  </Box>
+);
diff --git a/aries-site/src/pages/404.js b/aries-site/src/pages/404.js
@@ -22,6 +22,7 @@ const Visual = () => {
   return (
     <Box>
       <Image
+        alt="Colored squares, lines, and letters fallen into a pile."
         src={theme.dark ? '/404-pile-invert.svg' : '/404-pile.svg'}
         fit="contain"
       />

diff --git a/package.json b/package.json
@@ -9,9 +9,18 @@
     "url": "https://github.com/grommet/hpe-design-system/issues"
   },
   "devDependencies": {
-    "@hpe/project-scripts": "^1.1.2",
-    "eslint-plugin-prettier": "^3.3.0",
-    "jest": "^25.1.0"
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.20.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-grommet": "^0.1.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.0.0",
+    "jest": "^25.1.0",
+    "prettier": "^2.0.5"
   },
   "workspaces": [
     "aries-core",