Merge pull request #8 from acelaya/develop

Develop

.gitignore

@@ -20,3 +20,5 @@ package-lock.json
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+docker-compose.override.yml

.travis.yml

@@ -0,0 +1,19 @@
+language: node_js
+
+node_js:
+  - "stable"
+
+cache:
+  yarn: true
+  directories:
+    - node_modules
+
+install:
+  - yarn install
+
+script:
+  # - yarn inspect
+  - yarn test
+  - yarn build # Make sure the app can be built without errors
+
+sudo: false

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:10.4.1-alpine
+MAINTAINER Alejandro Celaya <alejandro@alejandrocelaya.com>
+
+# Install yarn
+RUN apk add --no-cache --virtual yarn
+
+# Make home dir writable by anyone
+RUN chmod 777 /home
+
+CMD cd /home/shlink/www && \
+    yarn install && \
+    yarn start

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 shlinkio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,5 +1,5 @@
 # shlink-web-client
 
-[![Build Status](https://travis-ci.org/shlinkio/shlink-web-client.svg?branch=develop)](https://travis-ci.org/shlinkio/shlink-web-client)
+[![Build Status](https://travis-ci.org/shlinkio/shlink-web-client.svg?branch=master)](https://travis-ci.org/shlinkio/shlink-web-client)
 
 A React-based client application for [Shlink](https://shlink.io)

config/setupEnzyme.js

@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });

config/webpack.config.dev.js

@@ -23,6 +23,27 @@ const publicUrl = '';
 // Get environment variables to inject into our app.
 const env = getClientEnvironment(publicUrl);
 
+const postCssLoader = {
+    loader: require.resolve('postcss-loader'),
+    options: {
+        // Necessary for external CSS imports to work
+        // https://github.com/facebookincubator/create-react-app/issues/2677
+        ident: 'postcss',
+        plugins: () => [
+            require('postcss-flexbugs-fixes'),
+            autoprefixer({
+                browsers: [
+                    '>1%',
+                    'last 4 versions',
+                    'Firefox ESR',
+                    'not ie < 9', // React doesn't support IE8 anyway
+                ],
+                flexbox: 'no-2009',
+            }),
+        ],
+    },
+};
+
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
 // The production configuration is different and lives in a separate file.
@@ -167,33 +188,14 @@ module.exports = {
                                     importLoaders: 1,
                                 },
                             },
-                            {
-                                loader: require.resolve('postcss-loader'),
-                                options: {
-                                    // Necessary for external CSS imports to work
-                                    // https://github.com/facebookincubator/create-react-app/issues/2677
-                                    ident: 'postcss',
-                                    plugins: () => [
-                                        require('postcss-flexbugs-fixes'),
-                                        autoprefixer({
-                                            browsers: [
-                                                '>1%',
-                                                'last 4 versions',
-                                                'Firefox ESR',
-                                                'not ie < 9', // React doesn't support IE8 anyway
-                                            ],
-                                            flexbox: 'no-2009',
-                                        }),
-                                    ],
-                                },
-                            },
+                            postCssLoader,
                         ],
                     },
                     {
                         test: /\.scss$/,
                         use: ExtractTextPlugin.extract({
                             fallback: 'style-loader',
-                            use: ['css-loader', 'sass-loader']
+                            use: ['css-loader', 'sass-loader', postCssLoader]
                         })
                     },
                     // "file" loader makes sure those assets get served by WebpackDevServer.
@@ -251,7 +253,7 @@ module.exports = {
         // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
         // You can remove this if you don't use Moment.js:
         new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-        new ExtractTextPlugin('main.[hash:8].css'),
+        new ExtractTextPlugin('main.css'),
     ],
     // Some libraries import Node modules but don't use them in the browser.
     // Tell Webpack to provide empty mocks for them so importing them works.

dist/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

docker-compose.override.yml.dist

@@ -0,0 +1,8 @@
+version: '3'
+
+services:
+    shlink_web_client_node:
+        user: 1000:1000
+        volumes:
+            - /etc/passwd:/etc/passwd:ro
+            - /etc/group:/etc/group:ro

docker-compose.yml

@@ -0,0 +1,13 @@
+version: '3'
+
+services:
+    shlink_web_client_node:
+        container_name: shlink_web_client_node
+        build:
+            context: .
+            dockerfile: ./Dockerfile
+        volumes:
+            - ./:/home/shlink/www
+        ports:
+            - "3000:3000"
+            - "56745:56745"

indocker

@@ -0,0 +1,2 @@
+#!/usr/bin/env bash
+docker exec -it shlink_web_client_node /bin/sh -c "cd /home/shlink/www && $*"

package.json

