migration of the example from CRA to Vite

mui · mapache-salvaje · Sep 12, 2023 · Jun 14, 2023 · Jun 14, 2023 · Jun 14, 2023
commit e99b68510e8550ee1a75356c98ce2b8ca3d4634b
diff --git a/examples/base-cra-tailwind-ts/.eslintrc.cjs b/examples/base-cra-tailwind-ts/.eslintrc.cjs
@@ -0,0 +1,15 @@
+module.exports = {
+    env: { browser: true, es2020: true },
+    extends: [
+      'eslint:recommended',
+      'plugin:@typescript-eslint/recommended',
+      'plugin:react-hooks/recommended',
+    ],
+    parser: '@typescript-eslint/parser',
+    parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+    plugins: ['react-refresh'],
+    rules: {
+      'react-refresh/only-export-components': 'warn',
+    },
+  }
+
diff --git a/examples/base-cra-tailwind-ts/.gitignore b/examples/base-cra-tailwind-ts/.gitignore
@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# 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/base-cra-tailwind-ts/README.md b/examples/base-cra-tailwind-ts/README.md
@@ -1,4 +1,10 @@
-# Base UI - Create React App example with Tailwind CSS in TypeScript
+# Base UI - Vite React example with Tailwind CSS in TypeScript
+
+[Base UI](https://mui.com/base/getting-started/overview/) is a library of unstyled React UI components which includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components.
+
+[Vite](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects, consisting of a dev server and a build command
+
+[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that provides low-level CSS classes that can be composed to build custom UI designs.
 
 ## How to use
 
@@ -28,5 +34,5 @@ or:
 
 ## The idea behind the example
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This project was bootstrapped with [Vite](https://vitejs.dev/guide/).
 It shows how you can use Base UI together with [Tailwind CSS](https://tailwindcss.com/) to build your application.
diff --git a/examples/base-cra-tailwind-ts/index.html b/examples/base-cra-tailwind-ts/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>
diff --git a/examples/base-cra-tailwind-ts/package.json b/examples/base-cra-tailwind-ts/package.json
@@ -1,28 +1,33 @@
 {
-  "name": "base-cra-tailwind-ts",
-  "version": "0.1.0",
+  "name": "base-vite-tailwind-ts",
   "private": true,
+  "version": "0.2.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
   "dependencies": {
     "@mui/base": "latest",
-    "@testing-library/jest-dom": "latest",
-    "@testing-library/react": "latest",
-    "@testing-library/user-event": "latest",
-    "@types/jest": "latest",
-    "@types/node": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
     "@types/react": "latest",
     "@types/react-dom": "latest",
+    "@typescript-eslint/eslint-plugin": "latest",
+    "@typescript-eslint/parser": "latest",
+    "@vitejs/plugin-react": "latest",
     "autoprefixer": "latest",
+    "eslint": "latest",
+    "eslint-plugin-react-hooks": "latest",
+    "eslint-plugin-react-refresh": "latest",
     "postcss": "latest",
-    "react": "latest",
-    "react-dom": "latest",
-    "react-scripts": "latest",
-    "typescript": "latest"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "tailwindcss": "latest",
+    "typescript": "latest",
+    "vite": "latest"
   },
   "browserslist": {
     "production": [
@@ -36,4 +41,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/examples/base-cra-tailwind-ts/postcss.config.js b/examples/base-cra-tailwind-ts/postcss.config.js
@@ -1,6 +1,6 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}
diff --git a/examples/base-cra-tailwind-ts/public/favicon.ico b/examples/base-cra-tailwind-ts/public/favicon.ico
diff --git a/examples/base-cra-tailwind-ts/public/index.html b/examples/base-cra-tailwind-ts/public/index.html
diff --git a/examples/base-cra-tailwind-ts/public/logo192.png b/examples/base-cra-tailwind-ts/public/logo192.png
diff --git a/examples/base-cra-tailwind-ts/public/logo512.png b/examples/base-cra-tailwind-ts/public/logo512.png
diff --git a/examples/base-cra-tailwind-ts/public/manifest.json b/examples/base-cra-tailwind-ts/public/manifest.json
diff --git a/examples/base-cra-tailwind-ts/public/robots.txt b/examples/base-cra-tailwind-ts/public/robots.txt
diff --git a/examples/base-cra-tailwind-ts/public/vite.svg b/examples/base-cra-tailwind-ts/public/vite.svg
diff --git a/examples/base-cra-tailwind-ts/src/App.tsx b/examples/base-cra-tailwind-ts/src/App.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import Player from './Player';
 
 function App() {

diff --git a/examples/base-cra-tailwind-ts/src/logo.svg → .../base-cra-tailwind-ts/src/assets/logo.svg b/examples/base-cra-tailwind-ts/src/logo.svg → .../base-cra-tailwind-ts/src/assets/logo.svg
diff --git a/examples/base-cra-tailwind-ts/src/Button.tsx → ...cra-tailwind-ts/src/components/Button.tsx b/examples/base-cra-tailwind-ts/src/Button.tsx → ...cra-tailwind-ts/src/components/Button.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import ButtonUnstyled, { ButtonOwnerState, ButtonProps } from '@mui/base/Button';
 
 const Button = React.forwardRef(function Button(

diff --git a/examples/base-cra-tailwind-ts/src/Player.tsx → ...cra-tailwind-ts/src/components/Player.tsx b/examples/base-cra-tailwind-ts/src/Player.tsx → ...cra-tailwind-ts/src/components/Player.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import Button from './Button';
 import Slider from './Slider';
 

diff --git a/examples/base-cra-tailwind-ts/src/Slider.tsx → ...cra-tailwind-ts/src/components/Slider.tsx b/examples/base-cra-tailwind-ts/src/Slider.tsx → ...cra-tailwind-ts/src/components/Slider.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import SliderUnstyled, { SliderThumbSlotProps, SliderProps } from '@mui/base/Slider';
 
 const Thumb = React.forwardRef(function Thumb(

diff --git a/examples/base-cra-tailwind-ts/src/index.tsx b/examples/base-cra-tailwind-ts/src/index.tsx
diff --git a/examples/base-cra-tailwind-ts/src/main.tsx b/examples/base-cra-tailwind-ts/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/examples/base-cra-tailwind-ts/src/react-app-env.d.ts b/examples/base-cra-tailwind-ts/src/react-app-env.d.ts
diff --git a/examples/base-cra-tailwind-ts/src/setupTests.ts b/examples/base-cra-tailwind-ts/src/setupTests.ts
diff --git a/examples/base-cra-tailwind-ts/src/vite-env.d.ts b/examples/base-cra-tailwind-ts/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/base-cra-tailwind-ts/tailwind.config.js b/examples/base-cra-tailwind-ts/tailwind.config.js
@@ -1,7 +1,11 @@
-module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
   theme: {
     extend: {},
   },
   plugins: [],
-};
+}
diff --git a/examples/base-cra-tailwind-ts/tsconfig.json b/examples/base-cra-tailwind-ts/tsconfig.json
@@ -1,20 +1,25 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/examples/base-cra-tailwind-ts/tsconfig.node.json b/examples/base-cra-tailwind-ts/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+      "composite": true,
+      "skipLibCheck": true,
+      "module": "ESNext",
+      "moduleResolution": "bundler",
+      "allowSyntheticDefaultImports": true
+    },
+    "include": ["vite.config.ts"]
+  }
+
diff --git a/examples/base-cra-tailwind-ts/vite.config.ts b/examples/base-cra-tailwind-ts/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()],
+})