Skip to content

Commit

Permalink
refactor(utils): refactor and update all components
Browse files Browse the repository at this point in the history
  • Loading branch information
levithomason committed Aug 12, 2016
1 parent 63aa837 commit ea9cea7
Show file tree
Hide file tree
Showing 146 changed files with 1,130 additions and 1,065 deletions.
32 changes: 14 additions & 18 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -18,7 +18,7 @@ CONTRIBUTING
- [API](#api)
- [SUI HTML Classes](#sui-html-classes)
- [API Patterns](#api-patterns)
- [Prop Utils](#prop-utils)
- [Utilities](#utilities)
- [Testing className](#testing-classname)
- [SUI HTML Markup](#sui-html-markup)
- [SUI Components vs Component Parts](#sui-components-vs-component-parts)
Expand Down Expand Up @@ -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 {
// ...
}
```
Expand All @@ -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',
Expand Down Expand Up @@ -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
#### Utilities

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(
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
3 changes: 2 additions & 1 deletion codecov.yml
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
coverage:
ignore:
- src/utils/*
- src/factories/*
- src/lib/*
2 changes: 1 addition & 1 deletion docs/app/Components/ComponentDoc/ComponentDescription.js
Original file line number Diff line number Diff line change
@@ -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

Expand Down
7 changes: 3 additions & 4 deletions docs/app/Components/ComponentDoc/ComponentExample.js
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
23 changes: 13 additions & 10 deletions docs/app/Components/ComponentDoc/ComponentExamples.js
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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>
)
}
Expand Down
1 change: 1 addition & 0 deletions docs/app/Components/ComponentDoc/ComponentProps.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import _ from 'lodash'
import React, { Component, PropTypes } from 'react'

import { Divider, Header, Label, Table } from 'stardust'

const DOCBLOCK_DESCRIPTION_DEFAULTS = {
Expand Down
1 change: 1 addition & 0 deletions docs/app/Components/ComponentDoc/ExampleSection.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { Component, PropTypes } from 'react'

import { Header } from 'stardust'

export default class ExampleSection extends Component {
Expand Down
1 change: 1 addition & 0 deletions docs/app/Components/PageNotFound/PageNotFound.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import _ from 'lodash'
import React, { Component } from 'react'

import { Button, Header, Loader } from 'stardust'

const containerStyle = {
Expand Down
2 changes: 1 addition & 1 deletion docs/app/Components/Root.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
7 changes: 4 additions & 3 deletions docs/app/Components/Sidebar/Sidebar.js
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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}>
Expand Down
12 changes: 8 additions & 4 deletions docs/app/Examples/elements/Step/Groups/index.js
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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>

Expand Down
10 changes: 4 additions & 6 deletions docs/app/index.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -24,7 +23,6 @@
</script>
</head>
<body>

<style>
.anchorjs-link {
transition: margin-left .25s, color .25s, opacity 0.25s;
Expand Down
Loading

0 comments on commit ea9cea7

Please sign in to comment.