We The Curious Developers

We The Curious Developers

  • Guidelines
  • CuriOs SDK
  • Software
  • Films
  • Art
  • Audio
  • Photography

›Components

Getting Started

  • Getting Started Overview
  • ClI
  • Working With Us

Technical

  • Hardware

Frames

  • Frames Overview
  • Info Panel
  • Media Browser
  • Touch to Start

Components

  • Components Overview
  • Box
  • Button
  • Card
  • Checkbox
  • Header
  • Heading
  • Hero
  • Icon
  • Text Input
  • Markdown Viewer
  • Modal
  • WTCProvider
  • Table
  • Text
  • Video Player
  • Calendar
  • Dropdown
  • InputAutoComplete
  • Radio
  • Sidebar
  • Slider
  • Notification
  • IconNavButton
  • IconSideBar
  • List
  • Tab
  • Title
  • Toggle
  • Value

We the Curious component library

A UI library to be used on WTC sites and exhibits

NPM JavaScript Style Guide

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

  • Box
  • Button
  • Heading
  • Icon
  • WTCProvider
  • Text
  • Table
  • MarkdownViewer
  • Card
  • Header
  • Modal
  • InputText
  • InputPassword
  • InputNumber
  • Hero
  • VideoPlayer

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'
}
Last updated on 5/8/2019
← Touch to StartButton →
  • Install
  • Usage
  • Available components
  • Definitions
    • Definition Usage
    • Icon Definitions
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Copyright © 2020 We The Curious