casesandberg / casesandberg/react-color

3.0.0

Open
#575 4 comments 17 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.3k
Forks
920
PR merge metrics
No merged PRs in 30d

Description

# Things to complete for 3.0.0 release

Previous tracking issues to incorperate: https://github.com/casesandberg/react-color/milestone/1

Goals:
* Keep package sizes small (track this in a github action)
* Have an individual package for each picker (we have @color-picker on npm)
* Everything is typed with Flow (track coverage in a github action)(ci)
* All core components:
* Can be used within a common storybook
* Have unit and integration tests (ci)
* All pickers
* Have snapshot tests (ci)
* Have cross-browser testing and / or Percy (ci)
* Automate releases — Deploy docs site + publish all pickers to npm when there is a new tag pushed to master. (use github actions)

### Core Components
- [x] **Checkerboard**
- [ ] **DraggableRegion**
- [x] DraggableRegionRectangle
- [ ] DraggableRegionSphere — Same as rectangle but make it a corrdinate plane?
- [ ] **Gradient**
- [x] VerticalGradient
- [x] HorizontalGradient
- [ ] RadialGradient — To work inside DraggableRegionSphere
- [ ] **Input** — (used to be named EditableInput)
- [x] NumberInput
- [x] UnitInvervalInput
- [ ] HexInput (Needs some work) There is currently some validation in here for this but it needs to be more robust. See issues in current repo about support needed for varios hexes of various lengths
- [ ] **Swatch** — Connected component that knows when its hovered or if it matches the current active color in the store. Think of this like the component in `react-router`. It should be styleless.
- [ ] **ColorPickerStore** — Outermost component that proves render props to pass down values and onChange handler. Has a prop that is an array of values that it wants ['hex'] otherwise it will transform all values supported and pass them down (helps save on computation). Stores the lab value in state and uses `chroma-js` to transform values up and down (its only 17kB!). Calls onChange and onEveryChange (which is a change from the old onChange and onChangeComplete).
- [ ] **Region**
- [x] HueRegion — (used to be named Hue)
- [x] AlphaRegion — (used to be named Alpha)
- [ ] SaturationRegion
- [x] LightnessSaturationRegion — (used to be named Saturation)
- [ ] SphereicalLightnessSaturationRegion

### Pickers to rewire
- [ ] Chrome
- [ ] Sketch
- [ ] Block
- [ ] Github
- [ ] Hue — (Wrapps basic core component)
- [ ] Alpha — (Wrapps basic core component)
- [ ] Twitter
- [ ] Circle — Show example of looking like [design ref](https://dribbble.com/shots/5628123-Color-Picker)
- [ ] Slider
- [ ] Swatches
- [ ] Material
- [ ] Compact

### New Pickers
- [ ] Saturation — (Wrapps basic core component)
- [ ] Atom — [design ref](https://github.com/casesandberg/react-color/issues/480)
- [ ] Figma — [design ref](https://help.figma.com/article/190-color-picker)
- [ ] Google — [design ref](https://github.com/casesandberg/react-color/issues/481)
- [ ] React Dev Tools
- [ ] Simple / System — mix of [design ref](https://dribbble.com/shots/2857436-Mac-OS-styled-color-picker) and [design ref](https://dribbble.com/shots/3516077-Color-Picker-UI)
- [ ] Circular Picker — polished version of [design ref](https://dribbble.com/shots/5622228-DailyUI-060-Color-Picker)
- [ ] Circular Picker 2

### Removed Pickers
- [ ] Photoshop — this was a launch gimmick to stir up interest in the project, I do not think its reasonable to support it anymore and it is almost never used by consumers.

### TODO
- [ ] Passing custom styles down to components (adding classNames and\or allow passing in an object)
- [ ] Passing custom components down to pickers
- [ ] Adding aria and other accessibility support
- [ ] Update Documentation
- [ ] Migrate docs site to use Gatsby

### Release plan
For 3.0.0 all of the pickers will be imported directly into `react-color` and there will be a dev warning thrown directing them to update to the new individual color pickers. We will deprecate the `react-color` namespace in the next major version.
- [ ] Release alpha of react-color importing new libs to have people test
- [ ] Reach out to people who originally wrote articles on the first one
- [ ] Write an article "Anatomy of a Color Picker"
- [ ] Release Flow and TS libdefs

Contributor guide

Open the contributing guide

Research direction

Start with the previous tracking issues in milestone 1 and review the unchecked Core Components, Pickers, TODO, and Release plan sections. There is no single file or test entry point identified; completion would require addressing the listed component, testing, packaging, documentation, and release goals for 3.0.0.

Written by the indexing model from the issue text.

Assessment

Tech stack
github-actions, javascript, react
Domain
accessibility, ci-cd, documentation, frontend, release, testing
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
18/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.