Skip to content

Commit

Permalink
[material-ui][Alert] Convert to support zero runtime (#41230)
Browse files Browse the repository at this point in the history
  • Loading branch information
siriwatknp authored Mar 4, 2024
1 parent 910a9dc commit e93d4ac
Show file tree
Hide file tree
Showing 12 changed files with 373 additions and 137 deletions.
38 changes: 21 additions & 17 deletions apps/pigment-next-app/src/app/globals.css
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
@layer reset, mui;

html,
body {
max-width: 100vw;
overflow-x: hidden;
}
@layer reset {
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

a {
color: inherit;
text-decoration: none;
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
}

a {
color: inherit;
text-decoration: none;
}

@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
}
44 changes: 44 additions & 0 deletions apps/pigment-next-app/src/app/material-ui/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import * as React from 'react';
import Link from 'next/link';
import fs from 'fs/promises';
import path from 'path';
import { css } from '@pigmentcss/react';

export default async function MaterialUIPage() {
const rootPaths = await fs.readdir(path.join(process.cwd(), `src/app/material-ui`));
return (
<div>
<h1>Material UI Components</h1>
<nav>
<ul
className={css({
margin: 0,
marginBlock: '1rem',
padding: 0,
paddingLeft: '1.5rem',
display: 'flex',
flexDirection: 'column',
gap: '0.5rem',
})}
>
{rootPaths
.filter((item) => !item.match(/\.(js|tsx)$/))
.map((file) => (
<li key={file}>
<Link
href={`/material-ui/${file.replace(/\.[jt]sx?$/, '')}`}
className={css({
textDecoration: 'underline',
fontSize: '17px',
})}
>
{file}
</Link>
</li>
))}
</ul>
</nav>
</div>
);
}
72 changes: 72 additions & 0 deletions apps/pigment-next-app/src/app/material-ui/react-alert/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
'use client';
import * as React from 'react';
import ActionAlerts from '../../../../../../docs/data/material/components/alert/ActionAlerts';
import BasicAlerts from '../../../../../../docs/data/material/components/alert/BasicAlerts';
import ColorAlerts from '../../../../../../docs/data/material/components/alert/ColorAlerts';
import DescriptionAlerts from '../../../../../../docs/data/material/components/alert/DescriptionAlerts';
import FilledAlerts from '../../../../../../docs/data/material/components/alert/FilledAlerts';
import IconAlerts from '../../../../../../docs/data/material/components/alert/IconAlerts';
import OutlinedAlerts from '../../../../../../docs/data/material/components/alert/OutlinedAlerts';
import SimpleAlert from '../../../../../../docs/data/material/components/alert/SimpleAlert';
import TransitionAlerts from '../../../../../../docs/data/material/components/alert/TransitionAlerts';

export default function Alert() {
return (
<React.Fragment>
<section>
<h2> Action Alerts</h2>
<div className="demo-container">
<ActionAlerts />
</div>
</section>
<section>
<h2> Basic Alerts</h2>
<div className="demo-container">
<BasicAlerts />
</div>
</section>
<section>
<h2> Color Alerts</h2>
<div className="demo-container">
<ColorAlerts />
</div>
</section>
<section>
<h2> Description Alerts</h2>
<div className="demo-container">
<DescriptionAlerts />
</div>
</section>
<section>
<h2> Filled Alerts</h2>
<div className="demo-container">
<FilledAlerts />
</div>
</section>
<section>
<h2> Icon Alerts</h2>
<div className="demo-container">
<IconAlerts />
</div>
</section>
<section>
<h2> Outlined Alerts</h2>
<div className="demo-container">
<OutlinedAlerts />
</div>
</section>
<section>
<h2> Simple Alert</h2>
<div className="demo-container">
<SimpleAlert />
</div>
</section>
<section>
<h2> Transition Alerts</h2>
<div className="demo-container">
<TransitionAlerts />
</div>
</section>
</React.Fragment>
);
}
1 change: 0 additions & 1 deletion apps/pigment-vite-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
"@mui/base": "file:../../packages/mui-base/build",
"@mui/material": "file:../../packages/mui-material/build",
"@mui/system": "file:../../packages/mui-system/build",
"@mui/material-nextjs": "file:../../packages/mui-material-nextjs/build",
"@mui/icons-material": "file:../../packages/mui-icons-material/build",
"clsx": "^2.1.0",
"local-ui-lib": "workspace:^",
Expand Down
73 changes: 73 additions & 0 deletions apps/pigment-vite-app/src/pages/material-ui/react-alert.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import * as React from 'react';
import MaterialUILayout from '../../Layout';
import ActionAlerts from '../../../../../docs/data/material/components/alert/ActionAlerts.tsx';
import BasicAlerts from '../../../../../docs/data/material/components/alert/BasicAlerts.tsx';
import ColorAlerts from '../../../../../docs/data/material/components/alert/ColorAlerts.tsx';
import DescriptionAlerts from '../../../../../docs/data/material/components/alert/DescriptionAlerts.tsx';
import FilledAlerts from '../../../../../docs/data/material/components/alert/FilledAlerts.tsx';
import IconAlerts from '../../../../../docs/data/material/components/alert/IconAlerts.tsx';
import OutlinedAlerts from '../../../../../docs/data/material/components/alert/OutlinedAlerts.tsx';
import SimpleAlert from '../../../../../docs/data/material/components/alert/SimpleAlert.tsx';
import TransitionAlerts from '../../../../../docs/data/material/components/alert/TransitionAlerts.tsx';

export default function Alert() {
return (
<MaterialUILayout>
<h1>Alert</h1>
<section>
<h2> Action Alerts</h2>
<div className="demo-container">
<ActionAlerts />
</div>
</section>
<section>
<h2> Basic Alerts</h2>
<div className="demo-container">
<BasicAlerts />
</div>
</section>
<section>
<h2> Color Alerts</h2>
<div className="demo-container">
<ColorAlerts />
</div>
</section>
<section>
<h2> Description Alerts</h2>
<div className="demo-container">
<DescriptionAlerts />
</div>
</section>
<section>
<h2> Filled Alerts</h2>
<div className="demo-container">
<FilledAlerts />
</div>
</section>
<section>
<h2> Icon Alerts</h2>
<div className="demo-container">
<IconAlerts />
</div>
</section>
<section>
<h2> Outlined Alerts</h2>
<div className="demo-container">
<OutlinedAlerts />
</div>
</section>
<section>
<h2> Simple Alert</h2>
<div className="demo-container">
<SimpleAlert />
</div>
</section>
<section>
<h2> Transition Alerts</h2>
<div className="demo-container">
<TransitionAlerts />
</div>
</section>
</MaterialUILayout>
);
}
Loading

0 comments on commit e93d4ac

Please sign in to comment.