Merge pull request #57 from g-loot/feature/theme-roundheaders

Themeable round headers
g-loot · Jun 11, 2023 · 608ddd7 · 608ddd7 · github-actions · Jun 11, 2023
2 parents 2211c95 + 9d1eec4
commit 608ddd7
Show file tree

Hide file tree

Showing 11 changed files with 52 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 (
     <g>
-      <rect
+      <Rect
         x={x}
         y={y + canvasPadding}
         width={width}
@@ -33,7 +42,7 @@ export default function RoundHeader({
         rx="3"
         ry="3"
       />
-      <text
+      <Text
         x={x + width / 2}
         y={y + canvasPadding + roundHeader.height / 2}
         style={{
@@ -56,7 +65,7 @@ export default function RoundHeader({
           `Round ${tournamentRoundText}`}
         {roundHeader.roundTextGenerator &&
           roundHeader.roundTextGenerator(columnIndex + 1, numOfRounds)}
-      </text>
+      </Text>
     </g>
   );
 }
diff --git 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
@@ -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
@@ -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;