feat: add vite sandbox template

microsoft · Jan 13, 2025 · 723bef3 · 723bef3
1 parent 2f88d06
commit 723bef3
Show file tree

Hide file tree

Showing 11 changed files with 201 additions and 0 deletions.
diff --git a/sandbox/fluentui-v9-vite/.gitignore b/sandbox/fluentui-v9-vite/.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/sandbox/fluentui-v9-vite/README.md b/sandbox/fluentui-v9-vite/README.md
@@ -0,0 +1,32 @@
+# FluentUI React v9 - Vite.js example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/microsoft/fluentui):
+
+```bash
+npx degit microsoft/fluentui/sandbox/vite-v9 fluentui-v9-vite
+cd fluentui-v9-vite
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+or:
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/microsoft/fluentui/tree/master/sandbox/fluentui-v9-vite)
+
+[![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)
+
+## The idea behind the example
+
+This example uses [Vite.js](https://github.com/vitejs/vite).
+It includes `@fluentui/react-components` and its peer dependencies, including `@fluentui/react-icons`.
+
+## What's next?
+
+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.
diff --git a/sandbox/fluentui-v9-vite/index.html b/sandbox/fluentui-v9-vite/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/sandbox/fluentui-v9-vite/package.json b/sandbox/fluentui-v9-vite/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "fluentui-v9-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.5"
+  }
+}
diff --git a/sandbox/fluentui-v9-vite/src/App.tsx b/sandbox/fluentui-v9-vite/src/App.tsx
@@ -0,0 +1,12 @@
+import { FluentProvider, webLightTheme } from '@fluentui/react-components';
+import { Example } from './Example';
+
+const App = () => {
+  return (
+    <FluentProvider theme={webLightTheme}>
+      <Example />
+    </FluentProvider>
+  );
+};
+
+export default App;
diff --git a/sandbox/fluentui-v9-vite/src/Example.tsx b/sandbox/fluentui-v9-vite/src/Example.tsx
@@ -0,0 +1,26 @@
+import { Button, Title1, makeStyles } from '@fluentui/react-components';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
+const useStyles = makeStyles({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px',
+    padding: '32px',
+  },
+});
+
+export const Example = () => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.container}>
+      <Title1>Hello, Fluent UI!</Title1>
+      <Button appearance="primary" icon={<CalendarMonth />}>
+        Click Me
+      </Button>
+    </div>
+  );
+};
diff --git a/sandbox/fluentui-v9-vite/src/main.tsx b/sandbox/fluentui-v9-vite/src/main.tsx
@@ -0,0 +1,11 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+
+const root = createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/sandbox/fluentui-v9-vite/tsconfig.app.json b/sandbox/fluentui-v9-vite/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/sandbox/fluentui-v9-vite/tsconfig.json b/sandbox/fluentui-v9-vite/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}
diff --git a/sandbox/fluentui-v9-vite/tsconfig.node.json b/sandbox/fluentui-v9-vite/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/sandbox/fluentui-v9-vite/vite.config.ts b/sandbox/fluentui-v9-vite/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})