Skip to content

Commit 723bef3

Browse files
dmytrokirpadmytrokirpa
committed
feat: add vite sandbox template
1 parent 2f88d06 commit 723bef3

File tree

11 files changed

+201
-0
lines changed

11 files changed

+201
-0
lines changed

‎sandbox/fluentui-v9-vite/.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?

‎sandbox/fluentui-v9-vite/README.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# FluentUI React v9 - Vite.js example
2+
3+
## How to use
4+
5+
Download the example [or clone the repo](https://github.com/microsoft/fluentui):
6+
7+
```bash
8+
npx degit microsoft/fluentui/sandbox/vite-v9 fluentui-v9-vite
9+
cd fluentui-v9-vite
10+
```
11+
12+
Install it and run:
13+
14+
```bash
15+
npm install
16+
npm run dev
17+
```
18+
19+
or:
20+
21+
[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/microsoft/fluentui/tree/master/sandbox/fluentui-v9-vite)
22+
23+
[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/microsoft/fluentui/tree/master/sandbox/fluentui-v9-vite)
24+
25+
## The idea behind the example
26+
27+
This example uses [Vite.js](https://github.com/vitejs/vite).
28+
It includes `@fluentui/react-components` and its peer dependencies, including `@fluentui/react-icons`.
29+
30+
## What's next?
31+
32+
You now have a working example project. To continue, you can explore the [FluentUI React documentation](https://react.fluentui.dev) for more information and advanced usage.

‎sandbox/fluentui-v9-vite/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎sandbox/fluentui-v9-vite/package.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "fluentui-v9-vite",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc -b && vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"react": "^18.3.1",
13+
"react-dom": "^18.3.1"
14+
},
15+
"devDependencies": {
16+
"@types/react": "^18.3.18",
17+
"@types/react-dom": "^18.3.5",
18+
"@vitejs/plugin-react": "^4.3.4",
19+
"typescript": "~5.6.2",
20+
"vite": "^6.0.5"
21+
}
22+
}

‎sandbox/fluentui-v9-vite/src/App.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { FluentProvider, webLightTheme } from '@fluentui/react-components';
2+
import { Example } from './Example';
3+
4+
const App = () => {
5+
return (
6+
<FluentProvider theme={webLightTheme}>
7+
<Example />
8+
</FluentProvider>
9+
);
10+
};
11+
12+
export default App;

‎sandbox/fluentui-v9-vite/src/Example.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Button, Title1, makeStyles } from '@fluentui/react-components';
2+
import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
3+
4+
const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
5+
6+
const useStyles = makeStyles({
7+
container: {
8+
display: 'flex',
9+
flexDirection: 'column',
10+
gap: '16px',
11+
padding: '32px',
12+
},
13+
});
14+
15+
export const Example = () => {
16+
const styles = useStyles();
17+
18+
return (
19+
<div className={styles.container}>
20+
<Title1>Hello, Fluent UI!</Title1>
21+
<Button appearance="primary" icon={<CalendarMonth />}>
22+
Click Me
23+
</Button>
24+
</div>
25+
);
26+
};

‎sandbox/fluentui-v9-vite/src/main.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { StrictMode } from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
import App from './App.tsx';
4+
5+
const root = createRoot(document.getElementById('root') as HTMLElement);
6+
7+
root.render(
8+
<StrictMode>
9+
<App />
10+
</StrictMode>,
11+
);

‎sandbox/fluentui-v9-vite/tsconfig.app.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"compilerOptions": {
3+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4+
"target": "ES2020",
5+
"useDefineForClassFields": true,
6+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
7+
"module": "ESNext",
8+
"skipLibCheck": true,
9+
10+
/* Bundler mode */
11+
"moduleResolution": "bundler",
12+
"allowImportingTsExtensions": true,
13+
"isolatedModules": true,
14+
"moduleDetection": "force",
15+
"noEmit": true,
16+
"jsx": "react-jsx",
17+
18+
/* Linting */
19+
"strict": true,
20+
"noUnusedLocals": true,
21+
"noUnusedParameters": true,
22+
"noFallthroughCasesInSwitch": true,
23+
"noUncheckedSideEffectImports": true
24+
},
25+
"include": ["src"]
26+
}

‎sandbox/fluentui-v9-vite/tsconfig.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"files": [],
3+
"references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
4+
}

‎sandbox/fluentui-v9-vite/tsconfig.node.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"compilerOptions": {
3+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
4+
"target": "ES2022",
5+
"lib": ["ES2023"],
6+
"module": "ESNext",
7+
"skipLibCheck": true,
8+
9+
/* Bundler mode */
10+
"moduleResolution": "bundler",
11+
"allowImportingTsExtensions": true,
12+
"isolatedModules": true,
13+
"moduleDetection": "force",
14+
"noEmit": true,
15+
16+
/* Linting */
17+
"strict": true,
18+
"noUnusedLocals": true,
19+
"noUnusedParameters": true,
20+
"noFallthroughCasesInSwitch": true,
21+
"noUncheckedSideEffectImports": true
22+
},
23+
"include": ["vite.config.ts"]
24+
}

0 commit comments

Comments
 (0)