mui-simple

customized ALL MUI COMPONENTS to make simplify the usage of mui.
get a lot of features to use mui, like custom-color that you can send any color of theme color name.
or more customized way to use component easier way, and less code bugs homemade.

Demo: storybook link

#####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:

// .npmrc
legacy-peer-deps=true

npm

install peer dependencies first:

$ npm install react react-dom @emotion/react @emotion/styled @mui/material @mui/icons-material

it's going to take while

$ 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 install --save-dev @craco/craco

then create in the root project the file

// 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

// 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:

import { Button } from '@hdriel/mui-simple';

export const App = () => {
    return <Button>Hello Miu-Simple</Button>;
};

Join and Support

this package need more maintenance like :
☐ fully support typescript.
☐ make docs and fixing stories in storybook.
☐ Improving infrastructure and performance.
and so on..

so feel free to be in touch and make this beautiful package to be more awesome as should be!

Author

Hadriel Benjo

• LinkedIn: @hadriel-benjo
• GitHub: @hdriel