mui-industrial
TypeScript icon, indicating that this package has built-in type declarations

0.0.78 • Public • Published

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


📦 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 <>
    ...
    <IndustrialProvider>
      ... your content
      <Status ...>[] // status elements
    </IndustrialProvider>
    ...
  </>
}

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 }) => <> ... </>)}
    <button onClick={generateInfoNotification}>Create sample notification</button>
    <button onClick={cleanAllNotifications}>Clear all notifications</button>
  </>
}

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

Package Sidebar

Install

npm i mui-industrial

Weekly Downloads

0

Version

0.0.78

License

MIT

Unpacked Size

356 kB

Total Files

209

Last publish

Collaborators

  • kadarka