From fff0501d44de655e6d71bda93fe3f5bf4afad656 Mon Sep 17 00:00:00 2001
From: Siriwat K <siriwatkunaporn@gmail.com>
Date: Tue, 5 Mar 2024 14:54:24 +0700
Subject: [PATCH] [pigment-css][material-ui] Render badge demos (#41353)

---
 .../src/app/material-ui/react-badge/page.tsx  | 72 ++++++++++++++++++
 .../src/pages/material-ui/react-badge.tsx     | 73 +++++++++++++++++++
 ...os.mjs => pigmentcss-render-mui-demos.mjs} | 12 +--
 3 files changed, 151 insertions(+), 6 deletions(-)
 create mode 100644 apps/pigment-next-app/src/app/material-ui/react-badge/page.tsx
 create mode 100644 apps/pigment-vite-app/src/pages/material-ui/react-badge.tsx
 rename scripts/{zero-render-mui-demos.mjs => pigmentcss-render-mui-demos.mjs} (89%)

diff --git a/apps/pigment-next-app/src/app/material-ui/react-badge/page.tsx b/apps/pigment-next-app/src/app/material-ui/react-badge/page.tsx
new file mode 100644
index 00000000000000..7612e906882b39
--- /dev/null
+++ b/apps/pigment-next-app/src/app/material-ui/react-badge/page.tsx
@@ -0,0 +1,72 @@
+'use client';
+import * as React from 'react';
+import AccessibleBadges from '../../../../../../docs/data/material/components/badges/AccessibleBadges';
+import BadgeMax from '../../../../../../docs/data/material/components/badges/BadgeMax';
+import BadgeOverlap from '../../../../../../docs/data/material/components/badges/BadgeOverlap';
+import BadgeVisibility from '../../../../../../docs/data/material/components/badges/BadgeVisibility';
+import ColorBadge from '../../../../../../docs/data/material/components/badges/ColorBadge';
+import CustomizedBadges from '../../../../../../docs/data/material/components/badges/CustomizedBadges';
+import DotBadge from '../../../../../../docs/data/material/components/badges/DotBadge';
+import ShowZeroBadge from '../../../../../../docs/data/material/components/badges/ShowZeroBadge';
+import SimpleBadge from '../../../../../../docs/data/material/components/badges/SimpleBadge';
+
+export default function Badges() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Accessible Badges</h2>
+        <div className="demo-container">
+          <AccessibleBadges />
+        </div>
+      </section>
+      <section>
+        <h2> Badge Max</h2>
+        <div className="demo-container">
+          <BadgeMax />
+        </div>
+      </section>
+      <section>
+        <h2> Badge Overlap</h2>
+        <div className="demo-container">
+          <BadgeOverlap />
+        </div>
+      </section>
+      <section>
+        <h2> Badge Visibility</h2>
+        <div className="demo-container">
+          <BadgeVisibility />
+        </div>
+      </section>
+      <section>
+        <h2> Color Badge</h2>
+        <div className="demo-container">
+          <ColorBadge />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Badges</h2>
+        <div className="demo-container">
+          <CustomizedBadges />
+        </div>
+      </section>
+      <section>
+        <h2> Dot Badge</h2>
+        <div className="demo-container">
+          <DotBadge />
+        </div>
+      </section>
+      <section>
+        <h2> Show Zero Badge</h2>
+        <div className="demo-container">
+          <ShowZeroBadge />
+        </div>
+      </section>
+      <section>
+        <h2> Simple Badge</h2>
+        <div className="demo-container">
+          <SimpleBadge />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
diff --git a/apps/pigment-vite-app/src/pages/material-ui/react-badge.tsx b/apps/pigment-vite-app/src/pages/material-ui/react-badge.tsx
new file mode 100644
index 00000000000000..8bd470dca20dfb
--- /dev/null
+++ b/apps/pigment-vite-app/src/pages/material-ui/react-badge.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import AccessibleBadges from '../../../../../docs/data/material/components/badges/AccessibleBadges.tsx';
+import BadgeMax from '../../../../../docs/data/material/components/badges/BadgeMax.tsx';
+import BadgeOverlap from '../../../../../docs/data/material/components/badges/BadgeOverlap.tsx';
+import BadgeVisibility from '../../../../../docs/data/material/components/badges/BadgeVisibility.tsx';
+import ColorBadge from '../../../../../docs/data/material/components/badges/ColorBadge.tsx';
+import CustomizedBadges from '../../../../../docs/data/material/components/badges/CustomizedBadges.tsx';
+import DotBadge from '../../../../../docs/data/material/components/badges/DotBadge.tsx';
+import ShowZeroBadge from '../../../../../docs/data/material/components/badges/ShowZeroBadge.tsx';
+import SimpleBadge from '../../../../../docs/data/material/components/badges/SimpleBadge.tsx';
+
+export default function Badges() {
+  return (
+    <MaterialUILayout>
+      <h1>Badges</h1>
+      <section>
+        <h2> Accessible Badges</h2>
+        <div className="demo-container">
+          <AccessibleBadges />
+        </div>
+      </section>
+      <section>
+        <h2> Badge Max</h2>
+        <div className="demo-container">
+          <BadgeMax />
+        </div>
+      </section>
+      <section>
+        <h2> Badge Overlap</h2>
+        <div className="demo-container">
+          <BadgeOverlap />
+        </div>
+      </section>
+      <section>
+        <h2> Badge Visibility</h2>
+        <div className="demo-container">
+          <BadgeVisibility />
+        </div>
+      </section>
+      <section>
+        <h2> Color Badge</h2>
+        <div className="demo-container">
+          <ColorBadge />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Badges</h2>
+        <div className="demo-container">
+          <CustomizedBadges />
+        </div>
+      </section>
+      <section>
+        <h2> Dot Badge</h2>
+        <div className="demo-container">
+          <DotBadge />
+        </div>
+      </section>
+      <section>
+        <h2> Show Zero Badge</h2>
+        <div className="demo-container">
+          <ShowZeroBadge />
+        </div>
+      </section>
+      <section>
+        <h2> Simple Badge</h2>
+        <div className="demo-container">
+          <SimpleBadge />
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}
diff --git a/scripts/zero-render-mui-demos.mjs b/scripts/pigmentcss-render-mui-demos.mjs
similarity index 89%
rename from scripts/zero-render-mui-demos.mjs
rename to scripts/pigmentcss-render-mui-demos.mjs
index ffbdb75963ede7..0dbb457ef40ea4 100644
--- a/scripts/zero-render-mui-demos.mjs
+++ b/scripts/pigmentcss-render-mui-demos.mjs
@@ -70,16 +70,16 @@ ${renders.join('\n')}
 }
 `;
 
-  // Create the page in zero-runtime apps
+  // Create the page in pigment apps
   const nextFilepath = path.join(
     process.cwd(),
-    `apps/zero-runtime-next-app/src/app/material-ui/${args[0]}/page.tsx`,
+    `apps/pigment-next-app/src/app/material-ui/${args[0]}/page.tsx`,
   );
   const prettiedNextFileContent = await prettier.format(nextFileContent, {
     ...prettierConfig,
     filepath: nextFilepath,
   });
-  await fse.mkdirp(`apps/zero-runtime-next-app/src/app/material-ui/${args[0]}`);
+  await fse.mkdirp(`apps/pigment-next-app/src/app/material-ui/${args[0]}`);
   await fse.writeFile(nextFilepath, prettiedNextFileContent);
 
   /**
@@ -102,16 +102,16 @@ ${renders.join('\n')}
   );
 }
 `;
-  // Create the page in zero-runtime apps
+  // Create the page in pigment apps
   const viteFilepath = path.join(
     process.cwd(),
-    `apps/zero-runtime-vite-app/src/pages/material-ui/${args[0]}.tsx`,
+    `apps/pigment-vite-app/src/pages/material-ui/${args[0]}.tsx`,
   );
   const prettiedViteFileContent = await prettier.format(viteFileContent, {
     ...prettierConfig,
     filepath: viteFilepath,
   });
-  await fse.mkdirp(`apps/zero-runtime-vite-app/src/pages/material-ui`);
+  await fse.mkdirp(`apps/pigment-vite-app/src/pages/material-ui`);
   await fse.writeFile(viteFilepath, prettiedViteFileContent);
 }