soccer-jersey-fork 1.0.15

package/lib/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Generate Soccer Jersey SVG images. Generates Data URIs that
+ * can be used directly as image src.
+ */
+import drawSoccerJersey from './utils/draw-soccer-jersey';
+declare const SoccerJersey: {
+    draw: typeof drawSoccerJersey;
+};
+export default SoccerJersey;

package/lib/index.js

@@ -0,0 +1,9 @@
+/**
+ * Generate Soccer Jersey SVG images. Generates Data URIs that
+ * can be used directly as image src.
+ */
+import drawSoccerJersey from './utils/draw-soccer-jersey';
+const SoccerJersey = {
+    draw: drawSoccerJersey,
+};
+export default SoccerJersey;

package/lib/index.umd.d.ts

@@ -0,0 +1,3 @@
+import drawSoccerJersey from './utils/draw-soccer-jersey';
+declare const draw: typeof drawSoccerJersey;
+export { draw };

package/lib/patterns/patterns.d.ts

@@ -0,0 +1,9 @@
+import { Svg } from '@svgdotjs/svg.js';
+declare const drawStriped: (page: Svg, primaryColor: string, secondaryColor: string, thickness?: "thin" | "thick" | "normal") => import("@svgdotjs/svg.js").Pattern;
+declare const drawCheckered: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
+declare const drawHoops: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
+declare const drawTwoColor: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: "diagonal-right" | "diagonal-left" | "horizontal" | "vertical") => import("@svgdotjs/svg.js").Pattern;
+declare const drawSingleBand: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: "diagonal-right" | "diagonal-left" | "horizontal" | "vertical") => import("@svgdotjs/svg.js").Pattern;
+declare const drawWaves: (page: Svg, primaryColor: string, secondaryColor: string, waveStyle: "horizontal" | "vertical") => import("@svgdotjs/svg.js").Pattern;
+declare const drawDashes: (page: Svg, primaryColor: string, secondaryColor: string, dashDirection: "diagonal-right" | "diagonal-left" | "horizontal" | "vertical") => import("@svgdotjs/svg.js").Pattern;
+export { drawStriped, drawHoops, drawSingleBand, drawCheckered, drawTwoColor, drawWaves, drawDashes, };

package/lib/patterns/patterns.js

