refactor(app): move react components to react codebase [EE-3179] (#6971)

app/react/components/DetailsTable/DetailsRow.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+interface Props {
+  children?: ReactNode;
+  label: string;
+}
+
+export function DetailsRow({ label, children }: Props) {
+  return (
+    <tr>
+      <td>{label}</td>
+      {children && <td data-cy={`detailsTable-${label}Value`}>{children}</td>}
+    </tr>
+  );
+}

app/react/components/DetailsTable/DetailsTable.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, Story } from '@storybook/react';
+
+import { DetailsTable } from './DetailsTable';
+import { DetailsRow } from './DetailsRow';
+
+type Args = {
+  key1: string;
+  val1: string;
+  key2: string;
+  val2: string;
+};
+
+export default {
+  component: DetailsTable,
+  title: 'Components/Tables/DetailsTable',
+} as Meta;
+
+function Template({ key1, val1, key2, val2 }: Args) {
+  return (
+    <DetailsTable>
+      <DetailsRow label={key1}>{val1}</DetailsRow>
+      <DetailsRow label={key2}>{val2}</DetailsRow>
+    </DetailsTable>
+  );
+}
+
+export const Default: Story<Args> = Template.bind({});
+Default.args = {
+  key1: 'Name',
+  val1: 'My Cool App',
+  key2: 'Id',
+  val2: 'dmsjs1532',
+};

app/react/components/DetailsTable/DetailsTable.test.tsx

@@ -0,0 +1,24 @@
+import { render } from '@/react-tools/test-utils';
+
+import { DetailsTable } from './index';
+
+// should display child row elements
+test('should display child row elements', () => {
+  const person = {
+    name: 'Bob',
+    id: 'dmsjs1532',
+  };
+
+  const { queryByText } = render(
+    <DetailsTable>
+      <DetailsTable.Row label="Name">{person.name}</DetailsTable.Row>
+      <DetailsTable.Row label="Id">{person.id}</DetailsTable.Row>
+    </DetailsTable>
+  );
+
+  const nameRow = queryByText(person.name);
+  expect(nameRow).toBeVisible();
+
+  const idRow = queryByText(person.id);
+  expect(idRow).toBeVisible();
+});

app/react/components/DetailsTable/DetailsTable.tsx

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+
+type Props = {
+  headers?: string[];
+  dataCy?: string;
+};
+
+export function DetailsTable({
+  headers = [],
+  dataCy,
+  children,
+}: PropsWithChildren<Props>) {
+  return (
+    <table className="table" data-cy={dataCy}>
+      {headers.length > 0 && (
+        <thead>
+          <tr>
+            {headers.map((header) => (
+              <th key={header}>{header}</th>
+            ))}
+          </tr>
+        </thead>
+      )}
+      <tbody>{children}</tbody>
+    </table>
+  );
+}

app/react/components/DetailsTable/index.tsx

@@ -0,0 +1,13 @@
+import { DetailsTable as MainComponent } from './DetailsTable';
+import { DetailsRow } from './DetailsRow';
+
+interface DetailsTableSubcomponents {
+  Row: typeof DetailsRow;
+}
+
+const DetailsTable = MainComponent as typeof MainComponent &
+  DetailsTableSubcomponents;
+
+DetailsTable.Row = DetailsRow;
+
+export { DetailsTable };