diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 4cf8c838073..b6fe3292172 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -20,6 +20,7 @@ const frontendFiles = [
`**/pages/**/*.${jsSuffixes}`,
`**/page-templates/**/*.${jsSuffixes}`,
`packages/i18n/**/*.md/*.${jsSuffixes}`,
+ `packages/react-components/**/*.${jsSuffixes}`,
]
module.exports = {
diff --git a/config/dependencies.yaml b/config/dependencies.yaml
index fbdfa82aaec..f6445d6b8b8 100644
--- a/config/dependencies.yaml
+++ b/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'
diff --git a/config/scripts.yaml b/config/scripts.yaml
index e1b3794c070..0f9b1f1fc2b 100644
--- a/config/scripts.yaml
+++ b/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:
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index 255d5702022..9aabbee6a76 100644
--- a/packages/react-components/package.json
+++ b/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": [
diff --git a/packages/react-components/src/index.mjs b/packages/react-components/src/index.mjs
index 57f3fadfbea..04c7d646d50 100644
--- a/packages/react-components/src/index.mjs
+++ b/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
diff --git a/packages/react-components/src/pattern/circle.mjs b/packages/react-components/src/pattern/circle.mjs
index 86609f251e7..121deac8266 100644
--- a/packages/react-components/src/pattern/circle.mjs
+++ b/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 }) =>
diff --git a/packages/react-components/src/pattern/defs.mjs b/packages/react-components/src/pattern/defs.mjs
index d876255cd69..2f289255caa 100644
--- a/packages/react-components/src/pattern/defs.mjs
+++ b/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 += ``
}
}
diff --git a/packages/react-components/src/pattern/grid.mjs b/packages/react-components/src/pattern/grid.mjs
index 852eaa34f07..249a483c5e6 100644
--- a/packages/react-components/src/pattern/grid.mjs
+++ b/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 }) => (
diff --git a/packages/react-components/src/pattern/group.mjs b/packages/react-components/src/pattern/group.mjs
index 9eac8c43a21..b72478185df 100644
--- a/packages/react-components/src/pattern/group.mjs
+++ b/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}
))
+
+Group.displayName = 'Group'
diff --git a/packages/react-components/src/pattern/index.mjs b/packages/react-components/src/pattern/index.mjs
index cd9da146dbd..54fdc41b0ea 100644
--- a/packages/react-components/src/pattern/index.mjs
+++ b/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'
diff --git a/packages/react-components/src/pattern/part.mjs b/packages/react-components/src/pattern/part.mjs
index ece24d2f8b3..64bd30eedaf 100644
--- a/packages/react-components/src/pattern/part.mjs
+++ b/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
diff --git a/packages/react-components/src/pattern/path.mjs b/packages/react-components/src/pattern/path.mjs
index e41486e2477..0ef622788f7 100644
--- a/packages/react-components/src/pattern/path.mjs
+++ b/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
}
diff --git a/packages/react-components/src/pattern/point.mjs b/packages/react-components/src/pattern/point.mjs
index e956c368fcd..2e4f8d6ffcf 100644
--- a/packages/react-components/src/pattern/point.mjs
+++ b/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
diff --git a/packages/react-components/src/pattern/snippet.mjs b/packages/react-components/src/pattern/snippet.mjs
index 43f859dcfd4..91ce5846c77 100644
--- a/packages/react-components/src/pattern/snippet.mjs
+++ b/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'
diff --git a/packages/react-components/src/pattern/stack.mjs b/packages/react-components/src/pattern/stack.mjs
index cb85a6be76a..09c87866510 100644
--- a/packages/react-components/src/pattern/stack.mjs
+++ b/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 }) => {
{settings[0].paperless ? : null}
{[...stack.parts].map((part, key) => (
-
+
))}
)
diff --git a/packages/react-components/src/pattern/svg.mjs b/packages/react-components/src/pattern/svg.mjs
index 50cd0f58846..d5d54fbb2df 100644
--- a/packages/react-components/src/pattern/svg.mjs
+++ b/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'
diff --git a/packages/react-components/src/pattern/text.mjs b/packages/react-components/src/pattern/text.mjs
index d9cdbe4b8e5..6c4e41aa8ab 100644
--- a/packages/react-components/src/pattern/text.mjs
+++ b/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'
diff --git a/packages/react-components/src/pattern/utils.mjs b/packages/react-components/src/pattern/utils.mjs
index faf9fed0605..f0aeaf14a14 100644
--- a/packages/react-components/src/pattern/utils.mjs
+++ b/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) => {