diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 3eb1314..8b13789 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -1,27 +1 @@ -name: Playwright Tests -on: - push: - branches: [ main, master ] - pull_request: - branches: [ main, master ] -jobs: - test: - timeout-minutes: 60 - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version: lts/* - - name: Install dependencies - run: npm ci - - name: Install Playwright Browsers - run: npx playwright install --with-deps - - name: Run Playwright tests - run: npx playwright test - - uses: actions/upload-artifact@v4 - if: ${{ !cancelled() }} - with: - name: playwright-report - path: playwright-report/ - retention-days: 30 + diff --git a/Cargo.lock b/Cargo.lock index b228a6a..bdcb9a7 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -4,18 +4,18 @@ version = 4 [[package]] name = "addr2line" -version = "0.21.0" +version = "0.24.2" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "8a30b2e23b9e17a9f90641c7ab1549cd9b44f296d3ccbf309d2863cfe398a0cb" +checksum = "dfbe277e56a376000877090da837660b4427aad530e3028d44e0bffe4f89a1c1" dependencies = [ "gimli", ] [[package]] -name = "adler" -version = "1.0.2" +name = "adler2" +version = "2.0.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "f26201604c87b1e01bd3d98f8d5d9a8fcbb815e8cedb41ffccbeb4bf593a35fe" +checksum = "320119579fcad9c21884f5c4861d16174d0e06250625266f50fe6898340abefa" [[package]] name = "anymap2" @@ -31,19 +31,25 @@ checksum = "f1fdabc7756949593fe60f30ec81974b613357de856987752631dea1e3394c80" [[package]] name = "backtrace" -version = "0.3.71" +version = "0.3.75" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "26b05800d2e817c8b3b4b54abd461726265fa9789ae34330622f2db9ee696f9d" +checksum = "6806a6321ec58106fea15becdad98371e28d92ccbc7c8f1b3b6dd724fe8f1002" dependencies = [ "addr2line", - "cc", "cfg-if", "libc", "miniz_oxide", "object", "rustc-demangle", + "windows-targets", ] +[[package]] +name = "base64ct" +version = "1.8.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "55248b47b0caf0546f7988906588779981c43bb1bc9d0c44087278f80cdb44ba" + [[package]] name = "bincode" version = "1.3.3" @@ -55,9 +61,9 @@ dependencies = [ [[package]] name = "bitflags" -version = "2.5.0" +version = "2.9.4" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "cf4b9d6a944f767f8e5e0db018570623c85f3d925ac718db4e06d0187adb21c1" +checksum = "2261d10cca569e4643e526d8dc2e62e433cc8aba21ab764233731f8d369bf394" [[package]] name = "boolinator" @@ -77,14 +83,14 @@ dependencies = [ "quote", "serde", "serde_json", - "syn 2.0.58", + "syn 2.0.106", ] [[package]] name = "bumpalo" -version = "3.16.0" +version = "3.19.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "79296716171880943b8470b5f8d03aa55eb2e645a4874bdbb28adb49162e012c" +checksum = "46c5e41b57b8bba42a04676d81cb89e9ee8e859a1a66f80a5a72e1cb76b34d43" [[package]] name = "bytes" @@ -94,21 +100,25 @@ checksum = "514de17de45fdb8dc022b1a7975556c53c86f9f0aa5f534b98977b171857c2c9" [[package]] name = "cc" -version = "1.0.92" +version = "1.2.40" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "2678b2e3449475e95b0aa6f9b506a28e61b3dc8996592b983695e8ebb58a8b41" +checksum = "e1d05d92f4b1fd76aad469d46cdd858ca761576082cd37df81416691e50199fb" +dependencies = [ + "find-msvc-tools", + "shlex", +] [[package]] name = "cfg-if" -version = "1.0.0" +version = "1.0.3" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd" +checksum = "2fd1289c04a9ea8cb22300a459a72a385d7c73d3259e2ed7dcb2af674838cfa9" [[package]] name = "color-eyre" -version = "0.6.3" +version = "0.6.5" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "55146f5e46f237f7423d74111267d4597b59b0dad0ffaf7303bce9945d843ad5" +checksum = "e5920befb47832a6d61ee3a3a846565cfa39b331331e68a3b1d1116630f2f26d" dependencies = [ "backtrace", "color-spantrace", @@ -121,9 +131,9 @@ dependencies = [ [[package]] name = "color-spantrace" -version = "0.2.1" +version = "0.3.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "cd6be1b2a7e382e2b98b43b2adcca6bb0e465af0bdd38123873ae61eb17a72c2" +checksum = "b8b88ea9df13354b55bc7234ebcce36e6ef896aca2e42a15de9e10edce01b427" dependencies = [ "once_cell", "owo-colors", @@ -152,9 +162,9 @@ dependencies = [ [[package]] name = "equivalent" -version = "1.0.1" +version = "1.0.2" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "5443807d6dff69373d433ab9ef5378ad8df50ca6298caf15de6e52e24aaf54d5" +checksum = "877a4ace8713b0bcf2a4e7eec82529c029f1d0619886d18145fea96c3ffe5c0f" [[package]] name = "eyre" @@ -166,6 +176,12 @@ dependencies = [ "once_cell", ] +[[package]] +name = "find-msvc-tools" +version = "0.1.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "0399f9d26e5191ce32c498bebd31e7a3ceabc2745f0ac54af3f335126c3f24b3" + [[package]] name = "fnv" version = "1.0.7" @@ -225,7 +241,7 @@ checksum = "87750cf4b7a4c0625b1529e4c543c2182106e4dedc60a2a6455e00d212c489ac" dependencies = [ "proc-macro2", "quote", - "syn 2.0.58", + "syn 2.0.106", ] [[package]] @@ -264,7 +280,7 @@ version = "0.2.21" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "14dbbfd5c71d70241ecf9e6f13737f7b5ce823821063188d7e46c41d371eebd5" dependencies = [ - "unicode-width", + "unicode-width 0.1.11", ] [[package]] @@ -282,9 +298,9 @@ dependencies = [ [[package]] name = "gimli" -version = "0.28.1" +version = "0.31.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "4271d37baee1b8c7e4b708028c57d816cf9d2434acb33a549475f78c181f6253" +checksum = "07e28edb80900c19c28f1072f2e8aeca7fa06b23cd4169cefe1af5aa3260783f" [[package]] name = "gloo" @@ -633,14 +649,20 @@ dependencies = [ "proc-macro-crate", "proc-macro2", "quote", - "syn 2.0.58", + "syn 2.0.106", ] [[package]] name = "hashbrown" -version = "0.14.3" +version = "0.16.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "290f1a1d9242c78d09ce40a5e87e7554ee637af1351968159f4952f028f75604" +checksum = "5419bdc4f6a9207fbeba6d11b604d481addf78ecd10c11ad51e76c2f6482748d" + +[[package]] +name = "heck" +version = "0.5.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "2304e00983f87ffb38b55b444b5e3b60a884b5d30c0fca7d82fe33449bbe55ea" [[package]] name = "hermit-abi" @@ -648,6 +670,15 @@ version = "0.3.9" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "d231dfb89cfffdbc30e7fc41579ed6066ad03abda9e567ccafae602b97ec5024" +[[package]] +name = "html-escape" +version = "0.2.13" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "6d1ad449764d627e22bfd7cd5e8868264fc9236e07c752972b4080cd351cb476" +dependencies = [ + "utf8-width", +] + [[package]] name = "http" version = "0.2.12" @@ -676,7 +707,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "9311685eb9a34808bbb0608ad2fcab9ae216266beca5848613e95553ac914e3b" dependencies = [ "quote", - "syn 2.0.58", + "syn 2.0.106", ] [[package]] @@ -687,9 +718,9 @@ checksum = "ce23b50ad8242c51a442f3ff322d56b02f08852c77e4c0b4d3fd684abc89c683" [[package]] name = "indexmap" -version = "2.2.6" +version = "2.11.4" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "168fb715dda47215e360912c096649d23d58bf392ac62f73919e831745e40f26" +checksum = "4b0f83760fb341a774ed326568e19f5a863af4a952def8c39f9ab92fd95b88e5" dependencies = [ "equivalent", "hashbrown", @@ -697,43 +728,47 @@ dependencies = [ [[package]] name = "itoa" -version = "1.0.11" +version = "1.0.15" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "49f1f14873335454500d59611f1cf4a4b0f786f9ac11f4312a78e4cf2566695b" +checksum = "4a5f13b858c8d314ee3e8f639011f7ccefe71f97f96e50151fb991f267928e2c" [[package]] name = "js-sys" -version = "0.3.69" +version = "0.3.81" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "29c15563dc2726973df627357ce0c9ddddbea194836909d655df6a75d2cf296d" +checksum = "ec48937a97411dcb524a265206ccd4c90bb711fca92b2792c407f268825b9305" dependencies = [ + "once_cell", "wasm-bindgen", ] [[package]] name = "lazy_static" -version = "1.4.0" +version = "1.5.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646" +checksum = "bbd2bcb4c963f2ddae06a2efc7e9f3591312473c50c6685e1f298068316e66fe" [[package]] name = "libc" -version = "0.2.153" +version = "0.2.176" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "9c198f91728a82281a64e1f4f9eeb25d82cb32a5de251c6bd1b5154d63a8e7bd" +checksum = "58f929b4d672ea937a23a1ab494143d968337a5f47e56d0815df1e0890ddf174" [[package]] name = "log" -version = "0.4.21" +version = "0.4.28" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "90ed8c1e510134f979dbc4f070f87d4313098b704861a105fe34231c70a3901c" +checksum = "34080505efa8e45a4b816c349525ebe327ceaa8559756f0356cba97ef3bf7432" [[package]] name = "matdemo" version = "0.1.0" dependencies = [ + "console_error_panic_hook", + "log", "material-yew", "wasm-bindgen", + "wasm-logger", "yew", ] @@ -741,26 +776,49 @@ dependencies = [ name = "material-yew" version = "0.1.0" dependencies = [ + "gloo-utils 0.2.0", "indexmap", "js-sys", + "strum", "wasm-bindgen", + "wasm-bindgen-test", "web-sys", "yew", ] [[package]] name = "memchr" -version = "2.7.2" +version = "2.7.6" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "6c8640c5d730cb13ebd907d8d04b52f55ac9a2eec55b440c8892f40d56c76c1d" +checksum = "f52b00d39961fc5b2736ea853c9cc86238e165017a493d1d5c8eac6bdc4cc273" + +[[package]] +name = "minicov" +version = "0.3.7" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "f27fe9f1cc3c22e1687f9446c2083c4c5fc7f0bcf1c7a86bdbded14985895b4b" +dependencies = [ + "cc", + "walkdir", +] [[package]] name = "miniz_oxide" -version = "0.7.2" +version = "0.8.9" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "9d811f3e15f28568be3407c8e7fdb6514c1cda3cb30683f15b6a1a1dc4ea14a7" +checksum = "1fa76a2c86f704bdb222d66965fb3d63269ce38518b83cb0575fca855ebb6316" dependencies = [ - "adler", + "adler2", +] + +[[package]] +name = "modaldemo" +version = "0.1.0" +dependencies = [ + "log", + "material-yew", + "wasm-logger", + "yew", ] [[package]] @@ -775,24 +833,24 @@ dependencies = [ [[package]] name = "object" -version = "0.32.2" +version = "0.36.7" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "a6a622008b6e321afc04970976f62ee297fdbaa6f95318ca343e3eebb9648441" +checksum = "62948e14d923ea95ea2c7c86c71013138b66525b86bdc08d2dcc262bdb497b87" dependencies = [ "memchr", ] [[package]] name = "once_cell" -version = "1.19.0" +version = "1.21.3" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "3fdb12b2476b595f9358c5161aa467c2438859caa136dec86c26fdd2efe17b92" +checksum = "42f5e15c9953c5e4ccceeb2e7382a716482c34515315f7b03532b8b4e8393d2d" [[package]] name = "owo-colors" -version = "3.5.0" +version = "4.2.3" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "c1b04fb49957986fdce4d6ee7a65027d55d4b6d2265e5848bbb507b58ccfdb6f" +checksum = "9c6901729fa79e91a0913333229e9ca5dc725089d1c363b2f4b4760709dc4a52" [[package]] name = "percent-encoding" @@ -817,14 +875,14 @@ checksum = "2f38a4412a78282e09a2cf38d195ea5420d15ba0602cb375210efbc877243965" dependencies = [ "proc-macro2", "quote", - "syn 2.0.58", + "syn 2.0.106", ] [[package]] name = "pin-project-lite" -version = "0.2.14" +version = "0.2.16" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "bda66fc9667c18cb2758a2ac84d1167245054bcf85d5d1aaa6923f45801bdd02" +checksum = "3b3cff922bd51709b605d9ead9aa71031d81447142d828eb4a6eba76fe619f9b" [[package]] name = "pin-utils" @@ -845,12 +903,12 @@ dependencies = [ [[package]] name = "prettyplease" -version = "0.2.17" +version = "0.2.37" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "8d3928fb5db768cb86f891ff014f0144589297e3c6a1aba6ed7cecfdace270c7" +checksum = "479ca8adacdd7ce8f1fb39ce9ecccbfe93a3f1344b3d0d97f20bc0196208f62b" dependencies = [ "proc-macro2", - "syn 2.0.58", + "syn 2.0.106", ] [[package]] @@ -889,9 +947,9 @@ dependencies = [ [[package]] name = "proc-macro2" -version = "1.0.79" +version = "1.0.101" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "e835ff2298f5721608eb1a980ecaee1aef2c132bf95ecc026a11b7bf3c01c02e" +checksum = "89ae43fd86e4158d6db51ad8e2b80f313af9cc74f5c0e03ccb87de09998732de" dependencies = [ "unicode-ident", ] @@ -928,9 +986,9 @@ dependencies = [ [[package]] name = "quote" -version = "1.0.36" +version = "1.0.41" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "0fa76aaf39101c457836aec0ce2316dbdc3ab723cdda1c6bd4e6ad4208acaca7" +checksum = "ce25767e7b499d1b604768e7cde645d14cc8584231ea6b295e9c9eb22c02e1d1" dependencies = [ "proc-macro2", ] @@ -943,28 +1001,38 @@ checksum = "afab94fb28594581f62d981211a9a4d53cc8130bbcbbb89a0440d9b8e81a7746" [[package]] name = "rustc-demangle" -version = "0.1.23" +version = "0.1.26" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "d626bb9dae77e28219937af045c257c28bfd3f69333c512553507f5f9798cb76" +checksum = "56f7d92ca342cea22a06f2121d944b4fd82af56988c270852495420f961d4ace" [[package]] name = "rustversion" -version = "1.0.15" +version = "1.0.22" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "80af6f9131f277a45a3fba6ce8e2258037bb0477a67e610d3c1fe046ab31de47" +checksum = "b39cdef0fa800fc44525c84ccb54a029961a8215f9619753635a9c0d2538d46d" [[package]] name = "ryu" -version = "1.0.17" +version = "1.0.20" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "e86697c916019a8588c99b5fac3cead74ec0b4b819707a682fd4d23fa0ce1ba1" +checksum = "28d3b2b1366ec20994f1fd18c3c594f05c5dd4bc44d8bb0c1c632c8d6829481f" + +[[package]] +name = "same-file" +version = "1.0.6" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "93fc1dc3aaa9bfed95e02e6eadabb4baf7e3078b0bd1b4d7b6b0b68378900502" +dependencies = [ + "winapi-util", +] [[package]] name = "serde" -version = "1.0.197" +version = "1.0.228" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "3fb1c873e1b9b056a4dc4c0c198b24c3ffa059243875552b2bd0933b1aee4ce2" +checksum = "9a8e94ea7f378bd32cbbd37198a4a91436180c5bb472411e48b5ec2e2124ae9e" dependencies = [ + "serde_core", "serde_derive", ] @@ -990,26 +1058,37 @@ dependencies = [ "wasm-bindgen", ] +[[package]] +name = "serde_core" +version = "1.0.228" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "41d385c7d4ca58e59fc732af25c3983b67ac852c1a25000afe1175de458b67ad" +dependencies = [ + "serde_derive", +] + [[package]] name = "serde_derive" -version = "1.0.197" +version = "1.0.228" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "7eb0b34b42edc17f6b7cac84a52a1c5f0e1bb2227e997ca9011ea3dd34e8610b" +checksum = "d540f220d3187173da220f885ab66608367b6574e925011a9353e4badda91d79" dependencies = [ "proc-macro2", "quote", - "syn 2.0.58", + "syn 2.0.106", ] [[package]] name = "serde_json" -version = "1.0.115" +version = "1.0.145" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "12dc5c46daa8e9fdf4f5e71b6cf9a53f2487da0e86e55808e2d35539666497dd" +checksum = "402a6f66d8c709116cf22f558eab210f5a50187f702eb4d7e5ef38d9a7f1c79c" dependencies = [ "itoa", + "memchr", "ryu", "serde", + "serde_core", ] [[package]] @@ -1033,6 +1112,12 @@ dependencies = [ "lazy_static", ] +[[package]] +name = "shlex" +version = "1.3.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "0fda2ff0d084019ba4d7c6f371c95d8fd75ce3524c3cb8fb653a3023f6323e64" + [[package]] name = "slab" version = "0.4.9" @@ -1048,6 +1133,28 @@ version = "0.3.2" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "b7c388c1b5e93756d0c740965c41e8822f866621d41acbdf6336a6a168f8840c" +[[package]] +name = "strum" +version = "0.26.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "8fec0f0aef304996cf250b31b5a10dee7980c85da9d759361292b8bca5a18f06" +dependencies = [ + "strum_macros", +] + +[[package]] +name = "strum_macros" +version = "0.26.4" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "4c6bee85a5a24955dc440386795aa378cd9cf82acd5f764469152d2270e581be" +dependencies = [ + "heck", + "proc-macro2", + "quote", + "rustversion", + "syn 2.0.106", +] + [[package]] name = "syn" version = "1.0.109" @@ -1060,9 +1167,9 @@ dependencies = [ [[package]] name = "syn" -version = "2.0.58" +version = "2.0.106" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "44cfb93f38070beee36b3fef7d4f5a16f27751d94b187b666a5cc5e9b0d30687" +checksum = "ede7c438028d4436d71104916910f5bb611972c5cfd7f89b8300a8186e6fada6" dependencies = [ "proc-macro2", "quote", @@ -1071,13 +1178,13 @@ dependencies = [ [[package]] name = "textwrap" -version = "0.16.1" +version = "0.16.2" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "23d434d3f8967a09480fb04132ebe0a3e088c173e6d0ee7897abbdf4eab0f8b9" +checksum = "c13547615a44dc9c452a8a534638acdf07120d4b6847c8178705da06306a3057" dependencies = [ "smawk", "unicode-linebreak", - "unicode-width", + "unicode-width 0.2.2", ] [[package]] @@ -1097,17 +1204,16 @@ checksum = "c61f3ba182994efc43764a46c018c347bc492c79f024e705f46567b418f6d4f7" dependencies = [ "proc-macro2", "quote", - "syn 2.0.58", + "syn 2.0.106", ] [[package]] name = "thread_local" -version = "1.1.8" +version = "1.1.9" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "8b9ef9bad013ada3808854ceac7b46812a6465ba368859a37e2100283d2d719c" +checksum = "f60246a4944f24f6e018aa17cdeffb7818b76356965d03b07d6a9886e8962185" dependencies = [ "cfg-if", - "once_cell", ] [[package]] @@ -1150,9 +1256,9 @@ dependencies = [ [[package]] name = "tracing" -version = "0.1.40" +version = "0.1.41" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "c3523ab5a71916ccf420eebdf5521fcef02141234bbc0b8a49f2fdc4544364ef" +checksum = "784e0ac535deb450455cbfa28a6f0df145ea1bb7ae51b821cf5e7927fdcfbdd0" dependencies = [ "pin-project-lite", "tracing-attributes", @@ -1161,20 +1267,20 @@ dependencies = [ [[package]] name = "tracing-attributes" -version = "0.1.27" +version = "0.1.30" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "34704c8d6ebcbc939824180af020566b01a7c01f80641264eba0999f6c2b6be7" +checksum = "81383ab64e72a7a8b8e13130c49e3dab29def6d0c7d76a03087b3cf71c5c6903" dependencies = [ "proc-macro2", "quote", - "syn 2.0.58", + "syn 2.0.106", ] [[package]] name = "tracing-core" -version = "0.1.32" +version = "0.1.34" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "c06d3da6113f116aaee68e4d601191614c9053067f9ab7f6edbcb161237daa54" +checksum = "b9d12581f227e93f094d3af2ae690a574abb8a2b9b7a96e7cfe9647b2b617678" dependencies = [ "once_cell", "valuable", @@ -1192,9 +1298,9 @@ dependencies = [ [[package]] name = "tracing-subscriber" -version = "0.3.18" +version = "0.3.20" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "ad0f048c97dbd9faa9b7df56362b8ebcaa52adb06b498c050d2f4e32f90a7a8b" +checksum = "2054a14f5307d601f88daf0553e1cbf472acc4f2c51afab632431cdcd72124d5" dependencies = [ "sharded-slab", "thread_local", @@ -1203,18 +1309,15 @@ dependencies = [ [[package]] name = "unicase" -version = "2.7.0" +version = "2.8.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "f7d2d4dafb69621809a81864c9c1b864479e1235c0dd4e199924b9742439ed89" -dependencies = [ - "version_check", -] +checksum = "75b844d17643ee918803943289730bec8aac480150456169e647ed0b576ba539" [[package]] name = "unicode-ident" -version = "1.0.12" +version = "1.0.19" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "3354b9ac3fae1ff6755cb6db53683adb661634f67557942dea4facebec0fee4b" +checksum = "f63a545481291138910575129486daeaf8ac54aee4387fe7906919f7830c7d9d" [[package]] name = "unicode-linebreak" @@ -1234,6 +1337,12 @@ version = "0.1.11" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "e51733f11c9c4f72aa0c160008246859e340b00807569a0da0e7a1079b27ba85" +[[package]] +name = "unicode-width" +version = "0.2.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "b4ac048d71ede7ee76d585517add45da530660ef4390e49b098733c6e897f254" + [[package]] name = "urlencoding" version = "2.1.3" @@ -1249,13 +1358,19 @@ dependencies = [ "prettyplease", "proc-macro2", "quote", - "syn 2.0.58", + "syn 2.0.106", "textwrap", "wasm-bindgen", "yew", "yew-router", ] +[[package]] +name = "utf8-width" +version = "0.1.7" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "86bd8d4e895da8537e5315b8254664e6b769c4ff3db18321b297a1e7004392e3" + [[package]] name = "valuable" version = "0.1.0" @@ -1264,9 +1379,19 @@ checksum = "830b7e5d4d90034032940e4ace0d9a9a057e7a45cd94e6c007832e39edb82f6d" [[package]] name = "version_check" -version = "0.9.4" +version = "0.9.5" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "49874b5167b65d7193b8aba1567f5c7d93d001cafc34600cee003eda787e483f" +checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a" + +[[package]] +name = "walkdir" +version = "2.5.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "29790946404f91d9c5d06f9874efddea1dc06c5efe94541a7d6863108e3a5e4b" +dependencies = [ + "same-file", + "winapi-util", +] [[package]] name = "wasi" @@ -1276,46 +1401,49 @@ checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423" [[package]] name = "wasm-bindgen" -version = "0.2.92" +version = "0.2.104" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "4be2531df63900aeb2bca0daaaddec08491ee64ceecbee5076636a3b026795a8" +checksum = "c1da10c01ae9f1ae40cbfac0bac3b1e724b320abfcf52229f80b547c0d250e2d" dependencies = [ "cfg-if", + "once_cell", + "rustversion", "wasm-bindgen-macro", + "wasm-bindgen-shared", ] [[package]] name = "wasm-bindgen-backend" -version = "0.2.92" +version = "0.2.104" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "614d787b966d3989fa7bb98a654e369c762374fd3213d212cfc0251257e747da" +checksum = "671c9a5a66f49d8a47345ab942e2cb93c7d1d0339065d4f8139c486121b43b19" dependencies = [ "bumpalo", "log", - "once_cell", "proc-macro2", "quote", - "syn 2.0.58", + "syn 2.0.106", "wasm-bindgen-shared", ] [[package]] name = "wasm-bindgen-futures" -version = "0.4.42" +version = "0.4.54" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "76bc14366121efc8dbb487ab05bcc9d346b3b5ec0eaa76e46594cabbe51762c0" +checksum = "7e038d41e478cc73bae0ff9b36c60cff1c98b8f38f8d7e8061e79ee63608ac5c" dependencies = [ "cfg-if", "js-sys", + "once_cell", "wasm-bindgen", "web-sys", ] [[package]] name = "wasm-bindgen-macro" -version = "0.2.92" +version = "0.2.104" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "a1f8823de937b71b9460c0c34e25f3da88250760bec0ebac694b49997550d726" +checksum = "7ca60477e4c59f5f2986c50191cd972e3a50d8a95603bc9434501cf156a9a119" dependencies = [ "quote", "wasm-bindgen-macro-support", @@ -1323,33 +1451,159 @@ dependencies = [ [[package]] name = "wasm-bindgen-macro-support" -version = "0.2.92" +version = "0.2.104" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "e94f17b526d0a461a191c78ea52bbce64071ed5c04c9ffe424dcb38f74171bb7" +checksum = "9f07d2f20d4da7b26400c9f4a0511e6e0345b040694e8a75bd41d578fa4421d7" dependencies = [ "proc-macro2", "quote", - "syn 2.0.58", + "syn 2.0.106", "wasm-bindgen-backend", "wasm-bindgen-shared", ] [[package]] name = "wasm-bindgen-shared" -version = "0.2.92" +version = "0.2.104" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "af190c94f2773fdb3729c55b007a722abb5384da03bc0986df4c289bf5567e96" +checksum = "bad67dc8b2a1a6e5448428adec4c3e84c43e561d8c9ee8a9e5aabeb193ec41d1" +dependencies = [ + "unicode-ident", +] + +[[package]] +name = "wasm-bindgen-test" +version = "0.3.54" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "4e381134e148c1062f965a42ed1f5ee933eef2927c3f70d1812158f711d39865" +dependencies = [ + "js-sys", + "minicov", + "wasm-bindgen", + "wasm-bindgen-futures", + "wasm-bindgen-test-macro", +] + +[[package]] +name = "wasm-bindgen-test-macro" +version = "0.3.54" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "b673bca3298fe582aeef8352330ecbad91849f85090805582400850f8270a2e8" +dependencies = [ + "proc-macro2", + "quote", + "syn 2.0.106", +] + +[[package]] +name = "wasm-logger" +version = "0.2.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "074649a66bb306c8f2068c9016395fa65d8e08d2affcbf95acf3c24c3ab19718" +dependencies = [ + "log", + "wasm-bindgen", + "web-sys", +] [[package]] name = "web-sys" -version = "0.3.69" +version = "0.3.81" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "77afa9a11836342370f4817622a2f0f418b134426d91a82dfb48f532d2ec13ef" +checksum = "9367c417a924a74cae129e6a2ae3b47fabb1f8995595ab474029da749a8be120" dependencies = [ "js-sys", "wasm-bindgen", ] +[[package]] +name = "winapi-util" +version = "0.1.11" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "c2a7b1c03c876122aa43f3020e6c3c3ee5c05081c9a00739faf7503aeba10d22" +dependencies = [ + "windows-sys", +] + +[[package]] +name = "windows-link" +version = "0.2.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "f0805222e57f7521d6a62e36fa9163bc891acd422f971defe97d64e70d0a4fe5" + +[[package]] +name = "windows-sys" +version = "0.61.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "ae137229bcbd6cdf0f7b80a31df61766145077ddf49416a728b02cb3921ff3fc" +dependencies = [ + "windows-link", +] + +[[package]] +name = "windows-targets" +version = "0.52.6" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "9b724f72796e036ab90c1021d4780d4d3d648aca59e491e6b98e725b84e99973" +dependencies = [ + "windows_aarch64_gnullvm", + "windows_aarch64_msvc", + "windows_i686_gnu", + "windows_i686_gnullvm", + "windows_i686_msvc", + "windows_x86_64_gnu", + "windows_x86_64_gnullvm", + "windows_x86_64_msvc", +] + +[[package]] +name = "windows_aarch64_gnullvm" +version = "0.52.6" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "32a4622180e7a0ec044bb555404c800bc9fd9ec262ec147edd5989ccd0c02cd3" + +[[package]] +name = "windows_aarch64_msvc" +version = "0.52.6" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "09ec2a7bb152e2252b53fa7803150007879548bc709c039df7627cabbd05d469" + +[[package]] +name = "windows_i686_gnu" +version = "0.52.6" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "8e9b5ad5ab802e97eb8e295ac6720e509ee4c243f69d781394014ebfe8bbfa0b" + +[[package]] +name = "windows_i686_gnullvm" +version = "0.52.6" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "0eee52d38c090b3caa76c563b86c3a4bd71ef1a819287c19d586d7334ae8ed66" + +[[package]] +name = "windows_i686_msvc" +version = "0.52.6" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "240948bc05c5e7c6dabba28bf89d89ffce3e303022809e73deaefe4f6ec56c66" + +[[package]] +name = "windows_x86_64_gnu" +version = "0.52.6" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "147a5c80aabfbf0c7d901cb5895d1de30ef2907eb21fbbab29ca94c5b08b1a78" + +[[package]] +name = "windows_x86_64_gnullvm" +version = "0.52.6" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "24d5b23dc417412679681396f2b49f3de8c1473deb516bd34410872eff51ed0d" + +[[package]] +name = "windows_x86_64_msvc" +version = "0.52.6" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "589f6da84c646204747d1270a2a5661ea66ed1cced2631d546fdfb155959f9ec" + [[package]] name = "winnow" version = "0.5.40" @@ -1365,9 +1619,12 @@ version = "0.21.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "5f1a03f255c70c7aa3e9c62e15292f142ede0564123543c1cc0c7a4f31660cac" dependencies = [ + "base64ct", + "bincode", "console_error_panic_hook", "futures", "gloo 0.10.0", + "html-escape", "implicit-clone", "indexmap", "js-sys", @@ -1396,7 +1653,7 @@ dependencies = [ "proc-macro-error", "proc-macro2", "quote", - "syn 2.0.58", + "syn 2.0.106", ] [[package]] @@ -1426,5 +1683,5 @@ checksum = "42bfd190a07ca8cfde7cd4c52b3ac463803dc07323db8c34daa697e86365978c" dependencies = [ "proc-macro2", "quote", - "syn 2.0.58", + "syn 2.0.106", ] diff --git a/Cargo.toml b/Cargo.toml index 32b2247..a7a23e5 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1,26 +1,32 @@ [package] name = "material-yew" version = "0.1.0" -edition = "2021" +edition = "2024" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] -indexmap = "2.0.2" -js-sys = "0.3.64" -wasm-bindgen = "0.2.87" -yew = { version = "0.21", features = ["csr"] } +indexmap = "2.11.4" +js-sys = "0.3.81" +strum = { version = "0.26.2", features = ["derive"] } +wasm-bindgen = "0.2.104" +yew = { version = "0.21", features = ["csr", "ssr"] } [dependencies.web-sys] -version = "0.3.64" +version = "0.3.81" features = [ "HtmlFormElement", "CustomEvent" ] +[dev-dependencies] +gloo-utils = "0.2.0" +wasm-bindgen-test = "0.3.42" + [workspace] members = [ "build", "usages", - "matdemo" + "matdemo", + "modaldemo" ] diff --git a/README.md b/README.md index b1f1139..45c8a8c 100644 --- a/README.md +++ b/README.md @@ -5,11 +5,11 @@ ### Example ```rust -use material_yew::Button; +use material_yew::{Button, ButtonVariants}; use yew::html; html! { - }; ``` diff --git a/Trunk.toml b/Trunk.toml new file mode 100644 index 0000000..a819e87 --- /dev/null +++ b/Trunk.toml @@ -0,0 +1,3 @@ +[build] +target = "matdemo/index.html" +public_url = "/" \ No newline at end of file diff --git a/build/Cargo.toml b/build/Cargo.toml index fb91d0d..e724eba 100644 --- a/build/Cargo.toml +++ b/build/Cargo.toml @@ -1,17 +1,17 @@ [package] name = "builder" version = "0.1.0" -edition = "2021" +edition = "2024" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] -pulldown-cmark = { version = "0.9.3", features = ["serde"] } -color-eyre = "0.6.2" -eyre = "0.6.8" -serde = { version = "1.0.188", features = ["derive"] } -serde_json = "1.0.107" -quote = "1.0.33" -proc-macro2 = "1.0.68" +pulldown-cmark = { version = "0.9.6", features = ["serde"] } +color-eyre = "0.6.5" +eyre = "0.6.12" +serde = { version = "1.0.228", features = ["derive"] } +serde_json = "1.0.145" +quote = "1.0.41" +proc-macro2 = "1.0.101" convert_case = "0.6.0" -syn = { version = "2.0.38", features = ["parsing", "extra-traits"] } +syn = { version = "2.0.106", features = ["parsing", "extra-traits"] } diff --git a/build/src/codegen.rs b/build/src/codegen.rs index a692d54..c580a53 100644 --- a/build/src/codegen.rs +++ b/build/src/codegen.rs @@ -1,5 +1,4 @@ use convert_case::{Case, Casing}; -use eyre::ensure; use proc_macro2::{Ident, Span, TokenStream}; use quote::quote; @@ -10,7 +9,7 @@ pub fn gen_component(component_name: &str, mut variants: Vec) -> Stri if variants.len() == 1 { let mut component = variants.pop().unwrap(); assert_eq!(format!("md-{component_name}"), component.name); - let mut properties = &mut component.properties; + let properties = &mut component.properties; if properties.len() == 1 && properties[0].ty.0.ends_with("[]") { properties.clear(); } diff --git a/build/src/ty.rs b/build/src/ty.rs index 84d83ee..786b97f 100644 --- a/build/src/ty.rs +++ b/build/src/ty.rs @@ -1,4 +1,3 @@ -use proc_macro2::{Ident, Span}; use serde::Deserialize; #[derive(Debug, Clone, Deserialize, PartialEq)] diff --git a/diagnostic_report.log b/diagnostic_report.log new file mode 100644 index 0000000..e69de29 diff --git a/docs/audit_a_checklist.md b/docs/audit_a_checklist.md new file mode 100644 index 0000000..c984ffd --- /dev/null +++ b/docs/audit_a_checklist.md @@ -0,0 +1,81 @@ +# Mat-Yew Library Systemic Development Checklist +v.0.0.2 + +## Phase 1: Critical Bug Fixes & API Standardization + +- [x] **Task: Correct Property Typos and Naming** + - [x] `Button`: Rename `typepe` to `r#type` in `src/button.rs`. + - [x] `Button`: Update unit tests for `type` prop. + - [x] `Checkbox`: Rename `validitype` to `validity` in `src/checkbox.rs`. + - [x] `Checkbox`: Update unit tests for `validity` prop. + - [x] `Fab`: Rename `kind` to `variant` in `src/fab.rs`. + - [x] `Fab`: Update unit tests for `variant` prop. +- [x] **Task: Standardize Property Types** + - [x] `Fab`: Create `FabVariant` and `FabSize` enums in `src/fab.rs`. + - [x] `Fab`: Update `variant` and `size` props to use the new enums. + - [x] `Fab`: Update unit tests to use enums. + - [x] `CircularProgress`: Change `value` and `max` props to `f32` in `src/circular_progress.rs`. + - [x] `CircularProgress`: Update unit tests for `value` and `max`. + +## Phase 2: API Parity and Feature Completeness + +- [x] **Task: Implement All Missing Properties** + - [x] `Button`: Add `softDisabled` and `download` props. + - [x] `Button`: Add unit tests for new props. + - [x] `Chip`: Add `download` and `softDisabled` props. + - [x] `Chip`: Add unit tests for new props. + - [x] `Dialog`: Add `returnValue`, `quick`, `type`, and `noFocusTrap` props. + - [x] `Dialog`: Add unit tests for new props. + - [x] `Divider`: Add `insetStart` and `insetEnd` props. + - [x] `Divider`: Remove `vertical` prop. + - [x] `Divider`: Add unit tests for new props. +- [x] **Task: Rewrite Fundamentally Broken Components** + - [x] `Chip Set`: Delete `src/chips.rs` and create `src/chip_set.rs`. + - [x] `Chip Set`: Implement `` wrapper that accepts children via ``. + - [x] `Chip Set`: Create unit test to verify children are rendered in the default slot. + - [x] `Dialog`: Delete `src/dialog.rs` and rewrite from scratch. + - [x] `Dialog`: Implement support for named slots (`headline`, `content`, `actions`). + - [x] `Dialog`: Expose `show()` and `close()` methods on the component ref. + - [x] `Dialog`: Expose `onopen`, `onclose`, etc. event callbacks. + - [x] `Dialog`: Create unit test to verify content projection into named slots. + - [x] `Dialog`: Create unit test to verify event callbacks are registered. +- [x] **Task: Correct Slot Implementations** + - [x] `Fab`: Change `children` prop to `icon: Html` in `src/fab.rs`. + - [x] `Fab`: Render the icon in ``. + - [x] `Fab`: Create unit test for the icon slot. + +## Phase 3: Adopt Idiomatic Yew Patterns & Architecture + +- [x] **Task: Refactor `use_effect` DOM Manipulation** + - [x] `Checkbox`: Remove `use_effect` hook for validation. + - [x] `Checkbox`: Remove `validity`, `form`, `labels`, `validation_message`, `will_validate` props. + - [x] `Checkbox`: Expose `check_validity()` and `report_validity()` on component ref. + - [x] `Checkbox`: Create unit tests for ref-based methods. + - [x] `Button`: Re-evaluate and refactor `form` property `use_effect` hook. +- [x] **Task: Correct `Elevation` Component Architecture** + - [x] `Elevation`: Remove `level` prop from `src/elevation.rs`. + - [x] `Elevation`: Update component to be a simple, prop-less wrapper. + - [x] `Elevation`: Update documentation to explain usage via CSS custom properties on the parent. + - [x] `Elevation`: Create a `matdemo` example demonstrating correct usage. +- [x] **Task: System Test and Fixes** + - [x] Create `scripts/run_matdemo.sh` to build and serve the demo application. + - [x] Create `scripts/verify_matdemo.py` to capture a screenshot of the demo application. + - [x] Execute the scripts and verify the screenshot. +- [x] **Task: Investigate and Fix `matdemo` Runtime Panic** + - [x] Debug the `matdemo` application to identify the root cause of the rendering panic. + - [x] Implement a fix for the runtime error. + - [x] Verify the fix by successfully running the `verify_matdemo.py` script and capturing a screenshot. + +## Phase 4: Library-Wide DX and Documentation + +- [ ] **Task: Implement Library-Wide Customization Support** + - [ ] Create a reusable module/macro for `style` and `aria` props. + - [ ] Implement the module/macro in all components. + - [ ] Add unit tests for `style` and `aria` props for each component. +- [ ] **Task: Comprehensive Documentation Pass** + - [ ] Review and write comprehensive doc comments for every prop in every component. + - [ ] Manually review the generated `cargo doc` output for the entire library. + +## Appendix R - Revision History +- v.0.0.1: Initial checklist based on Button-only audit. +- v.0.0.2: Complete rewrite based on comprehensive 9-component audit. Structured checklist into systemic phases. \ No newline at end of file diff --git a/docs/audit_b_checklist.md b/docs/audit_b_checklist.md new file mode 100644 index 0000000..d8c4117 --- /dev/null +++ b/docs/audit_b_checklist.md @@ -0,0 +1,49 @@ +# Mat-Yew Library Systemic Development Checklist `B` +v.0.0.3 + +## Phase 5: API and Component Refactoring (from Audit `B`) + +### Task: Library-Wide DX and API Standardization +- [x] **B-1: Prop Ergonomics:** Refactor all components to remove `Option` wrappers from props where a default value is sufficient, using `#[prop_or_default]` for cleaner APIs. +- [x] **B-2: Prop Naming:** Ensure all component props consistently use `snake_case` and correctly map to the `kebab-case` attributes of the underlying web components. +- [x] **B-3: Form Integration:** Develop a reusable pattern for `mixinConstraintValidation` to provide a consistent form validation API (`checkValidity`, `reportValidity`) and implement it where applicable (starting with `Checkbox`). + +### Task: Library-Wide Customization and Accessibility +- [x] **B-4: Reusable Pattern:** Create a reusable module or macro to handle the delegation of arbitrary `style` and `aria-*` attributes. +- [x] **B-5: Implementation:** Implement the new pattern across all relevant components. +- [x] **B-6: Unit Tests:** Add unit tests for `style` and `aria` props for each component. + +### Task: Button Component Refinements +- [x] **B-7: Icon Handling:** Refactor the `Button` component to use a dedicated `icon: Html` prop, removing the need for the manual `has_icon` boolean. + +### Task: Chip Component Refactoring +- [x] **B-8: Variant-Specific Props:** Add the missing props required by different chip variants: + - [x] `selected: bool` and `removable: bool` for the `Filter` variant. + - [x] `avatar: bool` for the `Input` variant. +- [x] **B-9: Label Prop:** Remove the deprecated `label` prop and use `children` exclusively for the chip's content to align with the reference implementation. +- [x] **B-10: Icon Prop:** Add a dedicated `icon: Html` prop for the leading icon. + +### Task: ChipSet Component Implementation +- [x] **B-11: Keyboard Navigation:** Implement the full keyboard navigation and focus management logic from the `material-web` reference to make the component accessible and fully functional. + +### Task: Dialog Component API Enhancement +- [x] **B-12: Declarative API:** Add an `open: bool` prop for standard, declarative control over the dialog's visibility. +- [x] **B-13: API Parity:** Add the missing props from the `material-web` reference: `quick`, `returnValue`, `type`, and `noFocusTrap`. +- [x] **B-14: Icon Slot:** Add support for the `icon` slot via a dedicated `icon: Html` prop. +- [x] **B-15: Imperative Handle:** Refactor `DialogRef` to correctly call the `show()` and `close()` methods on the underlying web component, rather than directly manipulating attributes. + +### Task: Divider Component API Correction +- [x] **B-16: `inset` Prop:** Add the missing `inset: bool` prop to support equal padding on both sides. + +### Task: Fab Component API Completion +- [x] **B-17: `disabled` Prop:** Add the missing `disabled` prop. +- [x] **B-18: `style` Prop:** Rename the `style` prop to `fab_style` to avoid confusion with the standard HTML `style` attribute. + +## Phase 6: Documentation +- [ ] **B-19: Comprehensive Documentation Pass** + - [ ] Review and write comprehensive doc comments for every prop in every component. + - [ ] Manually review the generated `cargo doc` output for the entire library. + +--- +_**Checklist Complete. Awaiting review and approval.**_ +--- \ No newline at end of file diff --git a/docs/dialog_css_fix.md b/docs/dialog_css_fix.md new file mode 100644 index 0000000..c584506 --- /dev/null +++ b/docs/dialog_css_fix.md @@ -0,0 +1,15 @@ +# CSS Fix for md-dialog Visual Bug + +This document contains the CSS rules required to fix the visual bug in the `md-dialog` component. + +```css +/* Fixes the "faded" issue */ +md-dialog .container { + background-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0)); +} + +/* Fixes the layout bug */ +md-dialog .scroller { + z-index: 1; +} +``` diff --git a/docs/feature_audit_a.md b/docs/feature_audit_a.md new file mode 100644 index 0000000..f64f82b --- /dev/null +++ b/docs/feature_audit_a.md @@ -0,0 +1,345 @@ +# Mat-Yew Component Audit (A) +v.0.0.01 + +## Table of Contents +1. Executive Summary +2. Scope +3. Iteration 1: Button Component - Structural & API Review + 3.1. Summary of Findings + 3.2. API & Props Analysis + 3.3. Structural Analysis + 3.4. Initial Recommendations +4. Iteration 2: Checkbox Component - Structural & API Review + 4.1. Summary of Findings + 4.2. API & Props Analysis + 4.3. Structural Analysis + 4.4. Recommendations +5. Iteration 3: Chip Component (Assist Variant) - Structural & API Review + 5.1. Summary of Findings + 5.2. API & Props Analysis + 5.3. Structural Analysis + 5.4. Recommendations +6. Iteration 4: Chip Set Component - Structural & API Review + 6.1. Summary of Findings + 6.2. API & Props Analysis + 6.3. Structural and Behavioral Analysis + 6.4. Recommendations +7. Iteration 5: Circular Progress Component - Structural & API Review + 7.1. Summary of Findings + 7.2. API & Props Analysis + 7.3. Structural Analysis + 7.4. Recommendations +8. Iteration 6: Dialog Component - Structural & API Review + 8.1. Summary of Findings + 8.2. API & Props Analysis + 8.3. Structural and Behavioral Analysis + 8.4. Recommendations +9. Iteration 7: Divider Component - Structural & API Review + 9.1. Summary of Findings + 9.2. API & Props Analysis + 9.3. Recommendations +10. Iteration 8: Elevation Component - Structural & API Review + 10.1. Summary of Findings + 10.2. API & Props Analysis + 10.3. Recommendations +11. Iteration 9: FAB Component - Structural & API Review + 11.1. Summary of Findings + 11.2. API & Props Analysis + 11.3. Structural Analysis + 11.4. Recommendations +Appendix R - Revision History + +--- + +## 1. Executive Summary + +This document presents the findings of a comprehensive audit of the `mat-yew` component library. The audit's primary goal is to assess the library's alignment with the official Google `material-web` components, focusing on improving user/developer experience, ensuring functional and stylistic uniformity, and achieving feature parity. + +This first iteration focuses on a structural and API-level review of the `Button` component. The initial findings reveal that `mat-yew` acts as a Yew-friendly wrapper around the pre-compiled `material-web` JavaScript components. While this is a valid approach, it has introduced several inconsistencies and missing features that impact the developer experience. + +### 1.1. High-Level Recommendations + +Based on the full audit of nine components, several systemic issues and patterns of divergence from the `material-web` reference have been identified. Addressing these issues across the entire library should be the primary goal of the subsequent development phase. The key recommendations are: + +1. **Adopt Idiomatic Yew Patterns:** Several components, most notably `Checkbox` and `Dialog`, attempt to replicate complex browser behaviors using non-idiomatic `use_effect` hooks for direct DOM manipulation. This is brittle and should be replaced by exposing methods on component refs and using standard Yew state management. +2. **Achieve Full API Parity:** Nearly every component is missing properties that exist in the reference implementation (e.g., `softDisabled` on `Button`, `download` on `Chip`, `quick` on `Dialog`). All missing props should be added to provide the complete, expected feature set. +3. **Correct API Inconsistencies and Bugs:** Numerous props are misspelled (e.g., `typepe` on `Button`, `validitype` on `Checkbox`) or misnamed (e.g., `kind` instead of `variant` on `Fab`). These bugs must be fixed to create a predictable and reliable developer experience. +4. **Embrace a Slot-Based Architecture:** Components like `Dialog` and `Fab` incorrectly use direct props or default children for content that should be passed via named slots (``, ``). The library must be refactored to correctly use named slots, which may involve creating new wrapper components (e.g., `DialogHeadline`, `FabIcon`) to provide a more ergonomic API for Yew developers. + +## 2. Scope + +This audit compares the `mat-yew` library against the following reference implementations: +- **Primary Code Reference:** `https://github.com/material-components/material-web` +- **Primary Design Reference:** `https://m3.material.io/` (Note: Direct analysis is limited due to tool constraints) + +The audit will be conducted in 9-12 iterative reviews, with each iteration increasing in scrutiny. + +## 3. Iteration 1: Button Component - Structural & API Review + +### 3.1. Summary of Findings + +The `mat-yew` `Button` component successfully wraps the core functionality of the `material-web` buttons. However, there are notable discrepancies in the public API (props), including naming convention inconsistencies, a typo in a critical prop, and several missing properties. These issues create a divergence from the reference implementation, potentially leading to a confusing developer experience. + +### 3.2. API & Props Analysis + +A direct comparison of the `mat-yew` button props (`src/button.rs`) and the `material-web` button properties (`button/internal/button.ts`) reveals the following: + +| Property | `material-web` | `mat-yew` | Status | Notes | +|----------------|---------------------|---------------------|-------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `disabled` | `disabled` | `disabled` | **Match** | Core functionality is present. | +| `href` | `href` | `href` | **Match** | Core functionality is present. | +| `target` | `target` | `target` | **Match** | Core functionality is present. | +| `value` | `value` | `value` | **Match** | Core functionality is present. | +| `name` | `name` | `name` | **Match** | Core functionality is present. | +| `trailingIcon` | `trailingIcon` | `trailing_icon` | **Mismatch**| **Naming Convention:** `mat-yew` uses snake_case, while the JS reference uses camelCase. This should be standardized for a consistent DX. | +| `hasIcon` | `hasIcon` | `has_icon` | **Mismatch**| **Naming Convention:** Same as above. | +| `type` | `type` | `typepe` | **BUG** | **Critical Typo:** The `type` prop is misspelled as `typepe` in `mat-yew`, breaking standard HTML form behavior. | +| `softDisabled` | `softDisabled` | - | **Missing** | The `soft-disabled` feature (for focusable but disabled controls) is not exposed in the `mat-yew` component. | +| `download` | `download` | - | **Missing** | The `download` attribute for link-buttons is not exposed in the `mat-yew` component. | +| `form` | (handled by internals) | `form` | **Divergence**| `mat-yew` uses a `use_effect` to manually associate the form, which is a different implementation pattern than the standard `ElementInternals` used by `material-web`. | + +### 3.3. Structural Analysis + +- **Wrapper Implementation:** The `mat-yew` component is not a native Rust implementation but a wrapper that renders the corresponding `material-web` custom element tag (e.g., `md-elevated-button`, `md-filled-button`). This is confirmed by the `import_material_web_module!("/md-web/button.js")` macro call. +- **Variant Handling:** Variants are handled by rendering different tags, which aligns with the `material-web` component structure. This is a good implementation choice. + +### 3.4. Initial Recommendations + +1. **Fix Critical Bug:** Immediately rename the `typepe` prop to `type` to align with HTML standards and the reference component. +2. **Standardize Naming Conventions:** Adopt a consistent naming convention for all props. It is recommended to align with the Rust standard of `snake_case` for the Yew component props and ensure they are correctly mapped to the `camelCase` or `kebab-case` attributes of the underlying web component. +3. **Achieve Prop Parity:** Add the missing `softDisabled` and `download` props to the `mat-yew` component to reach full feature parity with the reference. +4. **Investigate Form Handling:** Review the `form` prop implementation. While functional, a more robust solution might involve a custom `ElementInternals` polyfill or a different approach to ensure long-term compatibility. + +--- +## 4. Iteration 2: Checkbox Component - Structural & API Review + +### 4.1. Summary of Findings + +The `mat-yew` `Checkbox` component exhibits a more significant divergence from its `material-web` counterpart than the `Button`. While it wraps the basic functionality, it attempts to manually polyfill complex browser behaviors like form validation and element internals using a `use_effect` hook. This approach is brittle, error-prone, and has introduced another critical typo in a prop name. The `mat-yew` component exposes several low-level properties that should ideally be handled internally, creating a more complex and less intuitive API for the developer. + +### 4.2. API & Props Analysis + +| Property | `material-web` (via Mixins) | `mat-yew` | Status | Notes | +|---------------------|-----------------------------|-------------------------|-------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `checked` | `checked` | `checked` | **Match** | Core functionality is present. | +| `indeterminate` | `indeterminate` | `indeterminate` | **Match** | Core functionality is present. | +| `disabled` | `disabled` | `disabled` | **Match** | Core functionality is present. | +| `required` | `required` | `required` | **Match** | Core functionality is present. | +| `value` | `value` | `value` | **Match** | Core functionality is present. | +| `name` | `name` | `name` | **Match** | Core functionality is present. | +| `validity` | (from `ElementInternals`) | `validitype` | **BUG** | **Critical Typo & Flawed Approach:** The prop is misspelled as `validitype`. More importantly, this is a manual, one-way data binding attempting to replicate a complex, native browser API. | +| `form` | (from `ElementInternals`) | `form` | **Divergence**| Exposing this directly and setting it via `use_effect` is not idiomatic and circumvents standard form association logic. | +| `labels` | (from `ElementInternals`) | `labels` | **Divergence**| Exposing this directly is unnecessary complexity for the developer. | +| `validationMessage` | (from `ElementInternals`) | `validation_message` | **Divergence**| Same as above. Naming is also inconsistent (`snake_case` vs `camelCase` in JS). | +| `willValidate` | (from `ElementInternals`) | `will_validate` | **Divergence**| Same as above. | + +### 4.3. Structural Analysis + +- **Manual Polyfill via `use_effect`:** The component uses a `use_effect` hook to imperatively set multiple properties on the underlying DOM element using `js_sys::Reflect::set`. This is a strong "code smell" in a declarative framework like Yew. It bypasses the framework's rendering logic and directly manipulates the DOM, which can lead to unpredictable behavior and is difficult to debug. +- **Divergence from Reference Architecture:** The `material-web` component leverages a series of well-defined mixins (`mixinConstraintValidation`, `mixinFormAssociated`) to integrate with browser features cleanly. The `mat-yew` component eschews this for a manual implementation that is both more complex and less robust. + +### 4.4. Recommendations + +1. **Fix Critical Bug:** Immediately rename the `validitype` prop to `validity`. +2. **Rethink Validation and Form Handling:** The entire `use_effect`-based approach to polyfilling element internals should be deprecated and removed. Instead of exposing low-level props like `validity`, `validationMessage`, `form`, etc., the component should expose methods on its `ref` to allow developers to imperatively call validation methods if needed (e.g., `check_validity()`, `report_validity()`), which is a more common pattern in Yew. +3. **Simplify the Public API:** Remove the `form`, `labels`, `validity`, `validation_message`, and `will_validate` props from the public API. The component should handle its internal state and validation more gracefully without requiring the developer to manage these low-level details. +4. **Adopt Idiomatic Yew Patterns:** The component should be refactored to manage its state and interactions using standard Yew patterns, minimizing direct DOM manipulation via `use_effect`. + +## 5. Iteration 3: Chip Component (Assist Variant) - Structural & API Review + +### 5.1. Summary of Findings + +The `mat-yew` `Chip` component provides a good foundation by wrapping the four variants (`Assist`, `Filter`, `Input`, `Suggestion`) of the `material-web` chip. The initial audit of the `Assist` variant shows a simpler and more direct mapping of props compared to the `Checkbox`, which is a positive sign. However, it still suffers from missing properties that limit its functionality, particularly for link-based chips. + +### 5.2. API & Props Analysis (Assist Chip) + +| Property | `material-web` (AssistChip) | `mat-yew` | Status | Notes | +|------------------|-----------------------------|---------------------|-------------|---------------------------------------------------------------------------------------------------| +| `disabled` | `disabled` | `disabled` | **Match** | Core functionality is present. | +| `label` | `label` | `label` | **Match** | Core functionality is present. | +| `elevated` | `elevated` | `elevated` | **Match** | Core functionality is present. | +| `href` | `href` | `href` | **Match** | Core functionality is present. | +| `target` | `target` | `target` | **Match** | Core functionality is present. | +| `alwaysFocusable`| `alwaysFocusable` | `always_focusable` | **Mismatch**| **Naming Convention:** `snake_case` vs `camelCase`. | +| `download` | `download` | - | **Missing** | The `download` attribute for link-based chips is not exposed. | +| `softDisabled` | `softDisabled` (inherited) | - | **Missing** | The `soft-disabled` feature is not exposed in the `mat-yew` component. | + +### 5.3. Structural Analysis + +- **Variant Handling:** The `Chip` component correctly uses an enum (`ChipVariants`) to map to the different `material-web` custom element tags (`md-assist-chip`, etc.). This is a clean and effective approach. +- **Direct Prop Mapping:** Unlike the `Checkbox`, the `Chip` component maps props directly in the `html!` macro without a complex `use_effect` hook. This is a much more robust and idiomatic Yew pattern. + +### 5.4. Recommendations + +1. **Achieve Prop Parity:** Add the missing `download` and `softDisabled` props to the `Chip` component to provide the full feature set of the reference component. +2. **Standardize Naming Conventions:** Ensure the `always_focusable` prop is correctly mapped from the Rust `snake_case` to the web component's `always-focusable` attribute. While the current implementation works, a consistent internal convention should be established. +3. **Conduct Full Variant Audit:** This review only covered the `Assist` chip. A full audit requires analyzing the specific properties for `Filter`, `Input`, and `Suggestion` chips to ensure their unique features (e.g., `selected`, `removable`) are also exposed in `mat-yew`. + +## 6. Iteration 4: Chip Set Component - Structural & API Review + +### 6.1. Summary of Findings + +The `mat-yew` `chips.rs` component is fundamentally broken and does not correctly implement the `material-web` `md-chip-set`. It renders the wrong tag, defines props for a single chip instead of a container, and completely lacks the necessary keyboard navigation and focus management logic that is the primary purpose of the `md-chip-set`. This component requires a complete rewrite. + +### 6.2. API & Props Analysis + +- **`material-web` `md-chip-set`:** This component has **no public properties**. Its purpose is purely behavioral, managing the focus and keyboard navigation of the ``-ted `md-*-chip` children. +- **`mat-yew` `Chips` component:** This component incorrectly defines props that belong on an individual chip (`label`, `selected`, `disabled`). This indicates a fundamental misunderstanding of the reference component's architecture. + +### 6.3. Structural and Behavioral Analysis + +| Feature | `material-web` (`md-chip-set`) | `mat-yew` (`chips.rs`) | Status | +|------------------------|--------------------------------------------------------------|---------------------------------------------------------------|-------------| +| **Rendered Tag** | `` | `` | **BUG** | +| **Child Handling** | Manages slotted children via `` | Does not accept children. | **BUG** | +| **Keyboard Nav** | Full Left/Right/Home/End key navigation. | **Missing** | **Missing** | +| **Focus Management** | Manages `tabIndex` of children to maintain single tab stop. | **Missing** | **Missing** | +| **ARIA Role** | `role="toolbar"` | **Missing** | **Missing** | + +### 6.4. Recommendations + +1. **Complete Rewrite:** The existing `chips.rs` file should be deleted or completely rewritten. +2. **Correct Tag and Structure:** The new component should render a `` tag and accept `children` to be passed into a ``. +3. **Remove Incorrect Props:** The `label`, `selected`, and `disabled` props should be removed as they do not belong on the chip set container. +4. **Verify Behavior:** Once rewritten, the component must be tested to ensure that keyboard navigation and focus management of the child chips works as expected. This is the primary feature of the chip set. + +## 7. Iteration 5: Circular Progress Component - Structural & API Review + +### 7.1. Summary of Findings + +The `mat-yew` `CircularProgress` component is a straightforward wrapper around the `material-web` component. It correctly exposes the primary properties for controlling the progress state. However, it introduces a `four_color` property that is not part of the `material-web` base component, representing a significant divergence. The prop types in `mat-yew` are also `usize`, which should be a floating-point number to allow for more granular progress updates. + +### 7.2. API & Props Analysis + +| Property | `material-web` (from Progress) | `mat-yew` | Status | Notes | +|-----------------|--------------------------------|-------------------|-------------|------------------------------------------------------------------------------------------------------------------------------------| +| `value` | `value: number` | `value: usize` | **Mismatch**| **Type Mismatch:** Should be a float/number, not an integer, to allow for fractional progress. | +| `max` | `max: number` | `max: usize` | **Mismatch**| **Type Mismatch:** Same as above. | +| `indeterminate` | `indeterminate: boolean` | `indeterminate: boolean` | **Match** | Core functionality is present. | +| `fourColor` | - | `four_color: bool`| **Divergence**| **Non-standard Prop:** This property does not exist in the reference component. It may be a feature of an older or different library. | + +### 7.3. Structural Analysis + +- **Direct Prop Mapping:** The component uses a clean, direct mapping of props in the `html!` macro, which is a good pattern. +- **Inheritance:** The `mat-yew` implementation does not account for the fact that the `material-web` `CircularProgress` inherits from a base `Progress` class. This is where the core props are defined. + +### 7.4. Recommendations + +1. **Correct Prop Types:** Change the type of `value` and `max` from `usize` to a floating-point type (e.g., `f32` or `f64`) to align with the reference implementation and allow for fractional values. The props should then be passed to the web component as strings, as they currently are. +2. **Investigate `four_color`:** Determine the origin and purpose of the `four-color` attribute. If it's a legacy or custom feature, it should be clearly documented as a `mat-yew`-specific extension. If it's deprecated or incorrect, it should be removed. +3. **Review Base `Progress` Component:** The audit should be expanded to include the base `Progress` component from `material-web` to ensure all inherited features and ARIA attributes are correctly handled. + +## 8. Iteration 6: Dialog Component - Structural & API Review + +### 8.1. Summary of Findings + +The `mat-yew` `Dialog` component is a non-functional stub and requires a complete rewrite. It fails to implement the most critical features of the `material-web` dialog, such as slotted content for the headline, content, and actions, as well as all event handling, focus trapping, and animation logic. The props it exposes (`heading`, `content`) are incorrect and promote an anti-pattern compared to the slot-based architecture of the reference component. + +### 8.2. API & Props Analysis + +The `mat-yew` `Dialog` props are fundamentally misaligned with the reference component. + +| Feature | `material-web` (`Dialog`) | `mat-yew` (`Dialog`) | Status | +|-----------------|----------------------------------------------------------------|----------------------------------------------------|-------------| +| **Content** | Uses `` for content. | Exposes `heading` and `content` string props. | **BUG** | +| **API** | `open`, `returnValue`, `quick`, `type`, `noFocusTrap` | Only `open` is present. All others are missing. | **Missing** | +| **Events** | `open`, `opened`, `close`, `closed`, `cancel` | None are handled or exposed. | **Missing** | +| **Methods** | `show()`, `close()` | No equivalent methods exposed. | **Missing** | + +### 8.3. Structural and Behavioral Analysis + +The `mat-yew` component is missing nearly all essential features: +- **No Slot Support:** It does not use named slots, which is the correct way to project content into the dialog's structure. +- **No Focus Trapping:** The entire focus management system, a critical accessibility feature for dialogs, is absent. +- **No Event Handling:** None of the lifecycle events are captured or exposed. +- **No Animation Control:** The `quick` property and animation override hooks are missing. + +### 8.4. Recommendations + +1. **Complete Rewrite:** The `dialog.rs` file must be completely rewritten from scratch. +2. **Adopt Slot-Based Architecture:** The new component must be designed around a `Children` prop that can be projected into named slots. A common pattern in Yew is to have separate components like `DialogHeadline`, `DialogContent`, and `DialogActions` that developers can use to structure their content, which then get rendered with the correct `slot="..."` attribute. +3. **Implement Full API Parity:** All props from the `material-web` dialog (`open`, `returnValue`, `quick`, `type`, `noFocusTrap`) must be added. +4. **Expose Events and Methods:** The component should expose `Callback` props for all standard events (`onopen`, `onopened`, etc.) and expose `show()` and `close()` methods via its `ref`. +5. **Ensure Focus Trapping:** The focus trapping behavior is a non-negotiable feature for an accessible dialog and must be verified. + +## 9. Iteration 7: Divider Component - Structural & API Review + +### 9.1. Summary of Findings + +The `mat-yew` `Divider` component has diverged from the `material-web` reference. It is missing the granular `insetStart` and `insetEnd` properties, which allow for more precise alignment, and instead implements a non-standard `vertical` property. While a vertical divider can be useful, it's not part of the reference component's API and should be handled via styling or a separate component. + +### 9.2. API & Props Analysis + +| Property | `material-web` (`Divider`) | `mat-yew` (`Divider`) | Status | Notes | +|--------------|----------------------------|-----------------------|--------------|--------------------------------------------------------------------------| +| `inset` | `inset: boolean` | `inset: boolean` | **Match** | Core functionality is present. | +| `insetStart` | `insetStart: boolean` | - | **Missing** | The `inset-start` attribute is not exposed. | +| `insetEnd` | `insetEnd: boolean` | - | **Missing** | The `inset-end` attribute is not exposed. | +| `vertical` | - | `vertical: boolean` | **Divergence** | This property does not exist in the reference component. | + +### 9.3. Recommendations + +1. **Achieve Prop Parity:** Add the `insetStart` and `insetEnd` boolean props to the `mat-yew` component to match the reference API. +2. **Remove Non-Standard Prop:** Remove the `vertical` prop. Vertical dividers should be achieved through CSS styling (`width: 1px; height: 100%;`) rather than a component property, to better align with standard HTML/CSS practices and the reference implementation. +3. **Update Documentation:** The component's documentation and examples should be updated to reflect the new `insetStart`/`insetEnd` props and remove any mention of the `vertical` prop. + +## 10. Iteration 8: Elevation Component - Structural & API Review + +### 10.1. Summary of Findings + +The `mat-yew` `Elevation` component fundamentally misunderstands the purpose of the `material-web` reference component. The `material-web` `md-elevation` is a prop-less element that simply provides a `` for a shadow to be projected onto; the actual elevation *level* is controlled by applying CSS custom properties to the *parent* component. The `mat-yew` implementation incorrectly adds a `level` prop, which attempts to control the elevation directly, a pattern that diverges from the reference design. + +### 10.2. API & Props Analysis + +| Property | `material-web` (`Elevation`) | `mat-yew` (`Elevation`) | Status | Notes | +|----------|------------------------------|-------------------------|--------------|--------------------------------------------------------------------| +| `level` | - | `level: Option` | **Divergence** | The reference component has no props. This is a non-standard API. | + +### 10.3. Recommendations + +1. **Remove the `level` Prop:** The `level` property should be removed entirely from the `mat-yew` `Elevation` component. +2. **Update Component to be Prop-less:** The component should be a simple, prop-less functional component that just renders ``. +3. **Educate via Documentation:** The documentation for the `Elevation` component must be updated to clearly explain that elevation is controlled by applying the `--md-elevation-level` (and related) CSS custom properties to the parent container that *contains* the `` component. Provide clear examples. + +## 11. Iteration 9: FAB Component - Structural & API Review + +### 11.1. Summary of Findings + +The `mat-yew` `Fab` component correctly wraps the `md-fab` and `md-branded-fab` elements. However, it introduces an API inconsistency by renaming the `variant` property to `kind`. More critically, it fails to correctly implement the icon slot, instead passing the icon as a default child, which will not be rendered correctly by the `material-web` component. The use of generic `AttrValue` for props with a limited set of options (`variant`, `size`) also reduces type safety. + +### 11.2. API & Props Analysis + +| Property | `material-web` (`Fab`/`SharedFab`) | `mat-yew` (`Fab`) | Status | Notes | +|-----------|------------------------------------|------------------------|-------------|-------------------------------------------------------------------------------------------------------------------------------------------| +| `variant` | `variant: FabVariant` | `kind: Option` | **BUG** | **Prop Mismatch:** The `mat-yew` prop is named `kind` but is passed to a `variant` attribute. This is confusing and should be renamed to `variant`. | +| `size` | `size: FabSize` | `size: Option` | **Mismatch**| `mat-yew` should use a `FabSize` enum for type safety instead of a generic string. | +| `label` | `label: string` | `label: Option` | **Match** | Core functionality is present. | +| `lowered` | `lowered: boolean` | `lowered: bool` | **Match** | Core functionality is present. | + +### 11.3. Structural Analysis + +- **Incorrect Slot Usage:** The `material-web` FAB expects the icon to be passed into a named slot (``). The `mat-yew` component passes its `children` to the default slot, which will cause the icon to be ignored by the underlying web component. This is a critical bug. +- **Variant Handling:** The component correctly uses an enum (`FabVariants`) to switch between the standard `md-fab` and `md-branded-fab` tags. + +### 11.4. Recommendations + +1. **Fix Prop Naming:** Rename the `kind` prop to `variant` in `fab.rs` to match the `material-web` API and the attribute it's being passed to. +2. **Implement Type-Safe Enums:** Create and use `FabVariant` and `FabSize` enums for the `variant` and `size` props to improve developer experience and prevent invalid values. +3. **Correct Icon Slot:** The `Fab` component should be modified to accept a prop specifically for the icon (e.g., `icon: Html`) and render it inside a `...`. The default `children` prop should not be used for the icon. +4. **Audit Branded FAB:** The `md-branded-fab` has slightly different constraints (e.g., cannot be `small`). A specific audit should be performed to ensure these are handled correctly in `mat-yew`. + +## Appendix R - Revision History + +- **v.0.0.01 (Current):** + - Initial creation of the audit report. + - Completed Iteration 1: A structural and API-level review of the Button component. + - Completed Iteration 2: A structural and API-level review of the Checkbox component. + - Completed Iteration 3: A structural and API-level review of the Chip (Assist Variant) component. + - Completed Iteration 4: A structural and API-level review of the Chip Set component. + - Completed Iteration 5: A structural and API-level review of the Circular Progress component. + - Completed Iteration 6: A structural and API-level review of the Dialog component. + - Completed Iteration 7: A structural and API-level review of the Divider component. + - Completed Iteration 8: A structural and API-level review of the Elevation component. + - Completed Iteration 9: A structural and API-level review of the FAB component. + - Identified initial findings, including critical bugs, API mismatches, and missing features. + - Provided initial recommendations for all audited components. \ No newline at end of file diff --git a/docs/feature_audit_b.md b/docs/feature_audit_b.md new file mode 100644 index 0000000..6941f9b --- /dev/null +++ b/docs/feature_audit_b.md @@ -0,0 +1,96 @@ +# Mat-Yew Library: Comprehensive Audit `B` +v.0.0.1 + +## 1. Audit Objective + +This document presents a comprehensive, high-scrutiny audit of the `mat-yew` component library. The primary objective is to identify all discrepancies in functionality, styling, and developer experience when compared against the canonical reference implementations: +- **Material Design 3 (M3) Guidelines:** [m3.material.io](https://m3.material.io/) +- **Material Web Components:** [github.com/material-components/material-web](https://github.com/material-components/material-web) + +The goal is to produce a detailed, actionable checklist (`docs/audit_b_checklist.md`) that will guide the next phase of development, ensuring the library is robust, uniform, and fully aligned with the Material Design standard. + +## 2. Audit Scope + +The audit will cover all existing components in the `mat-yew` library. The review process will be iterative, consisting of 9-12 passes with increasing criticality. + +## 3. Initial Findings & High-Level Themes (Pass 1-9) + +### 3.1. Architectural Divergence: Monolithic Components vs. Distinct Elements + +A primary architectural difference has been identified. The `material-web` library provides distinct custom elements for each component style (e.g., ``, ``). In contrast, `mat-yew` uses a single, monolithic component with a `variant` prop to differentiate styles. + +- **Assessment:** This is a reasonable and idiomatic pattern for Yew that improves type safety. +- **Recommendation:** Maintain this monolithic component approach, but ensure the internal implementation correctly maps to the distinct web components. This design choice should be applied uniformly across the library. + +### 3.2. Developer Experience (DX): Overly Complex Prop Types + +Across the board, props are unnecessarily complex, using `Option` where a simple `T` with a default value would suffice. + +- **Example:** `disabled: Option` should be `disabled: bool` with `#[prop_or_default]`. +- **Impact:** This complicates the component's API, requiring developers to wrap values in `Some()` and making the code more verbose than necessary. +- **Recommendation:** Refactor all props to use simple types and leverage `#[prop_or_default]` for cleaner, more ergonomic component usage. This should be a library-wide change. + +### 3.3. Missing ARIA and Form Integration + +The components consistently lack proper integration with ARIA attributes and form-associated features. The `material-web` components make extensive use of `mixinDelegatesAria` and `mixinConstraintValidation`. + +- **Impact:** This represents a critical accessibility gap and limits the utility of the components in real-world forms. +- **Recommendation:** A standardized, reusable solution for ARIA and form support must be developed and applied to all applicable components. + +## 4. Component-Specific Discrepancies + +### 4.1. `Button` Component (`src/button.rs`) - *Pass 1* + +- **Missing ARIA Support:** The component completely lacks support for essential ARIA attributes (`aria-label`, `aria-haspopup`, etc.). +- **Manual Icon Handling:** The current implementation requires developers to manually set a `has_icon: bool` prop. A dedicated `icon: Option` prop would be more idiomatic and allow for automatic detection. +- **Inconsistent Prop Naming:** The `trailing_icon` prop (snake_case) does not match the `camelCase` convention of the underlying web component attribute (`trailingIcon`). +- **Unnecessary `Option` Wrappers:** All props are wrapped in an `Option`, leading to a verbose and unintuitive API. + +### 4.2. `Checkbox` Component (`src/checkbox.rs`) - *Pass 2* + +- **Missing ARIA Support:** Like the Button, the Checkbox lacks any mechanism to apply ARIA attributes. +- **Incomplete Form & Validation Support:** The component is missing the full feature set for constraint validation (`checkValidity()`, `reportValidity()`) that is present in the `material-web` reference. +- **Complex Prop Types:** The `checked` and `indeterminate` props are `Option` instead of `bool`. The `value` and `name` props are also unnecessarily wrapped in `Option`. + +### 4.3. `Chip` Component (`src/chip.rs`) - *Pass 3* + +- **Missing Variant-Specific Props:** The component is missing key props required by its variants, such as `selected` and `removable` for filter chips, and `avatar` for input chips. +- **Confusing Label Prop:** The component has both a `label: Option` prop and accepts `children: Html`. The `material-web` reference uses the default slot for the label, and its `label` prop is deprecated. The `mat-yew` component should remove the `label` prop and use `children` exclusively for the content. +- **Missing Icon Support:** There is no dedicated prop for adding a leading icon, a feature that is standard in the `material-web` reference. +- **Unnecessary `Option` Wrappers:** All string-based and boolean props are unnecessarily wrapped in `Option`. + +### 4.4. `ChipSet` Component (`src/chip_set.rs`) - *Pass 4* + +- **Critical Functionality Gap:** The `mat-yew` component is a stateless wrapper around the `` tag. It is completely missing the essential keyboard navigation and focus management logic that is implemented in the `material-web` `ChipSet` class. This makes the component non-functional from an accessibility and usability perspective. + +### 4.5. `CircularProgress` Component (`src/circular_progress.rs`) - *Pass 5* + +- **Missing ARIA Support:** The component is missing an `aria-label` prop, which is necessary for accessibility, especially in indeterminate mode. The underlying `material-web` component supports this via the `mixinDelegatesAria`. +- **API Parity:** Otherwise, the component's API is clean and directly maps to the `material-web` reference, serving as a good model for other components. + +### 4.6. `Dialog` Component (`src/dialog.rs`) - *Pass 6* + +- **Missing Declarative API:** The component lacks an `open: bool` prop, which is the standard declarative way to control its visibility. It currently relies on an imperative `DialogRef`. +- **Incomplete API:** The component is missing the `quick`, `returnValue`, `type`, and `noFocusTrap` props from the reference implementation. +- **Missing `icon` Slot:** There is no prop to provide content for the `icon` slot. +- **Incomplete Imperative Handle:** The `DialogRef` is a placeholder that directly manipulates the `open` attribute instead of correctly calling the `show()` and `close()` methods on the underlying web component. + +### 4.7. `Divider` Component (`src/divider.rs`) - *Pass 7* + +- **Missing `inset` Prop:** The component is missing the `inset` prop, which provides equal padding on both sides. +- **Inconsistent Prop Naming:** The existing props (`inset_start`, `inset_end`) use `snake_case` instead of the standard `camelCase` for attributes. + +### 4.8. `Elevation` Component (`src/elevation.rs`) - *Pass 8* + +- **No Issues Found:** The `Elevation` component is correctly implemented as a simple, prop-less wrapper. It serves as a model for how to correctly wrap a presentational web component. + +### 4.9. `Fab` (Floating Action Button) Component (`src/fab.rs`) - *Pass 9* + +- **Missing `disabled` Prop:** The component cannot be disabled, which is a critical feature for a button-like element. +- **Missing ARIA Support:** No `aria-label` prop is available, which is essential for accessibility, especially for icon-only FABs. +- **Unnecessary `Option` Wrappers:** The `variant`, `size`, and `label` props are unnecessarily wrapped in `Option`, complicating the API. +- **Confusing `style` Prop:** The `style` prop is used to select between the `` and `` tags, which could be confused with the HTML `style` attribute. + +--- +_**Audit Complete. Awaiting next steps.**_ +--- \ No newline at end of file diff --git a/docs/handoff_notes_modal_bug.md b/docs/handoff_notes_modal_bug.md new file mode 100644 index 0000000..7c39ae8 --- /dev/null +++ b/docs/handoff_notes_modal_bug.md @@ -0,0 +1,52 @@ +# Handoff Notes: Unresolved Modal Visual Bugs + +## 1. Summary + +This document details the investigation into two persistent visual bugs affecting the `md-dialog` component in the `modaldemo` application: +1. **Faded Appearance:** The dialog content appears semi-transparent, showing the dark scrim behind it. +2. **Layout Corruption:** The dialog's headline area incorrectly expands to cover the entire dialog, hiding the content and actions. + +Despite extensive debugging, these issues remain unresolved in the final build, even though a definitive fix was identified and proven to work using a live debugging method. + +## 2. Live Debugging Method and Findings + +To diagnose the issue, a "live debugging" method was employed using a custom Playwright script (`jules-scratch/verification/live_debug_modal.py`). This script allowed for the dynamic injection of CSS `