soccer-jersey-fork 1.0.117 → 1.0.119

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/stories/jersey.stories.js +1 -0
  2. package/lib/types/index.d.ts +1 -0
  3. package/lib/utils/draw-soccer-jersey.d.ts +1 -1
  4. package/lib/utils/draw-soccer-jersey.js +51 -44
  5. package/package.json +10 -10
package/lib/stories/jersey.stories.js CHANGED
@@ -35,5 +35,6 @@ export const Default = {
35
35
  shirtSideColor: "",
36
36
  shortsSideColor: "#b3020c",
37
37
  shoulderSideColor: "",
38
+ sleeveType: "short",
38
39
  },
39
40
  };
package/lib/types/index.d.ts CHANGED
@@ -19,6 +19,7 @@ export interface DrawSoccerJerseyProps {
19
19
  collarType?: "round" | "polo" | "classic";
20
20
  collarColor?: string;
21
21
  sleeveCuffColor?: string;
22
+ sleeveType: "long" | "short";
22
23
  texts: {
23
24
  text: string;
24
25
  size: number;
package/lib/utils/draw-soccer-jersey.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { DrawSoccerJerseyProps } from "../types";
2
- export default function drawSoccerJersey({ shirtColor, shirtStyle, shirtStyleColor, shirtStyleDirection, shirtWidth, shoulderSideColor, shirtSideColor, shirtBottomColor, sleeveColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, collarColor, collarType, shortsColor, shortsCuffColor, shortsSideColor, images, texts, shortsStyle, shortsStyleDirection, shortsStyleColor, }: DrawSoccerJerseyProps): string;
2
+ export default function drawSoccerJersey({ shirtColor, shirtStyle, shirtStyleColor, shirtStyleDirection, shirtWidth, shoulderSideColor, shirtSideColor, shirtBottomColor, sleeveColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, sleeveType, collarColor, collarType, shortsColor, shortsCuffColor, shortsSideColor, images, texts, shortsStyle, shortsStyleDirection, shortsStyleColor, }: DrawSoccerJerseyProps): string;
package/lib/utils/draw-soccer-jersey.js CHANGED
@@ -8,16 +8,26 @@
8
8
  import { SVG } from "@svgdotjs/svg.js";
9
9
  import lightenDarkenColor from "./lighten-darken-color";
10
10
  import { addShirtSideColor, addShortSideColor, addShoulderSideColor, drawCheckered, drawConcentricCircles, drawCrisscross, drawCrossLines, drawDashes, drawDiamonds, drawSingleBand, drawSingleBandThin, drawSleeveContrastingTwoColors, drawSleeveTwoColors, drawStriped, drawTwoColors, drawWaves, } from "../patterns/patterns";
11
- export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shirtStyleColor, shirtStyleDirection, shirtWidth = 200, shoulderSideColor, shirtSideColor, shirtBottomColor, sleeveColor = shirtColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, collarColor, collarType, shortsColor, shortsCuffColor, shortsSideColor, images, texts, shortsStyle, shortsStyleDirection, shortsStyleColor, }) {
12
- // paths
13
- const pathLeftSleeve = "m18 8.5c-4 3-6.1 7.7-8.9 12-3.1 4.9-6 9.9-8.8 15 6 4 12 8.2 19 10 4.1.38 4.3-5.3 3.8-8.2-.29-9.7-3-19-5-29z";
14
- const pathRightSleeve = "m83 8.1c4 3 6.1 7.7 8.9 12 3.1 4.9 6 9.9 8.8 15-6 4-12 8.2-19 10-4.1.38-4.3-5.3-3.8-8.2.3-9.7 3-19 5-29z";
11
+ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shirtStyleColor, shirtStyleDirection, shirtWidth = 200, shoulderSideColor, shirtSideColor, shirtBottomColor, sleeveColor = shirtColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, sleeveType, collarColor, collarType, shortsColor, shortsCuffColor, shortsSideColor, images, texts, shortsStyle, shortsStyleDirection, shortsStyleColor, }) {
12
+ // 3. DRAW SLEEVES FIRST (Background Layer)
13
+ const pathLeftSleeve = sleeveType === "long"
14
+ ? "M 17.4 9 C 9.7 13.9 8.6 24.4 7.5 32.6 C 5.7 43 7.3 61 6 90.1 C 7.7 92 8.6 91.9 12.1 92 C 14.8 92 14.8 92.1 17.8 90.7 C 18.4 85.4 18.4 76.6 19.4 64.2 C 20 57.3 20.8 44.8 22.6 37.4 C 22.3 27.6 20 18.7 18 8.6 Z"
15
+ : "m18 8.5c-4 3-6.1 7.7-8.9 12-3.1 4.9-6 9.9-8.8 15 6 4 12 8.2 19 10 4.1.38 4.3-5.3 3.8-8.2-.29-9.7-3-19-5-29z";
16
+ const pathRightSleeve = sleeveType === "long"
17
+ ? "M 82.9 8.2 C 90.7 13.2 91.8 23.7 92.9 31.9 C 94.7 42.2 93.1 60.2 94.4 89.3 C 92.7 91.2 91.8 91.1 88.3 91.2 C 85.5 91.2 85.6 91.3 82.6 89.9 C 81.9 84.6 81.9 75.7 80.9 63.3 C 80.3 56.5 79.5 43.9 77.6 36.6 C 77.9 26.8 80.2 17.9 82.3 7.8 Z"
18
+ : "m83 8.1c4 3 6.1 7.7 8.9 12 3.1 4.9 6 9.9 8.8 15-6 4-12 8.2-19 10-4.1.38-4.3-5.3-3.8-8.2.3-9.7 3-19 5-29z";
15
19
  const pathMainBody = "m83 8c-6.4-2.3-13-5.3-19-8 1.4 5.4-5.4 8.2-10 8.7-5.8.68-13-.075-17-5-1.2-2.1.62-5.1-2.8-2.6-5.6 2.6-11 5.5-17 7.9 5.6 21 3.3 17 6.2 40-.14 15 .16 30-.79 45 1.6 4.7 9.5 4 14 5.2 13 1.8 26 1.2 39-2.3 5.7-1.5 1.5-8.1 2.5-12-.32-15-.32-29-.32-44 5.5-37 1.6-12 4.9-33z";
16
20
  const pathNeck = "m63 .064c-3.8.47-7.5 1.9-11 1.9-5 .31-11-.47-16-1.9-1.7.6-.78 2.8-1.8 4.1-3 5.1-6 10-9 15h50c-3.8-6.4-7.6-13-11-19z";
17
21
  // eslint-disable-next-line new-cap
18
22
  const page = SVG();
19
23
  shirtStyleColor = shirtStyleColor || "#eee";
20
24
  let shirtFill = getPatternFill(page, shirtColor, shirtStyle, shirtStyleColor, "shirt", shirtStyleDirection);
25
+ const optimizedSleeveColor = lightenDarkenColor(sleeveColor, -5);
26
+ sleeveStyleColor = sleeveStyleColor || "#eee";
27
+ sleeveStyleDirection = sleeveStyleDirection || "vertical";
28
+ const sleeveFill = getPatternFill(page, optimizedSleeveColor, sleeveStyle, sleeveStyleColor, "sleeve", sleeveStyleDirection);
29
+ page.path(pathLeftSleeve).fill(sleeveFill);
30
+ page.path(pathRightSleeve).fill(sleeveFill);
21
31
  // neck
22
32
  page.path(pathNeck).fill(lightenDarkenColor(shirtColor, -50));
23
33
  // shirt
@@ -30,46 +40,6 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
30
40
  })
