Implemented a more generic value-label list

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4ro/taskforce-fe-components",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": false,
   "sideEffects": false,
   "dependencies": {

src/components/label-value-list/label-value-list.js

@@ -0,0 +1,47 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./label-value-list.scss";
+
+function renderValue(value) {
+  if (typeof value === "boolean") {
+    return value ? "Da" : "Nu";
+  }
+
+  if (Array.isArray(value)) {
+    return value.join(", ");
+  }
+
+  return value;
+}
+
+export const LabelValueList = ({ data }) => {
+  let rows = data;
+
+  if (!Array.isArray(data)) {
+    rows = Object.values(data);
+  }
+
+  return (
+    <div className="container">
+      <div className="label-value-list">
+        <table className="table">
+          <tbody>
+            { rows.map((row, index) => (
+              <tr key={index}>
+                <th>{row.label}</th>
+                <td>{renderValue(row.value)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+LabelValueList.propTypes = {
+  data: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.array
+  ]).isRequired
+};

src/components/label-value-list/label-value-list.scss

@@ -0,0 +1,7 @@
+.label-value-list {
+  padding: 2em 0;
+
+  .table th, .table td {
+    border: none;
+  }
+}

src/components/label-value-list/label-value-list.stories.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { LabelValueList } from "./label-value-list";
+
+export default { title: "Label-value List" };
+
+const objectData = {
+  age: {
+    label: "Vârsta",
+    value: 23
+  },
+  gender: {
+    label: "Sexul",
+    value: "feminin"
+  },
+  name: { label: "Nume", value: "name" },
+  smoking: { label: "Fumator/fumatoare", value: true },
+  comorbidities: {
+    label: "Alte afectiuni",
+    value: ["diabet", "hipertensiune"]
+  },
+  inIsolation: { label: "In izolare", value: true },
+  othersInHousehold: { label: "Alte persoane in casă", value: true }
+};
+
+const arrayData = [
+  {
+    label: "Vârsta",
+    value: 23
+  },
+  {
+    label: "Alte afectiuni",
+    value: ["diabet", "hipertensiune"]
+  },
+  {
+    label: "Fumator/fumatoare",
+    value: false
+  }
+]
+
+export const usingObject = () => (
+  <LabelValueList data={objectData} />
+);
+
+export const usingArray = () => (
+  <LabelValueList data={arrayData} />
+);
+

src/components/personal-data-table/personal-data-table.js

@@ -1,41 +1,19 @@
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-import "./personal-data-table.scss";
+import { LabelValueList } from "../label-value-list/label-value-list";
 
 export const PersonalDataTable = ({ personalData }) => {
+  const dataClone = Object.assign(personalData);
+  delete dataClone.name;
+
+  useEffect(
+    function warnOnMount() {
+      console.warn("PersonalDataTable is deprecated. Please use the more generic LabelValueList component.")
+    }, []
+  )
+
   return (
-    <div className="container">
-      <div className="personal-data">
-        <table className="table personal-data-table">
-          <tbody>
-            <tr>
-              <th>{personalData.age.label}</th>
-              <td>{personalData.age.value}</td>
-            </tr>
-            <tr>
-              <th>{personalData.gender.label}</th>
-              <td>{personalData.gender.value}</td>
-            </tr>
-            <tr>
-              <th>{personalData.smoking.label}</th>
-              <td>{personalData.smoking.value ? "Da" : "Nu"}</td>
-            </tr>
-            <tr>
-              <th>{personalData.comorbidities.label}</th>
-              <td>{personalData.comorbidities.value.join(", ")}</td>
-            </tr>
-            <tr>
-              <th>{personalData.inIsolation.label}</th>
-              <td>{personalData.inIsolation.value ? "Da" : "Nu"}</td>
-            </tr>
-            <tr>
-              <th>{personalData.othersInHousehold.label}</th>
-              <td>{personalData.othersInHousehold ? "Da" : "Nu"}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <LabelValueList data={personalData} />
   );
 };
 

src/index.js

@@ -61,3 +61,4 @@ export { DataTableRow } from "./components/data-table-row/data-table-row";
 export { FilterModal } from "./components/filter-modal/filter-modal";
 export { DropdownSearch } from "./components/dropdown-search/dropdown-search";
 export { HeaderFilter } from "./components/header-filter/header-filter";
+export { LabelValueList } from "./components/label-value-list/label-value-list";