feat: localization #48 (#49)

Author: mikbry

.storybook/frenchTheme.js

@@ -0,0 +1,11 @@
+import { createMuiTheme } from "@material-ui/core/styles";
+import { frFR } from '@material-ui/core/locale';
+
+const frenchTheme = createMuiTheme({
+  name: 'Dark French Theme',
+  palette: {
+    type: 'dark',
+  },
+}, frFR);
+
+export default frenchTheme;

.storybook/preview.js

@@ -7,8 +7,9 @@ import { withThemesProvider } from 'storybook-addon-styled-component-theme';
 import ThemeProvider from './ThemeProvider';
 import lightTheme from './lightTheme';
 import darkTheme from './darkTheme';
+import frenchTheme from './frenchTheme';
 
-const themes = [lightTheme, darkTheme];
+const themes = [lightTheme, darkTheme, frenchTheme];
 addDecorator(withThemesProvider(themes, ThemeProvider));
 addDecorator(withKnobs);
 addDecorator(storyFn => <div style={{ padding: '48px' }}>{storyFn()}</div>);

README.md

@@ -146,7 +146,7 @@ const palette = {
   black: 'black',
   white: 'white',
   pink: 'pink',
-  darkBlue: 'darkBlue',
+  darkblue: 'darkblue',
 };
 
 export const Container = () => (

src/components/ColorBox/index.jsx

@@ -84,8 +84,8 @@ const StyledBox = styled.div`
   }
 `;
 
-const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange, ...props }) => {
-  let color = validateColor(value);
+const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange, translate, ...props }) => {
+  let color = validateColor(value, translate);
   let onChange = _onChange;
   let onDeferredChange;
   if (deferred) {
@@ -136,6 +136,7 @@ const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange,
             format={input}
             className="muicc-colorbox-input"
             onChange={handleInputChange}
+            translate={translate}
           />
         ))}
       </div>
@@ -175,12 +176,12 @@ const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange,
         {palette && (
           <>
             <Divider />
-            <ColorPalette size={26.65} palette={palette} onSelect={handlePaletteSelection} />
+            <ColorPalette size={26.65} palette={palette} onSelect={handlePaletteSelection} translate={translate} />
           </>
         )}
         {deferred && (
           <div className="muicc-colorbox-controls">
-            <Button onClick={handleSet}>Set</Button>
+            <Button onClick={handleSet}>{translate('Set')}</Button>
           </div>
         )}
       </StyledBox>
@@ -194,13 +195,18 @@ ColorBox.propTypes = {
   palette: CommonTypes.palette,
   inputFormats: CommonTypes.inputFormats,
   onChange: PropTypes.func.isRequired,
+  /**
+    The localization utils function
+   */
+  translate: PropTypes.func,
 };
 
 ColorBox.defaultProps = {
   value: undefined,
   deferred: false,
   palette: undefined,
   inputFormats: ['hex', 'rgb'],
+  translate: v => v,
 };
 
 export default uncontrolled(ColorBox);

src/components/ColorButton.jsx

