From 04345381b6c11bf68913f5977d93d837c154ad41 Mon Sep 17 00:00:00 2001 From: FinnIckler Date: Wed, 14 Jun 2023 12:59:02 +0200 Subject: [PATCH 01/10] added sidebar component --- .../workflows/npm-publish-github-packages.yml | 10 +- .../workflows/npm-publish-npm-packages.yml | 36 ++ .storybook/preview.ts | 2 +- src/components/CubingIcon/CubingIcon.tsx | 5 +- src/components/CubingIcon/cubingicon.scss | 6 + src/components/FlagIcon/index.ts | 1 + .../NonInteractiveTable.stories.tsx | 68 ++-- .../NonInteractiveTable.tsx | 40 ++- src/components/Sidebar/Sidebar.stories.tsx | 152 +++++++++ src/components/Sidebar/Sidebar.tsx | 129 +++++++ src/components/Sidebar/index.ts | 1 + src/components/Sidebar/sidebar.scss | 318 ++++++++++++++++++ src/components/index.ts | 3 + src/global.scss | 29 +- 14 files changed, 721 insertions(+), 79 deletions(-) create mode 100644 .github/workflows/npm-publish-npm-packages.yml create mode 100644 src/components/FlagIcon/index.ts create mode 100644 src/components/Sidebar/Sidebar.stories.tsx create mode 100644 src/components/Sidebar/Sidebar.tsx create mode 100644 src/components/Sidebar/index.ts create mode 100644 src/components/Sidebar/sidebar.scss diff --git a/.github/workflows/npm-publish-github-packages.yml b/.github/workflows/npm-publish-github-packages.yml index be78aa4..286ef22 100644 --- a/.github/workflows/npm-publish-github-packages.yml +++ b/.github/workflows/npm-publish-github-packages.yml @@ -4,8 +4,8 @@ name: Node.js Package on: - release: - types: [created] + push: + branches: [development] jobs: build: @@ -29,8 +29,8 @@ jobs: - uses: actions/setup-node@v3 with: node-version: 18 - registry-url: https://registry.npmjs.org + registry-url: https://npm.pkg.github.com - run: npm ci - - run: npm publish --access public + - run: npm publish env: - NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_KEY}} + NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} diff --git a/.github/workflows/npm-publish-npm-packages.yml b/.github/workflows/npm-publish-npm-packages.yml new file mode 100644 index 0000000..be78aa4 --- /dev/null +++ b/.github/workflows/npm-publish-npm-packages.yml @@ -0,0 +1,36 @@ +# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created +# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages + +name: Node.js Package + +on: + release: + types: [created] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 18 + - run: npm ci + - run: npm test + + publish-gpr: + needs: build + runs-on: ubuntu-latest + permissions: + contents: read + packages: write + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 18 + registry-url: https://registry.npmjs.org + - run: npm ci + - run: npm publish --access public + env: + NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_KEY}} diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 8a16ed0..cbe8835 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,6 +1,6 @@ import type { Preview } from '@storybook/react' -import '../src/global.scss' import 'fomantic-ui-css/semantic.css' +import '../src/global.scss' const preview: Preview = { parameters: { actions: { argTypesRegex: '^on[A-Z].*' }, diff --git a/src/components/CubingIcon/CubingIcon.tsx b/src/components/CubingIcon/CubingIcon.tsx index 42a17a6..956165b 100644 --- a/src/components/CubingIcon/CubingIcon.tsx +++ b/src/components/CubingIcon/CubingIcon.tsx @@ -17,8 +17,9 @@ export default function CubingIcon({ }: CubingIconProps) { return ( ) } diff --git a/src/components/CubingIcon/cubingicon.scss b/src/components/CubingIcon/cubingicon.scss index 74d4b4b..ab04030 100644 --- a/src/components/CubingIcon/cubingicon.scss +++ b/src/components/CubingIcon/cubingicon.scss @@ -181,3 +181,9 @@ .cubing-icon-5x { font-size: 5em !important; } +.cubing-icon-selected{ + color: rgb(0, 0, 0) +} +.cubing-icon-un-selected{ + color: rgb(204, 204, 204) +} \ No newline at end of file diff --git a/src/components/FlagIcon/index.ts b/src/components/FlagIcon/index.ts new file mode 100644 index 0000000..8b5fc3b --- /dev/null +++ b/src/components/FlagIcon/index.ts @@ -0,0 +1 @@ +export { default } from './FlagIcon' diff --git a/src/components/NonInteractiveTable/NonInteractiveTable.stories.tsx b/src/components/NonInteractiveTable/NonInteractiveTable.stories.tsx index f542a0f..e84f227 100644 --- a/src/components/NonInteractiveTable/NonInteractiveTable.stories.tsx +++ b/src/components/NonInteractiveTable/NonInteractiveTable.stories.tsx @@ -16,32 +16,32 @@ export const Competitors: Story = { // More on args: https://storybook.js.org/docs/react/writing-stories/args args: { header: [ - { title: 'Name' }, - { title: 'Citizen of' }, - { title: '333', icon: true }, - { title: '777', icon: true }, - { title: 'Total' }, + { text: 'Name' }, + { text: 'Citizen of' }, + { text: '333', cubingIcon: true }, + { text: '777', cubingIcon: true }, + { text: 'Total' }, ], rows: [ [ { - title: 'AJ Blair', + text: 'AJ Blair', link: 'https://www.worldcubeassociation.org/persons/2009BLAI01', }, - { title: 'United States', flag: 'us' }, - { title: '333', icon: true }, - { title: '' }, - { title: '1' }, + { text: 'United States', flag: 'us' }, + { text: '333', cubingIcon: true }, + { text: '' }, + { text: '1' }, ], [ { - title: 'Rebecca Hebert', + text: 'Rebecca Hebert', link: 'https://www.worldcubeassociation.org/persons/2023HEBE02', }, - { title: 'United States', flag: 'us' }, - { title: '333', icon: true }, - { title: '777', icon: true }, - { title: '2' }, + { text: 'United States', flag: 'us' }, + { text: '333', cubingIcon: true }, + { text: '777', cubingIcon: true }, + { text: '2' }, ], ], footer: [ @@ -58,32 +58,40 @@ export const Rankings: Story = { // More on args: https://storybook.js.org/docs/react/writing-stories/args args: { header: [ - { title: '#' }, - { title: 'Name' }, - { title: 'Result' }, - { title: 'Citizen of' }, - { title: 'Competition' }, + { text: '#' }, + { text: 'Name' }, + { text: 'Result' }, + { text: 'Citizen of' }, + { text: 'Competition' }, ], rows: [ [ - { title: '1' }, + { text: '1' }, { - title: 'Max Park', + text: 'Max Park', link: 'https://worldcubeassociation.org/persons/2012PARK03', }, - { title: '3.13' }, - { title: 'United States', flag: 'us' }, - { title: 'Pride in Long Beach 2023', flag: 'us' }, + { text: '3.13' }, + { text: 'United States', flag: 'us' }, + { + text: 'Pride in Long Beach 2023', + flag: 'us', + link: 'https://www.worldcubeassociation.org/competitions/PrideInLongBeach2023', + }, ], [ - { title: '2' }, + { text: '2' }, { - title: 'Yusheng Du (杜宇生)', + text: 'Yusheng Du (杜宇生)', link: 'https://www.worldcubeassociation.org/persons/2015DUYU01', }, - { title: '3.47' }, - { title: 'China', flag: 'cn' }, - { title: 'Wuhu Open 2018', flag: 'cn' }, + { text: '3.47' }, + { text: 'China', flag: 'cn' }, + { + text: 'Wuhu Open 2018', + flag: 'cn', + link: 'https://www.worldcubeassociation.org/competitions/WuhuOpen2018', + }, ], ], footer: [], diff --git a/src/components/NonInteractiveTable/NonInteractiveTable.tsx b/src/components/NonInteractiveTable/NonInteractiveTable.tsx index 6d2ecf6..1258174 100644 --- a/src/components/NonInteractiveTable/NonInteractiveTable.tsx +++ b/src/components/NonInteractiveTable/NonInteractiveTable.tsx @@ -2,23 +2,23 @@ import './noninteractivetable.scss' import { EventId } from '@wca/helpers' import React from 'react' import CubingIcon from '../CubingIcon' -import FlagIcon from '../FlagIcon/FlagIcon' +import FlagIcon from '../FlagIcon' -interface ListItem { - title: string +interface TableItem { + text: string cssClass?: string flag?: string - icon?: boolean + cubingIcon?: boolean link?: string } interface HeaderItem { - title: string - icon?: boolean + text: string + cubingIcon?: boolean } interface ListProps { - rows: ListItem[][] + rows: TableItem[][] header: HeaderItem[] footer: string[] loading: boolean @@ -35,30 +35,28 @@ export default function NonInteractiveTable({
{loading ? ( -
- Loading, please wait... -
+
Loading, please wait...
) : (
-
- )} -
-
- + return loading ? ( +
Loading, please wait...
+ ) : ( + + + + {header.map((item) => ( + + {item.cubingIcon ? ( + + ) : ( + item.text + )} + + ))} + + + + {rows.length > 0 ? ( + rows.map((items) => ( + + {items.map((item) => ( + + {item.flag ? : ''} + {item.cubingIcon ? ( + + ) : // eslint-disable-next-line unicorn/no-nested-ternary + item.link ? ( + {item.text} + ) : ( + item.text + )} + + ))} + + )) + ) : ( + + No matching records found + + )} + + {footer.length > 0 ? ( + + + {footer.map((item) => ( + {item} + ))} + + + ) : ( + '' + )} +
) } From 8b0e46011c21b78e21b74086d3128076fdb754e2 Mon Sep 17 00:00:00 2001 From: Finn Ickler Date: Wed, 21 Jun 2023 11:36:44 +0200 Subject: [PATCH 07/10] Fixed React Router links --- package-lock.json | 4 +- src/components/Header/Dropdown.tsx | 4 +- src/components/Sidebar/Sidebar.tsx | 128 +++++++++++++++++++++-------- 3 files changed, 99 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index a6f4a58..82c7958 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@thewca/wca-components", - "version": "0.4.1", + "version": "0.4.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@thewca/wca-components", - "version": "0.4.1", + "version": "0.4.2", "license": "GPL-3.0-or-later", "devDependencies": { "@babel/preset-env": "^7.22.4", diff --git a/src/components/Header/Dropdown.tsx b/src/components/Header/Dropdown.tsx index 55572ab..968de17 100644 --- a/src/components/Header/Dropdown.tsx +++ b/src/components/Header/Dropdown.tsx @@ -54,7 +54,9 @@ export default function Dropdown({ return (
  • {reactRoute ? ( - + + {title} + ) : ( {title} diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index 47909ef..30b978b 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -3,6 +3,7 @@ import { EventId } from '@wca/helpers' import React, { Fragment, useState } from 'react' import CubingIcon from '../CubingIcon' import UiIcon from '../UiIcon' +import { Link } from 'react-router-dom' interface Label { text: string @@ -16,6 +17,7 @@ interface SidebarSubMenu { interface SidebarSubMenuItem { path: string + reactRoute?: boolean cubingIcon?: boolean iconName: string text: string @@ -23,6 +25,7 @@ interface SidebarSubMenuItem { interface SidebarItem { path: string + reactRoute?: boolean title: string iconName: string rightLabel?: Label @@ -62,16 +65,27 @@ export default function Sidebar({ items }: SidebarProps) { {collapsed.includes(item.path) ? (
    - {items.map((subMenuItem) => ( - - - {subMenuItem.text} - - ))} + {items.map((subMenuItem) => + subMenuItem.reactRoute ? ( + + + {subMenuItem.text} + + ) : ( + + + {subMenuItem.text} + + ) + )}
    ) : ( '' @@ -82,37 +96,83 @@ export default function Sidebar({ items }: SidebarProps) { return ( - - - {item.title} - + {item.reactRoute ? ( + + + {item.title} + + ) : ( + + + {item.title} + + )} +
    - {items.map((subMenuItem) => ( - - {subMenuItem.cubingIcon ? ( - - ) : ( - subMenuItem.text - )} - - ))} + {items.map((subMenuItem) => + subMenuItem.reactRoute ? ( + + {subMenuItem.cubingIcon ? ( + + ) : ( + subMenuItem.text + )} + + ) : ( + + {subMenuItem.cubingIcon ? ( + + ) : ( + subMenuItem.text + )} + + ) + )}
    ) } - return ( + return item.reactRoute ? ( + + + {item.title} + {item.rightLabel ? ( + + {item.rightLabel.text} + + ) : ( + '' + )} + + ) : ( Date: Wed, 21 Jun 2023 11:37:48 +0200 Subject: [PATCH 08/10] version bump --- package.json | 2 +- src/components/Sidebar/Sidebar.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 974d165..8b60952 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@thewca/wca-components", - "version": "0.4.2", + "version": "0.4.3", "description": "The WCA React Component Library", "repository": { "type": "git", diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index 30b978b..1523bb7 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -1,9 +1,9 @@ import './sidebar.scss' import { EventId } from '@wca/helpers' import React, { Fragment, useState } from 'react' +import { Link } from 'react-router-dom' import CubingIcon from '../CubingIcon' import UiIcon from '../UiIcon' -import { Link } from 'react-router-dom' interface Label { text: string From 4575a6fc979973922d41f52728f9fdc2f810d765 Mon Sep 17 00:00:00 2001 From: Finn Ickler Date: Wed, 21 Jun 2023 12:33:12 +0200 Subject: [PATCH 09/10] Added Tests --- src/components/FlagIcon/FlagIcon.test.tsx | 9 ++++ src/components/Footer/Footer.test.tsx | 18 +++++++ src/components/Header/Header.test.tsx | 27 ++++++++++ .../NonInteractiveTable.test.tsx | 50 +++++++++++++++++++ .../NonInteractiveTable.tsx | 7 +-- src/components/Sidebar/Sidebar.test.tsx | 20 ++++++++ src/components/UiIcon/UiIcon.test.tsx | 9 ++++ 7 files changed, 135 insertions(+), 5 deletions(-) create mode 100644 src/components/FlagIcon/FlagIcon.test.tsx create mode 100644 src/components/Footer/Footer.test.tsx create mode 100644 src/components/Header/Header.test.tsx create mode 100644 src/components/NonInteractiveTable/NonInteractiveTable.test.tsx create mode 100644 src/components/Sidebar/Sidebar.test.tsx create mode 100644 src/components/UiIcon/UiIcon.test.tsx diff --git a/src/components/FlagIcon/FlagIcon.test.tsx b/src/components/FlagIcon/FlagIcon.test.tsx new file mode 100644 index 0000000..c962d13 --- /dev/null +++ b/src/components/FlagIcon/FlagIcon.test.tsx @@ -0,0 +1,9 @@ +import { render } from '@testing-library/react' +import React from 'react' +import { FlagIcon } from '../index' + +describe('FlagIcon', () => { + test('renders the FlagIcon component', () => { + render() + }) +}) diff --git a/src/components/Footer/Footer.test.tsx b/src/components/Footer/Footer.test.tsx new file mode 100644 index 0000000..2069cca --- /dev/null +++ b/src/components/Footer/Footer.test.tsx @@ -0,0 +1,18 @@ +import { render } from '@testing-library/react' +import React from 'react' +import { Footer } from '../index' + +describe('Footer', () => { + test('renders the Footer component', () => { + render( +