Merge pull request #160 from liam-hq/feat/table-detail

feat: Add TableDetail component

frontend/docs/packages-license.md

@@ -1,6 +1,6 @@
 # frontend
 
-As of December  4, 2024  7:24am. 1015 total
+As of December  5, 2024  2:30am. 1015 total
 
 ## Summary
 * 883 MIT

frontend/packages/db-structure/src/index.ts

@@ -1,5 +1,9 @@
 export {
   type DBStructure,
   type Table,
+  type Columns,
+  type Column,
+  type Index,
+  type Indices,
   dbStructureSchema,
 } from './schema/index.js'

frontend/packages/erd-core/package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@liam-hq/ui": "workspace:*",
     "@xyflow/react": "12.3.5",
+    "clsx": "2.1.1",
     "lucide-react": "0.451.0",
     "react": "18.3.1",
     "valtio": "2.1.2"

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/Columns.module.css

@@ -0,0 +1,18 @@
+.wrapper {
+  border-bottom: 1px solid var(--global-border);
+}
+
+.heading {
+  padding: var(--spacing-2);
+  border-bottom: 1px solid var(--global-border);
+  color: var(--global-foreground);
+  font-family: var(--main-font);
+  font-size: var(--font-size-2);
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.itemWrapper {
+  border-bottom: 1px solid var(--global-border);
+}

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/Columns.tsx

@@ -0,0 +1,21 @@
+import type { Columns as ColumnsType } from '@liam-hq/db-structure'
+import type { FC } from 'react'
+import styles from './Columns.module.css'
+import { ColumnsItem } from './ColumnsItem'
+
+type Props = {
+  columns: ColumnsType
+}
+
+export const Columns: FC<Props> = ({ columns }) => {
+  return (
+    <div className={styles.wrapper}>
+      <h2 className={styles.heading}>Columns</h2>
+      {Object.entries(columns).map(([key, column]) => (
+        <div className={styles.itemWrapper} key={key}>
+          <ColumnsItem column={column} />
+        </div>
+      ))}
+    </div>
+  )
+}

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/ColumnsItem/ColumnsItem.module.css

@@ -0,0 +1,84 @@
+.wrapper {
+  display: grid;
+  gap: var(--spacing-2);
+  padding: var(--spacing-4);
+}
+
+.heading {
+  color: var(--global-foreground);
+  font-family: var(--main-font);
+  font-size: var(--font-size-3);
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.comment {
+  color: var(--color-white-alpha-70);
+  font-family: var(--main-font);
+  font-size: var(--font-size-2);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}
+
+.dl {
+  background-color: var(--pane-muted-background);
+  border: solid 1px var(--global-border);
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: var(--border-radius-sm);
+}
+
+.dlItem {
+  display: flex;
+  align-items: center;
+}
+
+.dlItem:not(:last-of-type) {
+  border-bottom: solid 1px var(--global-border);
+}
+
+.dt {
+  width: 5.5625rem;
+  padding: var(--spacing-1) var(--spacing-2);
+  border-right: solid 1px var(--global-border);
+  color: var(--color-white-alpha-70);
+  font-family: var(--main-font);
+  font-size: var(--font-size-2);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}
+
+.dd {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-1) var(--spacing-2);
+  color: var(--global-foreground);
+  font-family: var(--code-font, 'IBM Plex Mono');
+  font-size: var(--font-size-1);
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.dtWithIcon {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  width: 100%;
+  border-style: none;
+}
+
+.primaryKeyIcon {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--primary-accent);
+}
+
+.diamondIcon {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--overlay-70);
+}

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/ColumnsItem/ColumnsItem.tsx

@@ -0,0 +1,53 @@
+import type { Column } from '@liam-hq/db-structure'
+import { DiamondFillIcon, DiamondIcon, KeyRound } from '@liam-hq/ui'
+import { clsx } from 'clsx'
+import type { FC } from 'react'
+import styles from './ColumnsItem.module.css'
+
+type Props = {
+  column: Column
+}
+
+export const ColumnsItem: FC<Props> = ({ column }) => {
+  return (
+    <div className={styles.wrapper}>
+      <h3 className={styles.heading}>{column.name}</h3>
+      {column.comment && <p className={styles.comment}>{column.comment}</p>}
+      <dl className={styles.dl}>
+        <div className={styles.dlItem}>
+          <dt className={styles.dt}>Type</dt>
+          <dd className={styles.dd}>{column.type}</dd>
+        </div>
+        {column.default && (
+          <div className={styles.dlItem}>
+            <dt className={styles.dt}>Default</dt>
+            <dd className={styles.dd}>{column.default}</dd>
+          </div>
+        )}
+        {column.primary && (
+          <div className={styles.dlItem}>
+            <dt className={clsx(styles.dt, styles.dtWithIcon)}>
+              <KeyRound className={styles.primaryKeyIcon} />
+              <span>Primary Key</span>
+            </dt>
+          </div>
+        )}
+        {column.notNull ? (
+          <div className={styles.dlItem}>
+            <dt className={clsx(styles.dt, styles.dtWithIcon)}>
+              <DiamondFillIcon className={styles.diamondIcon} />
+              <span>Not-null</span>
+            </dt>
+          </div>
+        ) : (
+          <div className={styles.dlItem}>
+            <dt className={clsx(styles.dt, styles.dtWithIcon)}>
+              <DiamondIcon className={styles.diamondIcon} />
+              <span>Nullable</span>
+            </dt>
+          </div>
+        )}
+      </dl>
+    </div>
+  )
+}

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/ColumnsItem/index.ts

