From 00458d8eb58ae0faba4349e240ef531926bb87a0 Mon Sep 17 00:00:00 2001 From: Dhananjay-JSR <47073516+Dhananjay-JSR@users.noreply.github.com> Date: Mon, 28 Feb 2022 01:48:19 +0530 Subject: [PATCH] Added Vite Starter Template for Next UI --- examples/vite-react-typescript/.gitignore | 24 ++++++++++ examples/vite-react-typescript/README.md | 40 +++++++++++++++++ examples/vite-react-typescript/index.html | 13 ++++++ examples/vite-react-typescript/package.json | 22 +++++++++ examples/vite-react-typescript/src/App.css | 42 ++++++++++++++++++ examples/vite-react-typescript/src/App.tsx | 36 +++++++++++++++ examples/vite-react-typescript/src/index.css | 13 ++++++ examples/vite-react-typescript/src/logo.png | Bin 0 -> 6260 bytes examples/vite-react-typescript/src/main.tsx | 11 +++++ .../vite-react-typescript/src/vite-env.d.ts | 1 + examples/vite-react-typescript/tsconfig.json | 21 +++++++++ .../vite-react-typescript/tsconfig.node.json | 8 ++++ examples/vite-react-typescript/vite.config.ts | 7 +++ 13 files changed, 238 insertions(+) create mode 100644 examples/vite-react-typescript/.gitignore create mode 100644 examples/vite-react-typescript/README.md create mode 100644 examples/vite-react-typescript/index.html create mode 100644 examples/vite-react-typescript/package.json create mode 100644 examples/vite-react-typescript/src/App.css create mode 100644 examples/vite-react-typescript/src/App.tsx create mode 100644 examples/vite-react-typescript/src/index.css create mode 100644 examples/vite-react-typescript/src/logo.png create mode 100644 examples/vite-react-typescript/src/main.tsx create mode 100644 examples/vite-react-typescript/src/vite-env.d.ts create mode 100644 examples/vite-react-typescript/tsconfig.json create mode 100644 examples/vite-react-typescript/tsconfig.node.json create mode 100644 examples/vite-react-typescript/vite.config.ts diff --git a/examples/vite-react-typescript/.gitignore b/examples/vite-react-typescript/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/examples/vite-react-typescript/.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/examples/vite-react-typescript/README.md b/examples/vite-react-typescript/README.md new file mode 100644 index 000000000..4ed87e4a8 --- /dev/null +++ b/examples/vite-react-typescript/README.md @@ -0,0 +1,40 @@ +This is a [Vite React TypeScript](https://reactjs.org/) project bootstrapped with [`create vite`](https://stackblitz.com/edit/vitejs-vite-9rgerc?file=index.html&terminal=dev). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `src/App.tsx`. The page auto-updates as you edit the file. + + + +## Learn More + +To learn more about React.js, take a look at the following resources: + +- [React.js Documentation](https://reactjs.org/docs/getting-started.html) - learn about React.js features and API. +- [Learn Vite](https://vitejs.dev/guide/) - Next Generation Frontend Tooling. +- [Learn Next UI](https://nextui.org/) - Beautiful, fast and modern React UI library. + +You can check out [the Next UI GitHub repository](https://github.com/nextui-org/nextui) - your feedback and contributions are welcome! + +## Creating Production Build + +Run + +```bash +npm run build +``` + +To Serve the Production App Locally + +```bash +npm install -g serve +serve -s dist +``` \ No newline at end of file diff --git a/examples/vite-react-typescript/index.html b/examples/vite-react-typescript/index.html new file mode 100644 index 000000000..1ecd8d83c --- /dev/null +++ b/examples/vite-react-typescript/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/examples/vite-react-typescript/package.json b/examples/vite-react-typescript/package.json new file mode 100644 index 000000000..3b76fcbe1 --- /dev/null +++ b/examples/vite-react-typescript/package.json @@ -0,0 +1,22 @@ +{ + "name": "next_ui_vite", + "private": true, + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@nextui-org/react": "^1.0.2-beta.4", + "react": "^17.0.2", + "react-dom": "^17.0.2" + }, + "devDependencies": { + "@types/react": "^17.0.33", + "@types/react-dom": "^17.0.10", + "@vitejs/plugin-react": "^1.0.7", + "typescript": "^4.5.4", + "vite": "^2.8.0" + } +} diff --git a/examples/vite-react-typescript/src/App.css b/examples/vite-react-typescript/src/App.css new file mode 100644 index 000000000..676544c23 --- /dev/null +++ b/examples/vite-react-typescript/src/App.css @@ -0,0 +1,42 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 100s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +button { + font-size: calc(10px + 2vmin); +} diff --git a/examples/vite-react-typescript/src/App.tsx b/examples/vite-react-typescript/src/App.tsx new file mode 100644 index 000000000..073e2c3df --- /dev/null +++ b/examples/vite-react-typescript/src/App.tsx @@ -0,0 +1,36 @@ +import { useState } from 'react' +import logo from './logo.png' +import './App.css' +import {Button,Text,Link } from "@nextui-org/react"; + +function App() { + const [count, setCount] = useState(0) + + return ( +
+
+ logo +

Hello Vite + NextUI!

 +

+ +

+ +

+ Edit App.tsx and save to test HMR updates. +

+ +

+ Learn React + {' | '} + Vite Docs + {' | '} + NextUI Docs +

+
+
+ ) +} + +export default App diff --git a/examples/vite-react-typescript/src/index.css b/examples/vite-react-typescript/src/index.css new file mode 100644 index 000000000..ec2585e8c --- /dev/null +++ b/examples/vite-react-typescript/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/examples/vite-react-typescript/src/logo.png b/examples/vite-react-typescript/src/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..cd5ac1a9420ea1847746f489d890b55d43b79bd2 GIT binary patch literal 6260 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 JjhcP<{{TNwaV`J= literal 0 HcmV?d00001 diff --git a/examples/vite-react-typescript/src/main.tsx b/examples/vite-react-typescript/src/main.tsx new file mode 100644 index 000000000..606a3cf44 --- /dev/null +++ b/examples/vite-react-typescript/src/main.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import ReactDOM from 'react-dom' +import './index.css' +import App from './App' + +ReactDOM.render( + + + , + document.getElementById('root') +) diff --git a/examples/vite-react-typescript/src/vite-env.d.ts b/examples/vite-react-typescript/src/vite-env.d.ts new file mode 100644 index 000000000..11f02fe2a --- /dev/null +++ b/examples/vite-react-typescript/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/vite-react-typescript/tsconfig.json b/examples/vite-react-typescript/tsconfig.json new file mode 100644 index 000000000..3d0a51a86 --- /dev/null +++ b/examples/vite-react-typescript/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/examples/vite-react-typescript/tsconfig.node.json b/examples/vite-react-typescript/tsconfig.node.json new file mode 100644 index 000000000..e993792cb --- /dev/null +++ b/examples/vite-react-typescript/tsconfig.node.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "composite": true, + "module": "esnext", + "moduleResolution": "node" + }, + "include": ["vite.config.ts"] +} diff --git a/examples/vite-react-typescript/vite.config.ts b/examples/vite-react-typescript/vite.config.ts new file mode 100644 index 000000000..b1b5f91e5 --- /dev/null +++ b/examples/vite-react-typescript/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()] +})