Skip to content

Commit 3af2533

Browse files
brijeshb42brijeshb42
committed
Add in examples folder
1 parent b64f41c commit 3af2533

14 files changed

+332
-1
lines changed

‎examples/test-vite-app/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/test-vite-app/README.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Material UI x Pigment CSS - Vite example
2+
3+
## How to use
4+
5+
Download the example [or clone the repo](https://github.com/mui/material-ui):
6+
7+
<!-- #default-branch-switch -->
8+
9+
```bash
10+
curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-pigment-css-vite-ts
11+
cd material-ui-pigment-css-vite-ts
12+
```
13+
14+
Install it and run:
15+
16+
```bash
17+
npm install
18+
npm run dev
19+
```
20+
21+
or:
22+
23+
<!-- #default-branch-switch -->
24+
25+
[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-pigment-css-vite-ts)
26+
27+
[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-pigment-css-vite-ts)
28+
29+
## The idea behind the example
30+
31+
This example uses [Vite](https://github.com/vitejs/vite).
32+
It includes `@mui/material` and [Pigment CSS](https://github.com/mui/pigment-css) as the style engine.
33+
34+
## What's next?
35+
36+
<!-- #default-branch-switch -->
37+
38+
You now have a working example project.
39+
You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section.

‎examples/test-vite-app/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<!-- Fonts to support Material Design -->
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
rel="stylesheet"
12+
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
13+
/>
14+
<title>Vite + React + TS</title>
15+
</head>
16+
<body>
17+
<div id="root"></div>
18+
<script type="module" src="/src/main.tsx"></script>
19+
</body>
20+
</html>

‎examples/test-vite-app/package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "material-ui-pigment-css-vite",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc -b && vite build",
9+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"@mui/material": "latest",
14+
"@mui/material-pigment-css": "latest",
15+
"react": "latest",
16+
"react-dom": "latest"
17+
},
18+
"devDependencies": {
19+
"@pigment-css/vite-plugin": "latest",
20+
"@types/react": "latest",
21+
"@types/react-dom": "latest",
22+
"@vitejs/plugin-react": "latest",
23+
"typescript": "latest",
24+
"vite": "latest"
25+
}
26+
}

‎examples/test-vite-app/public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎examples/test-vite-app/src/App.tsx

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import DefaultPropsProvider from "@mui/material/DefaultPropsProvider";
2+
import CssBaseline from "@mui/material/CssBaseline";
3+
import Container from "@mui/material-pigment-css/Container";
4+
import Grid from "@mui/material-pigment-css/Grid";
5+
import Stack from "@mui/material-pigment-css/Stack";
6+
import Typography from "@mui/material/Typography";
7+
import Chip from "@mui/material/Chip";
8+
import { styled } from "@mui/material-pigment-css";
9+
10+
const Title = styled("div")(({ theme }) => ({
11+
color: theme.vars.palette.text.primary,
12+
font: theme.vars.font.body1,
13+
fontSize: "1.125rem",
14+
lineHeight: 1.7,
15+
}));
16+
17+
export default function Home() {
18+
return (
19+
<main sx={{ minHeight: "100lvh", display: "grid", placeItems: "center" }}>
20+
<DefaultPropsProvider
21+
value={{
22+
MuiChip: {
23+
label: "Available in v6",
24+
},
25+
}}
26+
>
27+
<CssBaseline />
28+
<Container>
29+
<Grid container spacing={{ xs: 2, sm: 3, md: 4 }}>
30+
<Grid size={{ xs: 12, md: 6 }} sx={{ pl: 4.5 }}>
31+
<Chip
32+
sx={(theme) => ({
33+
mb: 2,
34+
fontWeight: 600,
35+
bgcolor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
36+
color: "primary.dark",
37+
})}
38+
/>
39+
<Typography
40+
variant="h1"
41+
sx={{
42+
fontWeight: 500,
43+
fontSize: "clamp(3rem, 2.354rem + 2.7562vw, 5rem)",
44+
textWrap: "balance",
45+
letterSpacing: "-0.025em",
46+
}}
47+
>
48+
<span
49+
sx={(theme) => ({
50+
display: "block",
51+
background: `linear-gradient(145deg, ${
52+
(theme.vars || theme).palette.primary.light
53+
} 5%, ${(theme.vars || theme).palette.primary.dark} 90%)`,
54+
// `Webkit` has to come later
55+
WebkitBackgroundClip: "text",
56+
WebkitTextFillColor: "transparent",
57+
})}
58+
>
59+
Material UI
60+
</span>
61+
Pigment CSS
62+
</Typography>
63+
</Grid>
64+
<Grid size={{ xs: 12, md: 6 }}>
65+
<Stack
66+
component="ul"
67+
spacing={3}
68+
sx={{
69+
m: 0,
70+
pl: 3,
71+
color: "text.secondary",
72+
"& li": {
73+
pl: 2,
74+
fontSize: "1.125rem",
75+
fontWeight: 500,
76+
"&::marker": {
77+
color: "text.primary",
78+
},
79+
},
80+
}}
81+
>
82+
<li
83+
sx={{
84+
"&::marker": { content: '"⚡️"' },
85+
}}
86+
>
87+
<Title>Build-time CSS Extraction</Title>
88+
<Typography>
89+
Pigment CSS looks through Material UI components used in the
90+
project and extracts the styles into plain CSS.
91+
</Typography>
92+
</li>
93+
<li
94+
sx={{
95+
"&::marker": { content: '"🚀"' },
96+
}}
97+
>
98+
<Title>React Server Components</Title>
99+
<Typography>
100+
Material UI provides a set of layout components that
101+
integrates with Pigment CSS to support React Server
102+
Components.
103+
</Typography>
104+
</li>
105+
<li
106+
sx={{
107+
"&::marker": { content: '"📦"' },
108+
}}
109+
>
110+
<Title>Emotionless</Title>
111+
<Typography>
112+
Replacing Emotion with Pigment CSS eliminates ~15kB from the
113+
final bundle.
114+
</Typography>
115+
</li>
116+
</Stack>
117+
</Grid>
118+
</Grid>
119+
</Container>
120+
</DefaultPropsProvider>
121+
</main>
122+
);
123+
}

‎examples/test-vite-app/src/main.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom/client';
3+
import '@mui/material-pigment-css/styles.css';
4+
import App from './App.tsx';
5+
6+
ReactDOM.createRoot(document.getElementById('root')!).render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>,
10+
);

