From ea5cd6b86ab9df578f148c298ac45e991d5ac657 Mon Sep 17 00:00:00 2001 From: "Saad A. Bazaz" Date: Mon, 8 Jul 2024 12:49:52 +0500 Subject: [PATCH 1/3] feat(wip): add design tokens in Tailwind --- README.md | 2 +- .../ui/button/tailwind-config.ext.json | 2 ++ src/components/ui/progress/index.tsx | 33 +++---------------- 3 files changed, 7 insertions(+), 30 deletions(-) create mode 100644 src/components/ui/button/tailwind-config.ext.json diff --git a/README.md b/README.md index 94d2602..bfb97d1 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ 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 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..9449f50 100644 --- a/src/components/ui/progress/index.tsx +++ b/src/components/ui/progress/index.tsx @@ -25,36 +25,11 @@ export const LinearProgress = createComponent({ }); const Progress = (props: { - type: 'circular' | 'linear'; - variant?: 'default' | 'four-color'; - value?: number; - buffer?: number; - indeterminate?: boolean; - ariaLabel?: string; + variant?: 'md-circular-progress' | 'md-linear-progress'; + children?: any; }) => { - const { type, variant = 'default', ...rest } = props; - - if (type === 'circular') { - return ( - - ); - } else if (type === 'linear') { - return ( - - ); - } else { - return null; - } + if (props.variant === 'md-linear-progress') return {props.children}; + return {props.children}; }; export default Progress; From 090b2b835874f398bf150087d01d3a4d7497d694 Mon Sep 17 00:00:00 2001 From: "Saad A. Bazaz" Date: Mon, 8 Jul 2024 12:54:43 +0500 Subject: [PATCH 2/3] fix: progress demo --- src/app/layout.tsx | 7 ++++--- src/app/page.tsx | 5 +++-- src/components/ui/progress/index.tsx | 5 +---- 3 files changed, 8 insertions(+), 9 deletions(-) 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/progress/index.tsx b/src/components/ui/progress/index.tsx index 9449f50..0d2ae86 100644 --- a/src/components/ui/progress/index.tsx +++ b/src/components/ui/progress/index.tsx @@ -24,10 +24,7 @@ export const LinearProgress = createComponent({ react: React, }); -const Progress = (props: { - variant?: 'md-circular-progress' | 'md-linear-progress'; - children?: any; -}) => { +const Progress = (props: any) => { if (props.variant === 'md-linear-progress') return {props.children}; return {props.children}; }; From bb97a508da0d8927130005c91fc99307716d0a68 Mon Sep 17 00:00:00 2001 From: "Saad A. Bazaz" Date: Wed, 10 Jul 2024 23:01:22 +0500 Subject: [PATCH 3/3] docs: improve roadmap --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index bfb97d1..ba7f9a1 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,9 @@ This demo shows how native Material Web Components can be used in NextJS/React, - [ ] 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