@@ -0,0 +1,168 @@
+const drawstripedThick = (page, primaryColor, secondaryColor) => page.pattern(20, 4, function (add) {
+    add.rect(20, 4).fill(primaryColor);
+    add.rect(10, 4).fill(secondaryColor ? secondaryColor : '#eee');
+});
+const drawstripedThin = (page, primaryColor, secondaryColor) => page.pattern(8, 4, function (add) {
+    add.rect(8, 4).fill(primaryColor);
+    add.rect(1, 4).fill(secondaryColor ? secondaryColor : '#eee');
+});
+const drawStriped = (page, primaryColor, secondaryColor, thickness = 'normal') => {
+    switch (thickness) {
+        case 'thick':
+            return drawstripedThick(page, primaryColor, secondaryColor);
+        case 'thin':
+            return drawstripedThin(page, primaryColor, secondaryColor);
+        default:
+            return page.pattern(10, 4, function (add) {
+                add.rect(10, 4).fill(primaryColor);
+                add.rect(5, 4).fill(secondaryColor ? secondaryColor : '#eee');
+            });
+    }
+};
+const drawCheckered = (page, primaryColor, secondaryColor) => page.pattern(20, 20, function (add) {
+    add.rect(20, 20).fill(primaryColor);
+    add.rect(10, 10).fill(secondaryColor ? secondaryColor : '#eee');
+    add
+        .rect(10, 10)
+        .fill(secondaryColor ? secondaryColor : '#eee')
+        .move(10, 10);
+});
+const drawHoops = (page, primaryColor, secondaryColor) => page.pattern(20, 20, function (add) {
+    add.rect(20, 20).fill(primaryColor);
+    add.rect(20, 10).fill(secondaryColor ? secondaryColor : '#eee');
+});
+const drawTwoColor = (page, primaryColor, secondaryColor, bandStyle) => {
+    switch (bandStyle) {
+        case 'diagonal-right':
+            return page.pattern(100, 100, function (add) {
+                add.rect(90, 100).fill(primaryColor);
+                add
+                    .rect(50, 120)
+                    .fill(secondaryColor ? secondaryColor : '#eee')
+                    .move(50, 0).rotate(35);
+            });
+        case 'diagonal-left':
+            return page.pattern(100, 100, function (add) {
+                add.rect(90, 100).fill(primaryColor);
+                add
+                    .rect(60, 140)
+                    .fill(secondaryColor ? secondaryColor : '#eee')
+                    .move(52, -20).rotate(145);
+            });
+        case 'horizontal':
+            return page.pattern(100, 100, function (add) {
+                add.rect(100, 100).fill(primaryColor);
+                add
+                    .rect(100, 50)
+                    .fill(secondaryColor ? secondaryColor : '#eee')
+                    .move(0, 52);
+            });
+        case 'vertical':
+            return page.pattern(90, 100, function (add) {
+                add.rect(90, 100).fill(primaryColor);
+                add
+                    .rect(50, 100)
+                    .fill(secondaryColor ? secondaryColor : '#eee')
+                    .move(50, 0);
+            });
+        default:
+            return page.pattern(90, 90, function (add) {
+                add.rect(90, 100).fill(primaryColor);
+                add.rect(20, 100).fill(secondaryColor).move(50, 0);
+            });
+    }
+};
+const drawSingleBand = (page, primaryColor, secondaryColor, bandStyle) => {
+    switch (bandStyle) {
+        case 'diagonal-right':
+            return page.pattern(100, 100, function (add) {
+                add.rect(100, 100).fill(primaryColor);
+                add
+                    .rect(120, 20)
+                    .fill(secondaryColor ? secondaryColor : '#eee')
+                    .move(0, 40)
+                    .rotate(120);
+            });
+        case 'diagonal-left':
+            return page.pattern(100, 100, function (add) {
+                add.rect(100, 100).fill(primaryColor);
+                add
+                    .rect(120, 20)
+                    .fill(secondaryColor ? secondaryColor : '#eee')
+                    .move(0, 40)
+                    .rotate(60);
+            });
+        case 'horizontal':
+            return page.pattern(100, 90, function (add) {
+                add.rect(100, 90).fill(primaryColor);
+                add
+                    .rect(100, 30)
+                    .fill(secondaryColor ? secondaryColor : '#eee')
+                    .move(0, 30);
+            });
+        case 'vertical':
+            return page.pattern(90, 100, function (add) {
+                add.rect(90, 100).fill(primaryColor);
+                add
+                    .rect(20, 100)
+                    .fill(secondaryColor ? secondaryColor : '#eee')
+                    .move(40, 0);
+            });
+        default:
+            return page.pattern(90, 90, function (add) {
+                add.rect(90, 100).fill(primaryColor);
+                add.rect(20, 100).fill(secondaryColor).move(50, 0);
+            });
+    }
+};
+const drawWaves = (page, primaryColor, secondaryColor, waveStyle) => {
+    switch (waveStyle) {
+        case 'horizontal':
+            return page.pattern(20, 12, function (add) {
+                add.rect(20, 12).fill(primaryColor);
+                add.rect(14, 6).fill(secondaryColor ? secondaryColor : '#eee')
+                    .move(-3, 3).rotate(-15);
+                add.rect(14, 6).fill(secondaryColor ? secondaryColor : '#eee')
+                    .move(9, 3).rotate(15);
+            });
+        default:
+            return page.pattern(12, 20, function (add) {
+                add.rect(12, 20).fill(primaryColor);
+                add.rect(6, 14).fill(secondaryColor ? secondaryColor : '#eee')
+                    .move(3, -3).rotate(-15);
+                add.rect(6, 14).fill(secondaryColor ? secondaryColor : '#eee')
+                    .move(3, 9).rotate(15);
+            });
+    }
+};
+const drawDashes = (page, primaryColor, secondaryColor, dashDirection) => {
+    switch (dashDirection) {
+        case 'diagonal-left':
+            return page.pattern(10, 10, function (add) {
+                add.rect(10, 10).fill(primaryColor);
+                add.rect(5, 2).fill(secondaryColor ? secondaryColor : '#eee')
+                    .move(5, 5).rotate(45);
+            });
+        case 'diagonal-right':
+            return page.pattern(10, 10, function (add) {
+                add.rect(10, 10).fill(primaryColor);
+                add.rect(5, 2).fill(secondaryColor ? secondaryColor : '#eee')
+                    .move(5, 5).rotate(135);
+            });
+        case 'horizontal':
+            return page.pattern(10, 10, function (add) {
+                add.rect(10, 10).fill(primaryColor);
+                add.rect(5, 2).fill(secondaryColor ? secondaryColor : '#eee');
+                add.rect(5, 2).fill(secondaryColor ? secondaryColor : '#eee')
+                    .move(5, 5);
+            });
+        default:
+            return page.pattern(10, 10, function (add) {
+                add.rect(10, 10).fill(primaryColor);
+                add.rect(2, 5).fill(secondaryColor ? secondaryColor : '#eee');
+                add.rect(2, 5).fill(secondaryColor ? secondaryColor : '#eee')
+                    .move(5, 5);
+            });
+    }
+};
+export { drawStriped, drawHoops, drawSingleBand, drawCheckered, drawTwoColor, drawWaves, drawDashes, };

