fix: rearrange the structure of internal components

src/components/ColorPicker/commons/alpha/index.js

@@ -0,0 +1,30 @@
+import React, { useContext } from 'react';
+import StyledAlphaSlider from './styled';
+import { ColorPickerContext } from '../../context';
+
+export default function Alpha() {
+    const { hex, rgba, hsv, tabIndex, onChange } = useContext(ColorPickerContext);
+
+    const handleChange = event => {
+        const value = parseInt(event.target.value, 10);
+        rgba[3] = isNaN(value) ? 0 : Math.max(0, Math.min(value, 100)) / 100;
+
+        onChange({
+            hex,
+            rgba,
+            hsv,
+        });
+    };
+
+    const alpha = Math.round(rgba[3] * 100);
+
+    return (
+        <StyledAlphaSlider
+            value={alpha}
+            min={0}
+            max={100}
+            onChange={handleChange}
+            tabIndex={tabIndex}
+        />
+    );
+}

src/components/ColorPicker/commons/alpha/styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import Slider from '../slider';
+
+const StyledAlphaSlider = styled(Slider)`
+    input::-webkit-slider-runnable-track {
+        background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
+    }
+
+    input::-moz-range-track {
+        background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%) !important;
+    }
+`;
+
+export default StyledAlphaSlider;

