lint fixes for react-components

.eslintrc.cjs

@@ -20,6 +20,7 @@ const frontendFiles = [
   `**/pages/**/*.${jsSuffixes}`,
   `**/page-templates/**/*.${jsSuffixes}`,
   `packages/i18n/**/*.md/*.${jsSuffixes}`,
+  `packages/react-components/**/*.${jsSuffixes}`,
 ]
 
 module.exports = {

config/dependencies.yaml

@@ -133,6 +133,9 @@ plugintest:
     '@freesewing/plugin-sprinkle': *freesewing
     '@freesewing/plugin-svgattr': *freesewing
     '@freesewing/plugin-theme': *freesewing
+react-components:
+  peer:
+    react: '>=14'
 rehype-jargon:
   _:
     'unist-util-visit': &unist-util-visit '4.1.2'

config/scripts.yaml

@@ -45,6 +45,8 @@ rehype-jargon:
   lint: "npx eslint 'src/*.mjs'"
 snapseries:
   lint: "npx eslint 'src/*.mjs'"
+react-components:
+  lint: "eslint 'src/**/*.mjs'"
 
 # Sites go here
 backend:

packages/react-components/package.json

@@ -31,12 +31,14 @@
     "vbuild": "VERBOSE=1 node build.mjs",
     "lab": "cd ../../sites/lab && yarn start",
     "tips": "node ../../scripts/help.mjs",
-    "lint": "npx eslint 'src/**' 'tests/*.mjs'",
+    "lint": "eslint 'src/**/*.mjs'",
     "cibuild_step6": "node build.mjs",
     "wbuild": "node build.mjs",
     "wcibuild_step6": "node build.mjs"
   },
-  "peerDependencies": {},
+  "peerDependencies": {
+    "react": ">=14"
+  },
   "dependencies": {},
   "devDependencies": {},
   "files": [

packages/react-components/src/index.mjs

@@ -21,7 +21,7 @@ export const Svg = SvgComponent
 export const Defs = DefsComponent
 export const Group = GroupComponent
 export const Stack = StackComponent
-export const Part = DefsComponent
+export const Part = PartComponent
 export const Point = PointComponent
 export const Path = PathComponent
 export const Snippet = SnippetComponent

packages/react-components/src/pattern/circle.mjs

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react'
 
 export const Circle = ({ point }) =>

packages/react-components/src/pattern/defs.mjs

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react'
 
 const style = ` style="fill: none; stroke: currentColor;" `
@@ -17,6 +18,9 @@ export const Defs = (props) => {
       if (typeof part.points.gridAnchor !== 'undefined') anchor = part.points.gridAnchor
       else if (typeof part.points.anchor !== 'undefined') anchor = part.points.anchor
 
+      if (isNaN(anchor.x)) anchor.x = 0
+      if (isNaN(anchor.y)) anchor.y = 0
+
       defs += `<pattern id="grid-${stack}" key="grid-${stack}" xlink:href="#grid" x="${anchor.x}" y="${anchor.y}" />`
     }
   }

packages/react-components/src/pattern/grid.mjs

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react'
 
 export const Grid = ({ stack, stackName }) => (

packages/react-components/src/pattern/group.mjs

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-unused-vars
 import React, { forwardRef } from 'react'
 
 export const Group = forwardRef((props, ref) => (
@@ -5,3 +6,5 @@ export const Group = forwardRef((props, ref) => (
     {props.children}
   </g>
 ))
+
+Group.displayName = 'Group'

packages/react-components/src/pattern/index.mjs

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-unused-vars
 import React, { forwardRef } from 'react'
 // Components that can be swizzled
 import { Svg as DefaultSvg } from './svg.mjs'
@@ -84,3 +85,5 @@ export const Pattern = forwardRef(
     )
   }
 )
+
+Pattern.displayName = 'Pattern'

packages/react-components/src/pattern/part.mjs

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-unused-vars
 import React, { forwardRef } from 'react'
 import { getId, getProps } from './utils.mjs'
 
@@ -38,6 +39,8 @@ export const PartInner = forwardRef(
   }
 )
 
+PartInner.displayName = 'PartInner'
+
 export const Part = ({ stackName, partName, part, settings, components, t }) => {
   const { Group } = components
 

packages/react-components/src/pattern/path.mjs

@@ -1,14 +1,14 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react'
 import { getId, getProps } from './utils.mjs'
 
-export const Path = ({ stackName, pathName, path, partName, part, settings, components, t }) => {
+export const Path = ({ stackName, pathName, path, partName, settings, components, t }) => {
   // Don't render hidden paths
   if (path.hidden) return null
 
   // Get potentially swizzled components
   const { TextOnPath } = components
 
-  const output = []
   const pathId = getId({ settings, stackName, partName, pathName })
 
   return (
@@ -19,6 +19,4 @@ export const Path = ({ stackName, pathName, path, partName, part, settings, comp
       ) : null}
     </>
   )
-
-  return output
 }

packages/react-components/src/pattern/point.mjs

@@ -1,7 +1,8 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react'
 import { withinPartBounds } from './utils.mjs'
 
-export const Point = ({ stackName, partName, pointName, part, point, settings, components, t }) => {
+export const Point = ({ stackName, partName, pointName, part, point, components, t }) => {
   // Don't include points outside the part bounding box
   if (!withinPartBounds(point, part)) return null
 

packages/react-components/src/pattern/snippet.mjs

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react'
 import { getProps } from './utils.mjs'
 

packages/react-components/src/pattern/stack.mjs

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react'
 import { getProps } from './utils.mjs'
 
@@ -8,7 +9,7 @@ export const Stack = ({ stackName, stack, settings, components, t }) => {
     <Group {...getProps(stack)}>
       {settings[0].paperless ? <Grid {...{ stack, stackName }} /> : null}
       {[...stack.parts].map((part, key) => (
-        <Part {...{ settings, components, t, part, stackName, key }} />
+        <Part {...{ settings, components, t, part, stackName }} key={key} />
       ))}
     </Group>
   )

packages/react-components/src/pattern/svg.mjs

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react'
 import { forwardRef } from 'react'
 
@@ -39,3 +40,5 @@ export const Svg = forwardRef(
     )
   }
 )
+
+Svg.displayName = 'Svg'

packages/react-components/src/pattern/text.mjs

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react'
 import { translateStrings } from './utils.mjs'
 

packages/react-components/src/pattern/utils.mjs

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react'
 
 export const getProps = (obj) => {