Merge branch 'update_example_for_dev_and_sandbox'

Author: Marek Rozmus

examples/images/delete.svg

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const Svg = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100%"
+    height="100%"
+    viewBox="0 0 24 24"
+    {...props}
+  />
+);
+
+export const DeleteIcon = () => (
+  <Svg>
+    <path fill="none" d="M0 0h24v24H0V0z" />
+    <path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z" />
+  </Svg>
+);
+
+export const MailIcon = () => (
+  <Svg>
+    <path fill="none" d="M0 0h24v24H0V0z" />
+    <path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 4.99L4 6h16zm0 12H4V8l8 5 8-5v10z" />
+  </Svg>
+);
+
+export const ReplyIcon = () => (
+  <Svg>
+    <path fill="none" d="M0 0h24v24H0V0z" />
+    <path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z" />
+  </Svg>
+);

examples/images/icons.js

@@ -24,6 +24,7 @@
   "scripts": {
     "predeploy": "webpack --mode production",
     "start": "webpack-dev-server",
+    "dev": "webpack-dev-server --config webpack.config.dev.js",
     "deploy": "gh-pages -d dist"
   },
   "devDependencies": {
@@ -33,7 +34,6 @@
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
-    "classnames": "^2.2.6",
     "css-loader": "^3.2.0",
     "eslint": "^6.3.0",
     "eslint-config-prettier": "^6.2.0",
@@ -43,7 +43,6 @@
     "gh-pages": "^2.1.1",
     "html-webpack-plugin": "^3.2.0",
     "prettier": "^1.18.2",
-    "react-svg-loader": "^3.0.3",
     "style-loader": "^1.0.0",
     "stylelint": "^11.0.0",
     "stylelint-config-standard": "^19.0.0",
@@ -53,6 +52,8 @@
     "webpack-dev-server": "^3.8.0"
   },
   "dependencies": {
+    "@sandstreamdev/react-swipeable-list": "^0.2.1",
+    "@sandstreamdev/std": "^0.1.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   }

examples/images/mail.svg

@@ -1,12 +1,14 @@
 import React, { useState } from 'react';
-import { SwipeableList, SwipeableListItem } from 'react-swipeable-list';
+import {
+  SwipeableList,
+  SwipeableListItem
+} from '@sandstreamdev/react-swipeable-list';
+import '@sandstreamdev/react-swipeable-list/dist/styles.css';
 
 import ListItem from './ComplexListItem';
 import ComplexItemContent from './ComplexItemContent';
-import MailIcon from '../images/mail.svg';
-import ReplyIcon from '../images/reply.svg';
-import DeleteIcon from '../images/delete.svg';
-import styles from './app.css';
+import { MailIcon, ReplyIcon, DeleteIcon } from '../images/icons';
+import styles from './app.module.css';
 
 function App() {
   const [triggeredSimpleItemAction, triggerSimpleItemAction] = useState('');