package/lib/stories/ReactTeamPage.d.ts

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

package/lib/stories/ReactTeamPage.js

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

package/lib/stories/ReactTeamPage.stories.d.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ReactTeamPage } from './ReactTeamPage';
+declare const meta: Meta<typeof ReactTeamPage>;
+export default meta;
+type Story = StoryObj<typeof ReactTeamPage>;
+export declare const Default: Story;
+export declare const ARS: Story;
+export declare const AVL: Story;
+export declare const BHA: Story;
+export declare const BUR: Story;
+export declare const CHE: Story;
+export declare const CRY: Story;
+export declare const FUL: Story;
+export declare const LEE: Story;
+export declare const LEI: Story;
+export declare const LIV: Story;
+export declare const MCI: Story;
+export declare const MUN: Story;
+export declare const NEW: Story;
+export declare const SHE: Story;
+export declare const SOU: Story;
+export declare const TOT: Story;
+export declare const WIG: Story;
+export declare const WHU: Story;
+export declare const WOL: Story;
+export declare const PSG: Story;
+export declare const ACM: Story;
+export declare const BAR: Story;
+export declare const FCB: Story;
+export declare const JUV: Story;
+export declare const BVB: Story;
+export declare const CAG: Story;
+export declare const MON: Story;
+export declare const INT: Story;

package/lib/stories/ReactTeamPage.stories.js

