Skip to content

Commit 606db75

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

20 files changed

+427
-0
lines changed

‎.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,4 @@ generating.json
2323
material-metadata.json
2424
apps/docs/public
2525
apps/docs/src/generated
26+
examples/

‎examples/vite-ts/.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-ts/README.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
# ReactMD + TypeScript + 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.tsx) that initializes a base layout for the app
11+
- [MainNavigation](./src/components/MainNavigation.tsx) as an example navigation panel
12+
- [rmdConfig](./src/rmdConfig.tsx) 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-ts
20+
cd vite-ts
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 updating the configuration to enable type-aware lint rules:
48+
49+
```js
50+
export default tseslint.config({
51+
extends: [
52+
// Remove ...tseslint.configs.recommended and replace with this
53+
...tseslint.configs.recommendedTypeChecked,
54+
// Alternatively, use this for stricter rules
55+
...tseslint.configs.strictTypeChecked,
56+
// Optionally, add this for stylistic rules
57+
...tseslint.configs.stylisticTypeChecked,
58+
],
59+
languageOptions: {
60+
// other options...
61+
parserOptions: {
62+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
63+
tsconfigRootDir: import.meta.dirname,
64+
},
65+
},
66+
})
67+
```
68+
69+
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
70+
71+
```js
72+
// eslint.config.js
73+
import reactX from 'eslint-plugin-react-x'
74+
import reactDom from 'eslint-plugin-react-dom'
75+
76+
export default tseslint.config({
77+
plugins: {
78+
// Add the react-x and react-dom plugins
79+
'react-x': reactX,
80+
'react-dom': reactDom,
81+
},
82+
rules: {
83+
// other rules...
84+
// Enable its recommended typescript rules
85+
...reactX.configs['recommended-typescript'].rules,
86+
...reactDom.configs.recommended.rules,
87+
},
88+
})
89+
```

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
},
28+
)

‎examples/vite-ts/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 + TS</title>
14+
</head>
15+
<body>
16+
<div id="root"></div>
17+
<script type="module" src="/src/main.tsx"></script>
18+
</body>
19+
</html>

‎examples/vite-ts/package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "vite-ts",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc -b && 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+
"typescript": "~5.7.2",
30+
"typescript-eslint": "^8.24.1",
31+
"vite": "^6.2.0"
32+
}
33+
}

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

1.12 KB
Binary file not shown.

‎examples/vite-ts/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-ts/src/components/App.tsx‎

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 { ReactElement } from 'react'
5+
import { RootLayout } from './RootLayout.jsx'
6+
7+
export default function App(): ReactElement {
8+
return (
9+
<RootLayout>
10+
<TextContainer>
11+
<Typography>
12+
This is a simple app bootstrapped with{" "}
13+
<Link href="https://react-md.dev">react-md</Link>{" "}
14+
and <Link href="https://vite.dev">vite</Link>.
15+
</Typography>
16+
</TextContainer>
17+
</RootLayout>
18+
)
19+
}

‎examples/vite-ts/src/components/MainNavigation.tsx‎

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

0 commit comments

Comments
 (0)