Skip to content

Commit 52fdf7e

Browse files
natterstefannatterstefan
committed
initial commit
0 parents  commit 52fdf7e

22 files changed

+10343
-0
lines changed

‎.eslintrc.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
extends: 'eslint-config-ns',
3+
rules: {
4+
'react/prop-types': 0,
5+
},
6+
}

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.DS_Store
2+
dist
3+
node_modules
4+
*.log
5+
tmp

‎.nvmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v10.14

‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package.json

‎.prettierrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"printWidth": 80,
3+
"semi": false,
4+
"singleQuote": true,
5+
"trailingComma": "all"
6+
}

‎.storybook/addons.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import 'storybook-readme/register'
2+
import '@storybook/addon-actions/register'
3+
import '@storybook/addon-knobs/register'
4+
import '@storybook/addon-viewport/register'
5+
import 'storybook-addon-jsx/register'
6+
import '@storybook/addon-storysource/register'
7+
import '@storybook/addon-backgrounds/register'
8+
import '@storybook/addon-options/register'

‎.storybook/config.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { addDecorator, configure, setAddon } from '@storybook/react'
2+
import { withOptions } from '@storybook/addon-options'
3+
import { configureViewport, INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
4+
import { withBackgrounds } from '@storybook/addon-backgrounds'
5+
import JSXAddon from 'storybook-addon-jsx'
6+
import '@storybook/addon-console'
7+
8+
const req = require.context('../packages/storybook', true, /\.stories\.js$/)
9+
10+
function loadStories() {
11+
req.keys().forEach(filename => req(filename))
12+
}
13+
14+
addDecorator(
15+
withOptions({
16+
name: 'Storybook',
17+
url: 'https://natterstefan.me',
18+
goFullScreen: false,
19+
showLeftPanel: true,
20+
showDownPanel: true,
21+
showSearchBox: false,
22+
downPanelInRight: true,
23+
sortStoriesByKind: true,
24+
}),
25+
)
26+
27+
configureViewport({
28+
viewports: {
29+
...INITIAL_VIEWPORTS,
30+
},
31+
})
32+
33+
addDecorator(
34+
withBackgrounds([
35+
{ name: 'gray', value: '#efefef' },
36+
{ name: 'white', value: '#fff', default: true },
37+
]),
38+
)
39+
40+
setAddon(JSXAddon)
41+
42+
configure(loadStories, module)

‎.storybook/webpack.config.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* Docs
3+
* - https://github.com/storybooks/storybook/tree/master/addons/storysource#getting-started
4+
*/
5+
module.exports = function(baseConfig, env, defaultConfig) {
6+
defaultConfig.module.rules.push({
7+
test: /\.stories\.jsx?$/,
8+
loaders: [require.resolve('@storybook/addon-storysource/loader')],
9+
enforce: 'pre',
10+
})
11+
12+
return defaultConfig
13+
}

‎CHANGES.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# React-Component-Library-Lerna Changelog
2+
3+
All notable changes to this project will be documented here. The format is based
4+
on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project
5+
adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
6+
7+
## Unreleased
8+
9+
- Initial project setup

‎LICENCE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 Stefan Natter
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# React Component Library with Lerna
2+
3+
Build your own React component library managed with lerna and presented with
4+
storybook.
5+
6+
## Getting started
7+
8+
```bash
9+
yarn i # also works with npm
10+
yarn run bootstrap
11+
yarn start
12+
```
13+
14+
Then you can open storybook at [http://localhost:9001](http://localhost:9001).
15+
16+
## Licence
17+
18+
[MIT](LICENCE)
19+
20+
## Maintainers
21+
22+
<table>
23+
<tbody>
24+
<tr>
25+
<td align="center">
26+
<a href="https://github.com/natterstefan">
27+
<img width="150" height="150" src="https://github.com/natterstefan.png?v=3&s=150">
28+
</br>
29+
Stefan Natter
30+
</a>
31+
<div>
32+
<a href="https://twitter.com/natterstefan">
33+
<img src="https://img.shields.io/twitter/follow/natterstefan.svg?style=social&label=Follow" />
34+
</a>
35+
</div>
36+
</td>
37+
</tr>
38+
<tbody>
39+
</table>

‎lerna.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"npmClient": "yarn",
3+
"packages": ["packages/*"],
4+
"useWorkspaces": true,
5+
"version": "independent"
6+
}

‎package.json

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{
2+
"name": "react-component-library-lerna",
3+
"version": "0.0.1",
4+
"description": "Example setup of a react-component library managed with lerna",
5+
"private": true,
6+
"scripts": {
7+
"bootstrap": "lerna bootstrap",
8+
"clean": "lerna clean",
9+
"lint": "lerna run lint --stream --parallel",
10+
"start": "start-storybook -p 9001 -c .storybook --ci",
11+
"test": "echo \"Error: no test specified\" && exit 1"
12+
},
13+
"husky": {
14+
"hooks": {
15+
"pre-commit": "lint-staged"
16+
}
17+
},
18+
"lint-staged": {
19+
"*.js": [
20+
"prettier --write",
21+
"git update-index --again"
22+
]
23+
},
24+
"repository": {
25+
"type": "git",
26+
"url": "git+https://github.com/natterstefan/react-component-library-lerna.git"
27+
},
28+
"workspaces": {
29+
"packages": [
30+
"packages/*"
31+
],
32+
"nohoist": [
33+
"**/react-*",
34+
"**/react-*/**"
35+
]
36+
},
37+
"keywords": [
38+
"lerna"
39+
],
40+
"author": "Stefan Natter",
41+
"license": "MIT",
42+
"bugs": {
43+
"url": "https://github.com/natterstefan/react-component-library-lerna/issues"
44+
},
45+
"homepage": "https://github.com/natterstefan/react-component-library-lerna#readme",
46+
"devDependencies": {
47+
"@babel/core": "^7.2.2",
48+
"@storybook/addon-actions": "^4.1.11",
49+
"@storybook/addon-backgrounds": "^4.1.11",
50+
"@storybook/addon-console": "^1.1.0",
51+
"@storybook/addon-knobs": "^4.1.11",
52+
"@storybook/addon-options": "^4.1.11",
53+
"@storybook/addon-storysource": "^4.1.11",
54+
"@storybook/addon-viewport": "^4.1.11",
55+
"@storybook/react": "^4.1.11",
56+
"babel-eslint": "^10.0.1",
57+
"babel-loader": "^8.0.5",
58+
"eslint": "^5.13.0",
59+
"eslint-config-ns": "^0.2.0",
60+
"eslint-plugin-import": "^2.16.0",
61+
"eslint-plugin-jest": "^22.2.2",
62+
"eslint-plugin-jsx-a11y": "^6.2.0",
63+
"eslint-plugin-prettier": "^3.0.1",
64+
"eslint-plugin-react": "^7.12.4",
65+
"husky": "^1.3.1",
66+
"lerna": "^3.10.7",
67+
"lint-staged": "^8.1.3",
68+
"prettier": "^1.16.3",
69+
"storybook-addon-jsx": "^6.0.0",
70+
"storybook-readme": "^4.0.5"
71+
},
72+
"dependencies": {
73+
"react": "^16.7.0",
74+
"react-dom": "^16.7.0"
75+
}
76+
}

‎packages/button/.babelrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"presets": [
3+
"@babel/preset-env",
4+
"@babel/preset-react"
5+
],
6+
}

