diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 00000000..8839bdef --- /dev/null +++ b/.eslintrc @@ -0,0 +1,40 @@ +{ + "extends": [ + "adidas-env/browser", + "adidas-env/module", + "adidas-es6", + "adidas-babel", + "adidas-react" + ], + "plugins": ["jest"], + "env": { + "jest/globals": true + }, + "globals": { + "process": true, + "setImmediate": true + }, + "settings": { + "react": { + "version": "16.3" + } + }, + "rules": { + "comma-dangle": ["error", "always-multiline"], + "no-invalid-this": "off", + "no-console": "warn", + "template-curly-spacing": ["error", "never"], + "no-warning-comments": "off", + "no-undefined": "off", + "indent": ["error", 2, { + "SwitchCase": 1 + } + ], + "react/jsx-curly-spacing": ["error", "never"], + "react/jsx-indent-props": ["error", 2], + "react/jsx-first-prop-new-line": ["error", "multiline-multiprop"], + "react/jsx-closing-bracket-location": ["error", "tag-aligned"], + "react/no-array-index-key": "off", + "react/no-did-update-set-state": "off" + } +} diff --git a/.scrutinizer.yml b/.scrutinizer.yml new file mode 100644 index 00000000..3d6be607 --- /dev/null +++ b/.scrutinizer.yml @@ -0,0 +1,5 @@ +build: + environment: + node: v10.4.1 +tools: + external_code_coverage: true diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 00000000..c8ae1880 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,11 @@ +{ + "extends": [ + "stylelint-config-adidas", + "stylelint-config-adidas-bem", + "stylelint-config-recommended-scss" + ], + "syntax": "scss", + "plugins": [ + "stylelint-scss" + ] +} diff --git a/.travis.yml b/.travis.yml index e5689640..f90670eb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -12,8 +12,11 @@ install: - yarn install script: - # - yarn inspect - - yarn test + - yarn lint + - yarn test:ci - yarn build # Make sure the app can be built without errors +after_script: + - yarn ocular coverage/clover.xml + sudo: false diff --git a/CHANGELOG.md b/CHANGELOG.md index ed8c3c2b..748a8ca1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,44 @@ # CHANGELOG +## 1.0.0 - 2018-08-26 + +#### Added + +* [#4](https://github.com/shlinkio/shlink-web-client/issues/4) Now it is possible to export and import servers. + + * Export all servers in a CSV file. + * Import the CSV in a different device. + +* [#4](https://github.com/shlinkio/shlink-web-client/issues/4) Added tags management. + + * List existing tags, and filter the list. + * Change their name and color. + * Jump to URLs list filtering by one tag. + +* [#5](https://github.com/shlinkio/shlink-web-client/issues/5) Tags for existing URLs can be edited now. +* [#24](https://github.com/shlinkio/shlink-web-client/issues/24) Improved left menu in mobile devices, which is now a swipeable sidebar instead of a stacked top bar. +* [#22](https://github.com/shlinkio/shlink-web-client/issues/22) Improved code coverage. +* [#28](https://github.com/shlinkio/shlink-web-client/issues/28) Added integration with [Scrutinizer](https://scrutinizer-ci.com/g/shlinkio/shlink-web-client/). + +#### Changed + +* [#33](https://github.com/shlinkio/shlink-web-client/issues/33) Changed to [adidas coding style](https://github.com/adidas/js-linter-configs) for Javascript. +* [#32](https://github.com/shlinkio/shlink-web-client/issues/32) Changed to [adidas coding style](https://github.com/adidas/js-linter-configs) for stylesheets. +* [#26](https://github.com/shlinkio/shlink-web-client/issues/26) The tags input now displays tags using their actual color. + +#### Deprecated + +* *Nothing* + +#### Removed + +* *Nothing* + +#### Fixed + +* *Nothing* + + ## 0.2.0 - 2018-08-12 #### Added diff --git a/README.md b/README.md index 50ec89ef..88727204 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,10 @@ # shlink-web-client -[![Build Status](https://travis-ci.org/shlinkio/shlink-web-client.svg?branch=master)](https://travis-ci.org/shlinkio/shlink-web-client) +[![Build Status](https://img.shields.io/travis/shlinkio/shlink-web-client.svg?style=flat-square)](https://travis-ci.org/shlinkio/shlink-web-client) +[![Code Coverage](https://img.shields.io/scrutinizer/coverage/g/shlinkio/shlink-web-client.svg?style=flat-square)](https://scrutinizer-ci.com/gshlinkio/shlink-web-client/?branch=master) +[![Scrutinizer Code Quality](https://img.shields.io/scrutinizer/g/shlinkio/shlink-web-client.svg?style=flat-square)](https://scrutinizer-ci.com/g/shlinkio/shlink-web-client/?branch=master) +[![GitHub release](https://img.shields.io/github/release/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/releases/latest) +[![GitHub license](https://img.shields.io/github/license/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/blob/master/LICENSE) A ReactJS-based progressive web application for [Shlink](https://shlink.io). diff --git a/config/env.js b/config/env.js index 30a6c7f1..c4178db5 100644 --- a/config/env.js +++ b/config/env.js @@ -1,4 +1,3 @@ -'use strict'; const fs = require('fs'); const path = require('path'); @@ -7,7 +6,8 @@ const paths = require('./paths'); // Make sure that including paths.js after env.js will read .env variables. delete require.cache[require.resolve('./paths')]; -const NODE_ENV = process.env.NODE_ENV; +const { NODE_ENV } = process.env; + if (!NODE_ENV) { throw new Error( 'The NODE_ENV environment variable is required but was not specified.' @@ -15,9 +15,10 @@ if (!NODE_ENV) { } // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use -var dotenvFiles = [ +const dotenvFiles = [ `${paths.dotenv}.${NODE_ENV}.local`, `${paths.dotenv}.${NODE_ENV}`, + // Don't include `.env.local` for `test` environment // since normally you expect tests to produce the same // results for everyone @@ -30,7 +31,7 @@ var dotenvFiles = [ // that have already been set. Variable expansion is supported in .env files. // https://github.com/motdotla/dotenv // https://github.com/motdotla/dotenv-expand -dotenvFiles.forEach(dotenvFile => { +dotenvFiles.forEach((dotenvFile) => { if (fs.existsSync(dotenvFile)) { require('dotenv-expand')( require('dotenv').config({ @@ -50,10 +51,11 @@ dotenvFiles.forEach(dotenvFile => { // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421 // We also resolve them to make sure all tools using them work consistently. const appDirectory = fs.realpathSync(process.cwd()); + process.env.NODE_PATH = (process.env.NODE_PATH || '') .split(path.delimiter) - .filter(folder => folder && !path.isAbsolute(folder)) - .map(folder => path.resolve(appDirectory, folder)) + .filter((folder) => folder && !path.isAbsolute(folder)) + .map((folder) => path.resolve(appDirectory, folder)) .join(path.delimiter); // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be @@ -62,16 +64,19 @@ const REACT_APP = /^REACT_APP_/i; function getClientEnvironment(publicUrl) { const raw = Object.keys(process.env) - .filter(key => REACT_APP.test(key)) + .filter((key) => REACT_APP.test(key)) .reduce( (env, key) => { env[key] = process.env[key]; + return env; }, { + // Useful for determining whether we’re running in production mode. // Most importantly, it switches React into the correct mode. NODE_ENV: process.env.NODE_ENV || 'development', + // Useful for resolving the correct path to static assets in `public`. // For example, . // This should only be used as an escape hatch. Normally you would put @@ -79,10 +84,12 @@ function getClientEnvironment(publicUrl) { PUBLIC_URL: publicUrl, } ); + // Stringify all values so we can feed into Webpack DefinePlugin const stringified = { 'process.env': Object.keys(raw).reduce((env, key) => { env[key] = JSON.stringify(raw[key]); + return env; }, {}), }; diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js index 8f651148..4e138d18 100644 --- a/config/jest/cssTransform.js +++ b/config/jest/cssTransform.js @@ -1,4 +1,3 @@ -'use strict'; // This is a custom Jest transformer turning style imports into empty objects. // http://facebook.github.io/jest/docs/en/webpack.html diff --git a/config/jest/fileTransform.js b/config/jest/fileTransform.js index 9e4047d3..1162d1dd 100644 --- a/config/jest/fileTransform.js +++ b/config/jest/fileTransform.js @@ -1,4 +1,3 @@ -'use strict'; const path = require('path'); diff --git a/config/paths.js b/config/paths.js index 0ec6667c..875467cd 100644 --- a/config/paths.js +++ b/config/paths.js @@ -1,4 +1,3 @@ -'use strict'; const path = require('path'); const fs = require('fs'); @@ -7,22 +6,23 @@ const url = require('url'); // Make sure any symlinks in the project folder are resolved: // https://github.com/facebookincubator/create-react-app/issues/637 const appDirectory = fs.realpathSync(process.cwd()); -const resolveApp = relativePath => path.resolve(appDirectory, relativePath); +const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath); const envPublicUrl = process.env.PUBLIC_URL; function ensureSlash(path, needsSlash) { const hasSlash = path.endsWith('/'); + if (hasSlash && !needsSlash) { return path.substr(path, path.length - 1); } else if (!hasSlash && needsSlash) { return `${path}/`; - } else { - return path; } + + return path; } -const getPublicUrl = appPackageJson => +const getPublicUrl = (appPackageJson) => envPublicUrl || require(appPackageJson).homepage; // We use `PUBLIC_URL` environment variable or "homepage" field to infer @@ -34,6 +34,7 @@ const getPublicUrl = appPackageJson => function getServedPath(appPackageJson) { const publicUrl = getPublicUrl(appPackageJson); const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/'); + return ensureSlash(servedUrl, true); } diff --git a/config/polyfills.js b/config/polyfills.js index 66dff0a8..1e503e8b 100644 --- a/config/polyfills.js +++ b/config/polyfills.js @@ -1,4 +1,3 @@ -'use strict'; if (typeof Promise === 'undefined') { // Rejection tracking prevents a common issue where React gets into an diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 9cccca44..2a09a3c2 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -1,7 +1,6 @@ -'use strict'; -const autoprefixer = require('autoprefixer'); const path = require('path'); +const autoprefixer = require('autoprefixer'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); @@ -9,265 +8,301 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); const eslintFormatter = require('react-dev-utils/eslintFormatter'); const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); const getClientEnvironment = require('./env'); const paths = require('./paths'); -const ExtractTextPlugin = require('extract-text-webpack-plugin'); // Webpack uses `publicPath` to determine where the app is being served from. // In development, we always serve from the root. This makes config easier. const publicPath = '/'; + // `publicUrl` is just like `publicPath`, but we will provide it to our app // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. 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', - }), + 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', ], - }, + 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. module.exports = { - // You may want 'eval' instead if you prefer to see the compiled output in DevTools. - // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343. - devtool: 'cheap-module-source-map', - // These are the "entry points" to our application. - // This means they will be the "root" imports that are included in JS bundle. - // The first two entry points enable "hot" CSS and auto-refreshes for JS. - entry: [ - // We ship a few polyfills by default: - require.resolve('./polyfills'), - // Include an alternative client for WebpackDevServer. A client's job is to - // connect to WebpackDevServer by a socket and get notified about changes. - // When you save a file, the client will either apply hot updates (in case - // of CSS changes), or refresh the page (in case of JS changes). When you - // make a syntax error, this client will display a syntax error overlay. - // Note: instead of the default WebpackDevServer client, we use a custom one - // to bring better experience for Create React App users. You can replace - // the line below with these two lines if you prefer the stock client: - // require.resolve('webpack-dev-server/client') + '?/', - // require.resolve('webpack/hot/dev-server'), - require.resolve('react-dev-utils/webpackHotDevClient'), - // Finally, this is your app's code: - paths.appIndexJs, - // We include the app code last so that if there is a runtime error during - // initialization, it doesn't blow up the WebpackDevServer client, and - // changing JS code would still trigger a refresh. - ], - output: { - // Add /* filename */ comments to generated require()s in the output. - pathinfo: true, - // This does not produce a real file. It's just the virtual path that is - // served by WebpackDevServer in development. This is the JS bundle - // containing code from all our entry points, and the Webpack runtime. - filename: 'static/js/bundle.js', - // There are also additional JS chunk files if you use code splitting. - chunkFilename: 'static/js/[name].chunk.js', - // This is the URL that app is served from. We use "/" in development. - publicPath: publicPath, - // Point sourcemap entries to original disk location (format as URL on Windows) - devtoolModuleFilenameTemplate: info => - path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'), - }, - resolve: { - // This allows you to set a fallback for where Webpack should look for modules. - // We placed these paths second because we want `node_modules` to "win" - // if there are any conflicts. This matches Node resolution mechanism. - // https://github.com/facebookincubator/create-react-app/issues/253 - modules: ['node_modules', paths.appNodeModules].concat( - // It is guaranteed to exist because we tweak it in `env.js` - process.env.NODE_PATH.split(path.delimiter).filter(Boolean) - ), - // These are the reasonable defaults supported by the Node ecosystem. - // We also include JSX as a common component filename extension to support - // some tools, although we do not recommend using it, see: - // https://github.com/facebookincubator/create-react-app/issues/290 - // `web` extension prefixes have been added for better support - // for React Native Web. - extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'], - alias: { - // Support React Native Web - // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ - 'react-native': 'react-native-web', - }, - plugins: [ - // Prevents users from importing files from outside of src/ (or node_modules/). - // This often causes confusion because we only process files within src/ with babel. - // To fix this, we prevent you from importing files out of src/ -- if you'd like to, - // please link the files into your node_modules/ and let module-resolution kick in. - // Make sure your source files are compiled, as they will not be processed in any way. - new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), - ], - }, - module: { - strictExportPresence: true, - rules: [ - // TODO: Disable require.ensure as it's not a standard language feature. - // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176. - // { parser: { requireEnsure: false } }, + // You may want 'eval' instead if you prefer to see the compiled output in DevTools. + // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343. + devtool: 'cheap-module-source-map', - // First, run the linter. - // It's important to do this before Babel processes the JS. - { - test: /\.(js|jsx|mjs)$/, - enforce: 'pre', - use: [ - { - options: { - formatter: eslintFormatter, - eslintPath: require.resolve('eslint'), + // These are the "entry points" to our application. + // This means they will be the "root" imports that are included in JS bundle. + // The first two entry points enable "hot" CSS and auto-refreshes for JS. + entry: [ - }, - loader: require.resolve('eslint-loader'), - }, - ], - include: paths.appSrc, - }, - { - // "oneOf" will traverse all following loaders until one will - // match the requirements. When no loader matches it will fall - // back to the "file" loader at the end of the loader list. - oneOf: [ - // "url" loader works like "file" loader except that it embeds assets - // smaller than specified limit in bytes as data URLs to avoid requests. - // A missing `test` is equivalent to a match. - { - test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], - loader: require.resolve('url-loader'), - options: { - limit: 10000, - name: 'static/media/[name].[hash:8].[ext]', - }, - }, - // Process JS with Babel. - { - test: /\.(js|jsx|mjs)$/, - include: paths.appSrc, - loader: require.resolve('babel-loader'), - options: { + // We ship a few polyfills by default: + require.resolve('./polyfills'), - // This is a feature of `babel-loader` for webpack (not Babel itself). - // It enables caching results in ./node_modules/.cache/babel-loader/ - // directory for faster rebuilds. - cacheDirectory: true, - }, - }, - // "postcss" loader applies autoprefixer to our CSS. - // "css" loader resolves paths in CSS and adds assets as dependencies. - // "style" loader turns CSS into JS modules that inject