@wethecurious/wtc-ui-library
v1.1.16
Published
A UI library to be used on WTC sites and exhibits
Downloads
89
Readme
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'
}