From 81ca8b10da5be267db894bbd0e07f3106d81856d Mon Sep 17 00:00:00 2001
From: Nofated095 <49985975+Nofated095@users.noreply.github.com>
Date: Thu, 30 Mar 2023 15:17:43 +0000
Subject: [PATCH] Initial commit
Created from https://vercel.com/new
---
.gitignore | 24 ++++++++++++++++++++++++
README.md | 39 +++++++++++++++++++++++++++++++++++++++
index.html | 18 ++++++++++++++++++
package.json | 26 ++++++++++++++++++++++++++
public/vite.svg | 1 +
src/App.tsx | 32 ++++++++++++++++++++++++++++++++
src/ProTip.tsx | 22 ++++++++++++++++++++++
src/main.tsx | 15 +++++++++++++++
src/theme.tsx | 19 +++++++++++++++++++
src/vite-env.d.ts | 1 +
tsconfig.json | 21 +++++++++++++++++++++
tsconfig.node.json | 9 +++++++++
vite.config.ts | 7 +++++++
13 files changed, 234 insertions(+)
create mode 100644 .gitignore
create mode 100644 README.md
create mode 100644 index.html
create mode 100644 package.json
create mode 100644 public/vite.svg
create mode 100644 src/App.tsx
create mode 100644 src/ProTip.tsx
create mode 100644 src/main.tsx
create mode 100644 src/theme.tsx
create mode 100644 src/vite-env.d.ts
create mode 100644 tsconfig.json
create mode 100644 tsconfig.node.json
create mode 100644 vite.config.ts
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/.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/README.md b/README.md
new file mode 100644
index 0000000..e3036bf
--- /dev/null
+++ b/README.md
@@ -0,0 +1,39 @@
+# Material UI - Vite.js in Typescript example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui/material-ui):
+
+
+
+```sh
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-vite-ts
+cd material-vite-ts
+```
+
+Install it and run:
+
+```sh
+npm install
+npm run dev
+```
+
+or:
+
+
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-vite-ts)
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-vite-ts)
+
+## The idea behind the example
+
+This example uses [Vite.js](https://github.com/vitejs/vite).
+It includes `@mui/material` with `@mui/icons-material` and their peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5.
+
+## What's next?
+
+
+
+You now have a working example project.
+You can head back to the documentation, continuing browsing it from the [templates](https://mui.com/material-ui/getting-started/templates/) section.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2444049
--- /dev/null
+++ b/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+ Vite + React + TS + Material UI
+
+
+
+
+
+
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..2cb8e68
--- /dev/null
+++ b/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "material-vite-ts",
+ "private": true,
+ "version": "5.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@emotion/react": "latest",
+ "@emotion/styled": "latest",
+ "@mui/icons-material": "latest",
+ "@mui/material": "latest",
+ "react": "latest",
+ "react-dom": "latest"
+ },
+ "devDependencies": {
+ "@types/react": "latest",
+ "@types/react-dom": "latest",
+ "@vitejs/plugin-react": "latest",
+ "typescript": "latest",
+ "vite": "latest"
+ }
+}
diff --git a/public/vite.svg b/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..9cf5416
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import ProTip from './ProTip';
+
+function Copyright() {
+ return (
+
+ {'Copyright © '}
+
+ Your Website
+ {' '}
+ {new Date().getFullYear()}.
+
+ );
+}
+
+export default function App() {
+ return (
+
+
+
+ Material UI Vite.js example in TypeScript
+
+
+
+
+
+ );
+}
diff --git a/src/ProTip.tsx b/src/ProTip.tsx
new file mode 100644
index 0000000..0894a06
--- /dev/null
+++ b/src/ProTip.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Link from '@mui/material/Link';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import Typography from '@mui/material/Typography';
+
+function LightBulbIcon(props: SvgIconProps) {
+ return (
+
+
+
+ );
+}
+
+export default function ProTip() {
+ return (
+
+
+ Pro tip: See more templates in
+ the MUI documentation.
+
+ );
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..5d4993b
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { ThemeProvider } from '@emotion/react';
+import { CssBaseline } from '@mui/material';
+import theme from './theme';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+
+
+
+
+
+ ,
+);
diff --git a/src/theme.tsx b/src/theme.tsx
new file mode 100644
index 0000000..9677a59
--- /dev/null
+++ b/src/theme.tsx
@@ -0,0 +1,19 @@
+import { createTheme } from '@mui/material/styles';
+import { red } from '@mui/material/colors';
+
+// A custom theme for this app
+const theme = createTheme({
+ palette: {
+ primary: {
+ main: '#556cd6',
+ },
+ secondary: {
+ main: '#19857b',
+ },
+ error: {
+ main: red.A400,
+ },
+ },
+});
+
+export default theme;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..3d0a51a
--- /dev/null
+++ b/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/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..9d31e2a
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..627a319
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+});