feat: add the table's color according to table settings

Author: Long Tran (U811370)

packages/dbml-to-json-table-schema/src/tests/data.ts

@@ -6,7 +6,7 @@ export const dbmlTestCode = `
     inactive [note: "a note"]
   }
 
-  Table follows {
+  Table follows [headercolor: #3498DB] {
     id integer [primary key, not null, increment, note: "a note"]
     view integer [default: 0, note: "a note"]
     following_user_id integer [note: "a note"]
@@ -78,6 +78,7 @@ export const dbmlTestCodeInJSONTableFormat = {
     {
       name: "follows",
       note: "a note",
+      headerColor: "#3498DB",
       fields: [
         {
           name: "id",

packages/dbml-to-json-table-schema/src/utils/transfomers/dbmlTableToJSONTableTable.ts

@@ -6,12 +6,13 @@ import { dbmlIndexToJSONTableIndex } from "./dbmlIndexToJSONTableIndex";
 import type Table from "@dbml/core/types/model_structure/table";
 
 export const dbmlTableToJSONTableTable = (
-  { name, note, fields, indexes }: Table,
+  { name, note, headerColor, fields, indexes }: Table,
   relationalFieldMap: Map<string, string[]>,
   enumsMap: Set<string>,
 ): JSONTableTable => {
   return {
     name,
+    headerColor,
     // the note returned by the dbml parser is not string
     // but an object there is an typing error in their package
     note: (note as any)?.value,

packages/json-table-schema-visualizer/src/utils/colors/getContrastColor.ts

@@ -0,0 +1,17 @@
+export function getContrastColor(hexColor: string) {
+    // Convert hex color to RGB values
+    const r = parseInt(hexColor.slice(1, 3), 16);
+    const g = parseInt(hexColor.slice(3, 5), 16);
+    const b = parseInt(hexColor.slice(5, 7), 16);
+  
+    // Lighten the RGB values by the specified amount (0-100)
+    const lightenAmount = 0.95;
+    const newR = Math.round(r + (255 - r) * lightenAmount);
+    const newG = Math.round(g + (255 - g) * lightenAmount);
+    const newB = Math.round(b + (255 - b) * lightenAmount);
+  
+    // Convert the new RGB values back to a hexadecimal color code
+    const newHexColor = '#' + ((1 << 24) + (newR << 16) + (newG << 8) + newB).toString(16).slice(1);
+  
+    return newHexColor;
+  }

packages/json-table-schema-visualizer/src/utils/createTablesColorMap.ts

@@ -1,6 +1,7 @@
 import { type JSONTableTable } from "shared/types/tableSchema";
 
 import { getTableColorFromName } from "./colors/getTableColorFromName";
+import { getContrastColor } from "./colors/getContrastColor";
 
 import { type TableColors } from "@/types/tableColor";
 
@@ -9,7 +10,7 @@ export const createTablesColorMap = (
 ): Map<string, TableColors> => {
   const tableColors = new Map<string, TableColors>();
   tables.forEach((table) => {
-    const tableColor = getTableColorFromName(table.name);
+    const tableColor = !!table.headerColor ? { regular: table.headerColor, lighter: getContrastColor(table.headerColor) } : getTableColorFromName(table.name);
 
     tableColors.set(table.name, tableColor);
   });

packages/shared/types/tableSchema.ts

@@ -46,7 +46,7 @@ export interface JSONTableIndex
 }
 
 export interface JSONTableTable
-  extends PartialRequired<Pick<Table, "name" | "note">, "name"> {
+  extends PartialRequired<Pick<Table, "name" | "note" | "headerColor">, "name"> {
   fields: JSONTableField[];
   indexes: JSONTableIndex[];
 }