mui-simple v1.12.3
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
:octocat: Hadriel Benjo
- LinkedIn: @hadriel-benjo
- GitHub: @hdriel
5 days ago
5 days ago
5 days ago
5 days ago
1 month ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
8 months ago
8 months ago
8 months ago
5 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
5 months ago
5 months ago
7 months ago
7 months ago
7 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago