Skip to content

Commit 2fe96e4

Browse files
brijeshb42brijeshb42
authored
[pigment-css][demo] Improve sx prop support (#41589)
1 parent 0421745 commit 2fe96e4

32 files changed

+557
-338
lines changed

‎apps/pigment-css-next-app/next.config.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,6 @@ const pigmentOptions = {
104104
transformLibraries: ['local-ui-lib'],
105105
sourceMap: true,
106106
displayName: true,
107-
transformSx: false,
108107
};
109108

110109
/** @type {import('next').NextConfig} */
@@ -115,6 +114,10 @@ const nextConfig = {
115114
typescript: {
116115
ignoreBuildErrors: true,
117116
},
117+
devIndicators: {
118+
buildActivity: true,
119+
buildActivityPosition: 'bottom-right',
120+
},
118121
};
119122

120123
module.exports = withPigment(nextConfig, pigmentOptions);

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

-6
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,4 @@
1717
color: inherit;
1818
text-decoration: none;
1919
}
20-
21-
@media (prefers-color-scheme: dark) {
22-
html {
23-
color-scheme: dark;
24-
}
25-
}
2620
}

‎apps/pigment-css-vite-app/package.json

+4-5
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,15 @@
2424
"react-router-dom": "^6.22.1"
2525
},
2626
"devDependencies": {
27-
"@babel/preset-env": "^7.23.9",
28-
"@babel/preset-react": "^7.23.3",
29-
"@babel/preset-typescript": "^7.23.3",
27+
"@babel/preset-react": "^7.24.1",
28+
"@babel/preset-typescript": "^7.24.1",
3029
"@pigment-css/vite-plugin": "workspace:^",
3130
"@types/react": "^18.2.55",
3231
"@types/react-dom": "^18.2.19",
3332
"@vitejs/plugin-react": "^4.2.1",
34-
"postcss": "^8.4.35",
33+
"postcss": "^8.4.38",
3534
"postcss-combine-media-query": "^1.0.1",
36-
"vite": "5.0.12",
35+
"vite": "5.2.2",
3736
"vite-plugin-pages": "^0.32.0"
3837
},
3938
"nx": {

‎apps/pigment-css-vite-app/src/App.tsx

-177
This file was deleted.

‎apps/pigment-css-vite-app/src/Layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { styled } from '@pigment-css/react';
33

4-
const Main = styled('div')(({ theme }) => ({
4+
const Main = styled.main(({ theme }) => ({
55
display: 'flex',
66
flexDirection: 'column',
77
gap: '32px',

‎apps/pigment-css-vite-app/src/components/ErrorBoundaryFallback.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { css } from '@pigment-css/react';
2+
import Alert from '@mui/material/Alert';
3+
import { FallbackProps } from 'react-error-boundary';
4+
5+
export function ErrorBoundaryFallback({ error }: FallbackProps) {
6+
const err = error as Error;
7+
return (
8+
<Alert severity="error" variant="outlined">
9+
Error while rendering.
10+
<pre
11+
className={css({
12+
border: '1px dotted #ccc',
13+
padding: 4,
14+
whiteSpace: 'pre-wrap',
15+
})}
16+
>
17+
{err.message}
18+
</pre>
19+
</Alert>
20+
);
21+
}

‎apps/pigment-css-vite-app/src/main.tsx

+29-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,40 @@
11
import * as ReactDOMClient from 'react-dom/client';
22
import * as React from 'react';
3-
import { BrowserRouter as Router, useRoutes } from 'react-router-dom';
3+
import { BrowserRouter as Router, useLocation, useRoutes } from 'react-router-dom';
44
import { ThemeProvider, createTheme } from '@mui/material/styles';
5+
import CircularProgress from '@mui/material/CircularProgress';
56
import CssBaseline from '@mui/material/CssBaseline';
7+
import { css } from '@pigment-css/react';
8+
import { Box } from '@pigment-css/react/Box';
9+
import { ErrorBoundary } from 'react-error-boundary';
610
import routes from '~react-pages';
711
import '@pigment-css/react/styles.css';
12+
import { ErrorBoundaryFallback } from './components/ErrorBoundaryFallback';
813

914
function App() {
10-
return <React.Suspense fallback={<p>Loading...</p>}>{useRoutes(routes)}</React.Suspense>;
15+
const location = useLocation();
16+
return (
17+
<ErrorBoundary key={location.pathname} FallbackComponent={ErrorBoundaryFallback}>
18+
<React.Suspense
19+
fallback={
20+
<Box
21+
as="div"
22+
className={css`
23+
width: 100vw;
24+
height: 100vh;
25+
display: flex;
26+
justify-content: center;
27+
align-items: center;
28+
`}
29+
>
30+
<CircularProgress size={100} variant="indeterminate" />
31+
</Box>
32+
}
33+
>
34+
{useRoutes(routes)}
35+
</React.Suspense>
36+
</ErrorBoundary>
37+
);
1138
}
1239

1340
const theme = createTheme({

‎apps/pigment-css-vite-app/src/pages/index.tsx

+11-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,11 @@
1-
export { App as default } from '../App';
1+
import { Link } from 'react-router-dom';
2+
3+
export default function App() {
4+
return (
5+
<div>
6+
<p>
7+
See Material UI components in <Link to="/material-ui">action</Link>!
8+
</p>
9+
</div>
10+
);
11+
}

‎apps/pigment-css-vite-app/src/pages/material-ui/react-avatar.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import * as React from 'react';
21
import MaterialUILayout from '../../Layout';
32
import BackgroundLetterAvatars from '../../../../../docs/data/material/components/avatars/BackgroundLetterAvatars.tsx';
43
import BadgeAvatars from '../../../../../docs/data/material/components/avatars/BadgeAvatars.tsx';

‎apps/pigment-css-vite-app/src/pages/material-ui/react-breadcrumbs.tsx

+9-29
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,14 @@
1-
import * as React from 'react';
2-
import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
3-
import { css } from '@pigment-css/react';
4-
import Alert from '@mui/material/Alert';
1+
import { ErrorBoundary } from 'react-error-boundary';
52

63
import MaterialUILayout from '../../Layout';
7-
import ActiveLastBreadcrumb from '../../../../../docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx';
8-
import BasicBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx';
9-
import CollapsedBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx';
10-
import CustomSeparator from '../../../../../docs/data/material/components/breadcrumbs/CustomSeparator.tsx';
11-
import CustomizedBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx';
12-
import IconBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/IconBreadcrumbs.tsx';
13-
import RouterBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/RouterBreadcrumbs.tsx';
14-
15-
function ErrorBoundaryFallback({ error }: FallbackProps) {
16-
const err = error as Error;
17-
return (
18-
<Alert severity="error" variant="outlined">
19-
Error while rendering.
20-
<pre
21-
className={css({
22-
border: '1px dotted #ccc',
23-
padding: 4,
24-
whiteSpace: 'pre-wrap',
25-
})}
26-
>
27-
{err.message}
28-
</pre>
29-
</Alert>
30-
);
31-
}
4+
import ActiveLastBreadcrumb from '../../../../../docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb';
5+
import BasicBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/BasicBreadcrumbs';
6+
import CollapsedBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs';
7+
import CustomSeparator from '../../../../../docs/data/material/components/breadcrumbs/CustomSeparator';
8+
import CustomizedBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs';
9+
import IconBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/IconBreadcrumbs';
10+
import RouterBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/RouterBreadcrumbs';
11+
import { ErrorBoundaryFallback } from '../../components/ErrorBoundaryFallback';
3212

3313
export default function Breadcrumbs() {
3414
return (

‎apps/pigment-css-vite-app/vite.config.ts

+14-2
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,25 @@ theme.getColorSchemeSelector = (colorScheme) => {
2323

2424
export default defineConfig({
2525
plugins: [
26-
reactPlugin({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
26+
reactPlugin({
27+
include: /\.(mdx|js|jsx|ts|tsx)$/,
28+
babel: {
29+
presets: [
30+
[
31+
'@babel/preset-react',
32+
{
33+
runtime: 'automatic',
34+
},
35+
],
36+
'@babel/preset-typescript',
37+
],
38+
},
39+
}),
2740
pigment({
2841
theme,
2942
transformLibraries: ['local-ui-lib', '@mui/material'],
3043
sourceMap: true,
3144
displayName: true,
32-
transformSx: false,
3345
}),
3446
Pages(),
3547
splitVendorChunkPlugin(),

0 commit comments

Comments
 (0)