Swapped Webpack for ts compiler, this should help with the nextjs win…

…dow issues since you wont have to import code that references window useWindowSize isn't imported

.vscode/settings.json

@@ -1,12 +1,4 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "peacock.color": "#fd9d5a",
-  "workbench.colorCustomizations": {
-    "sash.hoverBorder": "#febb8c",
-    "statusBar.background": "#fd9d5a",
-    "statusBar.foreground": "#15202b",
-    "statusBarItem.hoverBackground": "#fc7f28",
-    "statusBarItem.remoteBackground": "#fd9d5a",
-    "statusBarItem.remoteForeground": "#15202b"
-  }
+  "peacock.color": "#fd9d5a"
 }

jest.config.ts

@@ -0,0 +1,7 @@
+import type {Config} from 'jest';
+
+const config: Config = {
+  verbose: true,
+};
+
+export default config;

package.json

@@ -2,19 +2,20 @@
   "name": "@g-loot/react-tournament-brackets",
   "version": "1.0.0",
   "description": "A react component to visualize bracket leaderboards",
-  "main": "dist/bundle.js",
+  "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "webpack --config scripts/webpack.config.js",
+    "build": "rimraf dist && tsc && tsc-alias",
     "dev": "start-storybook -p 4442",
     "start": "start-storybook -p $PORT -h 0.0.0.0",
     "build-storybook": "build-storybook -o devapp-build",
     "test": "jest --verbose false",
     "lint": "eslint \"src/**/*.js\" \"src/**/*.jsx\"",
-    "format": "eslint --fix \"src/**/*.js\" \"src/**/*.jsx\""
+    "format": "eslint --fix \"src/**/*.js\" \"src/**/*.jsx\"",
+    "create-test-lib": "npm pack"
   },
   "author": "Omar ElGaml",
   "license": "ISC",
@@ -24,6 +25,9 @@
     "react-svg-pan-zoom": "^3.10.0",
     "styled-components": "^4.1.3"
   },