‎examples/test-vite-app/src/material-ui-pigment-css.d.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Theme, SxProps } from '@mui/material/styles';
2+
import {} from '@mui/material/themeCssVarsAugmentation';
3+
4+
declare module '@mui/material-pigment-css' {
5+
interface ThemeArgs {
6+
theme: Theme;
7+
}
8+
}
9+
10+
declare global {
11+
namespace React {
12+
interface HTMLAttributes {
13+
sx?: SxProps<Theme>;
14+
}
15+
interface SVGProps {
16+
sx?: SxProps<Theme>;
17+
}
18+
}
19+
}

‎examples/test-vite-app/src/vite-env.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎examples/test-vite-app/tsconfig.app.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"compilerOptions": {
3+
"composite": true,
4+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
5+
"target": "ES2020",
6+
"useDefineForClassFields": true,
7+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
8+
"module": "ESNext",
9+
"skipLibCheck": true,
10+
11+
/* Bundler mode */
12+
"moduleResolution": "bundler",
13+
"allowImportingTsExtensions": true,
14+
"resolveJsonModule": true,
15+
"isolatedModules": true,
16+
"moduleDetection": "force",
17+
"noEmit": true,
18+
"jsx": "react-jsx",
19+
20+
/* Linting */
21+
"strict": true,
22+
"noUnusedLocals": true,
23+
"noUnusedParameters": true,
24+
"noFallthroughCasesInSwitch": true
25+
},
26+
"include": ["src"]
27+
}

‎examples/test-vite-app/tsconfig.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"files": [],
3+
"references": [
4+
{
5+
"path": "./tsconfig.app.json"
6+
},
7+
{
8+
"path": "./tsconfig.node.json"
9+
}
10+
]
11+
}

‎examples/test-vite-app/tsconfig.node.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"compilerOptions": {
3+
"composite": true,
4+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
5+
"skipLibCheck": true,
6+
"module": "ESNext",
7+
"moduleResolution": "bundler",
8+
"allowSyntheticDefaultImports": true,
9+
"strict": true,
10+
"noEmit": true
11+
},
12+
"include": ["vite.config.ts"]
13+
}

‎examples/test-vite-app/vite.config.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { defineConfig, Plugin } from 'vite';
2+
import react from '@vitejs/plugin-react';
3+
import { pigment, PigmentOptions } from '@pigment-css/vite-plugin';
4+
import { createTheme } from '@mui/material/styles';
5+
6+
const pigmentConfig: PigmentOptions = {
7+
theme: createTheme({
8+
cssVariables: true,
9+
colorSchemes: { light: true, dark: true },
10+
}),
11+
transformLibraries: ['@mui/material'],
12+
};
13+
14+
// https://vitejs.dev/config/
15+
export default defineConfig({
16+
plugins: [react(), pigment(pigmentConfig) as unknown as Plugin],
17+
});

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"proptypes": "echo \"tsx ./scripts/generateProptypes.ts\"",
88
"deduplicate": "pnpm dedupe",
99
"build": "lerna run --no-private build",
10-
"build:ci": "lerna run build --concurrency 8 --skip-nx-cache",
10+
"build:ci": "lerna run build --concurrency 8 --skip-nx-cache && cd examples/test-vite-app && npm install && npm run build",
1111
"build:codesandbox": "NODE_OPTIONS=\"--max_old_space_size=4096\" lerna run --concurrency 8 --no-private build",
1212
"release:version": "lerna version --no-changelog --no-push --no-git-tag-version --no-private",
1313
"release:build": "lerna run --concurrency 8 --no-private build --skip-nx-cache",

0 commit comments

Comments
 (0)