31
41
  .from(1, 1)
32
42
  .to(1, 0));
33
- switch (collarType) {
34
- case "polo": {
35
- page
36
- /**
37
- * The points start from the left then spread out to the leftest
38
- */
39
- .path("m36.5 0.5 l -6 5 15 9 l 3 -5 3 0 3 5 15 -9 -6 -5 c -10 10 -25 5 -27.5 0")
40
- .fill(collarColor || "#eee")
41
- .stroke({
42
- color: collarColor,
43
- width: 1,
44
- });
45
- break;
46
- }
47
- case "classic": {
48
- page
49
- .path("m36 0 l-6 10 q5-6 22 0 z m29 0 l6 10 q-5-6-22 0 z")
50
- .fill(collarColor || "#eee")
51
- .stroke({
52
- color: collarColor,
53
- width: 1,
54
- });
55
- break;
56
- }
57
- default: {
58
- if (collarColor) {
59
- const pathCollar = "m35 0 q 17 20 30 0";
60
- page
61
- .path(pathCollar)
62
- .fill("none")
63
- .stroke({ color: collarColor, width: 2 });
64
- }
65
- }
66
- }
67
- const optimizedSleeveColor = lightenDarkenColor(sleeveColor, -5);
68
- sleeveStyleColor = sleeveStyleColor || "#eee";
69
- sleeveStyleDirection = sleeveStyleDirection || "vertical";
70
- const sleeveFill = getPatternFill(page, optimizedSleeveColor, sleeveStyle, sleeveStyleColor, "sleeve", sleeveStyleDirection);
71
- page.path(pathLeftSleeve).fill(sleeveFill);
72
- page.path(pathRightSleeve).fill(sleeveFill);
73
43
  if (shoulderSideColor) {
74
44
  addShoulderSideColor(page, shoulderSideColor);
75
45
  }
