Fix for umd issues and missing styles

Author: Marek Rozmus

README.md

@@ -32,6 +32,9 @@ yarn add @sandstreamdev/react-swipeable-list
 ## Usage
 
 ```jsx
+import { SwipeableList } from '@sandstreamdev/react-swipeable-list';
+import '@sandstreamdev/react-swipeable-list/dist/react-swipeable-list.cjs.css';
+
 <SwipeableList>
   <SwipeableListItem
     swipeLeft={{
@@ -45,7 +48,7 @@ yarn add @sandstreamdev/react-swipeable-list
   >
     <div>Item name</div>
   </SwipeableListItem>
-</SwipeableList>
+</SwipeableList>;
 ```
 
 NOTE: `SwipeableListItem` can be used without `SwipeableList` but swipe blocking on scroll needs to be handled.

package-lock.json

@@ -20,7 +20,6 @@
   ],
   "main": "dist/react-swipeable-list.cjs.js",
   "module": "dist/react-swipeable-list.esm.js",
-  "browser": "dist/react-swipeable-list.umd.js",
   "peerDependencies": {
     "prop-types": "^15.7.2",
     "react": "^16.8.0",
@@ -50,8 +49,6 @@
     "react-dom": "^16.8.0",
     "rollup": "^1.20.3",
     "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-commonjs": "^9.3.4",
-    "rollup-plugin-node-resolve": "^4.2.4",
     "rollup-plugin-postcss": "^2.0.3",
     "stylelint": "^11.0.0",
     "stylelint-config-standard": "^19.0.0"

package.json

@@ -1,40 +1,9 @@
-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
 import babel from 'rollup-plugin-babel';
 import postcss from 'rollup-plugin-postcss';
 
 import pkg from './package.json';
 
 export default [
-  {
-    input: 'src/index.js',
-    output: {
-      name: pkg.name,
-      file: pkg.browser,
-      format: 'umd'
-    },
-    plugins: [
-      resolve(),
-      babel({
-        exclude: ['node_modules/**']
-      }),
-      commonjs({
-        namedExports: {
-          'node_modules/react/index.js': [
-            'PureComponent',
-            'Children',
-            'createElement',
-            'useEffect',
-            'useState'
-          ]
-        }
-      }),
-      postcss({
-        extract: true,
-        modules: true
-      })
-    ]
-  },
   {
     input: 'src/index.js',
     external: ['react', 'prop-types'],

rollup.config.js

@@ -21,20 +21,43 @@
 }
 
 .contentRight {
-  composes: contentLeft;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  box-sizing: border-box;
+  opacity: 0;
   justify-content: flex-end;
 }
 
-.return {
-  transition: opacity 0.5s ease-out;
-}
-
 .contentLeftReturn {
-  composes: contentLeft return;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  box-sizing: border-box;
+  opacity: 0;
+  transition: opacity 0.5s ease-out;
 }
 
 .contentRightReturn {
-  composes: contentRight return;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  box-sizing: border-box;
+  opacity: 0;
+  justify-content: flex-end;
+  transition: opacity 0.5s ease-out;
 }
 
 .content {
@@ -47,6 +70,11 @@
 }
 
 .contentReturn {
-  composes: content;
+  width: 100%;
+  align-items: center;
+  box-sizing: border-box;
+  background-color: #fff;
+  height: 100%;
+  display: flex;
   transition: transform 0.5s ease-out;
 }