Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
…React into docs/sidebar

# Conflicts:
#	docs/app/Components/ComponentDoc/ComponentDoc.js
#	docs/app/Components/ComponentDoc/ComponentDocHeader.js
#	docs/app/Components/ComponentDoc/ComponentDocLinks.js
#	docs/app/Components/ComponentDoc/ComponentDocSee.js
#	docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js
#	docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponents.js
#	docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsDescription.js
#	docs/app/Components/ComponentDoc/ComponentTable/ComponentTable.js
#	docs/app/utils/index.js
#	yarn.lock
  • Loading branch information
layershifter committed Oct 21, 2017
2 parents da68908 + 4f29636 commit d2f3d47
Show file tree
Hide file tree
Showing 340 changed files with 3,744 additions and 2,041 deletions.
2 changes: 1 addition & 1 deletion .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ jobs:
# Chrome HeadlessBrowser is missing deps on Debian, see:
# https://github.com/GoogleChrome/puppeteer/issues/290
- run:
name: Update Pupeteer Dependencies
name: Update Puppeteer Dependencies
command: |
sudo apt-get update
sudo apt-get install --yes --quiet gconf-service libasound2 libatk1.0-0 libc6 \
Expand Down
4 changes: 2 additions & 2 deletions .github/ISSUE_TEMPLATE.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
✖ USAGE QUESTIONS → Use these dedicated resources:
Docs - http://react.semantic-ui.com
Chat - https://gitter.im/Semantic-Org/Semantic-UI-React
SO - http://stackoverflow.com/search?q=semantic-ui-react
SO - https://stackoverflow.com/questions/tagged/semantic-ui-react?sort=votes

✔ BUGS → This form is required:

Expand All @@ -18,4 +18,4 @@ x.y.z

### Testcase
[Fork, update, and replace this pen to show the bug]:
http://codepen.io/levithomason/pen/ZpBaJX
https://codesandbox.io/s/2l3n74j9y
224 changes: 103 additions & 121 deletions CHANGELOG.md

Large diffs are not rendered by default.

85 changes: 44 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,43 @@ Hey, we're in development. Prior to reaching [v1.0.0][6]:

See the [Documentation][2] for an introduction, usage information, and extensive examples.

## Built With Semantic UI React

<img align="left" height="50" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/app/amazon-logo.png" />
<img align="left" height="50" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/app/netflix-logo.png" />
<a href="https://github.com/Semantic-Org/Semantic-UI-React/edit/master/README.md">
<img height="50" src="https://github.com/Semantic-Org/Semantic-UI-React/raw/master/docs/app/add-yours.png" />
</a>

These great products are built on Semantic UI React. Add yours [here][22].

