Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(wip): add design tokens in Tailwind #2

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat(wip): add design tokens in Tailwind #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ea5cd6b
feat(wip): add design tokens in Tailwind
SaadBazaz Jul 8, 2024
090b2b8
fix: progress demo
SaadBazaz Jul 8, 2024
bb97a50
docs: improve roadmap
SaadBazaz Jul 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 4 additions & 3 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
</head>
{/* From BaseUI: https://mui.com/base-ui/getting-started/usage/#responsive-meta-tag */}
<meta name="viewport" content="initial-scale=1, width=device-width" />
<body className={inter.className}>{children}</body>
Expand Down
5 changes: 3 additions & 2 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -285,8 +286,8 @@ export default function Home() {
{isPlayingProgressIndicators ? 'pause' : 'play_arrow'}
</Icon>
</IconButton>
<CircularProgress indeterminate={isPlayingProgressIndicators} value={isPlayingProgressIndicators ? undefined : 0.6}></CircularProgress>
<LinearProgress indeterminate={isPlayingProgressIndicators} value={isPlayingProgressIndicators ? undefined : 0.6}></LinearProgress>
<Progress indeterminate={isPlayingProgressIndicators} value={isPlayingProgressIndicators ? undefined : 0.6}></Progress>
<Progress variant="md-linear-progress" indeterminate={isPlayingProgressIndicators} value={isPlayingProgressIndicators ? undefined : 0.6}></Progress>
</div>
</ComponentDemo>
<ComponentDemo title={"Elevation"}>
Expand Down
2 changes: 2 additions & 0 deletions src/components/ui/button/tailwind-config.ext.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
34 changes: 3 additions & 31 deletions src/components/ui/progress/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<CircularProgress
{...rest}
className={variant === 'four-color' ? 'four-color' : ''}
/>
);
} else if (type === 'linear') {
return (
<LinearProgress
{...rest}
indeterminate={props.indeterminate}
value={props.value}
buffer={props.buffer}
aria-label={props.ariaLabel}
className={variant === 'four-color' ? 'four-color' : ''}
/>
);
} else {
return null;
}
const Progress = (props: any) => {
if (props.variant === 'md-linear-progress') return <LinearProgress {...props}>{props.children}</LinearProgress>;
return <CircularProgress {...props}>{props.children}</CircularProgress>;
};

export default Progress;