Merge pull request #20 from nikolay-borzov/task_08

Task 08 - Useful libraries

.babelrc

@@ -1,20 +1,30 @@
 {
   "plugins": [
+    [ "styled-components", { "displayName": false, "ssr": true }],
     "transform-class-properties",
     "transform-object-rest-spread",
     "syntax-dynamic-import",
     "react-loadable/babel"
   ],
   "presets": [
     ["env", { "modules": false }],
+    "flow",
     "react"
   ],
+  "retainLines": true,
   "env": {
     "development": {
-      "plugins": ["react-hot-loader/babel"]
+      "plugins": [
+          [ "styled-components", { "fileName": false, "ssr": true }],
+          "react-hot-loader/babel"
+        ]
     },
     "test": {
-      "plugins": ["transform-class-properties", "dynamic-import-node"],
+      "plugins": [
+        [ "styled-components", { "fileName": false }],
+        "transform-class-properties",
+        "dynamic-import-node"
+      ],
       "presets": ["env", "react"]
     }
   }

.eslintignore

@@ -0,0 +1 @@
+flow-typed/npm

.eslintrc.js

@@ -13,12 +13,16 @@ module.exports = {
     render: true,
     mount: true
   },
-  plugins: ['react'],
+  plugins: ['react', 'flowtype'],
   parser: 'babel-eslint',
   parserOptions: {
     ecmaFeatures: {
       jsx: true
     }
   },
-  extends: ['prettier-standard', 'plugin:react/recommended']
+  extends: [
+    'prettier-standard',
+    'plugin:react/recommended',
+    'plugin:flowtype/recommended'
+  ]
 }

.flowconfig

@@ -0,0 +1,17 @@
+[ignore]
+<PROJECT_ROOT>/dist
+<PROJECT_ROOT>/**.test.*
+
+[include]
+
+
+[libs]
+
+[lints]
+all=warn
+
+[options]
+emoji=true
+include_warnings=true
+
+[strict]

.gitignore

@@ -57,6 +57,9 @@ typings/
 # dotenv environment variables file
 .env
 
+# Flow type definitions
+flow-typed/npm
+
 dist
 
 .vscode

.storybook/addons.js

@@ -0,0 +1,2 @@
+import 'storybook-addon-jsx/register'
+import '@storybook/addon-actions/register'

.storybook/config.js

@@ -0,0 +1,15 @@
+import { configure, setAddon } from '@storybook/react'
+import JSXAddon from 'storybook-addon-jsx'
+
+// Import app styles
+import '../src/style.css'
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/)
+function loadStories() {
+  req.keys().forEach(filename => req(filename))
+}
+
+setAddon(JSXAddon)
+
+configure(loadStories, module)

.storybook/decorators/alt-background.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const styles = {
+  height: '100%',
+  position: 'absolute',
+  width: '100%'
+}
+
+export const AltBackground = storyFn => (
+  <div style={styles} className="alt-background">
+    {storyFn()}
+  </div>
+)

.storybook/decorators/centered.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const styles = {
+  height: '100%',
+  position: 'absolute',
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center'
+}
+
+export const Centered = storyFn => <div style={styles}>{storyFn()}</div>

.storybook/decorators/index.js

@@ -0,0 +1,2 @@
+export * from './centered'
+export * from './alt-background'

.storybook/webpack.config.js

@@ -0,0 +1,19 @@
+// you can use this file to add your custom webpack plugins, loaders and anything you like.
+// This is just the basic way to add additional webpack configurations.
+// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
+
+// IMPORTANT
+// When you add this file, we won't add the default configurations which is similar
+// to "React Create App". This only has babel loader to load JavaScript.
+
+const config = require('../webpack/webpack.config.client')
+
+module.exports = {
+  resolve: config.resolve,
+
+  plugins: [...config.plugins],
+
+  module: {
+    rules: [...config.module.rules]
+  }
+}

favicon-description.json

@@ -0,0 +1,59 @@
+{
+	"masterPicture": "src/assets/favicon.png",
+	"iconsPath": "/",
+	"design": {
+		"ios": {
+			"pictureAspect": "noChange",
+			"assets": {
+				"ios6AndPriorIcons": false,
+				"ios7AndLaterIcons": false,
+				"precomposedIcons": false,
+				"declareOnlyDefaultIcon": true
+			},
+			"appName": "Movie Search"
+		},
+		"desktopBrowser": {},
+		"windows": {
+			"pictureAspect": "noChange",
+			"backgroundColor": "#2d89ef",
+			"onConflict": "override",
+			"assets": {
+				"windows80Ie10Tile": false,
+				"windows10Ie11EdgeTiles": {
+					"small": false,
+					"medium": true,
+					"big": false,
+					"rectangle": false
+				}
+			},
+			"appName": "Movie Search"
+		},
+		"androidChrome": {
+			"pictureAspect": "noChange",
+			"themeColor": "#ffffff",
+			"manifest": {
+				"name": "Movie Search",
+				"display": "standalone",
+				"orientation": "notSet",
+				"onConflict": "override",
+				"declared": true
+			},
+			"assets": {
+				"legacyIcon": false,
+				"lowResolutionIcons": false
+			}
+		},
+		"safariPinnedTab": {
+			"pictureAspect": "silhouette",
+			"themeColor": "#5bbad5"
+		}
+	},
+	"settings": {
+		"compression": 5,
+		"scalingAlgorithm": "Mitchell",
+		"errorOnImageTooSmall": false,
+		"readmeFile": false,
+		"htmlCodeFile": false,
+		"usePathAsIs": false
+	}
+}

flow-typed/film.js

@@ -0,0 +1,11 @@
+// @flow
+
+declare type Film = {
+  id: number,
+  poster_path: string,
+  title: string,
+  vote_average: number,
+  genres: string[],
+  release_date: string,
+  overview: string
+}

flow-typed/globals.js

@@ -0,0 +1,5 @@
+// @flow
+
+declare var IS_DEVELOPMENT: boolean
+declare var IS_SERVER: boolean
+declare var API_URL: string

jest/stubs.js

@@ -1,10 +1,27 @@
 export const film = {
   id: 1,
   title: 'Film title',
-  poster_path: 'http://via.placeholder.com/500x750',
+  poster_path: 'https://picsum.photos/g/300/450/?random',
   overview: 'Film overview',
   release_date: '2018-05-04',
-  genres: ['some genre', 'another genre']
+  genres: ['some genre', 'another genre'],
+  vote_average: 7.5
 }
 
 export const films = [film]
+
+function getRandomImageId() {
+  // https://picsum.photos/images
+  return Math.floor(Math.random() * Math.floor(1084))
+}
+
+export function getRandomFilm(id) {
+  return {
+    ...film,
+    id,
+    poster_path: film.poster_path.replace(
+      'random',
+      `image=${getRandomImageId()}`
+    )
+  }
+}