[examples] Add pigment-css-vite-ts starter example (mui#41196)

mnajdova · Mar 8, 2024 · 39a0a61 · 39a0a61
1 parent 2c12fd9
commit 39a0a61
Show file tree

Hide file tree

Showing 14 changed files with 428 additions and 0 deletions.
diff --git a/examples/pigment-css-vite-ts/.gitignore b/examples/pigment-css-vite-ts/.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/pigment-css-vite-ts/README.md b/examples/pigment-css-vite-ts/README.md
@@ -0,0 +1,34 @@
+# Pigment CSS - Vite with TypeScript example project
+
+## 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/master | tar -xz --strip=2 material-ui-master/examples/pigment-css-vite-ts
+cd 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/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/pigment-css-vite-ts)
+
+## Learn more
+
+To learn more about this example:
+
+- [Pigment CSS documentation](https://github.com/mui/material-ui/blob/master/packages/pigment-react/README.md) - learn more about Pigment CSS features and APIs.
+- [Vite documentation](https://vitejs.dev/guide/) - learn about Vite features and APIs.
diff --git a/examples/pigment-css-vite-ts/index.html b/examples/pigment-css-vite-ts/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="initial-scale=1, width=device-width" />
+    <!-- Fonts to support Material Design -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Kalnia:[email protected]&display=swap"
+      rel="stylesheet"
+    />
+    <title>Vite + Zero + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/pigment-css-vite-ts/package.json b/examples/pigment-css-vite-ts/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "pigment-css-vite-ts",
+  "private": true,
+  "version": "5.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@pigment-css/react": "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/pigment-css-vite-ts/public/vite.svg b/examples/pigment-css-vite-ts/public/vite.svg
diff --git a/examples/pigment-css-vite-ts/src/App.tsx b/examples/pigment-css-vite-ts/src/App.tsx
@@ -0,0 +1,202 @@
+import * as React from 'react';
+import { styled, css, keyframes } from '@pigment-css/react';
+
+const scale = keyframes({
+  to: { scale: 'var(--s2)' },
+});
+
+const Link = styled('a', { shouldForwardProp: (prop) => prop !== 'outlined' })<{
+  outlined?: boolean;
+}>(({ theme }) => ({
+  fontSize: '1rem',
+  background: 'rgba(0 0 0 / 0.04)',
+  padding: '0.5rem 1rem',
+  letterSpacing: '1px',
+  borderRadius: '4px',
+  textAlign: 'center',
+  ...theme.applyStyles('dark', {
+    background: 'rgba(255 255 255 / 0.1)',
+  }),
+  variants: [
+    {
+      props: { outlined: true },
+      style: {
+        background: 'transparent',
+        color: `hsl(${theme.vars.palette.primary})`,
+        border: `1px solid hsl(${theme.vars.palette.border})`,
+      },
+    },
+  ],
+}));
+
+const Bubble = styled('span')({
+  height: 'var(--size, 100%)',
+  aspectRatio: '1',
+  background: 'radial-gradient(hsl(var(--h) 100% 70%) 25%, transparent 50%)',
+  position: 'absolute',
+  display: 'inline-block',
+  left: 'var(--x, 0)',
+  top: 'var(--y, 0)',
+  scale: '0',
+  translate: '-50% -50%',
+  mixBlendMode: 'multiply',
+  filter: 'blur(2px)',
+  animation: `${scale} var(--s, 2s) var(--d, 0s) infinite alternate`,
+});
+
+function randomBetween(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+function generateBubbleVars() {
+  return `
+    --x: ${randomBetween(10, 90)}%;
+    --y: ${randomBetween(15, 85)}%;
+    --h: ${randomBetween(0, 360)};
+    --s2: ${randomBetween(2, 6)};
+    --d: -${randomBetween(250, 400) / 1000}s;
+    --s: ${randomBetween(3, 6)}s;
+  `;
+}
+
+export default function Home() {
+  return (
+    <main
+      className={css({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100lvh',
+        padding: '20px',
+        color: 'hsl(var(--palette-foreground))',
+        backgroundColor: 'hsl(var(--palette-background))',
+        fontFamily:
+          "system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+      })}
+    >
+      <h1
+        className={`
+        ${css(({ theme }) => ({
+          fontFamily: 'Kalnia, sans-serif',
+          fontSize: 'clamp(3rem, 1.9503rem + 4.4789vw, 6.25rem)',
+          fontWeight: 500,
+          textAlign: 'center',
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          color: '#888',
+          marginBottom: '1rem',
+          ...theme.applyStyles('dark', { color: '#fff' }),
+        }))}`}
+      >
+        Pigment CSS
+        <span
+          className={css(({ theme }) => ({
+            position: 'absolute',
+            inset: '0',
+            background: 'white',
+            mixBlendMode: 'color-burn',
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            ...theme.applyStyles('dark', {
+              mixBlendMode: 'darken',
+              filter: 'brightness(2)',
+            }),
+          }))}
+        >
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+        </span>
+      </h1>
+      <div
+        className={css({
+          fontFamily: 'Josefin Sans, sans-serif',
+          letterSpacing: '2px',
+          fontSize: 'clamp(0.75rem, 0.5885rem + 0.6891vw, 1.25rem)',
+          textTransform: 'uppercase',
+          fontWeight: 500,
+          opacity: 0.5,
+          lineHeight: 2,
+          textAlign: 'center',
+          textWrap: 'balance',
+        })}
+      >
+        CSS-JS library with static extraction
+      </div>
+
+      <div
+        className={css({
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '1rem',
+          marginTop: '3rem',
+          '& > *': { flex: 'auto' },
+        })}
+      >
+        <Link
+          href="https://github.com/mui/material-ui/blob/master/packages/zero-runtime/README.md"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Documentation
+        </Link>
+        <Link
+          outlined
+          href="https://github.com/orgs/mui/projects/27/views/1"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Roadmap
+        </Link>
+      </div>
+    </main>
+  );
+}
diff --git a/examples/pigment-css-vite-ts/src/augment.d.ts b/examples/pigment-css-vite-ts/src/augment.d.ts
@@ -0,0 +1,19 @@
+import type {} from '@pigment-css/react/theme';
+import type { ExtendTheme } from '@pigment-css/react';
+
+declare module '@pigment-css/react/theme' {
+  export interface ThemeArgs {
+    theme: ExtendTheme<{
+      colorScheme: 'light' | 'dark';
+      tokens: {
+        palette: {
+          background: string;
+          foreground: string;
+          primary: string;
+          primaryForeground: string;
+          border: string;
+        };
+      };
+    }>;
+  }
+}
diff --git a/examples/pigment-css-vite-ts/src/globals.css b/examples/pigment-css-vite-ts/src/globals.css
@@ -0,0 +1,16 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}
diff --git a/examples/pigment-css-vite-ts/src/main.tsx b/examples/pigment-css-vite-ts/src/main.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import '@pigment-css/react/styles.css';
+import './globals.css';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/pigment-css-vite-ts/src/vite-env.d.ts b/examples/pigment-css-vite-ts/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/pigment-css-vite-ts/tsconfig.json b/examples/pigment-css-vite-ts/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/pigment-css-vite-ts/tsconfig.node.json b/examples/pigment-css-vite-ts/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}