From c8f2ed1b038a7ce2c0c8f42bf5d81ced9e721e86 Mon Sep 17 00:00:00 2001 From: drewjhart <79417944+drewjhart@users.noreply.github.com> Date: Wed, 18 Sep 2024 08:33:47 -0700 Subject: [PATCH 1/7] card animation --- central_v2/src/components/CardCarousal.tsx | 75 ++++++++++++---- central_v2/src/components/EGMostPopular.tsx | 90 +++++++++++++++---- central_v2/src/lib/HelperFunctions.tsx | 2 +- central_v2/src/pages/ExploreGames.tsx | 4 +- networking/src/APIClients/index.ts | 2 +- networking/src/APIClients/interfaces/index.ts | 2 +- 6 files changed, 134 insertions(+), 41 deletions(-) diff --git a/central_v2/src/components/CardCarousal.tsx b/central_v2/src/components/CardCarousal.tsx index 5e2adfc1e..e621104bc 100644 --- a/central_v2/src/components/CardCarousal.tsx +++ b/central_v2/src/components/CardCarousal.tsx @@ -1,24 +1,51 @@ import React, { useEffect, useRef, useState } from 'react'; +import { Box, Grow, Fade } from '@mui/material'; +import { styled, useTheme } from '@mui/material/styles'; import { APIClients, IGameTemplate } from '@righton/networking'; import { Swiper, SwiperSlide, SwiperRef } from 'swiper/react'; import { Pagination } from 'swiper/modules'; -import 'swiper/css'; -import 'swiper/css/pagination'; -import { useTheme } from '@mui/material/styles'; +import { v4 as uuidv4 } from 'uuid'; import StyledGameCard from './GameCard'; import placeHolder from '../images/placeHolder.svg'; - +import 'swiper/css'; +import 'swiper/css/pagination'; interface GameCardCarouselProps { apiClients: APIClients; recommendedGames: IGameTemplate[]; } +const GameCard = styled(Box)(({ theme }) => ({ + width: '100%', + height: '260px', + padding: `12px ${theme.sizing.smPadding}px 12px ${theme.sizing.smPadding}px`, + gap: `${theme.sizing.smPadding}px`, + borderRadius: `${theme.sizing.smPadding}px`, + boxShadow: `0px ${theme.sizing.xSmPadding}px ${theme.sizing.smPadding}px -4px #5C769166`, + background: 'linear-gradient(90deg, #EFEFEF 0%, #C2BEBE 100%)', + backgroundSize: '200% 200%', + animation: 'gradient-animation 3s ease infinite', + display: 'flex', + flexDirection: 'column', + boxSizing: 'border-box', + overflow: 'visible', + + '@keyframes gradient-animation': { + '0%': { + backgroundPosition: '0% 50%', + }, + '50%': { + backgroundPosition: '100% 50%', + }, + '100%': { + backgroundPosition: '0% 50%', + }, + }, + })); export default function GameCardCarousel({ apiClients, recommendedGames }: GameCardCarouselProps) { const theme = useTheme(); const swiperRef = useRef(null); - - + const loadingCards = Array(12).fill(0); return ( - {recommendedGames.map((game) => ( + { recommendedGames.length > 0 ? + recommendedGames.map((game, index) => ( - + +
+ +
+ - ))} + )) + : + loadingCards.map((_, index) => ( + + + + + + )) + } ); } diff --git a/central_v2/src/components/EGMostPopular.tsx b/central_v2/src/components/EGMostPopular.tsx index 092d72229..f4cd75ada 100644 --- a/central_v2/src/components/EGMostPopular.tsx +++ b/central_v2/src/components/EGMostPopular.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import { Grid, Typography, Box, styled, useTheme } from '@mui/material'; +import { Grid, Typography, Box, styled, useTheme, Grow, Fade } from '@mui/material'; import { APIClients, IGameTemplate } from '@righton/networking'; +import { v4 as uuidv4 } from 'uuid'; import StyledGameCard from './GameCard'; import { ScreenSize } from '../lib/HostModels'; import placeHolder from '../images/placeHolder.svg'; - interface EGMostPopularProps { screenSize: ScreenSize; apiClients: APIClients; @@ -29,8 +29,37 @@ interface EGMostPopularContainerProps { children: React.ReactNode; } +const GameCard = styled(Box)(({ theme }) => ({ + width: '100%', + height: '260px', + padding: `12px ${theme.sizing.smPadding}px 12px ${theme.sizing.smPadding}px`, + gap: `${theme.sizing.smPadding}px`, + borderRadius: `${theme.sizing.smPadding}px`, + boxShadow: `0px ${theme.sizing.xSmPadding}px ${theme.sizing.smPadding}px -4px #5C769166`, + background: 'linear-gradient(90deg, #EFEFEF 0%, #C2BEBE 100%)', + backgroundSize: '200% 200%', + animation: 'gradient-animation 3s ease infinite', + display: 'flex', + flexDirection: 'column', + boxSizing: 'border-box', + overflow: 'visible', + + '@keyframes gradient-animation': { + '0%': { + backgroundPosition: '0% 50%', + }, + '50%': { + backgroundPosition: '100% 50%', + }, + '100%': { + backgroundPosition: '0% 50%', + }, + }, + })); + function EGMostPopularContainer({ screenSize, children }: EGMostPopularContainerProps) { const theme = useTheme(); + return ( Most Popular - {mostPopularGames.map((game) => ( + {mostPopularGames.length > 0 + ? mostPopularGames.map((game,index) => ( + + + +
+ +
+ + + + )) + : + loadingCards.map((_, index) => ( - + item + xs={12} + md={6} + xl={4} + key={uuidv4()} + > + + + - ))} + )) + } ); diff --git a/central_v2/src/lib/HelperFunctions.tsx b/central_v2/src/lib/HelperFunctions.tsx index cdf895e88..2c8a5cd0b 100644 --- a/central_v2/src/lib/HelperFunctions.tsx +++ b/central_v2/src/lib/HelperFunctions.tsx @@ -4,7 +4,7 @@ import {v4 as uuidv4} from 'uuid'; export const fetchMoreGames = async (apiClients: IAPIClients, nextToken: string, setNextToken: (nextToken: string | null) =>void, setGames: any, setLoading: (loading:boolean)=> void, loading: boolean) => { // eslint-disable-line if (apiClients && !loading) { setLoading(true); - const response = await apiClients.gameTemplate.listGameTemplates(8, nextToken, null, null); + const response = await apiClients.gameTemplate.listGameTemplates(8, nextToken, null, null, []); if (response) { setGames((prevGames: any) => [ ...prevGames, diff --git a/central_v2/src/pages/ExploreGames.tsx b/central_v2/src/pages/ExploreGames.tsx index 980d9330a..34a9eff6e 100644 --- a/central_v2/src/pages/ExploreGames.tsx +++ b/central_v2/src/pages/ExploreGames.tsx @@ -49,7 +49,7 @@ export default function ExploreGames({ apiClients }: ExploreGamesProps) { useEffect(() => { if (apiClients) { - apiClients.gameTemplate.listGameTemplates(12, null, null, null) + apiClients.gameTemplate.listGameTemplates(12, null, null, null, []) .then(response => { setRecommendedGames(response?.gameTemplates || []); setNextToken(response?.nextToken || null); @@ -58,7 +58,7 @@ export default function ExploreGames({ apiClients }: ExploreGamesProps) { console.error('Error fetching games:', error); }); - apiClients.gameTemplate.listGameTemplates(12, null, null, null) + apiClients.gameTemplate.listGameTemplates(12, null, null, null, []) .then(response => { setMostPopularGames(response?.gameTemplates || []); setNextToken(response?.nextToken || null); diff --git a/networking/src/APIClients/index.ts b/networking/src/APIClients/index.ts index 13db40f94..bb6fd1c45 100644 --- a/networking/src/APIClients/index.ts +++ b/networking/src/APIClients/index.ts @@ -7,8 +7,8 @@ export * from './GameSessionAPIClient'; export * from './GameTemplateAPIClient'; export * from './QuestionAPIClient'; export * from './QuestionTemplateAPIClient'; -export * from './TeamAnswerAPIClient'; export * from './TeamAPIClient'; +export * from './TeamAnswerAPIClient'; export * from './TeamMemberAPIClient'; export * from './datamanagers'; export * from './interfaces'; diff --git a/networking/src/APIClients/interfaces/index.ts b/networking/src/APIClients/interfaces/index.ts index 9ee60ded1..a2f0deafa 100644 --- a/networking/src/APIClients/interfaces/index.ts +++ b/networking/src/APIClients/interfaces/index.ts @@ -7,6 +7,6 @@ export * from './IGameSessionAPIClient'; export * from './IGameTemplateAPIClient'; export * from './IQuestionAPIClient'; export * from './IQuestionTemplateAPIClient'; -export * from './ITeamAnswerAPIClient'; export * from './ITeamAPIClient'; +export * from './ITeamAnswerAPIClient'; export * from './ITeamMemberAPIClient'; From 9caa38f9ff325bc688d0601c9d291d7e5f009261 Mon Sep 17 00:00:00 2001 From: drewjhart <79417944+drewjhart@users.noreply.github.com> Date: Thu, 19 Sep 2024 09:23:11 -0700 Subject: [PATCH 2/7] progress --- central_v2/src/components/CardCarousal.tsx | 75 ++++++------------- central_v2/src/components/EGMostPopular.tsx | 47 ++++-------- .../src/components/SkeletonGameCard.tsx | 56 ++++++++++++++ 3 files changed, 91 insertions(+), 87 deletions(-) create mode 100644 central_v2/src/components/SkeletonGameCard.tsx diff --git a/central_v2/src/components/CardCarousal.tsx b/central_v2/src/components/CardCarousal.tsx index e621104bc..c8bdb074e 100644 --- a/central_v2/src/components/CardCarousal.tsx +++ b/central_v2/src/components/CardCarousal.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useRef, useState } from 'react'; -import { Box, Grow, Fade } from '@mui/material'; +import { Box, Grow, Fade, Skeleton } from '@mui/material'; import { styled, useTheme } from '@mui/material/styles'; import { APIClients, IGameTemplate } from '@righton/networking'; import { Swiper, SwiperSlide, SwiperRef } from 'swiper/react'; @@ -7,6 +7,7 @@ import { Pagination } from 'swiper/modules'; import { v4 as uuidv4 } from 'uuid'; import StyledGameCard from './GameCard'; import placeHolder from '../images/placeHolder.svg'; +import SkeletonGameCard from './SkeletonGameCard'; import 'swiper/css'; import 'swiper/css/pagination'; @@ -15,37 +16,10 @@ interface GameCardCarouselProps { recommendedGames: IGameTemplate[]; } -const GameCard = styled(Box)(({ theme }) => ({ - width: '100%', - height: '260px', - padding: `12px ${theme.sizing.smPadding}px 12px ${theme.sizing.smPadding}px`, - gap: `${theme.sizing.smPadding}px`, - borderRadius: `${theme.sizing.smPadding}px`, - boxShadow: `0px ${theme.sizing.xSmPadding}px ${theme.sizing.smPadding}px -4px #5C769166`, - background: 'linear-gradient(90deg, #EFEFEF 0%, #C2BEBE 100%)', - backgroundSize: '200% 200%', - animation: 'gradient-animation 3s ease infinite', - display: 'flex', - flexDirection: 'column', - boxSizing: 'border-box', - overflow: 'visible', - - '@keyframes gradient-animation': { - '0%': { - backgroundPosition: '0% 50%', - }, - '50%': { - backgroundPosition: '100% 50%', - }, - '100%': { - backgroundPosition: '0% 50%', - }, - }, - })); export default function GameCardCarousel({ apiClients, recommendedGames }: GameCardCarouselProps) { const theme = useTheme(); const swiperRef = useRef(null); - const loadingCards = Array(12).fill(0); + const maxSlides = 12; return ( - { recommendedGames.length > 0 ? - recommendedGames.map((game, index) => ( - - -
- -
- - - )) - : - loadingCards.map((_, index) => ( - - - - + {Array.from({ length: maxSlides }).map((_, index) => { + const game = recommendedGames[index]; + return ( + {/* eslint-disable-line */} + {game ? ( + + ) : ( + + )} - )) - } + ); + })} ); } diff --git a/central_v2/src/components/EGMostPopular.tsx b/central_v2/src/components/EGMostPopular.tsx index f4cd75ada..1b846fe36 100644 --- a/central_v2/src/components/EGMostPopular.tsx +++ b/central_v2/src/components/EGMostPopular.tsx @@ -1,10 +1,11 @@ import React from 'react'; -import { Grid, Typography, Box, styled, useTheme, Grow, Fade } from '@mui/material'; +import { Grid, Typography, Box, styled, useTheme, Grow, Fade, Skeleton } from '@mui/material'; import { APIClients, IGameTemplate } from '@righton/networking'; import { v4 as uuidv4 } from 'uuid'; import StyledGameCard from './GameCard'; import { ScreenSize } from '../lib/HostModels'; import placeHolder from '../images/placeHolder.svg'; +import SkeletonGameCard from './SkeletonGameCard'; interface EGMostPopularProps { screenSize: ScreenSize; @@ -84,24 +85,18 @@ function EGMostPopularContainer({ screenSize, children }: EGMostPopularContainer export default function EGMostPopular({ screenSize, apiClients, mostPopularGames }: EGMostPopularProps) { const loadingCards = Array(12).fill(0); const isLoading = mostPopularGames.length === 0; + const maxCards = 12; return ( Most Popular - - {mostPopularGames.length > 0 - ? mostPopularGames.map((game,index) => ( - - - -
+ + {Array.from({ length: maxCards }).map((_, index) => { + const game = mostPopularGames[index]; + return ( + {/* eslint-disable-line */} + {game ? ( -
- - - - )) - : - loadingCards.map((_, index) => ( - - - - + ) : ( + + )} - )) - } + ); + })} ); diff --git a/central_v2/src/components/SkeletonGameCard.tsx b/central_v2/src/components/SkeletonGameCard.tsx new file mode 100644 index 000000000..7e095b9e1 --- /dev/null +++ b/central_v2/src/components/SkeletonGameCard.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { Box, Fade, Skeleton } from '@mui/material'; +import { styled } from '@mui/material/styles'; + +const GameCard = styled(Box)(({ theme }) => ({ + width: '100%', + height: '260px', + padding: `12px ${theme.sizing.smPadding}px 12px ${theme.sizing.smPadding}px`, + gap: `${theme.sizing.smPadding}px`, + borderRadius: `${theme.sizing.smPadding}px`, + boxShadow: `0px ${theme.sizing.xSmPadding}px ${theme.sizing.smPadding}px -4px #5C769166`, + background: '#FFF', + display: 'flex', + flexDirection: 'column', + boxSizing: 'border-box', + overflow: 'visible', +})); + + +interface SkeletonGameCardProps { + index: number; +} + +export default function SkeletonGameCard({index}: SkeletonGameCardProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} \ No newline at end of file From fe76b6efdac1f9fb8bd2a9dbd57a882cdb3aff9b Mon Sep 17 00:00:00 2001 From: drewjhart <79417944+drewjhart@users.noreply.github.com> Date: Thu, 3 Oct 2024 15:31:45 +0700 Subject: [PATCH 3/7] fixes listGameTemplates --- central_v2/src/lib/HelperFunctions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/central_v2/src/lib/HelperFunctions.tsx b/central_v2/src/lib/HelperFunctions.tsx index cdf895e88..2c8a5cd0b 100644 --- a/central_v2/src/lib/HelperFunctions.tsx +++ b/central_v2/src/lib/HelperFunctions.tsx @@ -4,7 +4,7 @@ import {v4 as uuidv4} from 'uuid'; export const fetchMoreGames = async (apiClients: IAPIClients, nextToken: string, setNextToken: (nextToken: string | null) =>void, setGames: any, setLoading: (loading:boolean)=> void, loading: boolean) => { // eslint-disable-line if (apiClients && !loading) { setLoading(true); - const response = await apiClients.gameTemplate.listGameTemplates(8, nextToken, null, null); + const response = await apiClients.gameTemplate.listGameTemplates(8, nextToken, null, null, []); if (response) { setGames((prevGames: any) => [ ...prevGames, From 0485576c6fb3db628529ee17ead2f79a29d54ead Mon Sep 17 00:00:00 2001 From: drewjhart <79417944+drewjhart@users.noreply.github.com> Date: Fri, 4 Oct 2024 10:36:47 +0700 Subject: [PATCH 4/7] fixes select button and adds animations --- central_v2/src/components/CardCarousal.tsx | 6 +- central_v2/src/components/SearchBar.tsx | 56 ++++++----- .../src/components/SkeletonGameCard.tsx | 2 +- central_v2/src/images/SelectArrow.svg | 3 + .../src/lib/styledcomponents/SelectGrade.tsx | 99 +++++++++++++++++++ 5 files changed, 136 insertions(+), 30 deletions(-) create mode 100644 central_v2/src/images/SelectArrow.svg create mode 100644 central_v2/src/lib/styledcomponents/SelectGrade.tsx diff --git a/central_v2/src/components/CardCarousal.tsx b/central_v2/src/components/CardCarousal.tsx index c8bdb074e..c275a2b2c 100644 --- a/central_v2/src/components/CardCarousal.tsx +++ b/central_v2/src/components/CardCarousal.tsx @@ -35,8 +35,9 @@ export default function GameCardCarousel({ apiClients, recommendedGames }: GameC }} ref={swiperRef} spaceBetween={theme.sizing.smPadding} + updateOnWindowResize centeredSlides - + loop navigation breakpoints={{ '375': { @@ -46,7 +47,8 @@ export default function GameCardCarousel({ apiClients, recommendedGames }: GameC slidesPerView: 1.8, }, '1500': { - slidesPerView: 3.3, + slidesPerView: 3.5, + }, }} > diff --git a/central_v2/src/components/SearchBar.tsx b/central_v2/src/components/SearchBar.tsx index ebfb97920..8a7a2d054 100644 --- a/central_v2/src/components/SearchBar.tsx +++ b/central_v2/src/components/SearchBar.tsx @@ -1,12 +1,13 @@ import React, { useState, ChangeEvent } from 'react'; -import { Box, InputAdornment, Typography, Button, styled, TextField, MenuItem, Select, Chip, InputLabel, FormControl, OutlinedInput, SelectChangeEvent } from '@mui/material'; +import { Box, InputAdornment, Typography, Collapse, styled, TextField, MenuItem, Select, Checkbox, Chip, InputLabel, FormControl, OutlinedInput, SelectChangeEvent } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import debounce from 'lodash/debounce'; import SearchIcon from '../images/search.svg'; import SortIcon from '../images/sort.svg'; import SortArrow from '../images/sortArrow.svg'; -import GradeDropdown from '../images/GradeDropdown.svg'; +import SelectArrow from '../images/SelectArrow.svg'; import { ScreenSize } from '../lib/HostModels'; +import { SelectContainer, SelectGrade, SelectLabel, SelectArrowContainer, SelectMenu, SelectMenuItem } from '../lib/styledcomponents/SelectGrade'; interface SearchBarProps { screenSize?: ScreenSize; @@ -113,18 +114,24 @@ const PrimaryButton2 = styled(Select)(({ screenSize, theme }) = color: '#FFFFFF', })); + const StyledInputLabel = styled(InputLabel)({ + height: '44px', + fontFamily: 'Poppins', + fontWeight: '700', + fontSize: '20px', + lineHeight: '30px', + color: '#FFFFFF', + }); + const MenuItemStyled = styled(MenuItem)(({ selected }: { selected: boolean }) => ({ color: selected ? 'black' : 'rgba(0, 0, 0, 0.5)', })); const gradesList = ['High School', '8th Grade', '7th Grade', '6th Grade', '5th Grade', '4th Grade', '3rd Grade', '2nd Grade', '1st Grade', 'Kindergarten']; -function GradeDropdownIcon (){ - return( - Grade Dropdown Icon - )} function SearchBar({ screenSize, onSearchChange, onGradeChange, onSortChange }: SearchBarProps) { const theme = useTheme(); + const [isSelectOpen, setIsSelectOpen] = useState(false); const [searchTerm, setSearchTerm] = useState(''); const [selectedGrades, setSelectedGrades] = useState([]); const [selectedSort, setSelectedSort] = useState<{ field: string; direction: string | null }>({ @@ -176,29 +183,24 @@ function SearchBar({ screenSize, onSearchChange, onGradeChange, onSortChange }: } return null; }; - return ( - - - Grade - - null} - labelId="grade-label" - MenuProps={MenuPropsStyled} - IconComponent={GradeDropdownIcon} - > - {gradesList.map((grade) => ( - - {grade} - - ))} - - + + setIsSelectOpen(!isSelectOpen)}> + Choose Grade + + Select Arrow + + + + {gradesList.map((grade) => ( + + + {grade} + + ))} + + + diff --git a/central_v2/src/images/SelectArrow.svg b/central_v2/src/images/SelectArrow.svg new file mode 100644 index 000000000..b7f41c0cd --- /dev/null +++ b/central_v2/src/images/SelectArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/central_v2/src/lib/styledcomponents/SelectGrade.tsx b/central_v2/src/lib/styledcomponents/SelectGrade.tsx new file mode 100644 index 000000000..7324889f8 --- /dev/null +++ b/central_v2/src/lib/styledcomponents/SelectGrade.tsx @@ -0,0 +1,99 @@ +import React, { useState, ChangeEvent } from 'react'; +import { Box, Slide, styled, Typography } from '@mui/material'; + + +export const SelectContainer = styled(Box)(() => { + return { + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + position: 'relative', + }; +}); + +export const SelectGrade = styled(Box)(() => { + return { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + width: '240px', + minHeight: '44px', + background: 'linear-gradient(90deg, #F60E44 0%, #E31C5E 100%)', + borderTopLeftRadius: '22px', + borderBottomLeftRadius: '22px', + gap: '16px', + zIndex: 3 + }; +}); + +export const SelectLabel = styled(Typography)(() => { + return { + color: 'white', + fontFamily: 'Poppins', + fontSize: '20', + fontWeight: '700' + }; +}); + +export const SelectArrowContainer = styled(Box, { + shouldForwardProp: (prop) => prop !== 'isSelectOpen', +})<{ isSelectOpen: boolean }>(({ isSelectOpen }) => ({ + transform: isSelectOpen ? 'rotate(180deg)' : 'rotate(0deg)', + animation: isSelectOpen ? 'rotateScaleOpen 300ms ease-in-out' : 'rotateScaleClose 300ms ease-in-out', + '@keyframes rotateScaleOpen': { + '0%': { + transform:'rotate(0deg) scale(1)' + }, + '50%': { + transform: 'rotate(180deg) scale(1.1)' + }, + '100%': { + transform: 'rotate(180deg) scale(1)' + } + }, + '@keyframes rotateScaleClose': { + '0%': { + transform:'rotate(180deg) scale(1)' + }, + '50%': { + transform: 'rotate(0deg) scale(1.1)' + }, + '100%': { + transform: 'rotate(0deg) scale(1)' + } + } +})); + +export const SelectMenu = styled(Box, { + shouldForwardProp: (prop) => prop !== 'isSelectOpen', +})<{ isSelectOpen: boolean }>(({ isSelectOpen }) => ({ + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + justifyContent: 'center', + zIndex: 2, + background: 'white', + borderTopLeftRadius: '16px', + borderBottomLeftRadius: '16px', + borderBottomRightRadius: '16px', + paddingLeft: '36px', + position: 'absolute', + top: '44px', + left: 0, + width: '100%', + boxSizing: 'border-box', + transition: isSelectOpen ? 'opacity 300ms ease, transform 300ms ease-in-out' : 'opacity 300ms ease, transform 150ms ease-in-out', + opacity: isSelectOpen ? 1 : 0, + transform: isSelectOpen ? 'translateY(0px)' : 'translateY(-20px)', +})); + +export const SelectMenuItem = styled(Box)(() => { + return { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + gap: '16px', + }; +}); \ No newline at end of file From 777b49c7691b2e51d07fcfef3548205cc39e789d Mon Sep 17 00:00:00 2001 From: drewjhart <79417944+drewjhart@users.noreply.github.com> Date: Mon, 7 Oct 2024 10:18:04 +0700 Subject: [PATCH 5/7] updates choose grade label with cases per figma --- central_v2/src/components/EGHeader.tsx | 2 +- central_v2/src/components/EGMostPopular.tsx | 2 +- .../src/components/ExploreGamesUpper.tsx | 2 +- .../src/components/RecommendedGames.tsx | 2 +- central_v2/src/components/SearchBar.tsx | 265 ------------------ central_v2/src/components/SearchResults.tsx | 2 +- .../src/components/searchbar/SearchBar.tsx | 158 +++++++++++ .../components/searchbar/SelectGradesMenu.tsx | 108 +++++++ .../components/searchbar/SortSearchMenu.tsx | 70 +++++ central_v2/src/containers/MainContainer.tsx | 2 +- central_v2/src/images/SortArrows.svg | 3 + .../lib/{HostModels.tsx => CentralModels.tsx} | 0 .../src/lib/styledcomponents/SelectGrade.tsx | 43 ++- .../src/lib/styledcomponents/SortSearch.tsx | 129 +++++++++ central_v2/src/pages/ExploreGames.tsx | 27 +- central_v2/src/pages/ExploreQuestions.tsx | 2 +- central_v2/src/pages/MyLibrary.tsx | 2 +- networking/src/APIClients/BaseAPIClient.ts | 10 + 18 files changed, 534 insertions(+), 295 deletions(-) delete mode 100644 central_v2/src/components/SearchBar.tsx create mode 100644 central_v2/src/components/searchbar/SearchBar.tsx create mode 100644 central_v2/src/components/searchbar/SelectGradesMenu.tsx create mode 100644 central_v2/src/components/searchbar/SortSearchMenu.tsx create mode 100644 central_v2/src/images/SortArrows.svg rename central_v2/src/lib/{HostModels.tsx => CentralModels.tsx} (100%) create mode 100644 central_v2/src/lib/styledcomponents/SortSearch.tsx diff --git a/central_v2/src/components/EGHeader.tsx b/central_v2/src/components/EGHeader.tsx index e764f973b..e85b09102 100644 --- a/central_v2/src/components/EGHeader.tsx +++ b/central_v2/src/components/EGHeader.tsx @@ -9,7 +9,7 @@ import profile from '../images/profileplaceholder.svg'; import hamburger from '../images/hamburger.svg'; import hamburgerX from '../images/hamburgerX.svg'; import plus from '../images/plus.svg'; -import { ScreenSize } from '../lib/HostModels'; +import { ScreenSize } from '../lib/CentralModels'; import { SelectedCentralPages } from '../lib/ScreenEnums'; interface EGHeaderProps { diff --git a/central_v2/src/components/EGMostPopular.tsx b/central_v2/src/components/EGMostPopular.tsx index 1b846fe36..15defb338 100644 --- a/central_v2/src/components/EGMostPopular.tsx +++ b/central_v2/src/components/EGMostPopular.tsx @@ -3,7 +3,7 @@ import { Grid, Typography, Box, styled, useTheme, Grow, Fade, Skeleton } from '@ import { APIClients, IGameTemplate } from '@righton/networking'; import { v4 as uuidv4 } from 'uuid'; import StyledGameCard from './GameCard'; -import { ScreenSize } from '../lib/HostModels'; +import { ScreenSize } from '../lib/CentralModels'; import placeHolder from '../images/placeHolder.svg'; import SkeletonGameCard from './SkeletonGameCard'; diff --git a/central_v2/src/components/ExploreGamesUpper.tsx b/central_v2/src/components/ExploreGamesUpper.tsx index c4fd7d5e9..72f98e45c 100644 --- a/central_v2/src/components/ExploreGamesUpper.tsx +++ b/central_v2/src/components/ExploreGamesUpper.tsx @@ -4,7 +4,7 @@ import { APIClients, IGameTemplate } from '@righton/networking'; import { useTranslation } from 'react-i18next'; import { useTheme, styled } from '@mui/material/styles'; import { Typography, Box } from '@mui/material'; -import {ScreenSize } from '../lib/HostModels'; +import {ScreenSize } from '../lib/CentralModels'; import RecommendedGames from './RecommendedGames'; interface ExploreGamesUpperProps { diff --git a/central_v2/src/components/RecommendedGames.tsx b/central_v2/src/components/RecommendedGames.tsx index f16070df6..92c951bac 100644 --- a/central_v2/src/components/RecommendedGames.tsx +++ b/central_v2/src/components/RecommendedGames.tsx @@ -5,7 +5,7 @@ import { APIClients, IGameTemplate } from '@righton/networking'; import { useTheme, styled } from '@mui/material/styles'; import { Typography, Box } from '@mui/material'; import GameCardCarousal from './CardCarousal'; -import {ScreenSize } from '../lib/HostModels'; +import {ScreenSize } from '../lib/CentralModels'; import PaginationContainerStyled from '../lib/PaginationContainerStyled'; interface RecommendedGamesProps { diff --git a/central_v2/src/components/SearchBar.tsx b/central_v2/src/components/SearchBar.tsx deleted file mode 100644 index 8a7a2d054..000000000 --- a/central_v2/src/components/SearchBar.tsx +++ /dev/null @@ -1,265 +0,0 @@ -import React, { useState, ChangeEvent } from 'react'; -import { Box, InputAdornment, Typography, Collapse, styled, TextField, MenuItem, Select, Checkbox, Chip, InputLabel, FormControl, OutlinedInput, SelectChangeEvent } from '@mui/material'; -import { useTheme } from '@mui/material/styles'; -import debounce from 'lodash/debounce'; -import SearchIcon from '../images/search.svg'; -import SortIcon from '../images/sort.svg'; -import SortArrow from '../images/sortArrow.svg'; -import SelectArrow from '../images/SelectArrow.svg'; -import { ScreenSize } from '../lib/HostModels'; -import { SelectContainer, SelectGrade, SelectLabel, SelectArrowContainer, SelectMenu, SelectMenuItem } from '../lib/styledcomponents/SelectGrade'; - -interface SearchBarProps { - screenSize?: ScreenSize; - onSearchChange: (searchTerm: string) => void; - onGradeChange: (selectedGrades: string[]) => void; - onSortChange: (sort: { field: string; direction: string | null }) => void; -} -interface SearchBarProps2 { - screenSize?: ScreenSize; -} - -const SearchBarContainer = styled(TextField)(({ screenSize, theme }) => ({ - width: 'calc(100% - 125px)', // account for the dropdown width - margin: '0', - backgroundColor: '#FFFFFF', - height: '44px', - borderRadius: '0px 30px 30px 0px', - '& .MuiOutlinedInput-root': { - height: '100%', - padding: '0 12px', - boxSizing: 'border-box', - borderRadius: '0px 30px 30px 0px', - '& .MuiInputBase-input': { - padding: 0, - height: '38px', - lineHeight: '38px', - fontFamily: 'Rubik', - '&::placeholder': { - color: `${theme.palette.primary.extraDarkBlue}`, - fontWeight: 400, - fontFamily: 'Rubik', - fontSize: `${theme.sizing.smPadding}px`, - }, - }, - }, -})); - -const SearchAndFilterContainer = styled(Box)(({ screenSize, theme }) => ({ - height: screenSize === ScreenSize.SMALL ? '70px' : '88px', - width: '100%', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - backgroundColor: `${theme.palette.primary.extraDarkBlue}`, - padding: `${theme.sizing.mdPadding}px ${theme.sizing.lgPadding}px`, - gap: '0px', - boxSizing: 'border-box', -})); - -const FormControlStyled = styled(FormControl)({ - height: '44px', - width: '150px', - backgroundColor: '#E81144', - borderRadius: '30px 0px 0px 30px', - '& .MuiOutlinedInput-notchedOutline': { - border: 'none', - }, -}); - - -const SelectStyled = styled(Select)({ - color: '#FFFFFF', - '& .MuiSelect-icon': { - color: '#FFFFFF', - }, -}); - -const MenuPropsStyled = { - PaperProps: { - sx: { - backgroundColor: '#FFFFFF', - borderRadius: '20px', - gap: '10px', - '& .MuiMenuItem-root': { - color: 'rgba(0, 0, 0, 0.5)', - '&.Mui-selected': { - color: 'black', - }, - }, - }, - }, -}; - -const PrimaryButton2 = styled(Select)(({ screenSize, theme }) => ({ - width: screenSize === ScreenSize.SMALL ? '44px' : '110px', - minWidth: '44px', - height: '44px', - gap: `${theme.sizing.xSmPadding}px`, - borderRadius: '54px', - background: 'linear-gradient(90deg, #E81144 0%, #E31C5E 100%)', - boxShadow: '0px 5px 22px 0px rgba(71, 217, 255, 0.3)', - color: '#FFFFFF', - textTransform: 'none', - boxSizing: 'border-box', - padding: '0px' - })); - - const PrimaryButton2Text = styled(Typography)(() => ({ - height: '30px', - fontFamily: 'Poppins', - fontWeight: '700', - fontSize: '20px', - lineHeight: '30px', - color: '#FFFFFF', - })); - - const StyledInputLabel = styled(InputLabel)({ - height: '44px', - fontFamily: 'Poppins', - fontWeight: '700', - fontSize: '20px', - lineHeight: '30px', - color: '#FFFFFF', - }); - -const MenuItemStyled = styled(MenuItem)(({ selected }: { selected: boolean }) => ({ - color: selected ? 'black' : 'rgba(0, 0, 0, 0.5)', -})); - -const gradesList = ['High School', '8th Grade', '7th Grade', '6th Grade', '5th Grade', '4th Grade', '3rd Grade', '2nd Grade', '1st Grade', 'Kindergarten']; - -function SearchBar({ screenSize, onSearchChange, onGradeChange, onSortChange }: SearchBarProps) { - const theme = useTheme(); - const [isSelectOpen, setIsSelectOpen] = useState(false); - const [searchTerm, setSearchTerm] = useState(''); - const [selectedGrades, setSelectedGrades] = useState([]); - const [selectedSort, setSelectedSort] = useState<{ field: string; direction: string | null }>({ - field: '', - direction: null, - }); - - const handleInputChange = (event: React.ChangeEvent) => { - const { value } = event.target; - setSearchTerm(value); - debounce(() => { - onSearchChange(value); - }, 800)(); - }; - - const handleGradesChange = (event: SelectChangeEvent) => { - const newGrades = (event.target.value as string[]); - setSelectedGrades(newGrades); - onGradeChange(newGrades); - }; - const handleSortOptionClick = (field: string) => { - let newDirection: string | null = 'desc'; - - if (selectedSort.field === field) { - if (selectedSort.direction === 'desc') { - newDirection = 'asc'; - } else if (selectedSort.direction === 'asc') { - newDirection = null; // reset sorting - } else { - newDirection = 'desc'; // start with descending - } - } - setSelectedSort({ field, direction: newDirection }); - onSortChange({ field, direction: newDirection }); - }; - const renderSortArrow = (field: string) => { - if (selectedSort.field === field) { - return ( - sort arrow - ); - } - return null; - }; - return ( - - - setIsSelectOpen(!isSelectOpen)}> - Choose Grade - - Select Arrow - - - - {gradesList.map((grade) => ( - - - {grade} - - ))} - - - - Search Icon - - ), - }} - /> - {searchTerm || selectedGrades.length > 0 ? ( - - - - sort icon - {screenSize=== ScreenSize.SMALL ? - null - : Sort} - - handleSortOptionClick(e.target.value as string)} - renderValue={() => null} - labelId="sort-label" - MenuProps={MenuPropsStyled} - IconComponent= {() => null} - sx={{ - "& .MuiOutlinedInput-notchedOutline": { - border: 0 - }, - "&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": { - border: "none" - }, - }} - > - {['Date Updated', 'Most Popular', 'Grade Level', 'Question Count'].map((field) => ( - handleSortOptionClick(field)}> - - - {field} - - {renderSortArrow(field)} - - - ))} - - - ) : null} - - - ); -} -export default SearchBar; diff --git a/central_v2/src/components/SearchResults.tsx b/central_v2/src/components/SearchResults.tsx index ec7846957..e33128b5c 100644 --- a/central_v2/src/components/SearchResults.tsx +++ b/central_v2/src/components/SearchResults.tsx @@ -3,7 +3,7 @@ import { Grid, Typography, Box, styled } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { APIClients, IGameTemplate } from '@righton/networking'; import StyledGameCard from './GameCard'; -import { ScreenSize } from '../lib/HostModels'; +import { ScreenSize } from '../lib/CentralModels'; import placeHolder from '../images/placeHolder.svg'; diff --git a/central_v2/src/components/searchbar/SearchBar.tsx b/central_v2/src/components/searchbar/SearchBar.tsx new file mode 100644 index 000000000..cc44d7f61 --- /dev/null +++ b/central_v2/src/components/searchbar/SearchBar.tsx @@ -0,0 +1,158 @@ +import React, { useState, ChangeEvent } from 'react'; +import { Box, InputAdornment, Typography, Button, Collapse, styled, TextField, MenuItem, Select, Checkbox, Chip, InputLabel, FormControl, OutlinedInput, SelectChangeEvent } from '@mui/material'; +import { useTheme } from '@mui/material/styles'; +import debounce from 'lodash/debounce'; +import { GradeTarget } from '@righton/networking'; +import SearchIcon from '../../images/search.svg'; +import { ScreenSize } from '../../lib/CentralModels'; +import SelectGradesMenu from './SelectGradesMenu'; +import SortSearchMenu from './SortSearchMenu'; + + +interface SearchBarProps { + screenSize?: ScreenSize; + handleChooseGrades: (grades: GradeTarget[]) => void; + onSearchChange: (searchTerm: string) => void; + onSortChange: (sort: { field: string; direction: string | null }) => void; +} +interface SearchBarProps2 { + screenSize?: ScreenSize; +} + +const SearchBarContainer = styled(TextField)(({ screenSize, theme }) => ({ + width: '100%', + flexGrow: 1, + margin: '0', + backgroundColor: '#FFFFFF', + height: '44px', + borderRadius: '0px 30px 30px 0px', + '& .MuiOutlinedInput-root': { + height: '100%', + padding: '0 12px', + boxSizing: 'border-box', + borderRadius: '0px 30px 30px 0px', + '& .MuiInputBase-input': { + padding: 0, + height: '38px', + lineHeight: '38px', + fontFamily: 'Rubik', + '&::placeholder': { + color: `${theme.palette.primary.extraDarkBlue}`, + fontWeight: 400, + fontFamily: 'Rubik', + fontSize: `${theme.sizing.smPadding}px`, + }, + }, + }, +})); + +const SearchAndFilterContainer = styled(Box)(({ screenSize, theme }) => ({ + height: '88px', + width: '100%', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + backgroundColor: `${theme.palette.primary.extraDarkBlue}`, + padding: `${theme.sizing.mdPadding}px ${theme.sizing.lgPadding}px`, + gap: '16px', + boxSizing: 'border-box', +})); + +const MenuPropsStyled = { + PaperProps: { + sx: { + backgroundColor: '#FFFFFF', + borderRadius: '20px', + gap: '10px', + '& .MuiMenuItem-root': { + color: 'rgba(0, 0, 0, 0.5)', + '&.Mui-selected': { + color: 'black', + }, + }, + }, + }, +}; + +const PrimaryButton2 = styled(Select)(({ screenSize, theme }) => ({ + width: screenSize === ScreenSize.SMALL ? '44px' : '110px', + minWidth: '44px', + height: '44px', + gap: `${theme.sizing.xSmPadding}px`, + borderRadius: '54px', + background: 'linear-gradient(90deg, #E81144 0%, #E31C5E 100%)', + boxShadow: '0px 5px 22px 0px rgba(71, 217, 255, 0.3)', + color: '#FFFFFF', + textTransform: 'none', + boxSizing: 'border-box', + padding: '0px' + })); + + const PrimaryButton2Text = styled(Typography)(() => ({ + height: '30px', + fontFamily: 'Poppins', + fontWeight: '700', + fontSize: '20px', + lineHeight: '30px', + color: '#FFFFFF', + })); + +function SearchBar({ screenSize, onSearchChange, handleChooseGrades, onSortChange }: SearchBarProps) { + const theme = useTheme(); + + const [searchTerm, setSearchTerm] = useState(''); + + const [selectedSort, setSelectedSort] = useState<{ field: string; direction: string | null }>({ + field: '', + direction: null, + }); + + const handleInputChange = (event: React.ChangeEvent) => { + const { value } = event.target; + setSearchTerm(value); + debounce(() => { + onSearchChange(value); + }, 800)(); + }; + + const handleSortOptionClick = (field: string) => { + let newDirection: string | null = 'desc'; + + if (selectedSort.field === field) { + if (selectedSort.direction === 'desc') { + newDirection = 'asc'; + } else if (selectedSort.direction === 'asc') { + newDirection = null; // reset sorting + } else { + newDirection = 'desc'; // start with descending + } + } + setSelectedSort({ field, direction: newDirection }); + onSortChange({ field, direction: newDirection }); + }; + return ( + + + + + Search Icon + + ), + }} + /> + + + + ); +} +export default SearchBar; diff --git a/central_v2/src/components/searchbar/SelectGradesMenu.tsx b/central_v2/src/components/searchbar/SelectGradesMenu.tsx new file mode 100644 index 000000000..6685c1268 --- /dev/null +++ b/central_v2/src/components/searchbar/SelectGradesMenu.tsx @@ -0,0 +1,108 @@ +import React, { useState } from 'react'; +import { Checkbox } from '@mui/material'; +import { GradeTarget } from '@righton/networking'; +import { ScreenSize } from '../../lib/CentralModels'; +import { + SelectContainer, + SelectGrade, + SelectLabel, + SelectArrowContainer, + SelectMenu, + SelectMenuItem, + SelectButton, + SelectButtonBox +} from '../../lib/styledcomponents/SelectGrade'; +import SelectArrow from '../../images/SelectArrow.svg'; + +interface SelectGradesMenuProps { + screenSize: ScreenSize; + handleChooseGrades: (grades: GradeTarget[]) => void; +} + +export default function SelectGradesMenu ({ + screenSize, + handleChooseGrades, +}: SelectGradesMenuProps ){ + const [isSelectOpen, setIsSelectOpen] = useState(false); + const [selectedGrades, setSelectedGrades] = useState([]); + const gradeMap = { + '8th Grade': GradeTarget.GRADEEIGHT, + '7th Grade': GradeTarget.GRADESEVEN, + '6th Grade': GradeTarget.GRADESIX, + '5th Grade': GradeTarget.GRADEFIVE, + '4th Grade': GradeTarget.GRADEFOUR, + '3rd Grade': GradeTarget.GRADETHREE, + '2nd Grade': GradeTarget.GRADETWO, + '1st Grade': GradeTarget.GRADEONE, + 'Kindergarten': GradeTarget.KINDERGARTEN, + }; + const selectedGradeMap = { + '8': GradeTarget.GRADEEIGHT, + '7': GradeTarget.GRADESEVEN, + '6': GradeTarget.GRADESIX, + '5': GradeTarget.GRADEFIVE, + '4': GradeTarget.GRADEFOUR, + '3': GradeTarget.GRADETHREE, + '2': GradeTarget.GRADETWO, + '1': GradeTarget.GRADEONE, + 'Kindergarten': GradeTarget.KINDERGARTEN, + } + // updates copy of array that will be sent to parent component on click of choose button + const handleGradesChange = (grade: string) => { + if (!selectedGrades.includes(gradeMap[grade as keyof typeof gradeMap])) { + setSelectedGrades((prev: GradeTarget[]) => [...prev, gradeMap[grade as keyof typeof gradeMap]]); + } else { + setSelectedGrades((prev: GradeTarget[]) => prev.filter((g) => g !== gradeMap[grade as keyof typeof gradeMap] as GradeTarget)); + } + }; + const getSelectLabel = () => { + if (selectedGrades.length === 0) { + return 'Choose Grade'; + } + if (selectedGrades.length === 1) { + if (selectedGrades[0] === GradeTarget.KINDERGARTEN) { + return 'Kindergarten'; + } + return `Grade ${Object.keys(selectedGradeMap).find((g) => selectedGradeMap[g as keyof typeof selectedGradeMap] === selectedGrades[0])}`; + } + if (selectedGrades.length >= 2) { + const gradesForLabel = selectedGrades.slice(0,2); + const labels = gradesForLabel.map((g) => Object.keys(selectedGradeMap).find((grade) => selectedGradeMap[grade as keyof typeof selectedGradeMap] === g)); + const parsedLabels = labels.map((label) => label === 'Kindergarten' ? 'Kdg.' : label); + if (selectedGrades.length === 2) + return `Grades ${parsedLabels.join(' & ')}`; + return `Grades ${labels.join(', ')}...`; + } + return `${selectedGrades.length} Grades Selected`; + } + return ( + + setIsSelectOpen(!isSelectOpen)}> + { screenSize !== ScreenSize.SMALL && + {getSelectLabel()} + } + + Select Arrow + + + + {Object.keys(gradeMap).map((grade) => ( + handleGradesChange(grade)}> + + {grade} + + ))} + + { + setIsSelectOpen(false) + handleChooseGrades(selectedGrades) + }} + > + Choose + + + + + ); +} \ No newline at end of file diff --git a/central_v2/src/components/searchbar/SortSearchMenu.tsx b/central_v2/src/components/searchbar/SortSearchMenu.tsx new file mode 100644 index 000000000..4fd43f2af --- /dev/null +++ b/central_v2/src/components/searchbar/SortSearchMenu.tsx @@ -0,0 +1,70 @@ +import React, { useState } from 'react'; +import { Box, Typography } from '@mui/material'; +import { GradeTarget, SortType, SortDirection } from '@righton/networking'; +import { ScreenSize } from '../../lib/CentralModels'; +import { + SortContainer, + SortButton, + SortLabel, + SortArrowContainer, + SortMenuArrowContainer, + SortMenu, + SortMenuItem, +} from '../../lib/styledcomponents/SortSearch'; +import SortArrows from '../../images/SortArrows.svg'; +import SortArrow from '../../images/sortArrow.svg'; + +interface SortSearchMenuProps { + screenSize: ScreenSize; + handleChooseGrades: (grades: GradeTarget[]) => void; +} + +export default function SortSearchMenu ({ + screenSize, + handleChooseGrades, +}: SortSearchMenuProps ){ + const [isSortOpen, setIsSortOpen] = useState(false); + const [selectedSort, setSelectedSort] = useState<{ field: SortType, direction: SortDirection }>({ field: SortType.listGameTemplatesByDate, direction: SortDirection.ASC }); + const sortTypeMap = { + 'Date Updated': SortType.listGameTemplatesByDate, + 'Most Popular': SortType.listGameTemplates, + 'Grade Level': SortType.listGameTemplatesByGrade, + 'Question Count': SortType.listGameTemplatesByQuestionCount, + }; + + // updates copy of array that will be sent to parent component on click of choose button + const handleSortChange = (selectSort: {field: SortType, direction: SortDirection}) => { + const inverseDirection = selectSort.direction === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC; + const newDirection = selectedSort.field === selectSort.field ? inverseDirection : SortDirection.ASC; + setSelectedSort({field: selectSort.field, direction: newDirection}); + }; + return ( + + setIsSortOpen(!isSortOpen)}> + + Sort Arrow + + { screenSize !== ScreenSize.SMALL && + Sort + } + + + {Object.keys(sortTypeMap).map((sortType) => ( + handleSortChange({field: sortTypeMap[sortType as keyof typeof sortTypeMap], direction: selectedSort.direction})}> + + + {sortType} + + + Sort Direction Icon + + + + ))} + + + ); +} \ No newline at end of file diff --git a/central_v2/src/containers/MainContainer.tsx b/central_v2/src/containers/MainContainer.tsx index 84df74484..6d4b444f8 100644 --- a/central_v2/src/containers/MainContainer.tsx +++ b/central_v2/src/containers/MainContainer.tsx @@ -4,7 +4,7 @@ import { styled, useTheme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useTranslation } from 'react-i18next'; import { Box } from '@mui/material'; -import { ScreenSize } from '../lib/HostModels'; +import { ScreenSize } from '../lib/CentralModels'; import ExploreGames from '../pages/ExploreGames'; import ExploreQuestions from '../pages/ExploreQuestions'; import MyLibrary from '../pages/MyLibrary'; diff --git a/central_v2/src/images/SortArrows.svg b/central_v2/src/images/SortArrows.svg new file mode 100644 index 000000000..b946c574d --- /dev/null +++ b/central_v2/src/images/SortArrows.svg @@ -0,0 +1,3 @@ + + + diff --git a/central_v2/src/lib/HostModels.tsx b/central_v2/src/lib/CentralModels.tsx similarity index 100% rename from central_v2/src/lib/HostModels.tsx rename to central_v2/src/lib/CentralModels.tsx diff --git a/central_v2/src/lib/styledcomponents/SelectGrade.tsx b/central_v2/src/lib/styledcomponents/SelectGrade.tsx index 7324889f8..f57816243 100644 --- a/central_v2/src/lib/styledcomponents/SelectGrade.tsx +++ b/central_v2/src/lib/styledcomponents/SelectGrade.tsx @@ -1,5 +1,6 @@ import React, { useState, ChangeEvent } from 'react'; -import { Box, Slide, styled, Typography } from '@mui/material'; +import { Box, Button, styled, Typography } from '@mui/material'; +import { ScreenSize } from '../CentralModels'; export const SelectContainer = styled(Box)(() => { @@ -11,21 +12,21 @@ export const SelectContainer = styled(Box)(() => { }; }); -export const SelectGrade = styled(Box)(() => { - return { +export const SelectGrade = styled(Box, { + shouldForwardProp: (prop) => prop !== 'screenSize', +})<{ screenSize: ScreenSize }>(({ screenSize }) => ({ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', - width: '240px', + width: screenSize === ScreenSize.SMALL ? '38px' : '240px', minHeight: '44px', background: 'linear-gradient(90deg, #F60E44 0%, #E31C5E 100%)', borderTopLeftRadius: '22px', borderBottomLeftRadius: '22px', gap: '16px', zIndex: 3 - }; -}); +})); export const SelectLabel = styled(Typography)(() => { return { @@ -78,22 +79,48 @@ export const SelectMenu = styled(Box, { borderBottomLeftRadius: '16px', borderBottomRightRadius: '16px', paddingLeft: '36px', + paddingRight: '36px', + paddingTop: '8px', + paddingBottom: '8px', position: 'absolute', top: '44px', left: 0, width: '100%', + minWidth: '240px', boxSizing: 'border-box', transition: isSelectOpen ? 'opacity 300ms ease, transform 300ms ease-in-out' : 'opacity 300ms ease, transform 150ms ease-in-out', opacity: isSelectOpen ? 1 : 0, transform: isSelectOpen ? 'translateY(0px)' : 'translateY(-20px)', + boxShadow: '0px 8px 16px -4px rgba(0, 0, 0, 0.4)' })); export const SelectMenuItem = styled(Box)(() => { return { + width: '100%', display: 'flex', flexDirection: 'row', alignItems: 'center', - justifyContent: 'center', + justifyContent: 'flex-start', gap: '16px', }; -}); \ No newline at end of file +}); + +export const SelectButtonBox = styled(Box)(({theme}) => ({ + width: '100%', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', +})); + +export const SelectButton = styled(Button)(({theme}) => ({ + width: '155px', + height: '38px', + padding: `${theme.sizing.xxSmPadding}px 12px`, + gap: `${theme.sizing.xSmPadding}px`, + borderRadius: '54px', + background: 'linear-gradient(270.1deg, #1C94C3 0.09%, #2A6AC6 64.33%, #2C62C6 76.27%, #3153C7 99.91%)', + boxShadow: '0px 5px 22px 0px rgba(71, 217, 255, 0.3)', + color: '#FFFFFF', + textTransform: 'none', +})); \ No newline at end of file diff --git a/central_v2/src/lib/styledcomponents/SortSearch.tsx b/central_v2/src/lib/styledcomponents/SortSearch.tsx new file mode 100644 index 000000000..d6b9e2bc0 --- /dev/null +++ b/central_v2/src/lib/styledcomponents/SortSearch.tsx @@ -0,0 +1,129 @@ +import React from 'react'; +import { Box, Button, styled, Typography } from '@mui/material'; +import { SortType, SortDirection } from '@righton/networking'; +import { ScreenSize } from '../CentralModels'; + + +export const SortContainer = styled(Box)(() => { + return { + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + position: 'relative', + }; +}); + +export const SortButton = styled(Box, { + shouldForwardProp: (prop) => prop !== 'screenSize', +})<{ screenSize: ScreenSize }>(({ screenSize }) => ({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + width: screenSize === ScreenSize.SMALL ? '38px' : '94px', + minHeight: '44px', + background: 'linear-gradient(90deg, #F60E44 0%, #E31C5E 100%)', + borderRadius: '22px', + gap: '8px', + zIndex: 3 +})); + +export const SortLabel = styled(Typography)(() => { + return { + color: 'white', + fontFamily: 'Poppins', + fontSize: '20', + fontWeight: '700' + }; +}); + +export const SortArrowContainer = styled(Box, { + shouldForwardProp: (prop) => prop !== 'isSortOpen', +})<{ isSortOpen: boolean }>(({ isSortOpen }) => ({ + transform: isSortOpen ? 'rotate(180deg)' : 'rotate(0deg)', + animation: isSortOpen ? 'rotateScaleOpen 300ms ease-in-out' : 'rotateScaleClose 300ms ease-in-out', + '@keyframes rotateScaleOpen': { + '0%': { + transform:'rotate(0deg) scale(1)' + }, + '50%': { + transform: 'rotate(180deg) scale(1.1)' + }, + '100%': { + transform: 'rotate(180deg) scale(1)' + } + }, + '@keyframes rotateScaleClose': { + '0%': { + transform:'rotate(180deg) scale(1)' + }, + '50%': { + transform: 'rotate(0deg) scale(1.1)' + }, + '100%': { + transform: 'rotate(0deg) scale(1)' + } + } +})); + +export const SortMenuArrowContainer = styled(SortArrowContainer, { + shouldForwardProp: (prop) => prop !== 'selectedSort' && prop !== 'currentSort', +})<{ selectedSort: {field: SortType, direction: SortDirection}, currentSort: SortType}>(({ selectedSort, currentSort}) => ({ + transform: selectedSort.field === currentSort && selectedSort.direction === SortDirection.ASC ? 'rotate(180deg)' : 'rotate(0deg)', + animation: selectedSort.field === currentSort && selectedSort.direction === SortDirection.ASC ? 'rotateScaleOpen 300ms ease-in-out' : 'rotateScaleClose 300ms ease-in-out', +})); + +export const SortMenu = styled(Box, { + shouldForwardProp: (prop) => prop !== 'isSortOpen', +})<{ isSortOpen: boolean }>(({ isSortOpen }) => ({ + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + justifyContent: 'center', + zIndex: 2, + background: 'white', + borderRadius: '16px', + padding: "8px", + position: 'absolute', + top: '44px', + right: 0, + width: '100%', + minWidth: '174px', + boxSizing: 'border-box', + transition: isSortOpen ? 'opacity 300ms ease, transform 300ms ease-in-out' : 'opacity 300ms ease, transform 150ms ease-in-out', + opacity: isSortOpen ? 1 : 0, + transform: isSortOpen ? 'translateY(0px)' : 'translateY(-20px)', + boxShadow: '0px 8px 16px -4px rgba(0, 0, 0, 0.4)', + cursor: 'pointer', +})); + +export const SortMenuItem = styled(Box)(() => { + return { + width: '100%', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-start', + gap: '16px', + }; +}); + +export const SelectButtonBox = styled(Box)(({theme}) => ({ + width: '100%', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', +})); + +export const SelectButton = styled(Button)(({theme}) => ({ + width: '155px', + height: '38px', + padding: `${theme.sizing.xxSmPadding}px 12px`, + gap: `${theme.sizing.xSmPadding}px`, + borderRadius: '54px', + background: 'linear-gradient(270.1deg, #1C94C3 0.09%, #2A6AC6 64.33%, #2C62C6 76.27%, #3153C7 99.91%)', + boxShadow: '0px 5px 22px 0px rgba(71, 217, 255, 0.3)', + color: '#FFFFFF', + textTransform: 'none', +})); \ No newline at end of file diff --git a/central_v2/src/pages/ExploreGames.tsx b/central_v2/src/pages/ExploreGames.tsx index 22d71e383..a0081e6b5 100644 --- a/central_v2/src/pages/ExploreGames.tsx +++ b/central_v2/src/pages/ExploreGames.tsx @@ -1,16 +1,16 @@ import React, { useState, useEffect } from 'react'; import useMediaQuery from '@mui/material/useMediaQuery'; -import { APIClients, IGameTemplate } from '@righton/networking'; +import { APIClients, IGameTemplate, GradeTarget } from '@righton/networking'; import { useTranslation } from 'react-i18next'; import { useTheme, styled } from '@mui/material/styles'; import { Typography, Box, Button } from '@mui/material'; import InfiniteScroll from 'react-infinite-scroll-component'; import debounce from 'lodash/debounce' -import { ScreenSize } from '../lib/HostModels'; +import { ScreenSize } from '../lib/CentralModels'; import ExploreGamesUpper from '../components/ExploreGamesUpper'; import EGMostPopular from '../components/EGMostPopular'; import { fetchMoreGames } from "../lib/HelperFunctions"; -import SearchBar from '../components/SearchBar'; +import SearchBar from '../components/searchbar/SearchBar'; import SearchResults from '../components/SearchResults'; interface ExploreGamesProps { @@ -50,19 +50,18 @@ export default function ExploreGames({ apiClients }: ExploreGamesProps) { const [nextToken, setNextToken] = useState(null); const [loading, setLoading] = useState(false); const [searchTerm, setSearchTerm] = useState(''); - const [selectedGrades, setSelectedGrades] = useState([]); - const [searchedGames, setSearchedGames] = useState([]); + const [selectedGrades, setSelectedGrades] = useState([]); const [sort, setSort] = useState<{ field: string; direction: string | null }>({ field: '', direction: null, }); - - const handleSearchChange = (newSearch: string) => { - setSearchTerm(newSearch); + + const handleChooseGrades = (grades: GradeTarget[]) => { + setSelectedGrades((prev) => [...grades]); }; - const handleGradeChange = (newGrades: string[]) => { - setSelectedGrades(newGrades); + const handleSearchChange = (newSearch: string) => { + setSearchTerm(newSearch); }; const handleSortChange = (newSort: { field: string; direction: string | null }) => { @@ -72,7 +71,7 @@ export default function ExploreGames({ apiClients }: ExploreGamesProps) { useEffect(() => { if (apiClients) { - apiClients.gameTemplate.listGameTemplates(12, null, null, null, []) + apiClients.gameTemplate.listGameTemplates(12, null, null, null, selectedGrades ?? []) .then(response => { setRecommendedGames(response?.gameTemplates || []); setNextToken(response?.nextToken || null); @@ -81,7 +80,7 @@ export default function ExploreGames({ apiClients }: ExploreGamesProps) { console.error('Error fetching games:', error); }); - apiClients.gameTemplate.listGameTemplates(12, null, null, null, []) + apiClients.gameTemplate.listGameTemplates(12, null, null, null, selectedGrades ?? []) .then(response => { setMostPopularGames(response?.gameTemplates || []); setNextToken(response?.nextToken || null); @@ -91,7 +90,7 @@ export default function ExploreGames({ apiClients }: ExploreGamesProps) { console.error('Error fetching games:', error); }); } - }, [apiClients]); + }, [apiClients]); // eslint-disable-line return ( @@ -104,7 +103,7 @@ export default function ExploreGames({ apiClients }: ExploreGamesProps) { scrollableTarget="scrollableDiv" style={{ width: '100vw', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }} > - + {searchTerm || selectedGrades.length > 0 ? ( ) :( diff --git a/central_v2/src/pages/ExploreQuestions.tsx b/central_v2/src/pages/ExploreQuestions.tsx index 87fe470af..ed6868cb2 100644 --- a/central_v2/src/pages/ExploreQuestions.tsx +++ b/central_v2/src/pages/ExploreQuestions.tsx @@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'; import { useTheme, styled } from '@mui/material/styles'; import { Typography, Box, Button } from '@mui/material'; import InfiniteScroll from 'react-infinite-scroll-component'; -import { ScreenSize } from '../lib/HostModels'; +import { ScreenSize } from '../lib/CentralModels'; import ExploreGamesUpper from '../components/ExploreGamesUpper'; import EGMostPopular from '../components/EGMostPopular'; import {fetchMoreGames} from "../lib/HelperFunctions"; diff --git a/central_v2/src/pages/MyLibrary.tsx b/central_v2/src/pages/MyLibrary.tsx index a38cabddc..18568117b 100644 --- a/central_v2/src/pages/MyLibrary.tsx +++ b/central_v2/src/pages/MyLibrary.tsx @@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'; import { useTheme, styled } from '@mui/material/styles'; import { Typography, Box, Button } from '@mui/material'; import InfiniteScroll from 'react-infinite-scroll-component'; -import { ScreenSize } from '../lib/HostModels'; +import { ScreenSize } from '../lib/CentralModels'; import ExploreGamesUpper from '../components/ExploreGamesUpper'; import EGMostPopular from '../components/EGMostPopular'; import {fetchMoreGames} from "../lib/HelperFunctions"; diff --git a/networking/src/APIClients/BaseAPIClient.ts b/networking/src/APIClients/BaseAPIClient.ts index 48c6dd7b3..e6daeb7a6 100644 --- a/networking/src/APIClients/BaseAPIClient.ts +++ b/networking/src/APIClients/BaseAPIClient.ts @@ -21,6 +21,16 @@ export enum GradeTarget { GRADEEIGHT = "8", HIGHSCHOOL = "H" } +export enum SortType { + listGameTemplates, + listGameTemplatesByDate, + listGameTemplatesByGrade, + listGameTemplatesByQuestionCount +} +export enum SortDirection { + ASC = "ASC", + DESC = "DESC", +} export interface GraphQLOptions { input?: object; variables?: object; From 30a9aa999dad638cbb5c293649412f529dc14520 Mon Sep 17 00:00:00 2001 From: drewjhart <79417944+drewjhart@users.noreply.github.com> Date: Mon, 7 Oct 2024 12:58:06 +0700 Subject: [PATCH 6/7] Fixes search bar layout for mobile --- central_v2/.gitignore | 2 + central_v2/.storybook/main.ts | 21 + central_v2/.storybook/preview-head.html | 34 + central_v2/.storybook/preview.ts | 24 + central_v2/package.json | 25 +- central_v2/src/.storybook/main.ts | 22 + central_v2/src/.storybook/preview-head.html | 26 + central_v2/src/.storybook/preview.ts | 24 + .../searchbar/SearchBar.stories.tsx | 43 + .../src/components/searchbar/SearchBar.tsx | 13 +- .../src/lib/styledcomponents/SortSearch.tsx | 8 +- central_v2/yarn.lock | 1533 ++++++++++++++++- 12 files changed, 1698 insertions(+), 77 deletions(-) create mode 100644 central_v2/.storybook/main.ts create mode 100644 central_v2/.storybook/preview-head.html create mode 100644 central_v2/.storybook/preview.ts create mode 100644 central_v2/src/.storybook/main.ts create mode 100644 central_v2/src/.storybook/preview-head.html create mode 100644 central_v2/src/.storybook/preview.ts create mode 100644 central_v2/src/components/searchbar/SearchBar.stories.tsx diff --git a/central_v2/.gitignore b/central_v2/.gitignore index 4d29575de..11b5385dd 100644 --- a/central_v2/.gitignore +++ b/central_v2/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +*storybook.log \ No newline at end of file diff --git a/central_v2/.storybook/main.ts b/central_v2/.storybook/main.ts new file mode 100644 index 000000000..cd78917ed --- /dev/null +++ b/central_v2/.storybook/main.ts @@ -0,0 +1,21 @@ +import type { StorybookConfig } from '@storybook/react-webpack5'; + +const config: StorybookConfig = { + stories: ['../src/**/*.stories.@(ts|tsx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/preset-create-react-app', + '@storybook/addon-onboarding', + '@storybook/addon-interactions', + ], + framework: { + name: '@storybook/react-webpack5', + options: {}, + }, + docs: { + autodocs: 'tag', + }, + staticDirs: ['../public'], +}; +export default config; diff --git a/central_v2/.storybook/preview-head.html b/central_v2/.storybook/preview-head.html new file mode 100644 index 000000000..46150bd72 --- /dev/null +++ b/central_v2/.storybook/preview-head.html @@ -0,0 +1,34 @@ + + + + + + + + + + + + + diff --git a/central_v2/.storybook/preview.ts b/central_v2/.storybook/preview.ts new file mode 100644 index 000000000..cdfa5a34d --- /dev/null +++ b/central_v2/.storybook/preview.ts @@ -0,0 +1,24 @@ +import type { Preview } from '@storybook/react'; + +const preview: Preview = { + parameters: { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + backgrounds: { + default: 'dark', + }, + options: { + storySort: { + method: 'alphabetical', + }, + }, + layout: 'fullscreen', + }, +}; + +export default preview; diff --git a/central_v2/package.json b/central_v2/package.json index f58c494da..3fa35ae5c 100644 --- a/central_v2/package.json +++ b/central_v2/package.json @@ -6,6 +6,7 @@ "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", "@mui/material": "^5.16.7", + "@storybook/addon-viewport": "^8.3.5", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", @@ -14,12 +15,14 @@ "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "@types/styled-components": "^5.1.34", + "init": "^0.1.2", "lodash": "^4.17.21", "react": "^18.3.1", "react-dom": "^18.3.1", "react-i18next": "^15.0.1", "react-infinite-scroll-component": "^6.1.0", "react-scripts": "5.0.1", + "storybook": "^8.3.5", "swiper": "^11.1.1", "typescript": "^4.4.2", "uuid": "^10.0.0", @@ -29,7 +32,9 @@ "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", - "eject": "react-scripts eject" + "eject": "react-scripts eject", + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build" }, "prettier": { "singleQuote": true @@ -46,7 +51,8 @@ "airbnb-typescript", "prettier", "plugin:@typescript-eslint/recommended", - "plugin:import/typescript" + "plugin:import/typescript", + "plugin:storybook/recommended" ], "parser": "@typescript-eslint/parser", "parserOptions": { @@ -114,6 +120,16 @@ ] }, "devDependencies": { + "@chromatic-com/storybook": "^1.9.0", + "@storybook/addon-essentials": "^8.3.5", + "@storybook/addon-interactions": "^8.3.5", + "@storybook/addon-links": "^8.3.5", + "@storybook/addon-onboarding": "^8.3.5", + "@storybook/blocks": "^8.3.5", + "@storybook/preset-create-react-app": "^8.3.5", + "@storybook/react": "^8.3.5", + "@storybook/react-webpack5": "^8.3.5", + "@storybook/test": "^8.3.5", "@types/lodash": "^4.17.7", "@typescript-eslint/parser": "^8.1.0", "eslint": "^9.9.0", @@ -121,6 +137,9 @@ "eslint-config-airbnb-typescript": "^18.0.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.2.1", - "prettier": "^3.3.3" + "eslint-plugin-storybook": "^0.9.0", + "prettier": "^3.3.3", + "prop-types": "^15.8.1", + "webpack": "^5.95.0" } } diff --git a/central_v2/src/.storybook/main.ts b/central_v2/src/.storybook/main.ts new file mode 100644 index 000000000..0400f71dd --- /dev/null +++ b/central_v2/src/.storybook/main.ts @@ -0,0 +1,22 @@ +import type { StorybookConfig } from '@storybook/react-webpack5'; + +const config: StorybookConfig = { + stories: ['../src/**/*.stories.@(ts|tsx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/preset-create-react-app', + '@storybook/addon-onboarding', + '@storybook/addon-interactions', + '@storybook/addon-viewport' + ], + framework: { + name: '@storybook/react-webpack5', + options: {}, + }, + docs: { + autodocs: 'tag', + }, + staticDirs: ['../public'], +}; +export default config; diff --git a/central_v2/src/.storybook/preview-head.html b/central_v2/src/.storybook/preview-head.html new file mode 100644 index 000000000..992f6bf00 --- /dev/null +++ b/central_v2/src/.storybook/preview-head.html @@ -0,0 +1,26 @@ + + + + + + + + + + + diff --git a/central_v2/src/.storybook/preview.ts b/central_v2/src/.storybook/preview.ts new file mode 100644 index 000000000..af3415ffc --- /dev/null +++ b/central_v2/src/.storybook/preview.ts @@ -0,0 +1,24 @@ +// import type { Preview } from '@storybook/react'; + +// const preview: Preview = { +// parameters: { +// actions: { argTypesRegex: '^on[A-Z].*' }, +// controls: { +// matchers: { +// color: /(background|color)$/i, +// date: /Date$/, +// }, +// }, +// backgrounds: { +// default: 'dark', +// }, +// options: { +// storySort: { +// method: 'alphabetical', +// }, +// }, +// layout: 'fullscreen', +// }, +// }; + +// export default preview; diff --git a/central_v2/src/components/searchbar/SearchBar.stories.tsx b/central_v2/src/components/searchbar/SearchBar.stories.tsx new file mode 100644 index 000000000..0db25065c --- /dev/null +++ b/central_v2/src/components/searchbar/SearchBar.stories.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { StoryFn, Meta } from '@storybook/react'; +import { ThemeProvider } from '@mui/material/styles'; +import { I18nextProvider } from 'react-i18next'; +import { ScreenSize } from '../../lib/CentralModels'; +import SearchBar from './SearchBar'; +import Theme from '../../lib/Theme'; +// import i18n from '../i18n.mock'; + +export default { + // structuring our stories per: https://atomicdesign.bradfrost.com/chapter-2/#the-atomic-design-methodology + title: 'Design System/3_Organisms/SearchBar', + component: SearchBar, +} as Meta; + +const Template: StoryFn = function CardTemplate(args) { + return ( + + + + ); +}; + +export const Mobile = Template.bind({}); +Mobile.args = { + screenSize: ScreenSize.SMALL +}; +Mobile.parameters = { + viewport: { + defaultViewport: 'mobile2', + } +}; + +export const TabletDesktop = Template.bind({}); +TabletDesktop.args = { + screenSize: ScreenSize.LARGE +}; +TabletDesktop.parameters = { + viewport: { + defaultViewport: 'desktop', + }, +}; + diff --git a/central_v2/src/components/searchbar/SearchBar.tsx b/central_v2/src/components/searchbar/SearchBar.tsx index cc44d7f61..3dec78a7d 100644 --- a/central_v2/src/components/searchbar/SearchBar.tsx +++ b/central_v2/src/components/searchbar/SearchBar.tsx @@ -24,7 +24,7 @@ const SearchBarContainer = styled(TextField)(({ screenSize, the flexGrow: 1, margin: '0', backgroundColor: '#FFFFFF', - height: '44px', + height: '44px', borderRadius: '0px 30px 30px 0px', '& .MuiOutlinedInput-root': { height: '100%', @@ -33,9 +33,12 @@ const SearchBarContainer = styled(TextField)(({ screenSize, the borderRadius: '0px 30px 30px 0px', '& .MuiInputBase-input': { padding: 0, - height: '38px', - lineHeight: '38px', - fontFamily: 'Rubik', + whiteSpace: screenSize !== ScreenSize.SMALL ? 'nowrap' : 'normal', + height: screenSize !== ScreenSize.SMALL ? '44px' : '16px', + display: '-webkit-box', + WebkitBoxOrient: 'vertical', + overflow: 'hidden', + textOverflow: 'ellipsis', '&::placeholder': { color: `${theme.palette.primary.extraDarkBlue}`, fontWeight: 400, @@ -135,6 +138,8 @@ function SearchBar({ screenSize, onSearchChange, handleChooseGrades, onSortChang =0.3.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/daemon/-/daemon-1.1.0.tgz#6c5102c81db0be856fc9008fc2c935b398864ae8" + integrity sha512-1vX9YVcP21gt12nSD3SQRC/uPU7fyA6M8qyClTBIFuiRWoylFn57PwXhjBAqRl085bZAje7sILhZU48qcS9SWw== + damerau-levenshtein@^1.0.8: version "1.0.8" resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7" @@ -4054,6 +4945,11 @@ dedent@^0.7.0: resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c" integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA== +deep-eql@^5.0.1: + version "5.0.2" + resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-5.0.2.tgz#4b756d8d770a9257300825d52a2c2cff99c3a341" + integrity sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q== + deep-equal@^2.0.5: version "2.2.3" resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.3.tgz#af89dafb23a396c7da3e862abc0be27cf51d56e1" @@ -4133,7 +5029,7 @@ depd@~1.1.2: resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9" integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ== -dequal@^2.0.3: +dequal@^2.0.2, dequal@^2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be" integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA== @@ -4214,6 +5110,11 @@ dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9: resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453" integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg== +dom-accessibility-api@^0.6.3: + version "0.6.3" + resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8" + integrity sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w== + dom-converter@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" @@ -4327,6 +5228,11 @@ ejs@^3.1.6: dependencies: jake "^10.8.5" +electron-to-chromium@^1.5.28: + version "1.5.32" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.32.tgz#4a05ee78e29e240aabaf73a67ce9fe73f52e1bc7" + integrity sha512-M+7ph0VGBQqqpTT2YrabjNKSQ2fEl9PVx6AK3N558gDH9NO8O6XN9SXXFWRo9u9PbEg/bWq+tjXQr+eXmxubCw== + electron-to-chromium@^1.5.4: version "1.5.9" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.9.tgz#3e92950e3a409d109371b7a153a9c5712e2509fd" @@ -4367,7 +5273,16 @@ encodeurl@~2.0.0: resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58" integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg== -enhanced-resolve@^5.17.0: +endent@^2.0.1: + version "2.1.0" + resolved "https://registry.yarnpkg.com/endent/-/endent-2.1.0.tgz#5aaba698fb569e5e18e69e1ff7a28ff35373cd88" + integrity sha512-r8VyPX7XL8U01Xgnb1CjZ3XV+z90cXIJ9JPE/R9SEC9vpw2P6CfsRPJmp20DppC5N7ZAMCmjYkJIa744Iyg96w== + dependencies: + dedent "^0.7.0" + fast-json-parse "^1.0.3" + objectorarray "^1.0.5" + +enhanced-resolve@^5.17.0, enhanced-resolve@^5.17.1: version "5.17.1" resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz#67bfbbcc2f81d511be77d686a90267ef7f898a15" integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg== @@ -4498,7 +5413,7 @@ es-iterator-helpers@^1.0.19: iterator.prototype "^1.1.2" safe-array-concat "^1.1.2" -es-module-lexer@^1.2.1: +es-module-lexer@^1.2.1, es-module-lexer@^1.5.0: version "1.5.4" resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.5.4.tgz#a8efec3a3da991e60efa6b633a7cad6ab8d26b78" integrity sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw== @@ -4535,6 +5450,43 @@ es-to-primitive@^1.2.1: is-date-object "^1.0.1" is-symbol "^1.0.2" +esbuild-register@^3.5.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/esbuild-register/-/esbuild-register-3.6.0.tgz#cf270cfa677baebbc0010ac024b823cbf723a36d" + integrity sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg== + dependencies: + debug "^4.3.4" + +"esbuild@^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0": + version "0.23.1" + resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.23.1.tgz#40fdc3f9265ec0beae6f59824ade1bd3d3d2dab8" + integrity sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg== + optionalDependencies: + "@esbuild/aix-ppc64" "0.23.1" + "@esbuild/android-arm" "0.23.1" + "@esbuild/android-arm64" "0.23.1" + "@esbuild/android-x64" "0.23.1" + "@esbuild/darwin-arm64" "0.23.1" + "@esbuild/darwin-x64" "0.23.1" + "@esbuild/freebsd-arm64" "0.23.1" + "@esbuild/freebsd-x64" "0.23.1" + "@esbuild/linux-arm" "0.23.1" + "@esbuild/linux-arm64" "0.23.1" + "@esbuild/linux-ia32" "0.23.1" + "@esbuild/linux-loong64" "0.23.1" + "@esbuild/linux-mips64el" "0.23.1" + "@esbuild/linux-ppc64" "0.23.1" + "@esbuild/linux-riscv64" "0.23.1" + "@esbuild/linux-s390x" "0.23.1" + "@esbuild/linux-x64" "0.23.1" + "@esbuild/netbsd-x64" "0.23.1" + "@esbuild/openbsd-arm64" "0.23.1" + "@esbuild/openbsd-x64" "0.23.1" + "@esbuild/sunos-x64" "0.23.1" + "@esbuild/win32-arm64" "0.23.1" + "@esbuild/win32-ia32" "0.23.1" + "@esbuild/win32-x64" "0.23.1" + escalade@^3.1.1, escalade@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27" @@ -4572,7 +5524,7 @@ escodegen@^1.8.1: optionalDependencies: source-map "~0.6.1" -escodegen@^2.0.0: +escodegen@^2.0.0, escodegen@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.1.0.tgz#ba93bbb7a43986d29d6041f99f5262da773e2e17" integrity sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w== @@ -4747,6 +5699,16 @@ eslint-plugin-react@^7.27.1: string.prototype.matchall "^4.0.11" string.prototype.repeat "^1.0.0" +eslint-plugin-storybook@^0.9.0: + version "0.9.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-storybook/-/eslint-plugin-storybook-0.9.0.tgz#8f985899b957748d5780f8e6eb5d37c705976bc8" + integrity sha512-qOT/2vQBo0VqrG/BhZv8IdSsKQiyzJw+2Wqq+WFCiblI/PfxLSrGkF/buiXF+HumwfsCyBdaC94UhqhmYFmAvA== + dependencies: + "@storybook/csf" "^0.0.1" + "@typescript-eslint/utils" "^5.62.0" + requireindex "^1.2.0" + ts-dedent "^2.2.0" + eslint-plugin-testing-library@^5.0.1: version "5.11.1" resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.11.1.tgz#5b46cdae96d4a78918711c0b4792f90088e62d20" @@ -4911,7 +5873,7 @@ esprima@1.2.2: resolved "https://registry.yarnpkg.com/esprima/-/esprima-1.2.2.tgz#76a0fd66fcfe154fd292667dc264019750b1657b" integrity sha512-+JpPZam9w5DuJ3Q67SqsMGtiHKENSMRVoxvArfJZK01/BfLEObtZ6orJa/MtoGNR/rfMgp5837T41PAmTwAv/A== -esprima@^4.0.0, esprima@^4.0.1: +esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71" integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A== @@ -4945,6 +5907,13 @@ estree-walker@^1.0.1: resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700" integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg== +estree-walker@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-3.0.3.tgz#67c3e549ec402a487b4fc193d1953a524752340d" + integrity sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g== + dependencies: + "@types/estree" "^1.0.0" + esutils@^2.0.2: version "2.0.3" resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64" @@ -5006,7 +5975,7 @@ expect@^29.0.0: jest-message-util "^29.7.0" jest-util "^29.7.0" -express@^4.17.3: +express@^4.17.3, express@^4.19.2: version "4.21.0" resolved "https://registry.yarnpkg.com/express/-/express-4.21.0.tgz#d57cb706d49623d4ac27833f1cbc466b668eb915" integrity sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng== @@ -5064,6 +6033,11 @@ fast-glob@^3.2.9, fast-glob@^3.3.0: merge2 "^1.3.0" micromatch "^4.0.4" +fast-json-parse@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/fast-json-parse/-/fast-json-parse-1.0.3.tgz#43e5c61ee4efa9265633046b770fb682a7577c4d" + integrity sha512-FRWsaZRWEJ1ESVNbDWmsAlqDk96gPQezzLghafp5J4GUKjbCz3OkAHuZs5TuPEtkbVQERysLp9xv6c24fBm8Aw== + fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633" @@ -5129,6 +6103,11 @@ filelist@^1.0.4: dependencies: minimatch "^5.0.1" +filesize@^10.0.12: + version "10.1.6" + resolved "https://registry.yarnpkg.com/filesize/-/filesize-10.1.6.tgz#31194da825ac58689c0bce3948f33ce83aabd361" + integrity sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w== + filesize@^8.0.6: version "8.0.7" resolved "https://registry.yarnpkg.com/filesize/-/filesize-8.0.7.tgz#695e70d80f4e47012c132d57a059e80c6b580bd8" @@ -5252,6 +6231,24 @@ fork-ts-checker-webpack-plugin@^6.5.0: semver "^7.3.2" tapable "^1.0.0" +fork-ts-checker-webpack-plugin@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-8.0.0.tgz#dae45dfe7298aa5d553e2580096ced79b6179504" + integrity sha512-mX3qW3idpueT2klaQXBzrIM/pHw+T0B/V9KHEvNrqijTq9NFnMZU6oreVxDYcf33P8a5cW+67PjodNHthGnNVg== + dependencies: + "@babel/code-frame" "^7.16.7" + chalk "^4.1.2" + chokidar "^3.5.3" + cosmiconfig "^7.0.1" + deepmerge "^4.2.2" + fs-extra "^10.0.0" + memfs "^3.4.1" + minimatch "^3.0.4" + node-abort-controller "^3.0.1" + schema-utils "^3.1.1" + semver "^7.3.5" + tapable "^2.2.1" + form-data@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f" @@ -5285,6 +6282,15 @@ fs-extra@^10.0.0: jsonfile "^6.0.1" universalify "^2.0.0" +fs-extra@^11.1.0: + version "11.2.0" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.2.0.tgz#e70e17dfad64232287d01929399e0ea7c86b0e5b" + integrity sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw== + dependencies: + graceful-fs "^4.2.0" + jsonfile "^6.0.1" + universalify "^2.0.0" + fs-extra@^9.0.0, fs-extra@^9.0.1: version "9.1.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d" @@ -5340,6 +6346,11 @@ get-caller-file@^2.0.5: resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e" integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg== +get-func-name@^2.0.1: + version "2.0.2" + resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.2.tgz#0d7cf20cd13fda808669ffa88f4ffc7a3943fc41" + integrity sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ== + get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd" @@ -5375,6 +6386,11 @@ get-symbol-description@^1.0.2: es-errors "^1.3.0" get-intrinsic "^1.2.4" +github-slugger@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-2.0.0.tgz#52cf2f9279a21eb6c59dd385b410f0c0adda8f1a" + integrity sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw== + glob-parent@^5.1.2, glob-parent@~5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" @@ -5551,6 +6567,27 @@ hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2: dependencies: function-bind "^1.1.2" +hast-util-heading-rank@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz#2d5c6f2807a7af5c45f74e623498dd6054d2aba8" + integrity sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA== + dependencies: + "@types/hast" "^3.0.0" + +hast-util-is-element@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz#6e31a6532c217e5b533848c7e52c9d9369ca0932" + integrity sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g== + dependencies: + "@types/hast" "^3.0.0" + +hast-util-to-string@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/hast-util-to-string/-/hast-util-to-string-3.0.1.tgz#a4f15e682849326dd211c97129c94b0c3e76527c" + integrity sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A== + dependencies: + "@types/hast" "^3.0.0" + he@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" @@ -5615,6 +6652,11 @@ html-parse-stringify@^3.0.1: dependencies: void-elements "3.1.0" +html-tags@^3.1.0: + version "3.3.1" + resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce" + integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ== + html-webpack-plugin@^5.5.0: version "5.6.0" resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz#50a8fa6709245608cb00e811eacecb8e0d7b7ea0" @@ -5799,6 +6841,13 @@ ini@^1.3.5: resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c" integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew== +init@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/init/-/init-0.1.2.tgz#9882ac152707bccba7fe2207c8df8050875c1504" + integrity sha512-IvHUjULS2q+BXJdiu4FHkByh3+qSFmkOXQ2ItSfYTtkdUksQc0yNX6f1uDyokzRV71tjpFsFc3ckeYLJXunTGw== + dependencies: + daemon ">=0.3.0" + internal-slot@^1.0.4, internal-slot@^1.0.7: version "1.0.7" resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802" @@ -5818,7 +6867,12 @@ ipaddr.js@^2.0.1: resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.2.0.tgz#d33fa7bac284f4de7af949638c9d68157c6b92e8" integrity sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA== -is-arguments@^1.1.1: +is-absolute-url@^4.0.0: + version "4.0.1" + resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-4.0.1.tgz#16e4d487d4fded05cfe0685e53ec86804a5e94dc" + integrity sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A== + +is-arguments@^1.0.4, is-arguments@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b" integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA== @@ -5921,7 +6975,7 @@ is-generator-fn@^2.0.0: resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118" integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ== -is-generator-function@^1.0.10: +is-generator-function@^1.0.10, is-generator-function@^1.0.7: version "1.0.10" resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72" integrity sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A== @@ -5977,6 +7031,11 @@ is-plain-obj@^3.0.0: resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-3.0.0.tgz#af6f2ea14ac5a646183a5bbdb5baabbc156ad9d7" integrity sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA== +is-plain-object@5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344" + integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q== + is-potential-custom-element-name@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5" @@ -6031,7 +7090,7 @@ is-symbol@^1.0.2, is-symbol@^1.0.3: dependencies: has-symbols "^1.0.2" -is-typed-array@^1.1.13: +is-typed-array@^1.1.13, is-typed-array@^1.1.3: version "1.1.13" resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.13.tgz#d6c5ca56df62334959322d7d7dd1cca50debe229" integrity sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw== @@ -6716,6 +7775,11 @@ js-yaml@^4.1.0: dependencies: argparse "^2.0.1" +jsdoc-type-pratt-parser@^4.0.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz#ff6b4a3f339c34a6c188cbf50a16087858d22113" + integrity sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg== + jsdom@^16.6.0: version "16.7.0" resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.7.0.tgz#918ae71965424b197c819f8183a754e18977b710" @@ -6754,6 +7818,11 @@ jsesc@^2.5.1: resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4" integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA== +jsesc@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e" + integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g== + jsesc@~0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d" @@ -6796,12 +7865,12 @@ json5@^1.0.2: dependencies: minimist "^1.2.0" -json5@^2.1.2, json5@^2.2.0, json5@^2.2.3: +json5@^2.1.2, json5@^2.2.0, json5@^2.2.2, json5@^2.2.3: version "2.2.3" resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== -jsonfile@^6.0.1: +jsonfile@^6.0.1, jsonfile@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae" integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ== @@ -6990,6 +8059,13 @@ loose-envify@^1.1.0, loose-envify@^1.4.0: dependencies: js-tokens "^3.0.0 || ^4.0.0" +loupe@^3.1.0, loupe@^3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/loupe/-/loupe-3.1.1.tgz#71d038d59007d890e3247c5db97c1ec5a92edc54" + integrity sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw== + dependencies: + get-func-name "^2.0.1" + lower-case@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28" @@ -7021,6 +8097,13 @@ magic-string@^0.25.0, magic-string@^0.25.7: dependencies: sourcemap-codec "^1.4.8" +magic-string@^0.30.5: + version "0.30.11" + resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.11.tgz#301a6f93b3e8c2cb13ac1a7a673492c0dfd12954" + integrity sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A== + dependencies: + "@jridgewell/sourcemap-codec" "^1.5.0" + make-dir@^3.0.2, make-dir@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f" @@ -7042,6 +8125,16 @@ makeerror@1.0.12: dependencies: tmpl "1.0.5" +map-or-similar@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08" + integrity sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg== + +markdown-to-jsx@^7.4.5: + version "7.5.0" + resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.5.0.tgz#42ece0c71e842560a7d8bd9f81e7a34515c72150" + integrity sha512-RrBNcMHiFPcz/iqIj0n3wclzHXjwS7mzjBNWecKKVhNTIxQepIix6Il/wZCn2Cg5Y1ow2Qi84+eJrryFRWBEWw== + mdn-data@2.0.14: version "2.0.14" resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50" @@ -7057,13 +8150,20 @@ media-typer@0.3.0: resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ== -memfs@^3.1.2, memfs@^3.4.3: +memfs@^3.1.2, memfs@^3.4.1, memfs@^3.4.12, memfs@^3.4.3: version "3.6.0" resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.6.0.tgz#d7a2110f86f79dd950a8b6df6d57bc984aa185f6" integrity sha512-EGowvkkgbMcIChjMTMkESFDbZeSh8xZ7kNSF0hAiAN4Jh6jgHCRS0Ga/+C8y6Au+oqpezRHCfPsmJ2+DwAgiwQ== dependencies: fs-monkey "^1.0.4" +memoizerific@^1.11.3: + version "1.11.3" + resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a" + integrity sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog== + dependencies: + map-or-similar "^1.5.0" + merge-descriptors@1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5" @@ -7119,7 +8219,7 @@ mimic-fn@^2.1.0: resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b" integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg== -min-indent@^1.0.0: +min-indent@^1.0.0, min-indent@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== @@ -7240,6 +8340,11 @@ no-case@^3.0.4: lower-case "^2.0.2" tslib "^2.0.3" +node-abort-controller@^3.0.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/node-abort-controller/-/node-abort-controller-3.1.1.tgz#a94377e964a9a37ac3976d848cb5c765833b8548" + integrity sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ== + node-forge@^1: version "1.3.1" resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3" @@ -7384,6 +8489,11 @@ object.values@^1.1.0, object.values@^1.1.6, object.values@^1.1.7, object.values@ define-properties "^1.2.1" es-object-atoms "^1.0.0" +objectorarray@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/objectorarray/-/objectorarray-1.0.5.tgz#2c05248bbefabd8f43ad13b41085951aac5e68a5" + integrity sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg== + obuf@^1.0.0, obuf@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e" @@ -7415,7 +8525,7 @@ onetime@^5.1.2: dependencies: mimic-fn "^2.1.0" -open@^8.0.9, open@^8.4.0: +open@^8.0.4, open@^8.0.9, open@^8.4.0: version "8.4.2" resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9" integrity sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ== @@ -7544,6 +8654,11 @@ pascal-case@^3.1.2: no-case "^3.0.4" tslib "^2.0.3" +path-browserify@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd" + integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g== + path-exists@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515" @@ -7587,6 +8702,11 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== +pathval@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/pathval/-/pathval-2.0.0.tgz#7e2550b422601d4f6b8e26f1301bc8f15a741a25" + integrity sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA== + performance-now@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" @@ -7631,6 +8751,20 @@ pkg-up@^3.1.0: dependencies: find-up "^3.0.0" +pnp-webpack-plugin@^1.7.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.7.0.tgz#65741384f6d8056f36e2255a8d67ffc20866f5c9" + integrity sha512-2Rb3vm+EXble/sMXNSu6eoBx8e79gKqhNq9F5ZWW6ERNCTE/Q0wQNne5541tE5vKjfM8hpNCYL+LGc1YTfI0dg== + dependencies: + ts-pnp "^1.1.6" + +polished@^4.2.2: + version "4.3.1" + resolved "https://registry.yarnpkg.com/polished/-/polished-4.3.1.tgz#5a00ae32715609f83d89f6f31d0f0261c6170548" + integrity sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA== + dependencies: + "@babel/runtime" "^7.17.8" + possible-typed-array-names@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f" @@ -8256,6 +9390,11 @@ process-nextick-args@~2.0.0: resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag== +process@^0.11.10: + version "0.11.10" + resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" + integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A== + promise@^8.1.0: version "8.3.0" resolved "https://registry.yarnpkg.com/promise/-/promise-8.3.0.tgz#8cb333d1edeb61ef23869fbb8a4ea0279ab60e0a" @@ -8271,7 +9410,7 @@ prompts@^2.0.1, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.6.2, prop-types@^15.8.1: +prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -8293,6 +9432,11 @@ psl@^1.1.33: resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7" integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag== +punycode@^1.4.1: + version "1.4.1" + resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e" + integrity sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ== + punycode@^2.1.0, punycode@^2.1.1: version "2.3.1" resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5" @@ -8303,7 +9447,7 @@ q@^1.1.2: resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw== -qs@6.13.0: +qs@6.13.0, qs@^6.12.3: version "6.13.0" resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906" integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg== @@ -8361,6 +9505,18 @@ react-app-polyfill@^3.0.0: regenerator-runtime "^0.13.9" whatwg-fetch "^3.6.2" +react-colorful@^5.1.2: + version "5.6.1" + resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b" + integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw== + +react-confetti@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/react-confetti/-/react-confetti-6.1.0.tgz#03dc4340d955acd10b174dbf301f374a06e29ce6" + integrity sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw== + dependencies: + tween-functions "^1.2.0" + react-dev-utils@^12.0.1: version "12.0.1" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73" @@ -8391,7 +9547,28 @@ react-dev-utils@^12.0.1: strip-ansi "^6.0.1" text-table "^0.2.0" -react-dom@^18.3.1: +react-docgen-typescript@^2.2.2: + version "2.2.2" + resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c" + integrity sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg== + +react-docgen@^7.0.0: + version "7.0.3" + resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-7.0.3.tgz#f811b785f07b1f2023cb899b6bcf9d522b21b95d" + integrity sha512-i8aF1nyKInZnANZ4uZrH49qn1paRgBZ7wZiCNBMnenlPzEv0mRl+ShpTVEI6wZNl8sSc79xZkivtgLKQArcanQ== + dependencies: + "@babel/core" "^7.18.9" + "@babel/traverse" "^7.18.9" + "@babel/types" "^7.18.9" + "@types/babel__core" "^7.18.0" + "@types/babel__traverse" "^7.18.0" + "@types/doctrine" "^0.0.9" + "@types/resolve" "^1.20.2" + doctrine "^3.0.0" + resolve "^1.22.1" + strip-indent "^4.0.0" + +"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18.3.1: version "18.3.1" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4" integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw== @@ -8399,6 +9576,15 @@ react-dom@^18.3.1: loose-envify "^1.1.0" scheduler "^0.23.2" +react-element-to-jsx-string@^15.0.0: + version "15.0.0" + resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz#1cafd5b6ad41946ffc8755e254da3fc752a01ac6" + integrity sha512-UDg4lXB6BzlobN60P8fHWVPX3Kyw8ORrTeBtClmIlGdkOOE+GYQSFvmEU5iLLpwp/6v42DINwNcwOhOLfQ//FQ== + dependencies: + "@base2/pretty-print-object" "1.0.1" + is-plain-object "5.0.0" + react-is "18.1.0" + react-error-overlay@^6.0.11: version "6.0.11" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb" @@ -8419,6 +9605,11 @@ react-infinite-scroll-component@^6.1.0: dependencies: throttle-debounce "^2.1.0" +react-is@18.1.0: + version "18.1.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67" + integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg== + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -8504,7 +9695,7 @@ react-transition-group@^4.4.5: loose-envify "^1.4.0" prop-types "^15.6.2" -react@^18.3.1: +"react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.3.1: version "18.3.1" resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891" integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ== @@ -8547,6 +9738,17 @@ readdirp@~3.6.0: dependencies: picomatch "^2.2.1" +recast@^0.23.5: + version "0.23.9" + resolved "https://registry.yarnpkg.com/recast/-/recast-0.23.9.tgz#587c5d3a77c2cfcb0c18ccce6da4361528c2587b" + integrity sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q== + dependencies: + ast-types "^0.16.1" + esprima "~4.0.0" + source-map "~0.6.1" + tiny-invariant "^1.3.3" + tslib "^2.0.1" + recursive-readdir@^2.2.2: version "2.2.3" resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.3.tgz#e726f328c0d69153bcabd5c322d3195252379372" @@ -8638,6 +9840,29 @@ regjsparser@^0.9.1: dependencies: jsesc "~0.5.0" +rehype-external-links@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/rehype-external-links/-/rehype-external-links-3.0.0.tgz#2b28b5cda1932f83f045b6f80a3e1b15f168c6f6" + integrity sha512-yp+e5N9V3C6bwBeAC4n796kc86M4gJCdlVhiMTxIrJG5UHDMh+PJANf9heqORJbt1nrCbDwIlAZKjANIaVBbvw== + dependencies: + "@types/hast" "^3.0.0" + "@ungap/structured-clone" "^1.0.0" + hast-util-is-element "^3.0.0" + is-absolute-url "^4.0.0" + space-separated-tokens "^2.0.0" + unist-util-visit "^5.0.0" + +rehype-slug@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/rehype-slug/-/rehype-slug-6.0.0.tgz#1d21cf7fc8a83ef874d873c15e6adaee6344eaf1" + integrity sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A== + dependencies: + "@types/hast" "^3.0.0" + github-slugger "^2.0.0" + hast-util-heading-rank "^3.0.0" + hast-util-to-string "^3.0.0" + unist-util-visit "^5.0.0" + relateurl@^0.2.7: version "0.2.7" resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9" @@ -8664,6 +9889,11 @@ require-from-string@^2.0.2: resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909" integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw== +requireindex@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/requireindex/-/requireindex-1.2.0.tgz#3463cdb22ee151902635aa6c9535d4de9c2ef1ef" + integrity sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww== + requires-port@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" @@ -8702,7 +9932,7 @@ resolve.exports@^1.1.0: resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.1.tgz#05cfd5b3edf641571fd46fa608b610dda9ead999" integrity sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ== -resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.2, resolve@^1.22.4: +resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1, resolve@^1.22.2, resolve@^1.22.4, resolve@^1.22.8: version "1.22.8" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d" integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw== @@ -8882,7 +10112,7 @@ semver@^6.0.0, semver@^6.3.0, semver@^6.3.1: resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== -semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4, semver@^7.6.0: +semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4, semver@^7.6.0, semver@^7.6.2: version "7.6.3" resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143" integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A== @@ -9090,6 +10320,11 @@ sourcemap-codec@^1.4.8: resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4" integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA== +space-separated-tokens@^2.0.0: + version "2.0.2" + resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f" + integrity sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q== + spdy-transport@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31" @@ -9159,6 +10394,13 @@ stop-iteration-iterator@^1.0.0: dependencies: internal-slot "^1.0.4" +storybook@^8.3.5: + version "8.3.5" + resolved "https://registry.yarnpkg.com/storybook/-/storybook-8.3.5.tgz#aef0542c08e245b7ac22742c1e1633a125063b8e" + integrity sha512-hYQVtP2l+3kO8oKDn4fjXXQYxgTRsj/LaV6lUMJH0zt+OhVmDXKJLxmdUP4ieTm0T8wEbSYosFavgPcQZlxRfw== + dependencies: + "@storybook/core" "8.3.5" + string-length@^4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a" @@ -9180,16 +10422,7 @@ string-natural-compare@^3.0.1: resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4" integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw== -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -string-width@^4.1.0, string-width@^4.2.0: +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -9292,21 +10525,14 @@ stringify-object@^3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== dependencies: ansi-regex "^5.0.1" -strip-ansi@^6.0.0, strip-ansi@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@^7.0.1: +strip-ansi@^7.0.1, strip-ansi@^7.1.0: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ== @@ -9340,6 +10566,13 @@ strip-indent@^3.0.0: dependencies: min-indent "^1.0.0" +strip-indent@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-4.0.0.tgz#b41379433dd06f5eae805e21d631e07ee670d853" + integrity sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA== + dependencies: + min-indent "^1.0.1" + strip-json-comments@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" @@ -9503,6 +10736,13 @@ tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1: resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0" integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ== +telejson@^7.2.0: + version "7.2.0" + resolved "https://registry.yarnpkg.com/telejson/-/telejson-7.2.0.tgz#3994f6c9a8f8d7f2dba9be2c7c5bbb447e876f32" + integrity sha512-1QTEcJkJEhc8OnStBx/ILRu5J2p0GjvWsBx56bmZRqnrkdBMUe+nX92jxV+p3dB4CP6PZCdJMQJwCggkNBMzkQ== + dependencies: + memoizerific "^1.11.3" + temp-dir@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e" @@ -9526,7 +10766,7 @@ terminal-link@^2.0.0: ansi-escapes "^4.2.1" supports-hyperlinks "^2.0.0" -terser-webpack-plugin@^5.2.5, terser-webpack-plugin@^5.3.10: +terser-webpack-plugin@^5.2.5, terser-webpack-plugin@^5.3.1, terser-webpack-plugin@^5.3.10: version "5.3.10" resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz#904f4c9193c6fd2a03f693a2150c62a92f40d199" integrity sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w== @@ -9590,6 +10830,21 @@ thunky@^1.0.2: resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d" integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA== +tiny-invariant@^1.3.1, tiny-invariant@^1.3.3: + version "1.3.3" + resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127" + integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg== + +tinyrainbow@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/tinyrainbow/-/tinyrainbow-1.2.0.tgz#5c57d2fc0fb3d1afd78465c33ca885d04f02abb5" + integrity sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ== + +tinyspy@^3.0.0: + version "3.0.2" + resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-3.0.2.tgz#86dd3cf3d737b15adcf17d7887c84a75201df20a" + integrity sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q== + tmpl@1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc" @@ -9646,11 +10901,21 @@ ts-api-utils@^1.3.0: resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1" integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ== +ts-dedent@^2.0.0, ts-dedent@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5" + integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ== + ts-interface-checker@^0.1.9: version "0.1.13" resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699" integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA== +ts-pnp@^1.1.6: + version "1.2.0" + resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" + integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw== + tsconfig-paths@^3.15.0: version "3.15.0" resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4" @@ -9661,11 +10926,25 @@ tsconfig-paths@^3.15.0: minimist "^1.2.6" strip-bom "^3.0.0" +tsconfig-paths@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz#ef78e19039133446d244beac0fd6a1632e2d107c" + integrity sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg== + dependencies: + json5 "^2.2.2" + minimist "^1.2.6" + strip-bom "^3.0.0" + tslib@^1.8.1: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== +tslib@^2.0.0, tslib@^2.0.1: + version "2.7.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01" + integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA== + tslib@^2.0.3, tslib@^2.6.2: version "2.6.3" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0" @@ -9678,6 +10957,11 @@ tsutils@^3.21.0: dependencies: tslib "^1.8.1" +tween-functions@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/tween-functions/-/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff" + integrity sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA== + type-check@^0.4.0, type-check@~0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1" @@ -9712,6 +10996,11 @@ type-fest@^0.21.3: resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37" integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w== +type-fest@^2.19.0, type-fest@~2.19: + version "2.19.0" + resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b" + integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA== + type-is@~1.6.18: version "1.6.18" resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131" @@ -9796,6 +11085,11 @@ undici-types@~6.18.2: resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.18.2.tgz#8b678cf939d4fc9ec56be3c68ed69c619dee28b0" integrity sha512-5ruQbENj95yDYJNS3TvcaxPMshV7aizdv/hWYjGIKoANWKjhWNBsr2YEuYZKodQulB1b8l7ILOuDQep3afowQQ== +undici-types@~6.19.2: + version "6.19.8" + resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02" + integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw== + unicode-canonical-property-names-ecmascript@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc" @@ -9826,6 +11120,30 @@ unique-string@^2.0.0: dependencies: crypto-random-string "^2.0.0" +unist-util-is@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-6.0.0.tgz#b775956486aff107a9ded971d996c173374be424" + integrity sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw== + dependencies: + "@types/unist" "^3.0.0" + +unist-util-visit-parents@^6.0.0: + version "6.0.1" + resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz#4d5f85755c3b8f0dc69e21eca5d6d82d22162815" + integrity sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw== + dependencies: + "@types/unist" "^3.0.0" + unist-util-is "^6.0.0" + +unist-util-visit@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-5.0.0.tgz#a7de1f31f72ffd3519ea71814cccf5fd6a9217d6" + integrity sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg== + dependencies: + "@types/unist" "^3.0.0" + unist-util-is "^6.0.0" + unist-util-visit-parents "^6.0.0" + universalify@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0" @@ -9841,6 +11159,14 @@ unpipe@1.0.0, unpipe@~1.0.0: resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec" integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ== +unplugin@^1.3.1: + version "1.14.1" + resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.14.1.tgz#c76d6155a661e43e6a897bce6b767a1ecc344c1a" + integrity sha512-lBlHbfSFPToDYp9pjXlUEFVxYLaue9f9T1HC+4OHlmj+HnMDdz9oZY+erXfoCe/5V/7gKUSY2jpXPb9S7f0f/w== + dependencies: + acorn "^8.12.1" + webpack-virtual-modules "^0.6.2" + unquote@~1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544" @@ -9874,6 +11200,14 @@ url-parse@^1.5.3: querystringify "^2.1.1" requires-port "^1.0.0" +url@^0.11.0: + version "0.11.4" + resolved "https://registry.yarnpkg.com/url/-/url-0.11.4.tgz#adca77b3562d56b72746e76b330b7f27b6721f3c" + integrity sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg== + dependencies: + punycode "^1.4.1" + qs "^6.12.3" + util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" @@ -9889,6 +11223,17 @@ util.promisify@~1.0.0: has-symbols "^1.0.1" object.getownpropertydescriptors "^2.1.0" +util@^0.12.4, util@^0.12.5: + version "0.12.5" + resolved "https://registry.yarnpkg.com/util/-/util-0.12.5.tgz#5f17a6059b73db61a875668781a1c2b136bd6fbc" + integrity sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA== + dependencies: + inherits "^2.0.3" + is-arguments "^1.0.4" + is-generator-function "^1.0.7" + is-typed-array "^1.1.3" + which-typed-array "^1.1.2" + utila@~0.4: version "0.4.0" resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c" @@ -9909,6 +11254,11 @@ uuid@^8.3.2: resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2" integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg== +uuid@^9.0.0: + version "9.0.1" + resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30" + integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA== + v8-to-istanbul@^8.1.0: version "8.1.1" resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz#77b752fd3975e31bbcef938f85e9bd1c7a8d60ed" @@ -9995,6 +11345,17 @@ webpack-dev-middleware@^5.3.4: range-parser "^1.2.1" schema-utils "^4.0.0" +webpack-dev-middleware@^6.1.2: + version "6.1.3" + resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-6.1.3.tgz#79f4103f8c898564c9e96c3a9c2422de50f249bc" + integrity sha512-A4ChP0Qj8oGociTs6UdlRUGANIGrCDL3y+pmQMc+dSsraXHCatFpmMey4mYELA+juqwUqwQsUgJJISXl1KWmiw== + dependencies: + colorette "^2.0.10" + memfs "^3.4.12" + mime-types "^2.1.31" + range-parser "^1.2.1" + schema-utils "^4.0.0" + webpack-dev-server@^4.6.0: version "4.15.2" resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz#9e0c70a42a012560860adb186986da1248333173" @@ -10031,6 +11392,15 @@ webpack-dev-server@^4.6.0: webpack-dev-middleware "^5.3.4" ws "^8.13.0" +webpack-hot-middleware@^2.25.1: + version "2.26.1" + resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.26.1.tgz#87214f1e3f9f3acab9271fef9e6ed7b637d719c0" + integrity sha512-khZGfAeJx6I8K9zKohEWWYN6KDlVw2DHownoe+6Vtwj1LP9WFgegXnVMSkZ/dBEBtXFwrkkydsaPFlB7f8wU2A== + dependencies: + ansi-html-community "0.0.8" + html-entities "^2.1.0" + strip-ansi "^6.0.0" + webpack-manifest-plugin@^4.0.2: version "4.1.1" resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-4.1.1.tgz#10f8dbf4714ff93a215d5a45bcc416d80506f94f" @@ -10060,6 +11430,40 @@ webpack-sources@^3.2.3: resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde" integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w== +webpack-virtual-modules@^0.6.0, webpack-virtual-modules@^0.6.2: + version "0.6.2" + resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz#057faa9065c8acf48f24cb57ac0e77739ab9a7e8" + integrity sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ== + +webpack@5, webpack@^5.95.0: + version "5.95.0" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.95.0.tgz#8fd8c454fa60dad186fbe36c400a55848307b4c0" + integrity sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q== + dependencies: + "@types/estree" "^1.0.5" + "@webassemblyjs/ast" "^1.12.1" + "@webassemblyjs/wasm-edit" "^1.12.1" + "@webassemblyjs/wasm-parser" "^1.12.1" + acorn "^8.7.1" + acorn-import-attributes "^1.9.5" + browserslist "^4.21.10" + chrome-trace-event "^1.0.2" + enhanced-resolve "^5.17.1" + es-module-lexer "^1.2.1" + eslint-scope "5.1.1" + events "^3.2.0" + glob-to-regexp "^0.4.1" + graceful-fs "^4.2.11" + json-parse-even-better-errors "^2.3.1" + loader-runner "^4.2.0" + mime-types "^2.1.27" + neo-async "^2.6.2" + schema-utils "^3.2.0" + tapable "^2.1.1" + terser-webpack-plugin "^5.3.10" + watchpack "^2.4.1" + webpack-sources "^3.2.3" + webpack@^5.64.4: version "5.93.0" resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.93.0.tgz#2e89ec7035579bdfba9760d26c63ac5c3462a5e5" @@ -10178,7 +11582,7 @@ which-collection@^1.0.1, which-collection@^1.0.2: is-weakmap "^2.0.2" is-weakset "^2.0.3" -which-typed-array@^1.1.13, which-typed-array@^1.1.14, which-typed-array@^1.1.15: +which-typed-array@^1.1.13, which-typed-array@^1.1.14, which-typed-array@^1.1.15, which-typed-array@^1.1.2: version "1.1.15" resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.15.tgz#264859e9b11a649b388bfaaf4f767df1f779b38d" integrity sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA== @@ -10377,16 +11781,7 @@ workbox-window@6.6.1: "@types/trusted-types" "^2.0.2" workbox-core "6.6.1" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - -wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -10424,7 +11819,7 @@ ws@^7.4.6: resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9" integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ== -ws@^8.13.0: +ws@^8.13.0, ws@^8.2.3: version "8.18.0" resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc" integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw== From d29b2dd647e495ccc03aded858e4ae02ded436bf Mon Sep 17 00:00:00 2001 From: drewjhart <79417944+drewjhart@users.noreply.github.com> Date: Mon, 7 Oct 2024 15:39:22 +0700 Subject: [PATCH 7/7] adds chromatic and storybook --- central_v2/package.json | 4 +++- central_v2/src/components/searchbar/SelectGradesMenu.tsx | 4 ++-- central_v2/yarn.lock | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/central_v2/package.json b/central_v2/package.json index 3fa35ae5c..df3c613eb 100644 --- a/central_v2/package.json +++ b/central_v2/package.json @@ -15,6 +15,7 @@ "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "@types/styled-components": "^5.1.34", + "chromatic": "^11.11.0", "init": "^0.1.2", "lodash": "^4.17.21", "react": "^18.3.1", @@ -34,7 +35,8 @@ "test": "react-scripts test", "eject": "react-scripts eject", "storybook": "storybook dev -p 6006", - "build-storybook": "storybook build" + "build-storybook": "storybook build", + "chromatic": "npx chromatic --project-token 99c8d45b7b98" }, "prettier": { "singleQuote": true diff --git a/central_v2/src/components/searchbar/SelectGradesMenu.tsx b/central_v2/src/components/searchbar/SelectGradesMenu.tsx index 6685c1268..f5abccc8e 100644 --- a/central_v2/src/components/searchbar/SelectGradesMenu.tsx +++ b/central_v2/src/components/searchbar/SelectGradesMenu.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Checkbox } from '@mui/material'; +import { Checkbox, Typography } from '@mui/material'; import { GradeTarget } from '@righton/networking'; import { ScreenSize } from '../../lib/CentralModels'; import { @@ -89,7 +89,7 @@ export default function SelectGradesMenu ({ {Object.keys(gradeMap).map((grade) => ( handleGradesChange(grade)}> - {grade} + {grade} ))} diff --git a/central_v2/yarn.lock b/central_v2/yarn.lock index 2f20bcc03..f8bfa7abd 100644 --- a/central_v2/yarn.lock +++ b/central_v2/yarn.lock @@ -4407,7 +4407,7 @@ chokidar@^3.4.2, chokidar@^3.5.3: optionalDependencies: fsevents "~2.3.2" -chromatic@^11.4.0: +chromatic@^11.11.0, chromatic@^11.4.0: version "11.11.0" resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-11.11.0.tgz#5e5b956464acad22371d88218ea570374b541666" integrity sha512-mwmYsNMsZlRLtlfFUEtac5zhoVRhc+O/lsuMdOpwkiDQiKX6WdSNIhic+dkLenfuzao2r18s50nphcOgFoatBg==