Merge pull request #691 from didi0613/update-sample-demo-component

[major] update sample demo component to React 16
electrode-io · Jan 20, 2018 · 44f319b · 44f319b
2 parents b5cfa08 + 09f05bc
commit 44f319b
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 51 deletions.
diff --git a/samples/demo-component/demo-app/archetype/config/webpack/webpack.config.dev.js b/samples/demo-component/demo-app/archetype/config/webpack/webpack.config.dev.js
@@ -5,7 +5,9 @@ const repoPackagesDir = Path.join(__dirname, "../../../../packages");
 module.exports = {
   resolve: {
     alias: {
-      "demo-component": Path.join(repoPackagesDir, "demo-component/src")
+      "demo-component": Path.join(repoPackagesDir, "demo-component/src"),
+      "react": Path.dirname(require.resolve("react/package.json")),
+      "react-dom": Path.dirname(require.resolve("react-dom/package.json"))
     },
     modules: [
       Path.join(repoPackagesDir, "demo-component"),

diff --git a/samples/demo-component/demo-app/archetype/config/webpack/webpack.config.js b/samples/demo-component/demo-app/archetype/config/webpack/webpack.config.js
@@ -6,7 +6,9 @@ const repoPackagesDir = Path.join(__dirname, "../../../../packages");
 module.exports = {
   resolve: {
     alias: {
-      "demo-component": Path.join(repoPackagesDir, "demo-component/src")
+      "demo-component": Path.join(repoPackagesDir, "demo-component/src"),
+      "react": Path.dirname(require.resolve("react/package.json")),
+      "react-dom": Path.dirname(require.resolve("react-dom/package.json"))
     },
     modules: [
       Path.join(repoPackagesDir, "demo-component"),

diff --git a/samples/demo-component/demo-app/package.json b/samples/demo-component/demo-app/package.json
@@ -43,17 +43,15 @@
   "dependencies": {
     "bluebird": "^3.4.6",
     "electrode-archetype-react-app": "../../../packages/electrode-archetype-react-app",
-    "electrode-confippet": "^1.0.0",
-    "electrode-react-webapp": "^1.1.0",
-    "electrode-redux-router-engine": "^1.2.2",
+    "electrode-confippet": "^1.5.0",
+    "electrode-react-webapp": "../../../packages/electrode-react-webapp",
+    "electrode-redux-router-engine": "../../../packages/electrode-redux-router-engine",
     "electrode-server": "^1.0.0",
     "electrode-static-paths": "^1.0.0",
     "lodash": "^4.10.1"
   },
   "devDependencies": {
-    "electrode-archetype-react-app-dev": "../../../packages/electrode-archetype-react-app-dev",
-    "json-stringify-safe": "^5.0.1",
-    "safe-json-stringify": "^1.0.4"
+    "electrode-archetype-react-app-dev": "../../../packages/electrode-archetype-react-app-dev"
   },
   "private": true
 }
diff --git a/samples/demo-component/package.json b/samples/demo-component/package.json
@@ -20,7 +20,9 @@
   },
   "dependency": {},
   "devDependencies": {
-    "lerna": "^2.0.0-rc.1",
-    "lodash": "^4.10.1"
-  }
+    "lerna": "^2.7.1",
+    "lodash": "^4.10.1",
+    "xclap": "^0.2.0"
+  },
+  "private": true
 }
diff --git a/samples/demo-component/packages/demo-component/package.json b/samples/demo-component/packages/demo-component/package.json
@@ -16,8 +16,7 @@
   },
   "homepage": "https://github.com/electrode-io/electrode",
   "dependencies": {
-    "material-ui": "^0.18.3",
-    "react-tap-event-plugin": "^2.0.1"
+    "material-ui": "^0.20.0"
   },
   "devDependencies": {
     "electrode-archetype-react-component": "../../../../packages/electrode-archetype-react-component",

diff --git a/samples/demo-component/packages/demo-component/src/components/AppBarExampleIconMenu.jsx b/samples/demo-component/packages/demo-component/src/components/AppBarExampleIconMenu.jsx
@@ -6,21 +6,24 @@ import MenuItem from "material-ui/MenuItem";
 import MoreVertIcon from "material-ui/svg-icons/navigation/more-vert";
 import NavigationClose from "material-ui/svg-icons/navigation/close";
 
-const AppBarExampleIconMenu = () =>
-  <AppBar
-    title="Electrode React Sample Component with material-ui"
-    iconElementLeft={<IconButton><NavigationClose /></IconButton>}
-    iconElementRight={
-      <IconMenu
-        iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
-        targetOrigin={{ horizontal: "right", vertical: "top" }}
-        anchorOrigin={{ horizontal: "right", vertical: "top" }}
-      >
-        <MenuItem primaryText="Refresh" />
-        <MenuItem primaryText="Help" />
-        <MenuItem primaryText="Sign out" />
-      </IconMenu>
-    }
-  />;
+const AppBarExampleIconMenu = () => {
+  return (
+    <AppBar
+      title="Electrode React Sample Component with material-ui"
+      iconElementLeft={<IconButton><NavigationClose /></IconButton>}
+      iconElementRight={
+        <IconMenu
+          iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
+          targetOrigin={{ horizontal: "right", vertical: "top" }}
+          anchorOrigin={{ horizontal: "right", vertical: "top" }}
+        >
+          <MenuItem primaryText="Refresh" />
+          <MenuItem primaryText="Help" />
+          <MenuItem primaryText="Sign out" />
+        </IconMenu>
+      }
+    />
+  );
+};
 
 export default AppBarExampleIconMenu;
diff --git a/samples/demo-component/packages/demo-component/src/components/CardExampleWithAvatar.jsx b/samples/demo-component/packages/demo-component/src/components/CardExampleWithAvatar.jsx
@@ -6,25 +6,28 @@ import avatarJpg from "../../images/jchip-128.jpg";
 import { FormattedMessage } from "react-intl";
 import messages from "../lang/default-messages";
 
-const CardExampleWithAvatar = () =>
-  <Card>
-    <CardHeader title="URL Avatar" subtitle="Subtitle" avatar={avatarJpg} />
-    <CardMedia overlay={<CardTitle title="Overlay title" subtitle="Overlay subtitle" />}>
-      <img src={natureJpg} />
-    </CardMedia>
-    <CardTitle title="Card title" subtitle="Card subtitle" />
-    <CardText>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
-      Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
-      Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.<p />
-      <FormattedMessage {...messages.editMe} />
+const CardExampleWithAvatar = () => {
+  return (
+    <Card>
+      <CardHeader title="URL Avatar" subtitle="Subtitle" avatar={avatarJpg} />
+      <CardMedia overlay={<CardTitle title="Overlay title" subtitle="Overlay subtitle" />}>
+        <img src={natureJpg} />
+      </CardMedia>
+      <CardTitle title="Card title" subtitle="Card subtitle" />
+      <CardText>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
+        Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
+        Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.<p />
+        <FormattedMessage {...messages.editMe} />
 
-    </CardText>
-    <CardActions>
-      <FlatButton label="Action1" />
-      <FlatButton label="Action2" />
-    </CardActions>
-  </Card>;
+      </CardText>
+      <CardActions>
+        <FlatButton label="Action1" />
+        <FlatButton label="Action2" />
+      </CardActions>
+    </Card>
+  );
+};
 
 export default CardExampleWithAvatar;
diff --git a/...mponent/packages/demo-component/test/client/components/helpers/intl-enzyme-test-helper.js b/...mponent/packages/demo-component/test/client/components/helpers/intl-enzyme-test-helper.js
@@ -19,11 +19,11 @@ const { intl } = intlProvider.getChildContext();
 /*
   When using React-Intl `injectIntl` on components, props.intl is required.
 */
-const nodeWithIntlProp = (node) => {
+const nodeWithIntlProp = node => {
   return React.cloneElement(node, { intl });
 };
 
-const shallowWithIntl = (node) => {
+const shallowWithIntl = node => {
   return shallow(
     nodeWithIntlProp(node),
     {
@@ -32,7 +32,7 @@ const shallowWithIntl = (node) => {
   );
 };
 
-const mountWithIntl = (node) => {
+const mountWithIntl = node => {
   return mount(
     nodeWithIntlProp(node),
     {