‎packages/button/.eslintrc.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const rules = require('../../.eslintrc.js')
2+
3+
module.exports = rules

‎packages/button/.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.DS_Store
2+
dist
3+
node_modules
4+
*.log
5+
tmp

‎packages/button/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Button
2+
3+
Simple button component.

‎packages/button/package.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "@natterstefan/ns-button-js",
3+
"version": "0.1.0",
4+
"description": "Example button component",
5+
"main": "./dist/index.js",
6+
"files": ["dist"],
7+
"private": true,
8+
"scripts": {
9+
"build": "babel src --ignore */*.test.js,**/*.test.js,*/*.stories.js,**/stories.js --out-dir dist",
10+
"lint": "eslint src",
11+
"test": "echo \"Error: no test specified\" && exit 1"
12+
},
13+
"publishConfig": {
14+
"registry": "http://localhost:4873/"
15+
},
16+
"author": "Stefan Natter",
17+
"license": "MIT",
18+
"dependencies": {
19+
"@babel/cli": "^7.2.3",
20+
"@babel/core": "^7.2.2",
21+
"@babel/preset-env": "^7.3.1",
22+
"@babel/preset-react": "^7.0.0",
23+
"babel-core": "^7.0.0-bridge.0",
24+
"react": "^16.7.0"
25+
}
26+
}

‎packages/button/src/index.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react'
2+
3+
export default props => (
4+
<button onClick={props.onClick}>{props.children}</button>
5+
)

‎packages/storybook/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Storybook
2+
3+
Add stories for each individiual component here in this package.

‎packages/storybook/button/index.stories.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react'
2+
import { storiesOf } from '@storybook/react'
3+
import { action } from '@storybook/addon-actions'
4+
import { withKnobs, text } from '@storybook/addon-knobs'
5+
import { withReadme } from 'storybook-readme'
6+
7+
import Button from '../../button/src'
8+
import ButtonReadme from '../../button/README.md'
9+
10+
// the only reason onClick was written like this, and not just
11+
// `onClick = action('clicked')` is due to a cleaner export in the JSX tab
12+
const onClick = e => {
13+
action('clicked')(e)
14+
}
15+
16+
storiesOf('Button', module)
17+
.addDecorator(withKnobs)
18+
.addDecorator(withReadme(ButtonReadme))
19+
.addWithJSX('with text', () => (
20+
<Button onClick={onClick}>Hello Button</Button>
21+
))
22+
.addWithJSX('with a dynamic text', () => {
23+
const buttonText = text('text', 'Click me')
24+
return <Button onClick={onClick}>{buttonText}</Button>
25+
})

0 commit comments

Comments
 (0)