Modify demo apps to use @mui/material-pigment-css

mui · Jul 2, 2024 · 3e7b81a · 3e7b81a
1 parent 5465942
commit 3e7b81a
Show file tree

Hide file tree

Showing 19 changed files with 31 additions and 35 deletions.
diff --git a/apps/pigment-css-next-app/src/app/box/page.tsx b/apps/pigment-css-next-app/src/app/box/page.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable material-ui/no-empty-box */
 
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 import * as React from 'react';
 import { Box as MuiBox } from '../../components/Box';
 

diff --git a/apps/pigment-css-next-app/src/app/layout.tsx b/apps/pigment-css-next-app/src/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
 import { ThemeProvider } from '@mui/material/styles';
-import '@pigment-css/react/styles.css';
+import '@mui/material-pigment-css/styles.css';
 import theme from './theme';
 
 import './globals.css';

diff --git a/apps/pigment-css-next-app/src/app/material-ui/layout.tsx b/apps/pigment-css-next-app/src/app/material-ui/layout.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 
 const Main = styled('div')(({ theme }) => ({
   display: 'flex',

diff --git a/apps/pigment-css-next-app/src/app/material-ui/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/page.tsx
@@ -3,17 +3,16 @@ import * as React from 'react';
 import Link from 'next/link';
 import fs from 'fs/promises';
 import path from 'path';
-import { css } from '@pigment-css/react';
-import Box from '@pigment-css/react/Box';
+import { css } from '@mui/material-pigment-css';
 
 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>
-        <Box
-          as="ul"
+        <ul
+          // @ts-ignore
           sx={{
             margin: 0,
             marginBlock: '1rem',
@@ -39,7 +38,7 @@ export default async function MaterialUIPage() {
                 </Link>
               </li>
             ))}
-        </Box>
+        </ul>
       </nav>
     </div>
   );

diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import Grid from '@mui/material/PigmentGrid';
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-stack/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-stack/page.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/PigmentStack';
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

diff --git a/apps/pigment-css-next-app/src/app/page.tsx b/apps/pigment-css-next-app/src/app/page.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import { styled, css } from '@pigment-css/react';
+import { styled, css } from '@mui/material-pigment-css';
 import PigmentStack from '@mui/material/PigmentStack';
 import PigmentContainer from '@mui/material/PigmentContainer';
 import PigmentHidden from '@mui/material/PigmentHidden';

diff --git a/apps/pigment-css-next-app/src/augment.d.ts b/apps/pigment-css-next-app/src/augment.d.ts
@@ -1,6 +1,6 @@
-import type { ExtendTheme } from '@pigment-css/react';
+import type { ExtendTheme } from '@mui/material-pigment-css';
 
-declare module '@pigment-css/react/theme' {
+declare module '@mui/material-pigment-css/theme' {
   interface ThemeTokens {
     'max-width': string;
     'border-radius': string;

diff --git a/apps/pigment-css-next-app/src/components/Box.jsx b/apps/pigment-css-next-app/src/components/Box.jsx
@@ -1,4 +1,4 @@
-import { generateAtomics } from '@pigment-css/react';
+import { generateAtomics } from '@mui/material-pigment-css';
 
 const atomics = generateAtomics(({ theme }) => ({
   conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {

diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@pigment-css/react": "^0.0.16",
+    "@mui/material-pigment-css": "workspace:^",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/lab": "workspace:^",

diff --git a/apps/pigment-css-vite-app/src/Box.jsx b/apps/pigment-css-vite-app/src/Box.jsx
@@ -1,4 +1,4 @@
-import { generateAtomics } from '@pigment-css/react';
+import { generateAtomics } from '@mui/material-pigment-css';
 
 const atomics = generateAtomics(({ theme }) => ({
   conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {

diff --git a/apps/pigment-css-vite-app/src/Layout.tsx b/apps/pigment-css-vite-app/src/Layout.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 
 const Main = styled.main(({ theme }) => ({
   display: 'flex',

diff --git a/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx b/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx
@@ -8,7 +8,7 @@ import {
   getSliderUtilityClass,
 } from '@mui/material/Slider';
 import { isHostComponent, useSlotProps } from '@mui/base/utils';
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 import { capitalize } from '@mui/material/utils';
 import { SliderValueLabel } from '@mui/material/Slider';
 import { useSlider, valueToPercent } from '@mui/base/useSlider';

diff --git a/apps/pigment-css-vite-app/src/augment.ts b/apps/pigment-css-vite-app/src/augment.ts
@@ -1,7 +1,7 @@
 import type { extendTheme } from '@mui/material/styles';
-import '@pigment-css/react/theme';
+import '@mui/material-pigment-css';
 
-declare module '@pigment-css/react/theme' {
+declare module '@mui/material-pigment-css/theme' {
   export interface ThemeArgs {
     theme: ReturnType<typeof extendTheme> & {
       applyDarkStyles<T>(obj: T): Record<string, T>;

diff --git a/apps/pigment-css-vite-app/src/component.tsx b/apps/pigment-css-vite-app/src/component.tsx
@@ -1,4 +1,4 @@
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 
 export function Component() {
   return null;

diff --git a/apps/pigment-css-vite-app/src/components/ErrorBoundaryFallback.tsx b/apps/pigment-css-vite-app/src/components/ErrorBoundaryFallback.tsx
@@ -1,4 +1,4 @@
-import { css } from '@pigment-css/react';
+import { css } from '@mui/material-pigment-css';
 import Alert from '@mui/material/Alert';
 import { FallbackProps } from 'react-error-boundary';
 

diff --git a/apps/pigment-css-vite-app/src/extend-zero.ts b/apps/pigment-css-vite-app/src/extend-zero.ts
@@ -1,6 +1,6 @@
 import type { extendTheme } from '@mui/material/styles';
 
-declare module '@pigment-css/react/theme' {
+declare module '@mui/material-pigment-css/theme' {
   interface ThemeArgs {
     theme: ReturnType<typeof extendTheme> & {
       applyDarkStyles<T>(obj: T): Record<string, T>;

diff --git a/apps/pigment-css-vite-app/src/main.tsx b/apps/pigment-css-vite-app/src/main.tsx
@@ -4,11 +4,10 @@ import { BrowserRouter as Router, useLocation, useRoutes } from 'react-router-do
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CircularProgress from '@mui/material/CircularProgress';
 import CssBaseline from '@mui/material/CssBaseline';
-import { css } from '@pigment-css/react';
-import Box from '@pigment-css/react/Box';
+import { css } from '@mui/material-pigment-css';
 import { ErrorBoundary } from 'react-error-boundary';
 import routes from '~react-pages';
-import '@pigment-css/react/styles.css';
+import '@mui/material-pigment-css/styles.css';
 import { ErrorBoundaryFallback } from './components/ErrorBoundaryFallback';
 
 function App() {
@@ -17,8 +16,7 @@ function App() {
     <ErrorBoundary key={location.pathname} FallbackComponent={ErrorBoundaryFallback}>
       <React.Suspense
         fallback={
-          <Box
-            as="div"
+          <div
             className={css`
               width: 100vw;
               height: 100vh;
@@ -28,7 +26,7 @@ function App() {
             `}
           >
             <CircularProgress size={100} variant="indeterminate" />
-          </Box>
+          </div>
         }
       >
         {useRoutes(routes)}

diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useLocation, matchRoutes, Link } from 'react-router-dom';
-import Box from '@pigment-css/react/Box';
 import routes from '~react-pages';
 import Layout from '../../Layout';
 
@@ -17,8 +16,8 @@ export default function MaterialIndex() {
       <div>
         <h1>Material UI Components</h1>
         <nav>
-          <Box
-            as="ul"
+          <ul
+            // @ts-ignore
             sx={{
               margin: 0,
               marginBlock: '1rem',
@@ -33,19 +32,18 @@ export default function MaterialIndex() {
               .filter((item) => !!item.path)
               .map((item) => (
                 <li key={item.path}>
-                  <Box
-                    as={Link}
+                  <Link
                     to={`/material-ui/${item.path}`}
                     sx={{
                       textDecoration: 'underline',
                       fontSize: '17px',
                     }}
                   >
                     {item.path}
-                  </Box>
+                  </Link>
                 </li>
               ))}
-          </Box>
+          </ul>
         </nav>
       </div>
     </Layout>