From 524118f4b5b882e877df3e773fbe52f76af117bf Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 6 Sep 2023 21:00:06 -0300 Subject: [PATCH] revise the overview page --- .../joy/getting-started/overview/overview.md | 61 +++++++++--------- .../joy-ui/overview/order-dashboard.png | Bin 0 -> 346077 bytes 2 files changed, 30 insertions(+), 31 deletions(-) create mode 100644 docs/public/static/joy-ui/overview/order-dashboard.png diff --git a/docs/data/joy/getting-started/overview/overview.md b/docs/data/joy/getting-started/overview/overview.md index 0ad9733b242b85..1eec95261f3944 100644 --- a/docs/data/joy/getting-started/overview/overview.md +++ b/docs/data/joy/getting-started/overview/overview.md @@ -6,13 +6,11 @@ title: Overview
Joy UI is a library of beautifully designed React UI components built to spark joy in the development process.
-## Introduction - -Joy UI is an open-source React component library that implements MUI's own in-house design [principles](#principles). +Joy UI is a library of beautifully designed React UI components built to spark joy in the development process. -It includes foundational pre-built components that look beautiful by default, and give you plenty of room to customize their look and feel. +## Introduction -Use Joy UI to spark joy in the creative process of building your next app. +Joy UI is an open-source React component library, including many foundational pre-built components that follow a lightly opinionated design direction, thoughtfully crafted to ensure a great-looking UI while giving you plenty of room to customize how they look and feel. :::warning Joy UI is currently in active development, and breaking changes are to be expected. @@ -22,44 +20,45 @@ We're adding new components and features regularly, and you're welcome to contri Look for the [`package: joy-ui`](https://github.com/mui/material-ui/labels/package%3A%20joy-ui) label on open issues and pull requests in the `mui/material-ui` repository on GitHub to see what other community members are working on, and feel free to submit your own. ::: -## Advantages of Joy UI +## Why use Joy UI + +Maintained by MUI, Joy UI is an alternative to Material UI for projects that aren't planning to adhere to or use it as a base, the Material Design specifications. + +These two sister libraries feature many of the same components and similarly designed component APIs, so you can quickly start building with one if you've used the other before. + +### Beautiful out of the box -- **Ship faster:** Joy UI gives you pre-built components with a sleek and carefully designed look and feel, so you don't need design skills to ship beautiful UIs rapidly. -- **Extensive customization options:** you can customize each and every tiny piece of Joy UI's components to match your own unique design. -- **Accessibility in mind:** Joy UI components are built on top of [Base UI's unstyled components and low-level hooks](/base-ui/getting-started/), giving you support for many accessibility features out of the box. - We do our best to make all components screen reader-friendly, and also offer suggestions for optimizing accessibility throughout our documentation. +Joy UI follows a lightly opinionated design direction we've been calling Joy Design. +Meant to be simple and functional, it offers a thoughtfully crafted set of defaults that ensure your next project starts off looking great, even without any deep customizations. -## Joy UI vs. Material UI +The [Order Dashboard](/joy-ui/getting-started/templates/order-dashboard/) template below, available on the [Templates](/joy-ui/getting-started/templates/) page, uses very light customizations to demonstrate how carefully designed all components were, ensuring they work well together. -Joy UI is intended to serve as an alternative to Material UI for designs that don't adhere to Material Design specifications. -These two sister libraries feature many of the same components, and similarly designed component APIs, so you can quickly start building with one if you've used the other before. + -Try Joy UI if you appreciate the comprehensiveness and reliability of Material UI, but don't need all of the additional baggage that comes along with Material Design. +### Highly customizable -## Principles +You should feel inspired and empowered to change, extend, and revamp Joy UI's appearance and behavior with ease. +Drawing from many years of experience with Material UI, Joy UI applies new approaches to customization, enabling you to customize every piece of the components to match your unique design. -### Include only what's essential +Using Gatsby's documentation side nav as an example, the demo below shows how to customize the [List](/joy-ui/react-list/) component using built-in CSS variables. -Joy UI should work with the least amount of effort possible. -We're striving for the essential only, both in the component API and design (look and feel). +{{"demo": "../../components/list/ExampleCollapsibleList.js"}} -Components should have only what they need to do the job. -What is considered essential is drawn from MUI's experience over the years developing component libraries, as well as from benchmarks of modern API and design guidelines—especially when it comes to developing web apps. +### Developer experience -### Make it beautiful out of the box +One of the main goals of Joy UI is to spark joy in the creative process of building apps. +This is why promoting an unrivaled developer experience is a big priority. -Joy UI needs to be simple yet characteristic. -Visual attributes such as scale, size, and density should be consistent across all of the components so they live together nicely. +An example of this can be demonstrated by the automatic adjustment of the [Input](/joy-ui/react-input/) component, whereby by customizing its border radius, all components inside it will adapt accordingly, ensuring a great design and saving you time. -We aim to spark delight with simplicity and attention to detail. -You should feel like your UI looks great from the start. +{{"demo": "../../main-features/automatic-adjustment/InputVariables.js"}} -### Encourage creativity +### Accessibility -Working with Joy UI shouldn't feel stiff or rigid—you should feel inspired and empowered to change, extend, and revamp Joy UI's appearance and behavior with ease. -We want it to become your go-to starting point for building UIs. +Joy UI components are built on top of [Base UI's unstyled components and low-level hooks](/base-ui/getting-started/), giving you support for many accessibility features out of the box. +We do our best to make all components screen reader-friendly and offer suggestions for optimizing accessibility throughout our documentation. -### Prioritize developer experience +One example of this is the [Input](/joy-ui/react-input/) component that needs to have a descriptive label linked to help users understand its purpose. +Joy UI's Form Control component automatically generates a unique ID that links the Input with the Form Label and Form Helper Text components to ensure you adhere to this principle. -A great developer experience is not only about the quality of the code we ship, but also about how clear the documentation is, and what learning resources are available for developers. -We hope that every step of the experience brings you joy. +{{"demo": "../../components/input/InputField.js"}} diff --git a/docs/public/static/joy-ui/overview/order-dashboard.png b/docs/public/static/joy-ui/overview/order-dashboard.png new file mode 100644 index 0000000000000000000000000000000000000000..753e1629dced4b5d7e14fff80472296957f3b5bd GIT binary patch literal 346077 zcma&NcUV(r*gx*5R?Bd+L{h3~Q2`^%h#aa^P(id{E3zU)1q5V7K+LjL;$XzdmQ)ca z4u;5vLh^vUt-HDojoJ8QGSPwn6uL}(TYG+C`wCO&|h0M^SEg%K;R zR+O|d$!33ez>Z*`lwF$&|7y;X%l+^KNWW_rDMv=f)=Rh6_1y}sPZ9*X(#U-$Wv!~G zJVNx6g3?o6eUY0ogx7lyGh}MfXgq1)6>IaJjQ&k)ayi`tQ`^>`JDj&XxJ|odSn6o) zT1klVi?g3o|HbCV7e6XMz5)^P!J^pHMNOk$nnyIOr=mc3^p5_zYny!J;JO3KRkh-q zd2o>J4`5elWsS$;W0L3|bU<#B)xS_lhLLhyjNQpy?YPJ$&_^rvOdX%1Zu+oA@jVYI zf48EJ19rbko#^+w|7QU_1s*x}a=##{dK zYCW_xt4nPrXV?=@Rv5%wz8yA~C3ThuY}@5*)8a#SyDH^=a{A%aH-0>2_@%z<+@ @H!){C`?t9i zosy?;R<9gB#7fHvC~;c6$)&UQ;BW+rJ#)zs`j%f`ms9>)9CVQH$k_>{wxNInBpPGb zUvx20ZmV8ttin7onS-zz`sfXNH7}tX(k9p!%Wr7Gzp`NaSv5%QQkssgJ5Zd)$TGi# z6_7Q!Dn&=2AW^&)d(m}wyWN#4jklr1Jq++FJvBgjgc )84louOCq{HB|y{4TJ#G;Ek>z?6mSb_x)Pod z5>@RGmhwT*PPS)ctF?JA9ag#IFBs2@10*!fWSn)%RvER@mQAS&EpRq3)c*Vtlnz%j zqQouC@Ht3^24T!Le+vR~6q#pX#_IAn9Lzk$UiIi%HB2N^eq>iBxD8gxi0%>whcYOg z)@)Oxh>|?WqlCDtU^4Jp&xa^;$vu>!4Cgyg&wLHR+1#KWznOG(rpsWWrSNqN#vUSk zR12{TqD|q+7j=q*N{)wOVmSW&u9{V9!C5fq@PPfi-#;8!pK7qf>{kkZRj>%^3L4{g znr%1SR%L0Kr(WidXO)>-s)K7T&lmHmZ(*SDq^@@hacIewyhMdcm;HuTSB `; zYKK@1OLBx2w6sC!6<)q*R)Ue ~PLx?z0VbF*vTw~z zCyO^;Y_aQ3?@&%Z^3%9DJOzyl_uR^>KG&^59b`tR!Su%aAm`O)Y%~f8FRMC$tLV&B z#N9tq;Sha?*`thub^Fg{nb;TR)?@<#yt;wM%~`aAK;Djf2=+Jhu^&k#jc+WJ;>@K; z25c@oJtj`Hntb8P-QPM}goPS%p&g0)z-GK8i8wY1D!0?T5lb!F?WCD|i${4B5cKAg z8UaahBl@v7Y!4I#(38>v#pqQLJC0BuQZAxpI-9uVZ0}Cn#NQjqAg)cYvA6qdf@6^% ztW f<3ZOySK?wsLk@-twPHFihrr9Q0{aU9R+j@Y-&<-oHE7 zK&KCUNkNxBq5sPobY*lRS)T#xI((>iNBu;W46P_WfJ%R18xlu(q2CVa)#RsgPmh>L zSSnq(p}6AXpH^8!UyNk@ODPc#5~uw_1z3K>oo4*0^1W*cPjC>+fiO8$k_>j(h^Nux z$#BgaB&Qvm&7|9b9FcT#bKnxTA&i)RdVrcnnBneeCD%|@9xC!W1m>nP>OYh31ncTS zpqTDy+zbfGPO;qM8zylDT{;%Ef}Yng4a~j)apCW~v@fjw9n(sW*drxL*xiXV@bb99 z#tA?n@{#utFc^N%Ergl8zUeXE%fFG$;T!0&Kp5d!K %NUS!5C^^G`T2osvHp?JDEGY@&Y7r925@=4E7*5G7W-l| zXLcrZPAcTLRG$B5n_Sj$CGinzOFT2PTqZWu9%8*;xjDst0LipN*4O9N_(xKfr+-Vf zc|?-hw*DP=PVrEgnXZz2ec<%TY=_}wxcjc#tu!S?Y1+$TWC_n{asIU& Xl(baY79{P3ULKXlDS>RR}_>MA|*0%57m8n zTFhKrtC;V8dqHG%0O78mte6;S>GW3JI5P%iTus=>@Ib_@0q$NC?2DdH+A2M;a6&yM z;3Q$YLeT3upy57X4Wu6g?%8nbU#k`3^&bPW9 A($sWCfH*B5zEuamJ3Z zeVRv9`coj8c%VtmIY%Wg$Q3Jq%wb^n(~*>j zOss+dkFNj|5N`Kb1YsSGq4CUGhqTEwFGQ_jm=6S`!ezy(+Ke(-*Iz68gK%%XcJgx) zkUCg^$Y)N3{=L0X$cJ!%d9*+V=D+z ZhS%BaZ8X5czDSK zSfR_^Z+-bt4w2gsmY-IVVAsL%Ews`=WG4Xg+CS&j)XulCsvx#=C_V68)PQ-n>j1*j zE_ea<1fCjxNg%ZGH4hEF6hVjf j6H3rdzLQzP9FSSVZ{K81@Eiw%Odt^g#|>RN zfUp$Kri<}`!FP6?%|%%6HKZwRX%SLnyl)NNoeR3jNO63jHp+pY+;jw(benCH)o`QN z(S<#^z2bTv*&o+Y!21dn_-gyVcf_|#%p&s?yFoO`y2Q0K_;UgIUFrKIEo5r~IOaI$ zae(0>feolkh=j%N8R+AsDuYKW9okVtq#Ile09Cp@RxpOF{*?%w=sSqR!@KCv+kLB; zp2A>6Fk>L!#fD<0(P?P`lCw9KZ4xZgRYKhUN`3_KpZn8eUSmMD#L%|wXS)No($m&` zs(1>Wg?aliiV}-b?9^jQipd;?>ZME-OI{P?-6Ef#sH^qG%eV=PAm77(zhB>fbHx19ufhfUmq7?a|}{@#H%SrE9BhK z3W=upw6q)GCit)^J-KNG+QOT{WPxBs-a3M>kG8Utfc~LyA%#pzy6f)}F*!CVS#}i5 zx3+7Ushky}pxp%O^_MQ3YOHUwj9??vo~cd}%M>^pm}dpp*9@JTwUxBJ^pW*6rx0P# zU#pS?DLD`8_;i9G!sn~y;o}v~#EeX15BA#M3Lb$!?QPi9l__>^)z`a+ac|)af|e$5 zAJ4yomK?FG-lmdE1$(zeriv`dqC8zIaa);={7>d YCrTup4BH$B|nx{bNoGI;jG z^$lJxpB>RaC%$C(=(+3#-qASMt(x<)J5yamkJ6qqsPHGk$(AXK$=0>-NdrO6#U*e_ zz0RDa`8%}^b>(J&v= #VF{0 sn|8%41S&8|Q}{rZv%=l;C|dse8sw!P zQ8tyjm*9d1h0( d(qWV!Wk#UB;5+-#jj3`03Ez(-->QQurVUeHB>f-Byg$G0%Y3pS{&j^&RZP4A9 zn8Y+93YwO@UO`I>T@+;s3t=9XE?@sFCW#Imny34Y4*eaYtrw2EmL5EYOCZiSGLNXv z&1?_FC_B_vJLWNxB`@>vrzP)2y~^-%=XpE@?SKI9LNLr>iIkJD;=)_AyvmKONx#6( z{p_OhAXHzi1?Og>$wP}wdl+U5SKxocvHk?dC#8ma(>80+jIt}w&Qyn+#cfWP>%b*u zHKGKhfr@iRQVpuXOxko-jemv{p#QWT{g*feUiHv?ZKHeE&3hjUKVSuJASTyy{;&aA z 2d3M_-8xjq9X&Go94&jimoW7)~DO;m4P%f%db zJ*|>Jz>&S~eDxT#nC_@~a!(Hk# iei~idWmtTuAf7hk%H< zBBH&eEXh{pl9@gzYM 5$wJ22}I@|g*!{*UVlY~c%5eJUNUO_6!+znY4i` z@Fbz{=aK$X=^u}HkdsCuT~&}8?cGl4UBd)yp}x{0L}uywcu4cH$y$x98B=i)G $t3Wgf9+R;Uekiz@9kzNx#?HvL9O`~ng;@6;!wCOAa z>AcS9wNl{0 v^ zE93Z_uj|)>JE#qug45IG!;Y Tfb-E7P|_>Q*d9uHHpCFayIq z)RcW(-l8_YaoI$=Mg+;nt~Ps}P$bbp^YTycnR3YnTd5AP2Y^Wq?a`GcrH&_AE5$x= z9|Ghx;|9X^SpmIn1!*WvprAGtHKqK=5+n8-u0Yy=ld3?BI;r&x^pV$0a$TFG(|?Iq zOf^s$dTnCC{rbO9bKyS19=D{;=PPnj3e6vRBa!q;YoE}+r*^?|#FgTPkk=jV5#>K! z(}?VsmFO0w?cXbz8!h$C5V6J9 boh3{n{9B?PQIo)Nszss8SLH^ewDYF zv3x6+;ca{*gB9LpB6$s}iS+WFuGm=8#_P$t7SJMgEM|vJh@)b_oy@nxZka9xuthVN zu9iX)_QTv+gICaY;JHF(#=u{*>I&F@)CGIg7Ddh~zD|ti;1s$%UHz3E7G7E@d~IAD zA+mKW(Qz^(m1JJ&@aXIP =K$k 1{=!JSNu- zao->%BtRB8zA7O`pkA-nGW+zJO9*|nKSIr-Ca+DeFGN{aR^|~;9RqlAv~zUeCZ!JC zu^Y%;`=y8VS1be{X{KeJ7pAIGZ8FO5un+H=T9!e-WxpaJ%MyPov|wJb75oIW8;#5^ zu`=vR`q|ul9Wo1ou0LUIHaa+nPib_>=zrd5l)tGf12~W?Cn|(r=D5++bl y$IyrH!` ircuOzcpL@J zU8j6H2n3K0LPOUR@}bE)QL|!7TZ0p~glEBz_il@NG7#{Ca(`+ZUpHM)_Nr%!#W`eT zpkKhitT{M3;9q z=u2{tr?DWexC8o8vVJOgM0pN5S=f2R7GAMjO7j*s+TZj)7J4zE2zuRG; bydbY;{3zg-UTFU-cO=r1%BXK;WZ%=H_6qiOMY5PFB-7#eTtIh4^9}M$+R$b zqQ0}Ck QbJ&Dl(H47t;`{GnJO@bEy;yDYUBKI>epBOZoAu= z^e??P+D;a~a|V#!Af C z^(%+K{+5yCMMUYSjC u yiZ5{t5G|O1en@_12?MOz;$}agTXMs=ccj|%q~sGMK-X>IJXqp8 zP~UH+`?Vq+!Gkado&CgZ;=>^NHWglJK>m|a!kcnUBr!h`laT+zaEoL=DT+qlKY=lm zW=3Lq^G9ib%)D{apH__x;sT^U_PccDzb$g0`Hrq*>klLF?f0g6OF^>6(OM0J)4tj) zQ2>LT7k5i;%#Qi*NM#l>_j1qJ{431oVdMtcO$yjX#J^Z5PW*4URDH#tOZWcR2>)Uh zAiUqW!|s>@5KVkEX9qukgmF%`9EQ?stwA}Cn#G4V!4jRCLX>u7_oNu vrvh4gK^6QFEzq>AJd8Tpn?G}np25Qz90?Ri7|iDkfVS=+q6DIK3u=J z4K;{5g8zcZ$$;~ s1 z4Hj6qXygb`Xw)C>%p~uFRxgs*;*z#-Z=?yEjzD}Q1#W=DgNtrf!ZR4+`0ml;Al>Pp znRn-no#Jy=U^0i8hgN5ynb-hgtiLE4b`b+0I3Sh&@ClJv&}k1cmhD?*XkvOpl`8uh zyCQVaZ$=I`sqlB+23`H2aMs-}$qMAP;dVbQ-KCIt&z~%t^MD)Ffi-aru`a&;|03#b z;5L!|#`qo^=#%zSQ7=ZbmtIlK=bygyLmYjZRQHsV#1I2;239uMBPH0Q O{=LI5dz(6UChJq3x#gkdOq6t(tlhT$(LhXAa+a?)cg >@%sW?Y0f_Wk@@dgZYzs(j%HPG{celL5 b6IJxlVbTAy@)s=T+uInCA9kRyO!f4J(0Z8ubU*WwLU<|FxjlY2Xf&(d9N!%f zmFdDUD*8hbWMQM_Yzw5$9oxRoOl!b^RX1%LN*^f^#qNmY?h~5>RE0`N@AIi5Y}981 zFYz;fID?%T&TzK;(|C6~)yAdH4}%qGdBt~68%1Xg7SHz{^Uem1#b7tD*i2%b78m`e z39+Z$^24h|&tuUot7wD_O;f|H{^XS;XBiW?QC{J={htK>A-`?Fpn>KYeqkf#!Xc0- ztCu0O>IS;VJ^jlF5MhVd5Jwy$d#j0~dYseKDa34_ZGJ^#GO-nCC^?{%77;d&QV?Qh zF04px_#~ky!?-|z;J)~nJmU!aDbaW5p$Tm}n7U-;Yz;cJ5QEt%ZIHM5E1QR-=8Z?i z$iwQVcoudX N=axxe$kZE_-GcP&T2c&2hVpZt?m()$D%!-cnZM zK(B3q*N4ILE*J%}QR4*fCtGs!`9sjl>HA?M{fLDVr6tRp7GEOzgJzm27Ndr5Hu${? zwV_oBX|elEhR_m$Y<3rGj{;qZ#mH>4&=HXBsxb~`3e12XpiJSbFAS $l`7Ft? JPpTB+i> teCpx)fX@l#)sCuk@ad+gGX~CJcFSu*x1SV2t5}sBO4h|EBFXmsb8x=&fZ&Jn z?)EZj3sL>9aNfFvZ;J^o4it5^aJMf})O* 0~fB$jo0Lp8Z^kXam_m@mV_*}Rn0^Cx9n>-zA lg@{`wGmq^Jw+Xmy9 zu(_!x!pzu2gQt&gB&9H>fhPvIxo)DF5=iTrjGZ!*~_Jp|z{czvFjE!o{ppu2NF)>bdpFftjnM>{Ff zP1@ygs0&PQb}I2U)9P?KwGQ)>=DnPd(j>EO%a9efU8Bcw=Y6-kHFiH%b1#zg`?7}_ zQB@nf(aa&z+x^(rogsH#@S{2|`!5M k=p8pp~;m7*HqK$`K030(4Ax@BR>qn4G>(8G&Lz4k)k zJ1dNK R~{!Vddh1fCd z32uW75bZN#@wrP%&vyf%vZ4TmlXj!uE6b;~RO<6cfO+9OPqtJXU|Us)Y`YeeM3a;y zocB<{m=a}f
Kzwvb3r_2jm!3WQ2xhbz s@ z;YUjZ`(1azkROFsK#(sn1iHh#|M>6tpworB@^#t=HjzubF`!(WRAJfERE1VBLTsW3 z4c7yemn&o}ak(QAmQfk4Iux@u<({_UXeeh!nWAb8CY6&!1ref|-n%RHXb8}Swb7(? zmvP<^V^oZJGADspFnA0bapG}p!3p7QA6k<6NA2b!bseT!sqw5OYf#DbaxPlO))3Ma zXnUUYdvWjp0Wkl-WE6;I5fG#jhQE{|ZL6+CV@j~LCLSQ4w|?&}K|Qhn6eAxd?1icz zG7i;Xn!j|86ng@6 6?- zsPpfbI=O?4TUe{5; z>M zBEKp(=XaA{Y<0IS^2$N48KEQma>do%>6ArZ!yk|VS?Qm`fZCGk;Qu_MHPC;|RpP8b z`MVnwA!X>*BwH%pS3k1-KQH8zXn>EGd_gEQbGKHr{FN_(px5+O?U^j@slO0}0 z@yLM?=MJOCR&VQB1vs!bQ%E|EL5GKZUw}Rs^a%+qeY)DJe>~`3Qa(}!Mopl?&_z*M z9jHB;fMizSYb>TGJ>C Z zR>h;VLAMp2NUs^PvV4vy=|@VpdGehBj`QSzl$jD;M(!xj0cz-AM2r84IgTTpv1tf6 zz{-iwsY;VRBiR6^+g8l_kdN?uISX&YJD*S#fNg%uAV)ABXfnk<8yVRmk`H}Y10Gqi zefXvY*DhUUlFh4^qeAPE$xHDRpSE_-HjFY(WS3hUH0m%@dihF7S#cZj6YJb|e!;Wh zrbba^2Ny?;G|z_MHk#cuDhx6x