feat(examples): add mui-treasury-layout-vite example

examples/mui-treasury-layout-nextjs/README.md

@@ -1,6 +1,6 @@
 # MUI Treasury Layout - Next.js App Router example in TypeScript
 
-This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app) with MUI Treasury Layout ([standard preset](https://mui-treasury.com/?path=/story/layout-v6-preset-standard--standard)) installed.
+This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app) with MUI Treasury Layout ([standard preset](https://mui-treasury.com/?path=/story/layout-v6-preset-standard--standard)) and [Material UI](https://mui.com/material-ui/getting-started/) installed.
 
 ## How to use
 
@@ -34,12 +34,6 @@ or:
 
 To learn more about this example:
 
-- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [MUI Treasury Layout](https://mui-treasury.com/?path=/docs/layout-v6-introduction--docs) - learn about layout configuration.
-
-## 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://next.mui.com/material-ui/getting-started/templates/) section.
+- [Material UI](https://mui.com/material-ui/getting-started/) - learn about Material UI components and API.
+- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API.

examples/mui-treasury-layout-vite/.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?

examples/mui-treasury-layout-vite/README.md

@@ -0,0 +1,39 @@
+# MUI Treasury Layout - Vite.js in TypeScript example
+
+This is a [Vite](https://vitejs.dev/) project bootstrapped using [`create-vite`](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) with MUI Treasury Layout ([standard preset](https://mui-treasury.com/?path=/story/layout-v6-preset-standard--standard)) and [Material UI](https://mui.com/material-ui/getting-started/) installed.
+
+## How to use
+
+Download the example:
+
+<!-- #default-branch-switch -->
+
+```bash
+curl https://codeload.github.com/siriwatknp/mui-treasury/tar.gz/next | tar -xz --strip=2 mui-treasury-master/examples/mui-treasury-layout-vite
+cd mui-treasury-layout-vite
+```
+
+Install it and run:
+
+```bash
+yarn install
+yarn dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
+or:
+
+<!-- #default-branch-switch -->
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/siriwatknp/mui-treasury/tree/master/examples/mui-treasury-layout-vite)
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/siriwatknp/mui-treasury/tree/master/examples/mui-treasury-layout-vite)
+
+## Learn more
+
+To learn more about this example:
+
+- [MUI Treasury Layout](https://mui-treasury.com/?path=/docs/layout-v6-introduction--docs) - learn about layout configuration.
+- [Material UI](https://mui.com/material-ui/getting-started/) - learn about Material UI components and API.
+- [Vite documentation](https://vitejs.dev/) - learn about Vite features and API.

examples/mui-treasury-layout-vite/eslint.config.js

@@ -0,0 +1,26 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config({
+  extends: [js.configs.recommended, ...tseslint.configs.recommended],
+  files: ['**/*.{ts,tsx}'],
+  ignores: ['dist'],
+  languageOptions: {
+    ecmaVersion: 2020,
+    globals: globals.browser,
+  },
+  plugins: {
+    'react-hooks': reactHooks,
+    'react-refresh': reactRefresh,
+  },
+  rules: {
+    ...reactHooks.configs.recommended.rules,
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+})

examples/mui-treasury-layout-vite/index.html

@@ -0,0 +1,13 @@
+<!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" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/mui-treasury-layout-vite/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "mui-treasury-layout-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest",
+    "@mui/icons-material": "next",
+    "@mui/material": "next",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@eslint/js": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "@vitejs/plugin-react": "latest",
+    "eslint": "latest",
+    "eslint-plugin-react-hooks": "latest",
+    "eslint-plugin-react-refresh": "latest",
+    "globals": "latest",
+    "typescript": "latest",
+    "typescript-eslint": "latest",
+    "vite": "latest"
+  }
+}

examples/mui-treasury-layout-vite/src/App.tsx

@@ -0,0 +1,87 @@
+import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
+import Menu from "@mui/icons-material/Menu";
+import ButtonBase from "@mui/material/ButtonBase";
+import Container from "@mui/material/Container";
+import IconButton from "@mui/material/IconButton";
+import viteLogo from "/vite.svg";
+import {
+  applyEdgeSidebarStyles,
+  applyHeaderStyles,
+  Content,
+  EdgeSidebar,
+  EdgeSidebarContent,
+  EdgeTemporaryClose,
+  Footer,
+  Header,
+  layoutClasses,
+  Root,
+  toggleEdgeSidebarCollapse,
+  toggleTemporaryEdgeSidebar,
+} from "./mui-treasury/layout-core-v6";
+
+export default function App() {
+  return (
+    <Root>
+      <Header
+        sx={{
+          ...applyHeaderStyles({
+            height: { xs: "56px", md: "64px" },
+            fullWidth: "md",
+          }),
+          position: { xs: "sticky", md: "relative" },
+          px: 2,
+        }}
+      >
+        <IconButton
+          className={layoutClasses.TemporaryEdgeSidebarTrigger}
+          onClick={() => {
+            toggleTemporaryEdgeSidebar();
+          }}
+        >
+          <Menu />
+        </IconButton>
+        <img src={viteLogo} className="logo" alt="Vite logo" />
+      </Header>
+      <EdgeSidebar
+        sx={(theme) => ({
+          ...applyEdgeSidebarStyles({
+            theme,
+            config: {
+              xs: {
+                variant: "temporary",
+                width: "256px",
+              },
+              sm: {
+                variant: "permanent",
+                width: "256px",
+                autoCollapse: "sm",
+                collapsedWidth: "64px",
+              },
+            },
+          }),
+        })}
+      >
+        <EdgeTemporaryClose />
+        <EdgeSidebarContent>
+          <ButtonBase
+            className={layoutClasses.EdgeSidebarCollapser}
+            onClick={(event) => toggleEdgeSidebarCollapse({ event })}
+            sx={{ height: 48, mt: "auto" }}
+          >
+            <KeyboardArrowLeft
+              className={layoutClasses.EdgeSidebarUncollapsedVisible}
+            />
+            <KeyboardArrowRight
+              className={layoutClasses.EdgeSidebarCollapsedVisible}
+            />
+          </ButtonBase>
+        </EdgeSidebarContent>
+      </EdgeSidebar>
+      <Content>
+        <Container maxWidth="md" sx={{ py: 5 }}></Container>
+      </Content>
+      <Footer sx={{ minHeight: 300 }}></Footer>
+    </Root>
+  );
+}

examples/mui-treasury-layout-vite/src/main.tsx

@@ -0,0 +1,19 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import CssBaseline from "@mui/material/CssBaseline";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import App from "./App.tsx";
+
+const theme = createTheme({
+  cssVariables: true,
+  colorSchemes: { light: true, dark: true },
+});
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <App />
+    </ThemeProvider>
+  </StrictMode>,
+);

examples/mui-treasury-layout-vite/src/mui-treasury/layout-core-v6/Content.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { BoxProps } from "@mui/material/Box";
+import { layoutClasses } from "./layoutClasses";
+import { styled } from "./zero-styled";
+
+/**
+ * Note: StyledContent cannot have `overflow: auto` by default because
+ *       it will break the InsetSidebar absolute positioning.
+ */
+const StyledContent = styled("main")({
+  gridArea: layoutClasses.Content,
+  minHeight: 0,
+  marginTop: "var(--Content-insetTop)",
+  marginBottom: "var(--Content-insetBottom)",
+});
+
+const Content = React.forwardRef<HTMLElement, BoxProps>(function Content(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <StyledContent
+      // @ts-expect-error Material UI issue
+      ref={ref}
+      className={`${layoutClasses.Content} ${className || ""}`}
+      {...props}
+    />
+  );
+});
+
+export default Content;