Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rand0mc0d3r/mui-industrial
VSCode-style status bar for MUI5 (react.js)
https://github.com/rand0mc0d3r/mui-industrial
mui-industrial status-bar vs-code-react
Last synced: 3 months ago
JSON representation
VSCode-style status bar for MUI5 (react.js)
- Host: GitHub
- URL: https://github.com/rand0mc0d3r/mui-industrial
- Owner: rand0mC0d3r
- License: gpl-3.0
- Created: 2022-08-12T20:02:48.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-30T12:48:10.000Z (5 months ago)
- Last Synced: 2024-10-22T03:06:30.123Z (3 months ago)
- Topics: mui-industrial, status-bar, vs-code-react
- Language: JavaScript
- Homepage: https://rand0mc0d3r.github.io/mui-status-helper/
- Size: 6.79 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# 📑 mui-industrial
  
_**NOTE**: Project is still in development and is not yet ready for production use. Use without caution._
---
A zero-maintenance/batteries-included panel manager inspired by VSCode style/aspect that adds via Material-UI (5) elements a self populating/managed and state keeping organization of generated children status bar elements, panels, shortcuts and more.
A root level ```ContextAPI``` driven provider/wrapper that allows for the creation of status bars with a variety of elements that can be clicked or have a menu attached to them. The status bar is a ```self organizing``` manager that can be placed on either end of the screen and can be configured to even feature consoles and other elements.
---
### 💡 See it and learn it
A few links to get you going:
- See it in action - **[Running project](https://rand0mc0d3r.github.io/mui-status-helper/)**
- Documentation and samples - **[Documentation](https://github.com/rand0mC0d3r/mui-status-helper#readme)**
---
## 📦 Features
- **Zero Maintenance** - No need to worry about managing the state of the panels, the library will handle it for you.
- **Batteries Included** - The library comes with a variety of pre-built components that can be used out of the box.
- **Customizable** - The library is built on top of MUI and Emotion, so you can customize it to your liking.
- **Easy to use** - The library is built to be easy to use and understand.
- **TypeScript** - The library is written in TypeScript and comes with type definitions.
- **React 17+** - The library is built on top of React 17+.
- **MUI 5+** - The library is built on top of MUI 5+.
---
## 🪄 Installation
Install the latest version with your favorite package manager.
```
npm install @rand0mC0d3r/mui-industrial --save
```
```
yarn i @rand0mC0d3r/mui-industrial
```
## Quick start for your project
```
import { IndustrialProvider } from 'mui-industrial'
...
function App() {
...
return <>
...
... your content
[] // status elements
...
>
}
export default App
```
---
### Industrial Provider
The Industrial Provider is the root level component that will provide the context for the status bar and its elements.
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| **`position`** | `PlacementPosition` | `top` | The position of the status bar. |
| **`children`** | `React.ReactNode` | `undefined` | The children of the provider. |
|
---
### <Status> #component
The status component is the primary component that will be used to create the status bar elements.
It comes with a handy template that can be used to create a variety of elements.
Also it comes in 3 flavors, as a simple status bar, as a status bar with a console and as a status bar with a popper.
**DEMO** : https://codesandbox.io/s/sample-mui-industrial-status-sample-6xv735?file=/src/App.tsx
#### <Status>.Template
lorem ipsum dolor sit amet ...
### as DEFAULT
lorem ipsum dolor sit amet ...
### as CONSOLE
lorem ipsum dolor sit amet ...
### as POPPER
lorem ipsum dolor sit amet ...
## Hooks
### useSnackbars()
There are 2 hooks provided for snackbar population/cleanup: ```handleSnackbarRegister``` and ```handleSnackbarCleaning``` and a data store partition holding the snackbar current messages: ```snackbars```.
```
import { useSnackbars } from 'mui-industrial'
export default function () {
const { snackbars, handleSnackbarRegister, handleSnackbarCleaning } = useRegisterSnackbar()
const generateInfoNotification = (message = 'Sample Info Notification') => {
handleSnackbarRegister({
message,
source: 'AutoFixer',
severity: Severity.INFO,
})
}
const cleanAllNotifications = () => {
handleSnackbarCleaning()
}
return <>
{snackbars.map(({ id }) => <> ... >)}
Create sample notification
Clear all notifications
>
}
```
The ```handleSnackbarRegister``` allows you to create a snackbar that will be displayed on the screen.
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| **`severity`** | `SnackbarSeverity` | `info` | The severity of the snackbar. |
| **`actions`** | `React.ReactNode` | `undefined` | The actions of the snackbar. |
| **`source`** | `string` | `undefined` | The source of the snackbar. |
| **`message`** | `string` | `undefined` | The message of the snackbar. |
| **`code`** | `string` | `undefined` | The code of the snackbar. |
| **`autoHideDuration`** | `number` | `undefined` | The auto hide duration of the snackbar. |
The ```handleSnackbarCleaning``` allows you to clean all the snackbar messages from the screen.
---
## Dependencies expected (peerDependencies)
The library is built on top of the following dependencies:
- **React && ReactDOM 17.0+**
- **MUI 5.0+** && **MUI Icons-Material 5.0+**
- *inherited via MUI - MUI Styles 5.0+ & Emotion React 11.0+ & Emotion Styled 11.0+*
and related @types
## External package dependencies
- **Re-Resizable 6.9.9+**
- **React-Resizable 3.0.4**