You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The purpose of this project is to enable the community to build and publish customized components for [reactstrap](https://github.com/reactstrap/reactstrap).
3
+
Build, Document, Release & Publish React Components for [reactstrap](https://github.com/reactstrap/reactstrap) with this [Component Template](https://github.com/reactstrap/component-template).
4
4
5
5
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
To start using the example npm module `component-template`, check out the [documentation](https://reactstrap.github.io/component-template/).
10
+
11
+
## Developing with Component Template
12
+
13
+
Looking to build your own components? Fork this repo and proceed with the following documentation.
14
+
7
15
### Getting started
8
16
9
17
To begin, install dependencies with
@@ -18,4 +26,69 @@ To run a local server with `create-react-app`, run:
18
26
npm start
19
27
```
20
28
21
-
A new browser window should open up with the following url: [http://localhost:3000])(http://localhost:3000)
29
+
A new browser window should open up with the following url: [http://localhost:3000](http://localhost:3000)
30
+
31
+
### Testing components
32
+
33
+
Testing is provided via [create-react-app](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#testing-components) which includes the [jest](https://facebook.github.io/jest/) test runner. [Enzyme](http://airbnb.io/enzyme/) is also added to enable better integration testing of components via [mount](http://airbnb.io/enzyme/docs/api/mount.html).
34
+
35
+
Execute the following command to run tests. Read more about that [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#command-line-interface).
36
+
37
+
```sh
38
+
npm run test
39
+
```
40
+
41
+
To also see test coverage when running tests, execute the following command:
42
+
43
+
```sh
44
+
npm test -- --coverage
45
+
```
46
+
47
+
### Adding your own components
48
+
49
+
Currently the example component shipped in this project is `HelloWorld`. To add your own components, replace HelloWorld with your own named component and tests.
50
+
51
+
Notes:
52
+
53
+
- Component source code should live in `/src/components`
54
+
- Be sure to export your components here `/src/components/index.js`
55
+
- When published to npm, the `main` script in package.json will be available at `lib/index.js` thanks to the `prebuild` task
56
+
- Use
57
+
58
+
### Release Flow
59
+
60
+
Included in this project are a few scripts to help document, release and publish a react component. Before proceeding, make sure the `name`, `version`, `description`, and `repository` in `package.json` are updated to properly define your own component.
61
+
62
+
Once your components are added and tested, use the following steps to release to npm.
63
+
64
+
## Create Release branch
65
+
66
+
First, run the `create-release-branch` script locally, which takes 1 argument, the release version. The release version can be a specific semantic version or it accepts `patch`, `minor`, `major` to automatically increment the current release version. After the script is run, a branch will be pushed to the repo.
67
+
68
+
```sh
69
+
# RELEASE_VERSION: "1.0.0", patch, minor, major
70
+
RELEASE_VERSION=0.2.0
71
+
npm run create-release-branch -- $RELEASE_VERSION
72
+
```
73
+
74
+
With the branch pushed to github, you can now manually create the pr.
75
+
76
+
## Publish Docs
77
+
78
+
First, update the npm task `gh-pages`, to set the proper `REACT_APP_GH_PAGES_PATH` for your project. Ex: `https://reactstrap.github.io/component-template` project would be `component-template`. No need for the trailing or leading slash.
79
+
80
+
Follow the next sections to publish locally or via Travis CI.
81
+
82
+
### Without CI
83
+
84
+
With the `REACT_APP_GH_PAGES_PATH` path updated, run the `deploy-docs` script to compile the production version of your docs and push those changes to the `gh-pages` branch of your repo.
85
+
86
+
### via Travis CI
87
+
88
+
Coming soon
89
+
90
+
## Publish Release
91
+
92
+
First, be sure to [signup for npm](https://docs.npmjs.com/getting-started/publishing-npm-packages#creating-a-user) if you haven't or run `npm login` with your existing credentials.
93
+
94
+
Next, run the `publish-release` task which will pull the latest changes, compile the components, tag the current commit as the `version` in `packge.json`. push the tags to github and finally will run `npm publish`. Check the [publish-release](/scripts/publish-release) script for more info.
0 commit comments