Skip to content

Commit 8472c3c

Browse files
ChucKN0risKChucKN0risK
authored
Add files
1 parent da164a5 commit 8472c3c

25 files changed

+2790
-1
lines changed

‎README.md

+39-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,39 @@
1-
# Specify Material UI Example
1+
# Material UI - Vite.js in TypeScript example
2+
3+
## How to use
4+
5+
Download the example [or clone the repo](https://github.com/mui/material-ui):
6+
7+
<!-- #default-branch-switch -->
8+
9+
```bash
10+
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-vite-ts
11+
cd material-ui-vite-ts
12+
```
13+
14+
Install it and run:
15+
16+
```bash
17+
npm install
18+
npm run dev
19+
```
20+
21+
or:
22+
23+
<!-- #default-branch-switch -->
24+
25+
[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-vite-ts)
26+
27+
[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-vite-ts)
28+
29+
## The idea behind the example
30+
31+
This example uses [Vite.js](https://github.com/vitejs/vite).
32+
It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5.
33+
34+
## What's next?
35+
36+
<!-- #default-branch-switch -->
37+
38+
You now have a working example project.
39+
You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section.

‎bun.lockb

72.1 KB
Binary file not shown.

‎generated/tokens.ts

+307
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,307 @@
1+
/**
2+
* @typedef {typeof colorPaths} ColorPaths - All the valid paths for the tokens of type color.
3+
* To use this type you can do: `@type {import('path/to/myTokensFile').ColorPaths}`
4+
*/
5+
export const colorPaths = /** @type {const} */ [
6+
"primitive.color.black",
7+
"primitive.color.blue.0",
8+
"primitive.color.blue.1",
9+
"primitive.color.blue.2",
10+
"primitive.color.blue.3",
11+
"primitive.color.blue.4",
12+
"primitive.color.blue.5",
13+
"primitive.color.blue.6",
14+
"primitive.color.blue.7",
15+
"primitive.color.blue.8",
16+
"primitive.color.blue.9",
17+
"primitive.color.gray.0",
18+
"primitive.color.gray.1",
19+
"primitive.color.gray.2",
20+
"primitive.color.gray.3",
21+
"primitive.color.gray.4",
22+
"primitive.color.gray.5",
23+
"primitive.color.gray.6",
24+
"primitive.color.gray.7",
25+
"primitive.color.gray.8",
26+
"primitive.color.gray.9",
27+
"primitive.color.green.0",
28+
"primitive.color.green.1",
29+
"primitive.color.green.2",
30+
"primitive.color.green.3",
31+
"primitive.color.green.4",
32+
"primitive.color.green.5",
33+
"primitive.color.green.6",
34+
"primitive.color.green.7",
35+
"primitive.color.green.8",
36+
"primitive.color.green.9",
37+
"primitive.color.orange.0",
38+
"primitive.color.orange.1",
39+
"primitive.color.orange.2",
40+
"primitive.color.orange.3",
41+
"primitive.color.orange.4",
42+
"primitive.color.orange.5",
43+
"primitive.color.orange.6",
44+
"primitive.color.orange.7",
45+
"primitive.color.orange.8",
46+
"primitive.color.orange.9",
47+
"primitive.color.red.0",
48+
"primitive.color.red.1",
49+
"primitive.color.red.2",
50+
"primitive.color.red.3",
51+
"primitive.color.red.4",
52+
"primitive.color.red.5",
53+
"primitive.color.red.6",
54+
"primitive.color.red.7",
55+
"primitive.color.red.8",
56+
"primitive.color.red.9",
57+
"primitive.color.white",
58+
"themedColor.surface.1",
59+
"themedColor.surface.2",
60+
"themedColor.surface.3",
61+
"themedColor.surface.error",
62+
"themedColor.surface.information",
63+
"themedColor.surface.success",
64+
"themedColor.surface.warning",
65+
"themedColor.text.error.default",
66+
"themedColor.text.error.hover",
67+
"themedColor.text.highEmphasis.active",
68+
"themedColor.text.highEmphasis.default",
69+
"themedColor.text.highEmphasis.hover",
70+
"themedColor.text.information.default",
71+
"themedColor.text.information.hover",
72+
"themedColor.text.lowEmphasis.default",
73+
"themedColor.text.mediumEmphasis.default",
74+
"themedColor.text.mediumEmphasis.hover",
75+
"themedColor.text.success.default",
76+
"themedColor.text.success.hover",
77+
"themedColor.text.warning.default",
78+
"themedColor.text.warning.hover",
79+
] as const;
80+
export type ColorPaths = typeof colorPaths;
81+
82+
/**
83+
* @typedef {typeof themedColorPaths} ThemedcolorPaths - All the valid paths for the collection themedColor.
84+
* To use this type you can do: `@type {import('path/to/myTokensFile').ThemedcolorPaths}`
85+
*/
86+
export const themedColorPaths = /** @type {const} */ [
87+
"themedColor.surface.1",
88+
"themedColor.surface.2",
89+
"themedColor.surface.3",
90+
"themedColor.surface.error",
91+
"themedColor.surface.information",
92+
"themedColor.surface.success",
93+
"themedColor.surface.warning",
94+
"themedColor.text.error.default",
95+
"themedColor.text.error.hover",
96+
"themedColor.text.highEmphasis.active",
97+
"themedColor.text.highEmphasis.default",
98+
"themedColor.text.highEmphasis.hover",
99+
"themedColor.text.information.default",
100+
"themedColor.text.information.hover",
101+
"themedColor.text.lowEmphasis.default",
102+
"themedColor.text.mediumEmphasis.default",
103+
"themedColor.text.mediumEmphasis.hover",
104+
"themedColor.text.success.default",
105+
"themedColor.text.success.hover",
106+
"themedColor.text.warning.default",
107+
"themedColor.text.warning.hover",
108+
] as const;
109+
export type ThemedcolorPaths = typeof themedColorPaths;
110+
111+
/**
112+
* @typedef {ColorPaths | ThemedcolorPaths} AllPath - All possible paths
113+
*/
114+
export type AllPath = ColorPaths | ThemedcolorPaths;
115+
116+
/**
117+
* @typedef {typeof pathsByType} PathsByType - All the paths for a given token type. Needed for `getTokensByType`
118+
*/
119+
const pathsByType = /** @type {const} */ {
120+
color: colorPaths,
121+
} as const;
122+
type PathsByType = typeof pathsByType;
123+
124+
/**
125+
* @typedef {typeof colorModes[number]} ColorModes - All the valid modes of color.
126+
* To use this type you can do: `@type {import('path/to/myTokensFile').ColorModes}`
127+
*/
128+
export const colorModes = /** @type {const} */ ["dark", "light"] as const;
129+
export type ColorModes = (typeof colorModes)[number];
130+
131+
/**
132+
* @typedef {typeof themedColorModes[number]} ThemedcolorModes - All the valid modes of themedColor.
133+
* To use this type you can do: `@type {import('path/to/myTokensFile').ThemedcolorModes}`
134+
*/
135+
export const themedColorModes = /** @type {const} */ ["light", "dark"] as const;
136+
export type ThemedcolorModes = (typeof themedColorModes)[number];
137+
138+
/**
139+
* @typedef {ColorModes | ThemedcolorModes} AllMode - All the available modes
140+
*/
141+
export type AllMode = ColorModes | ThemedcolorModes;
142+
143+
/**
144+
* @typedef {typeof tokens} Tokens - All the tokens.
145+
* Use `getTokenByMode` to retrieve one.
146+
*/
147+
export const tokens = /** @type {const} */ {
148+
"primitive.color.black": "#000000",
149+
"primitive.color.blue.0": "#e7f5ff",
150+
"primitive.color.blue.1": "#d0ebff",
151+
"primitive.color.blue.2": "#a5d8ff",
152+
"primitive.color.blue.3": "#74c0fc",
153+
"primitive.color.blue.4": "#4dabf7",
154+
"primitive.color.blue.5": "#339af0",
155+
"primitive.color.blue.6": "#228be6",
156+
"primitive.color.blue.7": "#1c7ed6",
157+
"primitive.color.blue.8": "#1971c2",
158+
"primitive.color.blue.9": "#1864ab",
159+
"primitive.color.gray.0": "#f8f9fa",
160+
"primitive.color.gray.1": "#f1f3f5",
161+
"primitive.color.gray.2": "#e9ecef",
162+
"primitive.color.gray.3": "#dee2e6",
163+
"primitive.color.gray.4": "#ced4da",
164+
"primitive.color.gray.5": "#adb5bd",
165+
"primitive.color.gray.6": "#868e96",
166+
"primitive.color.gray.7": "#495057",
167+
"primitive.color.gray.8": "#343a40",
168+
"primitive.color.gray.9": "#212529",
169+
"primitive.color.green.0": "#ebfbee",
170+
"primitive.color.green.1": "#d3f9d8",
171+
"primitive.color.green.2": "#b2f2bb",
172+
"primitive.color.green.3": "#8ce99a",
173+
"primitive.color.green.4": "#69db7c",
174+
"primitive.color.green.5": "#51cf66",
175+
"primitive.color.green.6": "#40c057",
176+
"primitive.color.green.7": "#37b24d",
177+
"primitive.color.green.8": "#2f9e44",
178+
"primitive.color.green.9": "#2b8a3e",
179+
"primitive.color.orange.0": "#fff4e6",
180+
"primitive.color.orange.1": "#ffe8cc",
181+
"primitive.color.orange.2": "#ffd8a8",
182+
"primitive.color.orange.3": "#ffc078",
183+
"primitive.color.orange.4": "#ffa94d",
184+
"primitive.color.orange.5": "#ff922b",
185+
"primitive.color.orange.6": "#fd7e14",
186+
"primitive.color.orange.7": "#f76707",
187+
"primitive.color.orange.8": "#e8590c",
188+
"primitive.color.orange.9": "#d9480f",
189+
"primitive.color.red.0": "#fff5f5",
190+
"primitive.color.red.1": "#ffe3e3",
191+
"primitive.color.red.2": "#ffc9c9",
192+
"primitive.color.red.3": "#ffa8a8",
193+
"primitive.color.red.4": "#ff8787",
194+
"primitive.color.red.5": "#ff6b6b",
195+
"primitive.color.red.6": "#fa5252",
196+
"primitive.color.red.7": "#f03e3e",
197+
"primitive.color.red.8": "#e03131",
198+
"primitive.color.red.9": "#c92a2a",
199+
"primitive.color.white": "#ffffff",
200+
"themedColor.surface.1": { dark: "#212529", light: "#f8f9fa" },
201+
"themedColor.surface.2": { dark: "#343a40", light: "#f1f3f5" },
202+
"themedColor.surface.3": { dark: "#495057", light: "#e9ecef" },
203+
"themedColor.surface.error": { dark: "#f03e3e", light: "#ff8787" },
204+
"themedColor.surface.information": { dark: "#1c7ed6", light: "#4dabf7" },
205+
"themedColor.surface.success": { dark: "#37b24d", light: "#69db7c" },
206+
"themedColor.surface.warning": { dark: "#f76707", light: "#ffa94d" },
207+
"themedColor.text.error.default": { dark: "#fa5252", light: "#f03e3e" },
208+
"themedColor.text.error.hover": { dark: "#ff6b6b", light: "#fa5252" },
209+
"themedColor.text.highEmphasis.active": { dark: "#e9ecef", light: "#495057" },
210+
"themedColor.text.highEmphasis.default": {
211+
dark: "#f8f9fa",
212+
light: "#212529",
213+
},
214+
"themedColor.text.highEmphasis.hover": { dark: "#f1f3f5", light: "#343a40" },
215+
"themedColor.text.information.default": { dark: "#228be6", light: "#1c7ed6" },
216+
"themedColor.text.information.hover": { dark: "#339af0", light: "#228be6" },
217+
"themedColor.text.lowEmphasis.default": { dark: "#ced4da", light: "#868e96" },
218+
"themedColor.text.mediumEmphasis.default": {
219+
dark: "#dee2e6",
220+
light: "#495057",
221+
},
222+
"themedColor.text.mediumEmphasis.hover": {
223+
dark: "#e9ecef",
224+
light: "#343a40",
225+
},
226+
"themedColor.text.success.default": { dark: "#40c057", light: "#37b24d" },
227+
"themedColor.text.success.hover": { dark: "#51cf66", light: "#40c057" },
228+
"themedColor.text.warning.default": { dark: "#fd7e14", light: "#f76707" },
229+
"themedColor.text.warning.hover": { dark: "#ff922b", light: "#fd7e14" },
230+
} as const;
231+
type Tokens = typeof tokens;
232+
233+
/**
234+
* Retrieve any token for a given mode. If available, the default mode will be: 'default'
235+
* @template {AllPath} Path - A generic extending all the possible paths
236+
* @template {Tokens[Path] extends Record<string, any>
237+
? keyof Tokens[Path]
238+
: undefined} Mode - A generic representing all the valid modes for a given path
239+
* @template {Tokens[Path] extends Record<string, any>
240+
? Tokens[Path][Mode extends undefined ? never : Mode]
241+
: Tokens[Path]} Return - The return type
242+
* @param {Path} path - The path to the token
243+
* @param {Mode} mode - The mode of the token you want to retrieve
244+
* @returns {Return} - The value of a token for a given mode
245+
*/
246+
export function getTokenByMode<
247+
Path extends keyof Tokens,
248+
Mode extends Tokens[Path] extends Record<string, any>
249+
? keyof Tokens[Path]
250+
: undefined,
251+
Return extends Tokens[Path] extends Record<string, any>
252+
? Tokens[Path][Mode extends undefined ? never : Mode]
253+
: Tokens[Path],
254+
>(path: Path, mode: Mode): Return {
255+
if (!tokens[path]) {
256+
throw new Error(
257+
"Path: '" +
258+
path +
259+
"' doesn't exist. Here are all the valid paths:\n- " +
260+
Object.keys(tokens).join("\n- "),
261+
);
262+
}
263+
264+
if (typeof tokens[path] !== "object") {
265+
return tokens[path] as Return;
266+
}
267+
268+
if (!mode)
269+
throw new Error(
270+
"Mode is undefined but it should be one of " +
271+
Object.keys(tokens[path]).join(", ") +
272+
" for path: " +
273+
path,
274+
);
275+
276+
if (!tokens[path][mode]) {
277+
throw new Error(
278+
"Invalid mode '" +
279+
mode.toString() +
280+
" at path '" +
281+
path +
282+
"', here are all the valid modes:\n- " +
283+
Object.keys(tokens[path]).join("\n- "),
284+
);
285+
}
286+
287+
return tokens[path][mode] as Return;
288+
}
289+
290+
/**
291+
* Retrieve all the tokens for a specific type (color, dimension, etc...).
292+
* Note that the value will either be a string or an object if the token has modes
293+
* @template {keyof PathsByType} Type - A generic extending all the possible types
294+
* @template {Tokens[PathsByType[Type][number]]} Token - A generic representing a union of all the outputs
295+
* @param {Type} type - The path to the token
296+
* @returns {Array<Token>} - An array with all the values
297+
*/
298+
export function getTokensByType<
299+
Type extends keyof PathsByType,
300+
Token extends Tokens[PathsByType[Type][number]],
301+
>(type: Type): Array<Token> {
302+
if (!pathsByType[type]) {
303+
throw new Error("The type: '" + type + "' does not exist");
304+
}
305+
306+
return pathsByType[type].map((path) => tokens[path]) as Array<Token>;
307+
}

‎index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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="initial-scale=1, width=device-width" />
7+
<!-- Fonts to support Material Design -->
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
rel="stylesheet"
12+
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
13+
/>
14+
<title>Vite + Material UI + TS</title>
15+
</head>
16+
<body>
17+
<div id="root"></div>
18+
<script type="module" src="/src/main.tsx"></script>
19+
</body>
20+
</html>

‎package.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "material-ui-vite-ts",
3+
"private": true,
4+
"version": "5.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@emotion/react": "latest",
13+
"@emotion/styled": "latest",
14+
"@mui/icons-material": "latest",
15+
"@mui/lab": "^5.0.0-alpha.165",
16+
"@mui/material": "latest",
17+
"react": "latest",
18+
"react-dom": "latest"
19+
},
20+
"devDependencies": {
21+
"@types/node": "^20.11.17",
22+
"@types/react": "latest",
23+
"@types/react-dom": "latest",
24+
"@vitejs/plugin-react": "latest",
25+
"typescript": "latest",
26+
"vite": "latest"
27+
}
28+
}

0 commit comments

Comments
 (0)