g-loot / react-tournament-brackets

React component library for displaying bracket leaderboards
https://sleepy-kare-d8538d.netlify.app/?path=/story/components-bracket--bracket
GNU Lesser General Public License v2.1
220 stars 69 forks source link

Some type issues. Unable to render. #16

Closed amilz closed 2 years ago

amilz commented 2 years ago

thanks for repo. looks great. not sure if i'm doing something wrong, or what, but on install and using your example code i run into a number of TS errors:

Type '{ matches: any; matchComponent: ({ bottomHovered, bottomParty, bottomText, bottomWon, match, onMatchClick, onMouseEnter, onMouseLeave, onPartyClick, topHovered, topParty, topText, topWon, }: MatchComponentProps) => Element; svgWrapper: ({ children, ...props }: { bracketWidth: number; bracketHeight: number; startAt: ...' is missing the following properties from type 'SingleElimLeaderboardProps': currentRound, onMatchClick, onPartyClick, theme, option

also used your examples for matches, and a number of type issues: Type 'null' is not assignable to type 'number'.

Shenato commented 2 years ago

Could you provide a snippet of the data you pass to the component's API so I can reproduce the issue on my end? 😄

Shenato commented 2 years ago

Could it be a different tsconfig than the one I use in the project perhaps? could you provide me with your tsconfig so I can use it and fix whatever TS errors pop up?

amilz commented 2 years ago

Hey sorry for the delay. here's my TSconfig. Perhaps it's an issue with Match declaration? or the Games sample file (I'm using: https://github.com/g-loot/react-tournament-brackets/blob/master/src/mock-data/simple-data.ts)? for example, the games file has state: 'RUNNING', but Match.State does not include it: state: 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | 'SCHEDULED';

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}
Shenato commented 2 years ago

the state shouldn't be an issue I believe, I'll test out the project with that tsconfig and come back to you

Shenato commented 2 years ago

Extended the types to work better in strict mode now! Should be fixed with this PR

Shenato commented 2 years ago

I hadn't noticed the library's type-definitions don't work with some of the data i provided in strict-mode, thanks for reporting that 👍

Shenato commented 2 years ago

It's been merged now, check if it fixed your issue 😄

amilz commented 2 years ago

nice job-that worked. thx for the responsiveness. excited to give this a try.