games-database/games-frontend-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Merge branch 'react-19.2.8' into main

Browse Source 
React 19 + Chakra UI v3 + router v7 migration with v2 look restoration:
deps, theme system, forms/selects, nav and dashboard chrome, details,
auth screens, dashboard hover fix, menu hover treatment, double-chevron
pagination.
This commit is contained in:
john-okeefe
2026-09-06 12:28:07 -04:00
parent 406c508de0 2d12372ac4
commit 3e0385d5d9
69 changed files with 2086 additions and 997 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bun.lockb
BIN
View File
Binary file not shown.
package.json
+31 -35
View File
@@ -3,31 +3,27 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@chakra-ui/icons": "^2.1.1",
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@hookstate/core": "^4.0.1",
"@chakra-ui/react": "^3.37.0",
"@emotion/react": "^11.14.0",
"@hookstate/core": "^4.0.2",
"@hookstate/localstored": "^4.0.2",
"axios": "1.7.5",
"axios": "^1.20.0",
"bson-objectid": "^2.0.4",
"chakra-react-select": "^4.9.1",
"chakra-ui-contextmenu": "^1.0.5",
"framer-motion": "^11.3.30",
"interweave": "^13.1.0",
"jodit-react": "^4.1.2",
"js-base64": "^3.7.7",
"react": "^18.3.1",
"react-device-detect": "^2.2.3",
"react-dom": "^18.3.1",
"react-hook-form": "^7.53.0",
"react-icons": "^5.3.0",
"chakra-react-select": "^6.1.3",
"interweave": "^13.1.1",
"jodit-react": "^5.5.3",
"js-base64": "^3.9.3",
"next-themes": "^0.4.6",
"react": "^19.2.8",
"react-dom": "^19.2.8",
"react-hook-form": "^7.87.0",
"react-icons": "^5.7.0",
"react-rating": "^2.0.5",
"react-responsive-carousel": "^3.2.23",
"react-router-dom": "^6.26.1",
"react-select": "^5.8.0",
"react-toastify": "^10.0.5",
"web-vitals": "^4.2.3"
"react-router-dom": "^7.18.3",
"react-select": "^5.10.2",
"react-toastify": "^11.1.0",
"web-vitals": "^6.2.1"
},
"scripts": {
"start": "bunx --bun vite",
@@ -42,8 +38,8 @@
]
},
"resolutions": {
"@types/react": "18.2.21",
"@types/react-dom": "18.2.7"
"@types/react": "19.2.18",
"@types/react-dom": "19.2.7"
},
"browserslist": {
"production": [
@@ -58,18 +54,18 @@
]
},
"devDependencies": {
"@chakra-ui/cli": "^2.4.1",
"@hookstate/devtools": "^4.0.1",
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.5.12",
"@types/node": "^22.5.1",
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7",
"@chakra-ui/cli": "^3.37.0",
"@hookstate/devtools": "^4.0.3",
"@testing-library/jest-dom": "^7.0.1",
"@testing-library/react": "^16.3.3",
"@testing-library/user-event": "^14.6.7",
"@types/jest": "^30.0.0",
"@types/node": "^26.4.1",
"@types/react": "^19.2.18",
"@types/react-dom": "^19.2.7",
"@types/react-table": "^7.7.20",
"@vitejs/plugin-react": "^4.3.1",
"typescript": "^5.5.4",
"vite": "^5.4.2"
"@vitejs/plugin-react": "^6.1.1",
"typescript": "^5.9.3",
"vite": "^8.2.2"
}
}
src/App.test.tsx
+13 -5
View File
@@ -1,9 +1,17 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
import { MemoryRouter } from 'react-router-dom';
import { Provider } from './components/ui/provider';
import Home from './components/Home';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
test('renders welcome message', () => {
render(
<Provider>
<MemoryRouter>
<Home />
</MemoryRouter>
</Provider>
);
const heading = screen.getByText(/Welcome to your Games Database/i);
expect(heading).toBeInTheDocument();
});
src/App.tsx
+5 -2
View File
@@ -23,7 +23,8 @@ import ForgotPassword from './components/authComponents/ForgotPassword'
import ResetPassword from './components/authComponents/ResetPassword'
import UserProfile from './components/userComponents/UserProfile'
import EditUser from './components/userComponents/EditUser'
import {Box, useColorMode} from "@chakra-ui/react";
import {Box} from "@chakra-ui/react";
import {useColorMode} from "./components/ui/color-mode";
import globalRouter from "./api/globalRouter";
function App() {
@@ -44,8 +45,10 @@ function App() {
if (!appLoad) <LoadingModal />
useEffect(() => {
if(loadedPreferences.get().theme !== colorMode) {
const preferredTheme = loadedPreferences.get().theme
if(preferredTheme && preferredTheme !== colorMode) {
localStorage.removeItem('chakra-ui-color-mode')
localStorage.removeItem('theme')
toggleColorMode()
}
}, [loadedPreferences.get().theme]);
src/components/ActiveFilters.tsx
+12 -14
View File
@@ -1,7 +1,8 @@
import React from 'react'
import { useHookstate } from '@hookstate/core'
import { gameDashboardState } from '../stateManagement/gameState'
import { Flex, Stack, HStack, Link, Spacer, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react'
import { Flex, Stack, HStack, Link, Spacer } from '@chakra-ui/react'
import {Tag} from './ui/tag'
import getWithFilters from '../componentUtils/getWithFilters'
import {
loadingState,
@@ -53,7 +54,7 @@ const ActiveFilters = () => {
}} direction={{
base: 'column',
md: 'row'
}} spacing={4}>
}} gap={4}>
{searchParams.length >= 1 && (
<>
<h2>Search: </h2>
@@ -61,11 +62,8 @@ const ActiveFilters = () => {
size={'md'}
borderRadius="full"
variant="solid"
colorScheme="blue"
>
<TagLabel><Link
onMouseDown={() => setSearchModalOpen.set(true)}>{searchParams}</Link></TagLabel>
<TagCloseButton onMouseDown={async () => {
colorPalette="blue"
onClose={async () => {
const newSearchParams = ""
ChangeActiveFilterHeader(filters, newSearchParams, setShowFiltersModuleState)
searchComplete.set(false)
@@ -80,7 +78,9 @@ const ActiveFilters = () => {
useRatingState,
useSteamRatingState,
)
}} />
}}
><Link
onMouseDown={() => setSearchModalOpen.set(true)}>{searchParams}</Link>
</Tag>
</>
)}
@@ -99,22 +99,20 @@ const ActiveFilters = () => {
<>
<HStack key={num}>
<h3 style={{ textTransform: 'capitalize' }}>{filter}</h3>
<HStack spacing={4}>
<HStack gap={4}>
{filters[filter as keyof typeof filters].split(',').map((item: string, index) => (
<Tag
size={'md'}
key={index}
borderRadius="full"
variant="solid"
colorScheme="blue"
>
<TagLabel>{
colorPalette="blue"
onClose={() => removeFilters(filter, item)}
>{
item.includes('lte')
? item.replace('lte', '<= ')
: item.includes('gte') ? item.replace('gte', '>= ')
: item}
</TagLabel>
<TagCloseButton onMouseDown={() => removeFilters(filter, item)} />
</Tag>
))}
</HStack>
src/components/DeleteDialogue.tsx
+26 -33
View File
@@ -3,13 +3,9 @@ import agent from '../api/agent'
import { useNavigate } from 'react-router-dom'
import { Data } from '../models/game'
import {
AlertDialog,
AlertDialogBody,
AlertDialogContent, AlertDialogFooter,
AlertDialogHeader,
AlertDialogOverlay,
Button, Icon, Text
Button, Text
} from '@chakra-ui/react'
import {DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot} from './ui/dialog'
type Props = {
id: string
@@ -44,34 +40,31 @@ export default function DeleteDialogue({
}
}
const cancelRef = useRef(null)
const cancelRef = useRef<HTMLButtonElement | null>(null)
return (
<AlertDialog isOpen={open} leastDestructiveRef={cancelRef} onClose={handleClose}>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize='lg' fontWeight='bold'>Delete?</AlertDialogHeader>
<AlertDialogBody>
Are you sure you would like to delete <strong>{game.title}</strong>?
</AlertDialogBody>
<AlertDialogFooter>
<Button ref={cancelRef} onMouseDown={handleClose}>
<Icon name='remove' mr='1' /> <Text mt='1'>No</Text>
</Button>
<Button
colorScheme='red'
onMouseDown={() => {
deleteGame(id)
}}
ml={3}
autoFocus
>
<Icon name='checkmark' mr='1' /> <Text mt='1'>Yes</Text>
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
<DialogRoot open={open} onOpenChange={(e) => { if (!e.open) handleClose() }} role="alertdialog" initialFocusEl={() => cancelRef.current}>
<DialogContent>
<DialogHeader fontSize='lg' fontWeight='bold'>Delete?</DialogHeader>
<DialogBody>
Are you sure you would like to delete <strong>{game.title}</strong>?
</DialogBody>
<DialogFooter>
<Button ref={cancelRef} onMouseDown={handleClose}>
<Text mt='1'>No</Text>
</Button>
<Button
colorPalette='red'
onMouseDown={() => {
deleteGame(id)
}}
ml={3}
autoFocus
>
<Text mt='1'>Yes</Text>
</Button>
</DialogFooter>
</DialogContent>
</DialogRoot>
)
}
src/components/FilterBar.tsx
+54 -60
View File
@@ -1,17 +1,12 @@
import React, {MutableRefObject, useEffect} from 'react'
import {
Center,
Divider,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerOverlay, Flex,
Separator,
Flex,
Heading, Spacer,
Text,
} from '@chakra-ui/react'
import {DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerHeader, DrawerRoot} from './ui/drawer'
import AdminMode from './authComponents/AdminMode'
import {StateMethods, useHookstate} from '@hookstate/core'
import {tagState} from '../stateManagement/tagState'
@@ -25,7 +20,7 @@ import {
} from '../componentUtils/SelectValues'
import {retrieveTags} from '../componentUtils/retrieveTags'
import {gameDashboardState} from '../stateManagement/gameState'
import {Select} from 'chakra-react-select'
import {Select} from './FixedSelect'
import getWithFilters from '../componentUtils/getWithFilters'
import {loadingState, showFiltersModuleState} from '../stateManagement/loadingState'
import {adminMode} from '../stateManagement/userState'
@@ -99,26 +94,25 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
}
return (
<Drawer
isOpen={filterIsOpen}
placement="right"
onClose={filterOnClose}
finalFocusRef={btnRef}
<DrawerRoot
open={filterIsOpen}
placement="end"
onOpenChange={(e) => { if (!e.open) filterOnClose() }}
finalFocusEl={() => btnRef.current as unknown as HTMLElement}
>
<DrawerOverlay/>
<DrawerContent>
<DrawerCloseButton/>
<DrawerCloseTrigger/>
<DrawerHeader>
<Heading as={'h3'}>Filters</Heading>
</DrawerHeader>
<DrawerBody>
<AdminMode/>
<Divider my={'3'}/>
<Separator borderColor="gray.200" my={'3'}/>
<Center>
<ResetFilterButton/>
</Center>
<Divider my={'3'}/>
<Separator borderColor="gray.200" my={'3'}/>
<Text mb={'1'} fontSize={'xl'}>Series</Text>
<Select
size={'sm'}
@@ -126,13 +120,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="series"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("series", value)
}}
options={tags.series}
/>
<Divider my={'3'}/>
<Separator borderColor="gray.200" my={'3'}/>
<Flex mb={'1'}>
<Text mb={'1'} fontSize={'xl'}>Rating</Text>
<Spacer />
@@ -140,13 +134,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
size={'sm'}
defaultValue={ratingToSelectDefaultValue(useRatingState)}
name="rating"
onChange={(event) => {
onChange={(event: any) => {
if (event === null) return
setRatingState.set(event.value)
}}
options={ratingStateValues}
chakraStyles={{
container: (provided) => ({
container: (provided: any) => ({
...provided,
width: "75px"
})
@@ -158,13 +152,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
defaultValue={filterToSelectDefaultValue("rating")}
isClearable
name="rating"
onChange={(event) => {
onChange={(event: any) => {
if(event === null) return changeFilters("rating", "")
changeFilters("rating", event.value)
}}
options={ratingValues}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Flex mb={'1'}>
<Text mb={'1'} fontSize={'xl'}>Steam Rating</Text>
<Spacer />
@@ -172,13 +166,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
size={'sm'}
defaultValue={ratingToSelectDefaultValue(useSteamRatingState)}
name="steamRating"
onChange={(event) => {
onChange={(event: any) => {
if (event === null) return
setSteamRatingState.set(event.value)
}}
options={ratingStateValues}
chakraStyles={{
container: (provided) => ({
container: (provided: any) => ({
...provided,
width: "75px"
})
@@ -190,13 +184,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
defaultValue={filterToSelectDefaultValue("steamRating")}
isClearable
name="steamRating"
onChange={(event) => {
onChange={(event: any) => {
if(event === null) return changeFilters("steamRating", "")
changeFilters("steamRating", event.value)
}}
options={ratingValues}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Play Status</Text>
<Select
size={'sm'}
@@ -204,13 +198,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="playStatus"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("playStatus", value)
}}
options={playStatusValues}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Genres</Text>
<Select
size={'sm'}
@@ -218,13 +212,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="genre"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("genre", value)
}}
options={tags.genres}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Operating System</Text>
<Select
size={'sm'}
@@ -232,13 +226,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="os"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("os", value)
}}
options={osValues}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Store</Text>
<Select
size={'sm'}
@@ -246,13 +240,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="store"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("store", value)
}}
options={tags.store}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Controller Support</Text>
<Select
size={'sm'}
@@ -260,13 +254,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="controller"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("controller", value)
}}
options={controllerValues}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Developer</Text>
<Select
size={'sm'}
@@ -274,13 +268,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="developer"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("developer", value)
}}
options={tags.developer}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Publisher</Text>
<Select
size={'sm'}
@@ -288,13 +282,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="publisher"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("publisher", value)
}}
options={tags.publisher}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Do you own the Soundtrack?</Text>
<Select
size={'sm'}
@@ -302,13 +296,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="soundtrack"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("soundtrack", value)
}}
options={yesNo}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Does in work on Intel?</Text>
<Select
size={'sm'}
@@ -316,13 +310,13 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="intel"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("intel", value)
}}
options={wineIntelValues}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
<Text mb={'1'} fontSize={'xl'}>Does is work with Wine?</Text>
<Select
size={'sm'}
@@ -330,20 +324,20 @@ function FilterBar({filterIsOpen, filterOnClose, btnRef}: Props) {
isClearable
isMulti
name="wine"
onChange={(event) => {
const value = event.map(a => a.value).join(',')
onChange={(event: any) => {
const value = event.map((a: any) => a.value).join(',')
changeFilters("wine", value)
}}
options={wineIntelValues}
/>
<Divider my={'1'}/>
<Separator borderColor="gray.200" my={'1'}/>
</DrawerBody>
<DrawerFooter>
</DrawerFooter>
</DrawerContent>
</Drawer>
</DrawerRoot>
)
}
src/components/FixedSelect.tsx
+140
View File
@@ -0,0 +1,140 @@
import React from 'react'
import { Select as V6Select, CreatableSelect as V6Creatable } from 'chakra-react-select'
import { useColorModeValue } from './ui/color-mode'
// Shared styling that restores how these selects looked with Chakra v2 /
// chakra-react-select v4 (verified against the v4.9.1 source + old screenshots):
//
// - v4's control border resolved to the outer wrapper's gray.500 edge via
// `borderColor: inherit` (outer Box sets gray.500). v6 paints its own light
// edge (gray.100 in dark mode) on top, producing a double white+gray border.
// Fix universally: single gray.500 border on the control itself, transparent
// bg so wrapper bg shows through, no shadow, no padding so the chevron zone
// sits flush (v4 had padding:0 + overflow:hidden).
// - v4's chevron sat on a grey input-addon zone (gray.100 / whiteAlpha.300),
// flush right with rounded right corners matching the control.
// - v4's indicator separator was a subtle Divider, effectively invisible in
// the old screenshots; v6 hides it by default, so keep it hidden instead of
// rendering a prominent white line.
// - v4 multi-value pills defaulted to gray subtle tags (dark gray pill in dark
// mode), not bright blue. Defaults restored here; ActiveFilters tags pass
// blue explicitly and are unaffected.
function V6IndicatorSeparator() {
return null
}
function useSharedChakraStyles(extra: any) {
const zoneBg = useColorModeValue('gray.100', 'whiteAlpha.300')
const pillBg = useColorModeValue('gray.100', 'whiteAlpha.300')
const pillColor = useColorModeValue('gray.800', 'gray.100')
const optionHoverBg = useColorModeValue('gray.200', 'whiteAlpha.300')
return {
control: (provided: any) => ({
...provided,
borderColor: 'gray.500',
borderWidth: '1px',
borderStyle: 'solid',
background: 'transparent',
boxShadow: 'none',
padding: 0,
overflow: 'hidden',
}),
valueContainer: (provided: any, state: any) => ({
...provided,
paddingTop: '2px',
paddingBottom: '2px',
paddingLeft: state?.selectProps?.size === 'sm' ? '12px' : '16px',
paddingRight: '8px',
}),
indicatorsContainer: (provided: any) => ({
...provided,
padding: 0,
margin: 0,
}),
dropdownIndicator: (provided: any) => ({
...provided,
background: zoneBg,
alignSelf: 'stretch',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: 0,
paddingLeft: '8px',
paddingRight: '8px',
borderWidth: 0,
borderRadius: 0,
borderTopRightRadius: 'md',
borderBottomRightRadius: 'md',
}),
option: (provided: any, state: any) => {
const size = state?.selectProps?.size === 'sm' ? 'sm' : state?.selectProps?.size === 'lg' ? 'lg' : 'md'
const v4 = {
sm: { fontSize: '14px', paddingLeft: '12.8px', paddingRight: '12.8px', paddingTop: '4.8px', paddingBottom: '4.8px' },
md: { fontSize: '16px', paddingLeft: '12.8px', paddingRight: '12.8px', paddingTop: '6.4px', paddingBottom: '6.4px' },
lg: { fontSize: '18px', paddingLeft: '16px', paddingRight: '16px', paddingTop: '8px', paddingBottom: '8px' },
}[size]
return {
...provided,
fontSize: v4.fontSize,
paddingLeft: v4.paddingLeft,
paddingRight: v4.paddingRight,
paddingTop: v4.paddingTop,
paddingBottom: v4.paddingBottom,
// v3 hover uses bg.emphasized/60 — near-invisible on dark surfaces.
// Brighten unselected hover in both modes; keep selected blue.
_highlighted: state?.isSelected
? provided._highlighted
: { bg: optionHoverBg },
}
},
multiValue: (provided: any) => ({
...provided,
background: pillBg,
color: pillColor,
borderRadius: 'md',
margin: '2px',
}),
multiValueLabel: (provided: any) => ({
...provided,
color: pillColor,
}),
multiValueRemove: (provided: any) => ({
...provided,
color: pillColor,
}),
...extra,
}
}
function mergeComponents(extra: any) {
return { IndicatorSeparator: V6IndicatorSeparator, ...extra }
}
export function Select(props: any) {
const { chakraStyles, components, tagColorPalette = 'gray', tagVariant = 'subtle', ...rest } = props
const mergedStyles = useSharedChakraStyles(chakraStyles)
return (
<V6Select
{...rest}
tagColorPalette={tagColorPalette}
tagVariant={tagVariant}
components={mergeComponents(components)}
chakraStyles={mergedStyles}
/>
)
}
export function CreatableSelect(props: any) {
const { chakraStyles, components, tagColorPalette = 'gray', tagVariant = 'subtle', ...rest } = props
const mergedStyles = useSharedChakraStyles(chakraStyles)
return (
<V6Creatable
{...rest}
tagColorPalette={tagColorPalette}
tagVariant={tagVariant}
components={mergeComponents(components)}
chakraStyles={mergedStyles}
/>
)
}
src/components/Footer.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ export default function Footer() {
return (
<Box as='footer' role='contentinfo' mx='auto' maxW='7xl' py='12' px={{ base: '4', md: '8' }}>
<Stack>
<Stack direction="row" spacing="4" align="center" justify="space-between">
<Stack direction="row" gap="4" align="center" justify="space-between">
</Stack>
src/components/GameDetails.tsx
+20 -19
View File
@@ -1,6 +1,6 @@
import React, { useEffect } from 'react'
import agent from '../api/agent'
import { useParams } from 'react-router'
import { useParams } from 'react-router-dom'
import {
Box,
Button,
@@ -12,10 +12,9 @@ import {
Spacer,
Stack,
Text,
useColorModeValue,
useDisclosure,
useMediaQuery,
} from '@chakra-ui/react'
import {useColorModeValue} from './ui/color-mode'
import {useDisclosure, useMediaQuery} from '@chakra-ui/react'
import ImageSlider from './detailsComponents/ImageSlider'
import Summary from './detailsComponents/Summary'
import Features from './detailsComponents/Features'
@@ -26,7 +25,7 @@ import { loadingState } from '../stateManagement/loadingState'
import { ImmutableObject, useHookstate } from '@hookstate/core'
import LoadingModal from './LoadingModal'
import SteamAndDeckLogo from './helperComponents/SteamAndDeckLogo'
import { ExternalLinkIcon } from '@chakra-ui/icons'
import { LuExternalLink } from 'react-icons/lu'
import { Data } from '../models/game'
import SummaryModal from './detailsComponents/SummaryModal'
import SystemRequirementsModal from './detailsComponents/SystemRequirementsModal'
@@ -38,14 +37,14 @@ const GameDetails = () => {
const loaded = loadedState.get()
const { id } = useParams<{ id: string }>()
const bg = useColorModeValue('white', 'gray.700')
const { isOpen: isSummaryOpen, onOpen: onSummaryOpen, onClose: onSummaryClose } = useDisclosure()
const { isOpen: isSystemOpen, onOpen: onSystemOpen, onClose: onSystemClose } = useDisclosure()
const [isSmallerThan768] = useMediaQuery('(max-width: 768px)')
const { open: isSummaryOpen, onOpen: onSummaryOpen, onClose: onSummaryClose } = useDisclosure()
const { open: isSystemOpen, onOpen: onSystemOpen, onClose: onSystemClose } = useDisclosure()
const [isSmallerThan768] = useMediaQuery(['(max-width: 768px)'])
useEffect(() => {
const getGame = async () => {
loadedState.set(false)
return await agent.Games.details(id)
return await agent.Games.details(id!)
}
getGame().then((result) => {
gameState.set(result)
@@ -69,7 +68,7 @@ const GameDetails = () => {
<SystemRequirementsModal isOpen={isSystemOpen} onClose={onSystemClose} game={game} />
: ''}
<Container maxW="container.xl" mt="5">
<Container maxW="1280px" mt="5">
<Flex direction={{ base: 'column', md: 'row' }}>
<Box p={2} alignSelf={{
base: 'center',
@@ -78,25 +77,27 @@ const GameDetails = () => {
<Heading as="h1">{game.title}</Heading>
</Box>
<Spacer />
<Stack spacing={[1, 5]} direction={'row'} alignSelf={{
<Stack gap={[1, 5]} direction={'row'} alignSelf={{
base: 'center',
md: 'end'
}} pb="3">
{game.accessedBy[0].store.includes('Steam') && game.steamId.length > 0 &&
(<ChakraLink href={`steam://run/${game.steamId}`}>
<Button variant={'outline'} colorScheme="blue">
<Button variant={'outline'} colorPalette="blue">
<Flex>
<SteamAndDeckLogo size={'1.5em'} />
<Text mt={'1'} ml={'2'}>
Open with Steam <ExternalLinkIcon pb={'1'} />
Open with Steam <LuExternalLink style={{display: 'inline'}} />
</Text>
</Flex>
</Button>
</ChakraLink>)}
<Button as={Link} to={`/games/${game._id}/edit`} colorScheme="blue">
<Text mt={'1'}>
Edit
</Text>
<Button asChild colorPalette="blue">
<Link to={`/games/${game._id}/edit`}>
<Text mt={'1'}>
Edit
</Text>
</Link>
</Button>
</Stack>
</Flex>
@@ -122,7 +123,7 @@ const GameDetails = () => {
<Box bg={bg} p="5" mt="3" rounded="md">
{isSmallerThan768 ?
<Flex width="100%">
<Button colorScheme='blue' size='lg' width='100%' onMouseDown={onSummaryOpen}>
<Button colorPalette='blue' size='lg' width='100%' onMouseDown={onSummaryOpen}>
About This Game
</Button>
<Spacer />
@@ -138,7 +139,7 @@ const GameDetails = () => {
<Box bg={bg} mt="3" p="5" rounded="md">
{isSmallerThan768 ?
<Flex width="100%">
<Button colorScheme='blue' size='lg' width='100%' onMouseDown={onSystemOpen}>
<Button colorPalette='blue' size='lg' width='100%' onMouseDown={onSystemOpen}>
System Requirements
</Button>
<Spacer />
src/components/GameForm.tsx
+43 -45
View File
@@ -21,17 +21,16 @@ import {
Box,
Button,
Container,
FormControl,
FormLabel,
Flex,
Heading,
InputGroup,
Spacer,
Stack,
Switch,
Text,
useColorModeValue,
} from '@chakra-ui/react'
import {CreatableSelect,} from 'chakra-react-select'
import {Field} from './ui/field'
import {Switch} from './ui/switch'
import {useColorModeValue} from './ui/color-mode'
import {CreatableSelect} from './FixedSelect'
import {adminMode} from '../stateManagement/userState'
import {encode} from 'js-base64'
import SingleFieldInput from './formFields/SingleFieldInput'
@@ -314,63 +313,64 @@ const GameForm = () => {
return (
<>
<Container maxW="container.md" mt="10">
<Container maxW="768px" mt="10">
{id ? <Heading as="h1" size="xl">Editing {game.title}</Heading> :
<Heading as="h1" size="xl">Add a Game to the Database</Heading>}
<form onSubmit={handleSubmit} style={{marginTop: '2rem'}}>
<Stack spacing={[1, 5]} direction={{base: 'column', sm: 'row'}} justify={'flex-end'}>
<Stack gap={[1, 5]} direction={{base: 'column', sm: 'row'}} justify={'flex-end'}>
<Button
isLoading={submitLoading}
colorScheme="blue"
loading={submitLoading}
colorPalette="blue"
type="submit"
data-name={"save"}
>
Save
</Button>
<Button
isLoading={moveOn}
colorScheme="green"
loading={moveOn}
colorPalette="green"
type="submit"
data-name={"save-and-view"}
>
Save and View
</Button>
</Stack>
<InputGroup>
<Flex gap={3} alignItems="center">
{!id || admin ? (
<Box flex="1">
<SingleFieldNumericInput label={'Steam ID'} textField={'steamId'} field={game.steamId} bg={bg}
handleInputChange={handleInputChange} required={game.scrape}/>
</Box>
) : ''}
{!id && (
<FormControl display="flex" ml={'3'} alignItems="center">
<FormLabel htmlFor="scrape" mb="0">Steam Scrape</FormLabel>
<Flex alignItems="center" ml={'3'} flexShrink={0} gap={2}>
<Text whiteSpace="nowrap">Steam Scrape</Text>
<Switch
isChecked={game.scrape}
onChange={() => {
colorPalette="blue"
checked={game.scrape}
onCheckedChange={() => {
handleToggle('scrape')
}}
name="scrape"
id="scrape"
/>
</FormControl>
</Flex>
)}
</InputGroup>
</Flex>
{(gameId === '' && !game.scrape) || (gameId.length >= 1 && admin) ? (
<SingleFieldInput label={'Title'} textField={'title'} field={game.title} bg={bg}
handleInputChange={handleInputChange} required={false}/>
) : ''}
<>
<FormControl mb="3">
<FormLabel>Series</FormLabel>
<Field mb="3" label="Series">
<Box
bg={bg}
border="1px"
borderColor="gray.500"
rounded="md">
rounded="md"
w="full">
<CreatableSelect
name="series"
isClearable
onChange={(values) => {
onChange={(values: any) => {
if (values === null) values = {value: '', label: ''}
if (values) {
handleInputChange('series', values.value)
@@ -380,20 +380,18 @@ const GameForm = () => {
value={{value: game.series, label: game.series}}
/>
</Box>
</FormControl>
</Field>
</>
{(gameId === '' && !game.scrape) || (gameId.length >= 1 && admin) ? (
<>
<SingleFieldInput label={'Front Image'} textField={'frontImage'} field={game.frontImage}
bg={bg}
handleInputChange={handleInputChange} required={false}/>
<FormControl mb="3">
<FormLabel>Screenshots</FormLabel>
<Field mb="3" label="Screenshots">
<Box
bg={bg}
border="1px"
borderColor="gray.500"
rounded="md">
rounded="md"
w="full">
<CreatableSelect
name="screenshots"
isClearable
@@ -433,7 +431,7 @@ const GameForm = () => {
value={screenshots[0]?.value === '' ? [] : screenshots}
/>
</Box>
</FormControl>
</Field>
</>
) : ''}
{(gameId === '' && !game.scrape) || (gameId.length >= 1) ?
@@ -453,14 +451,14 @@ const GameForm = () => {
</>
{(gameId === '' && !game.scrape) || (gameId.length >= 1 && admin) ? (
<Box mt="5" mb="5">
<FormLabel>Operating Systems</FormLabel>
<Text fontWeight="medium" mb="2">Operating Systems</Text>
<Box
bg={bg}
border="1px"
borderWidth="1px" borderStyle="solid"
borderColor="gray.500"
rounded="md"
p="2">
<Stack spacing={[1, 5]} direction={['column', 'row']}>
<Stack gap={[1, 5]} direction={['column', 'row']}>
<CheckboxInput label={'Windows'} textField={'windows'} checked={game.os.windows}
defaultIsChecked={true} handleOSChange={handleOSChange}/>
<CheckboxInput label={'Mac OSX'} textField={'mac'} checked={game.os.mac}
@@ -518,9 +516,9 @@ const GameForm = () => {
</>
{(gameId === '' && !game.scrape) || (gameId.length >= 1 && admin) ? (
<>
<Text align="center" fontSize="xl" mt="10">System Requirements</Text>
<Text textAlign="center" fontSize="xl" mt="10">System Requirements</Text>
<Box>
<Text fontSize="lg" align="center">Windows</Text>
<Text fontSize="lg" textAlign="center">Windows</Text>
<SystemRequirementsTextareaInput label={'Windows Minimum'}
textField={'systemRequirements.windows.minimum'}
field={game.systemRequirements.windows.minimum} bg={bg}
@@ -532,7 +530,7 @@ const GameForm = () => {
bg={bg}
handleSystemRequirements={handleSystemRequirements}
rows={3}/>
<Text fontSize="lg" align="center">Mac OSX</Text>
<Text fontSize="lg" textAlign="center">Mac OSX</Text>
<SystemRequirementsTextareaInput label={'Mac OSX Minimum'}
textField={'systemRequirements.mac.minimum'}
field={game.systemRequirements.mac.minimum} bg={bg}
@@ -543,7 +541,7 @@ const GameForm = () => {
field={game.systemRequirements.mac.recommended} bg={bg}
handleSystemRequirements={handleSystemRequirements}
rows={3}/>
<Text fontSize="lg" align="center">Linux</Text>
<Text fontSize="lg" textAlign="center">Linux</Text>
<SystemRequirementsTextareaInput label={'Linux Minimum'}
textField={'systemRequirements.linux.minimum'}
field={game.systemRequirements.linux.minimum} bg={bg}
@@ -558,18 +556,18 @@ const GameForm = () => {
</Box>
</>
) : ''}
<Stack spacing={[1, 5]} direction={{base: 'column', sm: 'row'}} align={{base: 'start'}}>
<Stack gap={[1, 5]} direction={{base: 'column', sm: 'row'}} align={{base: 'start'}}>
<Button
isLoading={submitLoading}
colorScheme="blue"
loading={submitLoading}
colorPalette="blue"
type="submit"
data-name={"save"}
>
Save
</Button>
<Button
isLoading={moveOn}
colorScheme="green"
loading={moveOn}
colorPalette="green"
type="submit"
data-name={"save-and-view"}
>
@@ -579,7 +577,7 @@ const GameForm = () => {
<>
<Spacer/>
<Button
colorScheme="red"
colorPalette="red"
onMouseDown={() => {
openState.set(true)
}}
src/components/GamesDashboard.tsx
+13 -11
View File
@@ -4,7 +4,7 @@ import React, { useEffect } from 'react'
import { gameDashboardState } from '../stateManagement/gameState'
import { loadingState } from '../stateManagement/loadingState'
import { useHookstate } from '@hookstate/core'
import { Box, Center, Container, Divider, Heading, SimpleGrid, VStack } from '@chakra-ui/react'
import { Box, Center, Container, Separator, Heading, SimpleGrid, VStack } from '@chakra-ui/react'
import Pagination from './Pagination'
import { NavLink } from 'react-router-dom'
import { adminMode } from '../stateManagement/userState'
@@ -33,34 +33,36 @@ const GameDashboard = () => {
return (
<>
<Container maxW="container.xl" mt="7">
<Container maxW="1280px" mt="7">
<Pagination />
<ActiveFilters />
<Divider />
<Separator borderColor="gray.200" />
{!loaded ? <DashboardLoadingModal /> : games.count.totalGames === 0 ?
<Center h={'80vh'}>
<VStack spacing={10}>
<VStack gap={10}>
<Heading as={'h1'} size={'3xl'}>No Results Found...</Heading>
<Divider />
<Separator borderColor="gray.200" />
{games.searchParams !== '' ?
<Box mt='10'>
<ResetFilterButton text='Clear Search and Filters' size='lg' variant='outline' colorScheme='blue' />
<ResetFilterButton text='Clear Search and Filters' size='lg' variant='outline' colorPalette='blue' />
</Box>
:
<Box
rounded={'md'}
as={NavLink}
border={'1px'}
asChild
borderWidth={'1px'} borderStyle={'solid'}
p={'3'}
fontSize={'2xl'}
to="/games/create">
>
<NavLink to="/games/create">
Create a Game
</NavLink>
</Box>
}
</VStack>
</Center>
:
<SimpleGrid columns={{ base: 1, sm: 2, md: 3 }} spacing={10} style={{ marginTop: '3rem' }}>
<SimpleGrid columns={{ base: 1, sm: 2, md: 3 }} gap={10} style={{ marginTop: '3rem' }}>
{games.data.map((game) => (
<GameThumbnailContextMenu
key={game._id}
@@ -68,7 +70,7 @@ const GameDashboard = () => {
game={game} />
))}
</SimpleGrid>}
<Divider my={'1rem'} />
<Separator borderColor="gray.200" my={'1rem'} />
<Pagination />
</Container>
</>
src/components/Header.tsx
+90 -92
View File
@@ -9,27 +9,23 @@ import {
Link,
HStack,
Stack,
useColorModeValue,
Menu,
MenuButton,
Avatar,
MenuList,
MenuItem,
MenuDivider,
Portal,
Icon,
useColorMode,
Text,
Center,
VStack,
Tooltip,
Divider,
Separator,
Heading,
Kbd,
Spacer,
useDisclosure,
useMediaQuery,
} from '@chakra-ui/react'
import { AddIcon, HamburgerIcon, Search2Icon, SettingsIcon } from '@chakra-ui/icons'
import {useColorMode, useColorModeValue} from './ui/color-mode'
import {Tooltip} from './ui/tooltip'
import {Avatar} from './ui/avatar'
import { LuPlus, LuMenu, LuSearch, LuSettings } from 'react-icons/lu'
import SearchModal from './SearchModal'
import { openAndCloseSearchDialogue } from '../stateManagement/loadingState'
import AdminMode from './authComponents/AdminMode'
@@ -49,10 +45,10 @@ export default function NavBar() {
const bgLink = useColorModeValue('gray.200', 'gray.700')
const location = useLocation()
const history = useNavigate()
const { isOpen: mobileIsOpen, onOpen: mobileOnOpen, onClose: mobileOnClose } = useDisclosure()
const { isOpen: filterIsOpen, onOpen: filterOnOpen, onClose: filterOnClose } = useDisclosure()
const { open: mobileIsOpen, onOpen: mobileOnOpen, onClose: mobileOnClose } = useDisclosure()
const { open: filterIsOpen, onOpen: filterOnOpen, onClose: filterOnClose } = useDisclosure()
const btnRef = React.useRef(null)
const [isSmallerThan768] = useMediaQuery('(max-width: 768px)')
const [isSmallerThan768] = useMediaQuery(['(max-width: 768px)'])
const handleKeyPress = useCallback((event: any) => {
if (event.ctrlKey === true && event.key === ',') {
@@ -95,13 +91,13 @@ export default function NavBar() {
position={loadedPreferences.get().stickyNav ? "fixed" : "relative"}
justifyContent={'space-between'}
>
<HStack spacing={8} alignItems={'center'}>
<Box as={RouteLink} to="/">
Game Database
<HStack gap={8} alignItems={'center'}>
<Box asChild>
<RouteLink to="/">Game Database</RouteLink>
</Box>
<HStack
as={'nav'}
spacing={4}
gap={4}
display={{ base: 'none', md: 'flex' }}
>
<Link
@@ -112,9 +108,8 @@ export default function NavBar() {
textDecoration: 'none',
bg: bgLink,
}}
as={RouteLink}
to="/games">
Games
asChild>
<RouteLink to="/games">Games</RouteLink>
</Link>
<Link
px={2}
@@ -124,9 +119,8 @@ export default function NavBar() {
textDecoration: 'none',
bg: bgLink,
}}
as={RouteLink}
to="/games/create">
Create Game
asChild>
<RouteLink to="/games/create">Create Game</RouteLink>
</Link>
</HStack>
</HStack>
@@ -135,7 +129,7 @@ export default function NavBar() {
{isSmallerThan768 ?
<>
<Button ref={btnRef} onMouseDown={mobileIsOpen ? mobileOnClose : mobileOnOpen}>
<HamburgerIcon/>
<LuMenu/>
</Button>
<MobileBar mobileIsOpen={mobileIsOpen} mobileOnClose={mobileOnClose} btnRef={btnRef} bgLink={bgLink}
user={user} colorMode={colorMode} toggleColorMode={toggleColorMode}/>
@@ -144,7 +138,7 @@ export default function NavBar() {
<Stack direction={'row'}>
{ user.role === 'admin' && <AdminMode/>}
<Tooltip hasArrow mr={'2'} label={'Filters'} aria-label={'Filters'}>
<Tooltip showArrow content={'Filters'}>
<Button
rounded={'full'}
bg={'transparent'}
@@ -164,7 +158,7 @@ export default function NavBar() {
</Tooltip>
<FilterBar filterIsOpen={filterIsOpen} filterOnClose={filterOnClose} btnRef={btnRef} filterLoadingState={filterLoadingState} />
<Tooltip hasArrow mr={'2'} label={'Search: ctrl+s'} aria-label={'Search'}>
<Tooltip showArrow content={'Search: ctrl+s'}>
<Button
rounded={'full'}
onMouseDown={() => {
@@ -173,77 +167,81 @@ export default function NavBar() {
bg={'transparent'}
cursor={'pointer'}
minW={0}>
<Search2Icon/>
<LuSearch/>
</Button>
</Tooltip>
<Menu>
<Tooltip hasArrow mr={'2'} label={'Settings'} aria-label={'Settings'}>
<MenuButton
as={Button}
<Menu.Root>
<Menu.Trigger asChild>
<Button
rounded={'full'}
variant={'transparent'}
variant={'ghost'}
cursor={'pointer'}
minW={0}>
<SettingsIcon/>
</MenuButton>
</Tooltip>
<MenuList alignItems={'center'}>
<VStack>
{/*<Button onMouseDown={toggleColorMode} w={'70%'}>*/}
{/* {colorMode === 'light' ? <MoonIcon/> : <SunIcon/>}*/}
{/* {colorMode === 'light' ?*/}
{/* <Text mt={'1'} ml={'2'}>Dark</Text> :*/}
{/* <Text mt={'1'} ml={'2'}>Light</Text>}*/}
{/*</Button>*/}
<Button
variant={'solid'}
colorScheme={'blue'}
size={'md'}
leftIcon={<AddIcon/>}
as={RouteLink}
w={'70%'}
to="/games/create">
<Text mt="1">Create Game</Text>
</Button>
<Divider/>
<Heading as={'h3'} size={'md'}>Keyboard Shortcuts</Heading>
<HStack><Text fontSize={'sm'}>Search:</Text><span><Kbd>ctrl</Kbd> + <Kbd>,</Kbd></span></HStack>
<HStack><Text fontSize={'sm'}>Games Grid:</Text><span><Kbd>ctrl</Kbd> + <Kbd>.</Kbd></span></HStack>
<HStack><Text fontSize={'sm'}>Create
Game:</Text><span><Kbd>ctrl</Kbd> + <Kbd>/</Kbd></span></HStack>
</VStack>
</MenuList>
</Menu>
<Menu>
<Tooltip hasArrow mr={'2'} label={'User Info and Logout'} aria-label={'User Info'}>
<MenuButton
as={Button}
rounded={'full'}
variant={'transparent'}
cursor={'pointer'}
minW={0}>
<Avatar size={'sm'} src={user.avatar}/>
</MenuButton>
</Tooltip>
<MenuList alignItems={'center'}>
<br/>
<Center>
<Avatar
size={'2xl'}
src={user.avatar}
/>
</Center>
<br/>
<Center>
<p>{user.displayName}</p>
</Center>
<br/>
<MenuDivider/>
<MenuItem onClick={() => history('/profile')}>Preferences</MenuItem>
<MenuItem onClick={() => logout()}><Icon as={MdOutlinePowerSettingsNew} mr={'2'}/> <Text
mt={'1'}>Logout</Text></MenuItem>
</MenuList>
</Menu>
<Tooltip showArrow content={'Settings'}>
<LuSettings/>
</Tooltip>
</Button>
</Menu.Trigger>
<Portal>
<Menu.Positioner>
<Menu.Content p={8}>
<VStack alignItems={'center'}>
<Button
variant={'solid'}
colorPalette={'blue'}
size={'md'}
asChild
w={'70%'}
>
<RouteLink to="/games/create"><LuPlus/> <Text mt="1">Create Game</Text></RouteLink>
</Button>
<Separator/>
<Heading as={'h3'} size={'md'}>Keyboard Shortcuts</Heading>
<HStack><Text fontSize={'sm'}>Search:</Text><span><Kbd>ctrl</Kbd> + <Kbd>,</Kbd></span></HStack>
<HStack><Text fontSize={'sm'}>Games Grid:</Text><span><Kbd>ctrl</Kbd> + <Kbd>.</Kbd></span></HStack>
<HStack><Text fontSize={'sm'}>Create
Game:</Text><span><Kbd>ctrl</Kbd> + <Kbd>/</Kbd></span></HStack>
</VStack>
</Menu.Content>
</Menu.Positioner>
</Portal>
</Menu.Root>
<Menu.Root>
<Menu.Trigger asChild>
<Button
rounded={'full'}
variant={'ghost'}
cursor={'pointer'}
minW={0}>
<Tooltip showArrow content={'User Info and Logout'}>
<Avatar size={'sm'} src={user.avatar} name={user.displayName} />
</Tooltip>
</Button>
</Menu.Trigger>
<Portal>
<Menu.Positioner>
<Menu.Content p={8}>
<br/>
<Center>
<Avatar
size={'2xl'}
src={user.avatar}
name={user.displayName}
/>
</Center>
<br/>
<Center>
<p>{user.displayName}</p>
</Center>
<br/>
<Menu.Separator/>
<Menu.Item value="preferences" onSelect={() => history('/profile')}>Preferences</Menu.Item>
<Menu.Item value="logout" onSelect={() => logout()}><Icon as={MdOutlinePowerSettingsNew} mr={'2'}/> <Text
mt={'1'}>Logout</Text></Menu.Item>
</Menu.Content>
</Menu.Positioner>
</Portal>
</Menu.Root>
</Stack>
}
</Flex>
src/components/Home.tsx
+4 -4
View File
@@ -4,13 +4,13 @@ import { VStack, Image, Button, Heading, Flex, Center } from '@chakra-ui/react'
const Home = () => {
return (
<Flex align={'center'} bgGradient={'linear(to-br, #314755, #26a0da)'} height={'100vh'}>
<Flex align={'center'} bgImage={'linear-gradient(to bottom right, #314755, #26a0da)'} height={'100vh'}>
<Center w={'100%'}>
<VStack spacing={4} align={'center'} margin={'auto'}>
<VStack gap={4} align={'center'} margin={'auto'}>
<Image src="/assets/Logo.svg" alt="Games Database Logo"/>
<Heading as="h2" fontSize={'1.7em'} fontWeight={'normal'}>Welcome to your Games Database</Heading>
<Button as={Link} to="/login" size='lg' variant='outline' fontSize='1.25rem'>
Login
<Button asChild size='lg' variant='outline' fontSize='1.25rem'>
<Link to="/login">Login</Link>
</Button>
</VStack>
</Center>
src/components/LoadingModal.tsx
+7 -2
View File
@@ -1,5 +1,5 @@
import React from 'react'
import { Center, CircularProgress } from '@chakra-ui/react'
import { Center, ProgressCircle } from '@chakra-ui/react'
export default function LoadingModal() {
@@ -14,7 +14,12 @@ export default function LoadingModal() {
bottom={'0'}
left={'0'}
>
<CircularProgress isIndeterminate color="blue.500"/>
<ProgressCircle.Root value={null} size="lg">
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range stroke="blue.500" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
</Center>
</>
)
src/components/MobileBar.tsx
+31 -43
View File
@@ -1,19 +1,18 @@
import React, { MutableRefObject } from 'react'
import {
Avatar, Button, Center, ColorMode,
Divider, Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent, DrawerFooter,
DrawerHeader,
DrawerOverlay, Icon,
Button, Center,
Separator,
Drawer,
Icon,
Image, Link,
Stack, Text,
} from '@chakra-ui/react'
import {DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerHeader, DrawerRoot} from './ui/drawer'
import {Avatar} from './ui/avatar'
import AdminMode from './authComponents/AdminMode'
import { NavLink } from 'react-router-dom'
import Search from './Search'
import { AddIcon } from '@chakra-ui/icons'
import { LuPlus } from 'react-icons/lu'
import { logout } from '../stateManagement/userState'
import User from '../models/user'
import { AiOutlineLogout } from 'react-icons/ai'
@@ -21,12 +20,13 @@ import {useHookstate} from "@hookstate/core";
import {searchCompletedState} from "../stateManagement/loadingState";
import {gameDashboardState} from "../stateManagement/gameState";
import ResetFilterButton from "./helperComponents/ResetFilterButton";
import type { ColorMode } from './ui/color-mode'
interface Props {
mobileIsOpen: boolean
mobileOnClose: () => void
btnRef: MutableRefObject<null>
bgLink: "gray.200" | "gray.700"
bgLink: string
user: User
colorMode: ColorMode
toggleColorMode: () => void
@@ -37,15 +37,14 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
const gamesState = useHookstate(gameDashboardState)
const games = gamesState.get()
return (
<Drawer
isOpen={mobileIsOpen}
placement="right"
onClose={mobileOnClose}
finalFocusRef={btnRef}
<DrawerRoot
open={mobileIsOpen}
placement="end"
onOpenChange={(e) => { if (!e.open) mobileOnClose() }}
finalFocusEl={() => btnRef.current as unknown as HTMLElement}
>
<DrawerOverlay/>
<DrawerContent>
<DrawerCloseButton/>
<DrawerCloseTrigger/>
<DrawerHeader>
<Image maxW="15rem" src="/assets/Logo.svg" alt="Games Database Logo"/>
</DrawerHeader>
@@ -54,7 +53,7 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
<AdminMode />
<Stack
as={'nav'}
spacing={4}
gap={4}
>
<Link
px={2}
@@ -64,9 +63,8 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
textDecoration: 'none',
bg: bgLink,
}}
as={NavLink}
to="/games">
<Text align={'right'}>Games</Text>
asChild>
<NavLink to="/games"><Text textAlign={'right'}>Games</Text></NavLink>
</Link>
<Link
px={2}
@@ -76,15 +74,14 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
textDecoration: 'none',
bg: bgLink,
}}
as={NavLink}
to="/games/create">
<Text align={'right'}>Create Game</Text>
asChild>
<NavLink to="/games/create"><Text textAlign={'right'}>Create Game</Text></NavLink>
</Link>
<Divider/>
<Separator/>
<Search/>
{searchCompleted.get() && <Text>Games Found: {games.count.totalGames}</Text>}
<Divider/>
<Center><Avatar mr={'2'} size={'sm'} src={user.avatar}/><Text mt={1}>{user.displayName}</Text></Center>
<Separator/>
<Center><Avatar mr={'2'} size={'sm'} src={user.avatar} name={user.displayName}/><Text mt={1}>{user.displayName}</Text></Center>
<Link
px={2}
py={1}
@@ -93,18 +90,10 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
textDecoration: 'none',
bg: bgLink,
}}
as={NavLink}
to="/profile">
<Text align={'right'}>Preferences</Text>
asChild>
<NavLink to="/profile"><Text textAlign={'right'}>Preferences</Text></NavLink>
</Link>
<Divider/>
{/*<Button onMouseDown={toggleColorMode} ml={'auto'}>*/}
{/* {colorMode === 'light' ? <MoonIcon/> : <SunIcon/>}*/}
{/* {colorMode === 'light' ?*/}
{/* <Text mt={'1'} ml={'2'}>Dark</Text> :*/}
{/* <Text mt={'1'} ml={'2'}>Light</Text>}*/}
{/*</Button>*/}
{/*<Divider/>*/}
<Separator/>
<ResetFilterButton />
</Stack>
@@ -114,20 +103,19 @@ function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props)
<DrawerFooter>
<Button
variant={'solid'}
colorScheme={'blue'}
colorPalette={'blue'}
size={'md'}
leftIcon={<AddIcon/>}
as={NavLink}
asChild
mr={3}
to="/games/create">
<Text mt="1">Create Game</Text>
>
<NavLink to="/games/create"><LuPlus/> <Text mt="1">Create Game</Text></NavLink>
</Button>
<Button onMouseDown={() => logout()}><Icon as={AiOutlineLogout} mr={'2'}/> <Text
mt={'1'}>Logout</Text></Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
</DrawerRoot>
)
}
src/components/NoGames.tsx
+4 -4
View File
@@ -4,12 +4,12 @@ import { Center, Flex, Heading, Button, VStack } from '@chakra-ui/react'
export default function NoGames() {
return (
<Flex align={'center'} bgGradient={'linear(to-br, #314755, #26a0da)'} height={'100vh'}>
<Flex align={'center'} bgImage={'linear-gradient(to bottom right, #314755, #26a0da)'} height={'100vh'}>
<Center w={'100%'}>
<VStack spacing={4} align={'center'} margin={'auto'}>
<VStack gap={4} align={'center'} margin={'auto'}>
{<Heading as="h2">You have not added any games yet.</Heading>}
<Button as={Link} to='/games/create' size='lg' variant='outline' fontSize='1.25rem'>
Click here to add some!
<Button asChild size='lg' variant='outline' fontSize='1.25rem'>
<Link to='/games/create'>Click here to add some!</Link>
</Button>
</VStack>
</Center>
src/components/Pagination.tsx
+58 -50
View File
@@ -4,24 +4,21 @@ import {
Grid,
GridItem,
IconButton,
NumberDecrementStepper,
NumberIncrementStepper,
NumberInput,
NumberInputField,
NumberInputStepper,
Select,
Text,
Tooltip,
useColorModeValue,
useMediaQuery,
Portal,
} from '@chakra-ui/react'
import { ArrowLeftIcon, ArrowRightIcon, ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
import {NumberInputRoot, NumberInputField} from './ui/number-input'
import { NativeSelect } from '@chakra-ui/react'
import { LuChevronLeft, LuChevronRight, LuChevronsLeft, LuChevronsRight } from 'react-icons/lu'
import {Tooltip} from './ui/tooltip'
import { useHookstate } from '@hookstate/core'
import { gameDashboardState } from '../stateManagement/gameState'
import { loadingState } from '../stateManagement/loadingState'
import { adminMode } from '../stateManagement/userState'
import getWithFilters from '../componentUtils/getWithFilters'
import { ratingState, steamRatingState } from "../stateManagement/ratingState";
import {useColorModeValue} from "./ui/color-mode";
import {useMediaQuery} from "@chakra-ui/react";
export default function Pagination() {
const gamesState = useHookstate(gameDashboardState)
@@ -34,7 +31,7 @@ export default function Pagination() {
const bg = useColorModeValue('gray.50', 'transparent')
const useRatingState = useHookstate(ratingState).get()
const useSteamRatingState = useHookstate(steamRatingState).get()
const [isSmallerThan768] = useMediaQuery('(max-width: 768px)')
const [isSmallerThan768] = useMediaQuery(['(max-width: 768px)'])
const setPageSize = async (limit: number) => await getWithFilters(
gamesState,
@@ -99,22 +96,24 @@ export default function Pagination() {
}}>
<GridItem area={"backArrows"}>
<Flex>
<Tooltip label="First Page">
<Tooltip content="First Page">
<IconButton
aria-label={'First Page'}
onMouseDown={() => gotoPage(0)}
isDisabled={pageIndex <= 1}
icon={<ArrowLeftIcon h={3} w={3} />}
disabled={pageIndex <= 1}
mr={4}
/>
>
<LuChevronsLeft />
</IconButton>
</Tooltip>
<Tooltip label="Previous Page">
<Tooltip content="Previous Page">
<IconButton
aria-label={'Previous Page'}
onMouseDown={previousPage}
isDisabled={pageIndex <= 1}
icon={<ChevronLeftIcon h={6} w={6} />}
/>
disabled={pageIndex <= 1}
>
<LuChevronLeft />
</IconButton>
</Tooltip>
</Flex>
</GridItem>
@@ -133,70 +132,79 @@ export default function Pagination() {
{!isSmallerThan768 &&
<GridItem area={"goToPage"}>
<Text mb={'1'}>Go to Page:</Text>
<NumberInput
<NumberInputRoot
bg={bg}
rounded={'md'}
w={{ base: 20, md: 28 }}
min={1}
max={pageCount}
value={pageIndex}
onChange={(value) => {
const page = value ? Number(value) : 1
value={String(pageIndex)}
onValueChange={(e) => {
const page = e.value ? Number(e.value) : 1
gotoPage(page)
}}
>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
<NumberInputField
borderWidth="1px"
borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
/>
</NumberInputRoot>
</GridItem>
}
<GridItem area={"countPerPage"}>
<Text mb={'1'}>Count Per Page:</Text>
<Select
<NativeSelect.Root
ml={{
base: '4',
md: '0'
}}
bg={bg}
rounded={'md'}
w={{ base: 20, md: 32 }}
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value))
}}
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
{pageSize}
</option>
))}
</Select>
<NativeSelect.Field
rounded={'md'}
borderWidth={'1px'}
borderStyle={'solid'}
borderColor={'gray.500'}
bg={bg}
value={pageSize}
onChange={(e: any) => {
setPageSize(Number(e.target.value))
}}
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
{pageSize}
</option>
))}
</NativeSelect.Field>
<NativeSelect.Indicator />
</NativeSelect.Root>
</GridItem>
<GridItem area={'gamesFound'}>
<Text>Games Found: {games.count.totalGames}</Text>
</GridItem>
<GridItem area={"forwardArrows"}>
<Flex justifySelf={'end'}>
<Tooltip label="Next Page">
<Tooltip content="Next Page">
<IconButton
aria-label={'Next Page'}
onMouseDown={nextPage}
isDisabled={pageIndex >= pageCount}
icon={<ChevronRightIcon h={6} w={6} />}
/>
disabled={pageIndex >= pageCount}
>
<LuChevronRight />
</IconButton>
</Tooltip>
<Tooltip label="Last Page">
<Tooltip content="Last Page">
<IconButton
aria-label={'Last Page'}
onMouseDown={() => gotoPage(pageCount)}
isDisabled={pageIndex >= pageCount}
icon={<ArrowRightIcon h={3} w={3} />}
disabled={pageIndex >= pageCount}
ml={4}
/>
>
<LuChevronsRight />
</IconButton>
</Tooltip>
</Flex>
</GridItem>
src/components/Search.tsx
+17 -17
View File
@@ -1,6 +1,7 @@
import React, { FormEvent } from 'react'
import { Button, FormControl, Input, InputGroup, InputRightElement, useColorModeValue } from '@chakra-ui/react'
import { SearchIcon } from '@chakra-ui/icons'
import { Button, Input, Group } from '@chakra-ui/react'
import { Field } from './ui/field'
import { LuSearch } from 'react-icons/lu'
import { GameList } from '../models/game'
import { useHookstate } from '@hookstate/core'
import { gameDashboardState } from '../stateManagement/gameState'
@@ -14,6 +15,7 @@ import { adminMode } from '../stateManagement/userState'
import getWithFilters from '../componentUtils/getWithFilters'
import {ChangeActiveFilterHeader} from "../componentUtils/changeActiveFilterHeader";
import {ratingState, steamRatingState} from "../stateManagement/ratingState";
import {useColorModeValue} from "./ui/color-mode";
export default function Search() {
const gamesState = useHookstate(gameDashboardState)
@@ -54,16 +56,16 @@ export default function Search() {
return (
<>
<form onSubmit={handleSubmit}>
<FormControl mb="3">
<InputGroup>
<Field mb="3">
<Group attached w="full">
<Input
autoFocus
id="searchParams"
name="searchParams"
bg={bg}
type="text"
border="1px"
borderColor="gray.500"
borderWidth="1px" borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
placeholder="Search..."
value={games.searchParams}
@@ -71,17 +73,15 @@ export default function Search() {
handleInputChange('searchParams', e.target.value)
}}
/>
<InputRightElement>
<Button
isLoading={submitLoading}
type="submit"
colorScheme="blue"
>
<SearchIcon/>
</Button>
</InputRightElement>
</InputGroup>
</FormControl>
<Button
loading={submitLoading}
type="submit"
colorPalette="blue"
>
<LuSearch/>
</Button>
</Group>
</Field>
</form>
</>
)
src/components/SearchModal.tsx
+10 -12
View File
@@ -1,8 +1,6 @@
import React from 'react'
import {
Modal, ModalBody, ModalCloseButton, ModalContent,
ModalHeader,
} from '@chakra-ui/react'
import { Dialog } from '@chakra-ui/react'
import {DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot} from './ui/dialog'
import { useHookstate } from '@hookstate/core'
import { openAndCloseSearchDialogue } from '../stateManagement/loadingState'
import Search from './Search'
@@ -16,14 +14,14 @@ export default function SearchModal() {
}
return (
<Modal isOpen={isOpen} onClose={handleClose}>
<ModalContent>
<ModalHeader>Search</ModalHeader>
<ModalCloseButton onMouseDown={() => handleClose()}/>
<ModalBody>
<DialogRoot open={isOpen} onOpenChange={(e) => { if (!e.open) handleClose() }}>
<DialogContent>
<DialogHeader>Search</DialogHeader>
<DialogCloseTrigger onClick={() => handleClose()}/>
<DialogBody>
<Search />
</ModalBody>
</ModalContent>
</Modal>
</DialogBody>
</DialogContent>
</DialogRoot>
)
}
src/components/authComponents/AdminMode.tsx
+3 -2
View File
@@ -1,5 +1,6 @@
import React from 'react'
import { Checkbox, Text } from '@chakra-ui/react'
import { Text } from '@chakra-ui/react'
import {Checkbox} from '../ui/checkbox'
import { adminModeToggle, loggedInUser, adminMode } from '../../stateManagement/userState'
import { useHookstate } from '@hookstate/core'
@@ -8,7 +9,7 @@ export default function AdminMode() {
const admin = useHookstate(adminMode).get()
return (
<Checkbox size={'lg'} onChange={() => adminModeToggle()} isChecked={admin} isDisabled={!(user.role === 'admin')}>
<Checkbox colorPalette="blue" size={'lg'} onCheckedChange={() => adminModeToggle()} checked={admin} disabled={!(user.role === 'admin')}>
<Text mt={'1'}>Administrator Mode</Text>
</Checkbox>
)
src/components/authComponents/ForgotPassword.tsx
+12 -18
View File
@@ -3,11 +3,11 @@ import { useForm } from 'react-hook-form'
import {
Container,
Button,
FormControl,
FormLabel,
Input,
useColorModeValue, FormErrorMessage, useToast,
} from '@chakra-ui/react'
import {Field} from '../ui/field'
import {useColorModeValue} from '../ui/color-mode'
import {toaster} from '../ui/toaster'
import agent from '../../api/agent'
import { IForgotPassword } from '../../models/user'
@@ -18,7 +18,6 @@ export default function ForgotPassword() {
handleSubmit,
formState: { errors, isSubmitting, isDirty },
} = useForm()
const toast = useToast()
interface Message {
success: boolean
@@ -27,27 +26,25 @@ export default function ForgotPassword() {
const onSubmit = handleSubmit(async (values) => {
const message = await agent.Account.forgot(values as IForgotPassword) as Message
toast({
toaster.create({
title: 'Email Sent',
status: 'success',
type: 'success',
description: message.data,
isClosable: true,
closable: true,
duration: 10000,
position: 'top'
})
})
return (
<Container style={{ marginTop: '7rem', paddingBottom: '5rem' }}>
<form onSubmit={onSubmit}>
<FormControl isInvalid={Boolean(errors.email)} mb={'3'}>
<FormLabel htmlFor="email">Email</FormLabel>
<Field label="Email" invalid={Boolean(errors.email)} errorText={errors.email?.type === 'required' ? errors.email.message?.toString() : errors.email?.type === 'pattern' ? 'Invalid Email Address' : undefined} mb={'3'}>
<Input
id="email"
bg={bg}
_placeholder={{ color: 'gray.500' }}
border="1px"
borderColor="gray.500"
borderWidth="1px" borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
placeholder="Email"
{...register('email', {
@@ -55,16 +52,13 @@ export default function ForgotPassword() {
pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
})}
/>
<FormErrorMessage>
{errors.email?.type === 'required' && errors.email.message?.toString()}
{errors.email?.type === 'pattern' && 'Invalid Email Address'}
</FormErrorMessage>
</FormControl>
</Field>
<br/>
<Button
type="submit"
colorPalette="blue"
disabled={!isDirty}
isLoading={isSubmitting}
loading={isSubmitting}
>
Submit
</Button>
src/components/authComponents/LoginForm.tsx
+14 -23
View File
@@ -5,11 +5,10 @@ import { login } from '../../stateManagement/userState'
import {
Container,
Button,
FormControl,
FormLabel,
Input,
useColorModeValue, HStack, Center, FormErrorMessage,
Input, HStack, Center,
} from '@chakra-ui/react'
import {Field} from '../ui/field'
import {useColorModeValue} from '../ui/color-mode'
import { Link } from 'react-router-dom'
export default function LoginForm() {
@@ -38,14 +37,13 @@ export default function LoginForm() {
return (
<Container style={{ marginTop: '7rem', paddingBottom: '5rem' }}>
<form onSubmit={onSubmit}>
<FormControl isInvalid={Boolean(errors.email)} mb={'3'}>
<FormLabel htmlFor="email">Email</FormLabel>
<Field label="Email" invalid={Boolean(errors.email)} errorText={errors.email?.type === 'required' ? errors.email.message?.toString() : errors.email?.type === 'pattern' ? 'Invalid Email Address' : undefined} mb={'3'}>
<Input
id="email"
bg={bg}
_placeholder={{ color: 'gray.500' }}
border="1px"
borderColor="gray.500"
borderWidth="1px" borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
placeholder="Email"
{...register('email', {
@@ -53,40 +51,33 @@ export default function LoginForm() {
pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
})}
/>
<FormErrorMessage>
{errors.email?.type === 'required' && errors.email.message?.toString()}
{errors.email?.type === 'pattern' && 'Invalid Email Address'}
</FormErrorMessage>
</FormControl>
<FormControl isInvalid={Boolean(errors.password)} mb={'3'}>
<FormLabel htmlFor="password">Password</FormLabel>
</Field>
<Field label="Password" invalid={Boolean(errors.password)} errorText={errors.password?.message?.toString()} mb={'3'}>
<Input
id="password"
bg={bg}
_placeholder={{ color: 'gray.500' }}
border="1px"
borderColor="gray.500"
borderWidth="1px" borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
placeholder="Password"
type="password"
{...register('password', { required: 'You must specify a password' })}
/>
<FormErrorMessage>
{errors.password && errors.password.message?.toString()}
</FormErrorMessage>
</FormControl>
</Field>
<br/>
<HStack>
<Button
type="submit"
colorPalette="blue"
disabled={!isDirty}
isLoading={isSubmitting}
loading={isSubmitting}
>
Submit
</Button>
</HStack>
<Center mt={'5rem'}>
<Button as={Link} to={'/forgotpassword'}>Forgot Password</Button>
<Button asChild variant="outline"><Link to={'/forgotpassword'}>Forgot Password</Link></Button>
</Center>
</form>
</Container>
src/components/authComponents/ResetPassword.tsx
+23 -32
View File
@@ -4,10 +4,11 @@ import { IResetPassword } from '../../models/user'
import {
Button,
Container,
FormControl,
FormLabel,
Input, useToast, useColorModeValue, FormErrorMessage,
Input,
} from '@chakra-ui/react'
import {Field} from '../ui/field'
import {useColorModeValue} from '../ui/color-mode'
import {toaster} from '../ui/toaster'
import agent from '../../api/agent'
import { useNavigate, useParams } from 'react-router-dom'
@@ -17,7 +18,7 @@ interface Message {
}
interface URL {
token: string
token?: string
}
export default function ResetPassword() {
@@ -27,32 +28,29 @@ export default function ResetPassword() {
watch,
formState: { errors, isSubmitting, isDirty },
} = useForm()
const { token } = useParams<URL>()
const { token } = useParams()
const history = useNavigate()
const toast = useToast()
const password = useRef({})
password.current = watch('password', '')
const onSubmit = handleSubmit(async (data) => {
const message = await agent.Account.reset(token, data as IResetPassword) as Message
const message = await agent.Account.reset(token!, data as IResetPassword) as Message
if (message.success) {
setTimeout(() => history('/login'), 3000)
toast({
toaster.create({
title: 'Password Reset',
status: 'success',
type: 'success',
description: 'Your password has been reset. You will be redirected to login automatically',
isClosable: true,
closable: true,
duration: 5000,
position: 'top',
})
} else {
toast({
toaster.create({
title: 'Password Not Reset',
status: 'error',
type: 'error',
description: 'Something went wrong, please contact the website administrator',
isClosable: true,
closable: true,
duration: 10000,
position: 'top',
})
}
})
@@ -62,15 +60,14 @@ export default function ResetPassword() {
return (
<Container style={{ marginTop: '7rem', paddingBottom: '5rem' }}>
<form onSubmit={onSubmit}>
<FormControl isInvalid={Boolean(errors.password)} mb={'3'}>
<FormLabel htmlFor="password">Password</FormLabel>
<Field label="Password" invalid={Boolean(errors.password)} errorText={errors.password?.message?.toString()} mb={'3'}>
<Input
id="password"
bg={bg}
_placeholder={{ color: 'gray.500' }}
border="1px"
borderColor="gray.500"
borderWidth="1px" borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
placeholder="Password"
type="password"
@@ -82,18 +79,14 @@ export default function ResetPassword() {
},
})}
/>
<FormErrorMessage>
{errors.password && errors.password.message?.toString()}
</FormErrorMessage>
</FormControl>
<FormControl isInvalid={Boolean(errors.repeat_password)} mb={'3'}>
<FormLabel htmlFor="repeat_password">Repeat Password</FormLabel>
</Field>
<Field label="Repeat Password" invalid={Boolean(errors.repeat_password)} errorText={errors.repeat_password?.message?.toString()} mb={'3'}>
<Input
id="repeat_password"
bg={bg}
_placeholder={{ color: 'gray.500' }}
border="1px"
borderColor="gray.500"
borderWidth="1px" borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
placeholder="Repeat Password"
type="password"
@@ -102,15 +95,13 @@ export default function ResetPassword() {
value === password.current || 'The passwords do not match',
})}
/>
<FormErrorMessage>
{errors.repeat_password && errors.repeat_password.message?.toString()}
</FormErrorMessage>
</FormControl>
</Field>
<br/>
<Button
type="submit"
colorPalette="blue"
disabled={!isDirty}
isLoading={isSubmitting}
loading={isSubmitting}
>
Submit
</Button>
src/components/dashboardComponents/DashboardLoadingModal.tsx
+7 -2
View File
@@ -1,5 +1,5 @@
import React from 'react'
import { Center, CircularProgress } from '@chakra-ui/react'
import { Center, ProgressCircle } from '@chakra-ui/react'
export default function DashboardLoadingModal() {
@@ -9,7 +9,12 @@ export default function DashboardLoadingModal() {
w="100%"
mt={'1rem'}
>
<CircularProgress isIndeterminate color="blue.500"/>
<ProgressCircle.Root value={null} size="md">
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
</ProgressCircle.Root>
</Center>
</>
)
src/components/dashboardComponents/GameThumbnail.tsx
+13 -15
View File
@@ -1,35 +1,33 @@
import React from 'react'
import { Link } from 'react-router-dom'
import { Data } from '../../models/game'
import { Link as ChakraLink, Flex, Heading, Image, LinkBox, LinkOverlay, Spacer, Text } from '@chakra-ui/react'
import { Link as ChakraLink, Flex, Heading, Image, Spacer, Text, Box } from '@chakra-ui/react'
import GameRating from "../detailsComponents/GameRating";
import SteamAndDeckLogo from "../helperComponents/SteamAndDeckLogo";
interface Props {
game: Data
onToggle: () => void
playState: string
}
export default function GameThumbnail({ onToggle, game, playState }: Props) {
export default function GameThumbnail({ game, playState }: Props) {
const gameLink = game.accessedBy[0].store.includes('Steam') && game.steamId.length > 0 ? game.steamId : game._id
return (
<>
<LinkBox
as={Link}
to={`/games/${gameLink}`}
onMouseOver={onToggle}
onMouseOut={onToggle}
<Box
asChild
>
<LinkOverlay>
<Link
to={`/games/${gameLink}`}
>
<Image borderTopRadius="md" src={game.frontImage} alt={game.title} />
</LinkOverlay>
<Heading m={2} size="md" my="2">
{game.steamId !== '' ? `${game.steamId}: ${game.title}` : `${game.title}`}
</Heading>
<Text ml={2}>Play Status: {playState}</Text>
</LinkBox>
<Heading m={2} size="md" my="2">
{game.steamId !== '' ? `${game.steamId}: ${game.title}` : `${game.title}`}
</Heading>
<Text ml={2}>Play Status: {playState}</Text>
</Link>
</Box>
<Flex m={2}>
<GameRating game={game} size={'1em'} />
<Spacer />
src/components/dashboardComponents/GameThumbnailContextMenu.tsx
+31 -22
View File
@@ -1,9 +1,8 @@
import React, { useState } from 'react';
import { Data } from "../../models/game";
import { ContextMenu } from 'chakra-ui-contextmenu';
import { MenuItem, MenuList } from '@chakra-ui/menu';
import { Menu, Portal } from '@chakra-ui/react';
import GameThumbnail from "./GameThumbnail";
import { Box, MenuGroup, useDisclosure } from "@chakra-ui/react";
import { Box, useDisclosure } from "@chakra-ui/react";
import GameThumbnailSlide from "./GameThumbnailSlide";
import { playStatusValues } from "../../componentUtils/SelectValues";
import agent from "../../api/agent";
@@ -14,7 +13,7 @@ interface Props {
}
const GameThumbnailContextMenu = ({ game }: Props) => {
const { isOpen, onToggle } = useDisclosure()
const { open: isOpen, onOpen, onClose } = useDisclosure()
const [playState, setPlayState] = useState(game.accessedBy[0].playStatus)
const gameLink = game.steamId.length > 1 ? game.steamId : game._id
@@ -34,20 +33,10 @@ const GameThumbnailContextMenu = ({ game }: Props) => {
let mql = window.matchMedia('(max-width: 768px)');
return (
<ContextMenu<HTMLDivElement> key={game._id} renderMenu={() => (
<MenuList>
<MenuItem><Link to={`/games/${gameLink}`} target="_blank" rel="noopener noreferrer">Open in New Tab</Link></MenuItem>
<MenuGroup title={'Change PlayStatus'}>
{playStatusValues.map(value => <MenuItem
onClick={() => rightClick(value.label, value.value)}
>{value.label}</MenuItem>)}
</MenuGroup>
</MenuList>
)}>
{ref => <>
<Menu.Root key={game._id}>
<Menu.ContextTrigger asChild>
<Box
ref={ref}
border={'1px'}
borderWidth={'1px'} borderStyle={'solid'}
borderColor={'gray.500'}
maxW={'sm'}
rounded={'md'}
@@ -55,13 +44,33 @@ const GameThumbnailContextMenu = ({ game }: Props) => {
transitionDuration={'1'}
transitionTimingFunction={'ease-in-out'}
_hover={{ boxShadow: '2xl', transform: 'translateY(-3px)' }}
onMouseEnter={onOpen}
onMouseLeave={onClose}
>
<GameThumbnail onToggle={onToggle} game={game} playState={playState} />
<GameThumbnail game={game} playState={playState} />
</Box>
{(!mql.matches) && <GameThumbnailSlide isOpen={isOpen} game={game} />}
</>
}
</ContextMenu>
</Menu.ContextTrigger>
<Portal>
<Menu.Positioner>
<Menu.Content p={4}>
<Menu.Item value="open-new-tab" asChild>
<Link to={`/games/${gameLink}`} target="_blank" rel="noopener noreferrer">Open in New Tab</Link>
</Menu.Item>
<Menu.ItemGroup>
<Menu.ItemGroupLabel>Change PlayStatus</Menu.ItemGroupLabel>
{playStatusValues.map((value, idx) => (
<Menu.Item
key={idx}
value={value.value}
onSelect={() => rightClick(value.label, value.value)}
>{value.label}</Menu.Item>
))}
</Menu.ItemGroup>
</Menu.Content>
</Menu.Positioner>
</Portal>
{(!mql.matches) && <GameThumbnailSlide isOpen={isOpen} game={game} />}
</Menu.Root>
);
};
src/components/dashboardComponents/GameThumbnailSlide.tsx
+14 -6
View File
@@ -1,5 +1,5 @@
import React from 'react';
import {Box, Container, Heading, HStack, Slide} from "@chakra-ui/react";
import {Box, Container, Heading, HStack, Presence} from "@chakra-ui/react";
import {Data} from "../../models/game";
import ImageSlider from "../detailsComponents/ImageSlider";
@@ -10,17 +10,25 @@ interface Props {
const GameThumbnailSlide = ({isOpen, game}: Props) => {
return (
<Slide direction="bottom" in={isOpen} unmountOnExit={true} style={{zIndex: 10}}>
<Presence
present={isOpen}
position="fixed"
bottom="0"
insetX="0"
animationName={{ _open: "slide-from-bottom-full", _closed: "slide-to-bottom-full" }}
animationDuration="moderate"
style={{zIndex: 10}}
>
<Box
p="40px"
color="white"
mt="4"
bgGradient={'linear(to-br, #314755, #26a0da)'}
bgImage={'linear-gradient(to bottom right, #314755, #26a0da)'}
borderTopRadius="md"
shadow="md"
>
<Container maxW="container.xl">
<HStack spacing='2rem'>
<Container maxW="1280px">
<HStack gap='2rem'>
<ImageSlider game={game} width={'250px'}/>
<Box>
<Heading>{game.title}</Heading>
@@ -29,7 +37,7 @@ const GameThumbnailSlide = ({isOpen, game}: Props) => {
</HStack>
</Container>
</Box>
</Slide>
</Presence>
);
};
src/components/detailsComponents/Features.tsx
+39 -113
View File
@@ -1,5 +1,5 @@
import React, { useState as reactUseState } from 'react'
import { Badge, Box, Divider, Flex, Heading, Link, Text } from '@chakra-ui/react'
import { Badge, Box, Separator, Flex, Heading, Link, Text } from '@chakra-ui/react'
import { Data } from '../../models/game'
import { gameDashboardState } from '../../stateManagement/gameState'
import { ImmutableObject, useHookstate } from '@hookstate/core'
@@ -36,48 +36,40 @@ export default function Features({ game }: Props) {
return history('/games')
}
const badge = (label: string) => (
<Box>
<Badge colorPalette="blue" variant="outline" rounded="md" pl="2" pr="2">
<Text pt="1" fontSize="sm">
{label}
</Text>
</Badge>
</Box>
)
return (
<Box mb="3">
<Heading as="h3" size="lg">Features and Information</Heading>
<Flex direction="column" m="2">
<Box>
<Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
<Text pt="1" fontSize="sm">
Rating:
</Text>
</Badge>
</Box>
{badge('Rating:')}
<Box mt="1.5" ml="5" mr="2">
<GameRating game={game} size={'1.5em'} />
</Box>
</Flex>
<Divider orientation="horizontal" />
<Separator borderColor="gray.200" orientation="horizontal" />
{game.accessedBy[0].store.includes('Steam') && game.steamId.length > 0 &&
(<>
<Flex direction="column" m="2">
<Box>
<Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
<Text pt="1" fontSize="sm">
Steam ID:
</Text>
</Badge>
</Box>
{badge('Steam ID:')}
<Box mt="1.5" ml="5" mr="2">
<Link pt="1" href={`steam://run/${game.steamId}`}>{game.steamId}</Link>
</Box>
</Flex>
<Divider orientation="horizontal" />
<Separator borderColor="gray.200" orientation="horizontal" />
</>)}
{game.series.length > 1 &&
(<>
<Flex direction="column" m="2">
<Box>
<Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
<Text pt="1" fontSize="sm">
Series:
</Text>
</Badge>
</Box>
{badge('Series:')}
<Box mt="1.5" ml="5" mr="2">
<Link onMouseDown={() => {
gamesState.filters.series.set(game.series)
@@ -85,16 +77,10 @@ export default function Features({ game }: Props) {
}} pt="1">{game.series}</Link>
</Box>
</Flex>
<Divider orientation="horizontal" />
<Separator borderColor="gray.200" orientation="horizontal" />
</>)}
<Flex direction="column" m="2">
<Box>
<Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
<Text pt="1" fontSize="sm">
Play Status:
</Text>
</Badge>
</Box>
{badge('Play Status:')}
<Box mt="1.5" ml="5" mr="2">
<Box display={'flex'}>
{editMode ?
@@ -120,15 +106,9 @@ export default function Features({ game }: Props) {
</Box>
</Box>
</Flex>
<Divider orientation="horizontal" />
<Separator borderColor="gray.200" orientation="horizontal" />
<Flex direction="column" m="2">
<Box>
<Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
<Text pt="1" fontSize="sm">
Genre:
</Text>
</Badge>
</Box>
{badge('Genre:')}
<Box mt={'2'} ml={'4'}>
{game.genre.map((genre, index) => [
index > 0 && ", ",
@@ -141,15 +121,9 @@ export default function Features({ game }: Props) {
])}
</Box>
</Flex>
<Divider orientation="horizontal" />
<Separator borderColor="gray.200" orientation="horizontal" />
<Flex direction="column" m="2">
<Box>
<Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
<Text pt="1" fontSize="sm">
Operating Systems:
</Text>
</Badge>
</Box>
{badge('Operating Systems:')}
<Box mt="1.5" ml="5" mr="2">
<Text pt="1">
{Object.keys(game.os).filter(os => {
@@ -175,15 +149,9 @@ export default function Features({ game }: Props) {
</Text>
</Box>
</Flex>
<Divider orientation="horizontal" />
<Separator borderColor="gray.200" orientation="horizontal" />
<Flex direction="column" m="2">
<Box>
<Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
<Text pt="1" fontSize="sm">
Store:
</Text>
</Badge>
</Box>
{badge('Store:')}
<Box mt="1.5" ml="5" mr="2">
{game.accessedBy[0].store.map((store, index) => [
index > 0 && ", ",
@@ -196,15 +164,9 @@ export default function Features({ game }: Props) {
])}
</Box>
</Flex>
<Divider orientation="horizontal" />
<Separator borderColor="gray.200" orientation="horizontal" />
<Flex direction="column" m="2">
<Box>
<Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
<Text pt="1" fontSize="sm">
Developer:
</Text>
</Badge>
</Box>
{badge('Developer:')}
<Box mt="1.5" ml="5" mr="2">
{game.developer.map((developer, index) => [
index > 0 && ", ",
@@ -217,15 +179,9 @@ export default function Features({ game }: Props) {
])}
</Box>
</Flex>
<Divider orientation="horizontal" />
<Separator borderColor="gray.200" orientation="horizontal" />
<Flex direction="column" m="2">
<Box>
<Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
<Text pt="1" fontSize="sm">
Publisher:
</Text>
</Badge>
</Box>
{badge('Publisher:')}
<Box mt="1.5" ml="5" mr="2">
{game.publisher.map((publisher, index) => [
index > 0 && ", ",
@@ -238,15 +194,9 @@ export default function Features({ game }: Props) {
])}
</Box>
</Flex>
<Divider orientation="horizontal" />
<Separator borderColor="gray.200" orientation="horizontal" />
<Flex direction="column" m="2">
<Box>
<Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
<Text pt="1" fontSize="sm">
Controller Support:
</Text>
</Badge>
</Box>
{badge('Controller Support:')}
<Box mt="1.5" ml="5" mr="2">
<Link onMouseDown={() => {
gamesState.filters.controller.set(game.controller)
@@ -254,28 +204,16 @@ export default function Features({ game }: Props) {
}} pt="1">{game.controller}</Link>
</Box>
</Flex>
<Divider orientation="horizontal" />
<Separator borderColor="gray.200" orientation="horizontal" />
<Flex direction="column" m="2">
<Box>
<Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
<Text pt="1" fontSize="sm">
Release Date:
</Text>
</Badge>
</Box>
{badge('Release Date:')}
<Box mt="1.5" ml="5" mr="2">
<Text pt="1">{game.releaseDate}</Text>
</Box>
</Flex>
<Divider orientation="horizontal" />
<Separator borderColor="gray.200" orientation="horizontal" />
<Flex direction="column" m="2">
<Box>
<Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
<Text pt="1" fontSize="sm">
Soundtrack:
</Text>
</Badge>
</Box>
{badge('Soundtrack:')}
<Box mt="1.5" ml="5" mr="2">
<Link onMouseDown={() => {
gamesState.filters.soundtrack.set(game.accessedBy[0].soundtrack)
@@ -283,15 +221,9 @@ export default function Features({ game }: Props) {
}} pt="1">{game.accessedBy[0].soundtrack}</Link>
</Box>
</Flex>
<Divider orientation="horizontal" />
<Separator borderColor="gray.200" orientation="horizontal" />
<Flex direction="column" m="2">
<Box>
<Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
<Text pt="1" fontSize="sm">
Does it work with Intel?:
</Text>
</Badge>
</Box>
{badge('Does it work with Intel?:')}
<Box mt="1.5" ml="5" mr="2">
<Link onMouseDown={() => {
gamesState.filters.intel.set(game.intel)
@@ -299,15 +231,9 @@ export default function Features({ game }: Props) {
}} pt="1">{game.intel}</Link>
</Box>
</Flex>
<Divider orientation="horizontal" />
<Separator borderColor="gray.200" orientation="horizontal" />
<Flex direction="column" m="2">
<Box>
<Badge colorScheme="blue" variant="outline" rounded="md" pl="2" pr="2">
<Text pt="1" fontSize="sm">
Does it work with WINE?:
</Text>
</Badge>
</Box>
{badge('Does it work with WINE?:')}
<Box mt="1.5" ml="5" mr="2">
<Link onMouseDown={() => {
gamesState.filters.wine.set(game.wine)
@@ -315,7 +241,7 @@ export default function Features({ game }: Props) {
}} pt="1">{game.wine}</Link>
</Box>
</Flex>
<Divider orientation="horizontal" />
<Separator borderColor="gray.200" orientation="horizontal" />
</Box>
)
}
src/components/detailsComponents/GamePlayStatus.tsx
+5 -4
View File
@@ -2,11 +2,12 @@ import React from 'react';
import { Data } from '../../models/game'
import agent from "../../api/agent";
import {playStatusValues} from "../../componentUtils/SelectValues";
import {Select} from "chakra-react-select";
import {Select} from "../FixedSelect";
import {ImmutableObject} from "@hookstate/core";
interface Props {
game: Data
game: Data | ImmutableObject<Data>
playState: string
setPlayState: any
}
@@ -33,14 +34,14 @@ const GamePlayStatus = ({game, playState, setPlayState}: Props) => {
value: playState,
label: playState,
}}
onChange={(e) => {
onChange={(e: any) => {
if(e === null) return
handleClick(e.value, e.label)
}}
size={'sm'}
options={playStatusValues}
chakraStyles={{
container: (provided) => ({
container: (provided: any) => ({
...provided,
width: "150px"
})
src/components/detailsComponents/GameRating.tsx
+2 -1
View File
@@ -5,10 +5,11 @@ import agent from "../../api/agent";
import {Flex, Link} from "@chakra-ui/react";
import {IoGameController, IoGameControllerOutline} from "react-icons/io5";
import {BiReset} from "react-icons/bi";
import {ImmutableObject} from "@hookstate/core";
interface Props {
game: Data
game: Data | ImmutableObject<Data>
size: string
}
src/components/detailsComponents/Summary.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import React from 'react'
import { Data } from '../../models/game'
import { Interweave } from 'interweave'
import { Divider, Box, Heading } from '@chakra-ui/react'
import { Separator, Box, Heading } from '@chakra-ui/react'
import { ImmutableObject } from '@hookstate/core'
interface Props {
@@ -15,7 +15,7 @@ export default function Summary({ game }: Props) {
{reviews.length >= 1 && (
<>
<Heading as="h1">Reviews</Heading>
<Divider m="3" />
<Separator borderColor="gray.200" m="3" />
<Interweave
content={reviews}
allowAttributes
@@ -24,7 +24,7 @@ export default function Summary({ game }: Props) {
</>
)}
<Heading mt={reviews.length >= 1 ? '10' : ''} as="h1">About This Game</Heading>
<Divider m="3" />
<Separator borderColor="gray.200" m="3" />
<Interweave
content={summary}
allowAttributes
src/components/detailsComponents/SummaryModal.tsx
+12 -12
View File
@@ -1,5 +1,6 @@
import React from 'react'
import { Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react'
import { Button, Dialog } from '@chakra-ui/react'
import {DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogRoot} from '../ui/dialog'
import Summary from './Summary'
import { ImmutableObject } from '@hookstate/core'
import { Data } from '../../models/game'
@@ -14,20 +15,19 @@ interface Props {
const SummaryModal = ({ isOpen, onClose, game }: Props) => {
return (
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent maxW={'90%'}>
<ModalCloseButton />
<ModalBody>
<DialogRoot open={isOpen} onOpenChange={(e) => { if (!e.open) onClose() }}>
<DialogContent maxW={'90%'}>
<DialogCloseTrigger />
<DialogBody>
<Summary game={game} />
</ModalBody>
<ModalFooter>
<Button colorScheme='blue' onMouseDown={onClose}>
</DialogBody>
<DialogFooter>
<Button colorPalette='blue' onMouseDown={onClose}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</DialogFooter>
</DialogContent>
</DialogRoot>
)
}
src/components/detailsComponents/SystemRequirementsMenu.tsx
+46 -46
View File
@@ -1,5 +1,5 @@
import React from 'react'
import { TabList, Tab, TabPanel, TabPanels, Tabs, Heading, Box } from '@chakra-ui/react'
import { Tabs, Heading, Box } from '@chakra-ui/react'
import { Data } from '../../models/game'
import { Interweave } from 'interweave'
import { ImmutableObject } from '@hookstate/core'
@@ -20,51 +20,51 @@ export default function SystemRequirements({ game }: Props) {
return (
<Box>
<Heading as='h3' size='lg'>System Requirements</Heading>
<Tabs isLazy mt='3'>
<TabList>
<Tab>Windows</Tab>
<Tab isDisabled={macMin}>Mac</Tab>
<Tab isDisabled={linMin}>Linux</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Tabs isLazy>
<TabList>
<Tab>Minimum</Tab>
<Tab isDisabled={winRec}>Recommended</Tab>
</TabList>
<TabPanels>
<TabPanel>{<Interweave content={windows.minimum} />}</TabPanel>
<TabPanel>{<Interweave content={windows.recommended} />}</TabPanel>
</TabPanels>
</Tabs>
</TabPanel>
<TabPanel>
<Tabs isLazy>
<TabList>
<Tab isDisabled={macMin}>Minimum</Tab>
<Tab isDisabled={macRec}>Recommended</Tab>
</TabList>
<TabPanels>
<TabPanel>{<Interweave content={mac.minimum} />}</TabPanel>
<TabPanel>{<Interweave content={mac.recommended} />}</TabPanel>
</TabPanels>
</Tabs>
</TabPanel>
<TabPanel>
<Tabs isLazy>
<TabList>
<Tab isDisabled={linMin}>Minimum</Tab>
<Tab isDisabled={linRec}>Recommended</Tab>
</TabList>
<TabPanels>
<TabPanel>{<Interweave content={linux.minimum} />}</TabPanel>
<TabPanel>{<Interweave content={linux.recommended} />}</TabPanel>
</TabPanels>
</Tabs>
</TabPanel>
</TabPanels>
</Tabs>
<Tabs.Root lazyMount mt='3' defaultValue="windows">
<Tabs.List>
<Tabs.Trigger value="windows">Windows</Tabs.Trigger>
<Tabs.Trigger value="mac" disabled={macMin}>Mac</Tabs.Trigger>
<Tabs.Trigger value="linux" disabled={linMin}>Linux</Tabs.Trigger>
</Tabs.List>
<Tabs.ContentGroup>
<Tabs.Content value="windows">
<Tabs.Root lazyMount defaultValue="win-min">
<Tabs.List>
<Tabs.Trigger value="win-min">Minimum</Tabs.Trigger>
<Tabs.Trigger value="win-rec" disabled={winRec}>Recommended</Tabs.Trigger>
</Tabs.List>
<Tabs.ContentGroup>
<Tabs.Content value="win-min">{<Interweave content={windows.minimum} />}</Tabs.Content>
<Tabs.Content value="win-rec">{<Interweave content={windows.recommended} />}</Tabs.Content>
</Tabs.ContentGroup>
</Tabs.Root>
</Tabs.Content>
<Tabs.Content value="mac">
<Tabs.Root lazyMount defaultValue="mac-min">
<Tabs.List>
<Tabs.Trigger value="mac-min" disabled={macMin}>Minimum</Tabs.Trigger>
<Tabs.Trigger value="mac-rec" disabled={macRec}>Recommended</Tabs.Trigger>
</Tabs.List>
<Tabs.ContentGroup>
<Tabs.Content value="mac-min">{<Interweave content={mac.minimum} />}</Tabs.Content>
<Tabs.Content value="mac-rec">{<Interweave content={mac.recommended} />}</Tabs.Content>
</Tabs.ContentGroup>
</Tabs.Root>
</Tabs.Content>
<Tabs.Content value="linux">
<Tabs.Root lazyMount defaultValue="lin-min">
<Tabs.List>
<Tabs.Trigger value="lin-min" disabled={linMin}>Minimum</Tabs.Trigger>
<Tabs.Trigger value="lin-rec" disabled={linRec}>Recommended</Tabs.Trigger>
</Tabs.List>
<Tabs.ContentGroup>
<Tabs.Content value="lin-min">{<Interweave content={linux.minimum} />}</Tabs.Content>
<Tabs.Content value="lin-rec">{<Interweave content={linux.recommended} />}</Tabs.Content>
</Tabs.ContentGroup>
</Tabs.Root>
</Tabs.Content>
</Tabs.ContentGroup>
</Tabs.Root>
</Box>
)
}
src/components/detailsComponents/SystemRequirementsModal.tsx
+12 -12
View File
@@ -1,5 +1,6 @@
import React from 'react'
import { Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react'
import { Button } from '@chakra-ui/react'
import {DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogRoot} from '../ui/dialog'
import { ImmutableObject } from '@hookstate/core'
import { Data } from '../../models/game'
import SystemRequirements from './SystemRequirementsMenu'
@@ -14,20 +15,19 @@ interface Props {
const SummaryModal = ({ isOpen, onClose, game }: Props) => {
return (
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent maxW={'90%'}>
<ModalCloseButton />
<ModalBody>
<DialogRoot open={isOpen} onOpenChange={(e) => { if (!e.open) onClose() }}>
<DialogContent maxW={'90%'}>
<DialogCloseTrigger />
<DialogBody>
<SystemRequirements game={game} />
</ModalBody>
<ModalFooter>
<Button colorScheme='blue' onMouseDown={onClose}>
</DialogBody>
<DialogFooter>
<Button colorPalette='blue' onMouseDown={onClose}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</DialogFooter>
</DialogContent>
</DialogRoot>
)
}
src/components/formFields/CheckboxInput.tsx
+6 -4
View File
@@ -1,5 +1,6 @@
import React from 'react'
import { Checkbox, Text } from '@chakra-ui/react'
import { Text } from '@chakra-ui/react'
import {Checkbox} from '../ui/checkbox'
interface Props {
label: string
@@ -12,13 +13,14 @@ interface Props {
const CheckboxInput = ({ label, textField, checked, defaultIsChecked, handleOSChange }: Props) => {
return (
<Checkbox
colorPalette="blue"
defaultChecked={defaultIsChecked}
isChecked={checked}
onChange={() => {
checked={checked}
onCheckedChange={() => {
handleOSChange(textField)
}}
name={textField}
spacing="1rem"
gap="1rem"
><Text mt="1">{label}</Text></Checkbox>
)
}
src/components/formFields/CreatableSelectInput.tsx
+8 -8
View File
@@ -1,6 +1,7 @@
import React from 'react'
import { Box, FormControl, FormLabel } from '@chakra-ui/react'
import { CreatableSelect } from 'chakra-react-select'
import { Box } from '@chakra-ui/react'
import { Field } from '../ui/field'
import { CreatableSelect } from '../FixedSelect'
interface Props {
label: string
@@ -13,13 +14,12 @@ interface Props {
const CreatableSelectInput = ({ label, textField, value, bg, handleInputChange, options}: Props) => {
return (
<FormControl mb="3">
<FormLabel>{label}</FormLabel>
<Field mb="3" label={label}>
<Box
bg={bg}
border="1px"
borderColor="gray.500"
rounded="md">
rounded="md"
w="full"
>
<CreatableSelect
name={textField}
isClearable
@@ -39,7 +39,7 @@ const CreatableSelectInput = ({ label, textField, value, bg, handleInputChange,
options={options}
/>
</Box>
</FormControl>
</Field>
)
}
src/components/formFields/SelectInput.tsx
+7 -9
View File
@@ -1,6 +1,7 @@
import React from 'react'
import {Box, FormControl, FormLabel} from '@chakra-ui/react'
import {Select} from 'chakra-react-select'
import {Box} from '@chakra-ui/react'
import { Field } from '../ui/field'
import {Select} from '../FixedSelect'
interface Props {
label: string
@@ -14,18 +15,15 @@ interface Props {
const SelectInput = ({label, textField, field, bg, handleAccessedBy, options, width = ''}: Props) => {
return (
<FormControl mb="3">
<FormLabel>{label}</FormLabel>
<Field mb="3" label={label}>
<Box
bg={bg}
w={width}
border="1px"
borderColor="gray.500"
w={width || 'full'}
rounded="md">
<Select
id={textField}
name={textField}
onChange={(values) => {
onChange={(values: any) => {
if (values) handleAccessedBy(textField, values.value)
}}
options={options}
@@ -35,7 +33,7 @@ const SelectInput = ({label, textField, field, bg, handleAccessedBy, options, wi
}}
/>
</Box>
</FormControl>
</Field>
)
}
src/components/formFields/SingleFieldInput.tsx
+6 -6
View File
@@ -1,5 +1,6 @@
import React from 'react'
import { FormControl, FormLabel, Input } from '@chakra-ui/react'
import { Input } from '@chakra-ui/react'
import { Field } from '../ui/field'
import { Data } from '../../models/game'
interface Props {
@@ -14,15 +15,14 @@ interface Props {
const SingleFieldInput = ({ label, textField, field, bg, handleInputChange, required }: Props) => {
return (
<FormControl mb="3">
<FormLabel>{label}</FormLabel>
<Field mb="3" label={label}>
<Input
id={textField}
name={textField}
bg={bg}
type="text"
border="1px"
borderColor="gray.500"
borderWidth="1px" borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
value={field}
required={required}
@@ -30,7 +30,7 @@ const SingleFieldInput = ({ label, textField, field, bg, handleInputChange, requ
handleInputChange(textField, e.target.value)
}}
/>
</FormControl>
</Field>
)
}
src/components/formFields/SingleFieldNumericInput.tsx
+45 -21
View File
@@ -1,39 +1,63 @@
import React from 'react'
import { FormControl, FormLabel, Input } from '@chakra-ui/react'
import { Data } from '../../models/game'
import React from "react";
import { Input } from "@chakra-ui/react";
import { Field } from "../ui/field";
import { Data } from "../../models/game";
interface Props {
label: string
textField: string
field: string
bg: string
handleInputChange: <G extends keyof Data>(name: string, value: Data[G]) => void
required: boolean
label: string;
textField: string;
field: string;
bg: string;
handleInputChange: <G extends keyof Data>(
name: string,
value: Data[G],
) => void;
required: boolean;
}
const SingleFieldNumericInput = ({ label, textField, field, bg, handleInputChange, required }: Props) => {
const SingleFieldNumericInput = ({
label,
textField,
field,
bg,
handleInputChange,
required,
}: Props) => {
const isValidSteamValue = (v: string) => {
const s = v.trim();
if (!s) return false;
if (/^\d+$/.test(s)) return true;
return s.includes("store.steampowered.com");
};
const showError = field.trim() !== "" && !isValidSteamValue(field);
return (
<FormControl mb="3">
<FormLabel>{label}</FormLabel>
<Field
mb="3"
label={label}
errorText="Enter a Steam App Id or a Steam App URL"
>
<Input
id={textField}
name={textField}
bg={bg}
type="text"
inputMode="numeric"
pattern="[0-9]*"
border="1px"
borderColor="gray.500"
inputMode="text"
aria-invalid={showError}
placeholder="Steam Id or Steam URL"
borderWidth="1px"
borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
value={field}
required={required}
onChange={(e) => {
handleInputChange(textField, e.target.value)
handleInputChange(textField, e.target.value);
}}
/>
</FormControl>
)
}
</Field>
);
};
export default SingleFieldNumericInput
export default SingleFieldNumericInput;
src/components/formFields/SystemRequirementsTextareaInput.tsx
+4 -5
View File
@@ -1,5 +1,5 @@
import React, {useMemo, useRef} from 'react'
import {FormControl, FormLabel} from '@chakra-ui/react'
import {Field} from '../ui/field'
import JoditEditor from "jodit-react";
interface Props {
@@ -24,17 +24,16 @@ const SystemRequirementsTextareaInput = ({label, textField, field, handleSystemR
);
return (
<FormControl mb="3">
<FormLabel>{label}</FormLabel>
<Field mb="3" label={label}>
<JoditEditor
ref={editor}
value={field}
config={config}
onChange={(value) => {
onChange={(value: string) => {
handleSystemRequirements(arrText[1], arrText[2], value)
}}
/>
</FormControl>
</Field>
)
}
src/components/formFields/TextareaInput.tsx
+4 -5
View File
@@ -1,5 +1,5 @@
import React, {useMemo, useRef} from 'react'
import { FormControl, FormLabel } from '@chakra-ui/react'
import { Field } from '../ui/field'
import { Data } from '../../models/game'
import JoditEditor from "jodit-react";
@@ -25,17 +25,16 @@ const TextareaInput = ({ label, textField, field, handleInputChange }: Props) =>
return (
<FormControl mb="3">
<FormLabel>{label}</FormLabel>
<Field mb="3" label={label}>
<JoditEditor
ref={editor}
value={field}
config={config}
onChange={(value) => {
onChange={(value: string) => {
handleInputChange(textField, value)
}}
/>
</FormControl>
</Field>
)
}
src/components/helperComponents/ResetFilterButton.tsx
+5 -5
View File
@@ -9,12 +9,12 @@ import { ratingState, steamRatingState } from "../../stateManagement/ratingState
interface Props {
text?: string
size?: string
variant?: string
colorScheme?: string
size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
variant?: "solid" | "subtle" | "surface" | "outline" | "ghost" | "plain"
colorPalette?: string
}
const ResetFilterButton = ({ text = "Reset Search and Filters", size = 'md', variant = 'solid', colorScheme = 'gray' }: Props) => {
const ResetFilterButton = ({ text = "Reset Search and Filters", size = 'md', variant = 'solid', colorPalette = 'gray' }: Props) => {
const gameState = useHookstate(gameDashboardState)
const games = gameState.get()
const admin = useHookstate(adminMode).get()
@@ -58,7 +58,7 @@ const ResetFilterButton = ({ text = "Reset Search and Filters", size = 'md', var
}
return (
<Button onMouseDown={resetFilters} size={size} variant={variant} colorScheme={colorScheme}>
<Button onMouseDown={resetFilters} size={size} variant={variant} colorPalette={colorPalette}>
{text}
</Button>
)
src/components/helperComponents/SteamAndDeckLogo.tsx
+9 -6
View File
@@ -9,17 +9,19 @@ const SteamAndDeckLogo = (props: ISteamAndDeckLogo) => {
return (
<div>
<Box
as="svg"
role="img"
asChild
width={props.size}
height={props.size}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1080 1080"
fill="#1f2127"
_hover={{
fill: "brand.accent",
fill: "blue.500",
}}
>
<svg
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1080 1080"
fill="#1f2127"
>
<title>SteamAndDeckLogo</title>
<path
fill="url(#_Radial1)"
@@ -97,6 +99,7 @@ const SteamAndDeckLogo = (props: ISteamAndDeckLogo) => {
<stop offset="1" stopColor="#00A6FF" stopOpacity="0.6"></stop>
</linearGradient>
</defs>
</svg>
</Box>
</div>
);
src/components/ui/alert.tsx
+29
View File
@@ -0,0 +1,29 @@
import { Alert as ChakraAlert } from "@chakra-ui/react"
import * as React from "react"
export interface AlertProps extends Omit<ChakraAlert.RootProps, "title"> {
startElement?: React.ReactNode
endElement?: React.ReactNode
title?: React.ReactNode
icon?: React.ReactElement
}
export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
function Alert(props, ref) {
const { title, children, icon, startElement, endElement, ...rest } = props
return (
<ChakraAlert.Root ref={ref} {...rest}>
{startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
{children ? (
<ChakraAlert.Content>
<ChakraAlert.Title>{title}</ChakraAlert.Title>
<ChakraAlert.Description>{children}</ChakraAlert.Description>
</ChakraAlert.Content>
) : (
<ChakraAlert.Title flex="1">{title}</ChakraAlert.Title>
)}
{endElement}
</ChakraAlert.Root>
)
},
)
src/components/ui/avatar.tsx
+34
View File
@@ -0,0 +1,34 @@
import {
Avatar as ChakraAvatar,
AvatarGroup as ChakraAvatarGroup,
} from "@chakra-ui/react"
import * as React from "react"
type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>
export interface AvatarProps extends ChakraAvatar.RootProps {
name?: string
src?: string
srcSet?: string
loading?: ImageProps["loading"]
icon?: React.ReactElement
fallback?: React.ReactNode
}
export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
function Avatar(props, ref) {
const { name, src, srcSet, loading, icon, fallback, children, ...rest } =
props
return (
<ChakraAvatar.Root ref={ref} {...rest}>
<ChakraAvatar.Fallback name={name}>
{icon || fallback}
</ChakraAvatar.Fallback>
<ChakraAvatar.Image src={src} srcSet={srcSet} loading={loading} />
{children}
</ChakraAvatar.Root>
)
},
)
export const AvatarGroup = ChakraAvatarGroup
src/components/ui/checkbox.tsx
+25
View File
@@ -0,0 +1,25 @@
import { Checkbox as ChakraCheckbox } from "@chakra-ui/react"
import * as React from "react"
export interface CheckboxProps extends ChakraCheckbox.RootProps {
icon?: React.ReactNode
inputProps?: React.InputHTMLAttributes<HTMLInputElement>
rootRef?: React.RefObject<HTMLLabelElement | null>
}
export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
function Checkbox(props, ref) {
const { icon, children, inputProps, rootRef, ...rest } = props
return (
<ChakraCheckbox.Root ref={rootRef} {...rest}>
<ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
<ChakraCheckbox.Control>
{icon || <ChakraCheckbox.Indicator />}
</ChakraCheckbox.Control>
{children != null && (
<ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>
)}
</ChakraCheckbox.Root>
)
},
)
src/components/ui/close-button.tsx
+17
View File
@@ -0,0 +1,17 @@
import type { ButtonProps } from "@chakra-ui/react"
import { IconButton as ChakraIconButton } from "@chakra-ui/react"
import * as React from "react"
import { LuX } from "react-icons/lu"
export type CloseButtonProps = ButtonProps
export const CloseButton = React.forwardRef<
HTMLButtonElement,
CloseButtonProps
>(function CloseButton(props, ref) {
return (
<ChakraIconButton variant="ghost" aria-label="Close" ref={ref} {...props}>
{props.children ?? <LuX />}
</ChakraIconButton>
)
})
src/components/ui/color-mode.tsx
+108
View File
@@ -0,0 +1,108 @@
"use client"
import type { IconButtonProps, SpanProps } from "@chakra-ui/react"
import { ClientOnly, IconButton, Skeleton, Span } from "@chakra-ui/react"
import { ThemeProvider, useTheme } from "next-themes"
import type { ThemeProviderProps } from "next-themes"
import * as React from "react"
import { LuMoon, LuSun } from "react-icons/lu"
export interface ColorModeProviderProps extends ThemeProviderProps {}
export function ColorModeProvider(props: ColorModeProviderProps) {
return (
<ThemeProvider attribute="class" defaultTheme="dark" disableTransitionOnChange {...props} />
)
}
export type ColorMode = "light" | "dark"
export interface UseColorModeReturn {
colorMode: ColorMode
setColorMode: (colorMode: ColorMode) => void
toggleColorMode: () => void
}
export function useColorMode(): UseColorModeReturn {
const { resolvedTheme, setTheme, forcedTheme } = useTheme()
const colorMode = forcedTheme || resolvedTheme
const toggleColorMode = () => {
setTheme(resolvedTheme === "dark" ? "light" : "dark")
}
return {
colorMode: colorMode as ColorMode,
setColorMode: setTheme,
toggleColorMode,
}
}
export function useColorModeValue<T>(light: T, dark: T) {
const { colorMode } = useColorMode()
return colorMode === "dark" ? dark : light
}
export function ColorModeIcon() {
const { colorMode } = useColorMode()
return colorMode === "dark" ? <LuMoon /> : <LuSun />
}
interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
export const ColorModeButton = React.forwardRef<
HTMLButtonElement,
ColorModeButtonProps
>(function ColorModeButton(props, ref) {
const { toggleColorMode } = useColorMode()
return (
<ClientOnly fallback={<Skeleton boxSize="9" />}>
<IconButton
onClick={toggleColorMode}
variant="ghost"
aria-label="Toggle color mode"
size="sm"
ref={ref}
{...props}
css={{
_icon: {
width: "5",
height: "5",
},
}}
>
<ColorModeIcon />
</IconButton>
</ClientOnly>
)
})
export const LightMode = React.forwardRef<HTMLSpanElement, SpanProps>(
function LightMode(props, ref) {
return (
<Span
color="fg"
display="contents"
className="chakra-theme light"
colorPalette="gray"
colorScheme="light"
ref={ref}
{...props}
/>
)
},
)
export const DarkMode = React.forwardRef<HTMLSpanElement, SpanProps>(
function DarkMode(props, ref) {
return (
<Span
color="fg"
display="contents"
className="chakra-theme dark"
colorPalette="gray"
colorScheme="dark"
ref={ref}
{...props}
/>
)
},
)
src/components/ui/dialog.tsx
+62
View File
@@ -0,0 +1,62 @@
import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react"
import { CloseButton } from "./close-button"
import * as React from "react"
interface DialogContentProps extends ChakraDialog.ContentProps {
portalled?: boolean
portalRef?: React.RefObject<HTMLElement | null>
backdrop?: boolean
}
export const DialogContent = React.forwardRef<
HTMLDivElement,
DialogContentProps
>(function DialogContent(props, ref) {
const {
children,
portalled = true,
portalRef,
backdrop = true,
...rest
} = props
return (
<Portal disabled={!portalled} container={portalRef}>
{backdrop && <ChakraDialog.Backdrop />}
<ChakraDialog.Positioner>
<ChakraDialog.Content ref={ref} {...rest} asChild={false}>
{children}
</ChakraDialog.Content>
</ChakraDialog.Positioner>
</Portal>
)
})
export const DialogCloseTrigger = React.forwardRef<
HTMLButtonElement,
ChakraDialog.CloseTriggerProps
>(function DialogCloseTrigger(props, ref) {
return (
<ChakraDialog.CloseTrigger
position="absolute"
top="2"
insetEnd="2"
{...props}
asChild
>
<CloseButton size="sm" ref={ref}>
{props.children}
</CloseButton>
</ChakraDialog.CloseTrigger>
)
})
export const DialogRoot = ChakraDialog.Root
export const DialogFooter = ChakraDialog.Footer
export const DialogHeader = ChakraDialog.Header
export const DialogBody = ChakraDialog.Body
export const DialogBackdrop = ChakraDialog.Backdrop
export const DialogTitle = ChakraDialog.Title
export const DialogDescription = ChakraDialog.Description
export const DialogTrigger = ChakraDialog.Trigger
export const DialogActionTrigger = ChakraDialog.ActionTrigger
src/components/ui/drawer.tsx
+61
View File
@@ -0,0 +1,61 @@
import { Drawer as ChakraDrawer, Portal } from "@chakra-ui/react"
import { CloseButton } from "./close-button"
import * as React from "react"
interface DrawerContentProps extends ChakraDrawer.ContentProps {
portalled?: boolean
portalRef?: React.RefObject<HTMLElement | null>
offset?: ChakraDrawer.ContentProps["padding"]
backdrop?: boolean
}
export const DrawerContent = React.forwardRef<
HTMLDivElement,
DrawerContentProps
>(function DrawerContent(props, ref) {
const {
children,
portalled = true,
portalRef,
offset,
backdrop = true,
...rest
} = props
return (
<Portal disabled={!portalled} container={portalRef}>
{backdrop && <ChakraDrawer.Backdrop />}
<ChakraDrawer.Positioner padding={offset}>
<ChakraDrawer.Content ref={ref} {...rest} asChild={false}>
{children}
</ChakraDrawer.Content>
</ChakraDrawer.Positioner>
</Portal>
)
})
export const DrawerCloseTrigger = React.forwardRef<
HTMLButtonElement,
ChakraDrawer.CloseTriggerProps
>(function DrawerCloseTrigger(props, ref) {
return (
<ChakraDrawer.CloseTrigger
position="absolute"
top="2"
insetEnd="2"
{...props}
asChild
>
<CloseButton size="sm" ref={ref} />
</ChakraDrawer.CloseTrigger>
)
})
export const DrawerTrigger = ChakraDrawer.Trigger
export const DrawerRoot = ChakraDrawer.Root
export const DrawerFooter = ChakraDrawer.Footer
export const DrawerHeader = ChakraDrawer.Header
export const DrawerBody = ChakraDrawer.Body
export const DrawerBackdrop = ChakraDrawer.Backdrop
export const DrawerDescription = ChakraDrawer.Description
export const DrawerTitle = ChakraDrawer.Title
export const DrawerActionTrigger = ChakraDrawer.ActionTrigger
src/components/ui/field.tsx
+33
View File
@@ -0,0 +1,33 @@
import { Field as ChakraField } from "@chakra-ui/react"
import * as React from "react"
export interface FieldProps extends Omit<ChakraField.RootProps, "label"> {
label?: React.ReactNode
helperText?: React.ReactNode
errorText?: React.ReactNode
optionalText?: React.ReactNode
}
export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
function Field(props, ref) {
const { label, children, helperText, errorText, optionalText, ...rest } =
props
return (
<ChakraField.Root ref={ref} {...rest}>
{label && (
<ChakraField.Label textStyle="md">
{label}
<ChakraField.RequiredIndicator fallback={optionalText} />
</ChakraField.Label>
)}
{children}
{helperText && (
<ChakraField.HelperText>{helperText}</ChakraField.HelperText>
)}
{errorText && (
<ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
)}
</ChakraField.Root>
)
},
)
src/components/ui/menu.tsx
+112
View File
@@ -0,0 +1,112 @@
"use client"
import { AbsoluteCenter, Menu as ChakraMenu, Portal } from "@chakra-ui/react"
import * as React from "react"
import { LuCheck, LuChevronRight } from "react-icons/lu"
interface MenuContentProps extends ChakraMenu.ContentProps {
portalled?: boolean
portalRef?: React.RefObject<HTMLElement | null>
}
export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(
function MenuContent(props, ref) {
const { portalled = true, portalRef, ...rest } = props
return (
<Portal disabled={!portalled} container={portalRef}>
<ChakraMenu.Positioner>
<ChakraMenu.Content ref={ref} {...rest} />
</ChakraMenu.Positioner>
</Portal>
)
},
)
export const MenuArrow = React.forwardRef<
HTMLDivElement,
ChakraMenu.ArrowProps
>(function MenuArrow(props, ref) {
return (
<ChakraMenu.Arrow ref={ref} {...props}>
<ChakraMenu.ArrowTip />
</ChakraMenu.Arrow>
)
})
export const MenuCheckboxItem = React.forwardRef<
HTMLDivElement,
ChakraMenu.CheckboxItemProps
>(function MenuCheckboxItem(props, ref) {
return (
<ChakraMenu.CheckboxItem ps="8" ref={ref} {...props}>
<AbsoluteCenter axis="horizontal" insetStart="4" asChild>
<ChakraMenu.ItemIndicator>
<LuCheck />
</ChakraMenu.ItemIndicator>
</AbsoluteCenter>
{props.children}
</ChakraMenu.CheckboxItem>
)
})
export const MenuRadioItem = React.forwardRef<
HTMLDivElement,
ChakraMenu.RadioItemProps
>(function MenuRadioItem(props, ref) {
const { children, ...rest } = props
return (
<ChakraMenu.RadioItem ps="8" ref={ref} {...rest}>
<AbsoluteCenter axis="horizontal" insetStart="4" asChild>
<ChakraMenu.ItemIndicator>
<LuCheck />
</ChakraMenu.ItemIndicator>
</AbsoluteCenter>
<ChakraMenu.ItemText>{children}</ChakraMenu.ItemText>
</ChakraMenu.RadioItem>
)
})
export const MenuItemGroup = React.forwardRef<
HTMLDivElement,
ChakraMenu.ItemGroupProps
>(function MenuItemGroup(props, ref) {
const { title, children, ...rest } = props
return (
<ChakraMenu.ItemGroup ref={ref} {...rest}>
{title && (
<ChakraMenu.ItemGroupLabel userSelect="none">
{title}
</ChakraMenu.ItemGroupLabel>
)}
{children}
</ChakraMenu.ItemGroup>
)
})
export interface MenuTriggerItemProps extends ChakraMenu.ItemProps {
startIcon?: React.ReactNode
}
export const MenuTriggerItem = React.forwardRef<
HTMLDivElement,
MenuTriggerItemProps
>(function MenuTriggerItem(props, ref) {
const { startIcon, children, ...rest } = props
return (
<ChakraMenu.TriggerItem ref={ref} {...rest}>
{startIcon}
{children}
<LuChevronRight />
</ChakraMenu.TriggerItem>
)
})
export const MenuRadioItemGroup = ChakraMenu.RadioItemGroup
export const MenuContextTrigger = ChakraMenu.ContextTrigger
export const MenuRoot = ChakraMenu.Root
export const MenuSeparator = ChakraMenu.Separator
export const MenuItem = ChakraMenu.Item
export const MenuItemText = ChakraMenu.ItemText
export const MenuItemCommand = ChakraMenu.ItemCommand
export const MenuTrigger = ChakraMenu.Trigger
src/components/ui/number-input.tsx
+28
View File
@@ -0,0 +1,28 @@
import { NumberInput as ChakraNumberInput } from "@chakra-ui/react"
import * as React from "react"
export interface NumberInputProps extends ChakraNumberInput.RootProps {}
export const NumberInputRoot = React.forwardRef<
HTMLDivElement,
NumberInputProps
>(function NumberInput(props, ref) {
const { children, ...rest } = props
return (
<ChakraNumberInput.Root
ref={ref}
variant="outline"
{...rest}
>
{children}
<ChakraNumberInput.Control>
<ChakraNumberInput.IncrementTrigger />
<ChakraNumberInput.DecrementTrigger />
</ChakraNumberInput.Control>
</ChakraNumberInput.Root>
)
})
export const NumberInputField = ChakraNumberInput.Input
export const NumberInputScrubber = ChakraNumberInput.Scrubber
export const NumberInputLabel = ChakraNumberInput.Label
src/components/ui/provider.tsx
+16
View File
@@ -0,0 +1,16 @@
"use client"
import { ChakraProvider } from "@chakra-ui/react"
import {
ColorModeProvider,
type ColorModeProviderProps,
} from "./color-mode"
import system from "../../styles/theme"
export function Provider(props: ColorModeProviderProps) {
return (
<ChakraProvider value={system}>
<ColorModeProvider {...props} />
</ChakraProvider>
)
}
src/components/ui/switch.tsx
+39
View File
@@ -0,0 +1,39 @@
import { Switch as ChakraSwitch } from "@chakra-ui/react"
import * as React from "react"
export interface SwitchProps extends ChakraSwitch.RootProps {
inputProps?: React.InputHTMLAttributes<HTMLInputElement>
rootRef?: React.RefObject<HTMLLabelElement | null>
trackLabel?: { on: React.ReactNode; off: React.ReactNode }
thumbLabel?: { on: React.ReactNode; off: React.ReactNode }
}
export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
function Switch(props, ref) {
const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } =
props
return (
<ChakraSwitch.Root ref={rootRef} {...rest}>
<ChakraSwitch.HiddenInput ref={ref} {...inputProps} />
<ChakraSwitch.Control>
<ChakraSwitch.Thumb>
{thumbLabel && (
<ChakraSwitch.ThumbIndicator fallback={thumbLabel?.off}>
{thumbLabel?.on}
</ChakraSwitch.ThumbIndicator>
)}
</ChakraSwitch.Thumb>
{trackLabel && (
<ChakraSwitch.Indicator fallback={trackLabel.off}>
{trackLabel.on}
</ChakraSwitch.Indicator>
)}
</ChakraSwitch.Control>
{children != null && (
<ChakraSwitch.Label>{children}</ChakraSwitch.Label>
)}
</ChakraSwitch.Root>
)
},
)
src/components/ui/tag.tsx
+42
View File
@@ -0,0 +1,42 @@
import { Tag as ChakraTag } from "@chakra-ui/react"
import * as React from "react"
export interface TagProps extends ChakraTag.RootProps {
startElement?: React.ReactNode
endElement?: React.ReactNode
onClose?: VoidFunction
closable?: boolean
}
export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
function Tag(props, ref) {
const {
startElement,
endElement,
onClose,
closable = !!onClose,
children,
size,
...rest
} = props
// v2 tag text per size (v3 renders one step smaller)
const labelTextStyle = size === 'lg' ? 'md' : size === 'sm' ? 'xs' : 'sm'
return (
<ChakraTag.Root ref={ref} size={size} {...rest}>
{startElement && (
<ChakraTag.StartElement>{startElement}</ChakraTag.StartElement>
)}
<ChakraTag.Label textStyle={labelTextStyle}>{children}</ChakraTag.Label>
{endElement && (
<ChakraTag.EndElement>{endElement}</ChakraTag.EndElement>
)}
{closable && (
<ChakraTag.EndElement>
<ChakraTag.CloseTrigger onClick={onClose} />
</ChakraTag.EndElement>
)}
</ChakraTag.Root>
)
},
)
src/components/ui/toaster.tsx
+43
View File
@@ -0,0 +1,43 @@
"use client"
import {
Toaster as ChakraToaster,
Portal,
Spinner,
Stack,
Toast,
createToaster,
} from "@chakra-ui/react"
export const toaster = createToaster({
placement: "bottom-end",
pauseOnPageIdle: true,
})
export const Toaster = () => {
return (
<Portal>
<ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
{(toast) => (
<Toast.Root width={{ md: "sm" }}>
{toast.type === "loading" ? (
<Spinner size="sm" color="blue.solid" />
) : (
<Toast.Indicator />
)}
<Stack gap="1" flex="1" maxWidth="100%">
{toast.title && <Toast.Title>{toast.title}</Toast.Title>}
{toast.description && (
<Toast.Description>{toast.description}</Toast.Description>
)}
</Stack>
{toast.action && (
<Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
)}
{toast.closable && <Toast.CloseTrigger />}
</Toast.Root>
)}
</ChakraToaster>
</Portal>
)
}
src/components/ui/tooltip.tsx
+46
View File
@@ -0,0 +1,46 @@
import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"
import * as React from "react"
export interface TooltipProps extends ChakraTooltip.RootProps {
showArrow?: boolean
portalled?: boolean
portalRef?: React.RefObject<HTMLElement | null>
content: React.ReactNode
contentProps?: ChakraTooltip.ContentProps
disabled?: boolean
}
export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
function Tooltip(props, ref) {
const {
showArrow,
children,
disabled,
portalled = true,
content,
contentProps,
portalRef,
...rest
} = props
if (disabled) return children
return (
<ChakraTooltip.Root {...rest}>
<ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
<Portal disabled={!portalled} container={portalRef}>
<ChakraTooltip.Positioner>
<ChakraTooltip.Content ref={ref} {...contentProps}>
{showArrow && (
<ChakraTooltip.Arrow>
<ChakraTooltip.ArrowTip />
</ChakraTooltip.Arrow>
)}
{content}
</ChakraTooltip.Content>
</ChakraTooltip.Positioner>
</Portal>
</ChakraTooltip.Root>
)
},
)
src/components/userComponents/CreateUser.tsx
+30 -45
View File
@@ -3,15 +3,13 @@ import { useForm } from 'react-hook-form'
import { UserFormValues } from '../../models/user'
import { createUser } from '../../stateManagement/userState'
import {
Alert,
AlertDescription,
AlertIcon,
Button,
Container,
FormControl, FormErrorMessage,
FormLabel,
Input, useColorModeValue,
Input,
} from '@chakra-ui/react'
import {Field} from '../ui/field'
import {Alert} from '../ui/alert'
import {useColorModeValue} from '../ui/color-mode'
export default function CreateUser() {
const {
@@ -44,59 +42,52 @@ export default function CreateUser() {
return (
<Container style={{ marginTop: '7rem', paddingBottom: '5rem' }}>
<form onSubmit={onSubmit}>
<FormControl isInvalid={Boolean(errors.name)} mb={'3'}>
<FormLabel htmlFor='name'>Full Name</FormLabel>
<Field label="Full Name" invalid={Boolean(errors.name)} errorText={errors.name?.message?.toString()} mb={'3'}>
<Input
id='name'
bg={bg}
_placeholder={{ color: 'gray.500' }}
border="1px"
borderColor="gray.500"
borderWidth="1px" borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
placeholder='Full Name'
{...register('name', { required: 'Name is required' })}
/>
{errors.name && <FormErrorMessage>{ errors.name.message?.toString()}</FormErrorMessage>}
</FormControl>
<FormControl isInvalid={Boolean(errors.displayName)} mb={'3'}>
<FormLabel htmlFor='displayName'>Display Name</FormLabel>
</Field>
<Field label="Display Name" invalid={Boolean(errors.displayName)} errorText={errors.displayName?.message?.toString()} mb={'3'}>
<Input
id='displayName'
bg={bg}
_placeholder={{ color: 'gray.500' }}
border="1px"
borderColor="gray.500"
borderWidth="1px" borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
placeholder='Display Name'
{...register('displayName', { required: 'Display Name is required' })}
/>
{errors.displayName && <FormErrorMessage>{ errors.displayName.message?.toString()}</FormErrorMessage>}
</FormControl>
<FormControl isInvalid={Boolean(errors.email)} mb={'3'}>
<FormLabel htmlFor='email'>Email</FormLabel>
</Field>
<Field label="Email" invalid={Boolean(errors.email)} errorText={errors.email?.message?.toString()} mb={'3'}>
<Input
id='email'
bg={bg}
_placeholder={{ color: 'gray.500' }}
border="1px"
borderColor="gray.500"
borderWidth="1px" borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
placeholder='Email'
{...register('email', { required: 'Email is required' })}
/>
{errors.email && <FormErrorMessage>{ errors.email.message?.toString()}</FormErrorMessage>}
</FormControl>
<FormControl isInvalid={Boolean(errors.password)} mb={'3'}>
<FormLabel htmlFor='password'>Password</FormLabel>
</Field>
<Field label="Password" invalid={Boolean(errors.password)} errorText={errors.password?.message?.toString()} mb={'3'}>
<Input
id='password'
bg={bg}
_placeholder={{ color: 'gray.500' }}
border="1px"
borderColor="gray.500"
borderWidth="1px" borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
placeholder='Password'
type='password'
@@ -108,26 +99,22 @@ export default function CreateUser() {
},
})}
/>
{errors.password && <FormErrorMessage>{ errors.password.message?.toString()}</FormErrorMessage>}
</FormControl>
</Field>
{errors.password && (
<>
<Alert status='error' style={{ marginBottom: 10 }}>
<AlertIcon />
<AlertDescription>{errors.password.message?.toString()}</AlertDescription>
{/*<CloseButton position='absolute' right='8px' top='8px' />*/}
<Alert status='error' title={errors.password.message?.toString()} style={{ marginBottom: 10 }}>
{errors.password.message?.toString()}
</Alert>
<br />
</>
)}
<FormControl isInvalid={Boolean(errors.repeat_password)} mb={'3'}>
<FormLabel htmlFor='repeat_password'>Repeat Password</FormLabel>
<Field label="Repeat Password" invalid={Boolean(errors.repeat_password)} errorText={errors.repeat_password?.message?.toString()} mb={'3'}>
<Input
id='repeat_password'
bg={bg}
_placeholder={{ color: 'gray.500' }}
border="1px"
borderColor="gray.500"
borderWidth="1px" borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
placeholder='Repeat Password'
type='password'
@@ -136,22 +123,20 @@ export default function CreateUser() {
value === password.current || 'The passwords do not match',
})}
/>
{errors.repeat_password && <FormErrorMessage>{ errors.repeat_password.message?.toString()}</FormErrorMessage>}
</FormControl>
</Field>
{errors.repeat_password && (
<>
<Alert status='error' style={{ marginBottom: 10 }}>
<AlertIcon />
<AlertDescription>{errors.repeat_password.message?.toString()}</AlertDescription>
{/*<CloseButton position='absolute' right='8px' top='8px' />*/}
<Alert status='error' title={errors.repeat_password.message?.toString()} style={{ marginBottom: 10 }}>
{errors.repeat_password.message?.toString()}
</Alert>
</>
)}
<br />
<Button
type='submit'
colorPalette="blue"
disabled={!isDirty}
isLoading={isSubmitting}
loading={isSubmitting}
>
Submit
</Button>
src/components/userComponents/EditUser.tsx
+33 -44
View File
@@ -5,14 +5,14 @@ import { loadedPreferences, loggedInUser, updateUserPreferences } from '../../st
import {
Button,
Container, Flex,
FormControl,
FormLabel,
Heading,
Input,
Stack, Switch,
useColorModeValue,
useToast,
Stack,
} from '@chakra-ui/react'
import {Field} from '../ui/field'
import {Switch} from '../ui/switch'
import {useColorModeValue} from '../ui/color-mode'
import {toaster} from '../ui/toaster'
import { useHookstate } from '@hookstate/core'
import agent from '../../api/agent'
import { useNavigate } from 'react-router-dom'
@@ -43,12 +43,10 @@ export default function EditUser() {
const history = useNavigate()
useEffect(() => {
reset(user)
reset(user as any)
return
}, [user.name !== ''])
const toast = useToast()
interface Message {
success: boolean
data: string
@@ -66,13 +64,12 @@ export default function EditUser() {
const engageChangePassword = async (values: IForgotPassword) => {
const message = await agent.Account.forgot(values as IForgotPassword) as Message
toast({
toaster.create({
title: 'Email Sent',
status: 'success',
type: 'success',
description: message.data,
isClosable: true,
closable: true,
duration: 10000,
position: 'top'
})
}
@@ -90,78 +87,70 @@ export default function EditUser() {
<Container style={{ marginTop: '7rem', paddingBottom: '5rem' }}>
<Heading as="h1" marginBottom={'3rem'}>Edit {user.displayName}</Heading>
<form onSubmit={onSubmit}>
<FormControl>
<FormLabel htmlFor="name">Full Name</FormLabel>
<Field label="Full Name">
<Input
id="name"
bg={bg}
border="1px"
borderColor="gray.500"
borderWidth="1px" borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
{...register('name', { required: 'Name is required' })}
/>
</FormControl>
<FormControl mt={'3'}>
<FormLabel htmlFor="displayName">Display Name</FormLabel>
</Field>
<Field label="Display Name" mt={'3'}>
<Input
id="displayName"
bg={bg}
border="1px"
borderColor="gray.500"
borderWidth="1px" borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
{...register('displayName', { required: 'Display Name is required' })}
/>
</FormControl>
<FormControl mt={'3'}>
<FormLabel htmlFor="email">Email</FormLabel>
</Field>
<Field label="Email" mt={'3'}>
<Input
id="email"
bg={bg}
_placeholder={{ color: 'gray.500' }}
isDisabled
border="1px"
borderColor="gray.500"
disabled
borderWidth="1px" borderStyle="solid"
borderColor={{ base: "gray.500", _invalid: "red.500" }}
rounded="md"
placeholder="Email"
{...register('email', { required: 'Email is required' })}
/>
</FormControl>
<FormControl>
<Flex mt={'6'}>
<FormLabel htmlFor={"theme"}>Dark Mode:</FormLabel>
</Field>
<Field label="Dark Mode:" orientation="horizontal" mt={'6'}>
<Controller
control={control}
name="theme"
render={({ field: { onChange, value, ref } }) => (
<Switch isChecked={value} onChange={onChange} ref={ref} />
<Switch colorPalette="blue" checked={value} onCheckedChange={({ checked }: any) => onChange(checked)} ref={ref} />
)}
/>
</Flex>
</FormControl>
<FormControl>
<Flex mt={'6'}>
<FormLabel htmlFor={"stickyNav"}>Sticky Navbar:</FormLabel>
</Field>
<Field label="Sticky Navbar:" orientation="horizontal" mt={'6'}>
<Controller
control={control}
name="stickyNav"
render={({ field: { onChange, value, ref } }) => (
<Switch isChecked={value} onChange={onChange} ref={ref} />
<Switch colorPalette="blue" checked={value} onCheckedChange={({ checked }: any) => onChange(checked)} ref={ref} />
)}
/>
</Flex>
</FormControl>
</Field>
<br />
<Stack spacing={[1, 5]} direction={'row'} align="self-end" pb="3">
<Stack gap={[1, 5]} direction={'row'} alignSelf="flex-end" pb="3">
<Button
type="submit"
colorPalette="blue"
disabled={!isDirty}
isLoading={isSubmitting}
loading={isSubmitting}
>
Submit
</Button>
<Button
isLoading={passwordLoading.get()}
isDisabled={passwordDisabled.get()}
loading={passwordLoading.get()}
disabled={passwordDisabled.get()}
onMouseDown={async () => {
passwordLoading.set(true)
passwordDisabled.set(true)
src/components/userComponents/UserProfile.tsx
+30 -32
View File
@@ -7,14 +7,10 @@ import {
GridItem,
Heading,
Image,
Table,
TableContainer,
Tbody,
Td,
Text,
Tr,
useColorModeValue
Table,
} from '@chakra-ui/react'
import {useColorModeValue} from '../ui/color-mode'
import {useHookstate} from '@hookstate/core'
import {loggedInUser} from '../../stateManagement/userState'
import {Link} from 'react-router-dom'
@@ -28,10 +24,12 @@ const UserProfile = () => {
<Heading mb={'1rem'} as="h1">User Profile</Heading>
<Grid templateColumns={`repeat(7, 1fr)`} templateRows={'2'} gap={6}>
<GridItem rowStart={1} rowEnd={1} colStart={7} alignSelf={'end'} justifySelf={'end'}>
<Button as={Link} to={`/edit-user`} colorScheme="blue" style={{textAlign: 'right'}}>
<Text mt={'1'}>
Edit
</Text>
<Button asChild colorPalette="blue" style={{textAlign: 'right'}}>
<Link to={`/edit-user`}>
<Text mt={'1'}>
Edit
</Text>
</Link>
</Button>
</GridItem>
<GridItem rowStart={2} rowEnd={2} colSpan={2} colStart={2}>
@@ -42,28 +40,28 @@ const UserProfile = () => {
</GridItem>
<GridItem rowStart={2} rowEnd={2} colStart={4} colEnd={8}>
<Box bg={bg} p="5" rounded="md">
<TableContainer>
<Table variant="simple">
<Tbody>
<Tr>
<Td><Text fontSize={'1.5rem'}>Display Name: </Text></Td>
<Td><Text fontSize={'1.5rem'}>{user.displayName}</Text></Td>
</Tr>
<Tr>
<Td><Text fontSize={'1.5rem'}>Full Name: </Text></Td>
<Td><Text fontSize={'1.5rem'}>{user.name}</Text></Td>
</Tr>
<Tr>
<Td><Text fontSize={'1.5rem'}>Email: </Text></Td>
<Td><Text fontSize={'1.5rem'}>{user.email}</Text></Td>
</Tr>
<Tr>
<Td><Text fontSize={'1.5rem'}>Role: </Text></Td>
<Td><Text fontSize={'1.5rem'}>{user.role}</Text></Td>
</Tr>
</Tbody>
</Table>
</TableContainer>
<Table.ScrollArea>
<Table.Root variant="outline">
<Table.Body>
<Table.Row>
<Table.Cell><Text fontSize={'1.5rem'}>Display Name: </Text></Table.Cell>
<Table.Cell><Text fontSize={'1.5rem'}>{user.displayName}</Text></Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell><Text fontSize={'1.5rem'}>Full Name: </Text></Table.Cell>
<Table.Cell><Text fontSize={'1.5rem'}>{user.name}</Text></Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell><Text fontSize={'1.5rem'}>Email: </Text></Table.Cell>
<Table.Cell><Text fontSize={'1.5rem'}>{user.email}</Text></Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell><Text fontSize={'1.5rem'}>Role: </Text></Table.Cell>
<Table.Cell><Text fontSize={'1.5rem'}>{user.role}</Text></Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
</Table.ScrollArea>
</Box>
</GridItem>
</Grid>
src/errors/NotFound.tsx
+2 -2
View File
@@ -29,8 +29,8 @@ export default function NotFound() {
It looks like you hit a{' '}
{<span style={styles.retroFontBody}>DEAD</span>} end!
</Heading>
<Button colorScheme='blue' as={Link} to={'/games'} style={{fontSize: '1.2rem', marginLeft: '5rem'}}>
Back to Games List
<Button colorPalette='blue' asChild style={{fontSize: '1.2rem', marginLeft: '5rem'}}>
<Link to={'/games'}>Back to Games List</Link>
</Button>
<Suspense fallback={<LoadingModal />}>
<Video/>
src/errors/SomethingWentWrong.tsx
+3 -1
View File
@@ -29,10 +29,12 @@ export default function SomethingWentWrong() {
{<span style={styles.retroFontBody}>WE APOLOGIZE!</span>}<br/>
Please contact the website administrator!
</Heading>
<Button colorScheme='blue' as={Link} to={'/games'} style={{fontSize: '1.2rem', marginLeft: '5rem'}}>
<Button colorPalette='blue' asChild style={{fontSize: '1.2rem', marginLeft: '5rem'}}>
<Link to={'/games'}>
<div style={{marginTop: '.25rem'}}>
Back to Games List
</div>
</Link>
</Button>
<Suspense fallback={<LoadingModal/>}>
<Video/>
src/index.tsx
+6 -6
View File
@@ -3,14 +3,14 @@ import React from "react";
import {createRoot} from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "react-toastify/dist/ReactToastify.min.css";
import "react-toastify/dist/ReactToastify.css";
import "./styles/typography.css";
import "./styles/videoBackground.css";
import "./styles/overrides.css";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import {createBrowserRouter, RouterProvider} from "react-router-dom";
import {ChakraProvider, ColorModeScript} from "@chakra-ui/react";
import theme from "./styles/theme";
import {Provider} from "./components/ui/provider";
import {Toaster} from "./components/ui/toaster";
import NotFound from "./errors/NotFound";
const container = document.getElementById("root");
@@ -26,10 +26,10 @@ const router = createBrowserRouter([
root.render(
<React.StrictMode>
<ChakraProvider theme={theme}>
<ColorModeScript initialColorMode={theme.config.initialColorMode}/>
<Provider>
<RouterProvider router={router} />
</ChakraProvider>
<Toaster />
</Provider>
</React.StrictMode>
);
src/reportWebVitals.ts
+8 -8
View File
@@ -1,13 +1,13 @@
import { ReportHandler } from 'web-vitals';
import type { MetricType } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
const reportWebVitals = (onPerfEntry?: (metric: MetricType) => void) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
import('web-vitals').then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
onCLS(onPerfEntry);
onINP(onPerfEntry);
onFCP(onPerfEntry);
onLCP(onPerfEntry);
onTTFB(onPerfEntry);
});
}
};
src/stateManagement/userState.ts
+1 -1
View File
@@ -74,7 +74,7 @@ export const getUser = async (token: string) => {
if(userPreferencesExist === -1) {
userPreferences.merge([{
id: user.data._id,
theme: 'light',
theme: 'dark',
stickyNav: true,
}])
}
src/styles/theme.tsx
+348 -11
View File
@@ -1,18 +1,355 @@
import { extendTheme, Theme } from '@chakra-ui/react'
import { mode } from '@chakra-ui/theme-tools'
import {loadedPreferences} from "../stateManagement/userState";
import {
createSystem,
defaultConfig,
defineConfig,
defineRecipe,
defineSlotRecipe,
} from '@chakra-ui/react'
import {
buttonRecipe,
headingRecipe,
inputRecipe,
linkRecipe,
menuSlotRecipe,
nativeSelectSlotRecipe,
numberInputSlotRecipe,
switchSlotRecipe,
tagSlotRecipe,
} from '@chakra-ui/react/theme'
// Chakra v2 color scales (blue-tinted). Chakra v3 replaced these with neutral
// scales and a near-black page background, which changed the app's whole look.
// Restoring the v2 scales keeps every component on the old colorscheme.
const v2Colors = {
gray: {
50: '#F7FAFC',
100: '#EDF2F7',
200: '#E2E8F0',
300: '#CBD5E0',
400: '#A0AEC0',
500: '#718096',
600: '#4A5568',
700: '#2D3748',
800: '#1A202C',
900: '#171923',
},
blue: {
50: '#EBF8FF',
100: '#BEE3F8',
200: '#90CDF4',
300: '#63B3ED',
400: '#4299E1',
500: '#3182CE',
600: '#2B6CB0',
700: '#2C5282',
800: '#2A4365',
900: '#1A365D',
},
green: {
50: '#F0FFF4',
100: '#C6F6D5',
200: '#9AE6B4',
300: '#68D391',
400: '#48BB78',
500: '#38A169',
600: '#2F855A',
700: '#276749',
800: '#22543D',
900: '#1C4532',
},
red: {
50: '#FFF5F5',
100: '#FED7D7',
200: '#FEB2B2',
300: '#FC8181',
400: '#F56565',
500: '#E53E3E',
600: '#C53030',
700: '#9B2C2C',
800: '#742A2A',
900: '#63171B',
},
} as const
const toTokens = (scale: Record<string, string>) =>
Object.fromEntries(Object.entries(scale).map(([shade, hex]) => [shade, { value: hex }]))
export default extendTheme({
initialColorMode: loadedPreferences.theme,
useSystemColorMode: false,
styles: {
global: (props: Theme) => ({
body: {
bg: mode('gray.200', 'gray.800')(props),
// Chakra v2 solid fills were bright in dark mode (200-shade bg + dark text),
// while v3 solid fills stay dark with white text. Restore the v2 behavior so
// buttons/tags read the same as before. This also fixes Switch/Checkbox
// checked fills, which consume the same tokens.
const v2Solid = (palette: 'gray' | 'blue' | 'green' | 'red') => {
if (palette === 'gray') {
return {
solid: { value: { _light: '{colors.gray.100}', _dark: '{colors.whiteAlpha.200}' } },
contrast: { value: { _light: '{colors.gray.800}', _dark: 'white' } },
}
}
return {
solid: { value: { _light: `{colors.${palette}.500}`, _dark: `{colors.${palette}.200}` } },
contrast: { value: { _light: 'white', _dark: '{colors.gray.800}' } },
}
}
// Chakra v3 shrunk component text a step (e.g. md buttons/inputs render sm
// text). v2 used same-name text per size — restore that.
// NOTE: recipe bases are spread as `any` — retyping Chakra's inferred
// variant unions through defineRecipe's generics is not worth it here;
// the objects below are complete recipes by construction (spread of the
// original + targeted size overrides).
const baseButton: any = buttonRecipe
const baseHeading: any = headingRecipe
const baseInput: any = inputRecipe
const baseNumberInput: any = numberInputSlotRecipe
const baseNativeSelect: any = nativeSelectSlotRecipe
const baseSwitch: any = switchSlotRecipe
const baseTag: any = tagSlotRecipe
const baseLink: any = linkRecipe
const baseMenu: any = menuSlotRecipe
// Menu item hover uses bg.emphasized/60 — near-invisible on dark surfaces.
// Brighten to match the select-option hover (gray.200 / whiteAlpha.300).
const v2MenuRecipe = defineSlotRecipe({
...baseMenu,
variants: {
...baseMenu.variants,
variant: {
...baseMenu.variants?.variant,
subtle: {
...baseMenu.variants?.variant?.subtle,
item: {
...baseMenu.variants?.variant?.subtle?.item,
_highlighted: { bg: { base: 'gray.200', _dark: 'whiteAlpha.300' } },
},
},
})
},
},
})
// v3 link underlines render at 20% opacity (currentColor/20) — too dim
// against dark surfaces. Brighten universally.
const v2LinkRecipe = defineRecipe({
...baseLink,
variants: {
...baseLink.variants,
variant: {
...baseLink.variants?.variant,
underline: {
...baseLink.variants?.variant?.underline,
textDecorationColor: 'currentColor/60',
},
plain: {
...baseLink.variants?.variant?.plain,
_hover: {
...baseLink.variants?.variant?.plain?._hover,
textDecorationColor: 'currentColor/60',
},
},
},
},
})
// v2 tag text per size (v3 renders one step smaller)
const v2TagRecipe = defineSlotRecipe({
...baseTag,
base: {
...baseTag.base,
root: { ...baseTag.base?.root, pt: '1px' },
},
variants: {
...baseTag.variants,
size: {
...baseTag.variants?.size,
md: {
...baseTag.variants?.size?.md,
label: { ...baseTag.variants?.size?.md?.label, textStyle: 'sm' },
},
lg: {
...baseTag.variants?.size?.lg,
label: { ...baseTag.variants?.size?.lg?.label, textStyle: 'md' },
},
},
},
})
const v2ButtonRecipe = defineRecipe({
...baseButton,
base: {
...baseButton.base,
fontWeight: 'semibold',
},
variants: {
...baseButton.variants,
size: {
...baseButton.variants?.size,
sm: { ...baseButton.variants?.size?.sm, textStyle: 'sm', h: '8', minW: '8' },
md: { ...baseButton.variants?.size?.md, textStyle: 'md' },
lg: { ...baseButton.variants?.size?.lg, textStyle: 'lg', h: '12', minW: '12' },
},
},
})
const v2InputRecipe = defineRecipe({
...baseInput,
variants: {
...baseInput.variants,
size: {
...baseInput.variants?.size,
sm: { ...baseInput.variants?.size?.sm, textStyle: 'sm', '--input-height': 'sizes.8' },
md: { ...baseInput.variants?.size?.md, textStyle: 'md' },
lg: { ...baseInput.variants?.size?.lg, textStyle: 'lg', '--input-height': 'sizes.12' },
},
},
})
// v2 headings were a full step larger than v3 same-name sizes
// (v2 xl = 3xl/4xl ≈ 30/36px, v3 xl = 20px). Restore v2 mapping universally
// so page titles match the old screenshots.
const v2HeadingRecipe = defineRecipe({
...baseHeading,
variants: {
...baseHeading.variants,
size: {
...baseHeading.variants?.size,
xs: { textStyle: 'sm' },
sm: { textStyle: 'md' },
md: { textStyle: 'xl' },
lg: { textStyle: '3xl' },
xl: { textStyle: '4xl' },
'2xl': { textStyle: '5xl' },
'3xl': { textStyle: '6xl' },
'4xl': { textStyle: '7xl' },
},
},
})
const v2NumberInputRecipe = defineSlotRecipe({
...baseNumberInput,
variants: {
...baseNumberInput.variants,
size: {
...baseNumberInput.variants?.size,
xs: {
...baseNumberInput.variants?.size?.xs,
input: { ...v2InputRecipe.variants?.size?.xs },
},
sm: {
...baseNumberInput.variants?.size?.sm,
input: { ...v2InputRecipe.variants?.size?.sm },
},
md: {
...baseNumberInput.variants?.size?.md,
input: { ...v2InputRecipe.variants?.size?.md },
},
lg: {
...baseNumberInput.variants?.size?.lg,
input: { ...v2InputRecipe.variants?.size?.lg },
},
},
},
})
const v2NativeSelectRecipe = defineSlotRecipe({
...baseNativeSelect,
variants: {
...baseNativeSelect.variants,
size: {
...baseNativeSelect.variants?.size,
md: {
...baseNativeSelect.variants?.size?.md,
field: { ...baseNativeSelect.variants?.size?.md?.field, textStyle: 'md' },
},
lg: {
...baseNativeSelect.variants?.size?.lg,
field: { ...baseNativeSelect.variants?.size?.lg?.field, textStyle: 'lg' },
},
},
},
})
// v2 Switch: unchecked track lighter grey (gray.300 / whiteAlpha.400),
// checked track blue (500 / 200), thumb white always. v3 uses a near-black
// unchecked track in dark mode and a dark thumb when checked.
const v2SwitchRecipe = defineSlotRecipe({
...baseSwitch,
variants: {
...baseSwitch.variants,
variant: {
...baseSwitch.variants?.variant,
solid: {
...baseSwitch.variants?.variant?.solid,
control: {
...baseSwitch.variants?.variant?.solid?.control,
bg: { base: 'gray.300', _dark: 'whiteAlpha.400' },
},
thumb: {
...baseSwitch.variants?.variant?.solid?.thumb,
bg: 'white',
_checked: {
...baseSwitch.variants?.variant?.solid?.thumb?._checked,
bg: 'white',
},
},
},
},
},
})
const config = defineConfig({
theme: {
recipes: {
button: v2ButtonRecipe,
heading: v2HeadingRecipe,
input: v2InputRecipe,
link: v2LinkRecipe,
},
slotRecipes: {
numberInput: v2NumberInputRecipe,
nativeSelect: v2NativeSelectRecipe,
switch: v2SwitchRecipe,
tag: v2TagRecipe,
menu: v2MenuRecipe,
},
tokens: {
colors: {
gray: {
...toTokens(v2Colors.gray),
// v3 surfaces that default to near-black (menu/dropdown/modal
// panels) used v2's gray.700 in dark mode.
950: { value: '#2D3748' },
},
blue: toTokens(v2Colors.blue),
green: toTokens(v2Colors.green),
red: toTokens(v2Colors.red),
},
},
semanticTokens: {
colors: {
gray: v2Solid('gray'),
blue: v2Solid('blue'),
green: v2Solid('green'),
red: v2Solid('red'),
},
},
},
globalCss: {
// NOTE: top margins of page content collapse past `body`, so the strip
// above the content is painted with `html`'s background. It must match
// the body or the page gets a mismatched band.
// Explicit `.dark` class selectors are used because Chakra v3's `_dark`
// condition only matches *descendants* of `.dark`, never `html.dark`
// itself.
'html:not(.dark)': {
bg: 'gray.200',
},
'html.dark': {
bg: 'gray.800',
},
body: {
bg: { base: 'gray.200', _dark: 'gray.800' },
fontSize: '1.0625rem',
},
},
})
export default createSystem(defaultConfig, config)
tsconfig.json
+7 -4
View File
@@ -5,17 +5,20 @@
"types": ["vite/client"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"module": "ESNext",
"moduleResolution": "Bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
"jsx": "react-jsx",
"paths": {
"@/*": ["./src/*"]
}
},
"include": [
"src"