How to use uikit-react - 4 common examples

import { storiesOf } from '@kadira/storybook'
import { Button } from 'uikit-react'

// This is to work around: https://github.com/kadirahq/react-storybook-addon-info/issues/26#issuecomment-229029177
Button.displayName = 'Button'

storiesOf('Button', module)
  .addWithInfo('Basic Usage', '', () => (
    <div>
      <button>Primary</button>
      &nbsp;
      <button>Success</button>
      &nbsp;
      <button>Danger</button>
      &nbsp;
      <button>Link</button>
      &nbsp;
      <button type="submit">Submit</button>
    </div>
  ), { header: false, inline: true, propTables: [Button] })

// import Option from 'uikit-react/Select/Option'
// import Value from 'uikit-react/Select/Value'

import { storiesOf, action } from '@kadira/storybook'
import { cloneElement, Component, PropTypes } from 'react'
import { Select } from 'uikit-react'

// This is to work around: https://github.com/kadirahq/react-storybook-addon-info/issues/26#issuecomment-229029177
Select.displayName = 'Select'

class Form extends Component {
  static propTypes = {
    children: PropTypes.node.isRequired,
    defaultValue: PropTypes.any, // eslint-disable-line react/forbid-prop-types
  }
  static props = {
    defaultValue: null,
  }
  state = {
    value: this.props.defaultValue,
  }
  logChange = action('onChange')
  handleChange = (value) => {
    this.setState({ value })
    this.logChange(value)

// Public imports, needed for ReactPlayground code samples to work

import * as modReact from 'react'
import * as modReactDOM from 'react-dom'
import * as modUIkitReact from 'uikit-react'

import babel from 'babel-core/browser'
import CodeMirror from 'codemirror'

const React = modReact.default
const ReactDOM = modReactDOM.default
const UIkitReact = modUIkitReact.default

// Private imports


// TODO actually recognize syntax of TypeScript constructs

CodeMirror.defineMode('javascript', function (config, parserConfig) {
  var indentUnit = config.indentUnit
  var jsonMode = parserConfig.json
  var isTS = parserConfig.typescript

  // Tokenizer

  var keywords = function () {
    function kw(type) { return { type: type, style: 'keyword' } }
    var A = kw('keyword a'), B = kw('keyword b'), C = kw('keyword c')

>
        {`${type}-${position}`}
        {this.props.isSticky ? '- isSticky' : ''}
        {this.props.icon ? '- icon' : ''}
        {this.props.onClick ? '- click' : ''}
        {this.props.timeout ? '- timeout' : ''}
      
      
    )
  }
}

Notification.displayName = 'Notification'

storiesOf('Notification', module)
  .addWithInfo('Basic Usage', '', () => (
    <div>
      
    </div>
  ), { header: false, inline: true, propTables: [Notification] })
  .addWithInfo('Position', '', () =&gt; (
    <div>
      
      
      
      
      
      
    </div>