mui-simple

# [mui-simple](https://www.npmjs.com/package/mui-simple) customized **ALL MUI COMPONENTS** to make simplify the usage of mui. <br/> get a lot of features to use mui, like custom-color that you can send any color of theme color name. <br/> or more customized way to use component easier way, and less code bugs homemade. <br/> #### Demo: [storybook link](https://hdriel.github.io/mui-simple/) #####NOTE: To run storybook locally, because peer dependencies not installed in package npm install, you need to wrap this project with package.json that include this peed in there node_modules. there for, cut all git repo into the wrapper-repo directory and run `npm install` and run the `npm run storybook` in script's file: wrapper-repo/mui-simple/package.json ## Install because using peer dependencies, to avoid from install force warning, add the following file change: ```text // .npmrc legacy-peer-deps=true ``` ### npm install peer dependencies first: ```npm $ npm install react react-dom @emotion/react @emotion/styled @mui/material @mui/icons-material ``` it's going to take while ```npm $ npm install mui-simple ``` #### Using Create-React-App Launcher if you use CRA v5+ you need to override webpack config with CRACO install craco: ```npm $ npm install --save-dev @craco/craco ``` then create in the root project the file ```javascript // craco.config.js const path = require('path'); module.exports = { webpack: { configure(webpackConfig) { const scopePluginIndex = webpackConfig.resolve.plugins.findIndex( ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin' ); webpackConfig.resolve.plugins.splice(scopePluginIndex, 1); webpackConfig.module.rules.push({ test: /\.m?js$/, resolve: { fullySpecified: false }, }); return webpackConfig; }, alias: { '@emotion/cache': path.resolve(__dirname, '..', 'node_modules/@emotion/cache'), '@emotion/react': path.resolve(__dirname, '..', 'node_modules/@emotion/react'), '@emotion/styled': path.resolve(__dirname, '..', 'node_modules/@emotion/styled'), '@mui/styles': path.resolve(__dirname, '..', 'node_modules/@mui/styles'), '@mui/system': path.resolve(__dirname, '..', 'node_modules/@mui/system'), '@mui/x-date-pickers': path.resolve(__dirname, '..', 'node_modules/@mui/x-date-pickers'), stylis: path.resolve(__dirname, '..', 'node_modules/stylis'), 'stylis-plugin-rtl': path.resolve(__dirname, '..', 'node_modules/stylis-plugin-rtl'), '@babel': path.resolve(__dirname, '..', 'node_modules/@babel'), '@mui/icons-material': path.resolve(__dirname, '..', 'node_modules/@mui/icons-material'), '@mui/material': path.resolve(__dirname, '..', 'node_modules/@mui/material'), '@mui/utils': path.resolve(__dirname, '..', 'node_modules/@mui/utils'), react: path.resolve(__dirname, '..', 'node_modules/react'), 'react-beautiful-dnd': path.resolve(__dirname, '..', 'node_modules/react-beautiful-dnd'), 'react-dom': path.resolve(__dirname, '..', 'node_modules/react-dom'), 'react-draggable': path.resolve(__dirname, '..', 'node_modules/react-draggable'), 'react-inlinesvg': path.resolve(__dirname, '..', 'node_modules/react-inlinesvg'), 'react-router-dom': path.resolve(__dirname, '..', 'node_modules/react-router-dom'), }, }, }; ``` #### Using Webpack Launcher if you use webpack v5+ you need to override webpack config ```javascript // webpack.config.js const path = require('path'); module.exports = { module: { rules: [ { test: /\.m?js$/, resolve: { fullySpecified: false }, // exclude: ['node_module'], // DON'T put node_module in exclude here!! }, ], }, resolve: { extensions: ['*', '.js', '.jsx', '.ts', '.tsx'], alias: { '@emotion/cache': path.resolve(__dirname, '..', 'node_modules/@emotion/cache'), '@emotion/react': path.resolve(__dirname, '..', 'node_modules/@emotion/react'), '@emotion/styled': path.resolve(__dirname, '..', 'node_modules/@emotion/styled'), '@mui/styles': path.resolve(__dirname, '..', 'node_modules/@mui/styles'), '@mui/system': path.resolve(__dirname, '..', 'node_modules/@mui/system'), '@mui/x-date-pickers': path.resolve(__dirname, '..', 'node_modules/@mui/x-date-pickers'), stylis: path.resolve(__dirname, '..', 'node_modules/stylis'), 'stylis-plugin-rtl': path.resolve(__dirname, '..', 'node_modules/stylis-plugin-rtl'), '@babel': path.resolve(__dirname, '..', 'node_modules/@babel'), '@mui/icons-material': path.resolve(__dirname, '..', 'node_modules/@mui/icons-material'), '@mui/material': path.resolve(__dirname, '..', 'node_modules/@mui/material'), '@mui/utils': path.resolve(__dirname, '..', 'node_modules/@mui/utils'), react: path.resolve(__dirname, '..', 'node_modules/react'), 'react-beautiful-dnd': path.resolve(__dirname, '..', 'node_modules/react-beautiful-dnd'), 'react-dom': path.resolve(__dirname, '..', 'node_modules/react-dom'), 'react-draggable': path.resolve(__dirname, '..', 'node_modules/react-draggable'), 'react-inlinesvg': path.resolve(__dirname, '..', 'node_modules/react-inlinesvg'), 'react-router-dom': path.resolve(__dirname, '..', 'node_modules/react-router-dom'), }, }, }; ``` ## Usage import your components with ES Module syntax, usage like this: ```javascript import { Button } from '@hdriel/mui-simple'; export const App = () => { return <Button>Hello Miu-Simple</Button>; }; ``` # Join and Support this package need more maintenance like : <br> ☐ fully support typescript. <br> ☐ make docs and fixing stories in storybook. <br> ☐ Improving infrastructure and performance. <br> and so on..<br> so feel free to be in touch and make this beautiful package to be more awesome as should be! ## Author :octocat: **Hadriel Benjo** <img src="https://github.com/hdriel/mui-simple/assets/20520565/7794f330-5765-42d5-8154-fe6b094f5960" width="100px;"/> - LinkedIn: [@hadriel-benjo](https://www.linkedin.com/in/hadriel-benjo/) - GitHub: [@hdriel](https://github.com/hdriel)