@@ -1,8 +1,41 @@
 {
   "name": "shlink-web-client-react",
+  "description": "A React-based web client for shlink",
   "version": "0.1.0",
-  "private": true,
+  "private": false,
+  "scripts": {
+    "start": "node scripts/start.js",
+    "build": "node scripts/build.js",
+    "test": "node scripts/test.js --env=jsdom"
+  },
   "dependencies": {
+    "@fortawesome/fontawesome": "^1.1.8",
+    "@fortawesome/fontawesome-free-regular": "^5.0.13",
+    "@fortawesome/fontawesome-free-solid": "^5.0.13",
+    "@fortawesome/react-fontawesome": "0.0.19",
+    "axios": "^0.18.0",
+    "bootstrap": "^4.1.1",
+    "chart.js": "^2.7.2",
+    "moment": "^2.22.2",
+    "promise": "8.0.1",
+    "qs": "^6.5.2",
+    "ramda": "^0.25.0",
+    "react": "^16.3.2",
+    "react-chartjs-2": "^2.7.4",
+    "react-copy-to-clipboard": "^5.0.1",
+    "react-datepicker": "^1.5.0",
+    "react-dom": "^16.3.2",
+    "react-moment": "^0.7.6",
+    "react-redux": "^5.0.7",
+    "react-router-dom": "^4.2.2",
+    "react-tag-autocomplete": "^5.5.1",
+    "reactstrap": "^6.0.1",
+    "redux": "^4.0.0",
+    "redux-thunk": "^2.3.0",
+    "uuid": "^3.3.2"
+  },
+  "devDependencies": {
+    "adm-zip": "^0.4.11",
     "autoprefixer": "7.1.6",
     "babel-core": "6.26.0",
     "babel-eslint": "7.2.3",
@@ -15,26 +48,28 @@
     "css-loader": "0.28.7",
     "dotenv": "4.0.0",
     "dotenv-expand": "4.2.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "4.10.0",
     "eslint-config-react-app": "^2.1.0",
     "eslint-loader": "1.9.0",
     "eslint-plugin-flowtype": "2.39.1",
     "eslint-plugin-import": "2.8.0",
     "eslint-plugin-jsx-a11y": "5.1.1",
     "eslint-plugin-react": "7.4.0",
+    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "1.1.5",
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.29.0",
     "jest": "20.0.4",
+    "node-sass": "^4.9.0",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.8",
-    "promise": "8.0.1",
     "raf": "3.4.0",
-    "react": "^16.3.2",
     "react-dev-utils": "^5.0.1",
-    "react-dom": "^16.3.2",
     "resolve": "1.6.0",
+    "sass-loader": "^7.0.1",
     "style-loader": "0.19.0",
     "sw-precache-webpack-plugin": "0.11.4",
     "url-loader": "0.6.2",
@@ -43,26 +78,16 @@
     "webpack-manifest-plugin": "1.3.2",
     "whatwg-fetch": "2.0.3"
   },
-  "scripts": {
-    "start": "node scripts/start.js",
-    "build": "node scripts/build.js",
-    "test": "node scripts/test.js --env=jsdom"
-  },
-  "devDependencies": {
-    "extract-text-webpack-plugin": "^3.0.2",
-    "node-sass": "^4.9.0",
-    "sass-loader": "^7.0.1"
-  },
   "jest": {
     "collectCoverageFrom": [
       "src/**/*.{js,jsx,mjs}"
     ],
     "setupFiles": [
-      "<rootDir>/config/polyfills.js"
+      "<rootDir>/config/polyfills.js",
+      "<rootDir>/config/setupEnzyme.js"
     ],
     "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
-      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
+      "<rootDir>/test/**/*.test.{js,jsx,mjs}"
     ],
     "testEnvironment": "node",
     "testURL": "http://localhost",

public/index.html

@@ -2,12 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="theme-color" content="#4696e5">
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/icons/shlink-128.png">
+    <link rel="apple-touch-icon" sizes="64x64" href="%PUBLIC_URL%/icons/shlink-64.png">
+    <link rel="apple-touch-icon" sizes="32x32" href="%PUBLIC_URL%/icons/shlink-32.png">
+    <link rel="apple-touch-icon" sizes="24x24" href="%PUBLIC_URL%/icons/shlink-24.png">
+    <link rel="apple-touch-icon" sizes="16x16" href="%PUBLIC_URL%/icons/shlink-16.png">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <!--
@@ -19,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Shlink — The URL shortener</title>
   </head>
   <body>
     <noscript>

public/manifest.json

@@ -1,15 +1,35 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Shlink",
+  "name": "Shlink web client",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "./icons/shlink-128.png",
+      "type": "image/png",
+      "sizes": "128x128"
+    },
+    {
+      "src": "./icons/shlink-64.png",
+      "type": "image/png",
+      "sizes": "64x64"
+    },
+    {
+      "src": "./icons/shlink-32.png",
+      "type": "image/png",
+      "sizes": "32x32"
+    },
+    {
+      "src": "./icons/shlink-24.png",
+      "type": "image/png",
+      "sizes": "24x24"
+    },
+    {
+      "src": "./icons/shlink-16.png",
+      "type": "image/png",
+      "sizes": "16x16"
     }
   ],
-  "start_url": "./index.html",
+  "start_url": "/",
   "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "theme_color": "#4696e5",
+  "background_color": "#4696e5"
 }

scripts/build.js

@@ -25,6 +25,7 @@ const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 const printBuildError = require('react-dev-utils/printBuildError');
+const AdmZip = require('adm-zip');
 
 const measureFileSizesBeforeBuild =
   FileSizeReporter.measureFileSizesBeforeBuild;
@@ -98,7 +99,8 @@ measureFileSizesBeforeBuild(paths.appBuild)
       printBuildError(err);
       process.exit(1);
     }
-  );
+  )
+  .then(zipDist);
 
 // Create the production build and print the deployment instructions.
 function build(previousFileSizes) {
@@ -148,3 +150,28 @@ function copyPublicFolder() {
     filter: file => file !== paths.appHtml,
   });
 }
+
+function zipDist() {
+  // If no version was provided, do nothing
+  if (process.argv.length < 3) {
+    return;
+  }
+
+  const version = process.argv[2];
+  const versionFileName = `./dist/shlink-web-client_${version}_dist.zip`;
+
+  console.log(chalk.cyan(`Generating dist file for version ${chalk.bold(version)}...`));
+  const zip = new AdmZip();
+
+  try {
+    if (fs.existsSync(versionFileName)) {
+      fs.unlink(versionFileName);
+    }
+    zip.addLocalFolder('./build', `shlink-web-client_${version}_dist`);
+    zip.writeZip(versionFileName);
+    console.log(chalk.green('Dist file properly generated'));
+  } catch (e) {
+    console.log(chalk.red('An error occurred while generating dist file'));
+    console.log(e);
+  }
+}