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

Releasing

Changelog (and Breaking Changes)