Misk Core
This package provides shared, styled React components, Redux helper functions, and Typescript utilities across Misk tab repos. The top of each component/container file contains a usage example.
Getting Started
$ yarn add @misk/core
Builders
createApp(routes)
: builder function to create an<App history={history}/>
componentcreateIndex(tabSlug, App, Ducks)
: builder function to create bootstrapping objects necessary forindex.tsx
Components
ErrorCalloutComponent
: Processes a Redux / Axios error and dumps raw JSON for debuggingOfflineComponent
: NonIdealState component for Offline or Loading tab statePathDebugComponent
: outputs values passed in by props forhash
,pathname
, andsearch
in React-Router instanceSidebarComponent
: dashboard styled sidebar
Containers
CodePreContainer
: Word wrap enabled BlueprintJS<Pre>
block for displaying formatted content (ie. JSON, logs...)ColumnContainer
: Column container for use inside of a<FlexContainer>
DesktopWideOnlyContainer
: Only shows container when window width >1200pxFlexContainer
: Container using CSS FlexBox to have enclosed items flow responsively to screen widthMobileNeverContainer
: Never show container when window width <768pxMobileOnlyContainer
: Only show container when window width <768pxResponsiveContainer
: Responsive container that all tabs and Nav Navbar use to ensure consistent view widthResponsiveContainer
: Extension ofResponsiveContainer
that moves the App view below the NavbarWrapTextContainer
: Word wrap enabled<span>
block
Features
Navbar
: Related and themeable components to a dashboard styled NavbarTable
: Basic table that parses heading keys from the array of objects passed in as data props
Utilities
environment
: various utilities helpful in environment (color, default visibilities...)network
: wrapped functions around Axios requests to allow simplified syntax that withasync await
returns an object of{ data, error }
.theme
: definition and default theme used to style Navbar.