feat(Added class selectors): Added class based selectors and updated …

…build

package.json

@@ -6,12 +6,11 @@
   "module": "dist/react-draftable.esm.js",
   "browser": "dist/react-draftable.umd.js",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "build": "yarn clean && yarn build:rollup",
-    "build:rollup": "BABEL_ENV=production rollup -c --no-treeshake",
+    "build:rollup": "BABEL_ENV=production rollup -c",
     "clean": "rimraf dist",
     "commit": "git-cz",
     "flow": "flow",
@@ -83,7 +82,6 @@
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^10.0.0",
-    "rollup-plugin-copy": "^2.0.1",
     "rollup-plugin-css-only": "^1.0.0",
     "rollup-plugin-multi-entry": "^2.1.0",
     "rollup-plugin-node-globals": "^1.4.0",

rollup.config.js

@@ -3,20 +3,13 @@ import commonjs from 'rollup-plugin-commonjs';
 import babel from 'rollup-plugin-babel';
 import css from 'rollup-plugin-css-only';
 import autoExternal from 'rollup-plugin-auto-external';
-import copy from 'rollup-plugin-copy';
 import pkg from './package.json';
 
 const commonPlugins = [
   babel(),
   autoExternal(),
   resolve(),
   css({ output: 'dist/react-draftable.css' }),
-  copy({
-    targets: [
-      'src/react-draftable.esm.js.flow',
-    ],
-    outputFolder: 'dist',
-  }),
 ];
 
 export default [

src/styles.css

@@ -6,34 +6,31 @@
     line-height: 1.25;
 }
 
-.Toolbar-root {
+.toolbar {
     display: flex;
     margin: 14px 0;
 }
 
-.ToolbarGroup-root {
+.toolbarGroup {
     display: flex;
-}
-
-.ToolbarGroup-root {
     margin: 0 12px;
 }
 
-.ToolbarGroup-root:first-of-type {
+.toolbarGroup:first-of-type {
     margin-left: 0;
 }
 
-.ToolbarGroup-root:last-of-type {
+.toolbarGroup:last-of-type {
     margin-right: 0;
 }
 
-.ToolbarButton-root {
+.toolbarButton {
     border: none;
     background: none;
     margin: 0 4px;
     padding: 0;
 }
 
-.ToolbarButton-root:first-of-type {
+.toolbarButton:first-of-type {
     margin-left: 0;
 }

src/toolbar/index.js

@@ -26,11 +26,12 @@ export const defaultToolbarConfig:ToolbarConfigType = {
 export default ({ editorState, toolbarConfig, onChange }:ToolbarProps) => {
   const handleToggle = item => onChange(item);
   return (
-    <div data-testid='toolbar' className='Toolbar-root'>
+    <div data-testid='toolbar' className='toolbar'>
       {
         toolbarConfig.groups.map(group => (
           <ToolbarGroup
             key={group}
+            name={group}
             items={toolbarConfig[group]}
             onChange={handleToggle}
             editorState={editorState}

src/toolbarButton/index.js

@@ -38,9 +38,10 @@ export default ({ item, active, onChange }:ToolbarButtonProps) => {
   };
 
   const iconColor = active ? '#404041' : '#9F9FA0';
+  const buttonType = item.type === 'style' ? item.style : 'custom';
 
   return (
-    <button data-testid={`toolbarButton-${item.type === 'style' ? item.style : 'custom'}`} type='button' className='ToolbarButton-root' onClick={handleToggle}>
+    <button data-testid={`toolbarButton-${buttonType}`} type='button' className={`toolbarButton toolbarButton-${buttonType}`} onClick={handleToggle}>
       <Icon color={iconColor} />
     </button>
   );

src/toolbarGroup/index.js

@@ -4,19 +4,20 @@ import { EditorState } from 'draft-js';
 import ToolbarButton, { type ToolbarButtonType } from '../toolbarButton';
 
 type ToolbarGroupProps = {
+  name: string,
   items: Array<ToolbarButtonType>,
   onChange: (ToolbarButtonType) => void,
   editorState: EditorState,
 };
 
 export default ({
-  items, onChange, editorState,
+  name, items, onChange, editorState,
 }:ToolbarGroupProps) => {
   const handleToggle = item => onChange(item);
   const inlineStyles = editorState.getCurrentInlineStyle();
 
   return (
-    <div data-testid='toolbarGroup' className='ToolbarGroup-root'>
+    <div data-testid='toolbarGroup' className={`toolbarGroup toolbarGroup-${name}`}>
       {
         items.map((item) => {
           const active = item.type === 'style' && inlineStyles.has(item.style);