fix: circular dependency in schema

src/components/Canvas.tsx

@@ -14,7 +14,6 @@ import { GeneralPropsPanel } from './GeneralPropsPanel';
 import { EditorPropsPanel } from './EditorPropsPanel';
 import { ToolbarPanel } from './ToolbarPanel';
 import { SimpleFloatingEdge } from './ReactFlow/SimpleFloatingEdge';
-import { EdgeType, SchemaType } from '@/schemas/base';
 import { useAddCreateTableShortcut } from '@/flow-hooks/useAddCreateTableShortcut';
 import { useHandleSaveLocalSchema } from '@/flow-hooks/useHandleSaveLocalSchema';
 import { isUuid } from '@/utils/zod';
@@ -29,6 +28,8 @@ import { UtilsPanel } from './UtilsPanel';
 import { AddTableIcon } from './Icon/AddTableIcon';
 import { ClipboardIcon } from '@heroicons/react/20/solid';
 import { TableWithoutIdType } from '@/schemas/table';
+import { SchemaType } from '@/schemas/schema';
+import { EdgeType } from '@/schemas/relation';
 
 const nodeTypes: NodeTypes = { table: TableNode } as unknown as NodeTypes;
 

src/components/CreateRelationDialog.tsx

@@ -1,5 +1,5 @@
 import { EditorStateContext } from '@/contexts/EditorStateContext';
-import { CreateRelationSchema, CreateRelationType, RelationActionEnum } from '@/schemas/base';
+import { CreateRelationSchema, CreateRelationType, RelationActionEnum } from '@/schemas/relation';
 import * as Accordion from '@radix-ui/react-accordion';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useContext, useEffect, useState } from 'react';

src/components/EditorPropsPanel.tsx

@@ -5,7 +5,7 @@ import { useCopyToClipboard } from 'usehooks-ts';
 import { useRouter } from '@tanstack/react-router';
 import { EditorPanelContainer } from './EditorPanelContainer';
 import { IconButton } from './IconButton';
-import { SchemaType } from '@/schemas/base';
+import { SchemaType } from '@/schemas/schema';
 import { schemaToBase64Url } from '@/utils/schema';
 import { useEffect } from 'react';
 import { InformationDialog } from './InformationDialog';

src/components/GeneralPropsPanel.tsx

@@ -6,7 +6,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { IconButton } from './IconButton';
 import { useSaveLocalSchema } from '@/mutations/useSaveLocalSchema';
 import { EditorPanelContainer } from './EditorPanelContainer';
-import { SchemaSchema, SchemaType } from '@/schemas/base';
+import { SchemaSchema, SchemaType } from '@/schemas/schema';
 import { Textbox } from './Textbox';
 import FocusLock from 'react-focus-lock';
 

src/components/ReactFlow/SimpleFloatingEdge.tsx

@@ -1,5 +1,5 @@
 import { useReverseRelation } from '@/flow-hooks/useReverseRelation';
