From f73644dbaf8d671c611e7d1c9d8d131b7f97e912 Mon Sep 17 00:00:00 2001 From: Shenato Date: Fri, 27 Oct 2023 21:24:53 +0200 Subject: [PATCH] Swapped Webpack for ts compiler, this should help with the nextjs window issues since you wont have to import code that references window useWindowSize isn't imported --- .vscode/settings.json | 10 +- index.ts | 15 --- jest.config.ts | 7 ++ package-lock.json | 104 ++++++++++++++++++ package.json | 12 +- scripts/webpack.config.js | 1 + src/bracket-double/double-elim-bracket.tsx | 19 ++-- src/bracket-double/round-headers.tsx | 4 +- src/bracket-single/single-elim-bracket.tsx | 8 +- src/components/round-header.tsx | 4 +- src/hooks/use-window-size.ts | 8 +- src/index.ts | 29 +++++ src/mock-data/data-double-last-game-lower.ts | 4 +- ...-double-last-game-upper-double-playoffs.ts | 4 +- src/mock-data/data-double-no-show.ts | 4 +- src/mock-data/simple-data-double.ts | 4 +- src/mock-data/simple-data.ts | 8 +- src/mock-data/simple-double-full.ts | 4 +- src/mock-data/solo-walkover.ts | 4 +- src/settings.ts | 8 +- src/themes/themes.ts | 6 +- src/types.tsx | 38 +++---- src/utils/{numbers.js => numbers.ts} | 0 src/utils/{string.js => string.ts} | 0 tsconfig.json | 10 +- 25 files changed, 225 insertions(+), 90 deletions(-) delete mode 100644 index.ts create mode 100644 jest.config.ts create mode 100644 src/index.ts rename src/utils/{numbers.js => numbers.ts} (100%) rename src/utils/{string.js => string.ts} (100%) diff --git a/.vscode/settings.json b/.vscode/settings.json index 6cdeb17..6580abd 100644 --- a/.vscode/settings.json +++ b/.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" } diff --git a/index.ts b/index.ts deleted file mode 100644 index 1feb804..0000000 --- a/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -import SingleEliminationBracket from './src/bracket-single/single-elim-bracket'; -import DoubleEliminationBracket from './src/bracket-double/double-elim-bracket'; -import Match from './src/components/match'; -import { MATCH_STATES } from './src/core/match-states'; -import SVGViewer from './src/svg-viewer'; -import { createTheme } from './src/themes/themes'; - -export { - SingleEliminationBracket, - DoubleEliminationBracket, - Match, - MATCH_STATES, - SVGViewer, - createTheme, -}; diff --git a/jest.config.ts b/jest.config.ts new file mode 100644 index 0000000..e58a20a --- /dev/null +++ b/jest.config.ts @@ -0,0 +1,7 @@ +import type {Config} from 'jest'; + +const config: Config = { + verbose: true, +}; + +export default config; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index a06fdce..24b23b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,6 +51,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", @@ -18417,6 +18418,19 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, + "node_modules/mylas": { + "version": "2.1.13", + "resolved": "https://registry.npmjs.org/mylas/-/mylas-2.1.13.tgz", + "integrity": "sha512-+MrqnJRtxdF+xngFfUUkIMQrUUL0KsxbADUkn23Z/4ibGg192Q+z+CQyiYwvWTsYjJygmMR8+w3ZDa98Zh6ESg==", + "dev": true, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/raouldeheer" + } + }, "node_modules/nan": { "version": "2.17.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz", @@ -19619,6 +19633,18 @@ "node": ">=6" } }, + "node_modules/plimit-lit": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/plimit-lit/-/plimit-lit-1.6.1.tgz", + "integrity": "sha512-B7+VDyb8Tl6oMJT9oSO2CW8XC/T4UcJGrwOVoNGwOQsQYhlpfajmrMj5xeejqaASq3V/EqThyOeATEOMuSEXiA==", + "dev": true, + "dependencies": { + "queue-lit": "^1.5.1" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/pnp-webpack-plugin": { "version": "1.6.4", "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz", @@ -20110,6 +20136,15 @@ "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==", "dev": true }, + "node_modules/queue-lit": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/queue-lit/-/queue-lit-1.5.2.tgz", + "integrity": "sha512-tLc36IOPeMAubu8BkW8YDBV+WyIgKlYU7zUNs0J5Vk9skSZ4JfGlPOqplP0aHdfv7HL0B2Pg6nwiq60Qc6M2Hw==", + "dev": true, + "engines": { + "node": ">=12" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -23461,6 +23496,32 @@ } } }, + "node_modules/tsc-alias": { + "version": "1.8.8", + "resolved": "https://registry.npmjs.org/tsc-alias/-/tsc-alias-1.8.8.tgz", + "integrity": "sha512-OYUOd2wl0H858NvABWr/BoSKNERw3N9GTi3rHPK8Iv4O1UyUXIrTTOAZNHsjlVpXFOhpJBVARI1s+rzwLivN3Q==", + "dev": true, + "dependencies": { + "chokidar": "^3.5.3", + "commander": "^9.0.0", + "globby": "^11.0.4", + "mylas": "^2.1.9", + "normalize-path": "^3.0.0", + "plimit-lit": "^1.2.6" + }, + "bin": { + "tsc-alias": "dist/bin/index.js" + } + }, + "node_modules/tsc-alias/node_modules/commander": { + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", + "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", + "dev": true, + "engines": { + "node": "^12.20.0 || >=14" + } + }, "node_modules/tsconfig-paths": { "version": "3.14.2", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz", @@ -39328,6 +39389,12 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, + "mylas": { + "version": "2.1.13", + "resolved": "https://registry.npmjs.org/mylas/-/mylas-2.1.13.tgz", + "integrity": "sha512-+MrqnJRtxdF+xngFfUUkIMQrUUL0KsxbADUkn23Z/4ibGg192Q+z+CQyiYwvWTsYjJygmMR8+w3ZDa98Zh6ESg==", + "dev": true + }, "nan": { "version": "2.17.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz", @@ -40270,6 +40337,15 @@ } } }, + "plimit-lit": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/plimit-lit/-/plimit-lit-1.6.1.tgz", + "integrity": "sha512-B7+VDyb8Tl6oMJT9oSO2CW8XC/T4UcJGrwOVoNGwOQsQYhlpfajmrMj5xeejqaASq3V/EqThyOeATEOMuSEXiA==", + "dev": true, + "requires": { + "queue-lit": "^1.5.1" + } + }, "pnp-webpack-plugin": { "version": "1.6.4", "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz", @@ -40654,6 +40730,12 @@ "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==", "dev": true }, + "queue-lit": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/queue-lit/-/queue-lit-1.5.2.tgz", + "integrity": "sha512-tLc36IOPeMAubu8BkW8YDBV+WyIgKlYU7zUNs0J5Vk9skSZ4JfGlPOqplP0aHdfv7HL0B2Pg6nwiq60Qc6M2Hw==", + "dev": true + }, "queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -43284,6 +43366,28 @@ "integrity": "sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==", "dev": true }, + "tsc-alias": { + "version": "1.8.8", + "resolved": "https://registry.npmjs.org/tsc-alias/-/tsc-alias-1.8.8.tgz", + "integrity": "sha512-OYUOd2wl0H858NvABWr/BoSKNERw3N9GTi3rHPK8Iv4O1UyUXIrTTOAZNHsjlVpXFOhpJBVARI1s+rzwLivN3Q==", + "dev": true, + "requires": { + "chokidar": "^3.5.3", + "commander": "^9.0.0", + "globby": "^11.0.4", + "mylas": "^2.1.9", + "normalize-path": "^3.0.0", + "plimit-lit": "^1.2.6" + }, + "dependencies": { + "commander": { + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", + "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", + "dev": true + } + } + }, "tsconfig-paths": { "version": "3.14.2", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz", diff --git a/package.json b/package.json index 2eecce9..315a342 100644 --- a/package.json +++ b/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", diff --git a/scripts/webpack.config.js b/scripts/webpack.config.js index 980ec2f..369a14d 100644 --- a/scripts/webpack.config.js +++ b/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': { diff --git a/src/bracket-double/double-elim-bracket.tsx b/src/bracket-double/double-elim-bracket.tsx index 5724b19..43bf74e 100644 --- a/src/bracket-double/double-elim-bracket.tsx +++ b/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 diff --git a/src/bracket-double/round-headers.tsx b/src/bracket-double/round-headers.tsx index ba61570..54c9c5d 100644 --- a/src/bracket-double/round-headers.tsx +++ b/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 ( <> diff --git a/src/bracket-single/single-elim-bracket.tsx b/src/bracket-single/single-elim-bracket.tsx index 8779dc8..5cd7be6 100644 --- a/src/bracket-single/single-elim-bracket.tsx +++ b/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( + const generateColumn = (matchesColumn: MatchType[]): MatchType[][] => { + const previousMatchesColumn = matchesColumn.reduce( (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) : []; diff --git a/src/components/round-header.tsx b/src/components/round-header.tsx index db99eba..e19b9a9 100644 --- a/src/components/round-header.tsx +++ b/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; diff --git a/src/hooks/use-window-size.ts b/src/hooks/use-window-size.ts index 0635c28..51015f9 100644 --- a/src/hooks/use-window-size.ts +++ b/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; } diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..f0b7806 --- /dev/null +++ b/src/index.ts @@ -0,0 +1,29 @@ +import SingleEliminationBracket from './bracket-single/single-elim-bracket'; +import DoubleEliminationBracket from './bracket-double/double-elim-bracket'; +import Match from './components/match'; +import { MATCH_STATES } from './core/match-states'; +import SVGViewer from './svg-viewer'; +import { createTheme } from './themes/themes'; + +export { + BracketLeaderboardProps, + CommonTreeProps, + ComputedOptionsType, + DoubleElimLeaderboardProps, + MatchComponentProps, + MatchType, + OptionsType, + ParticipantType, + SingleElimLeaderboardProps, + SvgViewerProps, + ThemeType, +} from './types'; + +export { + SingleEliminationBracket, + DoubleEliminationBracket, + Match, + MATCH_STATES, + SVGViewer, + createTheme, +}; diff --git a/src/mock-data/data-double-last-game-lower.ts b/src/mock-data/data-double-last-game-lower.ts index b3ba561..f3e9551 100644 --- a/src/mock-data/data-double-last-game-lower.ts +++ b/src/mock-data/data-double-last-game-lower.ts @@ -1,6 +1,6 @@ -import { Match } from '../types'; +import { MatchType } from '../types'; -const dataDoubleLastGameLower: { upper: Match[]; lower: Match[] } = { +const dataDoubleLastGameLower: { upper: MatchType[]; lower: MatchType[] } = { upper: [ { id: 1, diff --git a/src/mock-data/data-double-last-game-upper-double-playoffs.ts b/src/mock-data/data-double-last-game-upper-double-playoffs.ts index 142d443..7713168 100644 --- a/src/mock-data/data-double-last-game-upper-double-playoffs.ts +++ b/src/mock-data/data-double-last-game-upper-double-playoffs.ts @@ -1,6 +1,6 @@ -import { Match } from '../types'; +import { MatchType } from '../types'; -const dataDoublePlayoffs: { upper: Match[]; lower: Match[] } = { +const dataDoublePlayoffs: { upper: MatchType[]; lower: MatchType[] } = { upper: [ { id: 'WB R1 M1', diff --git a/src/mock-data/data-double-no-show.ts b/src/mock-data/data-double-no-show.ts index a62014c..263475f 100644 --- a/src/mock-data/data-double-no-show.ts +++ b/src/mock-data/data-double-no-show.ts @@ -1,6 +1,6 @@ -import { Match } from '../types'; +import { MatchType } from '../types'; -const dataDoubleNoShow: { upper: Match[]; lower: Match[] } = { +const dataDoubleNoShow: { upper: MatchType[]; lower: MatchType[] } = { upper: [ { id: 261255, diff --git a/src/mock-data/simple-data-double.ts b/src/mock-data/simple-data-double.ts index fc46d65..3f2254d 100644 --- a/src/mock-data/simple-data-double.ts +++ b/src/mock-data/simple-data-double.ts @@ -1,6 +1,6 @@ -import { Match } from '../types'; +import { MatchType } from '../types'; -const simpleDataDouble: { upper: Match[]; lower: Match[] } = { +const simpleDataDouble: { upper: MatchType[]; lower: MatchType[] } = { upper: [ { id: 20231, diff --git a/src/mock-data/simple-data.ts b/src/mock-data/simple-data.ts index 5447fc5..740c0c9 100644 --- a/src/mock-data/simple-data.ts +++ b/src/mock-data/simple-data.ts @@ -1,6 +1,6 @@ -import { Match } from '../types'; +import { MatchType } from '../types'; -export const walkOverData: Match[] = [ +export const walkOverData: MatchType[] = [ { id: 260005, name: 'Final - Match', @@ -317,7 +317,7 @@ export const walkOverData: Match[] = [ }, ]; -export const simpleSmallBracket: Match[] = [ +export const simpleSmallBracket: MatchType[] = [ { id: 19753, nextMatchId: null, @@ -437,7 +437,7 @@ export const simpleSmallBracket: Match[] = [ }, ]; -export const simpleBracket: Match[] = [ +export const simpleBracket: MatchType[] = [ { id: 19874, name: 'Final - Match', diff --git a/src/mock-data/simple-double-full.ts b/src/mock-data/simple-double-full.ts index 2bd5f87..5a16487 100644 --- a/src/mock-data/simple-double-full.ts +++ b/src/mock-data/simple-double-full.ts @@ -1,6 +1,6 @@ -import { Match } from '../types'; +import { MatchType } from '../types'; -const simpleDoubleFull: { upper: Match[]; lower: Match[] } = { +const simpleDoubleFull: { upper: MatchType[]; lower: MatchType[] } = { upper: [ { id: 20512, diff --git a/src/mock-data/solo-walkover.ts b/src/mock-data/solo-walkover.ts index 1d4d619..e20ea73 100644 --- a/src/mock-data/solo-walkover.ts +++ b/src/mock-data/solo-walkover.ts @@ -1,6 +1,6 @@ -import { Match } from '../types'; +import { MatchType } from '../types'; -const soloWalkover: Match[] = [ +const soloWalkover: MatchType[] = [ { id: 20464, name: 'Semi Final - Match 1', diff --git a/src/settings.ts b/src/settings.ts index 249b93c..b5fbc4a 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -1,6 +1,6 @@ -import { ComputedOptions, Options } from './types'; +import { ComputedOptionsType, OptionsType } from './types'; -export const defaultStyle: Options = { +export const defaultStyle: OptionsType = { width: 300, boxHeight: 110, canvasPadding: 25, @@ -28,7 +28,9 @@ export const defaultStyle: Options = { lostByNoShowText: 'NS', }; -export const getCalculatedStyles = (style = defaultStyle): ComputedOptions => { +export const getCalculatedStyles = ( + style = defaultStyle +): ComputedOptionsType => { const { boxHeight, width, spaceBetweenColumns, spaceBetweenRows } = style; const columnWidth = width + spaceBetweenColumns; const rowHeight = boxHeight + spaceBetweenRows; diff --git a/src/themes/themes.ts b/src/themes/themes.ts index acb093a..61eae37 100644 --- a/src/themes/themes.ts +++ b/src/themes/themes.ts @@ -1,7 +1,7 @@ import merge from 'deepmerge'; -import { Theme } from '../types'; +import { ThemeType } from '../types'; -const defaultTheme: Theme = { +const defaultTheme: ThemeType = { fontFamily: '"Roboto", "Arial", "Helvetica", "sans-serif"', transitionTimingFunction: 'cubic-bezier(0, 0.92, 0.77, 0.99)', @@ -36,7 +36,7 @@ const defaultTheme: Theme = { canvasBackground: '#0B0D13', }; -export function createTheme(customTheme?: Theme | T): Theme { +export function createTheme(customTheme?: ThemeType | T): ThemeType { return merge(defaultTheme, customTheme || {}); } diff --git a/src/types.tsx b/src/types.tsx index cd649d6..9b6475e 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -1,7 +1,7 @@ import React, { ReactElement } from 'react'; // import { Props as SVGPanZoomProps } from 'react-svg-pan-zoom'; -export type Participant = { +export type ParticipantType = { id: string | number; isWinner?: boolean; @@ -15,7 +15,7 @@ export type Participant = { [key: string]: any; }; -export type Match = { +export type MatchType = { id: number | string; /** Link to this match. While onClick() can be used, providing an href @@ -34,12 +34,12 @@ export type Match = { state: 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | string; - participants: Participant[]; + participants: ParticipantType[]; [key: string]: any; }; -export type Options = { +export type OptionsType = { width?: number; boxHeight?: number; @@ -82,7 +82,7 @@ export type Options = { lostByNoShowText?: string; }; -export type ComputedOptions = Options & { +export type ComputedOptionsType = OptionsType & { rowHeight?: number; columnWidth?: number; @@ -105,24 +105,24 @@ export type SvgViewerProps = { }; export type MatchComponentProps = { - match: Match; + match: MatchType; onMatchClick: (args: { - match: Match; + match: MatchType; topWon: boolean; bottomWon: boolean; event: React.MouseEvent; }) => void; - onPartyClick: (party: Participant, partyWon: boolean) => void; + onPartyClick: (party: ParticipantType, partyWon: boolean) => void; onMouseEnter: (partyId: string | number) => void; onMouseLeave: () => void; - topParty: Participant; + topParty: ParticipantType; - bottomParty: Participant; + bottomParty: ParticipantType; topWon: boolean; @@ -138,14 +138,14 @@ export type MatchComponentProps = { connectorColor?: string; - computedStyles?: ComputedOptions; + computedStyles?: ComputedOptionsType; teamNameFallback: string; - resultFallback: (participant: Participant) => string; + resultFallback: (participant: ParticipantType) => string; }; -export type Theme = { +export type ThemeType = { fontFamily: string; transitionTimingFunction: string; @@ -195,9 +195,9 @@ export type CommonTreeProps = { children: ReactElement; }) => React.ReactElement; - theme?: Theme; + theme?: ThemeType; - options?: { style: Options }; + options?: { style: OptionsType }; }; export type BracketLeaderboardProps = CommonTreeProps & { @@ -206,18 +206,18 @@ export type BracketLeaderboardProps = CommonTreeProps & { currentRound?: string; onMatchClick?: (args: { - match: Match; + match: MatchType; topWon: boolean; bottomWon: boolean; }) => void; - onPartyClick?: (party: Participant, partyWon: boolean) => void; + onPartyClick?: (party: ParticipantType, partyWon: boolean) => void; }; export type SingleElimLeaderboardProps = BracketLeaderboardProps & { - matches: Match[]; + matches: MatchType[]; }; export type DoubleElimLeaderboardProps = BracketLeaderboardProps & { - matches: { upper: Match[]; lower: Match[] }; + matches: { upper: MatchType[]; lower: MatchType[] }; }; diff --git a/src/utils/numbers.js b/src/utils/numbers.ts similarity index 100% rename from src/utils/numbers.js rename to src/utils/numbers.ts diff --git a/src/utils/string.js b/src/utils/string.ts similarity index 100% rename from src/utils/string.js rename to src/utils/string.ts diff --git a/tsconfig.json b/tsconfig.json index e3444a8..02293c7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,14 @@ { "include": ["./src/**/*"], - "exclude": ["node_modules", "dist", "devapp-build"], + "exclude": [ + "node_modules", + "dist", + "devapp-build", + "**/*.stories.jsx", + "**/*.stories.tsx", + "**/*.stories.js", + "**/*.stories.ts" + ], "compilerOptions": { "baseUrl": "src", "moduleResolution": "node",