The primary resource of this project is the Material UI design system. You can find the Material UI documentation here.

In our library, we essentially create a Material UI theme. A theme is a collection of color, typography, and density options. Each theme includes three palettes that determine component colors:

1. A primary palette for the color that appears most frequently throughout your application.
2. An accent, or secondary, palette used to selectively highlight key parts of your UI.
3. A warn, or error, palette used for warnings and error states.

Here's how it works: We import the Truzzt/MUI-lib and use its components in our main project. These components can be modified with custom CSS properties, which are defined in the library. For instance, when we change the background color of the card component from gray to blue in the Truzzt MUI-library, it affects the colors of all the cards in our main project, changing them from gray to blue.

All the components from Material UI that have a Truzzt theme are configured in the ./components folder. Currently, there are 12 basic components.

These components are imported in the truzztTheme.js file, located in the root directory of the project. Furthermore, in the truzztTheme.js file, the components are wrapped into a createTheme function. This theme created from all the components is exported, so you can import it into another project.

All the unit tests for the components are located in the ./tests folder and are written in Jest. If you want to add a new component or modify the library, you can check if the other components are still working properly with the following command:

npm run test

If you want to add a new test to a new component or to an already existing component, here is the documentation for Jest.

If you want to add a new component or modify an existing component, and all the unit tests pass, you can check locally on your machine how your changes affect the frontend in the main project. This works with symbolic links.

1. You have to enter the following command in the terminal of the Truzzt-MUI-lib project to create a symbolic link:

npm link

2. Now you have to enter the following command in the project where you want to test the adjustments you made in the Truzzt-MUI-lib (for development purposes, the fastest and simplest way is a React app that you create with the create-react-app command):

npm link @truzzt/mui-lib

Now you have your local Truzzt/MUI-lib package installed in your other project, and you can visualize the changes you made in the library.

👤 Daniel Hommen, Adam Kruk 👤 Daniel Hommen, Adam Kruk

Give a ⭐️ if this project helped you!

This README was generated with ❤️ by readme-md-generator