- Netflix's Edge Developer Experience team's numerous [internal apps](https://github.com/Semantic-Org/Semantic-UI-React/issues/1604)
- Amazon Publishing — the full-service publisher of Amazon — [APub.com](https://amazonpublishing.amazon.com)
- http://stoplight.io
- https://roadmap.space
- https://edabit.com
- https://blackship.com
- http://www.brewhousesolutions.com
- https://www.seeuletter.com
- https://www.stackforge.co
- https://sublimefund.org
- https://thefaithcircle.com
- https://appfollow.io
- http://according.to.localsourc.es
- http://www.aircip.ir
- http://platform.nazarbazaar.ir
- https://build.games

## Example Projects

This is a listing of example projects and guides that will help you integrate Semantic UI React into your new or existing projects.

### [webpack1][28]
Our example project right [here][28] in this repo.

### [webpack2][29]
Our example project right [here][29] in this repo.

### [react-semantic.ui-starter][102]
Production-ready, performance-first, optimized, robust, fully-featured boilerplate/example for your new Progressive Web App.

Expand All @@ -67,24 +100,6 @@ Here are some helpful links:
- [Building CSS with Meteor][26]
- [Creating a standalone theme][25]

## Built With Semantic UI React

These great products are built on Semantic UI React. Add yours [here][22].

- Netflix's Edge Developer Experience team's numerous [internal apps](https://github.com/Semantic-Org/Semantic-UI-React/issues/1604)
- http://stoplight.io
- https://roadmap.space
- https://edabit.com
- https://blackship.com
- http://www.brewhousesolutions.com
- https://www.lifebot.fr
- https://www.stackforge.co
- https://sublimefund.org
- https://thefaithcircle.com
- https://appfollow.io
- http://according.to.localsourc.es


## Voice Your Opinion

Help shape this library by weighing in on our [RFC (request for comments)][19] issues.
Expand All @@ -93,9 +108,9 @@ Help shape this library by weighing in on our [RFC (request for comments)][19] i

Our [CONTRIBUTING.md][1] is a step-by-step setup and development guide. It is meant to be read from top to bottom. Once you're up to speed, each issue here includes more information on how you can help:

### [Good First Contribution][21]
### [Good First Issue][21]

Issues labeled [`good first contribution`][21] are a great way to ease into development on this project.
Issues labeled [`good first issue`][21] are a great way to ease into development on this project.

### [Missing Components][17]

Expand All @@ -105,7 +120,7 @@ We're seeking component parity with Semantic UI, plus some addons. There is an

Any other issue labeled [`help wanted`][4] is ready for a PR.

## Support
## 100% Semantic UI Support

| Elements | Collections | Views | Modules | Behaviors |
|-----------------|-----------------|-----------------|-----------------|--------------------|
Expand All @@ -125,9 +140,7 @@ Any other issue labeled [`help wanted`][4] is ready for a PR.
| ✓ Segment | | | ✓ Tab | |
| ✓ Step | | | ✓ Transition | |

## Our Principles

[TechnologyAdvice][9] has been [dogfooding][10] Semantic UI React in production since fall of 2015. These are the guiding principles that have developed as a result:
## Principles

- No jQuery dependency
- No animation dependencies
Expand All @@ -148,29 +161,16 @@ yarn release:minor
yarn release:patch
```

Deploy the docs:

```sh
yarn deploy:docs
```

Update the changelog (requires [github_changelog_generator][15]):

```sh
github_changelog_generator
git add CHANGELOG.md
git commit -m 'docs(changelog): update changelog [ci skip]'
git push
```
Releasing will update the changelog which requires [github_changelog_generator][15].

## Credit

Originally made for [@TechnologyAdvice][9] by [@levithomason][26].

Big thanks to our [contributors][20], especially:

- @layershifter for bringing momentum and continual support
- @jcarbo for thoughtful engineering and continual support
- [@layershifter][27] for essentially taking over during [@levithomason][26]'s unavailability
- @jcarbo for thoughtful engineering
- @jamiehill for early engineering and support

[1]: https://github.com/Semantic-Org/Semantic-UI-React/blob/master/.github/CONTRIBUTING.md
Expand All @@ -192,13 +192,16 @@ Big thanks to our [contributors][20], especially:
[18]: https://github.com/Semantic-Org/Semantic-UI-React/blob/master/CHANGELOG.md
[19]: https://github.com/Semantic-Org/Semantic-UI-React/issues?q=is%3Aopen+RFC+label%3ARFC
[20]: https://github.com/Semantic-Org/Semantic-UI-React/graphs/contributors
[21]: https://github.com/Semantic-Org/Semantic-UI-React/labels/good%20first%20contribution
[21]: https://github.com/Semantic-Org/Semantic-UI-React/labels/good%20first%20issue
[22]: https://github.com/Semantic-Org/Semantic-UI-React/edit/master/README.md
[23]: https://react.semantic-ui.com/usage#css
[24]: https://github.com/Semantic-Org/Semantic-UI-React/issues/802#issuecomment-258990274
[25]: http://learnsemantic.com/themes/creating.html
[26]: https://github.com/Semantic-Org/Semantic-UI-Meteor
[26]: https://github.com/levithomason
[27]: https://github.com/layershifter
[28]: https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack1
[29]: https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack2

<!-- Examples -->
[100]: https://github.com/wyc/semantic-ui-react-todos
Expand Down
6 changes: 2 additions & 4 deletions config.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,8 @@ const config = {
// ----------------------------------
compiler_devtool: (__DEV__ || __TEST__) && 'cheap-source-map',
compiler_globals: {
process: {
env: {
NODE_ENV: JSON.stringify(env),
},
'process.env': {
NODE_ENV: JSON.stringify(env),
},
__DEV__,
__PATH_SEP__: JSON.stringify(path.sep),
Expand Down
121 changes: 44 additions & 77 deletions docs/app/Components/ComponentDoc/ComponentDoc.js
Original file line number Diff line number Diff line change
@@ -1,90 +1,57 @@
import _ from 'lodash'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import React from 'react'
import DocumentTitle from 'react-document-title'
import { withRouter } from 'react-router'
import { Grid } from 'semantic-ui-react'

import { scrollToAnchor } from 'docs/app/utils'
import { withDocInfo } from 'docs/app/HOC'
import ComponentDocHeader from './ComponentDocHeader'
import ComponentDocLinks from './ComponentDocLinks'
import ComponentDocSee from './ComponentDocSee'
import ComponentExamples from './ComponentExamples'
import ComponentProps from './ComponentProps'
import ComponentSidebar from './ComponentSidebar'

const topRowStyle = { margin: '1em' }

class ComponentDoc extends Component {
static childContextTypes = {
onPassed: PropTypes.func,
}

static propTypes = {
_meta: PropTypes.object,
history: PropTypes.object.isRequired,
}

state = {}

getChildContext() {
return {
onPassed: this.handleExamplePassed,
}
}

componentWillReceiveProps() {
this.setState({ activePath: undefined })
}

handleExamplePassed = (e, { examplePath }) => this.setState({ activePath: examplePath })

handleExamplesRef = examplesRef => this.setState({ examplesRef })

handleSidebarItemClick = (e, { path }) => {
const { history } = this.props
const aPath = _.kebabCase(_.last(path.split('/')))

history.replace(`${location.pathname}#${aPath}`)
scrollToAnchor()
}

render() {
const { _meta } = this.props
const { activePath, examplesRef } = this.state

return (
<DocumentTitle title={`${_meta.name} | Semantic UI React`}>
<Grid>
<Grid.Row columns='equal' style={topRowStyle}>
<Grid.Column>
<ComponentDocHeader componentName={_meta.name} />
<ComponentDocSee componentName={_meta.name} />
<ComponentDocLinks componentName={_meta.parent || _meta.name} type={_meta.type} />
<ComponentProps componentName={_meta.name} />
</Grid.Column>
<Grid.Column computer={5} largeScreen={4} widescreen={4} />
</Grid.Row>

<Grid.Row columns='equal'>
<Grid.Column>
<div ref={this.handleExamplesRef}>
<ComponentExamples componentName={_meta.name} />
</div>
</Grid.Column>
<Grid.Column computer={5} largeScreen={4} widescreen={4}>
<ComponentSidebar
activePath={activePath}
componentName={_meta.parent || _meta.name}
examplesRef={examplesRef}
onItemClick={this.handleSidebarItemClick}
/>
</Grid.Column>
</Grid.Row>
</Grid>
</DocumentTitle>
)
}
const ComponentDoc = ({ componentGroup, componentName, description, ghLink, path, seeItems, suiLink }) => (
<DocumentTitle title={`${componentName} | Semantic UI React`}>
<div>
<Grid padded columns='1'>
<Grid.Column>
<ComponentDocHeader componentName={componentName} description={description} />
<ComponentDocSee items={seeItems} />
<ComponentDocLinks
componentName={componentName}
ghLink={ghLink}
path={path}
suiLink={suiLink}
/>
<ComponentProps componentGroup={componentGroup} componentName={componentName} />
</Grid.Column>
</Grid>

<ComponentExamples componentName={componentName} />
</div>
</DocumentTitle>
)

ComponentDoc.propTypes = {
componentGroup: PropTypes.arrayOf(
PropTypes.shape({
description: PropTypes.string,
props: PropTypes.object,
}),
),
componentName: PropTypes.string.isRequired,
description: PropTypes.string,
ghLink: PropTypes.string.isRequired,
path: PropTypes.string.isRequired,
seeItems: PropTypes.arrayOf(
PropTypes.shape({
description: PropTypes.string,
name: PropTypes.string,
type: PropTypes.string,
}),
).isRequired,
suiLink: PropTypes.string,
}

export default withRouter(ComponentDoc)
export default withDocInfo(ComponentDoc)
8 changes: 4 additions & 4 deletions docs/app/Components/ComponentDoc/ComponentDocHeader.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,21 @@ import React from 'react'
import { Header } from 'semantic-ui-react'

import { pure } from 'docs/app/HOC'
import { getDocDescription } from 'docs/app/utils'

const headerStyle = { marginBottom: '0.25em' }

const ComponentDocHeader = ({ componentName }) => (
const ComponentDocHeader = ({ componentName, description }) => (
<Header
as='h1'
content={componentName}
style={headerStyle}
subheader={getDocDescription(componentName)}
subheader={description}
/>
)

ComponentDocHeader.propTypes = {
componentName: PropTypes.string,
componentName: PropTypes.string.isRequired,
description: PropTypes.string,
}

export default pure(ComponentDocHeader)
Loading

0 comments on commit d2f3d47

Please sign in to comment.