src/components/ColorPicker/commons/defaultColors/color.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyledColor, StyledInput, StyledLabel } from './styled';
+import AssistiveText from '../../../AssistiveText';
+import { useUniqueIdentifier } from '../../../../libs/hooks';
+import {
+    colorToRgba,
+    isValidColor,
+    rgbToHsv,
+    rgbaToHex,
+    decomposeColor,
+} from '../../../../styles/helpers/color';
+
+const Color = React.forwardRef((props, ref) => {
+    const { color, name, tabIndex, isChecked, onChange } = props;
+    const colorId = useUniqueIdentifier('color-picker-default');
+
+    const handleChange = () => {
+        const rgba = colorToRgba(color);
+        if (isValidColor(rgba)) {
+            onChange({
+                hex: rgbaToHex(rgba),
+                rgba: decomposeColor(rgba).values,
+                hsv: decomposeColor(rgbToHsv(rgba)).values,
+            });
+        }
+    };
+
+    const style = { backgroundColor: color };
+    return (
+        <StyledColor>
+            <StyledInput
+                id={colorId}
+                as="input"
+                name={name}
+                checked={isChecked}
+                value={color}
+                type="radio"
+                onChange={handleChange}
+                ref={ref}
+                tabIndex={tabIndex}
+            />
+            <StyledLabel htmlFor={colorId} style={style}>
+                <AssistiveText>{color}</AssistiveText>
+            </StyledLabel>
+        </StyledColor>
+    );
+});
+
+Color.propTypes = {
+    color: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    isChecked: PropTypes.bool,
+    onChange: PropTypes.func,
+    tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+Color.defaultProps = {
+    color: undefined,
+    name: '',
+    isChecked: false,
+    onChange: () => {},
+    tapIndex: undefined,
+};
+
+export default Color;

src/components/ColorPicker/commons/defaultColors/index.js

@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';
+import { ColorPickerContext } from '../../context';
+import { StyledContainer, StyledColors } from './styled';
+import { colorToRgba, recomposeColor } from '../../../../styles/helpers/color';
+import { useUniqueIdentifier } from '../../../../libs/hooks';
+import Color from './color';
+
+const DefaultColors = React.forwardRef((_props, ref) => {
+    const { colors, rgba, tabIndex: tabIndexProp, onChange } = useContext(ColorPickerContext);
+    const rgbaColor = recomposeColor({ type: 'rgba', values: rgba });
+    const name = useUniqueIdentifier('color-picker-default');
+
+    const listColors = colors.map((color, index) => {
+        const tabIndex = index === 0 ? tabIndexProp : -1;
+        const isSelected = colorToRgba(color) === rgbaColor;
+        const isFirstInput = index === 0;
+        const inputRef = isFirstInput ? ref : undefined;
+        return (
+            <Color
+                key={color}
+                color={color}
+                name={name}
+                isChecked={isSelected}
+                onChange={onChange}
+                ref={inputRef}
+                tabIndex={tabIndex}
+            />
+        );
+    });
+
+    return (
+        <StyledContainer>
+            <StyledColors>{listColors}</StyledColors>
+        </StyledContainer>
+    );
+});
+
+export default DefaultColors;

src/components/ColorPicker/commons/defaultColors/styled.js

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+import attachThemeAttrs from '../../../../styles/helpers/attachThemeAttrs';
+import HiddenElement from '../../../Structural/hiddenElement';
+import { CssCircleColor } from '../styled';
+
+export const StyledContainer = styled.div`
+    flex: 0 0 auto;
+    padding: 0.5rem 0 0.25rem;
+`;
+
+export const StyledColors = styled.div`
+    text-align: center;
+`;
+
+export const StyledColor = styled.span`
+    line-height: inherit;
+    height: inherit;
+`;
+
+export const StyledInput = attachThemeAttrs(styled(HiddenElement))`
+    &:focus + label {
+        border: 1px solid ${props => props.palette.brand.main};
+        box-shadow: ${props => props.shadows.brand};
+    }
+`;
+
+export const StyledLabel = attachThemeAttrs(styled.label)`
+    display: inline-block;
+    margin: 0 0.45rem;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    ${CssCircleColor}
+
+    &:hover {
+        cursor: pointer;
+    }
+`;

src/components/ColorPicker/commons/hexColor/index.js

@@ -0,0 +1,46 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { StyledHexColorIcon, StyledHexInput } from './styled';
+import { hexToRgba, rgbToHsv, isValidColor } from '../../../../styles/helpers/color';
+import { ColorPickerContext } from '../../context';
+
+export default function HexColor() {
+    const { hex, tabIndex, onChange } = useContext(ColorPickerContext);
+    const [color, setColor] = useState(hex.substr(1));
+    const [isFocused, setIsFocused] = useState(false);
+
+    useEffect(() => {
+        if (!isFocused) {
+            setColor(hex.substr(1));
+        }
+    }, [hex, isFocused]);
+
+    const handleChange = event => {
+        const newHex = `#${event.target.value}`;
+        setColor(event.target.value);
+        const rgba = hexToRgba(newHex);
+        if (isValidColor(rgba)) {
+            onChange({
+                hex: newHex,
+                rgba: rgba.values,
+                hsv: rgbToHsv(rgba).values,
+            });
+        }
+    };
+
+    const handleBlur = () => {
+        setIsFocused(false);
+        setColor(hex.substr(1));
+    };
+
+    return (
+        <StyledHexInput
+            value={color}
+            bottomHelpText="HEX"
+            onChange={handleChange}
+            onFocus={() => setIsFocused(true)}
+            onBlur={handleBlur}
+            icon={<StyledHexColorIcon>#</StyledHexColorIcon>}
+            tabIndex={tabIndex}
+        />
+    );
+}

src/components/ColorPicker/commons/hexColor/styled.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import attachThemeAttrs from '../../../../styles/helpers/attachThemeAttrs';
+import Input from '../../../Input';
+import { CssInput } from '../styled';
+
+export const StyledHexInput = styled(Input)`
+    input {
+        ${CssInput}
+        padding: 0 0.7rem 0 1rem;
+
+        :focus,
+        :active {
+            padding: 0 0.65625rem 0 0.9375rem;
+        }
+    }
+
+    > div > span {
+        left: 0.2rem;
+    }
+`;
+
+export const StyledHexColorIcon = attachThemeAttrs(styled.span)`
+    font: inherit;
+    line-height: 2.5rem;
+    font-size: 1rem;
+`;

src/components/ColorPicker/commons/hue/index.js

@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+import StyledHueSlider from './styled';
+import {
+    hsvToRgb,
+    rgbToRgba,
+    recomposeColor,
+    rgbaToHex,
+    decomposeColor,
+} from '../../../../styles/helpers/color';
+import { ColorPickerContext } from '../../context';
+
+export default function Hue() {
+    const { hsv, rgba, tabIndex, onChange } = useContext(ColorPickerContext);
+
+    const handleChange = event => {
+        const value = parseInt(event.target.value, 10);
+        hsv[0] = isNaN(value) ? 0 : Math.max(0, Math.min(value, 360));
+        const rgbColor = hsvToRgb(recomposeColor({ type: 'hsv', values: hsv }));
+        const rgbaColor = rgbToRgba(rgbColor, rgba[3]);
+
+        onChange({
+            hex: `#${rgbaToHex(rgbaColor)}`,
+            rgba: decomposeColor(rgbaColor).values,
+            hsv,
+        });
+    };
+
+    return (
+        <StyledHueSlider
+            value={hsv[0]}
+            min={0}
+            max={360}
+            onChange={handleChange}
+            tabIndex={tabIndex}
+        />
+    );
+}

src/components/ColorPicker/commons/hue/styled.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+import Slider from '../slider';
+
+const StyledHueSlider = styled(Slider)`
+    input::-webkit-slider-runnable-track {
+        background: linear-gradient(
+            to right,
+            rgb(255, 0, 0) 0%,
+            rgb(255, 255, 0) 17%,
+            rgb(0, 255, 0) 33%,
+            rgb(0, 255, 255) 50%,
+            rgb(0, 0, 255) 67%,
+            rgb(255, 0, 255) 83%,
+            rgb(255, 0, 0) 100%
+        ) !important;
+    }
+
+    input::-moz-range-track {
+        background: linear-gradient(
+            to right,
+            rgb(255, 0, 0) 0%,
+            rgb(255, 255, 0) 17%,
+            rgb(0, 255, 0) 33%,
+            rgb(0, 255, 255) 50%,
+            rgb(0, 0, 255) 67%,
+            rgb(255, 0, 255) 83%,
+            rgb(255, 0, 0) 100%
+        ) !important;
+    }
+`;
+
+export default StyledHueSlider;

src/components/ColorPicker/commons/index.js

@@ -0,0 +1,7 @@
+export { default as DefaultColors } from './defaultColors';
+export { default as Saturation } from './saturation';
+export { default as Alpha } from './alpha';
+export { default as HexColor } from './hexColor';
+export { default as Hue } from './hue';
+export { default as RgbaColor } from './rgbaColor';
+export { default as Preview } from './preview';

src/components/ColorPicker/commons/preview.js

@@ -0,0 +1,11 @@
+import React, { useContext } from 'react';
+import { ColorPickerContext } from '../context';
+import { StyledPreview } from './styled';
+import { recomposeColor } from '../../../styles/helpers/color';
+
+export default function Preview() {
+    const { rgba } = useContext(ColorPickerContext);
+    const style = { backgroundColor: recomposeColor({ type: 'rgba', values: rgba }) };
+
+    return <StyledPreview style={style} />;
+}