Add in examples folder

mui · Aug 29, 2024 · 3af2533 · 3af2533
1 parent b64f41c
commit 3af2533
Show file tree

Hide file tree

Showing 14 changed files with 332 additions and 1 deletion.
diff --git a/examples/test-vite-app/.gitignore b/examples/test-vite-app/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/test-vite-app/README.md b/examples/test-vite-app/README.md
@@ -0,0 +1,39 @@
+# Material UI x Pigment CSS - Vite example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui/material-ui):
+
+<!-- #default-branch-switch -->
+
+```bash
+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
+cd material-ui-pigment-css-vite-ts
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+or:
+
+<!-- #default-branch-switch -->
+
+[![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)
+
+[![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)
+
+## The idea behind the example
+
+This example uses [Vite](https://github.com/vitejs/vite).
+It includes `@mui/material` and [Pigment CSS](https://github.com/mui/pigment-css) as the style engine.
+
+## What's next?
+
+<!-- #default-branch-switch -->
+
+You now have a working example project.
+You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section.
diff --git a/examples/test-vite-app/index.html b/examples/test-vite-app/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Fonts to support Material Design -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+    />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/test-vite-app/package.json b/examples/test-vite-app/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "material-ui-pigment-css-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@mui/material": "latest",
+    "@mui/material-pigment-css": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@pigment-css/vite-plugin": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "@vitejs/plugin-react": "latest",
+    "typescript": "latest",
+    "vite": "latest"
+  }
+}
diff --git a/examples/test-vite-app/public/vite.svg b/examples/test-vite-app/public/vite.svg
diff --git a/examples/test-vite-app/src/App.tsx b/examples/test-vite-app/src/App.tsx
@@ -0,0 +1,123 @@
+import DefaultPropsProvider from "@mui/material/DefaultPropsProvider";
+import CssBaseline from "@mui/material/CssBaseline";
+import Container from "@mui/material-pigment-css/Container";
+import Grid from "@mui/material-pigment-css/Grid";
+import Stack from "@mui/material-pigment-css/Stack";
+import Typography from "@mui/material/Typography";
+import Chip from "@mui/material/Chip";
+import { styled } from "@mui/material-pigment-css";
+
+const Title = styled("div")(({ theme }) => ({
+  color: theme.vars.palette.text.primary,
+  font: theme.vars.font.body1,
+  fontSize: "1.125rem",
+  lineHeight: 1.7,
+}));
+
+export default function Home() {
+  return (
+    <main sx={{ minHeight: "100lvh", display: "grid", placeItems: "center" }}>
+      <DefaultPropsProvider
+        value={{
+          MuiChip: {
+            label: "Available in v6",
+          },
+        }}
+      >
+        <CssBaseline />
+        <Container>
+          <Grid container spacing={{ xs: 2, sm: 3, md: 4 }}>
+            <Grid size={{ xs: 12, md: 6 }} sx={{ pl: 4.5 }}>
+              <Chip
+                sx={(theme) => ({
+                  mb: 2,
+                  fontWeight: 600,
+                  bgcolor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
+                  color: "primary.dark",
+                })}
+              />
+              <Typography
+                variant="h1"
+                sx={{
+                  fontWeight: 500,
+                  fontSize: "clamp(3rem, 2.354rem + 2.7562vw, 5rem)",
+                  textWrap: "balance",
+                  letterSpacing: "-0.025em",
+                }}
+              >
+                <span
+                  sx={(theme) => ({
+                    display: "block",
+                    background: `linear-gradient(145deg, ${
+                      (theme.vars || theme).palette.primary.light
+                    } 5%, ${(theme.vars || theme).palette.primary.dark} 90%)`,
+                    // `Webkit` has to come later
+                    WebkitBackgroundClip: "text",
+                    WebkitTextFillColor: "transparent",
+                  })}
+                >
+                  Material UI
+                </span>
+                Pigment CSS
+              </Typography>
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Stack
+                component="ul"
+                spacing={3}
+                sx={{
+                  m: 0,
+                  pl: 3,
+                  color: "text.secondary",
+                  "& li": {
+                    pl: 2,
+                    fontSize: "1.125rem",
+                    fontWeight: 500,
+                    "&::marker": {
+                      color: "text.primary",
+                    },
+                  },
+                }}
+              >
+                <li
+                  sx={{
+                    "&::marker": { content: '"⚡️"' },
+                  }}
+                >
+                  <Title>Build-time CSS Extraction</Title>
+                  <Typography>
+                    Pigment CSS looks through Material UI components used in the
+                    project and extracts the styles into plain CSS.
+                  </Typography>
+                </li>
+                <li
+                  sx={{
+                    "&::marker": { content: '"🚀"' },
+                  }}
+                >
+                  <Title>React Server Components</Title>
+                  <Typography>
+                    Material UI provides a set of layout components that
+                    integrates with Pigment CSS to support React Server
+                    Components.
+                  </Typography>
+                </li>
+                <li
+                  sx={{
+                    "&::marker": { content: '"📦"' },
+                  }}
+                >
+                  <Title>Emotionless</Title>
+                  <Typography>
+                    Replacing Emotion with Pigment CSS eliminates ~15kB from the
+                    final bundle.
+                  </Typography>
+                </li>
+              </Stack>
+            </Grid>
+          </Grid>
+        </Container>
+      </DefaultPropsProvider>
+    </main>
+  );
+}
diff --git a/examples/test-vite-app/src/main.tsx b/examples/test-vite-app/src/main.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import '@mui/material-pigment-css/styles.css';
+import App from './App.tsx';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/test-vite-app/src/material-ui-pigment-css.d.ts b/examples/test-vite-app/src/material-ui-pigment-css.d.ts
@@ -0,0 +1,19 @@
+import { Theme, SxProps } from '@mui/material/styles';
+import {} from '@mui/material/themeCssVarsAugmentation';
+
+declare module '@mui/material-pigment-css' {
+  interface ThemeArgs {
+    theme: Theme;
+  }
+}
+
+declare global {
+  namespace React {
+    interface HTMLAttributes {
+      sx?: SxProps<Theme>;
+    }
+    interface SVGProps {
+      sx?: SxProps<Theme>;
+    }
+  }
+}
diff --git a/examples/test-vite-app/src/vite-env.d.ts b/examples/test-vite-app/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/test-vite-app/tsconfig.app.json b/examples/test-vite-app/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/test-vite-app/tsconfig.json b/examples/test-vite-app/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
diff --git a/examples/test-vite-app/tsconfig.node.json b/examples/test-vite-app/tsconfig.node.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/test-vite-app/vite.config.ts b/examples/test-vite-app/vite.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig, Plugin } from 'vite';
+import react from '@vitejs/plugin-react';
+import { pigment, PigmentOptions } from '@pigment-css/vite-plugin';
+import { createTheme } from '@mui/material/styles';
+
+const pigmentConfig: PigmentOptions = {
+  theme: createTheme({
+    cssVariables: true,
+    colorSchemes: { light: true, dark: true },
+  }),
+  transformLibraries: ['@mui/material'],
+};
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), pigment(pigmentConfig) as unknown as Plugin],
+});
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "proptypes": "echo \"tsx ./scripts/generateProptypes.ts\"",
     "deduplicate": "pnpm dedupe",
     "build": "lerna run --no-private build",
-    "build:ci": "lerna run build --concurrency 8 --skip-nx-cache",
+    "build:ci": "lerna run build --concurrency 8 --skip-nx-cache && cd examples/test-vite-app && npm install && npm run build",
     "build:codesandbox": "NODE_OPTIONS=\"--max_old_space_size=4096\" lerna run --concurrency 8 --no-private build",
     "release:version": "lerna version --no-changelog --no-push --no-git-tag-version --no-private",
     "release:build": "lerna run --concurrency 8 --no-private build --skip-nx-cache",