Fix audio issues

.babelrc

@@ -3,15 +3,12 @@
   "plugins": [
     "transform-runtime",
     "transform-decorators-legacy",
-    "transform-react-display-name",
-    ["system-import-transformer", {"modules": "common"}]
+    "transform-react-display-name", ["system-import-transformer", {
+      "modules": "common"
+    }],
+    "transform-react-require", "external-helpers", "transform-export-extensions"
   ],
   "env": {
-    "development": {
-      "plugins": [
-        "typecheck"
-      ]
-    },
     "production": {
       "plugins": [
         "transform-react-inline-elements",

.circleci/config.yml

@@ -0,0 +1,42 @@
+version: 2
+jobs:
+  build:
+    docker:
+      - image: circleci/node:latest
+    steps:
+    - checkout
+    - run:
+        name: install
+        command: npm install
+    - run:
+        name: rebuildSass
+        command: npm rebuild node-sass
+    - run:
+        name: build
+        command: npm run build
+    - run:
+        name: bundlesize
+        command: npm run bundlesize
+  test:
+    docker:
+      - image: circleci/node:latest
+    steps:
+    - checkout
+    - run:
+        name: install
+        command: npm install
+    - run:
+        name: lint
+        command: npm run lint
+    - run:
+        name: jest
+        command: npm run jest -- --forceExit --detectOpenHandles --runInBand
+    - run:
+        name: typescript
+        command: npm run type
+workflows:
+  version: 2
+  test_and_build:
+    jobs:
+      - build
+      - test

.env

@@ -1,9 +1,11 @@
 NODE_ENV=development
 PORT=8000
-API_URL=http://staging.quran.com:3000
+API_URL=https://staging.quran.com:3000
 ONE_QURAN_URL=http://localhost:3030
 SEGMENTS_KEY=
 SENTRY_KEY_CLIENT=
 SENTRY_KEY_SERVER=
 # Quran.com - development app, no need to worry!
 FACEBOOK_APP_ID=1599019233731707
+FONTS_URL=//quran-1f14.kxcdn.com
+AUDIO_CDN=//audio.qurancdn.com

.eslintrc.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+const paths = [path.join(__dirname, './config/eslint/base.js')];
+
+paths.push(path.join(__dirname, './config/eslint/typescript.js'));
+
+paths.push(path.join(__dirname, './config/eslint/prettier.js'));
+
+module.exports = {
+  extends: paths,
+};

CONTRIBUTING.md → .github/CONTRIBUTING.md

@@ -1,12 +1,13 @@
 # Contributing
 
-You want to help? You rock! Now, take a moment to be sure your contributions make sense to everyone else.
+Thank you very much for your interest to help. We could use as much help as possible from our community.
 
 ## Reporting Issues
 
 Found a problem? Want a new feature?
 
 - See if your issue or idea has [already been reported].
+- File a new issue in Github.
 
 
 ## Submitting Pull Requests

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,26 @@
+<!--
+- Before submitting, please search for:
+  - Similar issue: https://github.com/quran/quran.com-frontend/issues
+  - Pull Requests: https://github.com/quran/quran.com-frontend/pulls
+  - Test if bug/feature present on staging as well: staging.quran.com
+-->
+
+**I'm submitting a ...**
+<!-- (check one with "x") -->
+- [ ] bug report
+- [ ] feature request
+- [ ] other
+
+**Current behavior:**
+<!-- Describe how the bug manifests / how the current features are insufficient. -->
+
+**Expected / new behavior:**
+<!-- Describe what the behavior would be without the bug / how the feature would improve Quran.com -->
+
+**For issue, please provide steps to reproduce it:**
+- Steps 
+- to
+- reproduce 
+
+**Anything else:**
+<!-- e.g. browser, errors details, or suggestions how to fix -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,12 @@
+### Title of change
+_why the change and what has changed_
+
+### Checklist
+
+- [ ] Unit tests written
+- [ ] Manually tested
+- [ ] Prettier & ESLint were run
+- [ ] New dependencies are included in `package-lock.json`
+
+### Screenshot
+_insert screenshot if needed_

.gitignore

@@ -15,3 +15,5 @@ selenium-debug.log
 webpack-stats.debug.json
 *.DS_Store
 .vscode
+coverage/
+.awcache

.nvmrc

@@ -1 +1 @@
-6.3.0
+8.9.1

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  useTabs: false,
+  printWidth: 80,
+  tabWidth: 2,
+  singleQuote: true,
+  trailingComma: 'es5',
+  jsxBracketSameLine: false,
+};

.storybook/config.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { configure, addDecorator } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+
+import { ThemeProvider } from 'styled-components';
+import { IntlProvider } from 'react-intl';
+
+import getLocalMessages from '../src/helpers/setLocal';
+import theme from '../src/theme';
+
+global.__CLIENT__ = true;
+
+addDecorator((story, context) => withInfo('common info')(story)(context));
+
+addDecorator(story =>
+  <ThemeProvider theme={theme}>
+    <IntlProvider locale="en" messages={getLocalMessages()}>
+      {story()}
+    </IntlProvider>
+  </ThemeProvider>
+);
+
+const req = require.context('../src/components', true, /\.stories\.js$/);
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://assets-1f14.kxcdn.com/main-415d4fa2919ce5d6e18b.css">

.storybook/webpack.config.js

@@ -0,0 +1,22 @@
+// 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.
+
+module.exports = {
+  resolve: {
+    extensions: ['.js'],
+    modules: ['src', 'node_modules']
+  },
+  plugins: [
+    // your custom plugins
+  ],
+  module: {
+    rules: [
+      // add your custom rules.
+    ]
+  }
+};

.stylelintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  rules: {
+    'unit-no-unknown': true,
+    'no-duplicate-selectors': true,
+    'block-no-empty': true,
+  },
+};

Dockerfile

@@ -1,11 +1,11 @@
-FROM node:6.3
+FROM node:8.9
 
 ENV NODE_ENV production
 ENV API_URL http://api.quran.com:3000
-ENV SENTRY_KEY_CLIENT https://44c105328ae544ae9928f9eb74b40061@app.getsentry.com/80639
-ENV SENTRY_KEY_SERVER https://44c105328ae544ae9928f9eb74b40061:41ca814d33124e04ab450104c3938cb1@app.getsentry.com/80639
-# It's okay because it's only the APP ID
-ENV FACEBOOK_APP_ID 1557596491207315
+ENV SENTRY_KEY_CLIENT https://app.getsentry.com
+ENV SENTRY_KEY_SERVER https://app.getsentry.com
+
+ENV FACEBOOK_APP_ID appid
 ENV ONE_QURAN_URL https://one.quran.com
 ENV PORT 8000
 ENV NODE_PATH "./src"