refactor(utils): refactor and update all components

Semantic-Org · Aug 12, 2016 · da2d661 · da2d661
1 parent 63aa837
commit da2d661
Show file tree

Hide file tree

Showing 146 changed files with 1,130 additions and 1,065 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -6,7 +6,7 @@ CONTRIBUTING
 
 
 - [Getting Started](#getting-started)
-  - [Clone & Install](#clone-&-install)
+  - [Fork, Clone & Install](#fork-clone-&-install)
   - [Commit Messages](#commit-messages)
   - [Commands](#commands)
 - [Workflow](#workflow)
@@ -18,7 +18,7 @@ CONTRIBUTING
 - [API](#api)
   - [SUI HTML Classes](#sui-html-classes)
     - [API Patterns](#api-patterns)
-    - [Prop Utils](#prop-utils)
+    - [Building className](#building-classname)
     - [Testing className](#testing-classname)
   - [SUI HTML Markup](#sui-html-markup)
     - [SUI Components vs Component Parts](#sui-components-vs-component-parts)
@@ -115,9 +115,9 @@ function Button(props) {
 Stateful components should be classes:
 
 ```js
-import AutoControlledComponent from 'src/utils/AutoControlledComponent'
+import { AutoControlledComponent as Component } from '../../lib'
 
-class Dropdown extends AutoControlledComponent {
+class Dropdown extends Component {
   // ...
 }
 ```
@@ -131,7 +131,7 @@ Every component has a static property called `_meta`.  This object defines the c
 Here's an example `_meta` object:
 
 ```js
-import META from '../../utils/Meta'
+import { META } from '../../lib'
 
 const _meta = {
   name: 'MyComponent',
@@ -216,13 +216,13 @@ Each group has an API pattern and prop util for building up the `className` and
 <div class="ui small red segment"></div>
 ```
 
-#### Prop Utils
+#### Building className
 
-Use [`propUtils`][4] to extract the prop values and build up the `className`.  Grouped classes like `color` and `size` simply use the prop value as the `className`.
+Use [`classNameBuilders`][4] to extract the prop values and build up the `className`.  Grouped classes like `color` and `size` simply use the prop value as the `className`.
 
 ```js
 import cx from 'classnames'
-import { useKeyOnly, useValueAndKey, useKeyOrValueAndKey } from 'src/utils/propUtils'
+import { useKeyOnly, useValueAndKey, useKeyOrValueAndKey } from '../../lib'
 
 function Segment({ size, color, basic, floated, padded }) {
   const classes = cx(
@@ -330,8 +330,6 @@ class List {
 
 #### Component Part Props
 
->Warning, this pattern is experimental.  Feel free to consider it in your API spec if it makes sense.  We do not yet know if it is here to stay.
-
 Sometimes it is convenient to use props to generate markup.  Example, the [Label][10] markup is minimal.  One configuration includes an image and detail:
 
 ```html
@@ -350,15 +348,11 @@ We allow props to define these minimal *component parts*:
   detail='Friend'
   text='Veronica'
 />
-
-// or
-
-<Label image='veronika.jpg' detail='Friend'>
-  Veronica
-</Label>
 ```
 
-See [`propUtils`][4] for special prop renderers for handling `image` and `icon` props for this purpose.
+When props are used for component markup generation, children are not allowed in order to prevent conflicts.  See [this response][14] for more.
+
+See [`src/factories`][13] for special methods to convert props values into ReactElements for this purpose.
 
 ## Testing
 
@@ -523,7 +517,7 @@ Adding documentation for new components is a bit tedious.  The best way to do th
 [1]: https://github.com/TechnologyAdvice/stardust/blob/master/test/specs/commonTests.js
 [2]: https://facebook.github.io/react/docs/forms.html#controlled-components
 [3]: https://facebook.github.io/react/docs/forms.html#uncontrolled-components
-[4]: https://github.com/TechnologyAdvice/stardust/blob/master/src/utils/propUtils.js
+[4]: https://github.com/TechnologyAdvice/stardust/blob/master/src/lib/classNameBuilders.js
 [5]: http://semantic-ui.com/elements/header
 [6]: http://semantic-ui.com/views/item
 [7]: https://github.com/TechnologyAdvice/stardust/pull/281#issuecomment-228663527
@@ -532,3 +526,5 @@ Adding documentation for new components is a bit tedious.  The best way to do th
 [10]: http://semantic-ui.com/elements/label.html
 [11]: https://nodejs.org/
 [12]: https://github.com/TechnologyAdvice/stardust#fork-destination-box
+[13]: https://github.com/TechnologyAdvice/stardust/blob/master/src/factories
+[14]: https://github.com/TechnologyAdvice/stardust/pull/335#issuecomment-238960895
diff --git a/codecov.yml b/codecov.yml
@@ -1,3 +1,4 @@
 coverage:
   ignore:
-    - src/utils/*
+    - src/factories/*
+    - src/lib/*
diff --git a/docs/app/Components/ComponentDoc/ComponentDescription.js b/docs/app/Components/ComponentDoc/ComponentDescription.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import React, { Component, PropTypes } from 'react'
 import * as stardust from 'stardust'
-import META from 'src/utils/Meta'
+import { META } from 'src/lib'
 import { Link } from 'react-router'
 const { Divider, Grid, Header, List } = stardust
 

diff --git a/docs/app/Components/ComponentDoc/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample.js
@@ -1,10 +1,9 @@
 import React, { Component, createElement, PropTypes } from 'react'
-import { Grid, Header, Icon } from 'stardust'
 import Highlight from 'react-highlight'
+
 import { exampleContext } from 'docs/app/utils'
-import {
-  getUnhandledProps,
-} from 'src/utils/propUtils'
+import { getUnhandledProps } from 'src/lib'
+import { Grid, Header, Icon } from 'stardust'
 
 /**
  * Renders a `component` and the raw `code` that produced it.

diff --git a/docs/app/Components/ComponentDoc/ComponentExamples.js b/docs/app/Components/ComponentDoc/ComponentExamples.js
@@ -1,7 +1,7 @@
 import React, { Component, createElement, PropTypes } from 'react'
 
 import { exampleContext } from 'docs/app/utils'
-import { Divider, Header, Message } from 'stardust'
+import { Divider, Header, Icon, Message } from 'stardust'
 
 export default class ComponentExamples extends Component {
   static propTypes = {
@@ -22,15 +22,18 @@ export default class ComponentExamples extends Component {
   renderMissingExamples = () => {
     const { name } = this.props
     return (
-      <Message icon='book' className='info'>
-        If there's no
-        <a
-          href='https://github.com/TechnologyAdvice/stardust/pulls'
-        > pull request </a>
-        open for <code>&lt;{name} /&gt;</code> examples, you should
-        <a
-          href='https://github.com/TechnologyAdvice/stardust/blob/master/CONTRIBUTING.md'
-        > contribute</a>!
+      <Message info icon>
+        <Icon name='book' />
+        <Message.Content>
+          If there's no
+          <a
+            href='https://github.com/TechnologyAdvice/stardust/pulls'
+          > pull request </a>
+          open for <code>&lt;{name} /&gt;</code> examples, you should
+          <a
+            href='https://github.com/TechnologyAdvice/stardust/blob/master/CONTRIBUTING.md'
+          > contribute</a>!
+        </Message.Content>
       </Message>
     )
   }

diff --git a/docs/app/Components/ComponentDoc/ComponentProps.js b/docs/app/Components/ComponentDoc/ComponentProps.js
@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import React, { Component, PropTypes } from 'react'
+
 import { Divider, Header, Label, Table } from 'stardust'
 
 const DOCBLOCK_DESCRIPTION_DEFAULTS = {

diff --git a/docs/app/Components/ComponentDoc/ExampleSection.js b/docs/app/Components/ComponentDoc/ExampleSection.js
@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react'
+
 import { Header } from 'stardust'
 
 export default class ExampleSection extends Component {

diff --git a/docs/app/Components/PageNotFound/PageNotFound.js b/docs/app/Components/PageNotFound/PageNotFound.js
@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import React, { Component } from 'react'
+
 import { Button, Header, Loader } from 'stardust'
 
 const containerStyle = {

diff --git a/docs/app/Components/Root.js b/docs/app/Components/Root.js
@@ -5,7 +5,7 @@ import React, { Component, PropTypes } from 'react'
 
 import ComponentDoc from 'docs/app/Components/ComponentDoc/ComponentDoc'
 import PageNotFound from 'docs/app/Components/PageNotFound/PageNotFound'
-import META from 'src/utils/Meta'
+import { META } from 'src/lib'
 import * as stardust from 'stardust'
 
 export default class Root extends Component {

diff --git a/docs/app/Components/Sidebar/Sidebar.js b/docs/app/Components/Sidebar/Sidebar.js
@@ -1,9 +1,10 @@
 import _ from 'lodash/fp'
 import React, { Component, PropTypes } from 'react'
 import { Link } from 'react-router'
-import * as stardust from 'stardust'
+
 import { typeOrder } from 'docs/app/utils'
-import META from 'src/utils/Meta'
+import { META } from 'src/lib'
+import * as stardust from 'stardust'
 
 const { Menu, Icon, Input } = stardust
 
@@ -24,7 +25,7 @@ export default class Sidebar extends Component {
       ])),
       _.sortBy('_meta.name'),
       _.map(({ _meta }) => {
-        const route = `${_meta.type}s/${_.kebabCase(_meta.name)}`
+        const route = `/${_meta.type}s/${_.kebabCase(_meta.name)}`
 
         return (
           <Link to={route} className='item' activeClassName='active' key={_meta.name}>

diff --git a/docs/app/Examples/elements/Step/Groups/index.js b/docs/app/Examples/elements/Step/Groups/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Message } from 'stardust'
+import { Icon, Message } from 'stardust'
 
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
@@ -13,9 +13,13 @@ const Groups = () => (
       description='A set of steps.'
       examplePath='elements/Step/Groups/Groups'
     >
-      <Message className='positive' icon='mobile' header='Responsive Element'>
-        Steps will automatically stack on mobile. To make steps automatically stack for tablet use the <b>tablet
-        stackable</b> variation.
+      <Message positive icon>
+        <Icon name='mobile' />
+        <Message.Content>
+          <Message.Header>Responsive Element</Message.Header>
+          Steps will automatically stack on mobile.
+          To make steps automatically stack for tablet use the <code>stackable='tablet'</code> variation.
+        </Message.Content>
       </Message>
     </ComponentExample>
 

diff --git a/docs/app/index.ejs b/docs/app/index.ejs
@@ -2,13 +2,12 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <% if (htmlWebpackPlugin.options.baseHref) { %>
-  <base href="<%= htmlWebpackPlugin.options.baseHref %>" />
+  <% if (__BASE__) { %>
+  <base href="<%= __BASE__ %>" />
   <% } %>
-  <link rel="shortcut icon" type="image/x-icon" href="<%= htmlWebpackPlugin.options.base %>/logo.png" />
+  <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>
@@ -24,7 +23,6 @@
   </script>
 </head>
 <body>
-
   <style>
     .anchorjs-link {
       transition: margin-left .25s, color .25s, opacity 0.25s;