+  "dependencies": {
+    "deepmerge": "^4.2.2"
+  },
   "devDependencies": {
     "@babel/core": "^7.12.3",
     "@babel/plugin-transform-runtime": "^7.12.1",
@@ -42,7 +46,6 @@
     "babel-plugin-module-resolver": "^4.1.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.6.0",
-    "deepmerge": "^4.2.2",
     "eslint": "^8.34.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.6.0",
@@ -67,6 +70,7 @@
     "style-loader": "^1.2.1",
     "styled-components": "^4.1.3",
     "ts-loader": "^8.2.0",
+    "tsc-alias": "^1.8.8",
     "typescript": "^4.3.4",
     "url-loader": "^4.1.0",
     "webpack": "^4.43.0",

scripts/webpack.config.js

@@ -54,6 +54,7 @@ module.exports = {
     filename: 'bundle.js',
     library: '@g-loot/react-tournament-brackets',
     libraryTarget: 'umd',
+    globalObject: 'this'
   },
   externals: {
     'styled-components': {

src/bracket-double/double-elim-bracket.tsx

@@ -4,7 +4,7 @@ import { generatePreviousRound } from 'Core/match-functions';
 import { calculateSVGDimensions } from 'Core/calculate-svg-dimensions';
 import { MatchContextProvider } from 'Core/match-context';
 
-import { DoubleElimLeaderboardProps, Match } from '../types';
+import { DoubleElimLeaderboardProps, MatchType } from '../types';
 import { defaultStyle, getCalculatedStyles } from '../settings';
 
 import defaultTheme from '../themes/themes';
@@ -15,9 +15,9 @@ import RoundHeaders from './round-headers';
 import FinalGame from './final-game';
 import ExtraFinal from './extra-final';
 
-function findTheFinals(matches: { upper: Match[]; lower: Match[] }): {
-  convergingMatch: Match;
-  finalsArray: Match[];
+function findTheFinals(matches: { upper: MatchType[]; lower: MatchType[] }): {
+  convergingMatch: MatchType;
+  finalsArray: MatchType[];
 } {
   const isFinalInUpper = matches.upper.some(match => !match.nextMatchId);
   const isFinalInLower = matches.lower.some(match => !match.nextMatchId);
@@ -91,9 +91,9 @@ const DoubleEliminationBracket = ({
   const hasMultipleFinals = finalsArray?.length > 1;
 
   const generateColumn = (
-    matchesColumn: Match[],
-    listOfMatches: Match[]
-  ): Match[][] => {
+    matchesColumn: MatchType[],
+    listOfMatches: MatchType[]
+  ): MatchType[][] => {
     const previousMatchesColumn = generatePreviousRound(
       matchesColumn,
       listOfMatches
@@ -107,7 +107,10 @@ const DoubleEliminationBracket = ({
     }
     return [previousMatchesColumn];
   };
-  const generate2DBracketArray = (final: Match, listOfMatches: Match[]) => {
+  const generate2DBracketArray = (
+    final: MatchType,
+    listOfMatches: MatchType[]
+  ) => {
     return final
       ? [...generateColumn([final], listOfMatches), []].filter(
           arr => arr.length > 0

src/bracket-double/round-headers.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import RoundHeader from 'Components/round-header';
-import { ComputedOptions } from '../types';
+import { ComputedOptionsType } from '../types';
 import { calculatePositionOfMatchLowerBracket } from './calculate-match-position';
 
 function RoundHeaders({
@@ -14,7 +14,7 @@ function RoundHeaders({
   },
 }: {
   numOfRounds: number;
-  calculatedStyles: ComputedOptions;
+  calculatedStyles: ComputedOptionsType;
 }) {
   return (
     <>

src/bracket-single/single-elim-bracket.tsx

@@ -6,7 +6,7 @@ import { MatchContextProvider } from 'Core/match-context';
 import MatchWrapper from 'Core/match-wrapper';
 import RoundHeader from 'Components/round-header';
 import { getPreviousMatches } from 'Core/match-functions';
-import { Match, SingleElimLeaderboardProps } from '../types';
+import { MatchType, SingleElimLeaderboardProps } from '../types';
 import { defaultStyle, getCalculatedStyles } from '../settings';
 import { calculatePositionOfMatch } from './calculate-match-position';
 
@@ -43,8 +43,8 @@ const SingleEliminationBracket = ({
 
   const lastGame = matches.find(match => !match.nextMatchId);
 
-  const generateColumn = (matchesColumn: Match[]): Match[][] => {
-    const previousMatchesColumn = matchesColumn.reduce<Match[]>(
+  const generateColumn = (matchesColumn: MatchType[]): MatchType[][] => {
+    const previousMatchesColumn = matchesColumn.reduce<MatchType[]>(
       (result, match) => {
         return [
           ...result,
@@ -61,7 +61,7 @@ const SingleEliminationBracket = ({
     }
     return [previousMatchesColumn];
   };
-  const generate2DBracketArray = (final: Match) => {
+  const generate2DBracketArray = (final: MatchType) => {
     return final
       ? [...generateColumn([final]), [final]].filter(arr => arr.length > 0)
       : [];

src/components/round-header.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Options } from '../types';
+import { OptionsType } from '../types';
 
 export interface RoundHeaderProps {
   x: number;
   y?: number;
   width: number;
-  roundHeader: Options['roundHeader'];
+  roundHeader: OptionsType['roundHeader'];
   canvasPadding: number;
   numOfRounds: number;
   tournamentRoundText: string;

src/hooks/use-window-size.ts

@@ -10,13 +10,13 @@ const useIsomorphicLayoutEffect =
 function useWindowSize() {
   const [size, setSize] = useState([0, 0]);
   useIsomorphicLayoutEffect(() => {
-    if (typeof window === 'undefined') return;
+    if (typeof global.window === 'undefined') return;
     function updateSize() {
-      setSize([window.innerWidth, window.innerHeight]);
+      setSize([global.window.innerWidth, window.innerHeight]);
     }
-    window.addEventListener('resize', updateSize);
+    global.window.addEventListener('resize', updateSize);
     updateSize();
-    return () => window.removeEventListener('resize', updateSize);
+    return () => global.window.removeEventListener('resize', updateSize);
   }, []);
   return size;
 }