Skip to content

Commit 85de754

Browse files
committed
chore: prettify output
1 parent f5e289e commit 85de754

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+9058
-4934
lines changed

.github/workflows/release.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,4 @@ jobs:
4141
# - name: Send a Slack notification if a publish happens
4242
# if: steps.changesets.outputs.published == 'true'
4343
# # You can do something when a publish happens.
44-
# run: my-slack-bot send-notification --message "A new version of ${GITHUB_REPOSITORY} was published!"
44+
# run: my-slack-bot send-notification --message "A new version of ${GITHUB_REPOSITORY} was published!"

README.md

+22-15
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# Material Web Components for React
2+
23
[![npm version](https://badge.fury.io/js/material-web-components-react.svg)](https://www.npmjs.com/package/material-web-components-react)
34
![release](https://img.shields.io/badge/release-beta-blue)
45
[![docs](https://img.shields.io/badge/read%20the%20docs-8A2BE2)](https://material-web.dev)
@@ -9,7 +10,9 @@ A thin React wrapper over [@material/web](https://github.com/material-components
910
![hero](https://material-web-components-react.grayhat.studio/opengraph-image.jpg)
1011

1112
## Installation
13+
1214
To use Material Web Components for React as a **library** in your project, run:
15+
1316
```sh
1417
npm install material-web-components-react
1518
```
@@ -23,36 +26,40 @@ Under the hood, this library simply uses the official [@material/web](https://gi
2326
We're looking for maintainers and contributors!
2427

2528
### Roadmap 🚀
29+
2630
- [ ] Make sure all native Web Components are properly working
27-
- [x] Demo all components
28-
- [x] Add all missing events
29-
- [ ] Add theming (design tokens) through Tailwind (i.e. remove all ts-ignores)
31+
- [x] Demo all components
32+
- [x] Add all missing events
33+
- [ ] Add theming (design tokens) through Tailwind (i.e. remove all ts-ignores)
3034
- [x] Resolve SSR/SSG issues, make compatible with NextJS (i.e. remove all dynamic imports)
3135
- [x] Separate the demo from the actual UI code
3236
- [x] Make installable as a package.
3337
- [ ] Make installable as code-in-project, like shadcn/ui, so developers have more control
3438
- [ ] Add better TypeScript support
3539
- [ ] Sync with upstream (i.e. https://github.com/material-components/material-web/blob/main/docs/intro.md) through webhooks and automations
36-
- [ ] Use [Copybara](https://github.com/google/copybara) (or good ol' GitHub webhooks) to automate syncing with upstream
37-
- [ ] Use [lit-analyzer](https://www.npmjs.com/package/lit-analyzer) to see which Web Components changed. Perhaps mix with an LLM to compare existing and newly autogenerated code.
38-
- [ ] Create a PR with the new Component code.
40+
- [ ] Use [Copybara](https://github.com/google/copybara) (or good ol' GitHub webhooks) to automate syncing with upstream
41+
- [ ] Use [lit-analyzer](https://www.npmjs.com/package/lit-analyzer) to see which Web Components changed. Perhaps mix with an LLM to compare existing and newly autogenerated code.
42+
- [ ] Create a PR with the new Component code.
3943
- [ ] Mix this library with Tailwind and BaseUI in order to complete missing Components which may prove useful for building production applications
40-
- [x] App Bars
41-
- [x] Top App Bar
42-
- [x] Bottom App Bar
43-
- [x] Stack
44-
- [x] Box
45-
- [x] Navigation Rail
46-
- [ ] Container
47-
- [ ] Typography
44+
- [x] App Bars
45+
- [x] Top App Bar
46+
- [x] Bottom App Bar
47+
- [x] Stack
48+
- [x] Box
49+
- [x] Navigation Rail
50+
- [ ] Container
51+
- [ ] Typography
4852

4953
### Credits
54+
5055
Huge shout out to Elizabeth Mitchell ([asyncLiz](https://github.com/asyncliz/)) and the rest of the Material Design team for their awesome Web Components implementation.
5156

5257
Thank you [Travis Reeder](https://github.com/treeder) for your Web Component implementation of Navigation Rail. I had to copy it to this project. I couldn't use yours directly because it would import `@material/web` again and bring conflicts.
5358

5459
Thanks for improving the demo:
60+
5561
- [TalhaHere12](https://github.com/TalhaHere12)
5662

5763
Thanks for building BottomSheet:
58-
- [Aroonaongithhub](https://github.com/Aroonaongithhub/)
64+
65+
- [Aroonaongithhub](https://github.com/Aroonaongithhub/)

WHY.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
Let's evaluate our options.
44

55
## Libraries which implement Material 2
6+
67
These are libraries which were built upon an older specification of Google's official Material Web Components, but those followed the Material 2 specification. Such libraries are either discontinued, or slowly dying out. Those include, but are not limited to:
78

89
- material-tailwind (currently looks like the best!): https://github.com/creativetimofficial/material-tailwind
@@ -13,6 +14,7 @@ These are libraries which were built upon an older specification of Google's off
1314
Check out more libraries listed at https://m2.material.io/develop/web/guides/framework-wrappers .
1415

1516
## Libraries which implement Material 3
17+
1618
These are libraries which implement Material 3, the latest specification (so far) from the Material Design team. Some look great, others... not really. These include, but are not limited to:
1719

1820
- beercss (insane work, totally framework independent. I should consider using this): https://www.beercss.com/
@@ -21,11 +23,13 @@ These are libraries which implement Material 3, the latest specification (so far
2123
I'd love to add more. Send in a Pull Request if you'd like to contribute more.
2224

2325
## Popular, but slow
26+
2427
[MUI](https://mui.com/) is the library which fits this category. While I love their work, [they are slow](https://github.com/mui/material-ui/issues/29345) at keeping up with latest design philosophies and practices (And rightly so! A lot of software depends on their stability). MUI has announced better Material 3 support in Q4 of 2024. Too far away, at least for when this project started!
2528

2629
For MUI, and similar libraries, I recommend using them alongside this library to "fill in" the missing parts.
2730

2831
## The future: Web Components!
32+
2933
The library we use under the hood, [@material/web](https://github.com/material-components/material-web) fits here. Web Components are the future, we must accept it. But while we build towards that future, it's obvious that current applications must be maintained. Hence the existence of this library. Our aim would be to keep this library synced with this underlying new technology as much as possible, so when we transition, it's seamless!
3034

31-
Another great library to plug in here would be: https://www.mdui.org/en/docs/2/
35+
Another great library to plug in here would be: https://www.mdui.org/en/docs/2/

apps/demo/next.config.mjs

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/** @type {import('next').NextConfig} */
22

3-
import withLitSSR from '@lit-labs/nextjs';
3+
import withLitSSR from "@lit-labs/nextjs";
44

55
const nextConfig = {
6-
reactStrictMode: true,
7-
swcMinify: true,
6+
reactStrictMode: true,
7+
swcMinify: true,
88
};
99

1010
export default withLitSSR()(nextConfig);

0 commit comments

Comments
 (0)