@automatic-labs/ui-components

Automatic Frontend Components

Automatic's React Application Framework is used for rendering component data consistently from project to project. Components are available as importable React components and can be used to create a wide range of product experiences.

Documentation

The most thorough documentation is in form of Storybook and can be found on this repository's GitHub Pages https://automatic.github.io/ui-components

It can also be worthwhile to look into dev/ directory of this repository for development hands on examples. To run the examples go with

npm run dev

Get started

npm i --save @automatic-labs/ui-components

Create new release

npm run release [patch|minor|major]

Publish the package

To publish the npm package

npm run push

This will make sure you are publishing basedon the latest build and from within build's directory.

Component namespaces

Layout

import { Layout } from '@automatic-labs/ui-components/layout';

A fundamental base component used as a responsive container for other components.

Content

import { 
  ContentActionButton,
  ContentActionGroup,
  ContentActionInline,
  ContentActionSwitch,
  ContentBulletedList,
  ContentCard,
  ContentCardLabel,
  ContentClearButton,
  ContentCover,
  ContentData,
  ContentError,
  ContentErrorMessage,
  ContentHeader,
  ContentLoading,
  ContentParagraph,
  ContentRecordList,
  ContentRecord,
  ContentSearchBar,
  ContentSection,
  ContentTable,
  ContentTableHeader,
  ContentTableRow,
  ContentTitle
} from '@automatic-labs/ui-components/content';

Main content presentation components to consistently present information, records, actions and other content to the user.

Input

import {
  InputFile,
  InputSelect,
  InputSelector,
  InputSlider,
  InputText,
  InputTextArea
} from '@automatic-labs/ui-components/input';

Set of input components on top of native inputs.

Location

import {
  AddressPicker,
  LocationIcon,
  LocationPicker,
  LocationRecord,
  MapPicker
} from '@automatic-labs/ui-components/location';

Location-specific components allowing user to pick his location based on map position or selected address.

Maps

import { MapBox } from '@automatic-labs/ui-components/maps';

Maps integration, currently only Mapbox integration is available.

Nav

import {
  NavBar,
  NavBreadcrumbs
  NavItem,
  NavFooter,
  NavFooterItem,
  NavMasthead,
  NavMenu,
  NavMobileControl,
  NavSideMenu
} from '@automatic-labs/ui-components/nav';

Top and bottom navigation bars for web experiences requiring high-level navigation.

Flow

import {
  Flow,
  FlowButton,
  FlowButtonGroup,
  FlowStep
} from '@automatic-labs/ui-components/flow';

Used to guide a user through a flows and capturing input.

There is also a set of preimplemented specialized steps available under flow/step namespace

import {
  ErrorStep,
  FileStep,
  GenericStep,  // aids stateful step implementation
  InputStep,
  InternalErrorStep,
  LocationStep,
  NetworkErrorStep,
  ProcessStep,
  SelectStep,
  SelectorStep,
  SliderStep,
  TooManyTriesErrorStep,
  UnauthorizedErrorStep
} from '@automatic-labs/ui-components/flow/step';

Auth

import authAPI, {
  AuthSSoMenu,
  AuthSSONavItem
} from '@automatic-labs/ui-components/auth';

Includes special components related to site authentication and single-sign-on. AuthAPI service is available as a default export.

Offline

import {
  OfflineAware,
  OfflineStateBar
} from '@automatic-labs/ui-components/offline';

Tools and components aiding offline awareness.

Styles

import '@automatic-labs/ui-components/styles/main'

Includes colors and sizing mixing to be used in your own custom components.