refactor: refactors connector style into a zod enum

src/Isoflow.tsx

@@ -9,7 +9,6 @@ import {
   NodeInput,
   ConnectorInput,
   RectangleInput,
-  ConnectorStyleEnum,
   InitialScene
 } from 'src/types';
 import { sceneToSceneInput } from 'src/utils';
@@ -141,8 +140,7 @@ export {
   NodeInput,
   RectangleInput,
   ConnectorInput,
-  sceneValidationSchema,
-  ConnectorStyleEnum
+  sceneValidationSchema
 };
 
 export const version = PACKAGE_VERSION;

src/components/ItemControls/ConnectorControls/ConnectorControls.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import { Connector, ConnectorStyleEnum } from 'src/types';
+import { connectorStyleOptions } from 'src/validation/sceneItems';
 import { useTheme, Box, Slider, Select, MenuItem } from '@mui/material';
 import { useSceneStore } from 'src/stores/sceneStore';
 import { useConnector } from 'src/hooks/useConnector';
@@ -67,7 +68,7 @@ export const ConnectorControls = ({ id }: Props) => {
             });
           }}
         >
-          {Object.values(ConnectorStyleEnum).map((style) => {
+          {Object.values(connectorStyleOptions).map((style) => {
             return <MenuItem value={style}>{style}</MenuItem>;
           })}
         </Select>

src/config.ts

@@ -1,10 +1,4 @@
-import {
-  Size,
-  Coords,
-  SceneInput,
-  Connector,
-  ConnectorStyleEnum
-} from 'src/types';
+import { Size, Coords, SceneInput, Connector } from 'src/types';
 import { customVars } from './styles/theme';
 
 // TODO: This file could do with better organisation and convention for easier reading.
@@ -32,7 +26,7 @@ export const CONNECTOR_DEFAULTS: ConnectorDefaults = {
   // The boundaries of the search area for the pathfinder algorithm
   // is the grid that encompasses the two nodes + the offset below.
   searchOffset: { x: 1, y: 1 },
-  style: ConnectorStyleEnum.SOLID
+  style: 'SOLID'
 };
 
 export const TEXTBOX_DEFAULTS = {

src/examples/initialScene.ts

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { InitialScene, ConnectorStyleEnum } from 'src/Isoflow';
+import { InitialScene } from 'src/Isoflow';
 import { flattenCollections } from '@isoflow/isopacks/dist/utils';
 import isoflowIsopack from '@isoflow/isopacks/dist/isoflow';
 import awsIsopack from '@isoflow/isopacks/dist/aws';
@@ -55,7 +55,7 @@ export const initialScene: InitialScene = {
     },
     {
       id: 'connector2',
-      style: ConnectorStyleEnum.DOTTED,
+      style: 'DOTTED',
       width: 10,
       anchors: [
         { ref: { node: 'server' } },

src/types/inputs.ts

@@ -5,11 +5,12 @@ import {
   connectorAnchorInput,
   connectorInput,
   textBoxInput,
-  rectangleInput
+  rectangleInput,
+  connectorStyleEnum
 } from 'src/validation/sceneItems';
 import { sceneInput } from 'src/validation/scene';
 
-export { ConnectorStyleEnum } from 'src/validation/sceneItems';
+export type ConnectorStyleEnum = z.infer<typeof connectorStyleEnum>;
 export type IconInput = z.infer<typeof iconInput>;
 export type NodeInput = z.infer<typeof nodeInput>;
 export type ConnectorAnchorInput = z.infer<typeof connectorAnchorInput>;

src/validation/sceneItems.ts

@@ -45,23 +45,14 @@ export const connectorAnchorInput = z
     }
   });
 
-export enum ConnectorStyleEnum {
-  SOLID = 'SOLID',
-  DOTTED = 'DOTTED',
-  DASHED = 'DASHED'
-}
+export const connectorStyleOptions = ['SOLID', 'DOTTED', 'DASHED'] as const;
+export const connectorStyleEnum = z.enum(connectorStyleOptions);
 
 export const connectorInput = z.object({
   id: z.string(),
   color: z.string().optional(),
   width: z.number().optional(),
-  style: z
-    .union([
-      z.literal(ConnectorStyleEnum.SOLID),
-      z.literal(ConnectorStyleEnum.DOTTED),
-      z.literal(ConnectorStyleEnum.DASHED)
-    ])
-    .optional(),
+  style: connectorStyleEnum.optional(),
   anchors: z.array(connectorAnchorInput)
 });