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}/>
component -
createIndex(tabSlug, App, Ducks)
: builder function to create bootstrapping objects necessary forindex.tsx
Components
-
ErrorCalloutComponent
: Processes a Redux / Axios error and dumps raw JSON for debugging -
OfflineComponent
: NonIdealState component for Offline or Loading tab state -
PathDebugComponent
: outputs values passed in by props forhash
,pathname
, andsearch
in React-Router instance -
SidebarComponent
: 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 >1200px -
FlexContainer
: Container using CSS FlexBox to have enclosed items flow responsively to screen width -
MobileNeverContainer
: Never show container when window width <768px -
MobileOnlyContainer
: Only show container when window width <768px -
ResponsiveContainer
: Responsive container that all tabs and Nav Navbar use to ensure consistent view width -
ResponsiveContainer
: Extension ofResponsiveContainer
that moves the App view below the Navbar -
WrapTextContainer
: Word wrap enabled<span>
block
Features
-
Navbar
: Related and themeable components to a dashboard styled Navbar -
Table
: 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.