Add Prettier and format code

Author: lulunac27a

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "tabWidth": 4,
+    "printWidth": 80
+}

generate-react-cli.json

@@ -13,4 +13,4 @@
   },
   "usesCssModule": true,
   "cssPreprocessor": "css"
-}
+}

src/components/CostDisplay/CostDisplay.js

@@ -8,7 +8,7 @@ const CostDisplay = (
 ) => (
   <div className={styles.CostDisplay} data-testid="CostDisplay">
     {/*display cost display with specified styles*/}
-    Cost:{" "}
+    Cost:{' '}
     <span id="cost-value">
       <NumericDisplay value={cost} />
     </span>

src/components/NumericDisplay/NumericDisplay.lazy.js

@@ -2,7 +2,7 @@ import React, { lazy, Suspense } from 'react';
 
 const LazyNumericDisplay = lazy(() => import('./NumericDisplay'));
 
-const NumericDisplay = props => (
+const NumericDisplay = (props) => (
   <Suspense fallback={null}>
     <LazyNumericDisplay {...props} />
   </Suspense>

src/components/NumericDisplay/NumericDisplay.stories.js

@@ -2,7 +2,7 @@
 import NumericDisplay from './NumericDisplay';
 
 export default {
-  title: "NumericDisplay",
+  title: 'NumericDisplay',
 };
 
 export const Default = () => <NumericDisplay />;

src/components/NumericDisplay/NumericDisplay.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import NumericDisplay from './NumericDisplay';
+import NumericDisplay, { formatNumber } from './NumericDisplay';
 
 describe('<NumericDisplay />', () => {
   test('it should mount', () => {
@@ -11,4 +11,28 @@ describe('<NumericDisplay />', () => {
 
     expect(numericDisplay).toBeInTheDocument();
   });
+  test('it should format number with default values', () => {
+    const defaultNumericValue = formatNumber();
+    expect(defaultNumericValue).toBe('0');
+  });
+  test('it should render with large number', () => {
+    const largeNumericValue = formatNumber(9876);
+    const bigNumericValue = formatNumber(19283);
+    const veryLargeNumericValue = formatNumber(7654321);
+    expect(largeNumericValue).toBe('9.88K');
+    expect(bigNumericValue).toBe('19.28K');
+    expect(veryLargeNumericValue).toBe('7.65M');
+  });
+  test('it should render with large number without short format', () => {
+    const largeNumericValue = formatNumber(9876.543, false);
+    const smallNumericValue = formatNumber(654.321, false);
+    expect(largeNumericValue).toBe('9877');
+    expect(smallNumericValue).toBe('654');
+  });
+  test('it should render with non-integer number', () => {
+    const smallDecimalNumericValue = formatNumber(3.456);
+    const bigDecimalNumericValue = formatNumber(987.65);
+    expect(smallDecimalNumericValue).toBe('3');
+    expect(bigDecimalNumericValue).toBe('988');
+  });
 });

src/index.css

@@ -1,16 +1,16 @@
 body {
   /*body styles*/
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif; /*default computer system font*/
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; /*default computer system font*/
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: 'Source Code Pro', Menlo, Monaco, Consolas, 'Courier New',
-    monospace; /*set font for code block to monospaced font*/
+  font-family:
+    'Source Code Pro', Menlo, Monaco, Consolas, 'Courier New', monospace; /*set font for code block to monospaced font*/
 }
 
 table,

src/index.js

@@ -8,7 +8,7 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function