@@ -0,0 +1,289 @@
+import { ReactTeamPage } from './ReactTeamPage';
+const meta = {
+    title: 'React Examples',
+    component: ReactTeamPage,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        shirtText: 'SJ JS',
+        shirtColor: '#008800',
+        sleeveColor: '#008800',
+        textColor: '#fff',
+    },
+};
+export const ARS = {
+    args: {
+        shirtText: 'Emirates',
+        shirtColor: '#f00000',
+        sleeveColor: '#fff',
+        shirtStyle: 'checkered',
+        shirtStyleColor: '#dc0001',
+        textColor: '#fff',
+    },
+};
+export const AVL = {
+    args: {
+        shirtText: 'CAZOO',
+        shirtColor: '#670e36',
+        sleeveColor: '#94bee5',
+        shirtStyle: 'plain',
+        textColor: '#fff',
+    },
+};
+export const BHA = {
+    args: {
+        shirtText: 'AMERICAN',
+        shirtColor: '#398ae7',
+        sleeveColor: '#398ae7',
+        shirtStyle: 'striped-thin',
+        shirtStyleColor: '#fff',
+        textColor: '#fff',
+    },
+};
+export const BUR = {
+    args: {
+        shirtText: ' #|# ',
+        shirtColor: '#81204c',
+        sleeveColor: '#8bd3f5',
+        textColor: '#fff',
+    },
+};
+export const CHE = {
+    args: {
+        shirtText: '3',
+        shirtColor: '#001489',
+        sleeveColor: '#001489',
+        shirtStyle: 'plain',
+        textColor: '#fff',
+    },
+};
+export const CRY = {
+    args: {
+        shirtText: 'W88',
+        shirtColor: '#014a97',
+        sleeveColor: '#014a97',
+        shirtStyle: 'striped',
+        shirtStyleColor: '#ff362b',
+        textColor: '#fff',
+    },
+};
+export const FUL = {
+    args: {
+        shirtText: 'BETVICTOR',
+        shirtColor: '#fff',
+        sleeveColor: '#333',
+        shirtStyle: 'plain',
+        textColor: '#222',
+    },
+};
+export const LEE = {
+    args: {
+        shirtText: 'SBOTOP',
+        shirtColor: '#ffffff',
+        sleeveColor: '#ffffff',
+        shirtStyle: 'plain',
+        textColor: '#1d4189',
+    },
+};
+export const LEI = {
+    args: {
+        shirtText: 'THAILAND',
+        shirtColor: '#003090',
+        sleeveColor: '#003090',
+        shirtStyle: 'plain',
+        textColor: '#fefefe',
+    },
+};
+export const LIV = {
+    args: {
+        shirtText: 'Standard &',
+        shirtColor: '#e31b23',
+        sleeveColor: '#e31b23',
+        shirtStyle: 'plain',
+        textColor: '#fff',
+    },
+};
+export const MCI = {
+    args: {
+        shirtText: 'ETIHAD',
+        shirtColor: '#98c5e9',
+        sleeveColor: '#98c5e9',
+        shirtStyle: 'plain',
+        textColor: '#00285e',
+    },
+};
+export const MUN = {
+    args: {
+        shirtText: ' CHEVROLET ',
+        shirtColor: '#c70101',
+        sleeveColor: '#c70101',
+        shirtStyle: 'plain',
+        textColor: '#fed500',
+    },
+};
+export const NEW = {
+    args: {
+        shirtText: 'FUN88',
+        shirtColor: '#fff',
+        sleeveColor: '#333',
+        shirtStyle: 'striped',
+        shirtStyleColor: '#111',
+        textColor: '#00bcf6',
+    },
+};
+export const SHE = {
+    args: {
+        shirtText: '## USG',
+        shirtColor: '#fff',
+        sleeveColor: '#fff',
+        shirtStyle: 'striped-thick',
+        shirtStyleColor: '#e30613',
+        textColor: '#111',
+    },
+};
+export const SOU = {
+    args: {
+        shirtText: 'Sportsbet',
+        shirtColor: '#ff0028',
+        sleeveColor: '#ff0028',
+        shirtStyle: 'single-band',
+        shirtStyleColor: '#fff',
+        textColor: '#111',
+        shirtStyleDirection: 'diagonal-left',
+    },
+};
+export const TOT = {
+    args: {
+        shirtText: 'AIA',
+        shirtColor: '#fff',
+        sleeveColor: '#0a225c',
+        shirtStyle: 'plain',
+        textColor: '#d31145',
+    },
+};
+export const WIG = {
+    args: {
+        shirtText: 'ideal',
+        shirtColor: '#fff',
+        sleeveColor: '#002f68',
+        shirtStyle: 'striped',
+        shirtStyleColor: '#002f68',
+        textColor: '#fff',
+        textBackgroundColor: '#002f68',
+    },
+};
+export const WHU = {
+    args: {
+        shirtText: 'betWay',
+        shirtColor: '#7d2b3a',
+        sleeveColor: '#59b3e4',
+        shirtStyle: 'plain',
+        textColor: '#fff',
+    },
+};
+export const WOL = {
+    args: {
+        shirtText: 'FiT|#',
+        shirtColor: '#fdb913',
+        sleeveColor: '#333',
+        shirtStyle: 'plain',
+        textColor: '#222',
+    },
+};
+export const PSG = {
+    args: {
+        shirtText: ' All ',
+        shirtColor: '#00234a',
+        sleeveColor: '#00234a',
+        shirtStyle: 'single-band',
+        shirtStyleColor: '#cc1339',
+        textColor: '#fff',
+        shirtStyleDirection: 'vertical',
+    },
+};
+export const ACM = {
+    args: {
+        shirtText: 'Emirates',
+        shirtColor: '#df061b',
+        sleeveColor: '#444',
+        shirtStyle: 'striped',
+        shirtStyleColor: '#222',
+        textColor: '#fff',
+    },
+};
+export const BAR = {
+    args: {
+        shirtText: 'Rakuten',
+        shirtColor: '#081868',
+        sleeveColor: '#081868',
+        shirtStyle: 'striped-thick',
+        shirtStyleColor: '#84112b',
+        textColor: '#fff',
+    },
+};
+export const FCB = {
+    args: {
+        shirtText: '-T--- ',
+        shirtColor: '#d1122e',
+        sleeveColor: '#d1122e',
+        shirtStyle: 'plain',
+        textColor: '#fff',
+    },
+};
+export const JUV = {
+    args: {
+        shirtText: 'Jeep',
+        shirtColor: '#fff',
+        sleeveColor: '#fff',
+        shirtStyle: 'striped',
+        shirtStyleColor: '#222',
+        textColor: '#e1ceaf',
+    },
+};
+export const BVB = {
+    args: {
+        shirtText: ' 1&1 ',
+        shirtColor: '#f6ea32',
+        sleeveColor: '#f6ea32',
+        shirtStyle: 'dashed',
+        shirtStyleColor: '#222',
+        shirtStyleDirection: 'diagonal-right',
+        textColor: '#fff',
+        textBackgroundColor: '#333',
+    },
+};
+export const CAG = {
+    args: {
+        shirtText: '+ Inchusa',
+        shirtColor: '#e4343b',
+        sleeveColor: '#fff',
+        shirtStyle: 'two-color',
+        shirtStyleColor: '#1d2c47',
+        textColor: '#fff',
+    },
+};
+export const MON = {
+    args: {
+        shirtText: ' FEDCOM ',
+        shirtColor: '#fff',
+        sleeveColor: '#fff',
+        shirtStyle: 'two-color',
+        shirtStyleColor: '#e53236',
+        shirtStyleDirection: 'diagonal-left',
+        textColor: '#fff',
+    },
+};
+export const INT = {
+    args: {
+        shirtText: 'PIRELI',
+        shirtColor: '#1756ca',
+        sleeveColor: '#1756ca',
+        shirtStyle: 'waves',
+        shirtStyleColor: '#222',
+        textColor: '#fff',
+    },
+};

