soccer-jersey-fork 1.0.91 → 1.0.93

package/lib/patterns/patterns.d.ts

@@ -9,8 +9,8 @@ export declare const drawStriped: (page: Svg, primaryColor: string, secondaryCol
 export declare const drawCheckered: (page: Svg, primaryColor: string, secondaryColor: string, size: "sm" | "lg", direction?: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawDiamonds: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawTwoColors: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
+export declare const drawSleeveTwoColors: (page: Svg, primaryColor: string, secondaryColor: string, direction: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawSleeveContrastingTwoColors: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
-export declare const drawSleeveTwoColors: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawSingleBand: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawSingleBandThin: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle?: StyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawWaves: (page: Svg, primaryColor: string, secondaryColor: string, waveStyle: StyleDirection) => import("@svgdotjs/svg.js").Pattern;

package/lib/patterns/patterns.js

@@ -121,44 +121,54 @@ export const drawDiamonds = (page, primaryColor, secondaryColor) => {
 export const drawTwoColors = (page, primaryColor, secondaryColor, bandStyle) => {
     switch (bandStyle) {
         case "diagonalRight":
-            return page.pattern(100, 100, function (add) {
+            return page.pattern(100, 100, (add) => {
                 add.rect(90, 100).fill(primaryColor);
                 add.rect(50, 120).fill(secondaryColor).move(50, 0).rotate(35);
             });
         case "diagonalLeft":
-            return page.pattern(100, 100, function (add) {
+            return page.pattern(100, 100, (add) => {
                 add.rect(90, 100).fill(primaryColor);
                 add.rect(60, 140).fill(secondaryColor).move(52, -20).rotate(145);
             });
         case "horizontal":
-            return page.pattern(100, 100, function (add) {
+            return page.pattern(100, 100, (add) => {
                 add.rect(100, 100).fill(primaryColor);
                 add.rect(100, 50).fill(secondaryColor).move(0, 52);
             });
         case "vertical":
-            return page.pattern(90, 100, function (add) {
+            return page.pattern(90, 100, (add) => {
                 add.rect(90, 100).fill(primaryColor);
                 add.rect(50, 100).fill(secondaryColor).move(50, 0);
             });
         default:
-            return page.pattern(90, 90, function (add) {
+            return page.pattern(90, 90, (add) => {
                 add.rect(90, 100).fill(primaryColor);
                 add.rect(20, 100).fill(secondaryColor).move(50, 0);
             });
     }
 };
+export const drawSleeveTwoColors = (page, primaryColor, secondaryColor, direction) => {
+    switch (direction) {
+        case "horizontal": {
+            return page.pattern(100, 100, (add) => {
+                add.rect(100, 100).fill(primaryColor);
+                add.rect(100, 30).fill(secondaryColor);
+            });
+        }
+        default: {
+            return page.pattern(29, 100, (add) => {
+                add.rect(29, 100).fill(primaryColor);
+                add.rect(18, 100).fill(secondaryColor).move(-4, 0);
+            });
+        }
+    }
+};
 export const drawSleeveContrastingTwoColors = (page, primaryColor, secondaryColor) => {
-    return page.pattern(100, 100, function (add) {
+    return page.pattern(100, 100, (add) => {
         add.rect(100, 100).fill(primaryColor);
         add.rect(50, 100).fill(secondaryColor);
     });
 };
-export const drawSleeveTwoColors = (page, primaryColor, secondaryColor) => {
-    return page.pattern(29, 100, (add) => {
-        add.rect(29, 100).fill(primaryColor);
-        add.rect(18, 100).fill(secondaryColor).move(-4, 0);
-    });
-};
 export const drawSingleBand = (page, primaryColor, secondaryColor, bandStyle) => {
     switch (bandStyle) {
         case "diagonalRight":
@@ -208,7 +218,7 @@ export const drawSingleBandThin = (page, primaryColor, secondaryColor, bandStyle
                 add.rect(100, 10).fill(secondaryColor).move(0, 35);
             });
         case "vertical":
-            return drawVertical(48);
+            return drawVertical(45);
         default:
             return drawVertical(60);
     }

package/lib/stories/ReactTeamPage.stories.js

@@ -9,29 +9,24 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        shirtStyle: "singleBand",
+        shirtColor: "#d40410",
         sleeveColor: "#ffffff",
-        sleeveCuffColor: "#E1001A",
-        collarColor: "#E1001A",
-        shirtColor: "#ffffff",
-        shortsColor: "#ffffff",
-        withBadge: false,
-        texts: [
-            { text: "10", x: 69, y: 130, size: 12, color: "#000000" },
-            { text: "VfB", x: 52, y: 47, size: 16, color: "#ffffff" },
-        ],
-        images: [
-            {
-                src: "https://resources.simcups.com/flags/w80/1254.svg",
-                x: 60,
-                y: 20,
-                width: 12,
-                height: 12,
-            },
-        ],
-        shirtStyleDirection: "horizontal",
-        shirtStyleColor: "#E1001A",
+        shirtStyle: "striped",
+        shirtStyleColor: "#DA000C",
+        shirtBottomColor: "",
+        shirtStyleDirection: "vertical",
+        collarColor: "",
+        sleeveStyle: "twoColors",
+        sleeveStyleColor: "#DA000C",
+        sleeveStyleDirection: "horizontal",
+        sleeveCuffColor: "",
+        images: [],
+        texts: [],
+        shortsColor: "#DA000C",
+        shortsCuffColor: "",
+        shirtSideColor: "",
+        shortsSideColor: "#b3020c",
         shoulderSideColor: "",
-        shortsSideColor: "#E1001A",
+        withBadge: true,
     },
 };

package/lib/stories/jersey-page.d.ts

@@ -0,0 +1,2 @@
+import { DrawSoccerJerseyProps } from "../types";
+export declare const JerseyPage: (props: DrawSoccerJerseyProps) => import("react/jsx-runtime").JSX.Element;

package/lib/stories/jersey-page.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SoccerJersey from "../index";
+export const JerseyPage = (props) => {
+    const jerseyImgSrc = SoccerJersey.draw(props);
+    return (_jsx("div", { style: { textAlign: "center" }, dangerouslySetInnerHTML: { __html: jerseyImgSrc } }));
+};

package/lib/stories/jersey.stories.d.ts

@@ -0,0 +1,11 @@
+/*!
+ * This file has been modified from the original.
+ * Original source: https://github.com/nadchif/soccer-jersey/tree/master
+ * Modifications Copyright 2025 Lau Kai Chung
+ */
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { JerseyPage } from "./jersey-page";
+declare const meta: Meta<typeof JerseyPage>;
+export default meta;
+type Story = StoryObj<typeof JerseyPage>;
+export declare const Default: Story;

package/lib/stories/jersey.stories.js

@@ -0,0 +1,32 @@
+import { JerseyPage } from "./jersey-page";
+const meta = {
+    title: "React Examples",
+    component: JerseyPage,
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        shirtColor: "#d40410",
+        sleeveColor: "#ffffff",
+        shirtStyle: "striped",
+        shirtStyleColor: "#DA000C",
+        shirtBottomColor: "",
+        shirtStyleDirection: "vertical",
+        collarColor: "",
+        sleeveStyle: "twoColors",
+        sleeveStyleColor: "#DA000C",
+        sleeveStyleDirection: "horizontal",
+        sleeveCuffColor: "",
+        images: [],
+        texts: [],
+        shortsColor: "#DA000C",
+        shortsCuffColor: "",
+        shirtSideColor: "",
+        shortsSideColor: "#b3020c",
+        shoulderSideColor: "",
+        withBadge: true,
+    },
+};

package/lib/utils/draw-soccer-jersey.js

@@ -206,7 +206,7 @@ function getPatternFill(page, baseColor, style, styleColor, type, direction = "v
     switch (style) {
         case "twoColors": {
             if (type === "sleeve") {
-                return drawSleeveTwoColors(page, baseColor, styleColor);
+                return drawSleeveTwoColors(page, baseColor, styleColor, direction);
             }
             else {
                 return drawTwoColors(page, baseColor, styleColor, direction);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "soccer-jersey-fork",
-  "version": "1.0.91",
+  "version": "1.0.93",
   "description": "Generate soccer jerseys in SVG format",
   "main": "lib/index.js",
   "scripts": {