[material-ui][Alert] Convert to support zero runtime

apps/pigment-next-app/src/app/globals.css

@@ -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;
+    }
   }
 }

apps/pigment-next-app/src/app/material-ui/page.tsx

@@ -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>
+  );
+}

apps/pigment-next-app/src/app/material-ui/react-alert/page.tsx

@@ -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>
+  );
+}

apps/pigment-vite-app/package.json

@@ -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:^",

apps/pigment-vite-app/src/pages/material-ui/react-alert.tsx

@@ -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>
+  );
+}