{ onChangeTest = color; }} />);
10 | const ColorPickerComponent = wrapper.find('ColorPicker');
11 |
12 | // Default prop test
13 | t.equal(wrapper.state('currentColor'), '#000', '#000 is a default color');
14 |
15 | // Simulation of onDrag event of third party ColorPicker component
16 | // test state changes and onChange callback calls
17 | ColorPickerComponent.simulate('drag', '#444');
18 | t.equal(wrapper.state('currentColor'), '#444', '#444 is a set as color');
19 | t.equal(onChangeTest, '#444', 'Handles onChange function');
20 |
21 | t.end();
22 | });
23 |
--------------------------------------------------------------------------------
/src/lib/colors/groups.js:
--------------------------------------------------------------------------------
1 | import { Colorizr } from 'lib';
2 |
3 | export function getLuminosityGroup(value) {
4 | const color = new Colorizr(value);
5 |
6 | const luminosity = parseInt(color.luminosity() / 10, 10);
7 | const lightened = [];
8 | const darkened = [];
9 |
10 | for (let ii = 1; ii <= 10 - luminosity; ii++) {
11 | lightened.push(color.clone().lighten(ii * 10).hex());
12 | }
13 |
14 | for (let ii = 1; ii <= luminosity; ii++) {
15 | darkened.push(color.clone().darken(ii * 10).hex());
16 | }
17 |
18 | return darkened.reverse().concat(color.hex()).concat(lightened.slice(1));
19 | }
20 |
21 | export function getMixedGroup(value, mixer) {
22 | const color = new Colorizr(value);
23 | const colorToMix = new Colorizr(mixer);
24 | const mixed = [];
25 |
26 | for (let i = 0; i < 10; i++) {
27 | mixed.push(color.clone().mix(colorToMix, i * 10).hex());
28 | }
29 |
30 | return mixed;
31 | }
32 |
--------------------------------------------------------------------------------
/src/ui/Icon/icons/copy.svg:
--------------------------------------------------------------------------------
1 |
2 |
15 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "extends": ["airbnb", "plugin:flowtype/recommended"],
4 | "plugins": ["flowtype", "flowtype-errors"],
5 | "env": {
6 | "browser": true,
7 | "node": true
8 | },
9 | "rules": {
10 | "flowtype-errors/show-errors": 2,
11 | "linebreak-style": 0,
12 | "import/prefer-default-export": 0,
13 | "consistent-return": 0,
14 | "react/prefer-stateless-function": 0,
15 | "react/sort-comp": 0,
16 | "no-unused-expressions": 0,
17 | "react/forbid-prop-types": 0,
18 | "react/no-danger": 0,
19 | "import/no-extraneous-dependencies": 0,
20 | "arrow-parens": 0,
21 | "no-mixed-operators": 0,
22 | "no-confusing-arrow": 0,
23 | "no-plusplus": 0,
24 | "new-cap": 0,
25 | "global-require": 0,
26 | "class-methods-use-this": 0,
27 | "spaced-comment": 0,
28 | },
29 |
30 | "settings": {
31 | "import/resolver": {
32 | "babel-module": {}
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Второй выпуск React Challenge
2 |
3 | 
4 |
5 | [](https://travis-ci.org/rtivital/react-challenge-colorizr)
6 | [](https://dependencyci.com/github/rtivital/react-challenge-colorizr)
7 | [](https://coveralls.io/github/rtivital/react-challenge-colorizr?branch=master)
8 |
9 | Второй React Challenge находится в статусе обновления. В скором времени Colorizr будет значительно обновлён. Обновления коснутся как процесса сборки приложения, так и самого приложения. Также будут выпущены новые пошаговые задания для выполнения челленджа и обновлены списки материалов для изучения React, Redux и React Router. В ветке master будет находиться решение челленджа.
10 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react", ["es2015", { "loose" : true }], "stage-0"],
3 | "plugins": [
4 | "lodash",
5 | "transform-decorators-legacy",
6 | "syntax-flow",
7 | "transform-flow-strip-types",
8 |
9 | ["module-resolver", {
10 | "root": ["./src"],
11 | "alias": {
12 | "node_modules": "./node_modules",
13 | },
14 | }],
15 |
16 | ["transform-imports", {
17 | "react-router": {
18 | "transform": "react-router/lib/${member}",
19 | "preventFullImport": true
20 | }
21 | }]
22 | ],
23 |
24 | "env": {
25 | "production": {
26 | "plugins": [
27 | "transform-runtime",
28 | "transform-react-inline-elements",
29 | "transform-react-remove-prop-types",
30 | "transform-react-constant-elements",
31 | "transform-react-pure-class-to-function"
32 | ]
33 | },
34 |
35 | "development": {
36 | "plugins": [
37 | "react-hot-loader/babel",
38 | ]
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/tests/lib/Colorizr.test.js:
--------------------------------------------------------------------------------
1 | import test from 'tape-catch';
2 | import { Colorizr } from 'lib';
3 |
4 | const CHANELS = ['r', 'g', 'b'];
5 | const validColors = ['#fff', 'ccc', { r: 3, g: 56, b: 167 }, [34, 78, 56]];
6 |
7 | test('Colorizr constructor tests', (t) => {
8 | validColors.forEach((validColor) => {
9 | const instance = new Colorizr(validColor);
10 | const { color } = instance;
11 |
12 | const chanels = Object.keys(color).sort();
13 | const values = chanels.map((chanel) => color[chanel]);
14 |
15 | t.deepEqual(
16 | chanels, CHANELS.slice(0).sort(),
17 | `Colorizr produces splitted color value with ${CHANELS.join(', ')} keys`
18 | );
19 |
20 | values.forEach((chanelValue) => {
21 | const valid = (
22 | typeof chanelValue === 'number'
23 | && chanelValue % 1 === 0
24 | && chanelValue >= 0
25 | && chanelValue <= 255
26 | );
27 |
28 | t.equal(valid, true, 'Colorizr produces valid color chanel');
29 | });
30 | });
31 |
32 | t.end();
33 | });
34 |
--------------------------------------------------------------------------------
/src/ui/Layout/Sidebar.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent, PropTypes } from 'react';
2 | import onClickOutside from 'react-onclickoutside';
3 | import cx from 'classnames';
4 | import { Burger } from 'ui';
5 |
6 | @onClickOutside
7 | export default class Sidebar extends PureComponent {
8 | static propTypes = {
9 | children: PropTypes.any.isRequired,
10 | sidebarOpened: PropTypes.bool.isRequired,
11 | toggleSidebar: PropTypes.func.isRequired,
12 | closeSidebar: PropTypes.func.isRequired,
13 | }
14 |
15 | handleClickOutside = () => {
16 | this.props.closeSidebar();
17 | }
18 |
19 | render() {
20 | const { children, sidebarOpened, toggleSidebar } = this.props;
21 |
22 | const className = cx('sidebar', {
23 | 'sidebar--opened': sidebarOpened,
24 | });
25 |
26 | return (
27 |
34 | );
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/Presets/Presets.jsx:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import { Paginator } from 'components';
3 | import './presets.scss';
4 |
5 | const PrestPropType = PropTypes.arrayOf(PropTypes.string);
6 |
7 | const Preset = ({ data, ...others }) => {
8 | const colors = data.map((color, index) => (
9 |
15 | ));
16 |
17 | return (
18 | {colors}
19 | );
20 | };
21 |
22 | Preset.propTypes = {
23 | data: PrestPropType.isRequired,
24 | };
25 |
26 | const Presets = ({ data, ...others }) => {
27 | const presets = data.map(
28 | (preset, index) =>
29 | );
30 |
31 | return (
32 |
33 | {presets}
34 |
35 | );
36 | };
37 |
38 | Presets.propTypes = {
39 | data: PropTypes.arrayOf(PrestPropType).isRequired,
40 | };
41 |
42 | export default Presets;
43 |
--------------------------------------------------------------------------------
/src/ui/Icon/icons/view.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
15 |
--------------------------------------------------------------------------------
/src/modules/color/reducer.js:
--------------------------------------------------------------------------------
1 | import { handleActions } from 'redux-actions';
2 | import { hex, groups } from 'lib';
3 | import types from './types';
4 |
5 |
6 | const INITIAL_LEAD_COLOR = '#0C93D2';
7 | const INITIAL_MIXED_COLOR = '#0DF9C4';
8 |
9 | const initialState = {
10 | lead: INITIAL_LEAD_COLOR,
11 | mixer: INITIAL_MIXED_COLOR,
12 | luminosityGroup: groups.getLuminosityGroup(INITIAL_LEAD_COLOR),
13 | mixedGroup: groups.getMixedGroup(INITIAL_LEAD_COLOR, INITIAL_MIXED_COLOR),
14 | };
15 |
16 |
17 | export default handleActions({
18 | [types.SET_LEAD_COLOR](state, { payload }) {
19 | if (!hex.isHex(payload)) { return state; }
20 | return {
21 | ...state,
22 | lead: hex.prefixHex(payload),
23 | luminosityGroup: groups.getLuminosityGroup(payload),
24 | mixedGroup: groups.getMixedGroup(payload, state.mixer),
25 | };
26 | },
27 |
28 | [types.SET_MIXED_COLOR](state, { payload }) {
29 | if (!hex.isHex(payload)) { return state; }
30 | return {
31 | ...state,
32 | mixer: hex.prefixHex(payload),
33 | mixedGroup: groups.getMixedGroup(state.lead, payload),
34 | };
35 | },
36 | }, initialState);
37 |
--------------------------------------------------------------------------------
/src/containers/ColorPicker.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent, PropTypes } from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | import { ColorPicker } from 'components';
5 | import { colorActions } from 'modules';
6 | import { updateWithQuery } from 'hocs';
7 | import { hex } from 'lib';
8 |
9 | @updateWithQuery('lead', colorActions.setLeadColor)
10 | @connect(state => ({ color: state.color.lead }), colorActions)
11 | export default class ColorPickerContainer extends PureComponent {
12 | static propTypes = {
13 | color(props, propName, componentName) {
14 | if (!hex.isHex(props[propName])) {
15 | return new Error(`${componentName} expected to recieve a valid hex value, shame`);
16 | }
17 | },
18 | setLeadColor: PropTypes.func.isRequired,
19 | updateQuery: PropTypes.func.isRequired,
20 | }
21 |
22 | handleChange = (color) => {
23 | this.props.setLeadColor(hex.prefixHex(color));
24 | this.props.updateQuery(hex.unprefixHex(color));
25 | }
26 |
27 | render() {
28 | return (
29 |
33 | );
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/hocs/updateWithQuery.jsx:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, PureComponent } from 'react';
2 | import { connect } from 'react-redux';
3 | import { withRouter } from 'react-router';
4 | import { replace } from 'react-router-redux';
5 | import { debounce } from 'lodash';
6 |
7 | const updateWithQuery = (queryParam, action) => ComposedComponent =>
8 | @withRouter
9 | @connect(null, { replace, action })
10 | class UpdateWithQuery extends PureComponent {
11 | static propTypes = {
12 | location: PropTypes.object.isRequired,
13 | action: PropTypes.func.isRequired,
14 | replace: PropTypes.func.isRequired,
15 | }
16 |
17 | componentWillMount() {
18 | if (typeof action === 'function' && typeof queryParam === 'string') {
19 | this.props.action(this.props.location.query[queryParam]);
20 | }
21 | }
22 |
23 | updateQuery = debounce((value) => {
24 | const { query } = this.props.location;
25 | const params = Object.assign({}, query, { [queryParam]: value });
26 | this.props.replace({ query: params });
27 | }, 200)
28 |
29 | render() {
30 | return ;
31 | }
32 | };
33 |
34 | export default updateWithQuery;
35 |
--------------------------------------------------------------------------------
/src/components/ColorDisplayGroup/ColorSelectionControl.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import onClickOutside from 'react-onclickoutside';
3 | import { ColorPicker } from 'components';
4 |
5 | @onClickOutside
6 | export default class ColorSelectionControl extends Component {
7 | static propTypes = {
8 | selectionColor: PropTypes.string.isRequired,
9 | }
10 |
11 | state = { opened: false }
12 | toggleColorPicker = () => { this.setState({ opened: !this.state.opened }); }
13 | handleClickOutside = () => { this.setState({ opened: false }); }
14 |
15 | render() {
16 | return (
17 |
18 |
23 |
24 | {do {
25 | if (this.state.opened) {
26 | ;
31 | }
32 | }}
33 |
34 | );
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/pages/IndexPage/index-page.scss:
--------------------------------------------------------------------------------
1 | $header-breakpoint: 1000px;
2 |
3 | @keyframes gradient-background {
4 | 0% { background-position: 0% 72%; }
5 | 50% { background-position: 100% 29%; }
6 | 100% { background-position: 0% 72%; }
7 | }
8 |
9 | .index-page {
10 | background-color: $color-white-gray;
11 | padding-bottom: 20rem;
12 | }
13 |
14 | .header {
15 | animation: gradient-background 50s ease infinite;
16 | background-size: 400%;
17 | padding: 7.5rem 0;
18 | box-shadow: 1px 2px 5px rgba(0, 0, 0, .15);
19 | }
20 |
21 | .header__inner {
22 | display: flex;
23 | align-items: center;
24 | flex-direction: column;
25 | justify-content: space-between;
26 |
27 | @include breakpoint($header-breakpoint) {
28 | flex-direction: row;
29 | }
30 | }
31 |
32 | .header__titles {
33 | text-align: center;
34 | margin-bottom: 3rem;
35 |
36 | @include color-switch(color);
37 |
38 | @include breakpoint($header-breakpoint) {
39 | margin-bottom: 0;
40 | text-align: left;
41 | }
42 | }
43 |
44 | .header__title {
45 | font-size: 1.8em;
46 | margin: 0;
47 | padding: 0;
48 | text-shadow: $box-shadow;
49 | }
50 |
51 | .header__subtitle {
52 | font-size: 1em;
53 | font-weight: normal;
54 | }
55 |
--------------------------------------------------------------------------------
/src/containers/MixedGroup.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent, PropTypes } from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | import { updateWithQuery } from 'hocs';
5 | import { ColorDisplayGroup } from 'components';
6 | import { colorActions } from 'modules';
7 | import { hex } from 'lib';
8 |
9 | @updateWithQuery('mixer', colorActions.setMixedColor)
10 | @connect(state => ({ mixer: state.color.mixer, colors: state.color.mixedGroup }), colorActions)
11 | export default class MixedGroup extends PureComponent {
12 | static propTypes = {
13 | colors: PropTypes.array.isRequired,
14 | mixer: PropTypes.string.isRequired,
15 | setMixedColor: PropTypes.func.isRequired,
16 | updateQuery: PropTypes.func.isRequired,
17 | }
18 |
19 | handleChange = (color) => {
20 | this.props.setMixedColor(hex.prefixHex(color));
21 | this.props.updateQuery(hex.unprefixHex(color));
22 | }
23 |
24 | render() {
25 | const { colors, mixer } = this.props;
26 |
27 | return (
28 |
35 | );
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import { Provider } from 'react-redux';
4 | import { syncHistoryWithStore } from 'react-router-redux';
5 | import { hashHistory, browserHistory } from 'react-router';
6 | import { AppContainer } from 'react-hot-loader';
7 |
8 | import 'react-fastclick';
9 | import 'styles';
10 |
11 | import configureStore from './store';
12 | import AppRouter from './routes';
13 |
14 | const store = configureStore();
15 | const history = process.env.BUILD === 'pages' ? hashHistory : browserHistory;
16 | const appHistory = syncHistoryWithStore(history, store);
17 |
18 | const rootElement = document.getElementById('app');
19 |
20 | render(
21 |
22 |
23 |
24 |
25 | ,
26 | rootElement
27 | );
28 |
29 | if (module.hot) {
30 | module.hot.accept('./routes', () => {
31 | const NextAppRouter = require('./routes').default;
32 |
33 | render(
34 |
35 |
36 |
37 |
38 | ,
39 | rootElement
40 | );
41 | });
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/ColorSelection/ColorSelection.jsx:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import { block } from 'rbem';
3 | import { hex } from 'lib';
4 | import './color-selection.scss';
5 |
6 | const component = block('color-selection');
7 |
8 | const ColorSelectionSample = ({ color }) => {
9 | const value = hex.createLongHex(color, true).toUpperCase();
10 | return (
11 |
15 | );
16 | };
17 |
18 | ColorSelectionSample.propTypes = {
19 | color: PropTypes.string.isRequired,
20 | };
21 |
22 | const ColorSelection = ({ colors }) => {
23 | const samples = colors.map(
24 | (color, index) =>
25 | );
26 |
27 | return (
28 |
29 |
Color Selection
30 |
{samples}
31 |
27 |
42 |
43 |
44 |
45 |
46 |
47 |
57 |
58 | {this.chunk[this.state.page]}
59 |
60 |
61 |
62 |
69 |
70 |
77 |
78 |
72 |
78 | {letters}
79 |
80 |
81 | );
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/src/lib/colors/splitted.js:
--------------------------------------------------------------------------------
1 | import { clamp, isPlainObject } from 'lodash';
2 |
3 | const CHANELS = ['r', 'g', 'b'];
4 |
5 | function validateChanel(chanel) {
6 | return (
7 | typeof chanel === 'number' // should always be a number
8 | && chanel % 1 === 0 // integer number, also detects NaN
9 | && chanel >= 0
10 | && chanel <= 255
11 | );
12 | }
13 |
14 | export function isSplittedColor(value) {
15 | if (Array.isArray(value)) {
16 | return value.every(validateChanel);
17 | }
18 |
19 | if (isPlainObject(value)) {
20 | return CHANELS.every(
21 | (chanel) => chanel in value && validateChanel(value[chanel])
22 | );
23 | }
24 |
25 | return false;
26 | }
27 |
28 | export function convertSplittedToObject(value) {
29 | if (isPlainObject(value)) { return value; }
30 | if (Array.isArray(value)) {
31 | return {
32 | r: value[0],
33 | g: value[1],
34 | b: value[2],
35 | };
36 | }
37 |
38 | return value;
39 | }
40 |
41 | export function convertSplittedToArray(value) {
42 | if (Array.isArray(value)) { return value; }
43 | if (isPlainObject(value)) {
44 | return [value.r, value.g, value.b];
45 | }
46 |
47 | return value;
48 | }
49 |
50 | function lumChanel(chanel, percent, factor = 1) {
51 | return parseInt(clamp(chanel - (chanel * factor * percent / 100), 0, 255), 10);
52 | }
53 |
54 | function applyToChanels(value, callback, ...args) {
55 | if (Array.isArray(value)) {
56 | return value.map((chanel) => callback.call(null, chanel, ...args));
57 | }
58 |
59 | const color = {};
60 | Object.keys(value).forEach((chanel) => {
61 | color[chanel] = callback.call(null, value[chanel], ...args);
62 | });
63 |
64 | return color;
65 | }
66 |
67 | export function darken(value, percent) {
68 | return applyToChanels(value, lumChanel, percent, 1);
69 | }
70 |
71 | export function lighten(value, percent) {
72 | return applyToChanels(value, lumChanel, percent, -1);
73 | }
74 |
75 | export function getLuminosity(value) {
76 | const color = convertSplittedToObject(value);
77 | const { r, g, b } = color;
78 | return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 * 100;
79 | }
80 |
81 | export function mix(value, mixer, percent, array = false) {
82 | const color = convertSplittedToObject(value);
83 | const colorToMix = convertSplittedToObject(mixer);
84 | const mixed = {};
85 |
86 | Object.keys(color).forEach((chanel) => {
87 | const delimeter = percent / 100;
88 | mixed[chanel] = parseInt(color[chanel] * delimeter + colorToMix[chanel] * (1 - delimeter), 10);
89 | });
90 |
91 | return array ? convertSplittedToArray(mixed) : mixed;
92 | }
93 |
--------------------------------------------------------------------------------
/src/components/ColorDisplay/ColorDisplay.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import Clipboard from 'react-copy-to-clipboard';
3 | import { block } from 'rbem';
4 |
5 | import { Colorizr } from 'lib';
6 | import { Icon, glyphs, Button, ButtonWithIcon } from 'ui';
7 | import './color-display.scss';
8 |
9 | const Chanel = ({ value, name }) => (
10 |
11 | {name.toUpperCase()}
12 | {value}
13 |
14 | );
15 |
16 | Chanel.propTypes = {
17 | value: PropTypes.number.isRequired,
18 | name: PropTypes.string.isRequired,
19 | };
20 |
21 |
22 | export default class ColorDisplay extends Component {
23 | static propTypes = {
24 | colorValue: PropTypes.string.isRequired,
25 | hideInfo: PropTypes.bool,
26 | }
27 |
28 | static defaultProps = {
29 | hideInfo: false,
30 | }
31 |
32 | state = { copied: false }
33 | timeout = null
34 |
35 | handleCopy = () => {
36 | if (this.timeout) { clearTimeout(this.timeout); }
37 | this.timeout = setTimeout(() => this.setState({ copied: false }), 2000);
38 | this.setState({ copied: true });
39 | }
40 |
41 | shouldComponentUpdate(nextProps, nextState) {
42 | return (
43 | this.props.colorValue !== nextProps.colorValue
44 | || this.state.copied !== nextState.hideInfo
45 | );
46 | }
47 |
48 | render() {
49 | const component = block('color-display');
50 | const transformedColor = new Colorizr(this.props.colorValue);
51 | const hex = transformedColor.hex();
52 | const rgb = transformedColor.clone().color;
53 |
54 | const chanels = Object.keys(rgb).map(
55 | (chanel, index) =>
56 | );
57 |
58 | const { copied } = this.state;
59 | const iconTheme = transformedColor.luminosity() >= 50 ? 'dark' : 'light';
60 | const buttonTheme = copied ? 'green' : 'white';
61 | const buttonText = copied ? 'Copied' : 'Copy HEX';
62 | const buttonGlyph = copied ? 'tick' : 'copy';
63 |
64 | return (
65 |
66 |
71 |
72 |
73 |
74 |
75 |
76 | {!this.props.hideInfo && (
77 |
78 |
{chanels}
79 |
80 | HEX:
81 | {hex}
82 |
83 |
84 |
89 | {buttonText}
90 |
91 |
92 |
93 | )}
94 |
58 | {chunkContent}
59 |
60 | );
61 | });
62 |
63 | const displaysClassName = applyModifiers(component('displays'), {
64 | gradient: this.state.gradient,
65 | });
66 |
67 | return (
68 |
69 |
70 |
{this.props.title}
71 |
72 | {do {
73 | if (this.props.enableSelection) {
74 | ;
78 | }
79 | }}
80 |
81 |
82 | {colorsRows}
83 |
84 |
85 |
91 |
97 |
98 |
99 |
100 |