Skip to content

Commit

Permalink
chore: prettify output
Browse files Browse the repository at this point in the history
  • Loading branch information
SaadBazaz committed Aug 4, 2024
1 parent f5e289e commit 85de754
Show file tree
Hide file tree
Showing 64 changed files with 9,058 additions and 4,934 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,4 @@ jobs:
# - name: Send a Slack notification if a publish happens
# if: steps.changesets.outputs.published == 'true'
# # You can do something when a publish happens.
# run: my-slack-bot send-notification --message "A new version of ${GITHUB_REPOSITORY} was published!"
# run: my-slack-bot send-notification --message "A new version of ${GITHUB_REPOSITORY} was published!"
37 changes: 22 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# Material Web Components for React

[![npm version](https://badge.fury.io/js/material-web-components-react.svg)](https://www.npmjs.com/package/material-web-components-react)
![release](https://img.shields.io/badge/release-beta-blue)
[![docs](https://img.shields.io/badge/read%20the%20docs-8A2BE2)](https://material-web.dev)
Expand All @@ -9,7 +10,9 @@ A thin React wrapper over [@material/web](https://github.com/material-components
![hero](https://material-web-components-react.grayhat.studio/opengraph-image.jpg)

## Installation

To use Material Web Components for React as a **library** in your project, run:

```sh
npm install material-web-components-react
```
Expand All @@ -23,36 +26,40 @@ Under the hood, this library simply uses the official [@material/web](https://gi
We're looking for maintainers and contributors!

### Roadmap 🚀

- [ ] Make sure all native Web Components are properly working
- [x] Demo all components
- [x] Add all missing events
- [ ] Add theming (design tokens) through Tailwind (i.e. remove all ts-ignores)
- [x] Demo all components
- [x] Add all missing events
- [ ] Add theming (design tokens) through Tailwind (i.e. remove all ts-ignores)
- [x] Resolve SSR/SSG issues, make compatible with NextJS (i.e. remove all dynamic imports)
- [x] Separate the demo from the actual UI code
- [x] Make installable as a package.
- [ ] Make installable as code-in-project, like shadcn/ui, so developers have more control
- [ ] Add better TypeScript support
- [ ] Sync with upstream (i.e. https://github.com/material-components/material-web/blob/main/docs/intro.md) through webhooks and automations
- [ ] Use [Copybara](https://github.com/google/copybara) (or good ol' GitHub webhooks) to automate syncing with upstream
- [ ] 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.
- [ ] Create a PR with the new Component code.
- [ ] Use [Copybara](https://github.com/google/copybara) (or good ol' GitHub webhooks) to automate syncing with upstream
- [ ] 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.
- [ ] Create a PR with the new Component code.
- [ ] Mix this library with Tailwind and BaseUI in order to complete missing Components which may prove useful for building production applications
- [x] App Bars
- [x] Top App Bar
- [x] Bottom App Bar
- [x] Stack
- [x] Box
- [x] Navigation Rail
- [ ] Container
- [ ] Typography
- [x] App Bars
- [x] Top App Bar
- [x] Bottom App Bar
- [x] Stack
- [x] Box
- [x] Navigation Rail
- [ ] Container
- [ ] Typography

### Credits

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.

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.

Thanks for improving the demo:

- [TalhaHere12](https://github.com/TalhaHere12)

Thanks for building BottomSheet:
- [Aroonaongithhub](https://github.com/Aroonaongithhub/)

- [Aroonaongithhub](https://github.com/Aroonaongithhub/)
6 changes: 5 additions & 1 deletion WHY.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
Let's evaluate our options.

## Libraries which implement Material 2

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:

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

## Libraries which implement Material 3

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:

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

## Popular, but slow

[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!

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

## The future: Web Components!

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!

Another great library to plug in here would be: https://www.mdui.org/en/docs/2/
Another great library to plug in here would be: https://www.mdui.org/en/docs/2/
6 changes: 3 additions & 3 deletions apps/demo/next.config.mjs
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
/** @type {import('next').NextConfig} */

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

const nextConfig = {
reactStrictMode: true,
swcMinify: true,
reactStrictMode: true,
swcMinify: true,
};

export default withLitSSR()(nextConfig);
Loading

0 comments on commit 85de754

Please sign in to comment.