@@ -48,8 +48,9 @@ const Styleddiv = styled.div`
 - Use a ColorButton to select a predefined color by clicking on this button.
 - If the color is not valid or transparent a crossed background is displayed.
  */
-const ColorButton = ({ color: c, size, borderWidth, borderColor, forwardRef, tooltip, ...props }) => {
-  const color = ColorTool.validateColor(c);
+const ColorButton = ({ color: c, size, borderWidth, borderColor, forwardRef, tooltip, translate, ...props }) => {
+  const color = ColorTool.validateColor(c, translate);
+  const translated = translate(tooltip);
   const style = color.css; // || { backgroundColor: ColorTool.getCssColor(color) };
   let l = color.hsl[2] - 10;
   if (l < 30) l = color.hsl[2] + 50;
@@ -72,7 +73,7 @@ const ColorButton = ({ color: c, size, borderWidth, borderColor, forwardRef, too
   );
   if (tooltip) {
     return (
-      <Tooltip title={tooltip}>
+      <Tooltip title={translated}>
         <Styleddiv>{component}</Styleddiv>
       </Tooltip>
     );
@@ -101,6 +102,10 @@ ColorButton.propTypes = {
     A tooltip could be added to the button to display the color name or value
    */
   tooltip: PropTypes.string,
+  /**
+    The localization utils function
+   */
+  translate: PropTypes.func,
   /**
     Internal usage
    */
@@ -113,6 +118,7 @@ ColorButton.defaultProps = {
   borderColor: undefined,
   forwardRef: undefined,
   tooltip: undefined,
+  translate: v => v,
 };
 
 export default ColorButton;

src/components/ColorInput.jsx

@@ -34,8 +34,8 @@ const StyledRoot = styled.div`
   }
 `;
 
-const ColorInput = ({ value, format, onChange, forwardRef, ...props }) => {
-  const color = ColorTool.validateColor(value);
+const ColorInput = ({ value, format, onChange, forwardRef, translate, ...props }) => {
+  const color = ColorTool.validateColor(value, translate);
   let field;
   let components;
 
@@ -85,7 +85,7 @@ const ColorInput = ({ value, format, onChange, forwardRef, ...props }) => {
   if (format === 'plain') {
     field = buildInput('color-plain', 'Color', color.raw);
   } else {
-    components = ColorTool.getComponents(color, format);
+    components = ColorTool.getComponents(color, format, translate);
     const names = Object.keys(components);
     field = (
       <StyledRoot ref={forwardRef}>
@@ -109,12 +109,20 @@ ColorInput.propTypes = {
   value: CommonTypes.color,
   format: PropTypes.string,
   onChange: PropTypes.func.isRequired,
+  /**
+    The localization utils function
+   */
+  translate: PropTypes.func,
+  /**
+    Internal usage
+   */
   forwardRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
 };
 
 ColorInput.defaultProps = {
   value: '',
   format: 'plain',
+  translate: undefined,
   forwardRef: undefined,
 };
 

src/components/ColorPalette.jsx

@@ -24,7 +24,7 @@ const StyledRoot = styled.div`
   }
 `;
 
-const ColorPalette = ({ size, borderWidth, palette, onSelect }) => {
+const ColorPalette = ({ size, borderWidth, palette, translate, onSelect }) => {
   const handleSelectColor = name => {
     if (onSelect) onSelect(name, palette[name]);
   };
@@ -39,6 +39,7 @@ const ColorPalette = ({ size, borderWidth, palette, onSelect }) => {
           className="muicc-palette-button"
           borderWidth={borderWidth}
           tooltip={name}
+          translate={translate}
           onClick={() => handleSelectColor(name)}
         />
       ))}
@@ -52,13 +53,18 @@ ColorPalette.propTypes = {
   palette: CommonTypes.palette.isRequired,
   forwardRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   onSelect: PropTypes.func,
+  /**
+    The localization utils function
+   */
+  translate: PropTypes.func,
 };
 
 ColorPalette.defaultProps = {
   borderWidth: 0,
   size: 24,
   forwardRef: undefined,
   onSelect: undefined,
+  translate: undefined,
 };
 
 export default ColorPalette;

src/components/ColorPicker.jsx

@@ -53,11 +53,11 @@ const ColorPicker = ({
   onChange,
   onOpen,
   doPopup,
+  translate,
 }) => {
   const refPicker = React.useRef();
   const [open, setOpen] = React.useState(openAtStart);
-
-  const color = ColorTool.validateColor(value);
+  const color = ColorTool.validateColor(value, translate);
   const raw = getColorText(color);
   const handleClick = () => {
     const b = Boolean(refPicker.current);
@@ -88,6 +88,7 @@ const ColorPicker = ({
       deferred={deferred}
       palette={palette}
       inputFormats={inputFormats}
+      translate={translate}
       onChange={handleColorChange}
     />
   );
@@ -144,6 +145,10 @@ ColorPicker.propTypes = {
   onOpen: PropTypes.func,
   openAtStart: PropTypes.bool,
   doPopup: PropTypes.func,
+  /**
+    The localization utils function
+   */
+  translate: PropTypes.func,
 };
 
 ColorPicker.defaultProps = {
@@ -155,6 +160,7 @@ ColorPicker.defaultProps = {
   onOpen: undefined,
   openAtStart: false,
   doPopup: undefined,
+  translate: undefined,
 };
 
 export default uncontrolled(ColorPicker);

src/helpers/colorTool.js

@@ -8,30 +8,11 @@
  */
 import cssColors from './cssColors';
 
-// Inspiration : https://stackoverflow.com/questions/57803/how-to-convert-decimal-to-hexadecimal-in-javascript
-/* const getHexa = n => {
-  let n = _n;
-  if (n < 0) {
-    n = 0xffffffff + n + 1;
-  }
-  let hexa = `00000000${n.toString(16).toUpperCase()}`.substr(-8);
-  if (hexa.startsWith('00')) {
-    hexa = hexa.substring(2);
-  }
-  return hexa;
-}; */
-
 const getCssHexa = (n, alpha) => {
-  // let hex = getHexa(n & 0xffffff);
   let hex = `00000000${(n & 0xffffff).toString(16).toUpperCase()}`.substr(-6);
   if (!Number.isNaN(alpha) && alpha !== undefined) {
     let a = alpha.toString(16).toUpperCase();
     if (a.length === 1) a = `0${a}`;
-    /* if (hex.length === 8) {
-      hex = hex.substring(2) + a;
-    } else {
-      hex += a;
-    } */
     hex += a;
   }
   return hex;
@@ -235,12 +216,6 @@ const getMinMax = rgb => {
 };
 
 const getHsl = rgb => {
-  /* const r = rgb[0] / 255;
-  const g = rgb[1] / 255;
-  const b = rgb[2] / 255;
-  const cmin = Math.min(r, g, b);
-  const cmax = Math.max(r, g, b);
-  const delta = cmax - cmin; */
   const { cmin, cmax, delta, r, g, b } = getMinMax(rgb);
   let h = 0;
   let s = 0;
@@ -264,11 +239,6 @@ const getHsl = rgb => {
 };
 
 const getHsv = rgb => {
-  /* const r = rgb[0] / 255;
-  const g = rgb[1] / 255;
-  const b = rgb[2] / 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b); */
   const { cmax, delta, r, g, b } = getMinMax(rgb);
   if (delta === 0) return [0, 0, Math.round(cmax * 100)];
 
@@ -417,31 +387,62 @@ const getCssColor = (color, format, noAlpha) => {
   return value;
 };
 
-const validateColor = _color => (_color && _color.format && _color.name ? _color : parse(_color));
+let cssColorsTranslated;
+let language;
+
+const validateColor = (_color, translate) => {
+  let color = _color;
+  let isTranslated = false;
+  if (!(_color && _color.format && _color.name)) {
+    color = _color;
+    if (translate && typeof color === 'string') {
+      if (!cssColorsTranslated || translate('language') !== language) {
+        language = translate('language');
+        cssColorsTranslated = {};
+        Object.keys(cssColors).forEach(name => {
+          cssColorsTranslated[translate(name)] = name;
+        });
+      }
+      color = cssColorsTranslated[color] || color;
+      isTranslated = color !== _color;
+    }
+    color = parse(color);
+    if (color.name && translate) {
+      color.translated = translate(color.name);
+      if (isTranslated && color.translated) {
+        color.name = color.translated;
+      }
+      if (color.error) color.error = translate(color.error);
+    }
+  } else if (color.error && translate) {
+    color.error = translate(color.error);
+  }
+  return color;
+};
 
-const getComponents = (_color, format) => {
-  const color = validateColor(_color);
+const getComponents = (_color, format, translate = value => value) => {
+  const color = validateColor(_color, translate);
   const components = {};
   if (format === 'rgb') {
-    components.r = { value: color.rgb[0], format: 'integer', min: 0, max: 255, name: 'R' };
-    components.g = { value: color.rgb[1], format: 'integer', min: 0, max: 255, name: 'G' };
-    components.b = { value: color.rgb[2], format: 'integer', min: 0, max: 255, name: 'B' };
+    components.r = { value: color.rgb[0], format: 'integer', min: 0, max: 255, name: translate('R') };
+    components.g = { value: color.rgb[1], format: 'integer', min: 0, max: 255, name: translate('G') };
+    components.b = { value: color.rgb[2], format: 'integer', min: 0, max: 255, name: translate('B') };
   } else if (format === 'hsv') {
-    components.h = { value: color.hsv[0], format: 'integer', min: 0, max: 360, name: 'H', unit: '°' };
-    components.s = { value: color.hsv[1], format: 'integer', min: 0, max: 100, name: 'S', unit: '%' };
-    components.v = { value: color.hsv[2], format: 'integer', min: 0, max: 100, name: 'V', unit: '%' };
+    components.h = { value: color.hsv[0], format: 'integer', min: 0, max: 360, name: translate('H'), unit: '°' };
+    components.s = { value: color.hsv[1], format: 'integer', min: 0, max: 100, name: translate('S'), unit: '%' };
+    components.v = { value: color.hsv[2], format: 'integer', min: 0, max: 100, name: translate('V'), unit: '%' };
   } else if (format === 'hsl') {
-    components.h = { value: color.hsl[0], format: 'integer', min: 0, max: 360, name: 'H', unit: '°' };
-    components.s = { value: color.hsl[1], format: 'integer', min: 0, max: 100, name: 'S', unit: '%' };
-    components.l = { value: color.hsl[2], format: 'integer', min: 0, max: 100, name: 'L', unit: '%' };
+    components.h = { value: color.hsl[0], format: 'integer', min: 0, max: 360, name: translate('H'), unit: '°' };
+    components.s = { value: color.hsl[1], format: 'integer', min: 0, max: 100, name: translate('S'), unit: '%' };
+    components.l = { value: color.hsl[2], format: 'integer', min: 0, max: 100, name: translate('L'), unit: '%' };
   } else if (format === 'hex') {
     let { hex } = color;
     if (color.raw && typeof color.raw === 'string' && color.raw.startsWith('#')) {
       hex = color.raw.substring(1);
     }
-    components.hex = { value: hex, format: 'hex', name: 'HEX', unit: '#' };
+    components.hex = { value: hex, format: 'hex', name: translate('HEX'), unit: '#' };
   } else {
-    components.value = color.value;
+    components.value = translate(color.value);
     components.format = 'unknown';
   }
   return components;

stories/ColorBox.stories.js

@@ -15,7 +15,7 @@ const palette = {
   black: 'black',
   white: 'white',
   pink: 'pink',
-  darkBlue: 'darkBlue',
+  darkblue: 'darkblue',
 };
 
 export default {