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
Copy file name to clipboardExpand all lines: .github/CONTRIBUTING.md
+113-1Lines changed: 113 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,118 @@ It is highly appreciated that you take the time to help improve 🌲 Evergreen.
4
4
5
5
Please see our [issue template](ISSUE_TEMPLATE.md) for issues specifically.
6
6
7
+
## Contributing to Evergreen
8
+
9
+
### 🍴 Step 1. Fork this repository
10
+
11
+
In order to contribute to Evergreen, you need to fork this repo, and develop on your own local clone.
12
+
13
+
If you don't know how to do so, follow this [guide](https://help.github.com/en/github/getting-started-with-github/fork-a-repo)!
14
+
15
+
### 📖 Step 2. Get storybook up and running
16
+
17
+
First, move into your local cloned repository with the help of `cd`, after that install your `node_modules` with:
18
+
19
+
```
20
+
$ yarn
21
+
```
22
+
23
+
To actually start seeing the components you have to run React Storybook with the command:
24
+
25
+
```
26
+
$ yarn dev
27
+
```
28
+
29
+
Now go to `http://localhost:6006` in your browser.
30
+
31
+
### 🛠 Step 3. Make your change
32
+
33
+
Now you can start developing! All of the components are under the `src` directory and associated code changes will automatically be reflected in StoryBook.
34
+
35
+
If necessary, we encourage you to update the documentation so Evergreen users will be aware of your new features/changes.
36
+
37
+
In order to run the documentation page locally, run these commands in your terminal:
38
+
39
+
```
40
+
$ yarn build
41
+
$ cd docs
42
+
$ yarn install
43
+
$ yarn dev
44
+
```
45
+
46
+
Now you can visit `http://localhost:3000/` in your browser.
47
+
48
+
Documentation code is under the `docs` directory. A big portion of these docs are written in MDX, if you've never used MDX before, check out these [docs](https://mdxjs.com/getting-started).
49
+
50
+
### 🏆 Step 4. Making your pull request
51
+
52
+
Once you're done with making your changes, push everything to your local repository's branch.
53
+
54
+
From here, you can open up a pull request from your forked repository's branch into `segmentio/evergreen`'s `master` branch.
55
+
56
+
In your PR description, explain the changes you made, why you made them, how to test them, and anything that might be a point of interest.
57
+
58
+
Once you create your PR, it will be reviewed and hopefully merged quickly!
59
+
60
+
### 🥂 Step 5. Pat yourself on the back
61
+
62
+
Congrats, you're officially an Evergreen contributor!
63
+
64
+
## 🤓 Scripts explained
65
+
66
+
Inside the `package.json` there are a bunch of scripts that this repo uses
67
+
to run the project in development and to build the project.
68
+
69
+
Below you can read a description of each script.
70
+
71
+
-`yarn dev`: Starts the development React Storybook.
72
+
73
+
-`yarn test`: Lints the JavaScript files using eslint and then runs the unit tests using jest.
74
+
75
+
-`yarn build`: Builds all of the JavaScript files using Babel.
76
+
77
+
-`yarn clean`: removes all untracked files (`git clean -Xdf`).
78
+
79
+
-`yarn release`: Releases new version of Evergreen (requires MFA via npm as a collaborator)
80
+
81
+
-`yarn create-package`: This command scaffolds a package with no specific boilerplate. It's useful for creating utilities.
82
+
83
+
For the following command:
84
+
85
+
```
86
+
yarn create-package utils
87
+
```
88
+
89
+
The following file tree will be generated:
90
+
91
+
```
92
+
/src/utils
93
+
├── /src/
94
+
└── index.js
95
+
```
96
+
97
+
-`yarn create-package:components`: This command scaffolds a package with React component(s) boilerplate.
98
+
99
+
You can pass one or more components to this command.
100
+
101
+
For the following command:
102
+
103
+
```
104
+
yarn create-package:components typography Text Heading
105
+
```
106
+
107
+
The following file tree will be generated:
108
+
109
+
```
110
+
/src/typography
111
+
├── /src/
112
+
| │── Text.js
113
+
| └── Heading.js
114
+
├── /stories/
115
+
│ └── index.stories.js
116
+
└── index.js
117
+
```
118
+
7
119
## Creating new components
8
120
9
121
Preferably we like to introduce new components by following these steps.
@@ -55,4 +167,4 @@ Finally submit a PR with your new feature or component.
@@ -65,122 +65,14 @@ Evergreen supports a robust theming layer out of the box. You can check out [the
65
65
66
66
Evergreen offers easy Server Side Rendering (SSR) and automatic hydration.
67
67
68
-
Evergreen bundles 2 CSS-in-JS solutions, from glamor and ui-box. To make it super easy to do server side rendering and hydration, Evergreen exposes a `extractStyles()` function that will do SSR for both at once.
68
+
Evergreen bundles its own CSS-in-JS solution from [ui-box](https://github.com/segmentio/ui-box). To make it super easy to do server side rendering and hydration, Evergreen exposes a `extractStyles()` function.
69
69
70
70
- How to use it with Next.js in the [ssr-next example app](examples/ssr-next).
71
71
-[How to use it with GatsbyJS](https://github.com/segmentio/evergreen/issues/154)
72
72
73
73
## Contributing to Evergreen
74
74
75
-
### 🍴 Step 1. Fork this repository
76
-
77
-
In order to contribute to Evergreen, you need to fork this repo, and develop on your own local clone.
78
-
79
-
If you don't know how to do so, follow this [guide](https://help.github.com/en/github/getting-started-with-github/fork-a-repo)!
80
-
81
-
### 📖 Step 2. Get storybook up and running
82
-
83
-
First, move into your local cloned repository with the help of `cd`, after that install your `node_modules` with:
84
-
85
-
```
86
-
$ yarn
87
-
```
88
-
89
-
To actually start seeing the components you have to run React Storybook with the command:
90
-
91
-
```
92
-
$ yarn dev
93
-
```
94
-
95
-
Now go to `http://localhost:6006` in your browser.
96
-
97
-
### 🛠 Step 3. Make your change
98
-
99
-
Now you can start developing! All of the components are under the `src` directory and associated code changes will automatically be reflected in StoryBook.
100
-
101
-
If necessary, we encourage you to update the documentation so Evergreen users will be aware of your new features/changes.
102
-
103
-
In order to run the documentation page locally, run these commands in your terminal:
104
-
105
-
```
106
-
$ yarn build
107
-
$ cd docs
108
-
$ yarn install
109
-
$ yarn dev
110
-
```
111
-
112
-
Now you can visit `http://localhost:3000/` in your browser.
113
-
114
-
Documentation code is under the `docs` directory. A big portion of these docs are written in MDX, if you've never used MDX before, check out these [docs](https://mdxjs.com/getting-started).
115
-
116
-
### 🏆 Step 4. Making your pull request
117
-
118
-
Once you're done with making your changes, push everything to your local repository's branch.
119
-
120
-
From here, you can open up a pull request from your forked repository's branch into `segmentio/evergreen`'s `master` branch.
121
-
122
-
In your PR description, explain the changes you made, why you made them, how to test them, and anything that might be a point of interest.
123
-
124
-
Once you create your PR, it will be reviewed and hopefully merged quickly!
125
-
126
-
### 🥂 Step 5. Pat yourself on the back
127
-
128
-
Congrats, you're officially an Evergreen contributor!
129
-
130
-
## 🤓 Scripts explained
131
-
132
-
Inside the `package.json` there are a bunch of scripts that this repo uses
133
-
to run the project in development and to build the project.
134
-
135
-
Below you can read a description of each script.
136
-
137
-
-`yarn dev`: Starts the development React Storybook.
138
-
139
-
-`yarn test`: Lints the JavaScript files using XO and then runs the unit tests using AVA.
140
-
141
-
-`yarn build`: Builds all of the JavaScript files using Babel.
142
-
143
-
-`yarn clean`: removes all untracked files (`git clean -Xdf`).
144
-
145
-
-`yarn release`: Releases new version of Evergreen (requires MFA via npm as a collaborator)
146
-
147
-
-`yarn create-package`: This command scaffolds a package with no specific boilerplate. It's useful for creating utilities.
148
-
149
-
For the following command:
150
-
151
-
```
152
-
yarn create-package utils
153
-
```
154
-
155
-
The following file tree will be generated:
156
-
157
-
```
158
-
/src/utils
159
-
├── /src/
160
-
└── index.js
161
-
```
162
-
163
-
-`yarn create-package:components`: This command scaffolds a package with React component(s) boilerplate.
164
-
165
-
You can pass one or more components to this command.
166
-
167
-
For the following command:
168
-
169
-
```
170
-
yarn create-package:components typography Text Heading
171
-
```
172
-
173
-
The following file tree will be generated:
174
-
175
-
```
176
-
/src/typography
177
-
├── /src/
178
-
| │── Text.js
179
-
| └── Heading.js
180
-
├── /stories/
181
-
│ └── index.stories.js
182
-
└── index.js
183
-
```
75
+
Please see [CONTRIBUTING.md](.github/CONTRIBUTING.md) for more information on how to contribute!
184
76
185
77
## 🎉 Contributors
186
78
@@ -193,6 +85,7 @@ We will add you to the list if you make any meaningful contribution!
193
85
- Colin Lohner
194
86
- Allen Kleiner
195
87
- Chris Chuck
88
+
- Brandon Scott
196
89
- ... many other on the Segment team and open-source contributors
197
90
198
91
This project is maintained by [Segment](https://segment.com/)
0 commit comments