Readme is not wip (#38)

mikbry · web-flow · commit b2318636ab2c · 2020-04-02T13:24:48.000+02:00
* chore: update Readme

* fix: hsvgradient mouse position
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
@@ -0,0 +1,46 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at mik@miklabs.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,92 @@
+Contributing Guidelines
+=======================
+
+First of all, **thank you** for contributing, **you are awesome**!
+
+Before starting, you should read, agree to, and follow these three things:
+
+* [How to contribute?](#how-to-contribute)
+* [Pull Request Guidelines](#pull-request-guidelines)
+* [Code of Conduct](CODE_OF_CONDUCT.md)
+
+---
+
+## How to contribute?
+
+### Report Bugs
+
+Report bugs at: https://github.com/mikbry/material-ui-color-components/issues/new.
+
+When reporting a bug, please include:
+
+* Any details about your local setup which might be helpful in troubleshooting
+* Detailed steps to reproduce the bug. Where possible, please write a test case
+
+If you are not able to do that, that's fine! Open an issue anyway and let us
+know as much information as you can. We will get back to you to determine the
+problem, and (hopefully) fix it.
+
+### Fix Bugs
+
+Check out the [open bugs](https://github.com/mikbry/material-ui-color-components/issues) - anything
+tagged with the **[easy pick]** label could be a good choice for newcomers (and
+we are willing to help you).
+
+We have two kind of bugs: **[critical]** and **[bug]**. We tend to fix critical
+bugs as soon as possible. Feel free to come up with a patch before we do though!
+
+### Implement Features
+
+Look through the GitHub issues for features. Anything tagged with
+**[enhancement]** or **[feature]** is open to whoever wants to implement it.
+
+If the issue is unclear or you are not sure what is expected, ask for more
+information by commenting on the issue.
+
+### Submit Feedback
+
+Any issue with the **[question]** label is open for feedback, so feel free to
+share your thoughts with us!
+
+The best way to send feedback is to [create a new
+issue](https://github.com/mikbry/material-ui-color-components/issues/new) on GitHub.
+
+If you are proposing a feature:
+
+* Explain how you envision it working. Try to be as detailed as you can
+* Try to keep the scope as narrow as possible. This will help make it easier to
+  implement
+* Feel free to include any code you might already have, even if it is
+  just a rough idea. This is a volunteer-driven project, and contributions are
+  welcome :)
+
+Your issue will be flagged as **[feature request]** first, and if we agree on
+it, we will label it as **[feature]**, meaning it has been accepted and the
+feature will eventually be added to the project.
+
+## Pull Request Guidelines
+
+Here are a few rules to follow in order to make code reviews and discussions go
+more smoothly before maintainers accept and merge your work:
+
+* you MUST run the test suite
+* you MUST write (or update) unit tests
+* you SHOULD write documentation
+
+Please, write [commit messages that make
+sense](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html),
+and [rebase your branch](http://git-scm.com/book/en/Git-Branching-Rebasing)
+before submitting your Pull Request.
+
+You may be asked to [squash your
+commits](http://gitready.com/advanced/2009/02/10/squashing-commits-with-rebase.html)
+too. This is to "clean" your Pull Request before merging it (we don't want
+commits such as `fix tests`, `fix 2`, `fix 3`, etc.).
+
+Also, while creating your Pull Request on GitHub, you MUST write a description
+which gives the context and/or explains why you are creating it.
+
+For further information about creating a Pull Request, please read [this blog
+post](http://williamdurand.fr/2013/11/20/on-creating-pull-requests/).
+
+Thank you!
diff --git a/README.md b/README.md
@@ -4,60 +4,170 @@
 [![codecov][codecov-image]][codecov-url]
 [![NPM version][npm-image]][npm-url]
 [![License][license-image]][license-url]
+[![minisize][min-image]][min-url]
 
 [action-image]: https://github.com/mikbry/material-ui-color-components/workflows/Build%20and%20Deploy/badge.svg
 [action-url]: https://mikbry.github.io/material-ui-color-components/
 [codecov-image]: https://codecov.io/gh/mikbry/material-ui-color-components/branch/master/graph/badge.svg?token=K4P0vnM5fh
 [codecov-url]: https://codecov.io/gh/mikbry/material-ui-color-components
 [npm-image]: https://img.shields.io/npm/v/material-ui-color-components.svg
 [npm-url]: https://npmjs.org/package/material-ui-color-components
-[license-image]: https://img.shields.io/npm/l/amaterial-ui-color-components.svg
-[License-url]:./LICENSE
+[license-image]: https://img.shields.io/github/license/mikbry/material-ui-color-components
+[License-url]:https://github.com/mikbry/material-ui-color-components/blob/master/LICENSE
+[min-image]:https://badgen.net/bundlephobia/min/material-ui-color-components
+[min-url]:https://bundlephobia.com/result?p=material-ui-color-components
 
-> **[Prerelease, not ready for production]** Collections of color components for `material-ui` components for React Material-UI. Highly customizable and theming support !
+> Collections of color components for `material-ui`. No dependencies, small, highly customizable and theming support !
 
 ![Storybook](./images/wip.png)
 
+## Why another ColorPicker ?
+
+- Fully compatible with Material-UI : theming and low level components
+- Styled with `styled-components`
+- Highly customizable ColorPicker : gradient picker, palette, input format, deferred mode
+-  Small in size (<30kb) without any extra dependencies
+- Use modern React hook and coding conventions
+- Documentation made with Storybook, using Component Story Format and MDX
+
+## Documentation
+
+Full documentation is available here :
+
 https://mikbry.github.io/material-ui-color-components/
 
-## Why ?
 
-- Fully compatible with Material-UI : Theming and low level components
-- Highly customizable ColorPicker : gradient picker, palette, input format, deferred mode
--  Small in size without extra dependencies
-- Use modern hooks and coding conventions
+## Requirements
+- Works on modern browsers supporting ES6+ (Not compatible with IE)
+- Latest React, Styled-Component and Material-UI frameworks
 
 ## Install
 
-`yarn add material-ui-color-components`
+```bash
+yarn add material-ui-color-components
+```
+
+Or using npm
+```bash
+npm add material-ui-color-components
+```
+
+## Usage
+
+you need to have in your dependencies:
+
+```
+    "@material-ui/core": "^4.9.5",
+    "material-ui-popup-state": "^1.5.3",
+    "prop-types": "15.7.2",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "styled-components": "^5.0.1"
+```
+
+`material-ui-color-components` bring 5 components.
+
+### `<ColorPicker/>`
+
+A popover component to display a color tool box (use `ColorBox`)
+```javascript
+import { ColorPicker } from 'material-ui-color-components';
+
+export const Container = () => (
+  <div>
+    <ColorPicker defaultValue="transparent"/>
+  </div>
+);
+```
+
+At first it display a button + an input
+
+[ColorPicker documentation](https://mikbry.github.io/material-ui-color-components/?path=/story/components-colorpicker--basic)
+
+### `<ColorBox />`
+
+A component to display a color tool box
+```javascript
+import { ColorBox } from 'material-ui-color-components';
+
+export const Container = () => (
+  <div>
+    <ColorBox defaultValue="transparent"/>
+  </div>
+);
+```
+
+[ColorBox documentation](https://mikbry.github.io/material-ui-color-components/?path=/story/components-colorbox--basic)
+
+### `<ColorInput />`
+
+An input component to display/edit color values in different format (plain, hex, rgb, hsl, hsv).
+
+```javascript
+import { ColorInput } from 'material-ui-color-components';
+
+export const Container = () => (
+  <div>
+    <ColorInput defaultValue="red"/>
+  </div>
+);
+```
+
+[ColorInput documentation](https://mikbry.github.io/material-ui-color-components/?path=/story/components-colorinput--basic)
+
+### `<ColorPalette />`
+
+A component to display a grid of color buckets.
+
+```javascript
+import { ColorPalette } from 'material-ui-color-components';
 
+const palette = {
+  red: '#ff0000',
+  blue: '#0000ff',
+  green: '#00ff00',
+  yellow: 'yellow',
+  cyan: 'cyan',
+  lime: 'lime',
+  gray: 'gray',
+  orange: 'orange',
+  purple: 'purple',
+  black: 'black',
+  white: 'white',
+  pink: 'pink',
+  darkBlue: 'darkBlue',
+};
 
+export const Container = () => (
+  <div>
+    <ColorPalette palette={palette} />
+  </div>
+);
+```
 
-## `<ColorPicker/>`
+[ColorPalette documentation](https://mikbry.github.io/material-ui-color-components/?path=/story/components-colorpalette--basic)
 
-TODO : doc
+### `<ColorButton />`
 
-## `<ColorBox />`
+Displays a button filled with a color
 
-TODO : doc
+```javascript
+import { ColorButton } from 'material-ui-color-components';
 
-## `<ColorInput />`
+export const Container = () => (
+  <div>
+    <ColorButton red="red"/>
+  </div>
+);
+```
 
-TODO : doc
+[ColorButton documentation](https://mikbry.github.io/material-ui-color-components/?path=/story/components-colorbutton--basic)
 
-## `<ColorPalette />`
+## Contribute
 
-TODO : doc
+Contributions welcome! Read the [contribution guidelines](CONTRIBUTING.md) first.
 
-## `<ColorButton />`
 
-TODO : doc
+## License
 
-## WIP
-TODO list
-- [x] init project
-- [x] create simple color picker
-- [x] create color tools/helpers
-- [x] publish
-- [ ] finish tests / coverage
-- [ ] documentation
+Released under MIT License
diff --git a/package.json b/package.json
@@ -92,7 +92,8 @@
     },
     "coverageReporters": [
       "text",
-      "html"
+      "html",
+      "lcov"
     ],
     "moduleFileExtensions": [
       "js",
diff --git a/src/components/ColorBox/HSVGradient.jsx b/src/components/ColorBox/HSVGradient.jsx
@@ -107,9 +107,9 @@ const HSVGradient = ({ className, color, onChange, ...props }) => {
   }
 
   const convertMousePosition = (event, ref) => {
-    const { clientX, clientY } = event;
-    const { offsetLeft, offsetTop } = ref.offsetParent;
-    const pos = { x: clientX - offsetLeft - 6, y: clientY - offsetTop - 6 };
+    const { pageX, pageY } = event;
+    const bounds = ref.getBoundingClientRect();
+    const pos = { x: pageX - bounds.left, y: pageY - bounds.top };
     if (pos.x < 0) {
       pos.x = 0;
     }
diff --git a/src/components/ColorBox/index.jsx b/src/components/ColorBox/index.jsx
@@ -29,7 +29,7 @@ const useStyles = () =>
   makeStyles(theme => ({
     root: {
       backgroundColor: theme.palette.background.paper,
-      position: 'absolute',
+      position: 'relative',
       width: 'min-content',
       height: 'min-content',
       padding: '0px',
diff --git a/stories/ColorPicker.stories.js b/stories/ColorPicker.stories.js
@@ -28,11 +28,7 @@ export default {
 
 const style = { margin: '48px' };
 
-export const Basic = () => (
-  <div style={style}>
-    <ColorPicker defaultValue="#000" />
-  </div>
-);
+export const Basic = () => <ColorPicker defaultValue="#000" />;
 Basic.story = {
   parameters: { defaultValue: '#000' },
 };
diff --git a/stories/intro.stories.mdx b/stories/intro.stories.mdx
diff --git a/test/ColorBox.test.js b/test/ColorBox.test.js

Original file line number	Diff line number	Diff line change
`@@ -107,9 +107,9 @@ const HSVGradient = ({ className, color, onChange, ...props }) => {`
`107`	`107`	`}`
`108`	`108`
`109`	`109`	`const convertMousePosition = (event, ref) => {`
`110`		`- const { clientX, clientY } = event;`
`111`		`- const { offsetLeft, offsetTop } = ref.offsetParent;`
`112`		`- const pos = { x: clientX - offsetLeft - 6, y: clientY - offsetTop - 6 };`
	`110`	`+ const { pageX, pageY } = event;`
	`111`	`+ const bounds = ref.getBoundingClientRect();`
	`112`	`+ const pos = { x: pageX - bounds.left, y: pageY - bounds.top };`
`113`	`113`	`if (pos.x < 0) {`
`114`	`114`	`pos.x = 0;`
`115`	`115`	`}`