@@ -203,6 +173,43 @@ export default function drawSoccerJersey({ shirtColor = "plain", shirtStyle, shi
203
173
  drawText(page);
204
174
  }
205
175
  }
176
+ /**
177
+ * The collar should be the last so the shoulder color doesn't superimpose it.
178
+ */
179
+ switch (collarType) {
180
+ case "polo": {
181
+ page
182
+ /**
183
+ * The points start from the left then spread out to the leftest
184
+ */
185
+ .path("M 36.26 0.02 l -6 5 15 9 4.44 -6.68 -0.13 -0.48 4.68 7.16 15 -9 -6 -5 c -10 10 -25 5 -27.5 0")
186
+ .fill(collarColor || "#eee")
187
+ .stroke({
188
+ color: collarColor,
189
+ width: 1,
190
+ });
191
+ break;
192
+ }
193
+ case "classic": {
194
+ page
195
+ .path("m36 0 l-6 10 q5-6 22 0 z m29 0 l6 10 q-5-6-22 0 z")
196
+ .fill(collarColor || "#eee")
197
+ .stroke({
198
+ color: collarColor,
199
+ width: 1,
200
+ });
201
+ break;
202
+ }
203
+ default: {
204
+ if (collarColor) {
205
+ const pathCollar = "m35 0 q 17 20 30 0";
206
+ page
207
+ .path(pathCollar)
208
+ .fill("none")
209
+ .stroke({ color: collarColor, width: 2 });
210
+ }
211
+ }
212
+ }
206
213
  page.width(shirtWidth);
207
214
  // +10 is some extra room with the shorts height, so the total should be 150
208
215
  page.viewbox(`0 0 102 ${100 + (SHORT_HEIGHT + 10)}`);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "soccer-jersey-fork",
3
- "version": "1.0.117",
3
+ "version": "1.0.119",
4
4
  "description": "Generate soccer jerseys in SVG format",
5
5
  "main": "lib/index.js",
6
6
  "author": "nadchif (https://github.com/nadchif)",
@@ -27,25 +27,25 @@
27
27
  "@babel/preset-env": "^7.28.3",
28
28
  "@babel/preset-react": "^7.27.1",
29
29
  "@babel/preset-typescript": "^7.27.1",
30
- "@storybook/addon-docs": "^9.1.3",
31
- "@storybook/addon-links": "^9.1.3",
32
- "@storybook/builder-vite": "^9.1.3",
33
- "@storybook/react-vite": "^9.1.3",
34
- "@storybook/testing-library": "^0.0.14-next.2",
30
+ "@storybook/addon-docs": "^10.3.5",
31
+ "@storybook/addon-links": "^10.3.5",
32
+ "@storybook/builder-vite": "^10.3.5",
33
+ "@storybook/react-vite": "^10.3.5",
34
+ "@storybook/testing-library": "^0.2.2",
35
35
  "@types/react": "^19.1.12",
36
36
  "@typescript-eslint/eslint-plugin": "^4.15.1",
37
37
  "@typescript-eslint/parser": "^4.15.1",
38
- "eslint": "^7.20.0",
38
+ "eslint": "^10.2.0",
39
39
  "eslint-config-google": "^0.14.0",
40
- "eslint-plugin-storybook": "9.1.3",
40
+ "eslint-plugin-storybook": "10.3.5",
41
41
  "prettier": "^3.5.3",
42
42
  "react": "^19.1.1",
43
43
  "react-dom": "^19.1.1",
44
- "storybook": "^10.1.11",
44
+ "storybook": "^10.3.5",
45
45
  "ts-loader": "^8.0.17",
46
46
  "typedoc": "^0.28.11",
47
47
  "typescript": "^5.9.2",
48
- "vite": "^7.3.1"
48
+ "vite": "^8.0.8"
49
49
  },
50
50
  "dependencies": {
51
51
  "@svgdotjs/svg.js": "^3.2.5"