random local classNames

use styled-components className generator for that

ui/package.json

@@ -22,12 +22,12 @@
     "lodash.isstring": "^4.0.1",
     "lodash.isundefined": "^3.0.1",
     "param-case": "^2.1.0",
+    "random-natural": "^1.0.3",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
     "react-icons": "^2.2.1",
     "reduce-css-calc": "^1.3.0",
-    "styled-components": "^1.1.3",
-    "uuid": "^3.0.1"
+    "styled-components": "^1.1.3"
   },
   "devDependencies": {
     "@kadira/storybook": "^2.34.0",

ui/src/components/toggle/index.js

@@ -2,7 +2,6 @@ const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const React = require('react');
 const Styled = require('styled-components');
-const uuid = require('uuid').v4;
 
 const {
   boxes,
@@ -10,13 +9,18 @@ const {
 } = constants;
 
 const {
-  remcalc
+  remcalc,
+  rndId
 } = fns;
 
 const {
   default: styled
 } = Styled;
 
+const classNames = {
+  label: rndId()
+};
+
 const StyledLabel = styled.label`
   border-radius: ${boxes.borderRadius};
   color: #464646;
@@ -62,7 +66,7 @@ const StyledInput = styled.input`
   display: none;
 
   &:checked {
-    & + .tgl-label {
+    & + .${classNames.label} {
       background: ${colors.confirmation};
       border: ${boxes.border.confirmed};
       color: #FFFFFF;
@@ -87,7 +91,7 @@ const Toggle = ({
   checked,
   className,
   defaultChecked,
-  id = uuid(),
+  id = rndId(),
   style
 }) => {
   return (
@@ -101,7 +105,7 @@ const Toggle = ({
         id={id}
         type='checkbox'
       />
-      <StyledToggleLabel className='tgl-label' />
+      <StyledToggleLabel className={classNames.label} />
     </StyledLabel>
   );
 };

ui/src/components/widget/index.js

@@ -1,27 +1,36 @@
 const React = require('react');
 const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
 const Styled = require('styled-components');
 
 const {
   boxes
 } = constants;
 
+const {
+  rndId
+} = fns;
+
 const {
   default: styled,
 } = Styled;
 
+const classNames = {
+  content: rndId()
+};
+
 const StyledInput = styled.input`
   display: none;
   visibility: hidden;
 
   &:checked {
-    & ~ .content {
+    & ~ .${classNames.content} {
       border: ${boxes.border.checked};
     }
   }
 
   &:disabled {
-    & ~ .content {
+    & ~ .${classNames.content} {
       cursor: not-allowed;
       filter: grayscale(80%);
       opacity: 0.4;
@@ -45,6 +54,7 @@ const Widget = ({
   children,
   className,
   disabled = false,
+  id,
   name,
   selectable = 'single',
   style,
@@ -53,7 +63,11 @@ const Widget = ({
   const type = selectable === 'single' ? 'radio' : 'checkbox';
 
   return (
-    <label className={className} htmlFor={value}>
+    <label
+      className={className}
+      htmlFor={value}
+      id={id}
+    >
       <StyledInput
         checked={checked}
         disabled={disabled}
@@ -62,7 +76,7 @@ const Widget = ({
         type={type}
         value={value}
       />
-      <StyledContent>
+      <StyledContent className={classNames.content}>
         {children}
       </StyledContent>
     </label>
@@ -74,6 +88,7 @@ Widget.propTypes = {
   children: React.PropTypes.object,
   className: React.PropTypes.string,
   disabled: React.PropTypes.bool,
+  id: React.PropTypes.string,
   name: React.PropTypes.string,
   selectable: React.PropTypes.string,
   style: React.PropTypes.object,

ui/src/shared/functions.js

@@ -1,7 +1,21 @@
 const calc = require('reduce-css-calc');
+const randomNatural = require('random-natural');
+
+// from https://github.com/styled-components/styled-components/blob/065001c725744629c7870240e4a955b924ef5337/src/utils/generateAlphabeticName.js
+const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
+const rndId = (_code) => {
+  const code = !_code ? randomNatural({
+    min: 1000000000
+  }) : _code;
+
+  const lastDigit = chars[code % chars.length];
+  return code > chars.length
+    ? `${rndId(Math.floor(code / chars.length))}${lastDigit}`
+    : lastDigit;
+};
 
 module.exports = {
-  remcalc: function(values) {
+  remcalc: (values) => {
     values = values.toString().replace('px', '').split(' ');
 
     let outputRems = '';
@@ -14,7 +28,6 @@ module.exports = {
 
     return outputRems;
   },
-  calc: function(str) {
-    return calc(`calc(${str})`);
-  }
+  calc: (str) => calc(`calc(${str})`),
+  rndId
 };