Skip to content

Commit daab1de

Browse files
author
Daniel Mittelman
committed
Initial commit
0 parents  commit daab1de

File tree

148 files changed

+33351
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

148 files changed

+33351
-0
lines changed

Diff for: ‎CNAME

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
https://style.monday.beer

Diff for: ‎CONTRIBUTING.md

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
#Contribution guidelines
2+
This is an **official library** of shared UI components for Monday builders. It is used both for internal and external Monday apps development.
3+
4+
This library is open-sourced, and we encourage everyone to use and contribute into it.
5+
6+
## How to contribute
7+
1. Create a fork of this repository
8+
2. Install dependencies with `npm install` command
9+
3. Sync from upstream if needed
10+
4. Run Storybook environment locally with `npm run storybook` command
11+
5. Commit to your local fork using [Semantic Commit Messages](https://seesparkbox.com/foundry/semantic_commit_messages)
12+
6. Create a PR with title based using [Semantic Commit Messages](https://seesparkbox.com/foundry/semantic_commit_messages)
13+
For example: `feat: add new TextArea component`
14+
7. Go over the [checklist](PULL_REQUEST_TEMPLATE.md) in the PR and make sure that all checks are passed
15+
8. Wait for the Design and Code review
16+
9. Enjoy your change after merge!
17+
18+
19+
##Information about the project
20+
## Plop
21+
Every new component in this repository should be created using [plops](https://plopjs.com/) with `npm run plop` command.
22+
Plop will automatically generate all required files for your new component. Plop template will always be up to date and by using it, you can be sure that your component will be created with the latest recommended structure.
23+
24+
### Storybook
25+
As the main development environment and documentation playground we are using [Storybook](https://storybook.js.org/).
26+
Each component should be developed in isolation in the Storybook environment.
27+
28+
### Theming
29+
Every component should support theming, you can find more information about it [here](THEME_README.md)
30+
31+
### Tests and coverage
32+
All the guidelines about testing your new component or changes to the existing one you can find [here](TESTING_README.md)
33+
34+
### Linting
35+
TBD
36+
37+
### Components API guidelines
38+
TBD
39+

Diff for: ‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 monday.com LTD
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.

Diff for: ‎PULL_REQUEST_TEMPLATE.md

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
## Go over this checklist before submitting your Pull Request
2+
3+
Description: **ADD YOUR PR DESCRIPTION HERE**
4+
5+
STEP 1: Fulfill the description of the PR above
6+
7+
STEP 2: Select one of 2 main scenarios of adding the new component or editing the existing one
8+
9+
STEP 3: Delete checklist which you don't need
10+
11+
STEP 4: Go over the checklist. All checkboxes should be marked
12+
13+
STEP 5: Delete this instruction
14+
15+
STEP 6: Happy code review and merge!
16+
17+
18+
### Adding new component
19+
#### Basic
20+
- [ ] Used plop (npm run plop) to create a new component. This command will create a folder for your component and will update index.js file
21+
- [ ] PR has description
22+
- [ ] New component is functional and using React Hooks.
23+
- [ ] New React Hooks were added to /src/hooks folder (optional)
24+
- [ ] Component defines PropTypes
25+
- [ ] There is Readme for the component, which explains the main aspects of how to use it
26+
#### Style
27+
- [ ] Styles are added to NewComponent.scss file inside of the NewComponent folder
28+
- [ ] CSS selectors are named using [BEM convention](http://getbem.com/naming/)
29+
- [ ] Design is compatible with [Monday Design System](https://design.monday.com/)
30+
#### Storybook
31+
- [ ] Stories were added to /src/NewComponent/__stories__/NewComponent.stories.js file
32+
- [ ] Stories include sandbox story with knobs for each property
33+
- [ ] Stories include all flows of using the component
34+
- [ ] Component passed Accessibility Plugin checks
35+
#### Tests
36+
- [ ] Tests are compliant with TESTING_README.md instructions
37+
38+
39+
40+
### Updating existing component
41+
#### Basic
42+
- [ ] PR has description
43+
- [ ] Changes to the component are backward compatible (including selectors structure). If not - add to the title of the PR "BREAKABLE_CHANGE""
44+
- [ ] All changes to the component are reflected in the ReadMe
45+
- [ ] If component is old and was not compliant with the latest guidelines - it was fixed (optional)
46+
#### Style
47+
- [ ] CSS selectors are named using [BEM convention](http://getbem.com/naming/)
48+
- [ ] Design is compatible with [Monday Design System](https://design.monday.com/)
49+
#### Storybook
50+
- [ ] All the changes to the component should be reflected in the Storybook.
51+
- [ ] Component passed Accessibility Plugin checks
52+
#### Tests
53+
- [ ] All current tests are passing
54+
- [ ] New functionality is covered with tests
55+
- [ ] Tests are compliant with TESTING_README.md instructions
56+
57+

Diff for: ‎README.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Monday UI React Core
2+
>[monday.com](monday.com) React components library - [Storybook](style.monday.beer)
3+
4+
## Installation
5+
Install the component library
6+
```
7+
$ npm install @mondaydotcomorg/monday-ui-react-core
8+
```
9+
10+
## Usage
11+
You can either ` import { Button } from "@mondaydotcomorg/monday-ui-react-core";`
12+
13+
or you might want to import directly the component ` import Button from "@mondaydotcomorg/monday-ui-react-core/dist/Button";`
14+
15+
## Storybook
16+
We are using storybook in order to develop the components independently from any consumer.
17+
run this to build & run the storybook locally:
18+
```
19+
npm run storybook
20+
```
21+
the storybook will hosted on http://localhost:7007
22+
23+
24+
## Developing locally with your consumer application
25+
When developing locally we are using a npm functionality called npm link, this allows us to
26+
work locally on our package and use it in a different project without publishing.
27+
This functionality basically overrides the npm mapping between package name to its repo, and points it to where the package is located locally.
28+
29+
### Troubleshooting local development
30+
* If you are using NVM, make sure both packages are using the same version.
31+
* Because we are using react hooks and having react as a peerDependency - if you want to develop locally and encounter issues with "invalid hook call" [See this github thread](https://github.com/facebook/react/issues/13991). The quick fix is in your webpack config file alias react to resolve the node_modules path
32+
33+
34+
35+
go to the project's directory and run:
36+
```
37+
nvm use
38+
npm unlink
39+
npm link
40+
npm start
41+
```
42+
43+
## Contributing
44+
We welcome every contributor, please read the [contribution guidelines](CONTRIBUTING.md) before submitting a PR
45+
46+
## Themes
47+
We support theming from the library to the component level using css variables - for more info on theming please read the THEME_README.md file
48+

Diff for: ‎TESTING_README.md

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
# Writing Components Tests
2+
3+
As this library is the base of all monday's ui and future open source library, its components should be very well tested. In order to do so we've chosen the following test stack.
4+
5+
1. Karna as our test runner
6+
2. Mocha as our framework library
7+
3. Sinon as our mocks/stubs library
8+
4. [React testing library](https://testing-library.com/docs/react-testing-library/intro) as our components testing frame work
9+
10+
## React testing library
11+
This library forces us to test according to user behaviour and not implementation details (state keys for example) for example the library allows you to target elements according to text, aria labels, placeholders text and more. This approach ensure us that we test the component in the right way and allows us easier refactoring when needed.
12+
13+
#### Test File
14+
The file should end with `-test.js` and be in the same folder as the component.
15+
16+
### React testing 101
17+
#### Mounting components
18+
In react testing library we "mount" the entire components and the tests are running against a fully rendered tree in order to simulate the most accurate user environment.
19+
In order to render a component you need to import the following
20+
```js
21+
import { render } from "@testing-library/react";
22+
```
23+
in the test -
24+
```js
25+
const component = render(/* Valid JSX */);
26+
```
27+
28+
#### Firing Events
29+
As we said before we want to simulate the user as much as possible, a user is interacting with the browser in event matters - ClickEvent, FocusEvent, KeyDownEvent.....
30+
So in order to do so we will use the `fireEvent` helper method
31+
`import { fireEvent } from "@testing-library/react";`
32+
33+
##### Click Example
34+
```js
35+
fireEvent.click(buttonElement);
36+
```
37+
this will trigger a click event on the button element (and all listeners will fire in turn)
38+
##### Input mutation Example
39+
```js
40+
fireEvent.change(input, { target: { value: "Text to change to" } });
41+
```
42+
This will trigger the `onChange` callback on the input
43+
44+
[supported events list](https://github.com/testing-library/dom-testing-library/blob/master/src/event-map.js)
45+
46+
47+
#### Queries
48+
To allow us query the component to interact with different part of it (for example - click on an icon in a list)
49+
React testing library gives us number of tools to interact with the DOM with an emphasis to do so like the user would do so.
50+
51+
There are number of ways to query they have the same suffix but the prefix will change
52+
##### example
53+
```js
54+
const { queryByPlaceholderText } = render(<InputComponent />);
55+
expect(queryByPlaceholderText("PlaceHolderText")).to.be.ok;
56+
```
57+
In this example we are looking for an element which has a placeholder with the text PlaceHolderText
58+
59+
#### [Queries Prefix](https://testing-library.com/docs/react-testing-library/cheatsheet)
60+
| |No Math |1 Match |1+ Match | Await |
61+
|----------------|----------------|----------------|----------------|----------------|
62+
|getBy | throw |return |throw |no |
63+
|findBy | throw |return |throw |yes |
64+
| queryBy |null | return | throw| no |
65+
| getAllBy | throw | array |array | no |
66+
| findAllBy | throw | array |array |yes |
67+
| queryAllBy | [] | array |array | no |
68+
69+
#### Queries of Suffix
70+
- [`ByLabelText`](https://testing-library.com/docs/dom-testing-library/api-queries#bylabeltext)
71+
- [`ByPlaceholderText`](https://testing-library.com/docs/dom-testing-library/api-queries#byplaceholdertext)
72+
- [`ByText`](https://testing-library.com/docs/dom-testing-library/api-queries#bytext)
73+
- [`ByAltText`](https://testing-library.com/docs/dom-testing-library/api-queries#byalttext)
74+
- [`ByTitle`](https://testing-library.com/docs/dom-testing-library/api-queries#bytitle)
75+
- [`ByDisplayValue`](https://testing-library.com/docs/dom-testing-library/api-queries#bydisplayvalue)
76+
- [`ByRole`](https://testing-library.com/docs/dom-testing-library/api-queries#byrole)
77+
- [`ByTestId`](https://testing-library.com/docs/dom-testing-library/api-queries#bytestid)
78+

Diff for: ‎THEME_README.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Theming
2+
Theming is the ability of our components to change their appearance according to the user's request for example - dark, light theme are pretty common but there are more advanced themes such as two tone and or color blind themes.
3+
4+
### Key Guidelines for supporting themes
5+
1. When styling a component you should be theme agnostic - you should not be aware of the current theme.
6+
2. You should not import colors by their name (snow_white, basic_blue...), you should import colors by their theme name - (primaryHoverColor, primaryTextColor...)
7+
3. Use the `theme-prop` helper mixin to use a theme. (theme-prop is our mixing for supporting ie11)
8+
9+
### How we implemented themes
10+
Our theme mechanism is based on [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), CSS variables are a very powerful tool to create dynamic css variables (it is not supported on ie11 - we have a fallback for it).
11+
We define our initial styling at the body/root element level - doing so we are exposing our css variables (colors) to all child elements. When we want to apply a specific theme we simply add the theme class to a common ancestor (body for example) and all the components should change their appearance.
12+
13+
#### Creating a theme.
14+
We extracted our css variables to a different repo (@mondaydotcomorg/monday-ui-style)
15+
In order to create a new theme you need to override all of the keys (the list of keys can be found in the monday-ui-style repo)
16+
17+
#### Adding a new variable to a theme
18+
Adding a key should be done in the @mondaydotcomorg/monday-ui-style repo
19+
20+
### IE11 support
21+
As IE 11 is at it's final breath we don't want to invest too much time to support it but we do have around 3% usage in ie so in order to do so we will show the default theme when using ie 11. In order to achive that please use the `theme-prop`
22+
23+
### Theme example:
24+
```css
25+
26+
body {
27+
--primary-text-color: var(--color-mud_black);
28+
--positive-color: var(--color-success);
29+
--negative-color: var(--color-error);
30+
--primary-border-color: var(--color-explosive);
31+
--placeholder-color: var(--color-explosive);
32+
--icon-color: var(--color-explosive);
33+
--icon-color-hover: var(--color-blackish);
34+
--primary-active-color: var(--color-basic_blue);
35+
}
36+
37+
.compass-color-blind0theme {
38+
--primary-text-color: white;
39+
--positive-color: green;
40+
--negative-color: red;
41+
--primary-border-color: black;
42+
--placeholder-color: black;
43+
--icon-color: black;
44+
--icon-color-hover: grey;
45+
--primary-active-color: blue;
46+
}
47+
48+
```

0 commit comments

Comments
 (0)