how2ice/react-test
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

init project
Some checks failed
No response / noResponse (push) Has been cancelled
Details
CI / Continuous releases (push) Has been cancelled
Details
CI / test-dev (macos-latest) (push) Has been cancelled
Details
CI / test-dev (ubuntu-latest) (push) Has been cancelled
Details
CI / test-dev (windows-latest) (push) Has been cancelled
Details
Maintenance / main (push) Has been cancelled
Details
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
Details
CodeQL / Analyze (push) Has been cancelled
Details

Browse Source
This commit is contained in:
how2ice
2025-12-12 14:26:25 +09:00
commit 005cf56baf
43188 changed files with 1079531 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
examples/material-ui-pigment-css-nextjs-ts/src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

26
examples/material-ui-pigment-css-nextjs-ts/src/app/layout.tsx Normal file
View File

@@ -0,0 +1,26 @@
import * as React from 'react';
import type { Metadata } from 'next';
import { cookies } from 'next/headers';
import '@mui/material-pigment-css/styles.css';
import { ColorSchemeProvider } from '../components/ColorSchemeProvider';
import App from '../components/App';
export const metadata: Metadata = {
title: 'Material UI x Pigment CSS',
description: 'Generated by create next app',
};
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const cookieStore = await cookies();
const { value: colorScheme = 'light' } = cookieStore.get('colorScheme') ?? {};
return (
<html lang="en">
<ColorSchemeProvider colorScheme={colorScheme}>
<App>{children}</App>
</ColorSchemeProvider>
</html>
);
}

136
examples/material-ui-pigment-css-nextjs-ts/src/app/page.tsx Normal file
View File

@@ -0,0 +1,136 @@
'use client';
import * as React from 'react';
import DefaultPropsProvider from '@mui/material/DefaultPropsProvider';
import CssBaseline from '@mui/material/CssBaseline';
import IconButton from '@mui/material/IconButton';
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';
import { useColorScheme } from '../components/ColorSchemeProvider';
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() {
const { colorScheme, setColorScheme } = useColorScheme();
const toggleColorScheme = () => {
setColorScheme(colorScheme === 'dark' ? 'light' : 'dark');
};
return (
<main sx={{ minHeight: '100lvh', display: 'grid', placeItems: 'center' }}>
<DefaultPropsProvider
value={{
MuiChip: {
label: 'Available in v6',
},
}}
>
<CssBaseline />
<Container>
<div sx={{ position: 'absolute', top: 10, right: 10 }}>
<IconButton sx={{ fontSize: 20, px: 1.5 }} onClick={toggleColorScheme}>
{colorScheme === 'light' ? '🌙' : '🔆'}
</IconButton>
</div>
<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 integrate 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>
);
}

18
examples/material-ui-pigment-css-nextjs-ts/src/components/App.tsx Normal file
View File

@@ -0,0 +1,18 @@
'use client';
import * as React from 'react';
import { Roboto } from 'next/font/google';
import { useColorScheme } from './ColorSchemeProvider';
const roboto = Roboto({
subsets: ['latin'],
weight: ['400', '500', '700'],
display: 'swap',
variable: '--font-roboto',
});
function App({ className, ...other }: React.PropsWithChildren<{ className?: string }>) {
const { colorScheme } = useColorScheme();
return <body {...other} className={`${roboto.variable} ${colorScheme}`} />;
}
export default App;

63
examples/material-ui-pigment-css-nextjs-ts/src/components/ColorSchemeProvider.tsx Normal file
View File

@@ -0,0 +1,63 @@
'use client';
import * as React from 'react';
const ColorSchemeContext = React.createContext<{
colorScheme: string;
setColorScheme: React.Dispatch<React.SetStateAction<string>>;
}>({
colorScheme: 'dark',
setColorScheme: () => '',
});
function setCookie(name: string, value: string, days: number = 100) {
let expires = '';
if (days) {
const date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
expires = `; expires=${date.toUTCString()}`;
}
document.cookie = `${name}=${value || ''}${expires}; path=/`;
}
export function ColorSchemeProvider({
colorScheme: initialColorScheme,
children,
}: React.PropsWithChildren<{ colorScheme: string }>) {
const [colorScheme, setColorScheme] = React.useState<string>(initialColorScheme);
const contextValue = React.useMemo(
() => ({ colorScheme, setColorScheme }),
[colorScheme, setColorScheme],
);
// Set the colorScheme in localStorage
React.useEffect(() => {
setCookie('colorScheme', colorScheme);
localStorage.setItem('colorScheme', colorScheme);
}, [colorScheme]);
// Handle when localStorage has changed
React.useEffect(() => {
const handleStorage = (event: StorageEvent) => {
const value = event.newValue;
if (
typeof event.key === 'string' &&
event.key === 'colorScheme' &&
typeof value === 'string'
) {
setColorScheme(value);
}
};
// For syncing color-scheme changes between iframes
window.addEventListener('storage', handleStorage);
return () => {
window.removeEventListener('storage', handleStorage);
};
}, [setColorScheme]);
return <ColorSchemeContext.Provider value={contextValue}>{children}</ColorSchemeContext.Provider>;
}
export const useColorScheme = () => {
return React.useContext(ColorSchemeContext);
};

19
examples/material-ui-pigment-css-nextjs-ts/src/material-ui-pigment-css.d.ts vendored Normal file
View File

@@ -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>;
}
}
}