[react] feat: add jane linedrawings (#211)

Adds linedrawings to Jane's design page.

Co-authored-by: SeaZeeZee <86711383+SeaZeeZee@users.noreply.github.com>
Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/211
Reviewed-by: Joost De Cock <joostdecock@noreply.codeberg.org>
Co-authored-by: SeaZeeZee <seazeezee@noreply.codeberg.org>
Co-committed-by: SeaZeeZee <seazeezee@noreply.codeberg.org>

packages/react/components/LineDrawing/index.mjs

@@ -23,6 +23,7 @@ import { Holmes, HolmesFront } from './holmes.mjs'
 import { Hortensia, HortensiaFront } from './hortensia.mjs'
 import { Huey, HueyFront, HueyBack } from './huey.mjs'
 import { Hugo, HugoFront, HugoBack } from './hugo.mjs'
+import { Jane, JaneFront, JaneBack } from './jane.mjs'
 import { Lucy, LucyFront } from './lucy.mjs'
 import { Lumina, LuminaFront, LuminaBack } from './lumina.mjs'
 import { Lumira, LumiraFront, LumiraBack } from './lumira.mjs'
@@ -64,6 +65,7 @@ const lineDrawingsFront = {
   hortensia: HortensiaFront,
   huey: HueyFront,
   hugo: HugoFront,
+  jane: JaneFront,
 
   lucy: LucyFront,
   lumina: LuminaFront,
@@ -102,6 +104,7 @@ const lineDrawingsBack = {
   gozer: GozerBack,
   huey: HueyBack,
   hugo: HugoBack,
+  jane: JaneBack,
   lumina: LuminaBack,
   lumira: LumiraBack,
   noble: NobleBack,
@@ -142,6 +145,7 @@ const lineDrawings = {
   hortensia: Hortensia,
   huey: Huey,
   hugo: Hugo,
+  jane: Jane,
 
   lucy: Lucy,
   lumina: Lumina,
@@ -259,6 +263,10 @@ export {
   Hugo,
   HugoFront,
   HugoBack,
+  // Jane
+  Jane,
+  JaneFront,
+  JaneBack,
   // Lucy
   Lucy,
   LucyFront,

packages/react/components/LineDrawing/jane.mjs

@@ -0,0 +1,74 @@
+import React from 'react'
+import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
+
+/*
+ * This strokeScale factor is used to normalize the stroke across
+ * designs so we have a consistent look when showing our collection
+ */
+const strokeScale = 0.5
+
+/**
+ * A linedrawing component for Aaron
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const Jane = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 0 1052.0441 2409.9082" {...{ stroke, className }}>
+    <Front stroke={stroke * strokeScale} />
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+/**
+ * A linedrawing component for the front of Aaron
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const JaneFront = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 0 1052.0441 1204.9541" {...{ className }}>
+    <Front stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+/**
+ * A linedrawing component for the front of Aaron
+ *
+ * @param {object} props - All React props
+ * @param {string} props.className - Any CSS classes to apply
+ * @param {number} props.stroke - The stroke width to apply
+ */
+export const JaneBack = ({ className, stroke = 1 }) => (
+  <LineDrawingWrapper viewBox="0 0 1052.0441 1204.9541" {...{ className }}>
+    <Back stroke={stroke * strokeScale} />
+  </LineDrawingWrapper>
+)
+
+/*
+ * SVG elements for the front
+ */
+export const Front = ({ stroke }) => (
+  <>
+    <path
+      key="outline"
+      d="m -608.63339,510.96724 h -147.87 l 147.87,-566.09998 M 87.116607,510.96724 H 234.98661 L 87.116607,-55.13274 m -212.969997,-566.1 c 0,44.64 -58.03,55.8 -134.91,55.8 -76.88,0 -134.89,-11.16 -134.89,-55.8 M -557.43723,-253.48707 -694.2189,-484.8963 m 730.16227,231.40586 136.78167,-231.40921 m -681.72351,48.36666 -277.64445,-72.49634 48.22547,-184.69252 277.66408,72.48911 m 448.245079,184.69975 277.644441,-72.49634 -48.22547,-184.69252 -277.664069,72.48911 m -334.900001,0 h -65.09998 L -608.63339,-55.132739 V 510.96724 H 87.116607 V -55.132739 L -60.753389,-621.23274 h -65.100001 m 0,0 c 0,76.88 -58.03,96.1 -134.91,96.1 -76.88,0 -134.89,-19.22 -134.89,-96.1"
+      transform="translate(786.77542,693.85435)"
+    />
+  </>
+)
+
+/*
+ * SVG elements for the back
+ */
+const Back = ({ stroke }) => (
+  <>
+    <path
+      key="outline"
+      d="M -608.63339,510.96724 H -756.5034 L -608.63339,-55.132743 M 87.116607,510.96724 H 234.98661 L 87.116607,-55.13274 m -212.969997,-566.1 c 0,44.64 -58.03,55.8 -134.91,55.8 -76.88,0 -134.89,-11.16 -134.89,-55.8 M -557.43723,-253.48707 -694.2189,-484.8963 m 730.16227,231.40586 136.78167,-231.40921 m -681.72351,48.36666 -277.64445,-72.49634 48.22547,-184.69252 277.66408,72.48911 m 448.245079,184.69975 277.644441,-72.49634 -48.22547,-184.69252 -277.664069,72.48911 m -334.900001,0 h -65.09998 L -608.63339,-55.132739 V 510.96724 H 87.116607 V -55.132739 L -60.753389,-621.23274 h -65.100001"
+      transform="translate(786.77542,693.85435)"
+    />
+  </>
+)