U)a*OD(eYgSi^cdTn}pqcPM(;S)2%1By^Wh%-CaC%>d9hi`7J zaxL7@;nhA>PE%s99&;z{8>VFgf{u!(-B-x7Of6ueme+ScryL`h(^qKE)DtieWY>-7 zgB)VJESQS4*1LU(2&@pgLvSt{(((C?K_V(rQk``i&5}ZPG;G^FiPlZ$7|-vEmMWlU z5lQ%iK2nu=h2wd_7>gK@vX=*AG+u~rQP$NwPC`ZA?4nh{3tui1x@bT6-;Rk3yDQ>d z?3qRD#+PeV7#FAa>s`Xwxsx_oRFcN$StW2=CW`=qObsT?SD^#^jM1Yk}PSPxJ zG@-_mnNU_)vM|iLRSI>UMp|hatyS}17R{10IuL0TLlupt>9dR s_SPQbv7BLYyC#qv16E-y@XZ= z-!p7I%#r-BVi$nQq3&ssRc_IC%R6$tA&^s_l46880~Wst3@>(|EO<}T4~ci~#!=e; zD)B>o%1+$ksURD1p7I-<3ehlFyVkqrySf&gg>Bp
0Z9?JaG|gyTZ{Cb8SdvAWVmFX7v2ohs!OCc!Udk zUITUpmZ33rKLI#(&lDj}c KA#dpL4Fil=$5pu_wi1XJR !llw` zSItPBDEdMHk2>c7#%lBxZ HHvtVUOZ$}v?=?AT~9!Jcqa@IJGuMg(s^7r>pcTrd)pS`{5Cu8WPey` z9)!!OUUY@L%9Q+bZa*S5`3f_|lFCPN6kdp_M2>{le8;cn^XUsPa+TUk47qd6)IBR% zk*&Ip?!Ge_gmmdj)BX}P_5o@VI2*wbZ^>UhFju}0gQZh!pP%4XT9{@w;G#b3XK8sN zF(7i$Jv(IM$8Akys9dhP^^~H2(7BfJp}yDW1#@!CL-!mGcSCnJ599WK9MV@yo_u$v MDeX2GIKR{Qf5okjU;qFB literal 0 HcmV?d00001 diff --git a/apps/kitchen-sink/public/index.html b/apps/kitchen-sink/public/index.html new file mode 100644 index 00000000..8736543a --- /dev/null +++ b/apps/kitchen-sink/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + React App + + + + + + + diff --git a/apps/kitchen-sink/public/logo192.png b/apps/kitchen-sink/public/logo192.png new file mode 100644 index 0000000000000000000000000000000000000000..fc44b0a3796c0e0a64c3d858ca038bd4570465d9 GIT binary patch literal 5347 zcmZWtbyO6NvR-oO24RV%BvuJ&=?+<7=`LvyB&A_#M7mSDYw1v6DJkiYl9XjT!%$dLEBTQ8R9|wd3008in6lFF3GV-6mLi?MoP_y~}QUnaDCHI#t z7w^m$@6DI)|C8_jrT?q=f8D?0AM?L)Z}xAo^e^W>t$*Y0KlT5=@bBjT9kxb%-KNdk zeOS1tKO#ChhG7%{ApNBzE2ZVNcxbrin#E1TiAw#BlUhXllzhN$qWez5l;h +t^q#Eav8PhR2|T}y5kkflaK`ba-eoE+Z2q@o6P$)=&` z+(8}+-McnNO>e#$Rr{32ngsZIAX>GH??tqgwUuUz6kjns|LjsB37zUEWd|(&O!)DY zQLrq%Y>)Y8G`yYbYCx&aVHi@-vZ3|ebG!f$sTQqMgi0hWRJ^Wc+Ibv!udh_r%2|U) zPi|E^PK?UE!>_4`f`1k4hqqj_$+d!EB_#IYt;f9)fBOumGNyglU(ofY`yHq4Y?B%- zp&G!MRY<~ajTgIHErMe(Z8JG*;D-PJhd@RX@QatggM7+G(Lz8eZ;73)72Hfx5KDOE zkT(m}i2;@X2AT5fW?qVp?@WgN$aT+f_6eo?IsLh;jscNRp|8H}Z9p_UBO^SJXpZew zEK8fz|0Th%(Wr|KZBGTM4yxkA5CFdAj8=QSrT$fKW#tweUFqr0TZ9D ~a5lF{)%-tTGMK^2tz(y2v$i%V8XAxIywrZCp=)83p(zIk6@S5AWl|Oa2hF`~~^W zI;KeOSkw1O#TiQ8;U7OPXjZM|KrnN}9arP)m0v$c|L)lF`j_rpG(zW1Qjv$=^|p*f z>)Na{D&>n`jOWMwB^TM}slgTEcjxTlUby89j1)|6ydRfWERn3|7Zd2&e7?!K&5G$x z`5U3uFtn4~SZq|LjFVrz$3iln-+ucY4q$BC{CSm7Xe5c1J<=%Oagztj{ifpaZk_bQ z9Sb-LaQMKp-qJA*bP6DzgE3`}*i1o3GKmo2pn@dj0;He}F=BgINo};6gQF8!n0ULZ zL>kC0nPSFzlcB7p4 1doao2F7%6IUTi_+!L`MM4o*#Y#0v~WiO8 uSeAUNp=vA2KaR&=jNR2iVwG>7t%sG2x_~yXzY)7K& zk3p+O0AFZ1eu^T3s};B %6TpJ6h-Y%B^*zT&SN7C=N;g|#dGIVMSOru3iv^SvO>h4 M=t-N1GSLLDqVTcgurco6)3&XpU!FP6Hlrmj}f$ zp95;b)>M~`kxuZF3r~a!rMf4|&1=uMG$;h^g=Kl;H&Np-(pFT9FF@++MMEx3R BsK?AU0fPk-#mdR)Wdkj)`>ZMl#^<80kM87VvsI3r_c@_vX=fdQ`_9-d(xiI z4K;1y1TiPj_RPh*SpDI7U~^QQ?%0&!$Sh#?x_@;ag)P}ZkAik{_WPB4rHyW#%>|Gs zdbhyt=qQPA7`?h2_8T;-E6HI#im9K>au*(j4;kzwMSLgo6u*}-K`$_Gzgu&XE)udQ zmQ72^eZd|vzI)~!20JV-v-T|<4@7ruqrj|o4=JJPlybwMg;M$Ud7>h6g()CT@wXm` zbq=A(t;RJ^{Xxi*Ff~!|3!-l_PS{AyNAU~t{h;(N(PXMEf^R(B+ZVX3 z8y0;0A8hJYp@g+c*`>eTA|3Tgv9U8#BDTO9@a@gVMDxr(fVaEqL1tl?md{v^j8aUv zm&%PX4^| rX|?E4^CkplWWNv*OKM>DxPa z!RJ)U^0-WJMi)Ksc!^ixOtw^egoAZZ2Cg;X7(5xZG7yL_;UJ#yp*ZD-;I^Z9qkP`} zwCTs0*%rIVF1sgLervtnUo&brwz?6?PXRuOCS*JI-WL6GKy7-~yi0giTEMmDs_-UX zo=+nFrW_EfTg>oY72_4Z0*uG>MnXP=c0VpT&*|rvv1i StW;*^={rP 1y?Hv+6R6bxFMkxpWkJ>m7Ba{>zc_q zEefC3jsXdyS5??Mz7IET$Kft|EMNJIv7Ny8ZOcKnzf`K5Cd)&`-fTY#W&jnV0l2vt z?Gqhic}l}mCv1yUEy$%DP}4AN;36$=7aNI^*AzV(eYGeJ(Px-j<^gSDp5dBAv2#?; zcM Xv#aj>%;MiG^q^$0MSg-(uTl!xm49dH!{X0){Ew7ThWV~Gtj7h%ZD zVN-R-^7Cf0VH!8O)uUHPL2mO2tmE*cecwQv_5CzWeh)ykX8r5Hi`ehYo)d{Jnh&3p z9ndXT$OW51#H5cFKa76c<%nNkP~ FU93b5h-|Cb}ScHs@4Q#|}byWg;KDMJ#|l zE=MKD0c>*F@HDBcX@~QJH%56eh~jfPO-uKm}~t7Vk HxHT;)4sd+?Wc4* z>CyR*{w@4(gnYRdFq=^(#-ytb^5ESD?x<0Skhb%Pt?npNW1m+Nv`tr9+qN<3H1f<% zZvNEqyK5F gPsQ`QIu9P0x_}wJR~^CotL|n zk?dn;tLRw9jJTur4uWoX6iMm914f0AJfB@C74a;_qRrAP4E7l890P&{v<}>_&GLrW z)klculcg`?zJO~4;BBAa=POU%aN|pmZJn2{hA!d!*lwO%YSIzv8bTJ}=nhC^n }g(ld^rn#kq9Z3)z`k9lvV>y#!F4e{5c$tnr9M{V)0m(Z< z#88vX6-AW7T2UUwW`g<;8I$Jb!R%z@rCcGT)-2k7&x9kZZT66}Ztid~6t0jKb&9mm zpa}LCb`bz`{MzpZR#E*QuBiZXI#<`5qxx=&LMr-UUf~@dRk}YI2hbMsAMWOmDzYtm zjof16D=mc`^B$+_bCG$$@R0t;e?~UkF?7<(vkb70*EQB1rfUWXh$j)R2)+dNAH5%R zEBs^?N;UMdy}V};59Gu#0$q53$}|+q7CIGg_w_WlvE}AdqoS<7DY1LWS9?TrfmcvT zaypmplwn=P4;a8-%l^e?f`OpGb}%(_mFsL&GywhyN(-VROj`4~V~9bGv%UhcA|YW% zs{;nh@aDX11y^HOF XB$a7#Sr3cEtNd4eLm@Y#fc&j)TGvbbMwze zXtekX_wJqxe4NhuW$r}cNy|L{V=t#$%SuWEW)YZTH|!iT79k#?632OFse{+BT_gau zJwQcbH{b}dzKO?^dV&3nTILYlGw{27UJ72ZN){BILd_HV_s$WfI2DC<9LIHFmtyw? zQ;?MuK7g%Ym+4e^W#5}WDLpko%jPOC=aN)3!=8)s#Rnercak&b3ESRX3z{xfKBF8L z5%CGkFmGO@x?_mPGlpEej!3!AMddChabyf~nJNZxx!D&{@xEb!TDyvqSj%Y5@A{}9 zRzoBn0?x}=krh{ok3Nn%e)#~uh;6jpezhA)ySb^b#E>73e*frBFu6IZ^D7Ii&rsiU z%jzygxT-n*joJpY4o&8UXr2s%j^Q{?e- voloX`4DQyEK+DmrZh8A$) iWL#NO9+Y@!sO2f@rI!@jN@>HOA< z?q2l{^%mY*PNx2FoX+A7X3N}(RV$B`g&N=e0uvAvEN1W^{*W?zT1i#fxuw10%~))J zjx#gxoVlXREWZf4hRkgdHx5V_S*;p-y%JtGgQ4}lnA~MBz-AFdxUxU1RIT$`sal|X zPB6sEVRjGbXIP0U+?rT|y5+ev&OMX*5C$n2SBPZr`jqzrmpVrNciR0e*Wm?fK6DY& zl(XQZ60yWXV-|Ps!A {EF;=_z(YAF=T(-MkJXUoX zI{UMQDAV2}Ya?EisdEW;@pE6dt;j0fg5oT2dxCi{wqWJ<)|SR6fxX~5CzblPGr8cb zUBVJ2CQd~3L?7yfTpLNbt)He1D>*KXI^GK%<`bq^cUq$Q@uJifG>p3LU(!H=C)aEL zenk7pVg}0{dKU}&l)Y2Y2eFMdS( JS0}oZUuVaf2+K*YFNGHB`^YGcIpnBlMhO7d4@vV zv(@N}(k#REdul8~fP+^F@ky*wt@~&|(&&meNO>rKDEnB{ykAZ}k>e@lad7to>Ao$B zz<1(L=#J*u4_LB=8w+*{KFK^u00NAmeNN7pr+Pf+N*Zl^dO{LM-hMHyP6N!~`24jd zXYP|Ze;dRXKdF2iJG$U{k=S86l@pytLx}$JFFs8e)*Vi?aVBtGJ3JZUj!~c{ (rw5>vuRF$`^p!P8w1B=O!skwkO5yd4_XuG^QVF z`-r5K7(IPSiKQ2|U9+`@Js! g6sfJwAHVd|s?|mnC*q zp|B|z)(8+mxXyxQ{8Pg3F4|tdpgZZSoU4P&9I8)nHo1@)9_9u&NcT^FI)6|hsAZFk zZ+arl&@*>RXBf-OZxhZerOr&dN5LW9@gV=oGFbK*J+m#R-|e6(Loz(;g@T^*oO)0R zN`N=X46b{7yk5FZGr#5&n1!-@j@g02g|X>MOpF3#IjZ_4wg{dX+G9eqS+Es9@6nC7 zD9$NuVJI}6ZlwtUm5cCAiYv0(Yi{%eH+}t)!E^>^KxB5^L~a`4%1~5q6h>d;paC9c zTj0wTCKrhWf+F#5>EgX `sl%POl?oyCq0(w0xoL?L%)|Q7d|Hl92rUYAU#lc**I&^6p=4lNQPa0 znQ|A~i0ip@`B=FW-Q;zh?-wF;Wl5!+q3GXDu-x&}$gUO)NoO7^$BeEIrd~1Dh{Tr` z8s<(Bn@gZ(mkIGnmYh_ehXnq78QL$pNDi)|QcT*|GtS%nz1uKE+E{7jdEBp%h0}%r zD2|KmYGiPa4;md-t_m5YDz#c*oV_FqXd85d@eub?9N61QuYcb3CnVWpM(D-^|CmkL z(F}L&N7qhL2PCq)fRh}XO@U`Yn< ?TNGR4L(mF7#4u29{i~@k;pLsgl({YW5`Mo+p=zZn3L*4{JU;++dG9 X@eDJUQo;Ye2mwlRs ?y0|+_a0zY+Zo%Dkae}+MySoIppb75o?vUW_?)>@g{U2`ERQIXV zeY$JrWnMZ$QC<=ii4X|@0H8`si75jB(ElJb00H AB%>SlLR{!zO|C9P3zxw_U8?1d8uRZ=({Ga4shyN}3 zAK}WA(ds|``G4jA)9}Bt2Hy0+f3rV1E6b|@?hpGA=PI&r8)ah|)I2s(P5Ic*Ndhn^ z*T&j@gbCTv7+8rpYbR^Ty}1AY)YH;p!m948r#%7x^Z@_-w{pDl|1S4`EM3n_PaXvK z1JF)E3qy$qTj5Xs{jU9k=y%SQ0>8E$;x?p9ayU0bZZeo{5Z@&FKX>}s!0+^>C^D#z z>xsCPvxD3Z=dP}TTOSJhNTPyVt14VCQ9MQFN`rn!c&_p?&4<5_PGm4a;WS&1(!qKE z_H$;dDdiPQ!F_gsN`2>`X}$I=B;={R8%L~`>RyKcS$72ai$!2>d(YkciA^J0@X%G4 z4cu!%Ps~2JuJ8ex`&;Fa0NQOq_nDZ&X;^A=oc1&f#3P1(!5il>6?uK4QpEG8z0Rhu zvBJ+A9RV?z%v?!$=(vcH?*;vRs*+PPbOQ3cdPr5=tOc Lqmfx@#hOqX0iN)wTTO21jH<>jpmwRIAGw7`a|sl?9y9zRBh>(_%| zF?h|P7}~RKj?HR+q|4U`CjRmV-$mLW>MScKnNXiv{vD3&2@*u)-6P@h0A`eeZ7}71 zK(w%@R<4lLt`O7fs1E)$5iGb~fPfJ?WxhY7c3Q>T-w#wT&zW522pH-B%r5v#5y^CF zcC30Se|`D2mY$hAlIULL%-PNXgbbpRHgn<&X3N9W!@BUk@9g*P5mz-YnZBb*-$zMM z7Qq}ic0mR8n{^L|=+diODdV}Q!gwr?y+2m=3HWwMq4z)DqYVg0J~^}-%7rMR@S1;9 z7GFj6K}i32X;3*$SmzB&HW{PJ55kT+EI#SsZf} bD7nW^Haf}_gXciYKX{QBxIPSx2 Ma? zHQqgzZq!_{&zg{yxqv3xq8YV+`S}F6A>Gtl39_m;K4dA{pP$BW0oIXJ>jEQ!2V3A2 zdpoTxG&V=(?^q?ZTj2ZUpDUdMb)T?E$}CI>r@}PFPWD9@*%V6;4Ag>D#h>!s)=$0R zRXvdkZ%|c}ubej`jl?cS$onl9Tw52rBKT)kgyw~Xy%z62Lr%V6Y=f?2)J|bZJ5(Wx zmji`O;_B+*X@qe-#~`HFP<{8$w@z4@&`q^Q-Zk8JG3>WalhnW1cvnoVw>*R@c&|o8 zZ%w!{Z+M HeZ*OE4v *otkZqz11*s!#s^Gq>+o`8Z5 z^i-qzJLJh9!W- ;SmFkR 8HEZ JWiXk$40i6)7 zZpr=k2lp}SasbM*Nbn3j$sn0;rUI;%EDbi7T1ZI4qL6PNNM2Y%6{LMIKW+FY_yF3) zSKQ2 QSujzNMSL2r&bYs`|i2Dnn z=>}c0>a}>|uT!IiMOA~pVT~R@bGlm}Edf}Kq0?*Af6#mW9f9!}RjW7om0c9Qlp;yK z)=XQs(| 6GCadQbWIhYF=rf{Y)sj%^Id-ARO0=O^Ad;Ph+ z0?$eE1xhH?{T$QI>0JP75`r)U_$#%K1^BQ8z#uciKf(C701&RyLQWBUp*Q7eyn76} z6JHpC9}R$J#(R0cDCkXoFSp;j6{x{b&0yE@P7{;pCEpKjS(+1RQy38`=&Yxo%F=3y zCPeefABp34U-s?WmU#JJw2 3dcC{sPPFc2#J$ZgEN%zod}J~8dLm*fx9f6SpO zn^Ww3bt9-r0XaT2a@Wpw;C23XM}7_14#%QpubrIw5aZtP+CqIFmsG4`Cm6rfxl9n5 z7=r2C-+lM2AB9X0T_`?EW&Byv &K?HS4QLoylJ|OAF z`8atBNTzJ&AQ !>sOo$?^0xj~D(;kS$`9zbEGd>f6r`NC3X`tX)sWgWUUOQ7w=$TO &*j;=u%25ay-%>3@81tGe^_z*C7pb9y*Ed^H3t$BIKH2o+olp#$q;)_ zfpjCb_^VFg5fU~K)nf*d*r@BCC>UZ!0&b?AGk_jTPXaSnCuW110wjHPPe^9R^;jo3 zwvzTl)C`Zl5}O2}3lec=hZ*$JnkW#7enKKc)(pM${_$9Hc=Sr_A9Biwe*Y=T?~1CK z6eZ9uPICjy-sMGbZl$yQmpB&`ouS8v{58__t0$JP%i3R&%QR3ianbZqDs<2#5FdN@n5bCn^ZtH992~5k(eA|8|@G9u`wdn7bnpg|@{m z^d6Y`*$Zf2Xr&|g%sai#5}Syvv(>Jnx&EM7-|Jr7!M~zdAyjt*xl;OLhvW-a%H1m0 z*x5*nb=R5u><7lyVpN AR?q@1U59 zO+)QW wL8t zyip?u_nI+K$uh{ y)~}qj?(w0&=SE^8`_WMM zTybjG=999h38Yes7}-4*LJ7H)UE8{mE(6;8voE+TYY%33A>S6`G_95^5QHNTo_;Ao ztIQIZ_}49%{8|=O;isBZ?=7kfdF8_@azfoTd+hEJKWE!)$)N%HIe2cplaK`ry#=pV z0q{9w-`i0h@!R8K3GC{ivt{70IWG`EP |(1g7i_Q<>aEAT{5( yD z=!O?kq61VegV+st@XCw475j6vS)_z@efuqQgHQR1T4;|-#OLZNQJPV4k$AX1Uk8Lm z{N*b*ia=I+MB}kWpupJ~>!C@xEN#Wa7V+7{m4j8c?)ChV=D?o~sjT?0C_AQ 7B-vxqX30s0I_`2$in86#`mAsT-w?j{&AL@B3$;P z31G4(lV|b}uSD CIrjk+M1R!X7s 4Aabn<)zpgT}#gE|mIvV38^ODy@<&yflpCwS#fRf9ZX3lPV_?8@C5)A;T zqmouFLFk;qIs4rA=hh=GL~sCFsXHsqO6_y~*AFt93 9UYVBSx1s(=Kb&5;j7cSowdE;7()CC2|-i9Zz+_BIw8#ll~-tyH?F3{%`QCsYa*b#s*9iCc`1P1oC26?`g<9))EJ3%xz+O!B3 zZ7$j~To)C@PquR>a1+Dh>-a%IvH_Y7^ys|4o?E%3`I&ADXfC8++hAdZfzIT#%C+Jz z1lU~K_vAm0m8Qk}K$F>| >RPK%<1SI0(G+8q~H zAsjezyP+u!Se4q3GW)`h`NPSRlMoBjCzNPesWJwVTY!o@G8=(6I%4XHGaSiS3MEBK zhgGFv6Jc>L$4jVE!I?TQuwvz_%CyO!bLh94nqK11C2W$*aa2ueGopG8DnBICVUORP zgytv#)49fVXDaR$SukloYC3u7#5H)}1K21=?DKj^U)8G;MS)&Op)g^zR2($<>C*zW z;X7`hLxiIO#J`ANdyAOJle4V%ppa*(+0i3w;8i*BA_;u8gOO6)MY`ueq7stBMJTB; z-a0R>hT*}>z|Gg}@^zDL1MrH+2hsR8 zHc}*9IvuQC^Ju)^#Y{fOr(96rQNPNhxc;mH@W*m206>Lo<*SaaH?~8zg&f&%YiOEG zGiz?*CP>Bci}!WiS=zj#K5I}>DtpregpP_tfZtPa(N<%vo^#WCQ5BTv0vr%Z{)0q+ z)RbfHktUm|lg&U3YM%lMUM(f u}i#kjX9h>GYctkx9Mt_8{@s%!K_EI zScgwy6%_fR?CG JQtmgNAj^h9B#zma MDWgH55pGuY1Gv7D z;8Psm(vEPiwn#MgJYu4Ty9D|h!?Rj0ddE|&L3S{IP%H4^N!m`60ZwZw^;eg4sk6K{ ziA^`Sbl_4~f&Oo%n;8Ye(tiAdlZKI!Z=|j$5hS|D$bDJ}p{gh$KN&JZYLUjv4h{NY zBJ>X9z !xfDGY z+oh_Z&_e#Q(-}>ssZfm=j$D&4W4FNy&-kAO1~#3Im;F)Nwe{(*75(p=P^VI?X 0GFakfh+X-px4a%Uw@fSbmp9hM1_~R>?Z8+ ziy|e9>8V*`OP}4x5JjdWp}7eX;lVxp5qS} 0YZek;SNmm7tEeSF*-dI)6U-A%m6YvCgM(}_=k#a6o^%-K4{`B1+}O4x zztDT%hVb;v#?j`lTvlFQ3aV#zkX=7 ;YFLS$uIzb0E3lozs5`Xy zi~vF+%{z9uLjKvKPhP%x5f ~7-Gj+%5N`%^=yk*Qn{`> z;xj&ROY6g`iy2a@{O)V(jk&8#hHACVDXey5a+KDod_Z&}kHM}xt7}Md@pil{2x7E~ zL$k^d2@Ec2XskjrN+IILw;#7((abu;OJii&v3?60x>d_Ma(onIPtcVnX@ELF0aL?T zSmWiL3(dOFkt!x=1O!_0n(cAzZW+3nHJ{2S>tgSK?~cF ha^y(l@-Mr2W$%MN{#af8J;V*>hdq!gx=d0h$T7l}>91Wh07)9CTX zh2_ZdQCyFOQ)l(}gft0UZ G`Sh2`x-w`5vC2UD}lZs*5 zG76$akzn}Xi))L3oGJ75#pcN=cX3!=57$Ha=hQ2^lwdyU#a}4JJOz6ddR%zae%#4& za)bFj)z=YQela(F#Y|Q#dp}PJghITwXouVaMq$BM?K%cXn9^Y@g43$=O)F&ZlOUom zJiad#dea;-eywBA@e&D6Pdso1?2^(pXiN91?jvcaUyYoKUmvl5G9e$W!okWe*@a<^ z8cQQ6cNSf+UPDx%?_G4a IiybZHHagF{ ;IcD(dPO!#=u zWfqLcPc^+7Uu#l(B pxft{*4lv#*u7X9AOzDO z1D9?^jIo}?%iz(_dwLa{ex#T}76ZfN_Z-hwpus9y+4xaUu9cX}&P{XrZVWE{1^0yw zO;YhLEW!pJcbCt3L8~a7>jsaN{V3>tz6_7`&pi%GxZ=V3?3K^ U+*ryLSb)8^IblJ0 zSRLNDvIxt)S}g30?s_3NX>F?NKIGrG_zB9@Z>uSW3k2es_H2kU;Rnn%j5qP)!XHKE zPB2mHP~tLCg4K_vH$xv`HbRsJwbZMUV(t=ez;Ec(vyHH)FbfLg`c61I$W_uBB>i^r z&{_P;369-&>23R%qNIULe=1~T$(DA`ev*EWZ6j(B$(te}x1WvmIll21zvygkS%vwG zzkR6Z#RKA2!z!C%M!O>!=Gr0(J0FP=-MN=5t-Ir)of50y10W}j`GtRCsXBakrKtG& zazmITDJMA0C51&BnLY)SY9r)NVTMs);1<=oosS9g31l{4ztjD3#+2H7u_|66b|_*O z;Qk6nalpqdHOjx|K&vUS_6ITgGll;TdaN*ta=M_YtyC)I9Tmr~VaPrH2q b6sd~=AcIxV+%z{E&0@y=DPArw zdV7z(G1hBx7hd{>(cr43^WF%4Y@PXZ?wPpj{OQ#tvc$pABJbvPGvdR`cAtHn)cSEV zrpu}1tJwQ3y!mSmH*uz*x0o|CS<^w%&KJzsj~DU0cLQUxk5B!hWE>aBkjJle8z~;s z-!A=($+}Jq_BTK5^B!`R>!MulZN)F=iXXeUd0w5lUsE5VP*H*oCy( ;?S$p*TVvTxwAeWFB$jHyb0593)$zqalVlDX=GcCN1gU0 zlgU)I$LcXZ8Oyc2TZYTPu@-;7<4YYB-``Qa;IDcvydIA$%kHhJKV^m*- zxcvU4viy &Kr5GVM{IT>WRywKQ9;>SEiQD*NqplK-KK4YR`p0@JW)n_{TU3bt0 zim%;(m1=#v2}zTps=?fU5w^(*y)xT%1vtQH&}50ZF!9YxW=&7*W($2kgKyz1mUgfs zfV<*XVVIFnohW=|j+@Kfo!#liQR^x>2yQdrG;2o8WZR+XzU_nG=Ed2rK?ntA;K5B{ z>M8+*A4 !Jm^Bg}aW?R?6;@QG@uQ8&oJ{hFixcfEnJ4QH?A4>P=q29oDGW;L;= z9-a0;g%c`C+Ai!UmK$NC*4#;Jp<1=TioL=t^YM)<<%u#hnnfSS`nq63QKGO1L8RzX z@MFDq s1z ztYmxDl@LU)5acvHk)~Z`RW7=aJ_nGD!mOSYD>5Odjn@TK#LY{jf?+piB5AM-CAoT_ z?S-*q7}wyLJzK>N%eMPuFgN)Q_otKP;aqy=D5f! 7<=n(lNkYRXVpkB{TAYLYg{|(jtRqYmg$xH zjmq ?B(RE4 zQx^~Pt}gxC2~l=K$$-sYy_r$CO(d=+b3H1MB*y_5g6WLaWTXn+TKQ|hNY^>Mp6k*$ zwkovomhu776vQATqT4blf~g;TY(MWCrf^^yfWJvSAB$p5l;jm@o#=!lqw+Lqfq>X= z$6~kxfm7`3q4zUEB;u4qa#BdJxO!;xGm)wwuisj{0y2x{R(IGMrsIzDY9LW>m!Y`= z04sx3IjnYvL<4JqxQ8f7qYd0s2Ig%`ytYPEMKI)s(LD}D@EY>x`VFtqvnADNBdeao zC96X+MxnwKmjpg{U&gP3HE}1=s!lv&D{6(g_lzyF3A`7Jn*&d_kL<;dAFx!UZ>hB8 z5A*%LsAn;VLp>3${0>M?PSQ)9s3}|h2e?TG4_F{}{Cs>#3Q*t$(CUc}M)I}8cPF6% z=+h(Kh^8)}gj(0}#e7O^FQ6`~fd1#8#!}LMuo3A0bN`o}PYsm!Y}sdOz$+Tegc=qT z8x`PH$7lvnhJp{kHWb22l;@7B7|4yL4UOOVM0MP_>P%S1Lnid)+k9{+3D+JFa#Pyf zhVc#&df87APl4W9X)F3pGS>@etfl=_E5tBcVoOfrD4hmVeTY-cj((pkn%n@EgN{0f zwb_^Rk0I#i ZuHK!l*lN`ceJn(sI{$Fq6nN& zE<-=0_2WN}m+*ivmIOxB@#~Q-cZ>l136w{#TIJe478`KE7@=a{>SzPHsKLzYAyBQO zAtuuF$-JSDy_S@6GW0MOE~R)b;+0f%_NMrW(+V#c_d&U8Z9+ec4=HmOHw?gdjF(Lu zzra 83M_BoO-1b3;9`%&DHfuUY)6YDV21P$C!Rc?mv&{lx#f8oc6?0?x zK08{WP65?#>(vPfA-c=MCY| %*1_<3D4NX zeVTi-JGl2uP_2@0F{G({pxQOXt_d{g_CV6b?jNpfUG9;8yle-^4KHRvZs-_2siata zt+d_T@U$&t*xaD22(fH(W1r$Mo?3dc%Tncm=C6{V9y{v&VT#^1L04vDrLM9qBoZ4@ z6DBN#m57hX7$C(=#$Y5$bJmwA$T8jKD8+6A!-IJwA{WOfs%s}yxUw^?MRZjF$n_KN z6`_bGXcmE#5e4Ym)aQJ)xg3Pg0@k`iGuHe?f(5LtuzSq=nS^5z>vqU0EuZ&75V%Z{ zYyhRLN^)$c6Ds{f7*FBpE;n5iglx5PkHfWrj3`x^j^t z7ntuV`g!9Xg#^3!x)l*}IW=(Tz3>Y5l4uGaB&lz{GDjm2D5S$CExLT`I1#n^lBH7Y zDgpMag@`iETKAI=p<5E#LTkw zVR@=yY|uBVI1HG|8h+d;G-qfuj}-ZR6fN>EfCCW z9~wRQoAPEa#aO?3h?x{YvV*d+NtPkf&4V0k4|L=uj!U{L+oLa(z#&iuhJr3-PjO3R z5s?=nn_5^*^Rawr>>Nr@K(jwkB#JK-=+HqwfdO<+P5byeim)wvqGlP-P|~Nse8=XF zz`?RYB|D6SwS}C+YQv+;}k6$-%D(@+t14BL@vM z2q%q?f6D-A5s$_WY3{^G0F131bbh|g!}#BKw=HQ7mx;Dzg4Z*bTLQSfo{ed{4}NZW zfrRm^Ca$rlE{Ue~uYv>R9{3s mwATcdM_6+yWIO z*ZRH~uXE@#p$XTbCt5j7j2=86e{9>HIB6xDzV+vAo&B?KUiMP|ttOElepnl%|DPqL b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN literal 0 HcmV?d00001 diff --git a/apps/kitchen-sink/public/manifest.json b/apps/kitchen-sink/public/manifest.json new file mode 100644 index 00000000..080d6c77 --- /dev/null +++ b/apps/kitchen-sink/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/apps/kitchen-sink/public/robots.txt b/apps/kitchen-sink/public/robots.txt new file mode 100644 index 00000000..e9e57dc4 --- /dev/null +++ b/apps/kitchen-sink/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/apps/kitchen-sink/src/App.jsx b/apps/kitchen-sink/src/App.jsx new file mode 100644 index 00000000..6a4f6c9c --- /dev/null +++ b/apps/kitchen-sink/src/App.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import ContextProvider from "./components/context/ContextProvider"; +import "monday-ui-react-core/dist/main.css"; +import "./App.scss"; +import LayoutRouter from "./routes/LayoutRouter"; + +const App = () => { + return ( + + + ); +}; + +export default App; diff --git a/apps/kitchen-sink/src/App.scss b/apps/kitchen-sink/src/App.scss new file mode 100644 index 00000000..69a39944 --- /dev/null +++ b/apps/kitchen-sink/src/App.scss @@ -0,0 +1,128 @@ +@import "./styles/animations.scss"; + +body { + margin: 0; + font-family: "Roboto", sans-serif; +} +.root { + display: flex; + flex: 1; + height: 100vh; +} + +a { + text-decoration: none; +} + +.ellipsis { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.switch-wrapper { + display: flex; + flex: 1; +} +.feature-container { + max-height: 100%; + width: 100vw; + overflow: auto; + display: grid; + box-sizing: border-box; + padding: 20px; + grid-gap: 25px; + box-sizing: border-box; + grid-template-areas: + "header playground playground playground playground" + "instructions playground playground playground playground" + "instructions snippet snippet snippet snippet" + "instructions snippet snippet snippet snippet" + "instructions snippet snippet snippet snippet" + "instructions snippet snippet snippet snippet"; + grid-template-columns: 1fr 1fr; + grid-template-rows: repeat(4, 1fr); +} + +.feature-container .working-with-the-board-item { + background-color: rgb(244, 245, 247); + height: 36px; + cursor: pointer; + border-bottom: 1px solid #fff; + display: flex; + align-items: center; + position: relative; + margin-top: 4px; + width: 100%; + justify-content: space-between; + + & span { + line-height: 24px; + font-weight: 400; + color: #323338; + font-size: 12px; + margin-left: 13px; + max-width: 67%; + } + + &:hover { + background-color: rgb(227, 230, 236); + } + + & > button { + animation: scale-up-center 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both; + z-index: 3; + font-size: 12px; + &:hover { + background-color: white; + } + } +} + +.rect { + position: absolute; + width: 8px; + height: 100%; +} + +.empty-board-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + & > .empty-board-image { + width: 400px; + } + + .chooseBoardContainer { + position: absolute; + right: 40px; + top: 0px; + display: flex; + flex: row; + margin-top: 30px; + + .pointer-image { + width: 64px; + height: 64px; + margin-bottom: 30px; + } + } +} + +.playground-header { + display: contents; + margin: 0; + font-weight: 600; + color: #384248; + font-size: 24px; + line-height: 30px; +} + +.playground { + grid-area: playground; + margin-right: 10px; +} diff --git a/apps/kitchen-sink/src/App.test..js b/apps/kitchen-sink/src/App.test..js new file mode 100644 index 00000000..47ff13b0 --- /dev/null +++ b/apps/kitchen-sink/src/App.test..js @@ -0,0 +1,51 @@ +import React from "react"; +import "./App.css"; +import mondaySdk from "monday-sdk-js"; +import "monday-ui-react-core/dist/main.css"; +import AttentionBox from "monday-ui-react-core/dist/AttentionBox.js"; + +const monday = mondaySdk(); + +class App extends React.Component { + constructor(props) { + super(props); + + this.state = { + settings: {}, + name: "", + }; + } + + componentDidMount() { + monday.listen("settings", (res) => { + this.setState({ settings: res.data }); + }); + + monday.listen("context", (res) => { + this.setState({ context: res.data }); + monday + .api( + `query ($boardIds: [Int]) { boards (ids:$boardIds) { name items(limit:1) { name column_values { title text } } } }`, + { variables: { boardIds: this.state.context.boardIds } } + ) + .then((res) => { + this.setState({ boardData: res.data }); + }); + }); + } + + render() { + return ( ++ ++ ); + } +} + +export default App; diff --git a/apps/kitchen-sink/src/App.test.js b/apps/kitchen-sink/src/App.test.js new file mode 100644 index 00000000..af8499d6 --- /dev/null +++ b/apps/kitchen-sink/src/App.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import App from './App.test.'; + +test('renders learn react link', () => { + const { getByText } = render(+ {JSON.stringify(this.state.boardData, null, 2)} + ); + const linkElement = getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/apps/kitchen-sink/src/AppSolution.js b/apps/kitchen-sink/src/AppSolution.js new file mode 100644 index 00000000..1d22c4a4 --- /dev/null +++ b/apps/kitchen-sink/src/AppSolution.js @@ -0,0 +1,41 @@ +import React from "react"; +import "./App.css"; +import mondaySdk from "monday-sdk-js"; +const monday = mondaySdk(); + +class AppSolution extends React.Component { + constructor(props) { + super(props); + + // Default state + this.state = { + settings: {}, + context: {}, + name: "", + }; + } + + componentDidMount() { + // TODO: set up event listeners + monday.listen("settings", (res) => { + this.setState({ settings: res.data }); + }); + + monday.api(`query { me { name } }`).then((res) => { + this.setState({ name: res.data.me.name }); + }); + } + + render() { + return ( + + Hello, {this.state.name}! ++ ); + } +} + +export default AppSolution; diff --git a/apps/kitchen-sink/src/ExampleComponent.js b/apps/kitchen-sink/src/ExampleComponent.js new file mode 100644 index 00000000..73b663e8 --- /dev/null +++ b/apps/kitchen-sink/src/ExampleComponent.js @@ -0,0 +1,50 @@ +import React, { useState, useEffect } from "react"; +// import "./ExampleComponent.css"; +import mondaySdk from "monday-sdk-js"; +import "monday-ui-react-core/dist/main.css"; +import AttentionBox from "monday-ui-react-core/dist/AttentionBox.js"; + +const monday = mondaySdk(); + +const query = `query ($boardIds: [Int]) { boards (ids:$boardIds) { name items(limit:1) { name column_values { title text } } } }`; + +const DEFAULT_SETTINGS_VALUES = { + attentionBoxTitle: "Default Title", + attentionBoxMessage: "Default Message", + attentionBoxType: "primary", +}; + +const ExampleComponent = () => { + // Component's state + const [settings, setSettings] = useState({}); + const [boardData, setBoardData] = useState(""); + + // Component's add listeners + useEffect(() => { + monday.listen("settings", (res) => { + setSettings(res.data); + }); + + monday.listen("context", (res) => { + //You can use 'monday.get("context")' in order to fetch and update the data once. + monday.api(query, { variables: { boardIds: res.data.boardIds } }).then((res) => { + setBoardData(res.data); + }); + }); + + return function cleanup() {}; + }, []); + + return ( +++ ); +}; + +export default ExampleComponent; diff --git a/apps/kitchen-sink/src/assets/icons/empty-board.svg b/apps/kitchen-sink/src/assets/icons/empty-board.svg new file mode 100644 index 00000000..6b10b274 --- /dev/null +++ b/apps/kitchen-sink/src/assets/icons/empty-board.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/kitchen-sink/src/assets/icons/right-up-arrow.png b/apps/kitchen-sink/src/assets/icons/right-up-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..0fe8e43254daf2e76ca0634034ade8cf41427a6b GIT binary patch literal 3418 zcmeH}i#yZpAIIlVn4I!OE%6vKa<-64wlU|mIYjh0Bz#F36Ow7slC9-Ya~iVmrcjbH zQBIvuI&G8)Jt}f~l*w`B@zdY&d+zJ{-0#nQe?HgsxjwJ^zOU=fArf4b;0QPj22*l( zbM}G3q}E+2n7quo9IFZRTNfD$*4+ {JSON.stringify(boardData, null, 2)} + {lWnDi0HYr#Bs_pvb)+Cp} zB;WX`q?GW)NLWfrih0b5W0Z(+a-?~DVsy#3y$BdgT1@ovb6HzkThIS*{72ybgg|ND zxyPua`Fmr#Z5}eDynLm)d3Antu0#-+qAdq=>DOH)Hg8PVT3X^ z*=cHKZeeL _*)61K1fJpN3_47X%5O^pk_|K5g zu<#=hM zUC+B;ynOZgjj*Tp?YqAB{R1BchlW4?J@V=Em(j7W;}erp)BntT`#vk4`!T<;xU{?? z`T1-0UyC+g0t_bq&fOW~w`J?hqtjup7j)!imuv>2+-fP&=C2ggNo56=9$&dZ$Rrc> zCk6TU3q~);>UmtLOAH+wH8^fqb5zlAkmCi6IW*QQ4*qCabGSRcl954SZeIME+De !CPQ@)A}v&>3`DW5 zTI~C*4y7#X7lDTf`c*ys&uwZbPFHsCeG!K8`62rzvBqTn!q{%FY=lPc5AC^W40HSx zK}_UzlMv?cXqyR3R%h*&pc)!n$_U&$QD36@NEjx?@_(orWPm$cV4gN=w=sQDhy)f3 z-6Et3TRoU&A$84{&>1FKzUfOso>AQEJ3082QcZW}n=ndiO!`G+Tf0xw)T6$Z`iZ>v zuoEP~7P(+%g;;uT`k8C}lQhJ{BIN2)iC)Er8REL?FvQZAO*@SpY2LRgyRz+l zWjkW~eO1y%-*yyFk>bvo<#%(tz)~N|vkLdJ^pQM5#Gbfnm3`K&XM5@o%(3T7KH27X zO7-_>rVS~knnmX6pCpYsB7TOuLi27gVVRB?^|{0|*PvfinDjGrJ4{#fWI)wLvnK)` zhbq$1CwuH*k%1V`+^coaT8|kYO&D;Ca2)EH=#yXUed*Gu`pZ10Gr37AGEXH8_g!>c zflz||l#6T|Ty7R5)|IDiFimXHBurz(szaO#&Dln){4ku& T@+*P1=qr>x@{11vxKb~P%GZh4+0$Qs_DF`MFg>|qo0h-utyobB_LOR8-~ zF*TX1yC!sPc(ye@G1}rxtPLuYOVnk^qu%~?L=WxY6rqKd6!B~Ugr`^@m~yjHhx?O7 z{hL@lAW)Evr5HP4ATmQtL|ynyLHU{FcB+AbV%`oQEtjVcATVkQ^anmqF^~j!PJEV7 z+KB<#SdtR_)iqF#&ND`Gg{?rm6T|^Ro%m1Ci&(yeu?YsUXM~~9=aAa)hRULi^cy|~ zSUwe vfHI{t-mHx`-%Sdh??ahfa40$L&BF-9~* z^k-BHQQ4iFK{iHzD}w3~u?Nj@)z?CJU#pU*clw~|ST&%GOSE8gafMWX&n0eS6celT zT=oJtobzDxmcwYrv-kmYABJy=*anI0(AHcMl2s0gHY4O9ktyPo5Jb|o0LFEc3SFnN zN}2w^7kv(U+?a!dqJR`E^Z?K!RynxXq5O(@cEE$Y&+e#E&vlj_q>Gt&0zw@kIkIAe z6ZWh|NTi2Q _ z;6*xqCwTE3{(EogMugdQwGFI~*VLp~nxZW**1xzf3Lx8=Z-JID@bTch8Osu6yYuDH z5;`7*c5wdU2(l0GWq>)}vJqh7nqULWRaVK;5h8LL2D*n<#`0akqgXzOn1)EEEDa&3 z##(RJj1>q9Se g=g_vfa<;Hz1m5264pNe8~bzoUg{b^fvwWUs#p^oIixroatv zks|ygAC#eoaMz(96x#njVYjo`cPLFP^cv9T3c>Yz!gkXCTTYTX!_V79|KQ_w9@~q0 z-~^SSOYJb_2Z3O&P?li_5fLu&6Y6eE2Vt~9hdGMvVYN;27U~!l8ZnTH68jA97C9<5 zMg)_j ;Tl#Hv`GGsK64MG7ttv_h^GLjLRXs=Zwo{q8;MpzZ L tHYUVv6;x z CtcQ*J?}}At?kR3d z^#ixFk9sH96@6bN>tJ-tM(;=7E)%UK?`ONI9IY>EWsx0YTK*WnH>RGpYYCsz6RX4= zOi_G&Y@Y=dllHi&j@yk=i+z=Hr%C1&Iium;9B(Yz(Bcv+WAqzL_i#O@^Xu#;x!@73 z$?=hEduE5b8@m?T_g7ih8o%S&icQ-ap3?KZN6QNf^IPnb1K*5DJ~nl?a8!OZ(V_?a zww)P0k7=K?pv yq1|*@``?+aT8GD!ps(4?5xY4{i<^&egYE7? zh$SDd)IhhJv=Z&*V82c9?e>$y4Tp?U9c#z8H`!}+#gG5pRb18}u8*t_r6%~jrL~1a zGvDJ9C^Ov|%7+o nbF#_ojdoRezW-9x35-0 zepI^EqFvQSu-0ClYMuV@Aw~^%9=~t<>dV<8l11lh#(}{5J5EktYVCrbsxI*FGK^Jg zJt{YIBp~3Iu|KZMBBXur`R3QVTebgX^hnJ}_AL>7qI5hBqOq#xS4 XKd%lm- z{@U=lGUsd)B7N%KO2C?xO`&15&Y1rf$>P{O<-;f27J^dJ?9-Pk4lx~999A3mhUhhq z?+a3TkJMdzxW{1$VV~$R)bo`6l4_K?5_$U)6|HJW4}BH pI)R|BNIo|sXE{K?o-Lr+=n!de@nvf$@hQa*W}#S{N8x{5x)QTkJjCV K;9QFh%lsb))!n=R literal 0 HcmV?d00001 diff --git a/apps/kitchen-sink/src/assets/images/logo.png b/apps/kitchen-sink/src/assets/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..d86dba1d454b9d2aed4406c438642a74b159b91d GIT binary patch literal 2117 zcmYLKdpHw%AD_1i=5;@E3Y*Pkj;Ps^DJQorbXa6UB2r10W0=e4HWC)O>m@^SD|dBN zGP%s9c(=JEa-Z8U_bqCScb)frp7;BFpU>_2{(jH*zc0leYb6al1_S^A(l*xUO8|fv zR-|zf2ShmX_Jo3nV(o2l7%RLj0)fDsLyAyT1_lO5 _?r6CIy8KU^M(hTh5j_|EEW)4j zFn7@m{fE4%Xdg|&C9ETWENA8kZZ1%tT!W|LSv9lv>gv;;MK_+sk|CslkGW^NPTRGX zVKx8&aa$X-IWBZ$<>}YpB9vU5`HT9xjyx1|RnJJ1xWBF9ZKi9ZRqOqpL(LJ?+)H&i zmxW9Gh)|%Qp=s8d|D|Hn<6j>OFnSU&wkB1x%?2e2qu>>=B4M+Sp{_N?kFTvyafK_w zC;0rT@j>UBv$6|ZhEGkdKHKD??6sn50BeO)EHXW(n=7k_3G0G^#c!DvIwdanVm(~B zp(92x`?*xFo3NeEm^o;-R~~uIn0ifipii01J7kpT;B>JXAyn~owe{&?Tf;(at5Qko zz3;YuCx?HY|8Dh9yUiC-4$|ZCjfE(ocJ5+ZWj^TX4h!jfh#EqkA96c280PLREFJ1~ zy&Q6x6uJXcWk)uT5!6VR?Yd V&1@jr4C|batYT2vJ{81o4wgx? z1MLxM5hLqAFd+HdxTaNjPJh>L>B8I-RboEAw{qb-qeSDK-Eeo)8$--o04$eIe01JT zN3rbjCd|D&YC@llBNf`HFtXe7FLMQj4}yiQJLLKM!M`zEY1#Q5B~M(G#-Z4z&+Q&` zbn-$#^9QNh9+1cd-n<}yIvC?WD23u?xHQ~^kE3Iy5?opGha81mwGGRH?XL=0jZIyC z8KS0z%LV*P{!$xA+vFsV_K=MQ?}u`ErNh>0ulhX{KfD~3@KMuKKYr$Uuk3gSgwu+8 ztwohiqy~5VBk)H4;%wKz1yV&cu(9Hcip(}E$xDW2#sZF+r@Sd00l<(`Y0v66vn-hg zH)Vyr-xRQnHpB5wx)Pxnx;{HGn<-c3-a& k5OQIBP|-m{vh1fZl&+4ZMpNd~-LuS-Vd7>y1Eq6@(!sXxHTNQvni z$PN5lw(>A^E_6Qtr4j<7R%;Y2TfJ&FQ=KoHHNU-NtkLvD18B*FKuAAKAP`{SmY&3M z% # &u4os3QS;?CF_@Hdvp{}dZP96(EF4~Xkm^GzVHI9)I(#HCXwKX9I zm6MZrHt0>P;^VVQppau(Ks&nqsVh+e7~(OUUQ3y2zSaG^42<#pnrgsd{lh(xrcM01 z{b0engRoF>P#^ylR29ZeEhpx7Kf=+d0BSVxPSggf^c~SJ v zT>lGq#qSXAo*{5UhLby|;`7y+e!-I1!;^)+ZsS_ISV?N_^J1P|s~ghUp zQX)F*sBe-oAoKT`BcIy4gZo*o<}MXupQcfbiYWHIx08KlJVJ>qe6#?3vV*c5(>Ohg zz{ZxzAgv7>S;=VH1C8=}>S?*o(bw#)F^_uN8G>t{N-bZxvb&*+&MaW_jZ|9Bclx5- zpIncJ?g7!v@Ix_IU2W?-NF(=G4s=`a_jj})&PTb9kem|#Tg~ykyrtITpyVwgcaC;3 z`~Kc99CoVDx#!v3{EoP}Ams(43m%HQNbS_rO-Y#S{6$l4U{s?f1=%wJUR@3La$h2a zMKwxS1f+m>gach;%7mHQ?UQ9+QwBVpsw-oU8ku<^5(unin4jJrfTen}JMBokHsf9H zO9i_dp3+2(Y||*TWPInURw;h3@p>QUna{TqPfTT {%eyla$|`7N|0 zoyS(53D>hwqWbKIZ74MtLmCWS6%u>umtc9C4b!l^VnfqK%`^?D6*@UVRi2_MZww7U qYX+dBJhZ^|kR$)Qfg<`VZcpr{(D@J4ESw>_!vGr$7F})O8S@`G4HDS^ literal 0 HcmV?d00001 diff --git a/apps/kitchen-sink/src/components/common/ActionHeader/ActionHeader.jsx b/apps/kitchen-sink/src/components/common/ActionHeader/ActionHeader.jsx new file mode 100644 index 00000000..d753ecb7 --- /dev/null +++ b/apps/kitchen-sink/src/components/common/ActionHeader/ActionHeader.jsx @@ -0,0 +1,32 @@ +import React, { useRef } from "react"; +import "monday-ui-react-core/dist/main.css"; +import "./ActionHeader.scss"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faAngleLeft } from "@fortawesome/free-solid-svg-icons"; +import randomColorGenerator from "../../../utils/randomColorGenerator"; + +const ActionHeader = ({ action, actionDescription, backgroundColor }) => { + const initialRandomColor = useRef(randomColorGenerator()); + + return ( + ++ ); +}; + +export default ActionHeader; diff --git a/apps/kitchen-sink/src/components/common/ActionHeader/ActionHeader.scss b/apps/kitchen-sink/src/components/common/ActionHeader/ActionHeader.scss new file mode 100644 index 00000000..3979a668 --- /dev/null +++ b/apps/kitchen-sink/src/components/common/ActionHeader/ActionHeader.scss @@ -0,0 +1,51 @@ +@import "../../../styles/animations.scss"; + +.action-header-container { + grid-area: header; + box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.2); + color: white; + height: 100%; + box-sizing: border-box; + padding: 10px; + display: flex; + svg { + cursor: pointer; + } + & > svg { + position: absolute; + right: 10px; + color: white; + z-index: 5; + } + & > div.headers { + position: relative; + box-sizing: border-box; + padding-left: 40px; + & > h2.board-name { + margin-top: 14px; + margin-bottom: 0; + & > svg:nth-child(1) { + margin-right: 10px; + position: absolute; + left: 16px; + } + & > svg:nth-child(2) { + margin-left: 20px; + } + } + + & > h5 { + margin-top: 6px; + } + } + + & > .dialog-content-container { + width: fit-content; + max-height: 125px; + overflow: auto; + margin-left: 20px; + padding: 10px; + margin-left: 20px; + animation: fadein 500ms; + } +} diff --git a/apps/kitchen-sink/src/components/common/CodeBlock/CodeBlock.jsx b/apps/kitchen-sink/src/components/common/CodeBlock/CodeBlock.jsx new file mode 100644 index 00000000..e6467ab3 --- /dev/null +++ b/apps/kitchen-sink/src/components/common/CodeBlock/CodeBlock.jsx @@ -0,0 +1,79 @@ +/* eslint-disable react-hooks/exhaustive-deps */ +import React, { useState, useEffect } from "react"; +import Highlight, { defaultProps } from "prism-react-renderer"; +import theme from "prism-react-renderer/themes/nightOwl"; +import "./CodeBlock.scss"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faCopy } from "@fortawesome/free-regular-svg-icons"; +import { faExpandAlt, faCompressAlt } from "@fortawesome/free-solid-svg-icons"; +import { CopyToClipboard } from "react-copy-to-clipboard"; +import mondaySdk from "monday-sdk-js"; +import axios from "../../../utils/axiosConfig"; + +const Pre = ({ children, className }) => { + return+++
+{ + window.history.back(); + }} + /> + {action} + {actionDescription}
+{children}; +}; +const Line = ({ children }) => { + return{children}; +}; +const LineNo = ({ children }) => { + return {children}; +}; +const LineContent = ({ children }) => { + return {children}; +}; + +const monday = mondaySdk(); + +const popNotice = () => { + monday.execute("notice", { + message: "Copied to clipboard!", + type: "success", + timeout: 3000, + }); +}; + +const CodeBlock = ({ contentUrl }) => { + const [content, setContent] = useState("Loading..."); + const [isFullScreenMode, setIsFullScreenMode] = useState(false); + + useEffect(() => { + if (contentUrl) getContentUrl(); + }, [contentUrl]); + + const getContentUrl = async () => { + try { + const { data } = await axios.get(contentUrl); + setContent(data); + } catch (error) { + setContent("An error occurred while fetching the code snippet, please try again later"); + } + }; + return ( ++ {({ style, tokens, getLineProps, getTokenProps }) => ( + + ); +}; + +export default CodeBlock; diff --git a/apps/kitchen-sink/src/components/common/CodeBlock/CodeBlock.scss b/apps/kitchen-sink/src/components/common/CodeBlock/CodeBlock.scss new file mode 100644 index 00000000..a6b4a478 --- /dev/null +++ b/apps/kitchen-sink/src/components/common/CodeBlock/CodeBlock.scss @@ -0,0 +1,66 @@ +@import "../../../styles/animations.scss"; + +.pre { + position: relative; + box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.2); + grid-area: snippet; + text-align: left; + margin: 1em 0; + padding: 0.5em; + overflow: scroll; + background-color: hsl(236, 15%, 18%); + color: #f8f8f2; + box-sizing: border-box; + margin: 0; + height: 100%; + box-sizing: border-box; + width: 100%; + + &.fullscreen { + position: absolute; + z-index: 4; + width: 99%; + height: 99%; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + -webkit-animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; + animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; + } + + & .token-line { + line-height: 1.3em; + height: 1.3em; + } + & > svg:nth-child(1) { + position: absolute; + right: 10px; + cursor: pointer; + } + & > svg:nth-child(2) { + position: absolute; + right: 30px; + cursor: pointer; + } +} + +.line { + display: table-row; +} + +.lineNo { + display: table-cell; + text-align: right; + padding-right: 1em; + user-select: none; + opacity: 0.5; +} + +.lineContent { + display: table-cell; +} + +.code { + background-color: red; +} diff --git a/apps/kitchen-sink/src/components/common/Instructions/Instructions.jsx b/apps/kitchen-sink/src/components/common/Instructions/Instructions.jsx new file mode 100644 index 00000000..ea3ce9e8 --- /dev/null +++ b/apps/kitchen-sink/src/components/common/Instructions/Instructions.jsx @@ -0,0 +1,30 @@ +import React from "react"; +import "./Instructions.scss"; + +const Instructions = ({ paragraphs, instructionsListItems, linkToDocumentation, customInstruction }) => { + return ( +++ )} ++ ++ setIsFullScreenMode((prevState) => !prevState)} + /> + {tokens.map((line, i) => ( + + + ))} +{i + 1} ++ {line.map((token, key) => ( + + ))} + +++ ); +}; + +export default Instructions; diff --git a/apps/kitchen-sink/src/components/common/Instructions/Instructions.scss b/apps/kitchen-sink/src/components/common/Instructions/Instructions.scss new file mode 100644 index 00000000..5f47bf40 --- /dev/null +++ b/apps/kitchen-sink/src/components/common/Instructions/Instructions.scss @@ -0,0 +1,39 @@ +.instructions { + grid-area: instructions; + box-sizing: border-box; + padding: 18px; + background-color: rgb(244, 245, 247); + box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.2); + overflow: auto; + + ol li { + margin-top: 10px; + + &:nth-child(1) { + margin-top: 30px; + } + } + + h3 { + margin-top: 0; + font-weight: 600; + margin-bottom: 5px; + color: #384248; + font-size: 24px; + line-height: 30px; + word-wrap: break-word; + } + p, + li { + line-height: 1.5; + color: rgb(77, 85, 90); + font-weight: 500; + } + p { + display: block; + } + + strong { + margin-top: 10px; + } +} diff --git a/apps/kitchen-sink/src/components/common/Item/Item.jsx b/apps/kitchen-sink/src/components/common/Item/Item.jsx new file mode 100644 index 00000000..3fe1b879 --- /dev/null +++ b/apps/kitchen-sink/src/components/common/Item/Item.jsx @@ -0,0 +1,21 @@ +import React, { useRef } from "react"; +import "monday-ui-react-core/dist/main.css"; +import Button from "monday-ui-react-core/dist/Button"; + +const Item = ({ item, backgroundColor, action, isActive, index, setActiveCard, actionButtonContent }) => { + const initialRandomColor = useRef(backgroundColor); + + return ( +From the documentation
+ {paragraphs.map((paragraph, i) => { + return{paragraph}
; + })} + ++ You can learn more{" "} + + here + + . +
+Instructions
++ {instructionsListItems.map((listItem, i) => { + return
+ {!customInstruction && Click on an item to try!} +- {listItem}
; + })} +setActiveCard(index)}> + + {item.name} + {action && isActive && ( + + )} ++ ); +}; + +export default Item; diff --git a/apps/kitchen-sink/src/components/common/Loaders/Loader.jsx b/apps/kitchen-sink/src/components/common/Loaders/Loader.jsx new file mode 100644 index 00000000..ef5dcc9d --- /dev/null +++ b/apps/kitchen-sink/src/components/common/Loaders/Loader.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import "./Loader.scss"; + +const Loader = () => { + return ( ++ + + + ++ ); +}; + +export default Loader; diff --git a/apps/kitchen-sink/src/components/common/Loaders/Loader.scss b/apps/kitchen-sink/src/components/common/Loaders/Loader.scss new file mode 100644 index 00000000..b4fd6ab3 --- /dev/null +++ b/apps/kitchen-sink/src/components/common/Loaders/Loader.scss @@ -0,0 +1,56 @@ +.lds-ellipsis { + display: inline-block; + position: relative; + width: 80px; + height: 80px; + & div { + position: absolute; + top: 33px; + width: 13px; + height: 13px; + border-radius: 50%; + background-color: black; + animation-timing-function: cubic-bezier(0, 1, 1, 0); + &:nth-child(1) { + left: 8px; + animation: lds-ellipsis1 0.6s infinite; + } + &:nth-child(2) { + left: 8px; + animation: lds-ellipsis2 0.6s infinite; + } + &:nth-child(3) { + left: 32px; + animation: lds-ellipsis2 0.6s infinite; + } + &:nth-child(4) { + left: 56px; + animation: lds-ellipsis3 0.6s infinite; + } + } +} + +@keyframes lds-ellipsis1 { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} +@keyframes lds-ellipsis3 { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} +@keyframes lds-ellipsis2 { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(24px, 0); + } +} diff --git a/apps/kitchen-sink/src/components/common/NoBoardSelected/NoBoardSelected.jsx b/apps/kitchen-sink/src/components/common/NoBoardSelected/NoBoardSelected.jsx new file mode 100644 index 00000000..f21ff7d8 --- /dev/null +++ b/apps/kitchen-sink/src/components/common/NoBoardSelected/NoBoardSelected.jsx @@ -0,0 +1,37 @@ +import React, { useContext } from "react"; +import { Context } from "../../context/ContextProvider"; +import Loader from "monday-ui-react-core/dist/Loader"; +import EmptyBoardSVG from "../../../assets/icons/empty-board.svg"; +import ArrowImage from "../../../assets/icons/right-up-arrow.png"; + +const NoBoardSelected = () => { + const { boardName, isLoading } = useContext(Context); + if (isLoading) { + return ( +++ ); + } else if (!boardName) { + return ( ++ ++ ); + } else { + return ( ++
No board selected
+++Please add items or select other board.
++
++ ); + } +}; + +export default NoBoardSelected; diff --git a/apps/kitchen-sink/src/components/common/NoSubitemsAvailable/NoSubitemsAvailable.jsx b/apps/kitchen-sink/src/components/common/NoSubitemsAvailable/NoSubitemsAvailable.jsx new file mode 100644 index 00000000..1c97f0b5 --- /dev/null +++ b/apps/kitchen-sink/src/components/common/NoSubitemsAvailable/NoSubitemsAvailable.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import "./NoSubitemsAvailable.scss"; + +const NoSubitemsAvailable = () => { + return ( ++
Board is empty
+Please add items or select other board.
+++ ); +}; + +export default NoSubitemsAvailable; diff --git a/apps/kitchen-sink/src/components/common/NoSubitemsAvailable/NoSubitemsAvailable.scss b/apps/kitchen-sink/src/components/common/NoSubitemsAvailable/NoSubitemsAvailable.scss new file mode 100644 index 00000000..ae9f178a --- /dev/null +++ b/apps/kitchen-sink/src/components/common/NoSubitemsAvailable/NoSubitemsAvailable.scss @@ -0,0 +1,6 @@ +.no-subitems-available-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} diff --git a/apps/kitchen-sink/src/components/context/ContextProvider.jsx b/apps/kitchen-sink/src/components/context/ContextProvider.jsx new file mode 100644 index 00000000..d51f5d73 --- /dev/null +++ b/apps/kitchen-sink/src/components/context/ContextProvider.jsx @@ -0,0 +1,42 @@ +/* eslint-disable react-hooks/exhaustive-deps */ +import React, { useState, useEffect } from "react"; +import mondaySdk from "monday-sdk-js"; +import { getAllBoardItemsQuery } from "../../utils/boardUtil"; + +const monday = mondaySdk(); +export const Context = React.createContext(); + +const ContextProvider = ({ children }) => { + const [state, setState] = useState({ items: [], updateItems: () => {}, isLoading: true }); + useEffect(() => { + monday.listen("context", (res) => { + if (res.data.boardIds.length === 0) { + setState({ ...state, isLoading: false }); + } else { + setState({ ...state, isLoading: true }); + monday + .api(getAllBoardItemsQuery, { + variables: { + boardIds: res?.data?.boardIds, + limit: 50, + }, + }) + .then((itemsResponse) => { + // ----- GETS THE ITEMS OF THE BOARD ----- + setState({ + boardId: +res.data?.boardIds[0], + boardName: itemsResponse?.data?.boards[0]?.name, + items: itemsResponse.data.boards[0].items.map((item) => { + return { id: item.id, name: item.name, isLoading: false }; + }), + updateItems: (state) => setState(state), + }); + }); + } + }); + }, []); + + returnNo Subitems Available.
+{children} ; +}; + +export default ContextProvider; diff --git a/apps/kitchen-sink/src/features/ArchiveSubitem/ArchiveSubitem.jsx b/apps/kitchen-sink/src/features/ArchiveSubitem/ArchiveSubitem.jsx new file mode 100644 index 00000000..67509174 --- /dev/null +++ b/apps/kitchen-sink/src/features/ArchiveSubitem/ArchiveSubitem.jsx @@ -0,0 +1,65 @@ +import React, { useContext, useEffect, useState } from "react"; +import "monday-ui-react-core/dist/main.css"; +import mondaySdk from "monday-sdk-js"; +import RenderItems from "../RenderItems/RenderItems.jsx"; +import { Context } from "../../components/context/ContextProvider"; +import CodeBlock from "../../components/common/CodeBlock/CodeBlock"; +import Instructions from "../../components/common/Instructions/Instructions"; +import ActionHeader from "../../components/common/ActionHeader/ActionHeader"; +import { getSubitems } from "../../utils/subitems"; +import { archiveSubitemsConstants } from "./ArchiveSubitemsConstants"; +import NoSubitemsAvailable from "../../components/common/NoSubitemsAvailable/NoSubitemsAvailable"; + +const monday = mondaySdk(); + +const ArchiveSubitem = () => { + const [subitems, setSubitems] = useState([]); + const [, setSubitemsBoardId] = useState(); + const { boardId } = useContext(Context); + + useEffect(() => { + getSubitems(boardId, setSubitems, setSubitemsBoardId); + }, [boardId]); + + const handleArchiveSubitem = (subitemId) => { + monday + .api(archiveSubitemsConstants.archiveSubitemQuery, { + variables: { item_id: subitemId }, + }) + .then((res) => { + setSubitems(res.data.archive_item.board.items); + monday.execute("notice", { + message: "Archived!", + type: "success", + timeout: 3000, + }); + }) + .catch((err) => { + console.log(err); + }); + }; + + return ( +++ ); +}; + +export default ArchiveSubitem; diff --git a/apps/kitchen-sink/src/features/ArchiveSubitem/ArchiveSubitem.scss b/apps/kitchen-sink/src/features/ArchiveSubitem/ArchiveSubitem.scss new file mode 100644 index 00000000..e69de29b diff --git a/apps/kitchen-sink/src/features/ArchiveSubitem/ArchiveSubitemsConstants.js b/apps/kitchen-sink/src/features/ArchiveSubitem/ArchiveSubitemsConstants.js new file mode 100644 index 00000000..3c5ac239 --- /dev/null +++ b/apps/kitchen-sink/src/features/ArchiveSubitem/ArchiveSubitemsConstants.js @@ -0,0 +1,20 @@ +export const archiveSubitemsConstants = { + archiveSubitemQuery: `mutation ($item_id: Int!) { + archive_item(item_id: $item_id) { + board { + items { + name + id + } + } + } + } +`, + archiveSubitemInstructionsListItems: [ + "Get the subitems from the board", + "Get the subitem ID", + "Use the mutation to archive subitem", + ], + archiveSubitemInstructionslinkToDocumentation: "https://api.developer.monday.com/docs/items-queries", + githubUrl: "ArchiveSubitem/ArchiveSubitem.jsx", +}; diff --git a/apps/kitchen-sink/src/features/Confirmation/Confirmation.jsx b/apps/kitchen-sink/src/features/Confirmation/Confirmation.jsx new file mode 100644 index 00000000..f611efc5 --- /dev/null +++ b/apps/kitchen-sink/src/features/Confirmation/Confirmation.jsx @@ -0,0 +1,63 @@ +import React, { useState } from "react"; +import "monday-ui-react-core/dist/main.css"; +import mondaySdk from "monday-sdk-js"; +import Button from "monday-ui-react-core/dist/Button"; +import AttentionBox from "monday-ui-react-core/dist/AttentionBox"; +import "./Confirmation.scss"; +import ActionHeader from "../../components/common/ActionHeader/ActionHeader"; +import CodeBlock from "../../components/common/CodeBlock/CodeBlock"; +import confirmationConstants from "./ConfirmationConstants"; +import Instructions from "../../components/common/Instructions/Instructions"; + +const monday = mondaySdk(); + +const Confirmation = () => { + const [confirmed, setConfirmed] = useState(""); + const [count, setCount] = useState(0); + + const handleConfirmation = () => { + monday + .execute("confirm", { + message: "Random question?", + confirmButton: "Let's go!", + cancelButton: "No way", + excludeCancelButton: false, + }) + .then((res) => { + setConfirmed(res.data.confirm); + setCount(1); + setTimeout(() => { + setCount(0); + }, 2000); + }); + }; + + return ( ++ {subitems.length > 0 ? ( + handleArchiveSubitem(+subitem.id)} + actionButtonContent="Archive me!" + itemsData={subitems} + /> + ) : ( + + )} + + + ++ ); +}; + +export default Confirmation; diff --git a/apps/kitchen-sink/src/features/Confirmation/Confirmation.scss b/apps/kitchen-sink/src/features/Confirmation/Confirmation.scss new file mode 100644 index 00000000..654fe87e --- /dev/null +++ b/apps/kitchen-sink/src/features/Confirmation/Confirmation.scss @@ -0,0 +1,12 @@ +.confirmation-container { + width: 100%; + + aside { + padding: 10px; + } + .confirmation-content { + display: flex; + flex-direction: column; + justify-content: flex-start; + } +} diff --git a/apps/kitchen-sink/src/features/Confirmation/ConfirmationConstants.js b/apps/kitchen-sink/src/features/Confirmation/ConfirmationConstants.js new file mode 100644 index 00000000..c137cb16 --- /dev/null +++ b/apps/kitchen-sink/src/features/Confirmation/ConfirmationConstants.js @@ -0,0 +1,10 @@ +const confirmationConstants = { + confirmationInstructionsParagraphs: [`Opens a confirmation dialog to the user type 'confirm'`], + confirmationInstructionslinkToDocumentation: `https://github.com/mondaycom/monday-sdk-js#mondayexecutetype-params`, + confirmationInstructionsListItems: [ + `Call execute Monday's sdk method with "confirm" parameter sending the message content, buttons text.`, + ], + githubUrl: "Confirmation/Confirmation.jsx", +}; + +export default confirmationConstants; diff --git a/apps/kitchen-sink/src/features/DeleteItem/DeleteItem.jsx b/apps/kitchen-sink/src/features/DeleteItem/DeleteItem.jsx new file mode 100644 index 00000000..7b8a13e1 --- /dev/null +++ b/apps/kitchen-sink/src/features/DeleteItem/DeleteItem.jsx @@ -0,0 +1,63 @@ +import React, { useContext } from "react"; +import "monday-ui-react-core/dist/main.css"; +import mondaySdk from "monday-sdk-js"; +import deleteItemConstants from "../DeleteItem/DeleteItemConstants"; +import RenderItems from "../RenderItems/RenderItems.jsx"; +import { Context } from "../../components/context/ContextProvider"; +import CodeBlock from "../../components/common/CodeBlock/CodeBlock"; +import Instructions from "../../components/common/Instructions/Instructions"; +import ActionHeader from "../../components/common/ActionHeader/ActionHeader"; + +const monday = mondaySdk(); + +const DeleteItem = () => { + const { items, boardName, updateItems } = useContext(Context); + + const deleteItem = (item) => { + monday + .api(deleteItemConstants.deleteItemAndGetUpdatedBoardItemsQuery, { + variables: { itemId: +item.id }, + }) + .then((res) => { + updateItems({ items: res.data.delete_item.board.items, boardName, updateItems }); + }); + }; + + return ( ++ + ++Playground
+ + {count !== 0 ? ( + confirmed ? ( ++ ) : ( + + ) + ) : ( + "" + )} + + ++ ); +}; + +export default DeleteItem; diff --git a/apps/kitchen-sink/src/features/DeleteItem/DeleteItemConstants.js b/apps/kitchen-sink/src/features/DeleteItem/DeleteItemConstants.js new file mode 100644 index 00000000..b8d61962 --- /dev/null +++ b/apps/kitchen-sink/src/features/DeleteItem/DeleteItemConstants.js @@ -0,0 +1,21 @@ +const deleteItemConstants = { + deleteItemAndGetUpdatedBoardItemsQuery: `mutation ($itemId: Int!) { + delete_item(item_id: $itemId) { + board { + items { + id + name + } + } + } + } + `, + deleteItemInstructionsParagraphs: [ + `This mutation allows you to delete a single item. After the mutation runs you can query back the remaining items data as shown in the querying items section above.`, + ], + deleteItemInstructionslinkToDocumentation: `https://api.developer.monday.com/docs/items-queries`, + deleteItemInstructionsListItems: [`Send mutation query with the item id.`], + githubUrl: "DeleteItem/DeleteItem.jsx", +}; + +export default deleteItemConstants; diff --git a/apps/kitchen-sink/src/features/DeleteSubitem/DeleteSubitem.jsx b/apps/kitchen-sink/src/features/DeleteSubitem/DeleteSubitem.jsx new file mode 100644 index 00000000..0fb2faf9 --- /dev/null +++ b/apps/kitchen-sink/src/features/DeleteSubitem/DeleteSubitem.jsx @@ -0,0 +1,68 @@ +import React, { useContext, useEffect, useState } from "react"; +import "monday-ui-react-core/dist/main.css"; +import mondaySdk from "monday-sdk-js"; +import RenderItems from "../RenderItems/RenderItems.jsx"; +import { Context } from "../../components/context/ContextProvider"; +import CodeBlock from "../../components/common/CodeBlock/CodeBlock"; +import Instructions from "../../components/common/Instructions/Instructions"; +import ActionHeader from "../../components/common/ActionHeader/ActionHeader"; +import { getSubitems } from "../../utils/subitems"; +import { deleteSubitemsConstants } from "./DeleteSubitemsConstants"; +import NoSubitemsAvailable from "../../components/common/NoSubitemsAvailable/NoSubitemsAvailable"; + +const monday = mondaySdk(); + +const UpdateSubitem = () => { + const [subitems, setSubitems] = useState([]); + const [, setSubitemsBoardId] = useState(); + const { boardId } = useContext(Context); + + useEffect(() => { + getSubitems(boardId, setSubitems, setSubitemsBoardId); + }, [boardId]); + + const handleDeleteSubitem = (subitemId) => { + monday + .api(deleteSubitemsConstants.deleteSubitemQuery, { + variables: { item_id: subitemId }, + }) + .then((res) => { + setSubitems(res.data.delete_item.board.items); + monday.execute("notice", { + message: "Deleted!", + type: "success", + timeout: 3000, + }); + }) + .catch((err) => { + console.log(err); + }); + }; + + return ( ++ + { + monday + .execute("confirm", { + message: `Are you sure you want to delete the item ${item.name} (This item will be actually deleted from you board)?`, + confirmButton: "Delete", + cancelButton: "Cancel", + excludeCancelButton: false, + }) + .then((res) => { + res.data.confirm && + monday.execute("notice", { + message: "Item has been deleted successfully", + type: "success", + timeout: 10000, + }) && + deleteItem(item); + }); + }} + /> + + + + ++ ); +}; + +export default UpdateSubitem; diff --git a/apps/kitchen-sink/src/features/DeleteSubitem/DeleteSubitem.scss b/apps/kitchen-sink/src/features/DeleteSubitem/DeleteSubitem.scss new file mode 100644 index 00000000..e69de29b diff --git a/apps/kitchen-sink/src/features/DeleteSubitem/DeleteSubitemsConstants.js b/apps/kitchen-sink/src/features/DeleteSubitem/DeleteSubitemsConstants.js new file mode 100644 index 00000000..fdfdd2ab --- /dev/null +++ b/apps/kitchen-sink/src/features/DeleteSubitem/DeleteSubitemsConstants.js @@ -0,0 +1,20 @@ +export const deleteSubitemsConstants = { + deleteSubitemQuery: `mutation ($item_id: Int!) { + delete_item(item_id: $item_id) { + board { + items { + name + id + } + } + } + } + `, + deleteSubitemInstructionsListItems: [ + "Get the subitems from the board", + "Get the subitem ID", + "Use the mutation to delete subitem", + ], + deleteSubitemInstructionslinkToDocumentation: "https://api.developer.monday.com/docs/items-queries", + githubUrl: "DeleteSubitem/DeleteSubitem.jsx", +}; diff --git a/apps/kitchen-sink/src/features/FilePreview/FilePreview.jsx b/apps/kitchen-sink/src/features/FilePreview/FilePreview.jsx new file mode 100644 index 00000000..11d313eb --- /dev/null +++ b/apps/kitchen-sink/src/features/FilePreview/FilePreview.jsx @@ -0,0 +1,138 @@ +import React, { useState, useEffect, useContext } from "react"; +import "./FilePreview.scss"; +import mondaySdk from "monday-sdk-js"; +import RenderItems from "../RenderItems/RenderItems.jsx"; +import DialogContentContainer from "monday-ui-react-core/dist/DialogContentContainer.js"; +import Dropdown from "monday-ui-react-core/dist/Dropdown.js"; +import Button from "monday-ui-react-core/dist/Button"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faTimes } from "@fortawesome/free-solid-svg-icons"; +import { Context } from "../../components/context/ContextProvider"; +import filePreviewConstants from "./FilePreviewConstants"; +import Loader from "monday-ui-react-core/dist/Loader"; +import CodeBlock from "../../components/common/CodeBlock/CodeBlock"; +import ActionHeader from "../../components/common/ActionHeader/ActionHeader"; +import Instructions from "../../components/common/Instructions/Instructions"; + +const monday = mondaySdk(); + +const FilePreview = () => { + const { items, boardId } = useContext(Context); + + const [fileColumns, setFileColumns] = useState([]); + const [selectedItem, setSelectedItem] = useState(); + const [columnId, setColumnId] = useState(""); + const [assets, setAssets] = useState([]); + const isFileColumnsExist = fileColumns.length > 0; + const [isLoading, setIsLoading] = useState(false); + const [selectedAsset, setSelectedAsset] = useState(); + + useEffect(() => { + // ----- GETS ALL BOARD COLUMNS ----- + monday + .api(filePreviewConstants.getAllColumnsQuery, { + variables: { boardIds: boardId }, + }) + .then((res) => { + const fileColumns = res.data?.boards[0]?.columns.filter((column) => column.type === "file"); + setFileColumns(fileColumns); + }); + }, [boardId]); + + const handleFilePreview = () => { + monday.execute("openFilesDialog", { + boardId: +boardId, + itemId: +selectedItem.id, + columnId, + assetId: selectedAsset, + }); + }; + + const handleColumnIdPick = (column_id) => { + setColumnId(column_id); + setIsLoading(true); + monday + .api(filePreviewConstants.getAssetsQuery, { + variables: { board_id: +boardId, item_id: +selectedItem.id, column_id }, + }) + .then((res) => { + setAssets(res.data.boards[0].items[0].assets); + setIsLoading(false); + setSelectedAsset(); + }); + }; + + return ( ++ {subitems.length > 0 ? ( + handleDeleteSubitem(+subitem.id)} + actionButtonContent="Delete me!" + itemsData={subitems} + /> + ) : ( + + )} + + + ++ ); +}; + +export default FilePreview; diff --git a/apps/kitchen-sink/src/features/FilePreview/FilePreview.scss b/apps/kitchen-sink/src/features/FilePreview/FilePreview.scss new file mode 100644 index 00000000..5741d3ee --- /dev/null +++ b/apps/kitchen-sink/src/features/FilePreview/FilePreview.scss @@ -0,0 +1,58 @@ +@import "../../styles/animations.scss"; + +.upload-file-container { + .loader-container { + height: 50px; + width: 50px; + margin: 0 auto; + } + .buttons { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + margin-top: 10px; + .ellipsis { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + width: 115px; + } + } + .overlay { + position: fixed; + justify-content: center; + align-items: center; + display: flex; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.7); + animation: fadein 750ms; + z-index: 3; + + & > .popup { + background: #fff; + border-radius: 5px; + min-width: 60%; + min-height: 12%; + max-width: 80%; + max-height: 80%; + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + + & > span { + margin-bottom: 10px; + } + + & > svg { + position: absolute; + right: 16px; + cursor: pointer; + } + } + } +} diff --git a/apps/kitchen-sink/src/features/FilePreview/FilePreviewConstants.js b/apps/kitchen-sink/src/features/FilePreview/FilePreviewConstants.js new file mode 100644 index 00000000..9cc6481b --- /dev/null +++ b/apps/kitchen-sink/src/features/FilePreview/FilePreviewConstants.js @@ -0,0 +1,43 @@ +const FilePreviewConstants = { + uploadFile: `mutation ($column_id: String!, $file: File!, $item_id: Int!) { + add_file_to_column(item_id: $item_id, column_id: $column_id, file: $file) { + id + } + } + + `, + getAllColumnsQuery: `query ($boardIds: [Int]) { + boards(ids: $boardIds) { + columns { + id + title + type + } + } + } + `, + + getAssetsQuery: `query ($board_id: Int!, $item_id: Int!, $column_id: String!) { + boards(ids: [$board_id]) { + items(ids: [$item_id]) { + assets(column_ids: [$column_id]) { + id + name + } + } + } + } + `, + filePreviewInstructionsParagraphs: [`Opens a modal with the preview of an asset`], + filePreviewInstructionslinkToDocumentation: `https://github.com/mondaycom/monday-sdk-js#mondayexecutetype-params`, + filePreviewInstructionsListItems: [ + `Fetch the board id from context.`, + `Select An Item.`, + `Fetch all the file's column of the board and choose one.`, + `Query The assets ids from a specific column sending board id, item id and column id`, + `Call execute Monday's sdk method with "openFilesDialog" parameter sending the board id, item id, column id and asset id.`, + ], + githubUrl: "FilePreview/FilePreview.jsx", +}; + +export default FilePreviewConstants; diff --git a/apps/kitchen-sink/src/features/GetSubItems/GetSubItems.jsx b/apps/kitchen-sink/src/features/GetSubItems/GetSubItems.jsx new file mode 100644 index 00000000..bd182582 --- /dev/null +++ b/apps/kitchen-sink/src/features/GetSubItems/GetSubItems.jsx @@ -0,0 +1,141 @@ +import React, { useState, useEffect, useContext } from "react"; +import "monday-ui-react-core/dist/main.css"; +import "./GetSubItems.scss"; +import mondaySdk from "monday-sdk-js"; +import getSubItemsConstants from "./GetSubItemsConstants.js"; +import RenderItems from "../RenderItems/RenderItems.jsx"; +import DialogContentContainer from "monday-ui-react-core/dist/DialogContentContainer.js"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faTimes } from "@fortawesome/free-solid-svg-icons"; +import { Context } from "../../components/context/ContextProvider"; +import CodeBlock from "../../components/common/CodeBlock/CodeBlock"; +import Instructions from "../../components/common/Instructions/Instructions"; +import ActionHeader from "../../components/common/ActionHeader/ActionHeader"; + +const monday = mondaySdk(); + +const GetSubItems = () => { + const { items, boardId } = useContext(Context); + + const [selectedItem, setSelectedItem] = useState(); + const [subitemsBoardId, setSubitemsBoardId] = useState(); + const [subitemsData, setSubitemsData] = useState([]); + + const noticeNoSubitemsForSelectedItems = () => { + monday.execute(`notice`, { + message: "Selected item doesn`t have subitems.", + type: "error", // or "error" (red), or "info" (blue) + timeout: 10000, + }); + }; + + useEffect(() => { + // ----- GETS THE SUBITEMS BOARD ID AND BOARD ITEMS ----- + if (!boardId) return; + monday + .api(getSubItemsConstants.getAllColumnsQuery, { + variables: { boardIds: [boardId] }, + }) + .then((res) => { + const subTasksColumn = res.data?.boards[0]?.columns.find((column) => column.type === "subtasks"); + if (!subTasksColumn) { + setSubitemsBoardId(); + return; + } else { + setSubitemsBoardId(JSON.parse(subTasksColumn.settings_str).boardIds[0]); + } + }); + }, [boardId]); + + useEffect(() => { + if (!selectedItem) return; + let subitemsIds; + // ----- GETS ALL SUBITEMS IDS OF THE SELECTED ITEM ----- + + monday + .api(getSubItemsConstants.getAllSubItemsIdsOfAnItemQuery, { + variables: { boardIds: boardId, itemIds: +selectedItem.id }, + }) + .then((res) => { + if ( + !res.data.boards[0]?.items[0]?.column_values.find( + (column) => column.type === "subtasks" || column.type === "subitems" + )?.value + ) { + noticeNoSubitemsForSelectedItems(); + setSubitemsData([]); + return; + } + const subitems = JSON.parse(res.data.boards[0].items[0].column_values[0].value).linkedPulseIds; + if (!subitems) { + noticeNoSubitemsForSelectedItems(); + return; + } + subitemsIds = JSON.parse(res.data.boards[0].items[0].column_values[0].value).linkedPulseIds.map( + (linkedPulse) => { + return +linkedPulse.linkedPulseId; + } + ); + // ----- GETS SUBITEMS DATA FROM SUBITEMS BOARD ----- + + monday + .api(getSubItemsConstants.getAllSubItemsQuery, { + variables: { boardIds: subitemsBoardId, subitemsIds: subitemsIds }, + }) + .then((res) => { + if (!res.data.boards[0]) { + setSubitemsData([]); + return; + } + setSubitemsData(res.data.boards[0].items); + }); + return function cleanup() { + setSubitemsData([]); + }; + }); + }, [boardId, subitemsBoardId, selectedItem]); + + return ( ++ { + setSelectedItem(item); + setColumnId(""); + } + : null + } + /> + + + {selectedItem && ( + ++ )} ++ +{ + setSelectedItem(); + }} + /> + Please select a file column + + { + return { value: fileColumn.id, label: `${fileColumn.title} - ${fileColumn.id} (Column ID)` }; + })} + placeholder={"Files Columns"} + onChange={(column) => handleColumnIdPick(column.value)} + /> +
+ {assets.length > 0 ? ( +{ + return { value: asset.id, label: `${asset.name} - ${asset.id}` }; + })} + placeholder={"File Name"} + onChange={(asset) => setSelectedAsset(asset.value)} + /> + ) : ( + columnId && assets.length === 0 && !isLoading && "No Assets To Show..." + )} + {isLoading && ( + ++ )} ++ + ++++ ); +}; + +export default GetSubItems; diff --git a/apps/kitchen-sink/src/features/GetSubItems/GetSubItems.scss b/apps/kitchen-sink/src/features/GetSubItems/GetSubItems.scss new file mode 100644 index 00000000..95caaf7c --- /dev/null +++ b/apps/kitchen-sink/src/features/GetSubItems/GetSubItems.scss @@ -0,0 +1,37 @@ +@import "../../styles/animations.scss"; + +.get-sub-items-container { + .overlay { + position: fixed; + justify-content: center; + align-items: center; + display: flex; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.7); + animation: fadein 750ms; + z-index: 3; + + h3 { + padding-left: 7px; + } + + & > .popup { + background: #fff; + border-radius: 5px; + max-width: 80%; + max-height: 80%; + position: relative; + transition: all 5s ease-in-out; + + & > svg { + position: absolute; + right: 16px; + cursor: pointer; + top: 10px; + } + } + } +} diff --git a/apps/kitchen-sink/src/features/GetSubItems/GetSubItemsConstants.js b/apps/kitchen-sink/src/features/GetSubItems/GetSubItemsConstants.js new file mode 100644 index 00000000..70c40441 --- /dev/null +++ b/apps/kitchen-sink/src/features/GetSubItems/GetSubItemsConstants.js @@ -0,0 +1,57 @@ +const getSubItemsConstants = { + dropdownPlaceholder: "Board Items", + getAllColumnsQuery: `query ($boardIds: [Int]) { + boards(ids: $boardIds) { + columns { + type + settings_str + } + } + }`, + getSubitemsBoardIdQuery: `query ($boardIds: [Int]) { + boards(ids: $boardIds) { + columns(ids: "subitems") { + settings_str + } + } + }`, + getAllSubItemsIdsOfAnItemQuery: `query ($boardIds: [Int!], $itemIds: [Int!]) { + boards(ids: $boardIds) { + items(ids: $itemIds) { + id + column_values { + value + type + } + } + } + } + `, + getAllSubItemsQuery: `query ($boardIds: [Int!], $subitemsIds: [Int!]) { + boards(ids: $boardIds) { + items(ids: $subitemsIds) { + id + name + } + } + } + `, + getSubItemsInstructionsParagraphs: [ + `Subitems are special items that are "nested" under the items on your board. They can be accessed via the subitem + column which can be added either from the columns center, or by right-clicking an item to expose its dropdown + menu.`, + `All subitems are stored on an entirely separate board from their parent items. The subitems column on the parent + board contains the IDs of the subitems linked to a given item. As such, in order to find your subitem board ID, + you will first need to query the column_values() of the parent board's subitem column. This will return your + subitem IDs which you can then use to query the boards field to find your subitem board ID.`, + ], + getSubItemsInstructionslinkToDocumentation: `https://api.developer.monday.com/docs/subitems`, + getSubItemsInstructionsListItems: [ + `Get the subitems board id.`, + `Get the subitems ids of an item.`, + `Fetch the subitems data from the subitems board id by the subitems ids.`, + ], + githubUrl: "GetSubitems/GetSubitems.jsx", +}; + +export default getSubItemsConstants; diff --git a/apps/kitchen-sink/src/features/GetUpdates/GetUpdates.jsx b/apps/kitchen-sink/src/features/GetUpdates/GetUpdates.jsx new file mode 100644 index 00000000..5db49316 --- /dev/null +++ b/apps/kitchen-sink/src/features/GetUpdates/GetUpdates.jsx @@ -0,0 +1,91 @@ +import React, { useState, useEffect, useContext } from "react"; +import "monday-ui-react-core/dist/main.css"; +import "./GetUpdates.scss"; +import mondaySdk from "monday-sdk-js"; +import { getUpdatesConstants } from "./GetUpdatesConstants"; +import RenderItems from "../RenderItems/RenderItems.jsx"; +import DialogContentContainer from "monday-ui-react-core/dist/DialogContentContainer.js"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faTimes } from "@fortawesome/free-solid-svg-icons"; +import { Context } from "../../components/context/ContextProvider"; +import CodeBlock from "../../components/common/CodeBlock/CodeBlock"; +import Instructions from "../../components/common/Instructions/Instructions"; +import ActionHeader from "../../components/common/ActionHeader/ActionHeader"; + +const monday = mondaySdk(); + +const GetUpdates = () => { + const { items, boardId } = useContext(Context); + const [selectedItem, setSelectedItem] = useState(); + const [updatesData, setUpdatesData] = useState([]); + + const noticeNoUpdatesForItem = () => { + monday.execute(`notice`, { + message: "The selected item doesn`t have updates.", + type: "error", + timeout: 10000, + }); + }; + + useEffect(() => { + if (!selectedItem) return; + monday + .api(getUpdatesConstants.getUpdatesQuery, { + variables: { board_id: boardId, item_id: +selectedItem.id }, + }) + .then((res) => { + if (res.data.boards[0]?.items[0]?.updates.length === 0) { + noticeNoUpdatesForItem(); + setUpdatesData([]); + return; + } + const updatesData = res.data.boards[0]?.items[0]?.updates.map((update) => { + return { id: update.id, name: update.text_body }; + }); + setUpdatesData(updatesData); + return function cleanup() { + setUpdatesData([]); + }; + }); + }, [boardId, selectedItem]); + + return ( ++ + + { + setSelectedItem({ id: item.id, name: item.name }); + } + : null + } + /> + + {subitemsData.length > 0 && ( + ++ )} ++ +Subitems of {selectedItem.name}
+{ + setSelectedItem(); + setSubitemsData([]); + }} + /> + + ++ ); +}; + +export default GetUpdates; diff --git a/apps/kitchen-sink/src/features/GetUpdates/GetUpdates.scss b/apps/kitchen-sink/src/features/GetUpdates/GetUpdates.scss new file mode 100644 index 00000000..640be54c --- /dev/null +++ b/apps/kitchen-sink/src/features/GetUpdates/GetUpdates.scss @@ -0,0 +1,37 @@ +@import "../../styles/animations.scss"; + +.get-updates-items-container { + .overlay { + position: fixed; + justify-content: center; + align-items: center; + display: flex; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.7); + animation: fadein 750ms; + z-index: 3; + + h3 { + padding-left: 7px; + } + + & > .popup { + background: #fff; + border-radius: 5px; + max-width: 80%; + max-height: 80%; + position: relative; + transition: all 5s ease-in-out; + + & > svg { + position: absolute; + right: 16px; + cursor: pointer; + top: 10px; + } + } + } +} diff --git a/apps/kitchen-sink/src/features/GetUpdates/GetUpdatesConstants.js b/apps/kitchen-sink/src/features/GetUpdates/GetUpdatesConstants.js new file mode 100644 index 00000000..66211e1e --- /dev/null +++ b/apps/kitchen-sink/src/features/GetUpdates/GetUpdatesConstants.js @@ -0,0 +1,28 @@ +export const getUpdatesConstants = { + getUpdatesQuery: `query ($board_id: Int!, $item_id: Int!) { + boards(ids: [$board_id]) { + items(ids: [$item_id]) { + updates { + id + text_body + body + creator { + id + name + } + } + } + } + }`, + getUpdatesInstructionsParagraphs: [ + `monday.com updates contain additional notes and information added to items outside of their columns. + The main form of communication within the platform takes place in the updates section.`, + ], + getUpdatesInstructionslinkToDocumentation: `https://api.developer.monday.com/docs/updates-queries`, + getUpdatesInstructionsListItems: [ + `Get the board ID.`, + `Get the item ID.`, + `Fetch the updates data using item ID and board ID .`, + ], + githubUrl: "GetUpdates/GetUpdates.jsx", +}; diff --git a/apps/kitchen-sink/src/features/Menu/Menu.jsx b/apps/kitchen-sink/src/features/Menu/Menu.jsx new file mode 100644 index 00000000..ae47a9b1 --- /dev/null +++ b/apps/kitchen-sink/src/features/Menu/Menu.jsx @@ -0,0 +1,51 @@ +import React from "react"; +import MenuButton from "./components/MenuButton"; +import "./Menu.scss"; +import { menuOptions } from "./MenuConstants"; +import { useHistory } from "react-router-dom"; + +const Menu = () => { + const history = useHistory(); + + const renderSection = (name, subOptions) => { + return ( ++ + + { + setSelectedItem({ id: item.id, name: item.name }); + }} + /> + + {updatesData.length > 0 && ( + ++ )} ++ +Updates of {selectedItem.name}
+{ + setSelectedItem(); + setUpdatesData([]); + }} + /> + + ++ ); + }; + const renderHero = () => { + return ( +{name}++ {subOptions.map(({ image, background, name, location }) => ( ++history.push(location)} + /> + ))} + ++ ); + }; + return ( +++Get started with ready-made examples++ The monday.com examples Kitchen Sink offers a variety of examples ++
which being displayed easily on your board ++
+ {renderHero()} + {menuOptions.map((section) => renderSection(section.name, section.subOptions))} ++ ); +}; + +export default Menu; diff --git a/apps/kitchen-sink/src/features/Menu/Menu.scss b/apps/kitchen-sink/src/features/Menu/Menu.scss new file mode 100644 index 00000000..0e5f204b --- /dev/null +++ b/apps/kitchen-sink/src/features/Menu/Menu.scss @@ -0,0 +1,69 @@ +.menuContainer { + display: flex; + margin: 0; + padding: 0; + width: 100%; + height: 100%; + align-items: center; + flex-direction: column; + padding-top: 70px; + width: 1100px; + margin: 0 auto 0 auto; + position: relative; + + .heroContainer { + background-color: #595ad4; + color: white; + border-radius: 8px; + display: flex; + height: 258px; + width: 100%; + flex-direction: row; + justify-content: space-between; + + .heroImage { + height: 258px; + width: auto; + margin-right: 40px; + } + + .textContainer { + display: flex; + flex-direction: column; + padding-left: 50px; + justify-content: center; + .title { + font-size: 32px; + font-weight: 700; + line-height: 38px; + } + + .subTitle { + margin-top: 12px; + font-size: 18px; + line-height: 30px; + } + } + } + .sectionContainer { + // margin-top: 30px; + display: flex; + flex-direction: column; + width: 100%; + margin-top: 60px; + + .title { + font-weight: 700; + font-size: 24px; + line-height: 32px; + color: black; + } + + .subItemsContainer { + display: flex; + flex-wrap: wrap; + margin-top: 32px; + margin-bottom: -32px; + } + } +} diff --git a/apps/kitchen-sink/src/features/Menu/MenuConstants.js b/apps/kitchen-sink/src/features/Menu/MenuConstants.js new file mode 100644 index 00000000..6212bf3d --- /dev/null +++ b/apps/kitchen-sink/src/features/Menu/MenuConstants.js @@ -0,0 +1,146 @@ +export const ROUTES = { + MENU: "menu", + GET_SUB_ITEMS: "getSubItems", + DELETE_ITEM: "deleteItem", + OPEN_ITEM_CARD: "openItemCard", + UPLOAD_FILE_VIA_SDK: "uploadFileViaSdk", + UPLOAD_FILE_VIA_API: "uploadFileViaApi", + STORAGE_API: "storageApi", + WORKING_WITH_SETTINGS: "workingWithSettings", + CONFIRMATION: "confirmation", + NOTICE: "notice", + FILEPREVIEW: "filepreview", + PAGINATED: "paginated", + UPDATE_SUBITEM: "update_subitem", + ARCHIVE_SUBITEM: "archive_subitem", + DELETE_SUBITEM: "delete_subitem", + UPDATES: "updates", +}; + +const BACKGROUND_COLORS = { + RED: "#FB275D", + YELLOW: "#FFCC00", + GREEN: "#00CC6F", + BLUE: "#009AFF", + PURPLE: "#A358DF", + LIGHT_BLUE: "#00CFF4", +}; + +export const menuOptions = [ + { + name: "Working With The Board", + subOptions: [ + { + name: "Delete Item", + location: ROUTES.DELETE_ITEM, + image: require("./assets/delete_icon.png"), + background: BACKGROUND_COLORS.YELLOW, + }, + { + name: "Open Item Card", + location: ROUTES.OPEN_ITEM_CARD, + image: require("./assets/table.png"), + background: BACKGROUND_COLORS.GREEN, + }, + { + name: "Upload File via SDK", + location: ROUTES.UPLOAD_FILE_VIA_SDK, + image: require("./assets/sdk_icon.png"), + background: BACKGROUND_COLORS.BLUE, + }, + { + name: "Upload File via API", + location: ROUTES.UPLOAD_FILE_VIA_API, + image: require("./assets/api_file.png"), + background: BACKGROUND_COLORS.PURPLE, + }, + { + name: "Storage Api", + location: ROUTES.STORAGE_API, + image: require("./assets/storage_api.png"), + background: BACKGROUND_COLORS.LIGHT_BLUE, + }, + { + name: "Paginated Data", + location: ROUTES.PAGINATED, + image: require("./assets/pagination.png"), + background: BACKGROUND_COLORS.GREEN, + }, + { + name: "Get Item Updates", + location: ROUTES.UPDATES, + image: require("./assets/item-updates.png"), + background: BACKGROUND_COLORS.RED, + }, + ], + }, + { + name: "Subitems", + subOptions: [ + { + id: "GETTING_SUBITEMS_OF_AN_ITEM", + name: "Getting Subitem Of An Item", + location: ROUTES.GET_SUB_ITEMS, + image: require("./assets/subitem_icon.svg"), + background: BACKGROUND_COLORS.RED, + }, + { + id: "UPDATE_SUBITEM", + name: "Update Subitem", + location: ROUTES.UPDATE_SUBITEM, + image: require("./assets/update-subitem.png"), + background: BACKGROUND_COLORS.YELLOW, + }, + { + id: "ARCHIVE_SUBITEM", + name: "Archive Subitem", + location: ROUTES.ARCHIVE_SUBITEM, + image: require("./assets/archive.png"), + background: BACKGROUND_COLORS.GREEN, + }, + { + id: "DELETE_SUBITEM", + name: "Delete Subitem", + location: ROUTES.DELETE_SUBITEM, + image: require("./assets/delete-subitem.png"), + background: BACKGROUND_COLORS.BLUE, + }, + ], + }, + { + name: "UI", + subOptions: [ + { + id: "CONFIRMATION", + name: "Confirmation Pop Up", + location: "confirmation", + image: require("./assets/confirmation.png"), + background: BACKGROUND_COLORS.PURPLE, + }, + { + name: "Notice Pop Up", + location: "notice", + image: require("./assets/notice.png"), + background: BACKGROUND_COLORS.BLUE, + }, + { + name: "Files Preview Dialog", + location: "filepreview", + image: require("./assets/file_preview.png"), + background: BACKGROUND_COLORS.RED, + }, + ], + }, + { + name: "Working With Settings", + subOptions: [ + { + id: "WORKING_WITH_SETTINGS", + name: "Working With Settings", + location: "workingWithSettings", + image: require("./assets/settings.png"), + background: BACKGROUND_COLORS.YELLOW, + }, + ], + }, +]; diff --git a/apps/kitchen-sink/src/features/Menu/assets/api_file.png b/apps/kitchen-sink/src/features/Menu/assets/api_file.png new file mode 100644 index 0000000000000000000000000000000000000000..099310701fa6e3f2723c0de44dfd6c8fabd5950c GIT binary patch literal 2365 zcmZ`*dpHwp8-Lh_F^5FPau~H0VJsaM8Kx1N6fdGo%&`zUI23bA)S4&~twhM@l%Z5i zUZ*G`+
pk5{v69CF?NUXcT1iG5L#Zd|XVHkm3EC6f2?56-YhXY`S1^^)) z0ENKJYFk6Wh43jWG6{gk*ERG78a&X#DOi94D}nI+Oxpzq(GW|Dx#+l v3$ z0K{;XBon)f{hzaJPTSebHP$ZX=UZ&ru#?NZD)BzHlp%5i;lIB5p?9`yLX>#+J5KeH zSf!zSgKO6hDacC7b`dSTuV;&Rxb1**Oi9<^)lqUCi52 X85$f8-;EYGJA&z66LNPSsos;I3_rjH-~98Pday*sqn-diK2VWnwa!;h{^966G$ ztwu%)<2}6#ky|3h<(soE9J1+o&zj~m`<3{#qQv3)VCRzyB?8l(bF*!c+i$5`9VVT; zWbf>b9{e1NWx6*--Mcq HLvwHrh^V-oVD ziC4Uq4gvVgCq|qEWB3tuLZ(d2)h-wxIGwxd+Ol4Pgp-t%xZAC64(siDg)4pTJa)tQ z%L%kiW=D gGBJ2&tR7z6u&T$C~iGUrcq547lkjOg1GtDXMvuhWWgLo*7@YIJz$|8#dLB zWdrh!iQ4664er#tesPK9)Z1KJ$ornehz0W+t+8mB4iZ?z!?(hPCUyEpxCj>5O`(Zc zh#kiSa->-#o#)p^UW9rrZ9$mvx@^!ZLum&T=atOx+=R0~mROCA7l#krQjh#*;xXEo zeA$aES$Yb#zXQjQmPo|JV5xEe0o_I`z%#0AFubHP8sXO~ENuu}f-GlM8*Vz*Xps^8 zR^2<7AoVUjf3hQ)$8JGgFSi7~f;JoUX7*Xr(LYdoh@Ni}%cZDDV$RE~h%c6bEwas_ zlailH&d)O+w#?>fPtA!)sWL}jCY8||;SdnjoMFJtFz6?|H8`!p4Q>PXMy }@v >vb!Bdx?$6muk%Q;mfMyw2F&wemMedvO$E|B40m!W`(
~5?%DdmmU_j?c1Ww8AU2GO0MPF zih|CyiH|-3*!gO!vAY3J==F~^n^6JV4!V|tv0hh5)i9w0e=Cupf#&u5;hlDW$DGR8 zx9Q?+S@X_ tj$>ALI<<8M@j61%HDpEd*M3ahkJ@)7@M9R7uM i<`YO#{e%pwm zsZ2bVsjNOw<@fkMQ}e`6q14ZzF37|gReCC}@}xuHHYoC}+dl#P)`S0zEfY$CC9$*| zda_IJCe=%N}`(yUJ+`^#N&=%ssb(wTy)u#)G?3K;) zF05sYHZi<2?*8OdEQKFDb<^#`hvr>z?4?PR2O;aZv5iq~LBk=T|4pHQ!Gbiz>G)wP zyZFRA5A;<_x^k^hPPTBzn`k$LwIP~F&FU;pKOmO@O-xH)1E@XT4sDVI0;fE#X-g9F z_AL{a@I)^?xEYTtlpOi<-5;lr@ovAZ#%HaOC9`7bwAxfN!FOVNh`D2khg%4p;2uO5 z0MN(j>uKZmY2)?m^z;dOdkAcqsH6XyG<2UqMAs}TBS-$s8y5>FG9Wch?3|M zv_?xpEA|fRMJQFiynnvmIp6ok{anv=p6fc#Irq8Gxvw-w`-{9>Vq5?K@LF4$UuI(b zKPAA%JYf|WRwl3onAn*BKz%0n;Z=4fmquD$wgZ5uvrJtw037_IUj_gS6aZHJ06@P0 z03cz-gg*?K4=mSgFPZ}Y{*jy(lW~Swx!++TQ^l;!VADb7g#&GEXTh<+3F3tbJB3Z9 z0sz;FwYiDY-EZq9p0|WQNc9kjUp*^HM6XkoR_Rvlmbg5}N6A(hCuI|#j+{ArZN~zc zAs865Z6_I{w3PxziLwc)gH0TfJOz2OmLzUj3$atlO;3st-`~X?^9Ofy7%ep|t!<3M zDhx{VH=dQ0?0-hZl}vqF^8%8({h*>e;D15V>0vbz!ckbn6pxRWF+=xfpQhF(^gOmc zCrMSao-{RPoEjhQezR~Gxz($Pp=)Y9C(zX!s%^1?2Nl)ns{;lYy0)+;jpdcOWHgVG z$``eidk-JhyqQ1S9t?;YP`Z3t?YDURX!@Q >^QLL7bJce$m26u$c-RC?Z9>*t}MiBAPreNkh;8m-#%g vuidB8uCNIK&|1bVvkq6%&qXZVpR{*W%g(sJ55hPev^iD zcmNcNdKPOGb-vvX)P^d3PavRe|CDHWQ*4N~+ItZDQ(WIXFP}~!MpRxvQM^wbj5S%e z9yMpOW=TjO+zT;#-%+H|YJz{CdU-jiDTso(m`Wz&2nt^w{(`?Cc(fXh527&5+C78? z&Cd7-NFI`a@w}ZbE|`*4;Xn^fSy}o)>`ehTG&y10lLLX$m=~Vw?L9qGbfxs6Xwduv zK}58H^tWi~c6QDTapmwC(}Jp-qMXHg!`?r2bY}XqY!5e+7_Mw>zayr5q~2ZfP6D+Z zZ(Hz5^7y7qbkhWRh%V=u-{$0s#p5eaTz2L7RLEKkW4& 0=1TP~W&ay@8om8H zx9zu}zdHc@%)8!}3s}b9#GT)8{-<|~i*;1ROBAr64QMd++tsH +@D+C>`C%@Z-UxKg&p~IZIsMTgIu4H{1z)DbsjI$_OG# _psA 57@ay)X=wd~7Cu*X z{pRY>^CvTxG|DoK!4V*rws)z~NmatCi8gSO4 (I5;_aCPToA8r2%BOjEOef+C~e$BTqynTF36~c19pdG5;K= zP2|k%NKhnfG^BMUuM)DArg%#Mi_WTdTdiZouvX(w_Stp*jvx+do5cQl9U9xtz=fVc zy#IEmGL=A({=)x}eaQQFy3&GC1I1;UEcmOdn)~Ng|Hz=Wd3YtJG;Pe3<*_D^KhP=U zsN1)av-@K&ci1gJ(b vuMQxgpvlZO;$8tz%LUD_#j-QJ;BWLa(VYMFh zbccMG-yL<0lNW9eOIRJ#B#%^4_?w&KylYWp2Y7RJIfKr@2Y1x)`y|@X_|?@Gj(qdu zo5?dhoR3&Zi4*dpd{=1~cimg!ahF8goF#Dqg3$1TW&j6)>DNadbC!Lc6BkTA7Bum7 zJ_idGcl-nArH8UwTXV;!N~N6h7JJMc7}SgIN-R>ajYoTtD6a=5GqA<_wKekn{TBA6 z16|Lu5yl6V-V)vfbCFX#hmTj-+ZebiZY3pY4WFhdcfyFnfw6b|ORibw?CXXmzie5) zwlW6Goh&`G>Hb0gWd6sGWm-WDRE0fbx3iQjQ!0O~+&1cqgUD4wK5-+liBHQPEvJuu zy{1oh@!Y6<_0|-x>KYX++kE%7#}D2yZY5=zO!2>|cvSGq@FqL0K39Pi#ktL^_}N+W z*z1cdHCV~W_i;;8_o~jX8B$uMb1=8FiMp|bD?i_}Z0^@rKu{byZ255~pCE5~{$*V2 z)6BZFCa#s0(K<2v`0nmnUBA?Pzs7f#S42h?1BQJEu9nFeJ8mhB-k-3|w!ux^b6^mU zBm48Gc5;SkAs-6ccG6?!c&kArhmkh0(ZA;+4mCPYxwIRw9WTpy0!Fq)FEjk1MlnC1 zQ}4#?uoU~g+`<4#nO7rjoG8z~aPd(C{+lHDc+tKc>}>a_e_eU$Y|+YGJ;TkD?$P&Y zZ&L2FD5A0rOf#>675c{Dg3e3wmO13g&D6Zm)Uygyr%<9a0aOTZQ!EDh>Lar7`Ww0X zIx~$gSw)Q}4i@&N60lS3>b{iMNr9TTL^o&CNl%n1zsqe&4+M`Ek$-|<{(Xp~Gbv$Z zPYuV7CWnwbD|6lKZJFra@@>=$%NHBk@X($;QLWKpSk}td^~i)2^V!>*MJV}2 ugAf)4P=MD6cNV$hPKS zn&p?Vf;h3l%$@@8x2DJuB~rbP;g#l+gG2T45G4ENX bnVUNUWd2{Y_>IIz1w}iS#Q}yE zr>q-uHShj_1O*Mh&T$;->?%E{DhK~{X^$GKYlADgfHSHnOReI+H^s7r2bZa+uwd7@ z!W-xP1VF2+@qf=%Ee;M={E& a)$8HQ z8@u6_i52{?dCKc};#WKm=$)FU{O-@W!mh>7fRhFLt13=W0~c%;FA%oKqlc}1Z(q{4 zW9RS)k=ESeu|!4DxaJ2>Eq7lu ck5LEB12=Nn2PDMg^6}XuM4=HfysM zv={#!EB^_ZWbY$>wV07Yq`vePGY2c6E!@!8ucH0+k>UPK0JNZ5nrcv(8dTFsQ(Iq0 sS6@q06$;gdLJgDj&i~60g1R1bBl3S6>?Y$MFb#mUg}r&LsbAuM0KL4My#N3J literal 0 HcmV?d00001 diff --git a/apps/kitchen-sink/src/features/Menu/assets/confirmation.png b/apps/kitchen-sink/src/features/Menu/assets/confirmation.png new file mode 100644 index 0000000000000000000000000000000000000000..8f3122862d989efc9a24af98de7d4d1def4eed8c GIT binary patch literal 5710 zcmai2c{r5c+kXtgSjrY5Yt}4d3?XA5OZFvO$QWa1#8|V8EZHgBD0^WnAyFudQOJ@# zONx^0Tge(;eYfBH$NT-g&viY|Irq8l&*%P}bKlpw&U5084YldP9AE$d=yi28O;20g z@0a?_>9<1}*?Zbtz#^=$W*BE|Akr5Ns5xOA(Y(4|NEfsz8tD{#>n&Od0LTU1%&o9i z2KtI9jF%+xw~u6ym(M900F+dMe2^#)G?v#9?c(MQ=ihkQ#?R~K1n0MuHGmlSXrNu) zbV7X5W+8^=s1Og7f)l@rGOtpQ;wga_8jIu&^78cdQw)Oh|G}$x+W$Q)#n1bP3)Tb9 z|EDM`17ltdj4zs3P7)%4f (qktyJE3Eic(U6fq{~NGLjfy7b$541qCSxR0;}}IQ5Y53--n$ zgCxBD1pa2wMEjw9-F&ca7;oO+j7Ud}KNik^s`Sq(c=`N8>+Sc~GMz4%R1nffN?H=~ zdrE&h8W{X{S1+%By#27I=>O>bKZ*U!gMH9arf5Hmzc1=Ean1t2L-{Cb_@a?mjITKc z iLVIKX#yb56EBmk5-__vd za~fF_?dukRcGB|2c=7%*Yelzz*K(Tif79|O*6H81$owl->Qs!>@7(^cT>m|ET0p MaQ_VbRYSoS=h!w$ {nN0HimwNon*h-4RH=>uBfc6d|6?}e=iQb__f4*ghC6TyFdnUq9CR*0vi91 zp(9@bCY0^BusTRPFcy}S+QOSHO--*ctx Y4frnp-;dz>dRln5d!62(+g7;&@ZO0!^M49*aDCc!rw)anx|NrR_%)hJ*C zNdjEX 1`X&-fePv4X z!Dq@4t!hTxo-w8A$O{vU|FfHQG|Ye*EBe~t%%g;v+rvNHnXwt#97z7zIn5z(JU`G< z-t}TIWAf}C%jQJ~L5B+tdP(^=nFn({=|+X@05ojAO&}TahFW!q!0A9hRei&zb?yY} z993_X+b8R?*HB^KQ {+3a?yp=fj~9osAWcQI)%bj ztVA;C9CRAg9p7EgHF!3Sn-r2wHBD(%L^!li-KZVAs?Sl#F>9?F`1!@!HYW%6CAe~} z+tT=AnxXs4s*dp5dm1919p<2E3U&&4yS*a`qAJlshJvf?J UTn9Sbf<)TG5AQj%CH9{? z7e7rgAwcNcAhRoeHIBv&;RNqZj5sz2UQt~VS;k5` L=xJZlz`o%5Vl(p(u%d3AaB+)J*{bz*+D}GZ}7+ySgiQAC9ZWnc4QN^UXr)F4S`R z;5tJSJ;~~6#6Zh7`-v*^G>Ql0n~amfy-K4O#*TlG>bGc!wdrouLH3I@D`XepwzuVG zWwW^tgl9R4i8yXtDXz|B^lY!(qt8o-=5g+9msXJLm(QQPmh1$d1e(&38G)tRsM9|C zUUaWS;y!W+iBr%~z*03@ZU6`5t%FJ@XNdwhQ_0;5H95*M;rn*L8Ct2Mrn|vM2;2rs zaySmAuBWQN^Qnk}rsERP9+8)2lIOqM9(W9MeMrQ36pUm$@h(-rWb-j@-=lfGR~TFO z445NG=B9vRn{970ZZ`OMr8+U=O4Tv#_NKai{i3*~1a3LzL1j(uh93aW<>dngX`9pC z4*4K%r&HlAKhWKsxk@?SoV4#xMjPGvi{9r3^+)3K c#$sF`#l%w$e^f zheS=}Tz$iEU$9E-W@_m1eSy+oot%NYF_@SGlrUifdR4x!Iv74gSy(oBE(|s=L-sJn zqZ2gDgxi<9cHfKW#!S<=+^kHJg)?6V-0$}U49gqr+u&r?$(7PnlNK6p1{E|&cC=er z90$7hMl%EJRn|pYMcKu-?wg%ZIJYKWWjzLG))dmsYFiwSX)@y^NqRSnMO8FJPIfOj zv?jNb4*PjKOvGj`q;>TK>Ruw7t-LiSi>9JZmJyG~V^DFM`Md5tZQ? q@uY=bA!4<`9nT1`?qsR>sC8O8alV{#m? zdnA9>zB@+%ur92h2wMXxm#kjWr{nkKHZKO&2J%!}OHI7)vFCIq!@m)`UFOW(6>hPU zMS*tpCuY_U%Eko vF-#us-HWaO-)u|Z9+~zi)|ME=Jz@3~>_5jr)|k@LO_kuA zJTbNZSwzkvR&WoMLj0NvydYm^RC=H-J9n6a)9_4 pe-IZpqq~pu39T;Jm_db*1 z%xC6N^_q8jAvOMzV%>)JNT>O9_W@T-UPL=-vc_Wihp;>O!&ex}WH&t*ICe^@_O<;H!IuGxWTQJTAK|3^#=Ff(ECyBJztZ z=O*62-P$*jGmO1gVK%7kv2%n{S4~WZFl@PT9C{se&RZAUpp;3#7PD*V#ff4~D+|4F z39$2%+m((rGZ#FA{ldGuLPKjNN%#{&uYVa0r;=YcX7+i(U=tP8NIJP%*GzSxwH>TB z1zb2q)teNpPZ o3NfI9 zOa7 aEY;-xNy3ChA2ibRdd?D-pPG8 zW%fNo4p|vjz%rkM7y}I3j-|gH)zPF&v7j_?mL!jvvAved!v~;>*~)J6h0LDxh$E$) zBWgB}wlj9)_^{OYf=-sF@H~aM+WyDCqNv`^@NW?VISc9hKo^Z6L!z#Sj~Y+ddp{IY zIn(Z6b4YmCAuO?~v_$%4 AEZ>e>T8WB)39k!lT6v$Xo zN1&G7&-v?{LFh)OGK#d2pEB^wZFyUKrAVgR%C_d5R_=0x%gh`p<=u;j2bl#aSuzp8 z?N*))7uG%`p5yTudD8lIb?NGhDE&?K{)tB6ax2@2wy3c2w5lIk++)W&Y~LPb9yJy2 z%(edlds+y(^};$|bf|%ed;v93aAxL>IO*Od_B+qt7$Ov=PPZ~SSlC9mB4aua)0P<^l6oraX< zW5+tSDe(JaAGWhIFl2t}`{PCV^4;(H <-(mG(O^a!I* zZ>P)bW68`XJ@9;Ty~8z;ZD;l#_J;8UZf%a0mD@9`t#zgEFIlu_wp;|05#D+}$>pV- zWh+|HsgEpg(m%V~xwT=qV|V=lsbR?W%8+S+41^T3UzVO;7D@ayWDzQwPEW=O(<)D) zY6TO8+CkZ_@P{u#KK8&8OT&Zpqx#N`%8XOMC;U^J2w|(%JhhYBuew5oWswg|1c7Ox zN%qG)4)p!HW?b*s Z| KfK`bFX?w2K}mkYs|-uCe1= zDPX)eaGw3^5AN5`MDs~GOh!HAJ~3(0P}y#HWEVcf$i!-Cu?pXzWFHgn+1`L#d2**R z<#~FUSH`Y-)K8C<*Ro{WYbsv*df8BNpA=I2$TfDG#IND0Z=U;v^SgK;nv5nFR={pi zv+wdaa{`}24L(YyI<~^ieArO$j!l$h+T>{(s-JkeuMF?BegFap*z=s(9-^kC*HG9h z$9ZRO%( f_-Dk1Ew{pdlh8oTJS6pPu`|>baZgC zZB5#-E=?^M^HP=Ow?B*jRC0+fH +rbyK| zRo|~H&u5;J22>?=kKoQsH0HoNm&|GP2Wnzhb25*_v~-Kb?lsR8I{adA?~?&JhgYPb zT<;6fPM)`Tj$)_8QOPgAa!Zbe-3oKGV(Tl2+TX lzGQEtg;IaE$I{+=}V z!!gH1;?n{MjTog;Wni0bj?a)H)Di=~x^44}YKorp^?YLAF@O4NF+I}cG2$lvYq_JI zwxN=wcazZ3Wfg0G^rdE$2f6O~{$~#BLc+1jwSvmBoDW}vAcoz%r8Zr&DLjwy1>8)j z+4{`)FD<@nZPJFk=hj#MrdM|Nm%x{!s*;k7JQ&|Q+C{NfRqMnkH}!od6^LVVCw_$q zeHin-8~ fQdPZFmvyz-&%Upuy_(19FG20mVX =;2Mr=k3y*0 zI6d*|aOXzbz#>P^?3Q>(D2=*80iBX +Qrw}n#_(t$p+JeIcsz;4KBVEU z;FP(0uH6Iw U?8sjVQ-%4F#y#7XJlKLkX^_Nz9(-+0TkQyd_y zWvFD6IgsZvVoql%vZY_VEwY?#i1ION?(#Iiyl{~V8eYiZUQg~FZUgVKGgC+%V+^P? zO$)y K@fc*Uy1s!{hRji!d`x2|D?^(Cy((PD` z;&QHK-6qI*-w8{I2^2v3Ruo10@Hwmm#}#WE#5)dfuEV(y>(|>{Y05onsO&6Qchsj~ z@;cnnNbnfk6tY!hQ0e;21-9Fq6pb|D!nelZKS}h+?pF% q`SGB-kYJiXn#N-*Da2ZDRSBrN?J|Rdh83j^K&F%$K>R z3cZnF5X9g4cK-8~B#Tx9=E+sg7zD7|cw&-J$iU?x9Vk`me%MsI;Xc1WU8Qzw5B+3L zVJGeBAq{@W>E(3@>kU}+z#>9A_P*C0 ~$fi$>?WC9+Bm}R77V5oCWpl*q4e3gOz zJ^I6X_e4-s7h0G}=1UMT?ujx_i8zlaX=9QFBo|qi!Nowxe{<^aO|ZGsw5&VFaejfn z4}3%8?sdSEB>G9 C^#AL}JrX oQgLfFqj62b@d0EEm;jcwQ@ z{Yp_N`$bd)bFu;Tz~C?d)T9dR-{NBTaxSJeH~{V{v32(W*!`tn03a9+z#;(vWDWpQ z#DeC_`s@#g^Cc5w0G_5OXtFy#qN#l#n`{+3Y2FtG*ac6J84k-c$HyV0r%<_nssI39 z5i?^9{?6FSBL^QCR=WEj(5Dz(+92s`s)px~Fpc+mCk-bJ7I}V85;qduB{-8r&)g^E zLGnaXjL92l{^%S}Xo|>dlKevlVbLTN=kOEayvk4BK?PK@FEj?R44zAwTWyDggl-iu zBdc5VHv6}kq3$8-dL%hs@_$Boaw3v5;O|hvmJe|e|786~^m}vS+jy#^Qw#Tv*St5H zq5BMloc^bM^d)~Jju?ISEpNb|HjB0u(ugeV>a>-?_OVKNsX8jCJhby(b=YIzqAVkP zfBzi94Q=Oh? lKi)h|@c}OT{dvE8zB?xSmiwy&Q7B*Jspu%t}#!-jzb>T;gjb7JE4 @vwLeT z0&>|I(Ishe(_!6{Gas_vc@KFMHrbgDRpf6ue&+q_qP46p(Ds|6oev5^_vaKJI&6pO zd3u_ ?5f8uz_o^Pmbu@3s5_e%1v$}< zwk}Bhb^m2)x{(NMu{Qa@ 7C=mOC+a`c@zs>f_s3js(_i>et_>2oK5WOPFVa*sLRFBd3N{*~vHy#Y)5kFY?-5)4Mb zrA*_o086%MZQZ&NCsAJ?IRxW41k0McW4|*^RDhTw R{vXJyPg2*Y)e9SFaWtpYew}-vAwpBOPP)lozI|7x%#I!l#ZrZOWrG_r4Iw zPLBdwEOjIsxN{Y;c2!XVx(^aAbDX08ETqnK{!^36`Q-f6%f=i&B{&OKgjYAw(E^vU zfR+B`!GjocnUP^A{z`0anLh_0wR&x4SXqpx2Q61_b#=jqw5FlF7sWWrj)|e)|KGT* z0jJ){ZS>p2U4~lYb$x|b)_4LC?J9{Nk*}ei U0;%JR4_Xrn>!Zi?SVD>Y40yWB~`pgi_34x8V3<>unSzoSPN z9iJwl1P1h73LS<=`CMx+7vvwZGw5_x{{h07CDV74>Yl$*2#OOKkF$@>5y{WroG)E# zIs2HL2sRk5ACK)3D#8o&4`=cAWM$1TS?{DYU{|5=VP(A#-DcxLB-Vh2#)K_gc~-!@ zZC^I-Z(x*eNjPOuuyDs7#nK&|I$ozF=WxBqV7F(dY9ruf)knWEd6G4QZnu5!$dL}C zxcx8C;b&JlWW%YE6>ePiBGjW^kPU{hA+v7J{yl3C`q7s)8NTbK9}D9U{E^)_y>(nI zRE)vjwz^PM^*p( TXviA3j?YW0 zRpIZYS(1K9h<)0S71}n##;z)7OZ $6}DA`;Z zOn!eWwl6M 6EJ!+Z@`Tp8~aZi^DT zCQ0u}k90Y-RCgvg41rG< ^ye( 68|8yi3quBmYbjyMC?z-ydCY9o;6v{m77BpiOETJ6_a^Dl$1pR1R9 W*#9 i0DkS{3! literal 0 HcmV?d00001 diff --git a/apps/kitchen-sink/src/features/Menu/assets/delete_icon.png b/apps/kitchen-sink/src/features/Menu/assets/delete_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..a2ea91347d866c7232c0112fd786e19ed9f88b87 GIT binary patch literal 4181 zcmc&%d03KZzeaG%j`<_87{X#*obo1f?{!1hu5n%oG8YLO?)q$t^2WQ)e<27finj zvqsCxCCxpz%q-Dda4W~mCDGhUQxCRyHRsHCzH`3w$KiV3_kG^yxu4&1|CaY6+{VgW zRb`V3002-uU}1V#_9V-$2W#YI_dv$c8QEh6+rpj;0IXD7y5s;!DH{L)g>`h29nX$P zz))Bo+GHxrg{JM}!Iq%`0IabOn@l-P woMHeXtXLBO9Oywf nEiNs|ce`||}$Fd48Z@;(9jjx3K zEt*U6Wz%4XXsV*nf8N^WJy0{S7W_7)#UTP9=L;?sYV#tif?)ovhQE?*ag*yg6XH zm*kW3PUyiVwQQ_e ZYXY^6Cmr`!ZHE0V4vP@jpT_7cX8qlWsSh z7OniC&*osuuU=*cLy&Tju&sBG{+9m3ku^CR&W$An+w23LdxZ6!eHC0ZFskj(zn>g% z8CyE1G4rN#AO%-i%$MSdX3(opSAI~d<$=`Wz`!^#;Qu<(+Tc@f%O9}i#BNuSM}*{q z{fAFhPmY@tVyq~I_Z&q|w=D$QQlF4)g&ol`xm(ard6Hm4sp}zlLrS}jaC=EgmP=s{ zOXOq-Fi2zqY wg!@CM>cDynb+LHa4z%!*oF?MdlC~SU!v)kq2$F@!ZCTVeTF+E z=Il>S7D2)gfH+&|UA&rjfL{zDZ(7s;OKtt>q(W(FPrQv^a3(QXbkjjS(LiON*YJzq zUR(n=E27Oqy~3Yd5vpQ!6gD`@pOAoR8;I7q_V#$mUCX9fzqBES-%!MPP@0L7zXR>Y zL#&nV)KpoxTG>ER@H(xKso^d9lXrXb*9y#{fZfNL*%@(@_xjbGD*~eZM>enz0d2`Y z+dNvYoY!rcyDQ^?dhPbt1)5d{1T?y=WNjKnsp$E~3B0fGuB6uY>`;7bcJT1VT Y&a5C8Rk}44&5lKTKR4v zRe$w#!Tj%)iA<_x7`+$oP~lJy!h3t)tbMT~@$|{luP$c9Nb+0n=qseHmH&RMfmf;} zShU{ETw5Wj8E8~`if_{Jn|3M8bc)T(Y#E (3aLi%~#ea16rq|KXr-UG(`Ik+>Pwf#Et>Rs)ska zJ8He*o&WgCzODoSFc?i{0ma)CPMtzY?!Med-)%ESse!gDnVzZXystFYY>PjX{xKTe zS9+PTx49Wu#0O~|1z0Zj7Np;95)?B6 RQ|KQtG_a?`&YOVT1D2`FjD?f4kmhM3AKc@3jUH?Mb_XK{K|CSd9N>o$@R!1q! zb~ g8t8{ykO=j6B|X@AoAgk62MkdWVb`9x8+G7@^c zmgJy@^Y+~+E}q$`CV3p>^Q(B!_66nGRg`t%?Dm)X;}r?=94!s4kWAZc;*!g4zzVK? zXJC<3QO;RKF>#^9C~!p4#cw3X)Ft^tY2dCv#x9XD% qqY z^z14XK7LF(R;j~ITWmAlO4G!K=YNPDIkxYKk)UCsaYxYFj;7~;JtyQlebk;`(}d4^ z#+LQ16&iw2t{) 7T#vH8=%Iej7Xb0&)`6+?Qk!=+Ob0}{%jEV{;8 z$Q 0x!0x;AET{efox;hz0J~;Z71Q {Qm46T!yN#aqi?B4UEkuV?Ds1f11Mh?QKc{)uS7X^NgE#_p1};t`2Pb zd3Gk-^L0%@qqB8Ypo@R~<4eK|RFYybWqt6$HUIAeucFc18n#dZad+Kw$xPxs?I(=+ zXjDltj~stDoflp+9Us0?a=$qBb B z`u*VnohM^-`{MYo)9la*f3&3{KN?5;XxMYoIKF!_rS67P^2CGU#=I;-`Z+5CGk7qj zegrujF`ql|EPXmKql8>olJDqxOS7eY9BFJ{CCFyDS(Cc(gz1r21dtL^c>7+T({}ya zcCl`u)S)Jgd+Fw@Q1eWLcw!>asO!hXBRMypJNX0UVy$)0ppR8e&fX?8KBf3cyK37e zu1+laIZZu6Z@Nf-w<%U>Dy#o@Upsw|$)EIh>_)paM2uXrt4}&oviY2)xyc{bA9T~C z3E?;9MmiG*-;#rJ8jm8Th6iBGSWSrh7XAxJ?~R1l37>jF&hJCRs}_7va5|Fxs-oXA zegqUT>fJdud3D?+Apx|XUt`>O>?p9W#&C4BE0Ch8DjqtLS3VplXj_o=a>G3HlE_tC zsYym%PKvd5IjkYKCVXpadybYBs`wH36Ze<#HsO0gymmM?>m>=5b)tMS^kjHdGENeW z@^k?jE)IJ64-}0a{IE{WxiGJ&?mWiz2iwJkK=J0eNMUk4$)-$)xkcPto=I3=->g?p zXg3JlBEDNB$bKJi>VDsz6V5YzUDvL~MS4PmdV`C*vrZ$U*qxzaguD;UeFd7 U?3gveOUCee?CKM)7 z-(=A<1;4i)(b}P)euvnudh26aCRWY9PSZhfVHJ@GZCH&e^q1lYN+r=F$?qhBPft~U zw>fX3m^`N-ZNd{aFP2Y!;E7UkhmU9CpXyLT6%${5yfbY!t)wQ7k7>Z-7cAb|Awa%C zjw? &fb5SK#%>^hxvl zhmqR9094Ebuo?duMU3~DKKT&$tQ?61(6j )#+19fBX;Zw=&J%=X~}*07$U~od5s; literal 0 HcmV?d00001 diff --git a/apps/kitchen-sink/src/features/Menu/assets/file_preview.png b/apps/kitchen-sink/src/features/Menu/assets/file_preview.png new file mode 100644 index 0000000000000000000000000000000000000000..4865cfb905db4258a17cec20efd393013f936bde GIT binary patch literal 4129 zcmZ`+S6GwH)_s#e=%GkadQm`Xz(TKIs3J{7q=l-KP^3rzfglPfRg~VODgr@JLJvXd z9T5mkuu!CED4_@beE-!s7w2Nnn*GdL` dFzf)Cv-tZH}&Y2=!KZMMb=yWg8+b) z(+Htsg`U~W4@GfJ@brvCxO*nZ$jT dY4c45=g7OT4?Dz)uu z#74s+nIS3SWe)11r}x#?VR|*eom!7#E&52*t=OcTo;Hf+EA4z6Y@Pa@zyFPL@rj9Q z;Gd@Z!z}|%`voGFlAMfBb&JgZ6WIIUZ ZtA~2?J%>Aq4voTgOa`E%T@WKv z5&ZQ>PV}Ms^xxhwZs5_nwaa|V0Jb!|DJ;FV6Oqk}=1(8?nn=5=vi~ww*e=GH%g)}K zdyKqZCoP)^6L9l3cLu`uJdWG;Hr>}R@-4i;pd#`%!JJqF7428&tYLs-lVWNb*s-Y& z {R4oc8XPa6Y4R#vZ(~%1RC;k*RS)d^6X?`W67~9KZ~xIl=W0MHDqS?1u>cyY zJCu`i!&)KGgQTAnAH1$_Rc5@XHd1hDrtyWsa9Oq_eO@r|Ysu3!=}t{Q_Ps3mMVc pll^ xpIKS>TF5#yuu-rEy(La*uFt!-9fEQ>r z6LP7jD0c;Z{bI9gw!#fRWGK;j&Hrzm;-Osk_3xZt%A>VkiZ8ON12#U6F|u(A7Q^!) z1MezxU;F?Ft78a*6pn#jVcT}W_@v Jjkp? 8@A%#Wf_G9=1=jsaRf_N2LTLYw0l-2bITX{ q9vfa#gTs+DYK&unxnh5xa#lU4iFl8$O+WrV2L_;1#$g z3s*3^L1SLDM-9FL{v#U8it`g-Lx{S{G?8I>h{;G!^RV+^NkU>a^P2zbwxojNz3c%i znE&i~eN#dMior >lwr(K166J;!X`mvf!ou!HXH$Mz8XRY& #?GhQaWNa=!FMoJQ*j^&E?e}9# z%JFi6fG34@v RvGZruuhIo(ZZac{bMq(xEa|S)+*au+Ywy3&b!&;u9d>BKahxwii%^TCAE; zn&_2bZIeWeLqXP2eA}w&aNZVD-&q9i3T>R0&!Nw{+UM9%0@jI?ny)zLzxy`ov(Exd z)6Fnc-~dn;Bz?77>=B}5hLVIwu?|iu5GXP1O#RBZeS>5GKr&9pOn-<@<2aMY-#0S| zCVXav%;GL&M(v2hBbv{iUh2kpj#tS-s~wn1OS9I`U824U4RTkVr|a@Gm=e!B k(4WLEr(0ML5hOo48Hsh`Vf zR5%dQ)fta`1eZbj`uI;Z$op> N(_Smr+!XMV4Dt)JWjO?VqG<=g|ua?x+^xh zoRCnh(h( 4VBMv z>jJBL&>O; r2yTuAS3*DHQQ|MNHgbKLBBi67De=NDog8K)`M4I+e-zffGzI?)rM zO_P#^QP^t(Ke}exd%C>@sy}kJ>a%QWoE;Z_18E))Mz)3RPsUXyJSVgSUFK=gdkn!S z`C$v!xOiqg_v-bx9L}cVJjg}AxTJlbCU@91aDzmVat@59g%Sm$A#``JuX?uX-iH9} z`Lp#m>{y0l<_9lxKYL`y9`S??y>pYoq#0sLlK>uqJ)S)eRzI%7htJlEef^Ngz6ey? z{zeV*$T2%Q{_M7O?hd6Pcu&%p7RLJUD#08Zx)R9SgRD_B85jP*2$grHlp1*Cp|k4G zNmaNCGV)>WbwX3%9=~wo`F4Mkg}Q*i>L<030hT~Iwsev}J!J9j-NoQFVrEy?!_h7k z^O}OQ ?7{t8GxiE;iRbwi&FcUIO}K1OMox8Nd5 zO5b=dWzjhiDy?b#X1QB$@Q_;ma0GOxO!ZIW=kan|TVWBvBK2eF@@4-CkkA-;{3zer z{sJic@*LuPlZ=Gf(eTcYduP`(uC}`BFTeV5ZY17o7-ZDMlqV&uMeWte`UMe~Ftc?T zBWbfCEJi>R<-WCo%Zp_p-#^NbZzyBRke||wqBP42q^3HxDu49ha}v9i<*CB{3n y z1&KGlT?suo`S1 n(x+@qGvKgM6CJfmr_zBtE)mtWH)K=aRi&_M nW~fGS(QhkwSaPIhK=JMg=|C#n+&(X! zGEyj?9GblZ>mTCU=8<8`Rr&cdW|BuhEq3?xGh7SvS;*U_Da~Wo gl!`!Pcs^jeZb0G-dv!9l8*P-- +~E%i-aL@{V8rP>ic_O&Me;e{yA(8hNaW;%kG zhdx|o>nus>zi#Le^jFRf(xN;|`+oYvvvL!59x;Q*O5WY-N`6P}3t{@KA(oLx5b_#( z7+Lh*CE@f;gOAP-*S(ZaDkxH2`)VvpmsD !5SXAvsPu!1 z`Ii8T wC>VXYiV)`PE8Wk>9bfB8 Ys x325F=-cZf9LU%JqJWWW@ 4|Ys-fROe&d|#y3vxQl2af0t< _?4Yt4e*D(UmoM2afUPnfhmI6XVPWr=Qm^tr1_; z-g@J9r>7O~#GG|ax^Z)uQG*Wlswae5`WrjiOA2kBf!cX0|MV%fGk7(1$K>J?LzR`$ zper5h;@Y^uFN(!MT%fK#v^ID>-n!alW3FjCZR5Fr HETRekBRx|DR@dqA{{fDKyb=Ha literal 0 HcmV?d00001 diff --git a/apps/kitchen-sink/src/features/Menu/assets/hero_image.png b/apps/kitchen-sink/src/features/Menu/assets/hero_image.png new file mode 100644 index 0000000000000000000000000000000000000000..d42ff7e735714b81b4a02bccef8f7abfd41f8dda GIT binary patch literal 47942 zcmV)9K*hg_P) CbyMMWSWAVoz*CMG8T|Nj~q8cIq^F)=Y592_?{Hx(5X5D*X)6ciQ~ z7O$_b6%`dcJUlNiFAon7UteE4J3o< Ej~ zc-Wz$-K3@BtE=dBcGSnn>%_$Ar>N$>z~%V(`oY5J`}+L-{{F?s(0F;;|8;f$|NmBn z>vnh6PNTx9spX fNJ&j}X06ZB*V^0R z#);%#kmXRP#vspzwzuZy=IL=%wq#h(OHFj5q03v1-}3VIzwz8fZM%t$%KwRp_@k(k zl+jmMxpZi=!IkGvP>zU*+J}R~|MTjM=E1Od;e)l+VPRzK?C`m>yep2NYj4cTrt1FH zo@8ak`seA8kdytsW}~5};?MMrjk7`4n6$LnYiO98n!o?JxpsAT_}155U4*Ks&~UW8 zadNNLx$mWYUwnMJTU?oZcB0<+?(B=1P^ZVPuCm6esiU&y|KPa&%7uZT?1`M=fm}+! zn2A}JxrTnKrjmqrgxdbi&MS?d=Vp5~G+Tv!gWju`|KQ(eL^wvQrfp-tD=9ZGrI-y1 z3_&+HrMT<|1qI*8zB`erg 0A0q`P86YbVCtY-tl*y= zN>vp2q-B~WNt*O|Q6x!{7kQuOb)D6_EX#J;uIbvY>-O9Ic02vQe5$B_wtJQ)YnrCR z->z;jqe p~H z8z+0{`?cHAwK6Wh`Bvgly2@{s`5ywH?e;W3rVx%)^Ix6AxiHOnkz!l)MM40io8r%5 zfCxy7zQTx#qR8{Ir2p4RLIAMP{>^^h@w5Ga1x7o+ NN(Tld;nfc-uTV7A(Q*S6w8Ak&?oAQ$f<3jhS*fHdt>(m?SiSpX1# z`7xXxOpqr BbOKVCKo&|BeyfFVp(y zE+*a|YdD0vpq!>RzyKE53Jm}OP1|8AYrufPwXWf737o7?XnYnx;15}!o3!E>dcY6> zNb8*N?6VrdfV{P9YLNlpGxETF78u{K(_LTW&gFE!_OxaOPyBBhZ2HjntMeZrXVvLF zs=B$SyDV@JEdbByFoiIGLyxMHtj=M4I9%F8gOvycMOs0SS))7@0cm9bfEYkDCZwf= zVvvCVgC%!mjnEkH1x&E@5ExxxozLg%`Ldoubv;k_U6GS}K8Jok-8btrecHqCGs^Ty z1bhM$_b#7qAmc@ku)txv-5W{BP`ZO4+~vEx?lUlK&S{3*l~tMIBOs`#2_FdoW&-F{ zqySkUDH3d;0}}!uCtuZ83pNG=3 pK&CzJ4&*)AXjJPphEv z17&(ANW3ROeyDjD765?*eWu+q7_^v4 pw)kk~`V2mv6Y zgd9)+0GVKbLI7bP+Ytb5BM<-pwg*T2jtoz<=jD7=<9xk>4b fYCK->;}H-5Vvek>PM2BE+!nQLR_Dg`4~idk_j>c&>XPYRH%i5=t`FCp_yeWx zL?=Sv>2TN{$OA0}0Va|OHj@I%!K^3YA{wL;31|eA>ai>U+?j%4PzenBq(s7+fTWlW zW|9opd~i=v+wPy94r?|&0s>0GsGtK70?>fKa2>Dq1Y(4IT@|M4BD+V_o=i2w3w)ht z#b52m{WFE%&IInjOngw>;pnfjEi9L-pgntfIWQIEig9#<2wQb0N8h16x{JQivB2SA zA^{VFrs-h*Ol09MV@iM-FC`a9IQ^7lOwczEjRZw%!$2z16j=%*6oWy{!6KEFDA0DY zAV5}oIy}W3tPBL^>lxNO!tmTvSK1bzlR6OsFu&krzML
FTE$A%5Mg*Y%pFvj^1~<}iI+6tr%nP@o2B4~#7VLyw zp}K3#bk0<)mz0bcC?1Re*C{mtV^CGpg(!hc7KJ$2ZYK*{9Z_s(04xxPJ_CUf)>K9l zoao*sWgvif0HdFcwS@)1{e-}ERu@zj+$aJgGEiu^&_$KHap&lJjDes+Zcz)2#>mF2 ztr}M}q9Q`L0o00wf|+r0a4V@HC}0N^G?EtVxIEO$B5abt5qqxBi8EFY&Im*Z2>VoA z8q5&}h|aptEeS|M+mHqf2kZ||Pft+@RssQ~90VW(pasrn%L2-=fN%qGaj{jgd%aku zun<_AEi})H_