wip

docs/app/Components/Logo/Logo.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import { Image } from 'src'
+
+const Logo = (props) => <Image {...props} src={__BASE__ + '/logo.png'} />
+
+Logo.propTypes = Image.propTypes
+
+export default Logo

docs/app/Components/Root.js

@@ -3,8 +3,8 @@ import 'highlight.js/styles/github.css'
 import _ from 'lodash/fp'
 import React, { Component, PropTypes } from 'react'
 
-import ComponentDoc from 'docs/app/Components/ComponentDoc/ComponentDoc'
-import PageNotFound from 'docs/app/Components/PageNotFound/PageNotFound'
+import ComponentDoc from '../Components/ComponentDoc/ComponentDoc'
+import PageNotFound from '../Views/PageNotFound'
 import { META } from 'src/lib'
 import * as stardust from 'stardust'
 

docs/app/Components/Sidebar/Sidebar.js

@@ -1,12 +1,18 @@
 import _ from 'lodash/fp'
 import React, { Component, PropTypes } from 'react'
+import { findDOMNode } from 'react-dom'
 import { Link } from 'react-router'
 
+import pkg from 'package.json'
+import * as stardust from 'src'
 import { typeOrder } from 'docs/app/utils'
-import { META } from 'src/lib'
-import * as stardust from 'stardust'
-
-const { Menu, Icon, Input } = stardust
+import { keyboardKey, META } from 'src/lib'
+import Logo from 'docs/app/Components/Logo/Logo'
+import {
+  Menu,
+  Icon,
+  Input,
+} from 'src'
 
 export default class Sidebar extends Component {
   static propTypes = {
@@ -16,6 +22,22 @@ export default class Sidebar extends Component {
 
   handleSearchChange = e => this.setState({ query: e.target.value })
 
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleDocumentKeyDown)
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleDocumentKeyDown)
+  }
+
+  handleDocumentKeyDown = (e) => {
+    const code = keyboardKey.getCode(e)
+    const isAZ = code >= 65 && code <= 90
+    const bodyHasFocus = document.activeElement === document.body
+
+    if (isAZ && bodyHasFocus) this._searchInput.focus()
+  }
+
   renderItemsByType = (type) => {
     const items = _.flow(
       _.filter(_.overEvery([
@@ -48,18 +70,27 @@ export default class Sidebar extends Component {
     return (
       <Menu className='vertical fixed inverted' style={{ ...style }}>
         <div className='item'>
-          <img src={__BASE__ + '/logo.png'} style={{ marginRight: '1em' }} />
-          <strong>UI-React Docs</strong>
+          <Logo spaced='right' size='mini' />
+          <strong>
+            Semantic-UI-React &nbsp;
+            <small><em>{pkg.version}</em></small>
+          </strong>
         </div>
+        <Link to='/introduction' className='item' activeClassName='active'>
+          Introduction
+        </Link>
         <a className='item' href='https://github.com/TechnologyAdvice/stardust'>
           <Icon name='github' /> GitHub
         </a>
         <div className='item'>
           <Input
             className='transparent inverted icon'
             icon='search'
-            placeholder='Search'
+            placeholder='Start typing...'
             onChange={this.handleSearchChange}
+            ref={(c) => {
+              if (c !== null) this._searchInput = findDOMNode(c).querySelector('input')
+            }}
           />
         </div>
         {_.map(this.renderItemsByType, typeOrder)}

docs/app/Style.js

@@ -1,5 +1,5 @@
 const style = {}
-const sidebarWidth = '16rem'
+const sidebarWidth = 250
 
 style.container = {
 }

docs/app/Views/Introduction.js

@@ -0,0 +1,231 @@
+import React, { PropTypes } from 'react'
+import Highlight from 'react-highlight'
+
+import pkg from 'package.json'
+import {
+  Container,
+  Divider,
+  Grid,
+  Header,
+  Icon,
+  Label,
+  List,
+  Message,
+  Segment,
+} from 'src'
+import Logo from '../Components/Logo/Logo'
+
+const AccordionJSX = `const panels = [{
+  title: 'What is a dog?',
+  content: '...',
+  }, {
+  title: 'What kinds are there?',
+  content: '...',
+}]
+
+<Accordion panels={panels} />`
+const AccordionHTML = `<div class="ui accordion">
+  <div class="title">
+    <i class="dropdown icon"></i></i>
+    What is a dog?
+  </div>
+  <div class="content">
+    <p></p...>...</p>
+  </div>
+  <div class="title">
+    <i class="dropdown icon"></i></i>
+    What kinds are there?
+  </div>
+  <div class="content">
+    <p></p...>...</p>
+  </div>
+</div>`
+
+const ButtonJSX = `<Button size='small' color='green'>
+  <Icon name='download' />
+  Download
+</Button>`
+const ButtonHTML = `<button class="ui small green button">
+  <i class="download icon"></i>
+  Download
+</button>`
+const RatingJSX = '<Rating rating={1} maxRating={5} />'
+const RatingHTML = `<div
+  class="ui rating"
+  data-rating="1"
+  data-max-rating="3"
+></div>`
+
+const MessageIconJSX = `<Message 
+  success 
+  icon='thumbs up'
+  header='Nice job!'
+  content='Your profile is complete.'
+/>`
+const MessageIconHTML = `<div class="ui success message">
+  <i class="thumbs up icon"></i>
+  <div class="content">
+    <div class="header">
+      Nice job!
+    </div>
+    Your profile is complete.
+  </div>
+</div>`
+
+const MessageSubComponentsJSX = `<Message icon>
+  <Icon name='circle notched' loading />
+  <Message.Content>
+    <Message.Header>
+      Just one second
+    </Message.Header>
+    We're fetching that content for you.
+  </Message.Content>
+</Message>`
+const MessageSubComponentsHTML = `<div class="ui icon message">
+  <i class="loading circle notched icon"></i>
+  <div class="content">
+    <div class="header">
+      Just one second
+    </div>
+    We're fetching that content for you.
+  </div>
+</div>`
+
+const Comparison = ({ jsx, html }) => (
+  <Segment className='code-example'>
+    <Grid columns='equal' centered textAlign='left'>
+      <Grid.Column mobile='16' tablet='16' computer='8' largeScreen='7'>
+        <Label size='tiny' attached='top left'>JSX</Label>
+        <Highlight className='language-xml'>
+          {jsx}
+        </Highlight>
+      </Grid.Column>
+      <Grid.Column only='large screen' large='1' textAlign='center'>
+        <Divider vertical>
+          <Icon name='right arrow circle' />
+        </Divider>
+      </Grid.Column>
+      <Grid.Column mobile='16' tablet='16' computer='8' largeScreen='7'>
+        <Label size='tiny' attached='top right'>Rendered HTML</Label>
+        <Highlight className='language-html'>
+          {html}
+        </Highlight>
+      </Grid.Column>
+    </Grid>
+  </Segment>
+)
+
+Comparison.propTypes = {
+  jsx: PropTypes.string,
+  html: PropTypes.string,
+}
+
+const Introduction = () => (
+  <Container id='introduction-page'>
+    <Segment className='center aligned basic'>
+      <Logo centered size='small' />
+      <Header.H1 textAlign='center'>
+        Semantic-UI-React
+        <Header.Subheader>
+          {pkg.description}
+        </Header.Subheader>
+      </Header.H1>
+    </Segment>
+
+    <Segment className='basic padded'>
+      <Header.H2 dividing>Install</Header.H2>
+      <Message>
+        <pre>$ npm install {pkg.name}</pre>
+      </Message>
+      <List>
+        <List.Item icon='check mark'>jQuery Free</List.Item>
+        <List.Item icon='check mark'>Declarative Components</List.Item>
+        <List.Item icon='check mark'>Shorthand Props</List.Item>
+        <List.Item icon='check mark'>Auto Controlled State</List.Item>
+      </List>
+    </Segment>
+
+    <Segment className='basic padded'>
+      <Header.H2 dividing>jQuery Free</Header.H2>
+      <p>
+        jQuery is a DOM manipulation library. It reads from and writes to the DOM.
+        React uses a virtual DOM (a JavaScript representation of the real DOM).
+        React only <em>writes</em> patch updates to the DOM, but <em>never reads</em> from it.
+      </p>
+      <p>
+        It is not feasible to keep real DOM manipulations in sync with React's virtual DOM. Because of this, all
+        jQuery functionality has been re-implemented in React. There is jQuery nor any direct DOM manipulation.
+      </p>
+    </Segment>
+
+    <Segment className='basic padded'>
+      <Header.H2 dividing>Declarative Components</Header.H2>
+      Declarative APIs provide for robust features and prop validation.
+
+      <Comparison jsx={RatingJSX} html={RatingHTML} />
+      <Comparison jsx={ButtonJSX} html={ButtonHTML} />
+    </Segment>
+
+    <Segment className='basic padded'>
+      <Header.H2 dividing>Shorthand Props</Header.H2>
+      <p>
+        Shorthand props generate markup for you, making many use cases a breeze.
+      </p>
+
+      <Header.H3>Child Object Arrays</Header.H3>
+      <p>
+        Components with repeating children accept arrays of plain objects.
+        <a href='https://facebook.github.io/react/docs/context.html#parent-child-coupling' target='_blank'>
+          &nbsp;Facebook is fond of this&nbsp;
+        </a>
+        over using context to handle parent-child coupling and so are we.
+      </p>
+      <Comparison jsx={AccordionJSX} html={AccordionHTML} />
+
+      <Header.H3>{'icon={...}'}</Header.H3>
+      <p>
+        The <code>icon</code> prop is standard for many components.
+        It can accept an Icon <code>name</code>, an Icon props object, or an <code>{'<Icon />'}</code> instance.
+      </p>
+      <Comparison jsx={MessageIconJSX} html={MessageIconHTML} />
+
+      <Header.H3>{'image={...}'}</Header.H3>
+      <p>
+        The <code>image</code> prop is standard for many components.
+        It can accept an image <code>src</code>, an Image props object, or an <code>{'<Image />'}</code> instance.
+      </p>
+    </Segment>
+
+    <Segment className='basic padded'>
+      <Header.H2 dividing>Sub Components</Header.H2>
+      <p>
+        Sub components give you complete access to the markup.
+        This is essential for flexibility in customizing components.
+      </p>
+      <Comparison jsx={MessageSubComponentsJSX} html={MessageSubComponentsHTML} />
+    </Segment>
+
+    <Segment className='basic padded'>
+      <Header.H2 dividing>Auto Controlled State</Header.H2>
+
+      <p>
+        Stateful components self manage their state out of the box, without wiring. Dropdowns open on click without
+        wiring <code>onClick</code> to the <code>open</code> prop. The value is also stored internally, without
+        wiring <code>onChange</code> to <code>value</code>.
+      </p>
+      <p>
+        If you add a <code>value</code> prop or an <code>open</code> prop, the Dropdown delegates control for that
+        one prop to your value. The other props remain auto controlled. Mix and match any number of controlled and
+        uncontrolled props. Add and remove control at any time by adding or removing props. Everything just works.
+      </p>
+      <p>
+        See the docs for more examples.
+      </p>
+      <Divider hidden section />
+      <Divider hidden section />
+      <Divider hidden section />
+    </Segment>
+  </Container>
+)
+
+export default Introduction

docs/app/index.ejs

@@ -5,9 +5,10 @@
   <% if (__BASE__) { %>
   <base href="<%= __BASE__ %>" />
   <% } %>
-  <link rel="shortcut icon" type="image/x-icon" href=<%= (__BASE__ || '') + '/logo'%> />
+  <link rel="shortcut icon" type="image/x-icon" href=<%= (__BASE__ || '') + '/logo' %> />
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/github-gist.min.css">
-  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/<%= htmlWebpackPlugin.options.versions.sui %>/semantic.min.css">
+  <link rel="stylesheet"
+        href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/<%= htmlWebpackPlugin.options.versions.sui %>/semantic.min.css">
   <script src="//cdnjs.cloudflare.com/ajax/libs/Faker/<%= htmlWebpackPlugin.options.versions.faker %>/faker.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.1/anchor.min.js"></script>
   <title>Semantic UI React</title>
@@ -27,6 +28,7 @@
     html, body {
       background: #f7f7f7;
     }
+
     .anchorjs-link {
       transition: margin-left .25s, color .25s, opacity 0.25s;
       margin-left: -0.2em;
@@ -49,6 +51,30 @@
       color: cornflowerblue;
       opacity: 1;
     }
+
+    .code-example pre {
+      margin: 0;
+    }
+
+    code:not(.hljs) {
+      padding: 0;
+      padding-top: 0.2em;
+      padding-bottom: 0.2em;
+      margin: 0;
+      font-size: 90%;
+      background-color: rgba(0, 0, 0, 0.04);
+      border-radius: 3px;
+    }
+
+    code:not(.hljs)::before {
+      letter-spacing: -0.2em;
+      content: "\00a0";
+    }
+
+    code:not(.hljs)::after {
+      letter-spacing: -0.2em;
+      content: "\00a0";
+    }
   </style>
 </body>
 </html>