@wethecurious/wtc-ui-library

wtc-ui-library

A UI library to be used on WTC sites and exhibits

Docs

Docs site coming soon...

Install

npm install --save @wethecurious/wtc-ui-library

Usage

This library depends on an external theme. Served either from the assets server or as a theme object. This must be passed to the WTCProvider component

// index.js
/**
 * This example assume the use of styled components. Notice the WTCProvider, wrapping
 * the ThemeProvider for this app the ui library is being used in.
 */
import { WTCProvider } from '@wethecurious/wtc-ui-library'
import { asyncTheme } from './hoc/asyncTheme'

const Container = props => (
  <WTCProvider theme={props.theme}>
    <ThemeProvider theme={props.theme}>
      <App />
    </ThemeProvider>
  </WTCProvider>
)
const ThemedContainer = asyncTheme(Container, 'http://localhost:4000/themes')
ReactDOM.render(<ThemedContainer />, document.getElementById('root'))

// Component
import * as React from 'react'

import { MyComponent } from 'wtc-ui-library'

class Example extends React.Component {
  render() {
    return <MyComponent />
  }
}

Available components

• AutoCompleteDropDown
• TextInput
• DebouncedTextInput
• Box
• Button
• Heading
• Icon
• WTCProvider
• Text
• Table
• MarkdownViewer
• Card
• Header
• Modal
• InputText
• InputPassword
• InputNumber
• Hero
• VideoPlayer
• Calendar
• SignedImage
• SignedVideo
• SignedAudio
• RadioGroup
• Radio
• Sidebar
• Dropdown
• Slider

Available Definitions

Definition Usage

import { Size } from '@wethecurious/wtc-ui-library'

export enum Size {
  XXS = 'xxs',
  XS = 'xs',
  S = 's',
  MS = 'ms',
  M = 'm',
  ML = 'ml',
  L = 'l',
  XL = 'xl',
  XXL = 'xxl'
}

export enum Scale {
  XXS = 'xxs',
  XS = 'xs',
  S = 's',
  MS = 'ms',
  M = 'm',
  ML = 'ml',
  L = 'l',
  XL = 'xl',
  XXL = 'xxl',
  Zero = 'zero'
}

export interface Scale2D {
  x?: Scale
  y?: Scale
}

export interface Scale3D extends Scale2D {
  z?: Scale
}

export interface ScreenPosition {
  Left: 'left'
  Right: 'right'
  Top: 'top'
  Bottom: 'bottom'
}

export enum Status {
  Ok = 'ok',
  Warning = 'warning',
  Critical = 'critical',
  Error = 'error',
  Unknown = 'unknown',
  Disabled = 'disabled',
  Neutral = 'neutral'
}

export enum Weight {
  Light = 'light',
  Regular = 'regular',
  Bold = 'bold',
  Heavy = 'heavy',
}

export enum BackgroundColour {
  Light = 'light',
  Dark = 'dark',
  Highlight = 'highlight',
  HighlightSecondary = 'highlight-secondary'
}

export enum Corner {
  TopLeft = 'top-left',
  TopRight = 'top-right',
  BottomRight = 'bottom-right',
  BottomLeft = 'bottom-left'
}

Icon Definitions

export enum IconType {
  AddOutline = 'addOutline',
  Add = 'add',
  Collapse = 'collapse',
  Delete = 'delete',
  DeleteOutline = 'deleteOutline',
  Expand = 'expand',
  Remove = 'remove',
  RemoveOutline = 'removeOutline',
  Share = 'share',
  Close = 'close',
  Down = 'down',
  GroupOutline = 'groupOutline',
  Group = 'group',
  Left = 'left',
  LevelBack = 'levelBack',
  LevelUp = 'levelUp',
  List = 'list',
  Menu = 'menu',
  Next = 'next',
  Previous = 'previous',
  Right = 'right',
  Search = 'search',
  Critical = 'critical',
  CriticalOutline = 'criticalOutline',
  ErrorOutline = 'errorOutline',
  Disabled = 'disabled',
  Ok = 'ok',
  OkOutline = 'okOutline',
  Unknown = 'unknown',
  UnknownOutline = 'unknownOutline',
  Warning = 'warning',
  WarningOutline = 'warningOutline'
}