refactor(background): cleanup

packages/background/src/Background.tsx

@@ -3,7 +3,7 @@ import cc from 'classcat';
 import { useStore, ReactFlowState } from '@react-flow/core';
 
 import { BackgroundProps, BackgroundVariant } from './types';
-import { createGridLinesPath, createGridDotsPath } from './utils';
+import { DotPattern, LinePattern } from './utils';
 
 const defaultColors = {
   [BackgroundVariant.Dots]: '#91919a',
@@ -56,10 +56,6 @@ const Background: FC<BackgroundProps> = ({
     ? [scaledSize, scaledSize]
     : scaledGap;
 
-  const path = isDots
-    ? createGridDotsPath(scaledSize / 2, patternColor)
-    : createGridLinesPath(patternDimensions, lineWidth, patternColor);
-
   const patternOffset = isDots
     ? [scaledSize / 2, scaledSize / 2]
     : [patternDimensions[0] / 2, patternDimensions[1] / 2];
@@ -89,7 +85,15 @@ const Background: FC<BackgroundProps> = ({
             patternUnits="userSpaceOnUse"
             patternTransform={`translate(-${patternOffset[0]},-${patternOffset[1]})`}
           >
-            {path}
+            {isDots ? (
+              <DotPattern color={patternColor} radius={scaledSize / 2} />
+            ) : (
+              <LinePattern
+                dimensions={patternDimensions}
+                color={patternColor}
+                lineWidth={lineWidth}
+              />
+            )}
           </pattern>
           <rect
             x="0"

packages/background/src/utils.tsx

@@ -1,24 +1,32 @@
 import React from 'react';
 
-export const createGridLinesPath = (
+type LinePatternProps = {
-  dimensions: [number, number],
+  dimensions: [number, number];
-  strokeWidth: number,
+  lineWidth?: number;
-  stroke: string
+  color: string;
-): React.ReactElement => {
+};
+
+export function LinePattern({
+  color,
+  dimensions,
+  lineWidth,
+}: LinePatternProps) {
   return (
     <path
-      stroke={stroke}
+      stroke={color}
-      strokeWidth={strokeWidth}
+      strokeWidth={lineWidth}
       d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${
         dimensions[0]
       }`}
     />
   );
+}
+
+type DotPatternProps = {
+  radius: number;
+  color: string;
 };
 
-export const createGridDotsPath = (
+export const DotPattern = ({ color, radius }: DotPatternProps) => {
-  size: number,
+  return <circle cx={radius} cy={radius} r={radius} fill={color} />;
-  fill: string
-): React.ReactElement => {
-  return <circle cx={size} cy={size} r={size} fill={fill} />;
 };