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 for index.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 for hash
, pathname
, and search
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 of ResponsiveContainer
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 with async await
returns an object of { data, error }
.theme
: definition and default theme used to style Navbar.