feat(Search): update to v1 API

* Use Input, clean up unused props
* Category search
* Update Search parts to use ElementType
* Add specs
* Add examples to mirror semantic-ui.com

docs/app/Examples/modules/Search/Types/Category.js

@@ -0,0 +1,83 @@
+import _ from 'lodash'
+import faker from 'faker'
+import React, { Component } from 'react'
+import { Search, Grid, Header } from 'stardust'
+
+const getResults = () => _.times(5, () => ({
+  title: faker.company.companyName(),
+  description: faker.company.catchPhrase(),
+  image: faker.internet.avatar(),
+  price: faker.finance.amount(0, 100, 2, '$'),
+}))
+
+const source = _.range(0, 3).reduce((memo, index) => {
+  const name = faker.hacker.noun()
+
+  memo[name] = {
+    name,
+    results: getResults(),
+  }
+
+  return memo
+}, {})
+
+export default class SearchCategoryExample extends Component {
+  componentWillMount() {
+    this.setState({
+      isLoading: false,
+      results: [],
+      value: '',
+    })
+  }
+
+  handleChange = (e, result) => this.setState({ value: result.title })
+
+  handleSearchChange = (e, value) => {
+    this.setState({ isLoading: true, value })
+
+    setTimeout(() => {
+      const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
+      const isMatch = (result) => re.test(result.title)
+
+      const filteredResults = _.reduce(source, (memo, data, name) => {
+        const results = _.filter(data.results, isMatch)
+
+        if (results.length) {
+          memo[name] = { name, results }
+        }
+
+        return memo
+      }, {})
+
+      this.setState({
+        isLoading: false,
+        results: filteredResults,
+      })
+    }, 500)
+  }
+
+  render() {
+    const { isLoading, value, results } = this.state
+
+    return (
+      <Grid>
+        <Grid.Column width={8}>
+          <Search
+            category
+            loading={isLoading}
+            onChange={this.handleChange}
+            onSearchChange={this.handleSearchChange}
+            results={results}
+            value={value}
+          />
+        </Grid.Column>
+        <Grid.Column width={8}>
+          <Header>State</Header>
+          <pre>{JSON.stringify(this.state, null, 2)}</pre>
+          <Header>Options</Header>
+          <pre>{JSON.stringify(source, null, 2)}</pre>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

docs/app/Examples/modules/Search/Types/Local.js

@@ -0,0 +1,44 @@
+import _ from 'lodash'
+import faker from 'faker'
+import React, { Component } from 'react'
+import { Search, Grid, Header } from 'stardust'
+
+const source = _.times(5, () => ({
+  title: faker.company.companyName(),
+  description: faker.company.catchPhrase(),
+  image: faker.internet.avatar(),
+  price: faker.finance.amount(0, 100, 2, '$'),
+}))
+
+export default class SearchLocalExample extends Component {
+  componentWillMount() {
+    this.setState({
+      value: '',
+    })
+  }
+
+  handleChange = (e, result) => this.setState({ value: result.title })
+
+  handleSearchChange = (e, value) => this.setState({ value })
+
+  render() {
+    const { value } = this.state
+
+    return (
+      <Grid>
+        <Grid.Column width={8}>
+          <Search
+            onChange={this.handleChange}
+            onSearchChange={this.handleSearchChange}
+            source={source}
+            value={value}
+          />
+        </Grid.Column>
+        <Grid.Column width={8}>
+          <Header>Options</Header>
+          <pre>{JSON.stringify(source, null, 2)}</pre>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

docs/app/Examples/modules/Search/Types/Standard.js

@@ -0,0 +1,61 @@
+import _ from 'lodash'
+import faker from 'faker'
+import React, { Component } from 'react'
+import { Search, Grid, Header } from 'stardust'
+
+const source = _.times(5, () => ({
+  title: faker.company.companyName(),
+  description: faker.company.catchPhrase(),
+  image: faker.internet.avatar(),
+  price: faker.finance.amount(0, 100, 2, '$'),
+}))
+
+export default class SearchStandardExample extends Component {
+  componentWillMount() {
+    this.setState({
+      isLoading: false,
+      results: [],
+      value: '',
+    })
+  }
+
+  handleChange = (e, result) => this.setState({ value: result.title })
+
+  handleSearchChange = (e, value) => {
+    this.setState({ isLoading: true, value })
+
+    setTimeout(() => {
+      const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
+      const isMatch = (result) => re.test(result.title)
+
+      this.setState({
+        isLoading: false,
+        results: _.filter(source, isMatch),
+      })
+    }, 500)
+  }
+
+  render() {
+    const { isLoading, value, results } = this.state
+
+    return (
+      <Grid>
+        <Grid.Column width={8}>
+          <Search
+            loading={isLoading}
+            onChange={this.handleChange}
+            onSearchChange={this.handleSearchChange}
+            results={results}
+            value={value}
+          />
+        </Grid.Column>
+        <Grid.Column width={8}>
+          <Header>State</Header>
+          <pre>{JSON.stringify(this.state, null, 2)}</pre>
+          <Header>Options</Header>
+          <pre>{JSON.stringify(source, null, 2)}</pre>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

docs/app/Examples/modules/Search/Variations/Aligned.js

@@ -0,0 +1,28 @@
+import _ from 'lodash'
+import faker from 'faker'
+import React from 'react'
+import { Search, Grid, Header } from 'stardust'
+
+const source = _.times(5, () => ({
+  title: faker.company.companyName(),
+  description: faker.company.catchPhrase(),
+  image: faker.internet.avatar(),
+  price: faker.finance.amount(0, 100, 2, '$'),
+}))
+
+const SearchAlignedExample = () => (
+  <Grid>
+    <Grid.Column width={8}>
+      <Search
+        aligned='right'
+        source={source}
+      />
+    </Grid.Column>
+    <Grid.Column width={8}>
+      <Header>Options</Header>
+      <pre>{JSON.stringify(source, null, 2)}</pre>
+    </Grid.Column>
+  </Grid>
+)
+
+export default SearchAlignedExample

docs/app/Examples/modules/Search/Variations/Fluid.js

@@ -0,0 +1,28 @@
+import _ from 'lodash'
+import faker from 'faker'
+import React from 'react'
+import { Search, Grid, Header } from 'stardust'
+
+const source = _.times(5, () => ({
+  title: faker.company.companyName(),
+  description: faker.company.catchPhrase(),
+  image: faker.internet.avatar(),
+  price: faker.finance.amount(0, 100, 2, '$'),
+}))
+
+const SearchFluidExample = () => (
+  <Grid>
+    <Grid.Column width={8}>
+      <Search
+        fluid
+        source={source}
+      />
+    </Grid.Column>
+    <Grid.Column width={8}>
+      <Header>Options</Header>
+      <pre>{JSON.stringify(source, null, 2)}</pre>
+    </Grid.Column>
+  </Grid>
+)
+
+export default SearchFluidExample

docs/app/Examples/modules/Search/index.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const SearchExamples = () => (
+  <div>
+    <ExampleSection title='Types'>
+      <ComponentExample
+        title='Standard'
+        description='A search can display a set of results'
+        examplePath='modules/Search/Types/Standard'
+      />
+      <ComponentExample
+        title='Category'
+        description='A search can display results from remote content ordered by categories'
+        examplePath='modules/Search/Types/Category'
+      />
+      <ComponentExample
+        title='Local Search'
+        description='A search can look for results inside static local content.'
+        examplePath='modules/Search/Types/Local'
+      />
+    </ExampleSection>
+    <ExampleSection title='Variations'>
+      <ComponentExample
+        title='Fluid'
+        description='A search can have its results take up the width of its container'
+        examplePath='modules/Search/Variations/Fluid'
+      />
+      <ComponentExample
+        title='Aligned'
+        description='A search can have its results aligned to its left or right container edge'
+        examplePath='modules/Search/Variations/Aligned'
+      />
+    </ExampleSection>
+  </div>
+)
+
+export default SearchExamples

src/elements/Input/Input.js

@@ -54,6 +54,7 @@ export default class Input extends Component {
     children: PropTypes.node,
     className: PropTypes.string,
     icon: PropTypes.string,
+    inputClassName: PropTypes.string,
     type: PropTypes.string,
   }
 
@@ -67,7 +68,7 @@ export default class Input extends Component {
   }
 
   render() {
-    const { className, children, icon, type } = this.props
+    const { className, children, icon, inputClassName, type } = this.props
     // Semantic supports actions and labels on either side of an input.
     // The element must be on the same side as the indicated class.
     // We first determine the left/right classes for each type of child,
@@ -105,7 +106,7 @@ export default class Input extends Component {
       <ElementType {...rest} className={classes}>
         {isLeftLabeled && labelChildren}
         {isLeftAction && actionChildren}
-        <input {...inputProps} type={type} />
+        <input {...inputProps} className={inputClassName} type={type} />
         {icon && <Icon name={icon} />}
         {isRightLabeled && labelChildren}
         {isRightAction && actionChildren}