Rename v1 to web-check-live

src/web-check-live/components/Results/Lighthouse.tsx

@@ -0,0 +1,52 @@
+import { Card } from 'web-check-live/components/Form/Card';
+import { ExpandableRow } from 'web-check-live/components/Form/Row';
+
+const processScore = (percentile: number) => {
+  return `${Math.round(percentile * 100)}%`;
+}
+
+interface Audit {
+  id: string,
+  score?: number | string,
+  scoreDisplayMode?: string,
+  title?: string,
+  description?: string,
+  displayValue?: string,
+};
+
+const makeValue = (audit: Audit) => {
+  let score = audit.score;
+  if (audit.displayValue) {
+    score = audit.displayValue;
+  } else if (audit.scoreDisplayMode) {
+    score = audit.score === 1 ? '✅ Pass' : '❌ Fail'; 
+  }
+  return score;
+};
+
+const LighthouseCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
+  const lighthouse = props.data;
+  const categories = lighthouse?.categories || {};
+  const audits = lighthouse?.audits || [];
+
+  return (
+    <Card heading={props.title} actionButtons={props.actionButtons}>
+      { Object.keys(categories).map((title: string, index: number) => {
+        const scoreIds = categories[title].auditRefs.map((ref: { id: string }) => ref.id);
+        const scoreList = scoreIds.map((id: string) => {
+          return { lbl: audits[id].title, val: makeValue(audits[id]), title: audits[id].description, key: id }
+        })
+        return (
+          <ExpandableRow
+            key={`lighthouse-${index}`}
+            lbl={title}
+            val={processScore(categories[title].score)}
+            rowList={scoreList}
+          />
+        );
+      }) }
+    </Card>
+  );
+}
+
+export default LighthouseCard;