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()], +});