-import { RelationEdgeType } from '@/schemas/base';
+import { RelationEdgeType } from '@/schemas/relation';
 import { TableWithoutIdType } from '@/schemas/table';
 import { getColumnIdFromHandleId } from '@/utils/reactflow';
 import {

src/contexts/EditorStateContext.tsx

@@ -2,7 +2,7 @@ import { createContext, ReactNode, useMemo, useState } from 'react';
 import { useInterpret } from '@xstate/react';
 import { copyPasteMachine } from '@/machines/copy-paste-machine';
 import { InterpreterFrom } from 'xstate';
-import { SchemaType } from '@/schemas/base';
+import { SchemaType } from '@/schemas/schema';
 import { Edge, useReactFlow } from 'reactflow';
 import useUndoable from 'use-undoable';
 import { useTransformSchemaToReactFlowData } from '@/flow-hooks/useTransformSchemaToReactFlowData';

src/flow-hooks/useCreateColumn.spec.tsx

@@ -0,0 +1,84 @@
+import { ReactFlowProvider, useReactFlow } from 'reactflow';
+import { renderHook, act } from '@/test/utils';
+import { useCreateColumn } from './useCreateColumn';
+import { EditorStateProvider } from '@/contexts/EditorStateContext';
+import { generateMock } from '@anatine/zod-mock';
+import crypto from 'crypto';
+import { expect, it } from 'vitest';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { TableSchema, TableWithoutIdType } from '@/schemas/table';
+import { CreateVarcharColumnSchema } from '@/schemas/varchar';
+import { EdgeType } from '@/schemas/relation';
+import { SchemaType, SchemaSchema } from '@/schemas/schema';
+
+const tableId = crypto.randomUUID();
+
+const schemaMock: SchemaType = {
+  ...generateMock(
+    SchemaSchema.omit({ positions: true, relations: true, tables: true, groups: true }),
+  ),
+  tables: [
+    {
+      ...generateMock(TableSchema.omit({ id: true, columns: true, indexes: true })),
+      id: tableId,
+      columns: [],
+      indexes: [],
+    },
+  ],
+  groups: [],
+  relations: [],
+  positions: [
+    {
+      itemId: tableId,
+      x: 0,
+      y: 0,
+    },
+  ],
+};
+
+const queryClient = new QueryClient();
+
+queryClient.setQueryData([`schema-${schemaMock.id}`], schemaMock);
+
+it('should create a column', () => {
+  const { result } = renderHook(
+    () => {
+      return {
+        createColumn: useCreateColumn(),
+        reactFlowInstance: useReactFlow<TableWithoutIdType, EdgeType>(),
+      };
+    },
+    {
+      wrapper({ children }) {
+        return (
+          <QueryClientProvider client={queryClient}>
+            <ReactFlowProvider>
+              <EditorStateProvider schema={schemaMock}>{children}</EditorStateProvider>
+            </ReactFlowProvider>
+          </QueryClientProvider>
+        );
+      },
+    },
+  );
+
+  const columnData = generateMock(CreateVarcharColumnSchema);
+
+  act(() => {
+    const { createColumn } = result.current;
+
+    createColumn(columnData);
+  });
+
+  expect(
+    result.current.reactFlowInstance.getNodes().find((node) => node.id === tableId)?.data.columns ??
+      [],
+  ).toHaveLength(1);
+  expect(
+    result.current.reactFlowInstance.getNodes().find((node) => node.id === tableId)?.data.columns[0]
+      .name,
+  ).toEqual(columnData.name);
+  expect(
+    result.current.reactFlowInstance.getNodes().find((node) => node.id === tableId)?.data.columns[0]
+      .type,
+  ).toEqual(columnData.type);
+});

src/flow-hooks/useCreateRelation.ts

@@ -1,9 +1,9 @@
 import { useReactFlow } from 'reactflow';
-import { CreateRelationType, EdgeType, RelationEdgeType } from '@/schemas/base';
 import { useContext } from 'react';
 import { EditorStateContext } from '@/contexts/EditorStateContext';
 import { useHandleEdgeMarker } from './useHandleEdgeMarker';
 import { TableWithoutIdType } from '@/schemas/table';
+import { EdgeType, CreateRelationType, RelationEdgeType } from '@/schemas/relation';
 
 export function useCreateRelation() {
   const { undoableService } = useContext(EditorStateContext);

src/flow-hooks/useHandleEdgeMarker.ts

@@ -1,4 +1,5 @@
-import { EdgeType, IndexType } from '@/schemas/base';
+import { IndexType } from '@/schemas/base';
+import { EdgeType } from '@/schemas/relation';
 import { TableWithoutIdType } from '@/schemas/table';
 import { getColumnIdFromHandleId } from '@/utils/reactflow';
 import { Edge, useReactFlow } from 'reactflow';

src/flow-hooks/useHandleSaveLocalSchema.ts

@@ -1,5 +1,7 @@
 import { useSaveLocalSchema } from '@/mutations/useSaveLocalSchema';
-import { PositionType, RelationType, SchemaType } from '@/schemas/base';
+import { PositionType } from '@/schemas/position';
+import { RelationType } from '@/schemas/relation';
+import { SchemaType } from '@/schemas/schema';
 import { TableType } from '@/schemas/table';
 import { nodeToTable, nodeToPosition, edgeToRelation } from '@/utils/reactflow';
 import { useReactFlow } from 'reactflow';

src/flow-hooks/useReverseRelation.ts

@@ -1,8 +1,8 @@
 import { useReactFlow } from 'reactflow';
-import { EdgeType, RelationType } from '@/schemas/base';
 import { useContext } from 'react';
 import { EditorStateContext } from '@/contexts/EditorStateContext';
 import { TableWithoutIdType } from '@/schemas/table';
+import { EdgeType, RelationType } from '@/schemas/relation';
 
 export function useReverseRelation() {
   const { undoableService } = useContext(EditorStateContext);

src/flow-hooks/useTransformSchemaToReactFlowData.ts

@@ -1,7 +1,8 @@
 import { z } from 'zod';
-import { RelationEdgeType, SchemaSchema } from '@/schemas/base';
 import { useHandleEdgeMarker } from './useHandleEdgeMarker';
 import { TableNodeType } from '@/schemas/table';
+import { RelationEdgeType } from '@/schemas/relation';
+import { SchemaSchema } from '@/schemas/schema';
 
 export function useTransformSchemaToReactFlowData() {
   const handleEdgeMarker = useHandleEdgeMarker();

src/mutations/useSaveLocalSchema.ts

@@ -1,5 +1,5 @@
 import { localSchemaQuery } from '@/queries/useSchemaQuery';
-import { SchemaType } from '@/schemas/base';
+import { SchemaType } from '@/schemas/schema';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import localforage from 'localforage';
 

src/pages/index.ts

@@ -1,4 +1,4 @@
-import { SchemaType } from '@/schemas/base';
+import { SchemaType } from '@/schemas/schema';
 import { base64UrlToSchema } from '@/utils/schema';
 import { QueryClient } from '@tanstack/react-query';
 import { createRouteConfig, createReactRouter } from '@tanstack/react-router';

src/queries/useSchemaQuery.ts

@@ -1,5 +1,4 @@
-import { SchemaType } from '@/schemas/base';
-import { emptySchemaFactory } from '@/utils/schema';
+import { SchemaType } from '@/schemas/schema';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import localforage from 'localforage';

src/schemas/base.ts

@@ -1,7 +1,4 @@
 import { z } from 'zod';
-import { Edge } from 'reactflow';
-import { ColumnType } from './column';
-import { TableSchema } from './table';
 
 export const IndexSchema = z.object({
   id: z.string().uuid(),
@@ -11,40 +8,6 @@ export const IndexSchema = z.object({
 
 export type IndexType = z.infer<typeof IndexSchema>;
 
-export const RelationActionEnum = z.enum(['CASCADE', 'RESTRICT', 'SET_NULL', 'NO_ACTION']);
-
-export const RelationSchema = z.object({
-  id: z.string().uuid(),
-  // catch for backward compat
-  name: z.string().catch('fk'),
-  source: z.object({
-    columnId: z.string().uuid(),
-    tableId: z.string().uuid(),
-  }),
-  target: z.object({
-    columnId: z.string().uuid(),
-    tableId: z.string().uuid(),
-  }),
-  // catch for backward compat
-  actions: z
-    .object({
-      onDelete: RelationActionEnum,
-      onUpdate: RelationActionEnum,
-    })
-    .catch({
-      onDelete: 'RESTRICT',
-      onUpdate: 'RESTRICT',
-    }),
-});
-
-export type RelationType = z.infer<typeof RelationSchema>;
-
-export const CreateRelationSchema = RelationSchema.omit({
-  id: true,
-});
-
-export type CreateRelationType = z.infer<typeof CreateRelationSchema>;
-
 export const VisibilityAttribute = z.union([z.literal('INVISIBLE'), z.literal('VISIBLE')]);
 export const NullabilityAttribute = z.union([z.literal('NULLABLE'), z.literal('NOT_NULL')]);
 export const SignabilityAttribute = z.union([z.literal('UNSIGNED'), z.literal('SIGNED')]);
@@ -68,44 +31,3 @@ export const BaseUpdateColumnSchema = BaseColumnSchema.extend({
   isUniqueIndex: z.boolean(),
   tableId: z.string().uuid(),
 });
-
-export type RelationEdgeType = Edge<EdgeType>;
-
-export const GroupSchema = z.object({
-  id: z.string().uuid(),
-  name: z.string(),
-  width: z.number().int(),
-  height: z.number().int(),
-  color: z.object({
-    background: z.string(),
-    border: z.string(),
-  }),
-});
-
-export const PositionSchema = z.object({
-  itemId: z.string().uuid(),
-  groupId: z.string().uuid().optional(),
-  x: z.number(),
-  y: z.number(),
-});
-
-export type PositionType = z.infer<typeof PositionSchema>;
-
-export const SchemaSchema = z.object({
-  id: z.string().uuid(),
-  name: z.string().trim().max(64),
-  vendor: z.enum(['MYSQL:8.0']),
-  tables: TableSchema.array(),
-  groups: GroupSchema.array(),
-  positions: PositionSchema.array(),
-  relations: RelationSchema.array(),
-});
-
-export type SchemaType = z.infer<typeof SchemaSchema>;
-
-export type EdgeType = {
-  name: RelationType['name'];
-  sourceColumnId: ColumnType['id'];
-  targetColumnId: ColumnType['id'];
-  actions: RelationType['actions'];
-};

src/schemas/group.ts

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+export const GroupSchema = z.object({
+  id: z.string().uuid(),
+  name: z.string(),
+  width: z.number().int(),
+  height: z.number().int(),
+  color: z.object({
+    background: z.string(),
+    border: z.string(),
+  }),
+});

src/schemas/position.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export const PositionSchema = z.object({
+  itemId: z.string().uuid(),
+  groupId: z.string().uuid().optional(),
+  x: z.number(),
+  y: z.number(),
+});
+
+export type PositionType = z.infer<typeof PositionSchema>;

src/schemas/relation.ts

@@ -0,0 +1,46 @@
+import { Edge } from 'reactflow';
+import { z } from 'zod';
+import { ColumnType } from './column';
+
+export const RelationActionEnum = z.enum(['CASCADE', 'RESTRICT', 'SET_NULL', 'NO_ACTION']);
+
+export const RelationSchema = z.object({
+  id: z.string().uuid(),
+  // catch for backward compat
+  name: z.string().catch('fk'),
+  source: z.object({
+    columnId: z.string().uuid(),
+    tableId: z.string().uuid(),
+  }),
+  target: z.object({
+    columnId: z.string().uuid(),
+    tableId: z.string().uuid(),
+  }),
+  // catch for backward compat
+  actions: z
+    .object({
+      onDelete: RelationActionEnum,
+      onUpdate: RelationActionEnum,
+    })
+    .catch({
+      onDelete: 'RESTRICT',
+      onUpdate: 'RESTRICT',
+    }),
+});
+
+export type RelationType = z.infer<typeof RelationSchema>;
+
+export const CreateRelationSchema = RelationSchema.omit({
+  id: true,
+});
+
+export type CreateRelationType = z.infer<typeof CreateRelationSchema>;
+
+export type EdgeType = {
+  name: RelationType['name'];
+  sourceColumnId: ColumnType['id'];
+  targetColumnId: ColumnType['id'];
+  actions: RelationType['actions'];
+};
+
+export type RelationEdgeType = Edge<EdgeType>;

src/schemas/schema.ts

@@ -0,0 +1,17 @@
+import { z } from 'zod';
+import { GroupSchema } from './group';
+import { PositionSchema } from './position';
+import { RelationSchema } from './relation';
+import { TableSchema } from './table';
+
+export const SchemaSchema = z.object({
+  id: z.string().uuid(),
+  name: z.string().trim().max(64),
+  vendor: z.enum(['MYSQL:8.0']),
+  tables: TableSchema.array(),
+  groups: GroupSchema.array(),
+  positions: PositionSchema.array(),
+  relations: RelationSchema.array(),
+});
+
+export type SchemaType = z.infer<typeof SchemaSchema>;