diff --git a/README.md b/README.md index 94d2602..ba7f9a1 100644 --- a/README.md +++ b/README.md @@ -5,12 +5,15 @@ This demo shows how native Material Web Components can be used in NextJS/React, ## Roadmap 🚀 - [ ] Make sure all native Web Components are properly working - [x] Demo all components - - [ ] Add all missing events + - [x] Add all missing events - [ ] Add theming (design tokens) through Tailwind (i.e. remove all ts-ignores) - [ ] Resolve SSR issues, make compatible with NextJS (i.e. remove all dynamic imports) - [ ] Separate the demo from the actual UI code - [ ] Make installable as a package. Preferably keep the code in-project, like shadcn/ui, so developers have more control - [ ] 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. - [ ] Mix this library with Tailwind and BaseUI in order to complete missing Components which may prove useful for building production applications # NextJS Boilerplate diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a3b6aa8..7c9892e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -16,9 +16,10 @@ export default function RootLayout({ }>) { return ( - - - + + + + {/* From BaseUI: https://mui.com/base-ui/getting-started/usage/#responsive-meta-tag */} {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index 09c9275..4b53f58 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -69,6 +69,7 @@ import GitHubButton from "react-github-btn"; import Elevation from "@/components/ui/elevation"; import Ripple from "@/components/ui/ripple"; import FocusRing from "@/components/ui/focus-ring"; +import Progress from "@/components/ui/progress"; const Column = ({ children, ...props }: { children: any; id: string }) => { return ( @@ -285,8 +286,8 @@ export default function Home() { {isPlayingProgressIndicators ? 'pause' : 'play_arrow'} - - + + diff --git a/src/components/ui/button/tailwind-config.ext.json b/src/components/ui/button/tailwind-config.ext.json new file mode 100644 index 0000000..b9382c5 --- /dev/null +++ b/src/components/ui/button/tailwind-config.ext.json @@ -0,0 +1,2 @@ +// maybe this file can serve as an "extension" to the Tailwind config which should later be merged. +// This way, each component could define their own design tokens and extend the tailwind config diff --git a/src/components/ui/progress/index.tsx b/src/components/ui/progress/index.tsx index 6fb4e41..0d2ae86 100644 --- a/src/components/ui/progress/index.tsx +++ b/src/components/ui/progress/index.tsx @@ -24,37 +24,9 @@ export const LinearProgress = createComponent({ react: React, }); -const Progress = (props: { - type: 'circular' | 'linear'; - variant?: 'default' | 'four-color'; - value?: number; - buffer?: number; - indeterminate?: boolean; - ariaLabel?: string; -}) => { - const { type, variant = 'default', ...rest } = props; - - if (type === 'circular') { - return ( - - ); - } else if (type === 'linear') { - return ( - - ); - } else { - return null; - } +const Progress = (props: any) => { + if (props.variant === 'md-linear-progress') return {props.children}; + return {props.children}; }; export default Progress;