@abhishekzambare/mui 0.0.16 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +57 -61
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,75 +1,71 @@
1
- # React + TypeScript + Vite
1
+ # 1 use provider MUIThemeContextProvider and wrap it to your app element or any element you like to have theme
2
2
 
3
- This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4
-
5
- Currently, two official plugins are available:
6
-
7
- - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
8
- - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
9
-
10
- ## React Compiler
11
-
12
- The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
3
+ ```js
4
+ import { StrictMode } from "react";
5
+ import { createRoot } from "react-dom/client";
6
+ import "./index.css";
7
+ import App from "./App.tsx";
8
+ import { MUIThemeContextProvider } from "@abhishekzambare/mui";
13
9
 
14
- Note: This will impact Vite dev & build performances.
10
+ createRoot(document.getElementById("root")!).render(
11
+ <StrictMode>
12
+ <MUIThemeContextProvider>
13
+ <App />
14
+ </MUIThemeContextProvider>
15
+ </StrictMode>,
16
+ );
15
17
 
16
- ## Expanding the ESLint configuration
18
+ ```
17
19
 
18
- If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
20
+ # 2 apply my theme so mui looks better and has lots of colors
19
21
 
20
22
  ```js
21
- export default defineConfig([
22
- globalIgnores(['dist']),
23
- {
24
- files: ['**/*.{ts,tsx}'],
25
- extends: [
26
- // Other configs...
23
+ import { useMUIThemeContext } from "@abhishekzambare/mui";
24
+ import { Button, Stack, ThemeProvider } from "@mui/material";
25
+
26
+ function App() {
27
+ const theme = useMUIThemeContext();
27
28
 
28
- // Remove tseslint.configs.recommended and replace with this
29
- tseslint.configs.recommendedTypeChecked,
30
- // Alternatively, use this for stricter rules
31
- tseslint.configs.strictTypeChecked,
32
- // Optionally, add this for stylistic rules
33
- tseslint.configs.stylisticTypeChecked,
29
+ return (
30
+ <ThemeProvider theme={theme.Theme_WebApp_Theme}>
31
+ <>
32
+ <Stack spacing={2} direction="row">
33
+ <Button variant="text">Text</Button>
34
+ <Button variant="contained">Contained</Button>
35
+ <Button variant="outlined">Outlined</Button>
36
+ </Stack>
37
+ </>
38
+ </ThemeProvider>
39
+ );
40
+ }
34
41
 
35
- // Other configs...
36
- ],
37
- languageOptions: {
38
- parserOptions: {
39
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
40
- tsconfigRootDir: import.meta.dirname,
41
- },
42
- // other options...
43
- },
44
- },
45
- ])
42
+ export default App;
46
43
  ```
47
44
 
48
- 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:
45
+ # 3 use the theme component to change theme colors use it anywere but within the provider tree
49
46
 
50
47
  ```js
51
- // eslint.config.js
52
- import reactX from 'eslint-plugin-react-x'
53
- import reactDom from 'eslint-plugin-react-dom'
48
+ import { useMUIThemeContext, YinYangThemesMenu } from "@abhishekzambare/mui";
49
+ import { Button, Stack, ThemeProvider } from "@mui/material";
50
+
51
+ function App() {
52
+ const theme = useMUIThemeContext();
54
53
 
55
- export default defineConfig([
56
- globalIgnores(['dist']),
57
- {
58
- files: ['**/*.{ts,tsx}'],
59
- extends: [
60
- // Other configs...
61
- // Enable lint rules for React
62
- reactX.configs['recommended-typescript'],
63
- // Enable lint rules for React DOM
64
- reactDom.configs.recommended,
65
- ],
66
- languageOptions: {
67
- parserOptions: {
68
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
69
- tsconfigRootDir: import.meta.dirname,
70
- },
71
- // other options...
72
- },
73
- },
74
- ])
54
+ return (
55
+ <ThemeProvider theme={theme.Theme_WebApp_Theme}>
56
+ <>
57
+ <Stack spacing={2} direction="row">
58
+ <Button variant="text">Text</Button>
59
+ <Button variant="contained">Contained</Button>
60
+ <Button variant="outlined">Outlined</Button>
61
+ </Stack>
62
+ <YinYangThemesMenu />
63
+ </>
64
+ </ThemeProvider>
65
+ );
66
+ }
67
+
68
+ export default App;
75
69
  ```
70
+
71
+ - [By Abhishek Zambare](http://abhishekzambare.vercel.app/)
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@abhishekzambare/mui",
3
3
  "description": "MUI Wrapper",
4
- "version": "0.0.16",
4
+ "version": "0.0.18",
5
5
  "author": "Abhishek Zambare",
6
6
  "license": "MIT",
7
7
  "private": false,