chore: Use 100 prettier printWidth

packages/app/jest.config.js

@@ -6,8 +6,7 @@ module.exports = {
   coveragePathIgnorePatterns: ['/node_modules/'],
   moduleNameMapper: {
     '\\.(css|less)$': 'identity-obj-proxy',
-    'react-markdown':
-      '<rootDir>/../../node_modules/react-markdown/react-markdown.min.js',
+    'react-markdown': '<rootDir>/../../node_modules/react-markdown/react-markdown.min.js',
   },
   reporters: [
     'default',

packages/app/src/js/components/App.jsx

@@ -66,10 +66,7 @@ export class App extends Component {
           },
         })
         .then(() =>
-          radarService
-            .init(response.credential)
-            .then(this.radarDidLoad)
-            .catch(this.radarDidFail),
+          radarService.init(response.credential).then(this.radarDidLoad).catch(this.radarDidFail),
         ),
     );
   };
@@ -80,9 +77,7 @@ export class App extends Component {
     const { loading, isSignedIn } = this.state;
 
     if (!isSignedIn) {
-      return (
-        <Login onSuccess={this.loginDidSucceed} onFailure={this.loginDidFail} />
-      );
+      return <Login onSuccess={this.loginDidSucceed} onFailure={this.loginDidFail} />;
     }
 
     if (loading) {

packages/app/src/js/components/Entry.jsx

@@ -19,9 +19,7 @@ const Entry = (props) => {
   if (!entry) {
     return <NotFound />;
   }
-  const quadrant = radarService.model.quadrants.find(
-    (q) => q.dirname === entry.quadrant.dirname,
-  );
+  const quadrant = radarService.model.quadrants.find((q) => q.dirname === entry.quadrant.dirname);
 
   return (
     <>
@@ -35,28 +33,21 @@ const Entry = (props) => {
                 Not active on the current version!
               </strong>
               <br />
-              This blip is not on the current version of the radar. If it was
-              recently archived it is likely that it is still relevant. If the
-              blip is older it might no longer be relevant or our assessment of
-              it might be different today.
+              This blip is not on the current version of the radar. If it was recently archived it
+              is likely that it is still relevant. If the blip is older it might no longer be
+              relevant or our assessment of it might be different today.
             </div>
           </div>
         )}
         <div className="row">
           <div className="entry-container">
             <h1>{entry.name}</h1>
-            {entry.logo && (
-              <img src={entry.logo} alt={entry.name} className="entry-logo" />
-            )}
+            {entry.logo && <img src={entry.logo} alt={entry.name} className="entry-logo" />}
           </div>
         </div>
         <div className="row">
           <div className="badges">
-            <Badge
-              className={entry.blip.ringName}
-              icon="map-marker"
-              text={entry.blip.ringName}
-            />
+            <Badge className={entry.blip.ringName} icon="map-marker" text={entry.blip.ringName} />
             <Badge icon="clock-o" text={entry.blip.since} />
             <LicenseBadges license={entry.license} />
           </div>

packages/app/src/js/components/Footer.jsx

@@ -23,19 +23,13 @@ const Footer = () => {
           {dotSeparator}
           Discuss in
           <Icon name="slack" />
-          <a href="https://extendaretail.slack.com/channels/tech-radar">
-            tech-radar
-          </a>
+          <a href="https://extendaretail.slack.com/channels/tech-radar">tech-radar</a>
           <br />
           The Tech Radar Generator is licensed under{' '}
-          <a href="https://github.com/extenda/tech-radar/blob/master/LICENSE">
-            MIT
-          </a>
+          <a href="https://github.com/extenda/tech-radar/blob/master/LICENSE">MIT</a>
           {dotSeparator}
           Thanks to Zalando for the{' '}
-          <a href="https://github.com/zalando/tech-radar">
-            radar visualization
-          </a>
+          <a href="https://github.com/zalando/tech-radar">radar visualization</a>
         </p>
       </div>
     </footer>

packages/app/src/js/components/Login.jsx

@@ -21,8 +21,8 @@ const Login = (props) => {
               <span role="img" aria-label="Wave">
                 &#x1F44B;
               </span>
-              &nbsp; Welcome to the Extenda Retail Tech Radar. Login with your
-              Extenda Retail Google account.
+              &nbsp; Welcome to the Extenda Retail Tech Radar. Login with your Extenda Retail Google
+              account.
             </p>
           </div>
           <div className="three columns">

packages/app/src/js/components/NotFound.jsx

@@ -14,8 +14,8 @@ const NotFound = () => {
           <div className="container">
             <h1>Not Found</h1>
             <p>
-              The requested resource was not found. You might have mistyped
-              something or found a broken link.
+              The requested resource was not found. You might have mistyped something or found a
+              broken link.
             </p>
           </div>
         </div>

packages/app/src/js/components/Quadrant.jsx

@@ -15,9 +15,7 @@ const Quadrant = ({ match }) => {
 
   return (
     <>
-      <Navigation
-        quadrant={{ name: quadrant.name, dirname: quadrant.dirname }}
-      />
+      <Navigation quadrant={{ name: quadrant.name, dirname: quadrant.dirname }} />
       <div className="container">
         <h1>{quadrant.name}</h1>
         <QuadrantList quadrant={quadrant} />

packages/app/src/js/components/QuadrantList.jsx

@@ -54,14 +54,7 @@ const renderEntriesList = (params, ring) => {
 };
 
 const QuadrantList = (props) => {
-  const {
-    blips,
-    quadrant,
-    headerLevel,
-    useShortname,
-    onMouseEnter,
-    onMouseLeave,
-  } = props;
+  const { blips, quadrant, headerLevel, useShortname, onMouseEnter, onMouseLeave } = props;
 
   const params = {
     filter: new Set(blips.map((b) => b.id)),

packages/app/src/js/components/Radar.jsx

@@ -135,19 +135,11 @@ export class Radar extends Component {
           <>
             <div className="u-full-width" style={{ marginBottom: '20px' }}>
               <center>
-                <button
-                  type="button"
-                  data-radar-id="radar"
-                  onClick={this.onChangeRadar}
-                >
+                <button type="button" data-radar-id="radar" onClick={this.onChangeRadar}>
                   <Icon name="rss" />
                   Engineering
                 </button>
-                <button
-                  type="button"
-                  data-radar-id="radar_it"
-                  onClick={this.onChangeRadar}
-                >
+                <button type="button" data-radar-id="radar_it" onClick={this.onChangeRadar}>
                   <Icon name="signal" />
                   IT & BIS
                 </button>
@@ -195,58 +187,51 @@ export class Radar extends Component {
             <div className="one-half column">
               <h2>About the Tech Radar</h2>
               <p>
-                The Extenda Retail Tech Radar is based on the concept introduced
-                by <a href="https://www.thoughtworks.com/radar">ThoughtWorks</a>
-                . The Radar contains a list of technologies, complemented by an
-                assessment result, called ring assessment. The following rings
-                are used:
+                The Extenda Retail Tech Radar is based on the concept introduced by{' '}
+                <a href="https://www.thoughtworks.com/radar">ThoughtWorks</a>. The Radar contains a
+                list of technologies, complemented by an assessment result, called ring assessment.
+                The following rings are used:
               </p>
               <ul className="no-bullets">
                 <li>
                   <strong>Adopt</strong>
                   {' — '}
-                  Technologies we have high confidence in and recommend for wide
-                  use.
+                  Technologies we have high confidence in and recommend for wide use.
                 </li>
                 <li>
                   <strong>Trial</strong>
                   {' — '}
-                  Technologies we have seen used with success, but are yet to be
-                  proved successfully in wide use and at large scale. Carries
-                  higher risk.
+                  Technologies we have seen used with success, but are yet to be proved successfully
+                  in wide use and at large scale. Carries higher risk.
                 </li>
                 <li>
                   <strong>Assess</strong>
                   {' — '}
-                  Technologies that are promising with a clear potential value
-                  for us. Requires research and prototyping to analyze its
-                  impact.
+                  Technologies that are promising with a clear potential value for us. Requires
+                  research and prototyping to analyze its impact.
                 </li>
                 <li>
                   <strong>Hold</strong>
                   {' — '}
-                  Technologies not recommended for new products or technology we
-                  no longer want to invest in. Existing products may still
-                  consider these depending on their legacy.
+                  Technologies not recommended for new products or technology we no longer want to
+                  invest in. Existing products may still consider these depending on their legacy.
                 </li>
               </ul>
             </div>
             <div className="one-half column">
               <h2>The Purpose</h2>
               <p>
-                The Tech Radar aims to inspire and support teams at Extenda
-                Retail to pick the best technologies for their projects. It is
-                way to share experience and knowledge between the teams and to
-                create transparency about the technology direction of Extenda
-                Retail. The Tech Radar also becomes a list of dos and
-                don&apos;ts, what to try and to avoid in order to increase
-                success.
+                The Tech Radar aims to inspire and support teams at Extenda Retail to pick the best
+                technologies for their projects. It is way to share experience and knowledge between
+                the teams and to create transparency about the technology direction of Extenda
+                Retail. The Tech Radar also becomes a list of dos and don&apos;ts, what to try and
+                to avoid in order to increase success.
               </p>
               <h2>How to Contribute</h2>
               <p>
                 The Tech Radar is maintained on{' '}
-                <a href="https://github.com/extenda/tech-radar">GitHub</a>.
-                There you can read more about the process and how to contribute.
+                <a href="https://github.com/extenda/tech-radar">GitHub</a>. There you can read more
+                about the process and how to contribute.
               </p>
             </div>
           </div>

packages/app/src/js/components/entry/License.jsx

@@ -58,17 +58,14 @@ const License = (props) => {
               OS_LICENSES[openSource.name]
             )}
           </p>
-          {openSource.description && (
-            <Markdown>{openSource.description}</Markdown>
-          )}
+          {openSource.description && <Markdown>{openSource.description}</Markdown>}
         </div>
       )}
       {commercial && (
         <div>
           <strong>
             <Icon name="exclamation-triangle" />
-            Available for use with a commercial agreement from{' '}
-            {commercial.company}.
+            Available for use with a commercial agreement from {commercial.company}.
           </strong>
           {commercialDescription(commercial) && (
             <Markdown>{commercialDescription(commercial)}</Markdown>

packages/app/src/js/components/entry/LicenseBadges.jsx

@@ -18,9 +18,7 @@ const LicenseBadges = (props) => {
           link={openSource.link}
         />
       )}
-      {commercial && (
-        <Badge icon="balance-scale" className="license" text="Commercial" />
-      )}
+      {commercial && <Badge icon="balance-scale" className="license" text="Commercial" />}
     </>
   );
 };

packages/app/src/js/modules/radarService.js

@@ -33,8 +33,7 @@ class RadarService {
     });
   };
 
-  getEntry = (filename) =>
-    this.model.entries.find((entry) => entry.filename === filename);
+  getEntry = (filename) => this.model.entries.find((entry) => entry.filename === filename);
 
   listBlips = (tags = []) => {
     const entryFilter = (entry) => {
@@ -53,16 +52,7 @@ class RadarService {
     return this.model.entries
       .filter(entryFilter)
       .map((entry) =>
-        pick(
-          entry.blip,
-          'id',
-          'label',
-          'quadrant',
-          'ring',
-          'link',
-          'moved',
-          'active',
-        ),
+        pick(entry.blip, 'id', 'label', 'quadrant', 'ring', 'link', 'moved', 'active'),
       );
   };
 
@@ -92,28 +82,24 @@ class RadarService {
   };
 
   listEntriesByTag = (tag) =>
-    this.model.entries
-      .filter((entry) => entry.tags.includes(tag))
-      .sort(firstBy('name'));
+    this.model.entries.filter((entry) => entry.tags.includes(tag)).sort(firstBy('name'));
 
   getQuadrant = (dirname, onlyActive = false) => {
     const qi = this.model.quadrants.findIndex((q) => q.dirname === dirname);
     if (qi >= 0) {
       const quadrant = { ...this.model.quadrants[qi] };
       this.model.rings.forEach((ring, index) => {
-        quadrant[ring.toLowerCase()] = this.listEntries(
-          quadrant.dirname,
-          index,
-          onlyActive,
-        ).map((entry) => {
-          const out = pick(entry, 'name', 'shortname', 'filename');
-          const { id, active } = entry.blip;
-          return {
-            ...out,
-            id,
-            active,
-          };
-        });
+        quadrant[ring.toLowerCase()] = this.listEntries(quadrant.dirname, index, onlyActive).map(
+          (entry) => {
+            const out = pick(entry, 'name', 'shortname', 'filename');
+            const { id, active } = entry.blip;
+            return {
+              ...out,
+              id,
+              active,
+            };
+          },
+        );
       });
       return quadrant;
     }

packages/app/test/App.test.jsx

@@ -16,9 +16,7 @@ const TEST_TOKEN =
 
 jest.mock('../src/js/modules/sha256');
 
-jest.mock('../src/js/components/Radar', () => () => (
-  <div id="radar">Radar</div>
-));
+jest.mock('../src/js/components/Radar', () => () => <div id="radar">Radar</div>);
 
 jest.mock('../src/js/components/Entry', () => () => <div>Entry</div>);
 

packages/app/test/Badge.test.jsx

@@ -10,16 +10,12 @@ describe('<Badge />', () => {
   });
 
   test('It renders badge with extra className', () => {
-    const component = shallow(
-      <Badge icon="test" text="test" className="my-test" />,
-    );
+    const component = shallow(<Badge icon="test" text="test" className="my-test" />);
     expect(component).toMatchSnapshot();
   });
 
   test('It renders badge with link', () => {
-    const icon = shallow(
-      <Badge icon="test" text="test" link="http://test.com" />,
-    );
+    const icon = shallow(<Badge icon="test" text="test" link="http://test.com" />);
     expect(icon.find('a')).toHaveLength(1);
   });
 });