Skip to content

Commit e5b314f

Browse files
mlaursenmlaursen
committed
feat(examples): add vite-js example
1 parent 606db75 commit e5b314f

File tree

17 files changed

+341
-19
lines changed

17 files changed

+341
-19
lines changed

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ node_modules
99

1010
/prev
1111
/public
12+
/examples
1213

1314
*.cjs
1415
packages/material-icons/*.mjs

‎examples/vite-js/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/vite-js/README.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# ReactMD + Vite
2+
3+
This template provides a minimal setup to get ReactMD working in Vite with HMR and some ESLint rules.
4+
5+
## What's Included
6+
7+
This example will setup an example Create React App + ReactMD app that has the following features:
8+
9+
- [\_everything.scss](./src/_everything.scss) to override the default `react-md` theme and feature toggles
10+
- [RootLayout](./src/components/RootLayout.jsx) that initializes a base layout for the app
11+
- [MainNavigation](./src/components/MainNavigation.jsx) as an example navigation panel
12+
- [rmdConfig](./src/rmdConfig.jsx) to configure icons and other global settings in `react-md`
13+
14+
## How to Use
15+
16+
Download the example:
17+
18+
```bash
19+
curl https://codeload.github.com/mlaursen/react-md/tar.gz/main | tar -xz --strip=2 react-md-main/examples/vite-js
20+
cd vite-js
21+
```
22+
23+
Install it and run:
24+
25+
```sh
26+
npm install
27+
npm run dev
28+
```
29+
30+
Finally, initialize the git repo and create your first commit:
31+
32+
```sh
33+
git init
34+
git add .
35+
git commit -m "Initial commit"
36+
```
37+
38+
## Vite
39+
40+
Currently, two official plugins are available:
41+
42+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
43+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
44+
45+
## Expanding the ESLint configuration
46+
47+
If you are developing a production application, we recommend using TypeScript and enable type-aware lint rules. Check out the [TS template](https://github.com/mlaursen/react-md/next/examples/vite-ts) to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

‎examples/vite-js/eslint.config.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
6+
export default [
7+
{ ignores: ['dist'] },
8+
{
9+
files: ['**/*.{js,jsx}'],
10+
languageOptions: {
11+
ecmaVersion: 2020,
12+
globals: globals.browser,
13+
parserOptions: {
14+
ecmaVersion: 'latest',
15+
ecmaFeatures: { jsx: true },
16+
sourceType: 'module',
17+
},
18+
},
19+
plugins: {
20+
'react-hooks': reactHooks,
21+
'react-refresh': reactRefresh,
22+
},
23+
rules: {
24+
...js.configs.recommended.rules,
25+
...reactHooks.configs.recommended.rules,
26+
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
27+
'react-refresh/only-export-components': [
28+
'warn',
29+
{ allowConstantExport: true },
30+
],
31+
},
32+
},
33+
]

‎examples/vite-js/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<title>ReactMD + VIte</title>
14+
</head>
15+
<body>
16+
<div id="root"></div>
17+
<script type="module" src="/src/main.jsx"></script>
18+
</body>
19+
</html>

‎examples/vite-js/package.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "vite-js",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"lint": "eslint .",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"@react-md/core": "^1.0.0-next.20",
14+
"@react-md/material-icons": "^6.0.0-next.21",
15+
"cnbuilder": "^3.1.0",
16+
"react": "^19.0.0",
17+
"react-dom": "^19.0.0"
18+
},
19+
"devDependencies": {
20+
"@eslint/js": "^9.21.0",
21+
"@types/react": "^19.0.10",
22+
"@types/react-dom": "^19.0.4",
23+
"@vitejs/plugin-react-swc": "^3.8.0",
24+
"eslint": "^9.21.0",
25+
"eslint-plugin-react-hooks": "^5.1.0",
26+
"eslint-plugin-react-refresh": "^0.4.19",
27+
"globals": "^15.15.0",
28+
"sass-embedded": "^1.86.0",
29+
"vite": "^6.2.0"
30+
}
31+
}

‎examples/vite-js/public/favicon.ico‎

1.12 KB
Binary file not shown.

‎examples/vite-js/src/_everything.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@use '@react-md/core/colors';
2+
3+
@forward '@react-md/core' with (
4+
$color-scheme: system,
5+
$primary-color: colors.$teal-500,
6+
$secondary-color: colors.$pink-a-200,
7+
$icon-disable-font: true,
8+
$disable-rtl: true
9+
);

‎examples/vite-js/src/components/App.jsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Link } from '@react-md/core/link/Link'
2+
import { TextContainer } from '@react-md/core/typography/TextContainer'
3+
import { Typography } from '@react-md/core/typography/Typography'
4+
import { RootLayout } from './RootLayout.jsx'
5+
6+
export default function App() {
7+
return (
8+
<RootLayout>
9+
<TextContainer>
10+
<Typography>
11+
This is a simple app bootstrapped with{" "}
12+
<Link href="https://react-md.dev">react-md</Link>{" "}
13+
and <Link href="https://vite.dev">vite</Link>.
14+
</Typography>
15+
</TextContainer>
16+
</RootLayout>
17+
)
18+
}
19+

‎examples/vite-js/src/components/MainNavigation.jsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Typography } from '@react-md/core/typography/Typography'
2+
3+
export function MainNavigation() {
4+
return (
5+
<>
6+
<Typography textAlign="center">This is the navigation!</Typography>
7+
</>
8+
)
9+
}

0 commit comments

Comments
 (0)