From 6b22bf84316573f75e95e071df52f2bbd4892ce1 Mon Sep 17 00:00:00 2001 From: Rokas Puzonas Date: Sat, 9 Apr 2022 01:16:55 +0000 Subject: [PATCH] feat: display a list of disc with tooltips --- package.json | 5 +- public/index.html | 8 +-- public/sprites/music_disc_11.png | Bin 0 -> 200 bytes public/sprites/music_disc_13.png | Bin 0 -> 177 bytes public/sprites/music_disc_blocks.png | Bin 0 -> 179 bytes public/sprites/music_disc_cat.png | Bin 0 -> 185 bytes public/sprites/music_disc_chirp.png | Bin 0 -> 183 bytes public/sprites/music_disc_far.png | Bin 0 -> 181 bytes public/sprites/music_disc_mall.png | Bin 0 -> 184 bytes public/sprites/music_disc_mellohi.png | Bin 0 -> 180 bytes public/sprites/music_disc_otherside.png | Bin 0 -> 200 bytes public/sprites/music_disc_pigstep.png | Bin 0 -> 211 bytes public/sprites/music_disc_stal.png | Bin 0 -> 175 bytes public/sprites/music_disc_strad.png | Bin 0 -> 173 bytes public/sprites/music_disc_wait.png | Bin 0 -> 192 bytes public/sprites/music_disc_ward.png | Bin 0 -> 185 bytes src/App.css | 46 ++++---------- src/App.tsx | 28 ++++----- src/components/DiscRow.css | 16 +++++ src/components/DiscRow.tsx | 21 +++++++ src/components/DiscTooltip.css | 60 ++++++++++++++++++ src/components/DiscTooltip.tsx | 21 +++++++ src/fonts/minecraft.woff | Bin 0 -> 4748 bytes src/index.css | 4 +- src/index.tsx | 10 ++- src/store/discs.ts | 38 ++++++++++++ src/store/index.ts | 22 +++++++ yarn.lock | 77 +++++++++++++++++++++++- 28 files changed, 290 insertions(+), 66 deletions(-) create mode 100644 public/sprites/music_disc_11.png create mode 100644 public/sprites/music_disc_13.png create mode 100644 public/sprites/music_disc_blocks.png create mode 100644 public/sprites/music_disc_cat.png create mode 100644 public/sprites/music_disc_chirp.png create mode 100644 public/sprites/music_disc_far.png create mode 100644 public/sprites/music_disc_mall.png create mode 100644 public/sprites/music_disc_mellohi.png create mode 100644 public/sprites/music_disc_otherside.png create mode 100644 public/sprites/music_disc_pigstep.png create mode 100644 public/sprites/music_disc_stal.png create mode 100644 public/sprites/music_disc_strad.png create mode 100644 public/sprites/music_disc_wait.png create mode 100644 public/sprites/music_disc_ward.png create mode 100644 src/components/DiscRow.css create mode 100644 src/components/DiscRow.tsx create mode 100644 src/components/DiscTooltip.css create mode 100644 src/components/DiscTooltip.tsx create mode 100644 src/fonts/minecraft.woff create mode 100644 src/store/discs.ts create mode 100644 src/store/index.ts diff --git a/package.json b/package.json index 7ecdc42..5d1adaa 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,9 @@ { - "name": "music-datapack-creator", + "name": "music-resource-pack-creator", "version": "0.1.0", "private": true, "dependencies": { + "@reduxjs/toolkit": "^1.8.1", "@testing-library/jest-dom": "^5.16.3", "@testing-library/react": "^12.1.4", "@testing-library/user-event": "^13.5.0", @@ -10,8 +11,10 @@ "@types/node": "^16.11.26", "@types/react": "^17.0.43", "@types/react-dom": "^17.0.14", + "@types/react-redux": "^7.1.23", "react": "^18.0.0", "react-dom": "^18.0.0", + "react-redux": "^7.2.8", "react-scripts": "5.0.0", "typescript": "^4.6.3", "web-vitals": "^2.1.4" diff --git a/public/index.html b/public/index.html index aa069f2..aa53205 100644 --- a/public/index.html +++ b/public/index.html @@ -4,11 +4,7 @@ - - + - React App + Music Resource Pack Creator diff --git a/public/sprites/music_disc_11.png b/public/sprites/music_disc_11.png new file mode 100644 index 0000000000000000000000000000000000000000..5d333b6af8717d8a78e39867ca8995b268fa78f2 GIT binary patch literal 200 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`{hlt4Ar`0aPP)i>KtaG+_K@V9 z2W$nb+l#WjTRd#GCfHXCXwBGTy;bqg<{&TMQrT0M+k?EsueHcD@)$;B%QCb+$WAjp zQl6r4%%VlW)+$h6;)bl7hqJ+Ic7ZCjj`xd%U)Y&4>{=<{vAg1aA(Nc5Z^UJHUHy&H xp^V~8cJ23HF)l3LYN?v*8v%40gQu&X%Q~loCIIj4MsffE literal 0 HcmV?d00001 diff --git a/public/sprites/music_disc_13.png b/public/sprites/music_disc_13.png new file mode 100644 index 0000000000000000000000000000000000000000..8cd91b943414a3d9e5815b74c754199cb9f1f600 GIT binary patch literal 177 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`6`n4RAr}63C!Xd#pupoCc~H6F zqs*EE-|ni}Ny5MsC+lThuT(@n~ zQb(o6dJ&IHA(25Wu8*?Jy#yxceEu!_+^1C->wgpeqS9!wec^Av4BLx`%t8G^d`(SF362uS#JEp^OVNrV6Z literal 0 HcmV?d00001 diff --git a/public/sprites/music_disc_far.png b/public/sprites/music_disc_far.png new file mode 100644 index 0000000000000000000000000000000000000000..443ded2347a8beafe7c829d1653fffc5b5e15bc3 GIT binary patch literal 181 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`HJ&bxAr}63Cm!TIpupi8`LO@N z)AJ9x@~&mZ^v^R;$g0lutTUPTT`1tm{7|opmi|5sS!*@jZ*pa=?Y;aiZd*%jad_ZG z@7-RL*g84?EIz2ReUi!zPo8=1oJ^B4>-INS+N(U4W6(G`QPSW9lfr)%hOIx+_#=gC fChcw87i}Ih^Vq@F$JXQl-NE4L>gTe~DWM4fM~_7( literal 0 HcmV?d00001 diff --git a/public/sprites/music_disc_mall.png b/public/sprites/music_disc_mall.png new file mode 100644 index 0000000000000000000000000000000000000000..a2bf0d61d11df4932d29a1ff10c48bf47312cde1 GIT binary patch literal 184 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`^`0({Ar}63CmiHGpupi8c~EeV zLHqGI*=46oBBgu`gTe~DWM4f%_>Kc literal 0 HcmV?d00001 diff --git a/public/sprites/music_disc_mellohi.png b/public/sprites/music_disc_mellohi.png new file mode 100644 index 0000000000000000000000000000000000000000..466f5af43b0a6271b8c30596ac3502e738408f04 GIT binary patch literal 180 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`)t)YnAr}63C*0*cpdip3`_S#f zQOlTvp}QA6ZILllU%Eb5L1R|UzbT*muSPA8GWL{tw^!Z%kl#{6x1JfsZz7(32z@rG zpX;sy!w0plwObi9RTxDUnO|6*!(h)TEp_etZrlBTn`f?djo{WeIIrKxIf1X3^ID!z ed;Ii$tEIc6&m``dx?c_G3rG8f z4PrkU$sHEpVZOj?7$x-2{@)5|iR8~*U5pB|FZ}J7VSDkAIjCQVuc@gi!BOIv825=! x3ST7*8HHLBQ;wdPl`tb=mP44&mSqdM8Jf=>$#*;dHyr3R22WQ%mvv4FO#m#bN8A7a literal 0 HcmV?d00001 diff --git a/public/sprites/music_disc_pigstep.png b/public/sprites/music_disc_pigstep.png new file mode 100644 index 0000000000000000000000000000000000000000..2f8ade3a55f062cedf46f2a276eea3ca92f0d394 GIT binary patch literal 211 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`vpiiKLo7}wCrHdwhza~?Z>8oL zylmC0|4Pcr7Hl6sO11e0ubwPCr)}dz-ovXTmsLcq`T2i;{NslbN8HUsjtU4cM+&t# z&WgL%_3yj5IQwOLbFIW3Jck)lJSX%j_$o9zm~`~N6BS{0FkARr-jZj+QwND9a;h>< zZr(iDWYDvYaT#Zu<151?CKZmuC%Pt@9yB;;(zs?uhOe_Y1A}ejm1*qN%o#veGI+ZB KxvX^N?*N8-M%5;Z1Yqd zULnpuiybCKdkVf$Y5J_;=&MOvPZLRmx%mOsphTS at~dYpHuv?9KK%r`fWgz%&t;ucLK6TNwn#$& literal 0 HcmV?d00001 diff --git a/public/sprites/music_disc_strad.png b/public/sprites/music_disc_strad.png new file mode 100644 index 0000000000000000000000000000000000000000..c7e42ccd09067e9f219b05de9f4217f6ba2d241c GIT binary patch literal 173 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`C7v#hAr}63C!Xd#pupoCc~H6F zqs*EE{|+BGsUg2$@3x6L6HZhIIcff16ZN{IGD+r2l=se4WdZMN=kAKWDYotGwnbMw zRW|f%O>*}XnxoS6Si{f3=xlzuz<1|M?->s$>=a^j>{tLAxj#=CKZpx?kAu9|MY2D zg47XrbC$ylCC(RO8{UbEFkiWH#o$lB4BLx`%t8G^d`(SF362uS#JEpeGcY|{Z_&8#$p7ue4}NCspY6=CP+p0L!D&nUjxPcm k&x$#zRj60<)^5)`apb_(iz|Qn0^P#k>FVdQ&MBb@0D~w -
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - +
+
+
+
+ { discs.discs.map((disc, idx) => { return }) } +
+
+ Made By Rokas Puzonas +
); } diff --git a/src/components/DiscRow.css b/src/components/DiscRow.css new file mode 100644 index 0000000..55964d3 --- /dev/null +++ b/src/components/DiscRow.css @@ -0,0 +1,16 @@ +.disc-row { + display: flex; + align-items: center; +} + +.disc-row__icon { + width: 2.5em; + height: 2.5em; + + /* IE, only works on tags */ + -ms-interpolation-mode: nearest-neighbor; + /* Firefox */ + image-rendering: crisp-edges; + /* Chromium + Safari */ + image-rendering: pixelated; +} diff --git a/src/components/DiscRow.tsx b/src/components/DiscRow.tsx new file mode 100644 index 0000000..cc82e5a --- /dev/null +++ b/src/components/DiscRow.tsx @@ -0,0 +1,21 @@ +import DiscTooltip from "./DiscTooltip" +import { selectDiscs, useAppSelector } from '../store'; +import "./DiscRow.css" + +interface DiscRowProps { + discId: number +} + +function DiscRow({ discId }: DiscRowProps) { + const discs = useAppSelector(selectDiscs) + const disc = discs.discs[discId] + + return ( +
+ + +
+ ) +} + +export default DiscRow diff --git a/src/components/DiscTooltip.css b/src/components/DiscTooltip.css new file mode 100644 index 0000000..47d7cf6 --- /dev/null +++ b/src/components/DiscTooltip.css @@ -0,0 +1,60 @@ +/* css ripped from https://minecraft.fandom.com/wiki/Music_Disc */ + +@font-face { + font-family: Minecraft; + src: url("../fonts/minecraft.woff") format('embedded-opentype'),url(https://minecraft.fandom.com/media/hydra/fonts/minecraft.woff) format('woff'),url(https://minecraft.fandom.com/media/hydra/fonts/minecraft.ttf) format('truetype') +} + +.disc-tooltip { + color: #FFF; + text-shadow: 0.125em 0.125em 0 #3F3F3F +} + +.disc-tooltip { + position: relative; + display: inline-block; + background-color: rgba(16,0,16,0.94); + padding: 0.375em; + font-family: Minecraft,sans-serif; + font-size: 16px; + word-spacing: 4px; + white-space: nowrap; + line-height: 1.25em; + margin: 0.125em 0.25em; +} + +.disc-tooltip::before { + content: ""; + position: absolute; + top: 0.125em; + right: -0.125em; + bottom: 0.125em; + left: -0.125em; + border: 0.125em solid #100010; + border-style: none solid; + border-color: rgba(16,0,16,0.94) +} + +.disc-tooltip::after { + content: ""; + position: absolute; + top: 0.125em; + right: 0; + bottom: 0.125em; + left: 0; + border: 0.125em solid #2D0A63; + border-image: -webkit-linear-gradient(rgba(80,0,255,0.31),rgba(40,0,127,0.31)) 1; + border-image: linear-gradient(rgba(80,0,255,0.31),rgba(40,0,127,0.31)) 1 +} + +.disc-tooltip > .disc-tooltip__description { + display: block; + margin-top: 0.25em; + color: #AAA; + text-shadow: 0.125em 0.125em 0 #2A2A2A +} + +.disc-tooltip > .disc-tooltip__title { + color: #5FF; + text-shadow: 0.125em 0.125em 0 #153F3F +} diff --git a/src/components/DiscTooltip.tsx b/src/components/DiscTooltip.tsx new file mode 100644 index 0000000..c890eac --- /dev/null +++ b/src/components/DiscTooltip.tsx @@ -0,0 +1,21 @@ +import './DiscTooltip.css'; + +interface DiscTooltip { + title: string + description: string +} + +function DiscTooltip({ title, description }: DiscTooltip) { + return ( +
+ + { title } + + + { description } + +
+ ) +} + +export default DiscTooltip diff --git a/src/fonts/minecraft.woff b/src/fonts/minecraft.woff new file mode 100644 index 0000000000000000000000000000000000000000..6d1e86c101c7b8ffd9e0ba87a92a36da39d10c14 GIT binary patch literal 4748 zcmZu#WmFW-*IsJrZfQyBkPgYES!4le7M7H5kWK{@Q9`=Ar39ow7U}Mm?vjRm*WdYn zeD68W+ofVh(ylHZp2&GCGKK^R zMq~vc-vt=d3JL{m{0VY7hF>fOSg+Yw075583ECCL5HtoSiy|Q0JL%*PqbE5*(JkkDb{J&!s0{)A$OzRa34NVG-j1G+s4P8f|VBz=n z;n{}Z0V#l3c2MY=4b)W(uqD`p@g7}3jGv>dP(btnQ%z7bB#}P|_*+02;D;mIj|C83 z#Jlia_>?&Mc@jhh&(7pl_ogIZ48kJ+o4F81A&FhX#l*X)qW~CRfxaf`Y7D=6Bms?+y!tLEy&`-(>u9m6!U5pLZUEF8UOES7^>lZkO}u;PhT9 z5?A(_X5!A{6m1?$Q6t%Lv%7KdI6iIo{qmWF^wpDFz?Z7qSK`NGMIElKa;rBCbS@L0 zW=!G6Q%;ZTHza|xPcvuMI149q=7o|D(pFmylD_^>p_hl_emvh?fF-iR+~*V^~t%&X;>kGxt-4^v5qbwsDiRNQU)_ zlBo2U=Y#tnoe66d#0D%#j4@$ic|9+`eJ6pf5wnoe$jWLdyX#oXSJqlefNF${WsU=X z-&V(SaOOf}V=YE%_(LsqZO%_7uXO05K6Q`<>FiqjzB&D}&bOxAU8rkqw7K+0A$KF< z{?W;JN2J)V4D#js*Hp5?2OZ~o5q3?5#d#c~1rVPbc$UUpAyk;}i#nWj>rM%A2E#s`t zmVCb1)L$!#t_8dZP>nL##FsvD5{4mTu#Sq zFN261mVqE9^37ByL#H2Hw-rpb^NyYK#Z{}@Mv1g~_C?KFUfs5Bb7JO3PSw!T-lD;s z!SVx%8rD3RW+z+sFatvh>MRYoB1g6(UV_VS!cLlxMpT( zE&4B`KwG^_3sE6y(CcX5v~AL$7dyY@lO9?-Q-�nn~j}KRlu70u8qRd$&-iO$d}4 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 literal 0 HcmV?d00001 diff --git a/src/index.css b/src/index.css index ec2585e..568938b 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,4 @@ body { - margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; @@ -8,6 +7,5 @@ body { } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } diff --git a/src/index.tsx b/src/index.tsx index ef2edf8..c3933e9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,12 +2,16 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; +import store from './store' +import { Provider } from 'react-redux' import reportWebVitals from './reportWebVitals'; ReactDOM.render( - - - , + + + + + , document.getElementById('root') ); diff --git a/src/store/discs.ts b/src/store/discs.ts new file mode 100644 index 0000000..ca9f973 --- /dev/null +++ b/src/store/discs.ts @@ -0,0 +1,38 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit' + +export interface Disc { + title: string + description: string + icon: string +} + +interface DiscsState { + discs: Disc[] +} + +const initialState: DiscsState = { + discs: [ + { title: "Music Disc", description: "C418 - 13", icon: "/sprites/music_disc_13.png" }, + { title: "Music Disc", description: "C418 - cat", icon: "/sprites/music_disc_cat.png" }, + { title: "Music Disc", description: "C418 - blocks", icon: "/sprites/music_disc_blocks.png" }, + ] +} + +export const discsSlice = createSlice({ + name: "discs", + initialState, + reducers: { + updateTitle: (state, action: PayloadAction<{ id: number, title: string }>) => { + const { id, title } = action.payload; + state.discs[id].title = title + }, + updateDescription: (state, action: PayloadAction<{ id: number, description: string }>) => { + const { id, description } = action.payload; + state.discs[id].description = description + } + } +}) + +export const { updateTitle, updateDescription } = discsSlice.actions + +export default discsSlice.reducer diff --git a/src/store/index.ts b/src/store/index.ts new file mode 100644 index 0000000..0d2af6d --- /dev/null +++ b/src/store/index.ts @@ -0,0 +1,22 @@ +import { configureStore } from '@reduxjs/toolkit' +import discsReducer from './discs' +import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux' + +const store = configureStore({ + reducer: { + discs: discsReducer + } +}) + +// Infer the `RootState` and `AppDispatch` types from the store itself +export type RootState = ReturnType +// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState} +export type AppDispatch = typeof store.dispatch + +export const useAppDispatch = () => useDispatch() +export const useAppSelector: TypedUseSelectorHook = useSelector + +// Other code such as selectors can use the imported `RootState` type +export const selectDiscs = (state: RootState) => state.discs + +export default store diff --git a/yarn.lock b/yarn.lock index d81d9b4..d366854 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1031,6 +1031,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.15.4": + version "7.17.9" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72" + integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.16.7", "@babel/template@^7.3.3": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155" @@ -1401,6 +1408,16 @@ schema-utils "^3.0.0" source-map "^0.7.3" +"@reduxjs/toolkit@^1.8.1": + version "1.8.1" + resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.8.1.tgz#94ee1981b8cf9227cda40163a04704a9544c9a9f" + integrity sha512-Q6mzbTpO9nOYRnkwpDlFOAbQnd3g7zj7CtHAZWz5SzE5lcV97Tf8f3SzOO8BoPOMYBFgfZaqTUZqgGu+a0+Fng== + dependencies: + immer "^9.0.7" + redux "^4.1.2" + redux-thunk "^2.4.1" + reselect "^4.1.5" + "@rollup/plugin-babel@^5.2.0": version "5.3.1" resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283" @@ -1745,6 +1762,14 @@ dependencies: "@types/node" "*" +"@types/hoist-non-react-statics@^3.3.0": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/html-minifier-terser@^6.0.0": version "6.1.0" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35" @@ -1841,6 +1866,16 @@ dependencies: "@types/react" "*" +"@types/react-redux@^7.1.20", "@types/react-redux@^7.1.23": + version "7.1.23" + resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.23.tgz#3c2bb1bcc698ae69d70735f33c5a8e95f41ac528" + integrity sha512-D02o3FPfqQlfu2WeEYwh3x2otYd2Dk1o8wAfsA0B1C2AJEFxE663Ozu7JzuWbznGgW248NaOF6wsqCGNq9d3qw== + dependencies: + "@types/hoist-non-react-statics" "^3.3.0" + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + redux "^4.0.0" + "@types/react@*", "@types/react@^17.0.43": version "17.0.43" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55" @@ -4483,6 +4518,13 @@ he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== +hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hoopy@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d" @@ -6883,7 +6925,7 @@ prompts@^2.0.1, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.8.1: +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== @@ -7014,16 +7056,28 @@ react-error-overlay@^6.0.10: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.10.tgz#0fe26db4fa85d9dbb8624729580e90e7159a59a6" integrity sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA== -react-is@^16.13.1: +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" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -react-is@^17.0.1: +react-is@^17.0.1, react-is@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== +react-redux@^7.2.8: + version "7.2.8" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de" + integrity sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw== + dependencies: + "@babel/runtime" "^7.15.4" + "@types/react-redux" "^7.1.20" + hoist-non-react-statics "^3.3.2" + loose-envify "^1.4.0" + prop-types "^15.7.2" + react-is "^17.0.2" + react-refresh@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" @@ -7135,6 +7189,18 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +redux-thunk@^2.4.1: + version "2.4.1" + resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714" + integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q== + +redux@^4.0.0, redux@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz#140f35426d99bb4729af760afcf79eaaac407104" + integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw== + dependencies: + "@babel/runtime" "^7.9.2" + regenerate-unicode-properties@^10.0.1: version "10.0.1" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56" @@ -7232,6 +7298,11 @@ requires-port@^1.0.0: resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8= +reselect@^4.1.5: + version "4.1.5" + resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.5.tgz#852c361247198da6756d07d9296c2b51eddb79f6" + integrity sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ== + resolve-cwd@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"