feat(visualizer): introduce dark mode theme

Added theme colors for dark mode.

Author: BOCOVO

packages/json-table-schema-visualizer/.storybook/preview.jsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { Layer, Stage } from "react-konva";
-import { defaultThemeConfig } from "../src/constants/theme";
+import { darkThemeConfig } from "../src/constants/theme";
 import ThemeProvider from "../src/providers/ThemeProvider";
+import "../src/styles/index.css";
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {
@@ -16,7 +17,7 @@ const preview = {
   decorators: [
     (Story, configs) =>
       configs.parameters.withKonvaWrapper ? (
-        <ThemeProvider theme={defaultThemeConfig}>
+        <ThemeProvider themeColors={darkThemeConfig} theme={"light"}>
           <Stage width={window.innerWidth} height={window.innerHeight}>
             <Layer>
               <Story />

packages/json-table-schema-visualizer/src/components/Column/Column.tsx

@@ -10,7 +10,7 @@ import {
   PADDINGS,
   TABLE_WIDTH,
 } from "@/constants/sizing";
-import { useTheme } from "@/hooks/theme";
+import { useThemeColors } from "@/hooks/theme";
 
 interface ColumnProps {
   colName: string;
@@ -33,16 +33,16 @@ const Column = ({
   isEnum,
   note,
 }: ColumnProps) => {
-  const theme = useTheme();
+  const themeColors = useThemeColors();
   const tableColors = useTableColor(tableName);
 
-  const colTextColor = theme.text[900];
-  const typeTextColor = theme.text[700];
+  const colTextColor = themeColors.text[900];
+  const typeTextColor = themeColors.text[700];
   const fontStyle = isPrimaryKey ? "bold" : "normal";
 
   return (
     <ColumnWrapper
-      highlightColor={tableColors?.lighter ?? theme.colAccent}
+      highlightColor={tableColors?.lighter ?? themeColors.colAccent}
       relationalTables={relationalTables}
       offsetY={offsetY}
       tableName={tableName}

packages/json-table-schema-visualizer/src/components/DiagramViewer/DiagramViewer.stories.tsx

@@ -3,7 +3,6 @@ import DiagramViewer from "./DiagramViewer";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { createBookingsTableClone, exampleData } from "@/fake/fakeJsonTables";
-import { defaultThemeConfig } from "@/constants/theme";
 
 const meta: Meta<typeof DiagramViewer> = {
   component: DiagramViewer,
@@ -28,7 +27,6 @@ export const DiagramViewerStory: Story = {
   render: (props) => <DiagramViewer {...props} />,
   args: {
     tables,
-    theme: defaultThemeConfig,
     enums: exampleData.enums,
     refs: exampleData.refs,
   },

packages/json-table-schema-visualizer/src/components/DiagramViewer/DiagramViewer.tsx

@@ -8,29 +8,24 @@ import Tables from "./Tables";
 import RelationsConnections from "./Connections";
 import DiagramWrapper from "./DiagramWrapper";
 
-import { type ThemeConfigValue } from "@/types/theme";
 import TablesPositionsProvider from "@/providers/TablesPositionsProvider";
 import MainProviders from "@/providers/MainProviders";
-import ThemeProvider from "@/providers/ThemeProvider";
 
 interface DiagramViewerProps {
   tables: JSONTableTable[];
   refs: JSONTableRef[];
-  theme: ThemeConfigValue;
   enums: JSONTableEnum[];
 }
-const DiagramViewer = ({ refs, tables, theme, enums }: DiagramViewerProps) => {
+const DiagramViewer = ({ refs, tables, enums }: DiagramViewerProps) => {
   return (
     <TablesPositionsProvider tables={tables}>
-      <ThemeProvider theme={theme}>
-        <MainProviders tables={tables} enums={enums}>
-          <DiagramWrapper>
-            <RelationsConnections refs={refs} />
+      <MainProviders tables={tables} enums={enums}>
+        <DiagramWrapper>
+          <RelationsConnections refs={refs} />
 
-            <Tables tables={tables} />
-          </DiagramWrapper>
-        </MainProviders>
-      </ThemeProvider>
+          <Tables tables={tables} />
+        </DiagramWrapper>
+      </MainProviders>
     </TablesPositionsProvider>
   );
 };

packages/json-table-schema-visualizer/src/components/DiagramViewer/DiagramWrapper.tsx

@@ -2,11 +2,15 @@ import { Group, Layer, Stage } from "react-konva";
 import { type ReactNode } from "react";
 import { type KonvaEventObject } from "konva/lib/Node";
 
+import ThemeToggler from "../ThemeToggler/ThemeToggler";
+
 import type { Stage as CoreStage } from "konva/lib/Stage";
 
 import { useWindowSize } from "@/hooks/window";
 import { useCursorChanger } from "@/hooks/cursor";
 import { DIAGRAM_PADDING } from "@/constants/sizing";
+import { useThemeColors, useThemeContext } from "@/hooks/theme";
+import { Theme } from "@/types/theme";
 
 interface DiagramWrapperProps {
   children: ReactNode;
@@ -15,8 +19,10 @@ interface DiagramWrapperProps {
 const DiagramWrapper = ({ children }: DiagramWrapperProps) => {
   const scaleBy = 1.02;
   const { height, width } = useWindowSize();
+  const { theme } = useThemeContext();
   const { onChange: onGrabbing, onRestore: onGrabRelease } =
     useCursorChanger("grabbing");
+  const themeColors = useThemeColors();
 
   const handleZooming = (e: KonvaEventObject<WheelEvent>) => {
     e.evt.preventDefault();
@@ -51,21 +57,26 @@ const DiagramWrapper = ({ children }: DiagramWrapperProps) => {
   };
 
   return (
-    <main>
+    <main className={`relative ${theme === Theme.dark ? "dark" : ""}`}>
       <Stage
         draggable
         onDragStart={onGrabbing}
         onDragEnd={onGrabRelease}
         onWheel={handleZooming}
         width={width}
         height={height}
+        style={{ backgroundColor: themeColors.bg }}
       >
         <Layer>
           <Group offsetX={-DIAGRAM_PADDING} offsetY={-DIAGRAM_PADDING}>
             {children}
           </Group>
         </Layer>
       </Stage>
+
+      <div className="absolute top-5 right-5">
+        <ThemeToggler />
+      </div>
     </main>
   );
 };

packages/json-table-schema-visualizer/src/components/FieldDetails/EnumDetails.tsx

@@ -3,7 +3,7 @@ import { Group } from "react-konva";
 import KonvaText from "../dumb/KonvaText";
 
 import { useGetEnum } from "@/hooks/enums";
-import { useTheme } from "@/hooks/theme";
+import { useThemeColors } from "@/hooks/theme";
 import { computeTextSize } from "@/utils/computeTextSize";
 import { PADDINGS } from "@/constants/sizing";
 import { createEnumItemText } from "@/utils/createEnumItemText";
@@ -17,7 +17,7 @@ const enumTextSize = computeTextSize("Enum");
 
 const EnumDetails = ({ enumName, y }: EnumDetailsProps) => {
   const enumObject = useGetEnum(enumName);
-  const theme = useTheme();
+  const themeColors = useThemeColors();
 
   if (enumObject === undefined) {
     return null;
@@ -27,16 +27,20 @@ const EnumDetails = ({ enumName, y }: EnumDetailsProps) => {
 
   return (
     <Group y={y}>
-      <KonvaText fontStyle="bold" fill={theme.red} text="Enum" />
+      <KonvaText fontStyle="bold" fill={themeColors.red} text="Enum" />
 
-      <KonvaText x={enumNameX} fill={theme.green} text={enumObject.name} />
+      <KonvaText
+        x={enumNameX}
+        fill={themeColors.green}
+        text={enumObject.name}
+      />
 
       {enumObject.values.map((item, index) => (
         <KonvaText
           key={item.name}
           y={(index + 1) * enumTextSize.height}
           text={createEnumItemText(item.name)}
-          fill={theme.enumItem}
+          fill={themeColors.enumItem}
         />
       ))}
     </Group>

packages/json-table-schema-visualizer/src/components/FieldDetails/FieldDetailWrapper.tsx

@@ -2,7 +2,7 @@ import { Group, Line, Rect } from "react-konva";
 import { useState, type ReactNode } from "react";
 
 import { COLUMN_HEIGHT, PADDINGS, TABLE_WIDTH } from "@/constants/sizing";
-import { useTheme } from "@/hooks/theme";
+import { useThemeColors } from "@/hooks/theme";
 import { computeCaretPoints } from "@/utils/computeCaretPoints";
 
 interface FieldDetailWrapperProps {
@@ -11,7 +11,7 @@ interface FieldDetailWrapperProps {
 
 const FieldDetailWrapper = ({ children }: FieldDetailWrapperProps) => {
   const [isDetailVisible, setIsDetailVisible] = useState(false);
-  const theme = useTheme();
+  const themeColors = useThemeColors();
 
   const handleOnHover = () => {
     setIsDetailVisible(true);
@@ -36,7 +36,7 @@ const FieldDetailWrapper = ({ children }: FieldDetailWrapperProps) => {
 
       {isDetailVisible ? (
         <Line
-          fill={theme.noteBg}
+          fill={themeColors.noteBg}
           closed
           points={computeCaretPoints(popoverX, COLUMN_HEIGHT)}
         />

packages/json-table-schema-visualizer/src/components/FieldDetails/FieldDetails.tsx

@@ -5,7 +5,7 @@ import KonvaText from "../dumb/KonvaText";
 import EnumDetails from "./EnumDetails";
 import FieldDetailWrapper from "./FieldDetailWrapper";
 
-import { useTheme } from "@/hooks/theme";
+import { useThemeColors } from "@/hooks/theme";
 import { computeFieldDetailBoxDimension } from "@/utils/computeFieldDetailBoxDimension";
 import { useGetEnum } from "@/hooks/enums";
 import { PADDINGS } from "@/constants/sizing";
@@ -16,15 +16,15 @@ interface FieldDetailsProps {
 }
 
 const FieldDetails = ({ note, enumName = "" }: FieldDetailsProps) => {
-  const theme = useTheme();
+  const themeColors = useThemeColors();
   const enumObject = useGetEnum(enumName);
 
   const contentDimension = computeFieldDetailBoxDimension(note, enumObject);
   return (
     <FieldDetailWrapper>
       <Group>
         <Rect
-          fill={theme.noteBg}
+          fill={themeColors.noteBg}
           width={contentDimension.w + PADDINGS.md * 2}
           height={contentDimension.h}
           cornerRadius={5}
@@ -34,7 +34,7 @@ const FieldDetails = ({ note, enumName = "" }: FieldDetailsProps) => {
           <KonvaText
             y={PADDINGS.md}
             width={contentDimension.w}
-            fill={theme.white}
+            fill={themeColors.white}
             text={note}
           />
 

packages/json-table-schema-visualizer/src/components/RelationConnection/ConnectionPath.tsx

@@ -1,7 +1,7 @@
 import { Path } from "react-konva";
 import { useState } from "react";
 
-import { useTheme } from "@/hooks/theme";
+import { useThemeColors } from "@/hooks/theme";
 import { useTablesInfo } from "@/hooks/table";
 import { useTableColor } from "@/hooks/tableColor";
 
@@ -17,7 +17,7 @@ const ConnectionPath = ({
   targetTableName,
   relationOwner,
 }: ConnectionPathProps) => {
-  const theme = useTheme();
+  const themeColors = useThemeColors();
   const { hoveredTableName } = useTablesInfo();
   const sourceTableColors = useTableColor(relationOwner);
   const [isHovered, setIsHovered] = useState(false);
@@ -28,8 +28,8 @@ const ConnectionPath = ({
     isHovered;
 
   const strokeColor = highlight
-    ? sourceTableColors?.regular ?? theme.connection.active
-    : theme.connection.default;
+    ? sourceTableColors?.regular ?? themeColors.connection.active
+    : themeColors.connection.default;
 
   const handleOnHover = () => {
     setIsHovered(true);

packages/json-table-schema-visualizer/src/components/Table.tsx

@@ -15,7 +15,7 @@ import {
   TABLE_HEADER_HEIGHT,
   TABLE_WIDTH,
 } from "@/constants/sizing";
-import { useTheme } from "@/hooks/theme";
+import { useThemeColors } from "@/hooks/theme";
 import eventEmitter from "@/events-emitter";
 import { computeTableDragEventName } from "@/utils/eventName";
 import { useTablePosition, useTablesInfo } from "@/hooks/table";
@@ -24,7 +24,7 @@ import { tableCoordsStore } from "@/stores/tableCoords";
 interface TableProps extends JSONTableTable {}
 
 const Table = ({ fields, name }: TableProps) => {
-  const theme = useTheme();
+  const themeColors = useThemeColors();
   const tableRef = useRef<null | Konva.Group>(null);
   const { setHoveredTableName } = useTablesInfo();
   const tablePosition = useTablePosition(name);
@@ -94,10 +94,10 @@ const Table = ({ fields, name }: TableProps) => {
       <Rect
         shadowBlur={PADDINGS.xs}
         shadowOpacity={0.2}
-        shadowColor={theme.table.shadow}
+        shadowColor={themeColors.table.shadow}
         height={tableHeight}
         width={TABLE_WIDTH}
-        fill={theme.table.bg}
+        fill={themeColors.table.bg}
         cornerRadius={PADDINGS.sm}
       />