package/lib/types/index.d.ts

@@ -0,0 +1,13 @@
+export interface DrawSoccerJerseyProps {
+    shirtText: string;
+    textColor: string;
+    textOutlineColor?: string;
+    textBackgroundColor?: string;
+    shirtColor: string;
+    sleeveColor: string;
+    shirtStyle: 'plain' | 'two-color' | 'striped' | 'striped-thin' | 'striped-thick' | 'waves' | 'checkered' | 'hoops' | 'single-band' | 'dashed';
+    shirtStyleColor?: string;
+    shirtStyleDirection?: ('diagonal-right' | 'diagonal-left' | 'horizontal' | 'vertical');
+    isBack?: boolean;
+    shirtWidth?: number;
+}

package/lib/types/index.js

@@ -0,0 +1 @@
+export {};

package/lib/utils/draw-soccer-jersey.d.ts

@@ -0,0 +1,30 @@
+import { DrawSoccerJerseyProps } from '../types';
+/**
+ *
+ * @param {object} specs Specifications of the soccer jersey.
+ * @param {string} specs.shirtText The text to be displayed on the shirt.
+ *  Recommended 3 letter team initials
+ * @param  {string} specs.textColor The color (HTML Color Code) for the
+ * text displayed on the shirt
+ * @param  {string} specs.textOutlineColor Optional. The outline color (HTML Color Code) for the
+ * text displayed on the shirt
+ * @param  {string} specs.textBackgroundColor Optional. The background color (HTML Color Code) for the
+ * text displayed on the shirt
+ * @param  {string} specs.shirtColor The main color (HTML Color Code) of
+ * the shirt.
+ * @param  {string} specs.sleeveColor The color (HTML Color Code) of the shirt
+ *  sleeves;
+ * @param  {string} specs.shirtStyle The Style of the shirt (torso region).
+ * Supports "plain", "two-color", "striped", "striped-thin","striped-thick","checkered",
+ *  "hoops","single-band", "waves", "dashed";
+ * @param {string}  specs.shirtStyleColor The color (HTML Color Code) of
+ * used for the shirt style.
+ * @param  {string} specs.shirtStyleDirection The style of the single band.
+ *  Required when using the "single-band" shirt style. Supports
+ * "diagonal-right", "diagonal-left","horizontal", "vertical"
+ * @param {boolean} specs.isBack Set to true to draw the shirt from the
+ *  back (different neck shape, no badges). Defaults to false.
+ * @return {string} A data URL ready for direct use as src attribute
+ *  on <img />
+ */
+export default function drawSoccerJersey({ shirtText, textColor, textOutlineColor, textBackgroundColor, shirtColor, sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack, shirtWidth, }: DrawSoccerJerseyProps): string;