fix: review for code smell, duplicates, IDE notices (#13)

package.json

@@ -66,9 +66,11 @@
     "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
     "@storybook/blocks": "^8.1.3",
     "@storybook/cli": "^8.1.3",
+    "@storybook/manager-api": "^8.2.9",
     "@storybook/react": "^8.1.3",
     "@storybook/react-webpack5": "^8.1.3",
     "@storybook/test": "^8.1.3",
+    "@storybook/theming": "^8.2.9",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",

rollup.config.js

@@ -7,7 +7,6 @@ import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import postcss from 'rollup-plugin-postcss';
 import url from '@rollup/plugin-url';
 import rebase from 'rollup-plugin-rebase';
-import path from 'path';
 
 const packageJson = require('./package.json');
 

src/ChangeFailureRateGraph.tsx

@@ -135,7 +135,7 @@ export const composeGraphData = (_: ChartProps, data: DoraRecord[]) => {
         successUrls: [],
       };
 
-      if (record.status === true && !record.failed_at) {
+      if (record.status && !record.failed_at) {
         count.successful = 1;
         count.successUrls.push(record.deploy_url);
       } else {
@@ -145,7 +145,7 @@ export const composeGraphData = (_: ChartProps, data: DoraRecord[]) => {
 
       entry.repositories.set(key, count);
     } else {
-      if (record.status === true && !record.failed_at) {
+      if (record.status && !record.failed_at) {
         count.successful++;
         count.successUrls.push(record.deploy_url);
       } else {

src/ChangeLeadTimeGraph.tsx

@@ -36,7 +36,7 @@ interface ProcessRepository {
 }
 
 export const composeGraphData = (props: ChartProps, data: DoraRecord[]) => {
-  let reduced = data.reduce(
+  let resp = data.reduce(
     (acc: Map<string, ProcessRepository[]>, record: DoraRecord) => {
       if (!record.merged_at) {
         return acc;
@@ -71,7 +71,7 @@ export const composeGraphData = (props: ChartProps, data: DoraRecord[]) => {
     new Map<string, ProcessRepository[]>(),
   );
 
-  return reduced;
+  return resp;
 };
 
 const renderTooltip = (payload: ProcessRepository, repository: string) => {

src/Loading/loading.module.css

@@ -24,10 +24,10 @@
     box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
   }
   33% {
-    box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
+    box-shadow: -38px 0, -14px -12px, 14px 0, 38px 0;
   }
   66% {
-    box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
+    box-shadow: -38px 0, -14px 0, 14px -12px, 38px 0;
   }
   100% {
     box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;

src/ToolTip/tooltipContent.module.css

@@ -33,17 +33,3 @@
   font-size: 14px;
   color: var(--react-dora-charts-text-color);
 }
-
-.tooltipWrapper {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: -5px;
-  left: -5px;
-  background-color: var(--react-dora-charts-background-color);
-  border-radius: 10px;
-  padding: 10px;
-}

src/TrendGraph.tsx

@@ -152,11 +152,10 @@ const filterGraphData = (
   start: number,
   end: number,
 ): GraphData[] => {
-  const filtered = data.filter((entry: GraphData) => {
+  const resp = data.filter((entry: GraphData) => {
     return entry.date >= start && entry.date <= end;
   });
-
-  return filtered;
+  return resp;
 };
 
 const TrendGraph: React.FC<TrendProps> = (props: TrendProps) => {

src/functions/metricFunctions.tsx

@@ -77,10 +77,10 @@ const calculateChangeFailureRateAverage = (
   data: DoraRecord[],
 ): number => {
   const totalSuccessfulRecords = data.filter(
-    f => f.status === true && !f.failed_at,
+    f => f.status && !f.failed_at,
   ).length;
   const totalFailedRecords = data.filter(
-    f => f.status === false || (f.status === true && f.failed_at),
+    f => !f.status || (f.status && f.failed_at),
   ).length;
 
   if (totalFailedRecords === 0 && totalSuccessfulRecords === 0) {
@@ -157,9 +157,8 @@ const calculateDeploymentFrequencyAverage = (
     totalDeployTime += diff;
   }
 
-  let avgDeployTime = totalDeployTime / sorted.length / millisecondsToHours;
-
-  return avgDeployTime;
+  const resp = totalDeployTime / sorted.length / millisecondsToHours;
+  return resp;
 };
 
 const calculateRecoverTimeAverage = (
@@ -170,7 +169,7 @@ const calculateRecoverTimeAverage = (
   let totalRecoveryTime = 0;
 
   data.forEach(record => {
-    if (record.status === true && !record.failed_at) {
+    if (record.status && !record.failed_at) {
       return;
     }
 

src/icons/icon.module.css

@@ -3,17 +3,6 @@
   stroke: var(--react-dora-charts-primary-color);
 }
 
-.surround {
-  width: 100%;
-  height: 100%;
-}
-
-.icon {
-  position: absolute;
-  width: 33%;
-  height: 33%;
-}
-
 .iconContainer {
   width: 96px;
   height: 96px;

stories/MetricEditor.tsx

@@ -9,7 +9,7 @@ interface Props {
   postFix?: string;
 }
 
-const capitalizeCamelCase = camelCaseString => {
+const capitalizeCamelCase = (camelCaseString: string) => {
   const words = camelCaseString.replace(/([a-z])([A-Z])/g, '$1 $2').split(' ');
 
   const capitalizedWords = words.map(