Monitor UI
Common React components, hooks, utilities and CSS stylesheets for MonitorFish,
MonitorEnv and RapportNav.
Usage
Installation
npm i -E @mtes-mct/monitor-ui
npx install-peerdeps @mtes-mct/monitor-ui
or
yarn add -E @mtes-mct/monitor-ui
npx install-peerdeps @mtes-mct/monitor-ui
Setup
import { GlobalStyle, THEME } from '@mtes-mct/monitor-ui'
import { CustomProvider as RsuiteCustomProvider } from 'rsuite'
import rsuiteFrFr from 'rsuite/locales/fr_FR'
import { createGlobalStyle, ThemeProvider } from 'styled-components'
const UntypedThemeProvider = ThemeProvider as any
import 'react-toastify/dist/ReactToastify.css'
import 'rsuite/dist/rsuite.css'
import '@mtes-mct/monitor-ui/assets/stylesheets/rsuite-override.css'
export function App() {
return (
<UntypedThemeProvider theme={THEME}>
<GlobalStyle />
<RsuiteCustomProvider locale={rsuiteFrFr}>{/* Your app components here */}</RsuiteCustomProvider>
</UntypedThemeProvider>
)
}
Documentation
Here is the Storybook documentation.
Testing in your project
Using npm link
- Globally link your module
npm link
- Link the module in a project
cd /path/to/my-project
Add to dependencies
"@mtes-mct/monitor-ui__root": "<version>",
to package.json
npm link @mtes-mct/monitor-ui__root
- Unlink the module:
cd /path/to/my-project
npm unlink my-module
cd /path/to/my-module
npm unlink
Contributing
Please read the contributing document for setup and contributing instructions.