Primary key icon in ERD

- Updated the parser to mark `id` fields as primary keys (`PK: true`) when no explicit primary key is defined in `schema.rb`.
- Updated the `convertToDBStructure` function to correctly handle primary key attributes.
- Adjusted test snapshots and test cases to reflect the inclusion of primary key information.
- Added a new `PrimaryKeyIcon` component to visually indicate primary keys in the ERD renderer.
- Integrated the `PrimaryKeyIcon` into the `TableNode` component in the ERD renderer.
- Included `PrimaryKeyIcon` in the icon library and Storybook for documentation and testing.

frontend/packages/db-structure/src/parser/__snapshots__/index.test.ts.snap

@@ -105,7 +105,7 @@ exports[`parse > should parse schema.rb to JSON correctly 1`] = `
           "increment": false,
           "name": "id",
           "notNull": false,
-          "primary": false,
+          "primary": true,
           "type": "varchar",
           "unique": false,
         },

frontend/packages/db-structure/src/parser/schemarb/converter.ts

@@ -14,7 +14,7 @@ export const convertToDBStructure = (data: any): DBStructure => {
           increment: false,
           name: field.name,
           notNull: 'nullable' in field ? !field.nullable : false,
-          primary: false,
+          primary: field.PK || false,
           type: field.type.type_name,
           unique: false,
         }

frontend/packages/db-structure/src/parser/schemarb/index.test.ts

@@ -11,7 +11,7 @@ describe(processor, () => {
           users: aTable({
             name: 'users',
             columns: {
-              id: aColumn(),
+              id: aColumn({ primary: true }),
               ...override?.columns,
             },
           }),
@@ -27,7 +27,7 @@ describe(processor, () => {
 
       const expected = userTable({
         columns: {
-          id: aColumn(),
+          id: aColumn({ primary: true }),
           name: aColumn({
             name: 'name',
             type: 'string',
@@ -48,7 +48,7 @@ describe(processor, () => {
 
       const expected = userTable({
         columns: {
-          id: aColumn(),
+          id: aColumn({ primary: true }),
           name: aColumn({
             name: 'name',
             type: 'string',
@@ -69,7 +69,7 @@ describe(processor, () => {
 
       const expected = userTable({
         columns: {
-          id: aColumn(),
+          id: aColumn({ primary: true }),
           name: aColumn({
             name: 'name',
             type: 'string',

frontend/packages/db-structure/src/parser/schemarb/parser.js

@@ -2318,7 +2318,8 @@ function peg$parse(input, options) {
       if (!idField) {
         table.fields.unshift({
           name: "id",
-          type: { type_name: "varchar" }
+          type: { type_name: "varchar" },
+          PK: true,
         });
       }
       data.tables.push(table);

frontend/packages/db-structure/src/parser/schemarb/parser.pegjs

@@ -30,7 +30,8 @@
       if (!idField) {
         table.fields.unshift({
           name: "id",
-          type: { type_name: "varchar" }
+          type: { type_name: "varchar" },
+          PK: true,
         });
       }
       data.tables.push(table);

frontend/packages/erd-core/package.json

@@ -12,6 +12,7 @@
     "@biomejs/biome": "1.9.3",
     "@liam/configs": "workspace:*",
     "@liam/db-structure": "workspace:*",
+    "@liam/ui": "workspace:*",
     "@types/react": "18",
     "typed-css-modules": "0.9.1",
     "typescript": "5"

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

@@ -1,4 +1,5 @@
 import type { Table } from '@liam/db-structure'
+import { PrimaryKeyIcon } from '@liam/ui'
 import type { Node, NodeProps } from '@xyflow/react'
 import type { FC } from 'react'
 import styles from './TableNode.module.css'
@@ -18,6 +19,10 @@ export const TableNode: FC<Props> = ({ data: { table } }) => {
       <ul>
         {Object.values(table.columns).map((column) => (
           <li key={column.name}>
+            <span>
+              {column.primary && <PrimaryKeyIcon width={16} height={16} />}
+            </span>
+            <span> </span>
             <span>{column.name}</span>
             <span> </span>
             <span>{column.type}</span>

frontend/packages/ui/src/icons/PrimaryKeyIcon.tsx

@@ -0,0 +1,29 @@
+import type { ComponentPropsWithoutRef, FC } from 'react'
+
+type Props = ComponentPropsWithoutRef<'svg'>
+
+/**
+ * This icon is sourced from Lucide (https://lucide.dev).
+ * Copyright (c) Lucide contributors. Licensed under the ISC License.
+ */
+export const PrimaryKeyIcon: FC<Props> = (props) => {
+  return (
+    <svg
+      role="img"
+      aria-label="Primary Key"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      {...props}
+    >
+      <path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" />
+      <circle cx="16.5" cy="7.5" r=".5" fill="currentColor" />
+    </svg>
+  )
+}

frontend/packages/ui/src/icons/index.stories.tsx

@@ -3,9 +3,10 @@ import type { FC } from 'react'
 import { FacebookIcon } from './FacebookIcon'
 import { InfoIcon } from './InfoIcon'
 import { LinkedInIcon } from './LinkedInIcon'
+import { PrimaryKeyIcon } from './PrimaryKeyIcon'
 import { XIcon } from './XIcon'
 
-const icons = [InfoIcon, XIcon, FacebookIcon, LinkedInIcon]
+const icons = [InfoIcon, XIcon, FacebookIcon, LinkedInIcon, PrimaryKeyIcon]
 
 const IconList: FC = () => {
   return (

frontend/packages/ui/src/icons/index.ts

@@ -2,3 +2,4 @@ export * from './InfoIcon'
 export * from './XIcon'
 export * from './FacebookIcon'
 export * from './LinkedInIcon'
+export * from './PrimaryKeyIcon'