@@ -0,0 +1 @@
+export * from './ColumnsItem'

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Columns/index.ts

@@ -0,0 +1 @@
+export * from './Columns'

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Comment/Comment.module.css

@@ -0,0 +1,16 @@
+.wrapper {
+  padding: var(--spacing-4);
+  border-bottom: 1px solid var(--global-border);
+}
+
+.text {
+  padding: var(--spacing-2);
+  border-radius: var(--border-radius-base);
+  background: var(--pane-muted-background);
+  color: var(--color-white-alpha-70);
+  font-family: var(--main-font);
+  font-size: var(--font-size-3);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Comment/Comment.tsx

@@ -0,0 +1,14 @@
+import type { FC } from 'react'
+import styles from './Comment.module.css'
+
+type Props = {
+  comment: string
+}
+
+export const Comment: FC<Props> = ({ comment }) => {
+  return (
+    <div className={styles.wrapper}>
+      <p className={styles.text}>{comment}</p>
+    </div>
+  )
+}

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Comment/index.ts

@@ -0,0 +1 @@
+export * from './Comment'

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Indices/Indices.module.css

@@ -0,0 +1,37 @@
+.wrapper {
+  display: grid;
+  gap: var(--spacing-2);
+  padding: var(--spacing-4);
+  border-bottom: 1px solid var(--global-border);
+}
+
+.heading {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  color: var(--global-foreground);
+  font-family: var(--main-font);
+  font-size: var(--font-size-3);
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.icon {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--overlay-70);
+}
+
+.list {
+  list-style: inside;
+}
+
+.listItem {
+  color: var(--color-white-alpha-70);
+  font-family: var(--main-font);
+  font-size: var(--font-size-2);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Indices/Indices.tsx

@@ -0,0 +1,26 @@
+import type { Indices as IndicesType } from '@liam-hq/db-structure'
+import { Hash } from '@liam-hq/ui'
+import type { FC } from 'react'
+import styles from './Indices.module.css'
+
+type Props = {
+  indices: IndicesType
+}
+
+export const Indices: FC<Props> = ({ indices }) => {
+  return (
+    <div className={styles.wrapper}>
+      <h2 className={styles.heading}>
+        <Hash className={styles.icon} />
+        <span>Indexes</span>
+      </h2>
+      <ul className={styles.list}>
+        {Object.entries(indices).map(([key, index]) => (
+          <li key={key} className={styles.listItem}>
+            {index.name}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Indices/index.ts

@@ -0,0 +1 @@
+export * from './Indices'

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/RelatedTables.module.css

@@ -0,0 +1,27 @@
+.wrapper {
+  display: grid;
+  gap: var(--spacing-4);
+  padding: var(--spacing-4);
+}
+
+.header {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.heading {
+  color: var(--global-foreground);
+  font-family: var(--main-font);
+  font-size: var(--font-size-3);
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.contentWrapper {
+  border-radius: var(--border-radius-smbase);
+  border: 1px solid var(--pane-border);
+  background: var(--global-background);
+}

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/RelatedTables.tsx

@@ -0,0 +1,19 @@
+import { GotoIcon, IconButton } from '@liam-hq/ui'
+import type { FC } from 'react'
+import styles from './RelatedTables.module.css'
+import img from './related-table-ex.png'
+
+export const RelatedTables: FC = () => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.header}>
+        <h2 className={styles.heading}>Related tables</h2>
+        <IconButton icon={<GotoIcon />} tooltipContent="Go to Related tables" />
+      </div>
+      <div className={styles.contentWrapper}>
+        {/* TODO: Replace the placeholder image with the actual component */}
+        <img alt="related tables" src={img} width="100%" />
+      </div>
+    </div>
+  )
+}

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/RelatedTables/index.ts

@@ -0,0 +1 @@
+export * from './RelatedTables'

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.module.css

@@ -0,0 +1,31 @@
+.wrapper {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  width: 500px;
+  height: 100%;
+  border-left: 1px solid var(--pane-border, #383a3b);
+  background-color: var(--pane-background, #232526);
+  box-shadow: 0px 4px 20px 0px var(--shadow-basic-shadow, #000);
+}
+
+.header {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-2);
+  border-bottom: 1px solid var(--global-border);
+}
+
+.heading {
+  color: var(--global-foreground);
+  font-family: var(--main-font);
+  font-size: var(--font-size-2);
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.body {
+  overflow-y: scroll;
+}