{"id":21684832,"url":"https://github.com/rand0mc0d3r/mui-status-helper","last_synced_at":"2026-05-17T12:03:53.218Z","repository":{"id":124236574,"uuid":"524725625","full_name":"rand0mC0d3r/mui-status-helper","owner":"rand0mC0d3r","description":"Mui-Industrial portfolio presentation","archived":false,"fork":false,"pushed_at":"2024-01-10T07:12:29.000Z","size":5026,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-25T12:07:33.662Z","etag":null,"topics":["content-api","mui5","panels","react","status-bar"],"latest_commit_sha":null,"homepage":"https://rand0mc0d3r.github.io/mui-status-helper/","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rand0mC0d3r.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-14T16:38:49.000Z","updated_at":"2023-03-29T16:56:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"067dc569-f5b8-4bfb-b85c-1c26ce24ac6e","html_url":"https://github.com/rand0mC0d3r/mui-status-helper","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rand0mC0d3r%2Fmui-status-helper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rand0mC0d3r%2Fmui-status-helper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rand0mC0d3r%2Fmui-status-helper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rand0mC0d3r%2Fmui-status-helper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rand0mC0d3r","download_url":"https://codeload.github.com/rand0mC0d3r/mui-status-helper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244603291,"owners_count":20479802,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["content-api","mui5","panels","react","status-bar"],"created_at":"2024-11-25T16:17:14.665Z","updated_at":"2026-05-17T12:03:48.198Z","avatar_url":"https://github.com/rand0mC0d3r.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Mui-Industrial sample web app\n\n![Preview](public/preview.png)\n\nThis is a sample web app that uses the Mui-Industrial React components.\n\nIt features sample panels, status bar elements, and a sample menu.\n\nAs well as commands and a sample snackbars\n\n---\n\n### Local run\n\nLinking of the packages is done via regular symlinks.\n\nFor that, after ```npm install``` in the root folder, run: ```npm run link```.\n\n_(This assumes the related project is also available in the parent folder)_\n\n\n# 📑 mui-industrial\n\n\u003cbr /\u003e\n\n\n\nA zero-maintenance/batteries-included panel manager inspired by VSCode style/aspect that adds via Material-UI elements a self populating/managed and state keeping organization of generated children panels.\n\nA root level ContextAPI driven provider 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 side of the screen and can be configured to even feature consoles and other elements.\n\n---\n## Dependencies expected (peerDependencies)\n\nThe library is built on top of the following dependencies:\n - **React \u0026\u0026 ReactDOM 17.0+**\n - **MUI 5.0+**\n - **MUI Icons-Material 5.0+**\n - **MUI Styles 5.0+**\n - **Emotion React 11.0+**\n - **Emotion Styled 11.0+**\n\n and related @types\n\n ## Package dependencies\n\n  - **Re-Resizable 6.9.9+**\n  - **React-Resizable 3.0.4**\n\n\n## 🪄 Installation\n\nInstall the latest version with your favorite package manager.\n\n\n```\nnpm install @rand0mC0d3r/mui-industrial --save\n```\n\n```\nyarn i @rand0mC0d3r/mui-industrial\n```\n\n---\n## 🎛️ Architecture \u0026 Structure\n\n### 📑 - \u003c IndustrialProvider \u003e\n\nThe ```\u003cIndustrialProvider\u003e``` is a HOC Context driven manager, which we suggest to be added close the the root of the document, preferably outside the ±```\u003cRouter\u003e``` but inside the ```\u003cMuiTheme/MaterialUITheme\u003e```\n\nThe **IndustrialProvider** constitutes of a wrapper around the **Context API** that acts as a store, with an API of methods exposed to the developer for managing it's elements, along with some internal methods that allow the elements to announce themselves, broadcast state changes and react to events. Communication is duplex and the elements themselves are in a dual-binding open chat with the **Provider**.\n\n```\nimport { createTheme, ThemeOptions, ThemeProvider } from '@material-ui/core/styles'\n...\nimport { IndustrialProvider } from 'mui-industrial'\n\nexport default (): JSX.Element =\u003e {\n  const theme = useMemo(() =\u003e createTheme({ palette: { type: 'dark' } } as ThemeOptions), [])\n\n  return \u003c...\u003e\n    \u003cThemeProvider {...{ theme }}\u003e\n      \u003cIndustrialProvider\u003e\n\n        {/* notification?... */}\n        {/* login/modals/errors?... */}\n        {/* ... */}\n\n        \u003cRouter\u003e\n          {/* ... */}\n        \u003c/Router\u003e\n\n        {/* ... */}\n      \u003c/IndustrialProvider\u003e\n    \u003c/ThemeProvider\u003e\n  \u003c/...\u003e\n}\n```\n\n##### Available tweaks's\n\n| Argument | Type |Default | Description |\n|-----|----|----|--------|\n| *allowRightClick* | boolean | ```false``` | Determines if the panel allows opening the default browser context menu on right click |\n| *position* | string | ```left``` | A side option to define for a new user the preference of the menu. Options ```left``` and ```right``` |\n\n---\n\n\n## ```\u003cMupStatus\u003e``` - 📟 Status Bar Component\n\nThe component creates an object for the status bar that can be clicked. It's self registered and managed by the context provider provided by the library\n\n![/media/preview.png](/media/mupStatus1.png)\n\n**Hint**: Direct actions are permitted\n\n\u003cbr /\u003e\n\n![/media/preview.png](/media/mupStatus2.png)\n\n**Hint**: As well placed menu actions\n\u003cbr /\u003e\n\n![/media/preview.png](/media/mupStatus3.png)\n\n**Hint**: Informational sections\n\n\u003cbr /\u003e\n\n![/media/preview.png](/media/mupStatus4.png)\n\n**Hint**: Errors are using the secondary color\n\n---\n\nInternally the wrapper ```\u003cMupStatusBar\u003e``` bound to the scene is not being rendered and started if there are no ```\u003cMupStatus\u003e``` announced across the application at any point in time. Later instantiation is fully encouraged to de-clutter the DOM.\n\nAdd a section to either ```primary``` or ```secondary``` side of the status bar. An omission will result in a default section.\n\nEach ```MupStatus``` entity must contain an ```id``` in form of an unique identifier across the session.\n\n#### # Inherited configuration\n\n```\u003cMuiPanelProvider /\u003e``` allows the user to configure the status bar with the following properties:\n\n| Argument | Type | Default | Description |\n|-----|--|--|---|\n| allowRightClick | ```bool``` | _inherited_ | Decides if right/long click triggers any action |\n\n#### # Available arguments\n\n\n| Argument | | Type | Default | Description |\n|-----|--|--|--|---|\n|  id |⭐ | ```string``` | ... |  Give a unique identifier to the status element |\n| elements | ⭐\t| ```array```  | ```[]``` | List of objects of type ```{icon: ReactNode, text: string}```  |\n| side |\t| ```string``` | ```primary``` | Determines to which side the panel is bound |\n| requestAttention |\t| ```bool``` | ```false``` | When truthy is uses the ```secondary``` color |\n| tooltip |\t| ```string``` | ```''``` | Provides a tooltip acting as a guide |\n| focusOnClick\t| | ```string``` | _null_ | Toggles visibility of a panel known by ```\u003cMuiPanelProvider\u003e``` by it's unique identifier |\n| onClick |\t| ```func``` | ```() =\u003e {}``` | Issues callback when status section is clicked  |\n| onContextMenu |\t| ```func``` | ```() =\u003e {}``` | Issues callback when status section is right/long clicked.  |\n\n#### Code sample\n\n\n##### Simple example - static\n\n```\n// 2 icons with text\n\u003cMupStatus\n  id=\"statusA\"\n  side=\"left\"\n  tooltip='33% frames left / Ready for photo'\n  elements={[\n    { icon: \u003cFormatIndentIncrease color=\"action\" /\u003e, text: 'Lorem' },\n    { icon: \u003cCameraIcon /\u003e, text: 'Ipsum' },\n  ]}\n/\u003e\n\n// 1 icon triggering a panel\n\u003cMupStatus\n  id=\"triggerChromeCastPanel\"\n  side=\"left\"\n  focusOnClick='chromecastPanel'\n  tooltip=\"Toggle visibility for panel\"\n  elements={[\n  { icon: \u003cCastConnectedIcon /\u003e, text: 'Toggle Panel' }\n]}\u003e\n  demo text\n\u003c/MupStatus\u003e\n\n// 1 icon doing an onClick callback\n\u003cMupStatus\n  id='statusSimilarDocuments'\n  onClick={handleClickOpen}\n  tooltip=\"View Documents ... - (Last checked - 3 min ago)\"\n  elements={[{ icon: \u003cAllInboxIcon /\u003e, text: '4 Related' }]}\n/\u003e\n\n// 1 icon requesting attention, no text\n\u003cMupStatus\n  id='statusSimilarDocuments'\n  onClick={handleClickOpen}\n  requestAttention\n  tooltip=\"View Documents ... - (Last checked - 3 min ago)\"\n  elements={[{ icon: \u003cAllInboxIcon /\u003e }]}\n/\u003e\n  ```\n\n##### Dynamic example - updateable\n```\n  ...\n  const [open, setOpen] = useState(false);\n  const [elements, setElements] = useState();\n  const [requestAttention, setRequestAttention] = useState(true);\t\t\t// Request attention state\n\n  const someFunction = () =\u003e {\n   setElements([{ icon: \u003cCloudDoneOutlinedIcon /\u003e, text: 'Document saved' }])\t\t// Set an element\n   setRequestAttention(true)\t\t\t\t\t\t\t\t// Update attention state\n  }\n\n  ...\n\n  return \u003c\u003e\n    \u003cMupStatus\n      id='statusCustomElement'\n      requestAttention={requestAttention}\t\t\t\t\t\t// Reference attention state\n      onClick={() =\u003e setOpen(true)}\n      tooltip=\"Save Document?\"\n      elements={elements}\t\t\t\t\t\t\t\t// Initialize empty (won't show)\n    /\u003e\n  ```\n\n\n\n---\n## ```\u003cMupButton\u003e``` - 🛎️ Button Component\n#####  The component creates an 🏝️ ( + 📄 ) object that can be clicked. It's self registered and managed\n\n![/media/preview.png](/media/mupButton.png)\n**HINT**: Works great to display a logo or a button with a custom icon ( + text )\n\nAllows the developer to add to the sidebars a logo, a logo with a custom short text, or a button triggering a custom action.\n\n\nInternally the ```\u003cMuiPanelProvider\u003e``` is made aware of the ```\u003cMupButton\u003e``` instance after the **first render** which triggers the internal hook to upstream call the provider with a new entity.\n\n#### # Available arguments\n\n\n| Argument | Req | Observed | Type | Default | Description |\n|-----|--|--|--|--|---|\n| id |⭐ | |```string``` | ... |  Give a unique identifier to the status element |\n| icon |⭐ | 👀  | ```node``` |  | Passthru element of Node type. Uses ```cloneElement``` internally |\n| tooltip |\t| 👀  | ```string``` |  | Provides a tooltip acting as a guide |\n| shortText |\t| 👀  | ```string``` |  | Provides a short text of max 4 UTF8 chars |\n| showIcon |\t| 👀  |```bool``` | ```true``` | Used to determine if the icon should be shown in case provided |\n| disabled |\t| 👀  |```bool``` | ```false``` | Determine if the colors turn gray and interactivity is disabled |\n| onClick |\t|  | ```func``` |  | Issues callback when status section is clicked  |\n\n#### Code sample\n\n##### Simple example - static\n\n```\n\u003cMupButton\n  id=\"appLogo\"\n  tooltip={`Click here to go ${page.url}`\n  shortText=\"LKDN\"                                                  // 4 letters will be displayed in all CAPS\n  icon={\u003cBathtubIcon style={{ color: 'orange' }}                    // custom color\n  icon={\u003cLinkedInIcon style={{ color: green[500] }} /\u003e}             // custom color\n  icon={\u003cSvgIcon component={StarIcon} viewBox=\"0 0 ...\" /\u003e}         // raw svg icon\n  icon={\u003cIcon style={{ color: green[500] }}\u003eadd_circle\u003c/Icon\u003e}      // font material icon\n  icon={\u003cIcon className=\"fa fa-plus-circle\" color=\"secondary\" /\u003e}   // font awesome icon\n  showIcon={false}                                                  // hide icon\n  disabled={true}                                                   // disable interaction\n  onClick={() =\u003e console.log('clicked')}                            // callback\n/\u003e\n  ```\n\n##### Dynamic example - updateable\n  ```\n  export default ({ tooltip, shortText, icon, showIcon, disabled, ... }) =\u003e {\n\n  return \u003c\u003e\n    \u003cMupButton\n      { ... { tooltip, shortText, icon, showIcon, disabled } }\n      id=\"appLogo\"\n      ...\n    /\u003e\n  \u003c/\u003e\n  ```\n\n\n##### Available arguments\n\n\n|  | Argument | Type | Default | Description |\n|--|-----|--|--|---|\n| ⭐ | children | ```Node``` | ... |  Passthru ```Node``` for the current app UI. Expecting the router output or the **main \u003c...\u003e** of the application. \u003cbr /\u003e\u003cbr /\u003eConsider to include all custom wrappers for **\u003cLayout ...\u003e**, **\u003cNotifications ...\u003e** and others.  |\n\n#### Code sample\n\n\n##### Simple example - static\n\n```\n \u003cMupContent\u003e\n  \u003c...\u003e\n    \u003cReactRouter ... /\u003e                    // your app page/pages\n  \u003c/...\u003e\n \u003c/MupContent\u003e\n```\n\n---\n---\n---\n### TODO\n\n- todo: make callbacks clean right the GC\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frand0mc0d3r%2Fmui-status-helper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frand0mc0d3r%2Fmui-status-helper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frand0mc0d3r%2Fmui-status-helper/lists"}