init project

2025-12-12 14:26:25 +09:00
commit 005cf56baf
43188 changed files with 1079531 additions and 0 deletions
--- a/examples/joy-ui-nextjs-ts/src/app/favicon.ico
+++ b/examples/joy-ui-nextjs-ts/src/app/favicon.ico
--- a/examples/joy-ui-nextjs-ts/src/app/layout.tsx
+++ b/examples/joy-ui-nextjs-ts/src/app/layout.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import ThemeRegistry from '@/components/ThemeRegistry/ThemeRegistry';
+
+export const metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout(props: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <ThemeRegistry>{props.children}</ThemeRegistry>
+      </body>
+    </html>
+  );
+}
--- a/examples/joy-ui-nextjs-ts/src/app/page.tsx
+++ b/examples/joy-ui-nextjs-ts/src/app/page.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import Sheet from '@mui/joy/Sheet';
+import Typography from '@mui/joy/Typography';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Input from '@mui/joy/Input';
+import Button from '@mui/joy/Button';
+import Link from '@mui/joy/Link';
+
+export default function Home() {
+  return (
+    <Sheet
+      sx={{
+        display: 'flex',
+        flexFlow: 'row nowrap',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: '100vh',
+      }}
+    >
+      <Sheet
+        sx={{
+          width: 300,
+          mx: 'auto',
+          my: 4,
+          py: 3,
+          px: 2,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+          borderRadius: 'sm',
+          boxShadow: 'md',
+        }}
+        variant="outlined"
+      >
+        <div>
+          <Typography level="h4" component="h1">
+            <strong>Welcome back 👋</strong>
+          </Typography>
+          <Typography level="body-sm">Sign in to continue.</Typography>
+        </div>
+        <FormControl id="email">
+          <FormLabel>Email</FormLabel>
+          <Input name="email" type="email" placeholder="johndoe@email.com" />
+        </FormControl>
+        <FormControl id="password">
+          <FormLabel>Password</FormLabel>
+          <Input name="password" type="password" placeholder="password" />
+        </FormControl>
+        <Button sx={{ mt: 1 }}>Log in</Button>
+        <Typography
+          endDecorator={<Link href="/sign-up">Sign up</Link>}
+          sx={{
+            fontSize: 'sm',
+            alignSelf: 'center',
+          }}
+        >
+          Don&apos;t have an account?
+        </Typography>
+      </Sheet>
+    </Sheet>
+  );
+}
--- a/examples/joy-ui-nextjs-ts/src/app/sign-up/page.tsx
+++ b/examples/joy-ui-nextjs-ts/src/app/sign-up/page.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import Sheet from '@mui/joy/Sheet';
+import Typography from '@mui/joy/Typography';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Input from '@mui/joy/Input';
+import Button from '@mui/joy/Button';
+import Link from '@mui/joy/Link';
+
+export default function SignUp() {
+  return (
+    <Sheet
+      sx={{
+        display: 'flex',
+        flexFlow: 'row nowrap',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: '100vh',
+      }}
+    >
+      <Sheet
+        sx={{
+          width: 300,
+          mx: 'auto',
+          my: 4,
+          py: 3,
+          px: 2,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+          borderRadius: 'sm',
+          boxShadow: 'md',
+        }}
+        variant="outlined"
+      >
+        <div>
+          <Typography level="h4" component="h1">
+            <strong>Welcome 👋</strong>
+          </Typography>
+          <Typography level="body-sm">Sign up for an account.</Typography>
+        </div>
+        <FormControl>
+          <FormLabel>Email</FormLabel>
+          <Input name="email" type="email" placeholder="johndoe@email.com" />
+        </FormControl>
+        <FormControl>
+          <FormLabel>Password</FormLabel>
+          <Input name="password" type="password" placeholder="password" />
+        </FormControl>
+
+        <Button sx={{ mt: 1 }}>Create account</Button>
+        <Typography
+          endDecorator={<Link href="/">Log in</Link>}
+          sx={{
+            fontSize: 'sm',
+            alignSelf: 'center',
+          }}
+        >
+          Already have an account?
+        </Typography>
+      </Sheet>
+    </Sheet>
+  );
+}
--- a/examples/joy-ui-nextjs-ts/src/components/ThemeRegistry/EmotionCache.tsx
+++ b/examples/joy-ui-nextjs-ts/src/components/ThemeRegistry/EmotionCache.tsx
@@ -0,0 +1,91 @@
+'use client';
+import * as React from 'react';
+import createCache from '@emotion/cache';
+import { useServerInsertedHTML } from 'next/navigation';
+import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
+import type { EmotionCache, Options as OptionsOfCreateCache } from '@emotion/cache';
+
+export type NextAppDirEmotionCacheProviderProps = {
+  /** This is the options passed to createCache() from 'import createCache from "@emotion/cache"' */
+  options: Omit<OptionsOfCreateCache, 'insertionPoint'>;
+  /** By default <CacheProvider /> from 'import { CacheProvider } from "@emotion/react"' */
+  CacheProvider?: React.ElementType<{ value: EmotionCache }>;
+  children: React.ReactNode;
+};
+
+// Adapted from https://github.com/garronej/tss-react/blob/main/src/next/appDir.tsx
+export default function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionCacheProviderProps) {
+  const { options, CacheProvider = DefaultCacheProvider, children } = props;
+
+  const [registry] = React.useState(() => {
+    const cache = createCache(options);
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted: { name: string; isGlobal: boolean }[] = [];
+    cache.insert = (...args) => {
+      const [selector, serialized] = args;
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push({
+          name: serialized.name,
+          isGlobal: !selector,
+        });
+      }
+      return prevInsert(...args);
+    };
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return { cache, flush };
+  });
+
+  useServerInsertedHTML(() => {
+    const inserted = registry.flush();
+    if (inserted.length === 0) {
+      return null;
+    }
+    let styles = '';
+    let dataEmotionAttribute = registry.cache.key;
+
+    const globals: {
+      name: string;
+      style: string;
+    }[] = [];
+
+    inserted.forEach(({ name, isGlobal }) => {
+      const style = registry.cache.inserted[name];
+
+      if (typeof style !== 'boolean') {
+        if (isGlobal) {
+          globals.push({ name, style });
+        } else {
+          styles += style;
+          dataEmotionAttribute += ` ${name}`;
+        }
+      }
+    });
+
+    return (
+      <React.Fragment>
+        {globals.map(({ name, style }) => (
+          <style
+            key={name}
+            data-emotion={`${registry.cache.key}-global ${name}`}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: style }}
+          />
+        ))}
+        {styles && (
+          <style
+            data-emotion={dataEmotionAttribute}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: styles }}
+          />
+        )}
+      </React.Fragment>
+    );
+  });
+
+  return <CacheProvider value={registry.cache}>{children}</CacheProvider>;
+}
--- a/examples/joy-ui-nextjs-ts/src/components/ThemeRegistry/ThemeRegistry.tsx
+++ b/examples/joy-ui-nextjs-ts/src/components/ThemeRegistry/ThemeRegistry.tsx
@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { CssVarsProvider } from '@mui/joy/styles';
+import CssBaseline from '@mui/joy/CssBaseline';
+import NextAppDirEmotionCacheProvider from './EmotionCache';
+import theme from './theme';
+
+export default function ThemeRegistry({ children }: { children: React.ReactNode }) {
+  return (
+    <NextAppDirEmotionCacheProvider options={{ key: 'joy' }}>
+      <CssVarsProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </CssVarsProvider>
+    </NextAppDirEmotionCacheProvider>
+  );
+}
--- a/examples/joy-ui-nextjs-ts/src/components/ThemeRegistry/theme.ts
+++ b/examples/joy-ui-nextjs-ts/src/components/ThemeRegistry/theme.ts
@@ -0,0 +1,47 @@
+import { extendTheme } from '@mui/joy/styles';
+import { Inter, Source_Code_Pro } from 'next/font/google';
+
+const inter = Inter({
+  subsets: ['latin'],
+  adjustFontFallback: false, // prevent NextJS from adding its own fallback font
+  fallback: ['var(--joy-fontFamily-fallback)'], // use Joy UI's fallback font
+  display: 'swap',
+});
+
+const sourceCodePro = Source_Code_Pro({
+  subsets: ['latin'],
+  adjustFontFallback: false, // prevent NextJS from adding its own fallback font
+  fallback: [
+    // the default theme's fallback for monospace fonts
+    'ui-monospace',
+    'SFMono-Regular',
+    'Menlo',
+    'Monaco',
+    'Consolas',
+    'Liberation Mono',
+    'Courier New',
+    'monospace',
+  ],
+  display: 'swap',
+});
+
+const theme = extendTheme({
+  fontFamily: {
+    body: inter.style.fontFamily,
+    display: inter.style.fontFamily,
+    code: sourceCodePro.style.fontFamily,
+  },
+  components: {
+    JoyButton: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          ...(ownerState.color === 'primary' && {
+            backgroundColor: '#4338ca',
+          }),
+        }),
+      },
+    },
+  },
+});
+
+export default theme;