diff --git a/.eslintrc.js b/.eslintrc.js index 58d1564..af0f90e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -6,7 +6,6 @@ module.exports = { extends: [ 'airbnb', 'plugin:prettier/recommended', - 'prettier/react', 'plugin:storybook/recommended', 'plugin:testing-library/dom', ], diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index a64a50a..0f22b13 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -1,4 +1,4 @@ -name: Publish npm package +name: Run unit tests and a test build on: push: branches: @@ -24,6 +24,7 @@ jobs: - run: npm ci env: NODE_AUTH_TOKEN: ${{ secrets.GH_PACKAGE_TOKEN }} + - run: npm run build - name: run unit tests diff --git a/src/bracket-custom-match.stories.jsx b/src/bracket-custom-match.stories.jsx index 9c2f715..f0ac68b 100644 --- a/src/bracket-custom-match.stories.jsx +++ b/src/bracket-custom-match.stories.jsx @@ -9,7 +9,7 @@ export default { component: BracketLeaderboard, }; -export const CustomMatchBracket = () => { +export function CustomMatchBracket() { const [width, height] = useWindowSize(); const finalWidth = Math.max(width - 50, 500); const finalHeight = Math.max(height - 100, 500); @@ -84,4 +84,4 @@ export const CustomMatchBracket = () => { )} /> ); -}; +} diff --git a/src/bracket-double/double-elim.stories.jsx b/src/bracket-double/double-elim.stories.jsx index eb15b1c..e794ac8 100644 --- a/src/bracket-double/double-elim.stories.jsx +++ b/src/bracket-double/double-elim.stories.jsx @@ -24,7 +24,7 @@ const StyledSvgViewer = styled(SvgViewer).attrs(props => { }; })``; -export const DoubleElimination = () => { +export function DoubleElimination() { const [width, height] = useWindowSize(); const finalWidth = Math.max(width - 50, 500); const finalHeight = Math.max(height - 100, 500); @@ -39,9 +39,9 @@ export const DoubleElimination = () => { )} /> ); -}; +} -export const DoubleEliminationBig = () => { +export function DoubleEliminationBig() { const [width, height] = useWindowSize(); const finalWidth = Math.max(width - 50, 500); const finalHeight = Math.max(height - 100, 500); @@ -56,9 +56,9 @@ export const DoubleEliminationBig = () => { )} /> ); -}; +} -export const DoubleEliminationNoParty = () => { +export function DoubleEliminationNoParty() { const [width, height] = useWindowSize(); const finalWidth = Math.max(width - 50, 500); const finalHeight = Math.max(height - 100, 500); @@ -73,9 +73,9 @@ export const DoubleEliminationNoParty = () => { )} /> ); -}; +} -export const DoubleEliminationDoubleFinalsLastGamesInLower = () => { +export function DoubleEliminationDoubleFinalsLastGamesInLower() { const [width, height] = useWindowSize(); const finalWidth = Math.max(width - 50, 500); const finalHeight = Math.max(height - 100, 500); @@ -90,8 +90,8 @@ export const DoubleEliminationDoubleFinalsLastGamesInLower = () => { )} /> ); -}; -export const DoubleEliminationDoubleFinalsLastGamesInUpper = () => { +} +export function DoubleEliminationDoubleFinalsLastGamesInUpper() { const [width, height] = useWindowSize(); const finalWidth = Math.max(width - 50, 500); const finalHeight = Math.max(height - 100, 500); @@ -106,4 +106,4 @@ export const DoubleEliminationDoubleFinalsLastGamesInUpper = () => { )} /> ); -}; +} diff --git a/src/bracket-double/round-headers.tsx b/src/bracket-double/round-headers.tsx index e49aa7e..ba61570 100644 --- a/src/bracket-double/round-headers.tsx +++ b/src/bracket-double/round-headers.tsx @@ -3,7 +3,7 @@ import RoundHeader from 'Components/round-header'; import { ComputedOptions } from '../types'; import { calculatePositionOfMatchLowerBracket } from './calculate-match-position'; -const RoundHeaders = ({ +function RoundHeaders({ numOfRounds, calculatedStyles: { canvasPadding, @@ -15,7 +15,7 @@ const RoundHeaders = ({ }: { numOfRounds: number; calculatedStyles: ComputedOptions; -}) => { +}) { return ( <> {[...new Array(numOfRounds)].map((matchesColumn, columnIndex) => { @@ -43,5 +43,6 @@ const RoundHeaders = ({ })} ); -}; +} + export default RoundHeaders; diff --git a/src/bracket-single/single-elim-bracket.stories.jsx b/src/bracket-single/single-elim-bracket.stories.jsx index fc5e0c4..4fc1710 100644 --- a/src/bracket-single/single-elim-bracket.stories.jsx +++ b/src/bracket-single/single-elim-bracket.stories.jsx @@ -4,6 +4,7 @@ import React from 'react'; import useWindowSize from 'Hooks/use-window-size'; import styled from 'styled-components'; import Match from 'Components/match'; +import { createTheme } from 'Themes/themes'; import SingleElimBracketLeaderboard from './single-elim-bracket'; import SvgViewer from '../svg-viewer'; import { @@ -25,7 +26,7 @@ const StyledSvgViewer = styled(SvgViewer).attrs(props => { }; })``; -const Template = ({ ...args }) => { +function Template({ ...args }) { const [width, height] = useWindowSize(); const finalWidth = Math.max(width - 50, 500); const finalHeight = Math.max(height - 100, 500); @@ -40,7 +41,7 @@ const Template = ({ ...args }) => { {...args} /> ); -}; +} export const Bracket = Template.bind({}); Bracket.args = { @@ -67,10 +68,12 @@ export const SoloWalkOverBracketCustomHeaders = Template.bind({}); SoloWalkOverBracketCustomHeaders.args = { matches: soloWalkover, matchComponent: Match, + theme: createTheme({ fontFamily: 'monospace' }), options: { style: { roundHeader: { - fontFamily: 'monospace', + fontColor: undefined, + fontFamily: undefined, roundTextGenerator: (currentRoundNumber, roundsTotalNumber) => { if (currentRoundNumber === roundsTotalNumber) { return 'Grand Top'; @@ -79,7 +82,7 @@ SoloWalkOverBracketCustomHeaders.args = { return 'Semi Top'; } if (currentRoundNumber < roundsTotalNumber - 1) { - return 'Top ' + currentRoundNumber; + return `Top ${currentRoundNumber}`; } }, }, diff --git a/src/bracket-themes.stories.jsx b/src/bracket-themes.stories.jsx index 8305b9b..37ff6cc 100644 --- a/src/bracket-themes.stories.jsx +++ b/src/bracket-themes.stories.jsx @@ -12,7 +12,7 @@ export default { component: SingleEliminationBracket, }; -export const GlootThemeBracket = () => { +export function GlootThemeBracket() { const [width, height] = useWindowSize(); const finalWidth = Math.max(width - 50, 500); const finalHeight = Math.max(height - 100, 500); @@ -45,9 +45,9 @@ export const GlootThemeBracket = () => { )} /> ); -}; +} -export const WhiteThemeBracket = () => { +export function WhiteThemeBracket() { const [width, height] = useWindowSize(); const finalWidth = Math.max(width - 50, 500); const finalHeight = Math.max(height - 100, 500); @@ -80,4 +80,4 @@ export const WhiteThemeBracket = () => { )} /> ); -}; +} diff --git a/src/components/round-header.tsx b/src/components/round-header.tsx index 9e7011a..db99eba 100644 --- a/src/components/round-header.tsx +++ b/src/components/round-header.tsx @@ -1,7 +1,8 @@ import React from 'react'; +import styled from 'styled-components'; import { Options } from '../types'; -export type RoundHeaderProps = { +export interface RoundHeaderProps { x: number; y?: number; width: number; @@ -10,7 +11,15 @@ export type RoundHeaderProps = { numOfRounds: number; tournamentRoundText: string; columnIndex: number; -}; +} + +const Text = styled.text` + font-family: ${({ theme }) => theme.fontFamily}; + color: ${({ theme }) => theme.textColor.highlighted}; +`; +const Rect = styled.rect.attrs(({ theme }) => ({ + fill: theme.roundHeaders.background, +}))``; export default function RoundHeader({ x, @@ -24,7 +33,7 @@ export default function RoundHeader({ }: RoundHeaderProps) { return ( - - + ); } diff --git a/src/settings.ts b/src/settings.ts index 9bc6785..249b93c 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -16,7 +16,7 @@ export const defaultStyle: Options = { fontColor: 'white', backgroundColor: 'rgb(47, 54, 72)', fontFamily: '"Roboto", "Arial", "Helvetica", "sans-serif"', - roundTextGenerator: undefined + roundTextGenerator: undefined, }, roundSeparatorWidth: 24, lineInfo: { diff --git a/src/themes/themes.ts b/src/themes/themes.ts index ab76d61..acb093a 100644 --- a/src/themes/themes.ts +++ b/src/themes/themes.ts @@ -6,6 +6,9 @@ const defaultTheme: Theme = { transitionTimingFunction: 'cubic-bezier(0, 0.92, 0.77, 0.99)', disabledColor: '#5D6371', + roundHeaders: { + background: '#2F3648', + }, matchBackground: { wonColor: '#1D2232', lostColor: '#141822', diff --git a/src/types.tsx b/src/types.tsx index db328f9..cd649d6 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -64,7 +64,7 @@ export type Options = { fontFamily?: string; roundTextGenerator?: ( currentRoundNumber: number, - roundsTotalNumber: number, + roundsTotalNumber: number ) => string | undefined; }; @@ -152,6 +152,10 @@ export type Theme = { disabledColor: string; + roundHeaders: { + background: string; + }; + matchBackground: { wonColor: string; lostColor: string;