Remove more SCSS and adding storybook for better component developing

.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.
+    ]
+  }
+};

package.json

@@ -21,7 +21,9 @@
     "analyze:json": "webpack-bundle-size-analyzer bundle-stats.json",
     "lint:fix": "npm run test:dev:lint -- --fix",
     "prettier": "prettier --single-quote --write",
-    "precommit": "lint-staged"
+    "precommit": "lint-staged",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "pre-commit": [
     "test:stylelint",
@@ -155,6 +157,10 @@
     "winston": "1.1.2"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^3.2.13",
+    "@storybook/addon-info": "^3.2.13",
+    "@storybook/addon-links": "^3.2.13",
+    "@storybook/react": "^3.2.13",
     "babel-eslint": "7.1.1",
     "babel-plugin-react-transform": "2.0.2",
     "babel-preset-react-hmre": "1.1.1",

src/components/AboutText/index.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+export default styled.div`
+  padding-top: 5%;
+  padding-bottom: 5%;
+  h3 {
+    font-size: 130%;
+  }
+  .row {
+    padding-top: 1%;
+    padding-bottom: 1%;
+    h3 {
+      color: ${props => props.theme.brandPrimary};
+      font-family: ${props => props.theme.fonts.montserrat};
+    }
+    h4 {
+      font-weight: 300;
+      line-height: 150%;
+    }
+  }
+  .credits {
+    h3 {
+      color: ${props => props.theme.textColor};
+    }
+    h4 {
+      font-family: ${props => props.theme.fonts.sourceSans};
+    }
+  }
+`;

src/components/Audioplayer/RepeatDropdown/index.js

@@ -7,7 +7,7 @@ import Nav from 'react-bootstrap/lib/Nav';
 import NavItem from 'react-bootstrap/lib/NavItem';
 import FormControl from 'react-bootstrap/lib/FormControl';
 import { intlShape, injectIntl } from 'react-intl';
-import SwitchToggle from 'components/SwitchToggle';
+import Checkbox from 'quran-components/lib/Checkbox';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 import { ControlButton } from '../index';
@@ -272,11 +272,11 @@ class RepeatButton extends Component {
                 defaultMessage="TOGGLE REPEAT"
               />
               {'  '}
-              <SwitchToggle
-                checked={!!repeat.from}
-                onToggle={this.handleToggle}
+              <Checkbox
+                checked={repeat.from}
+                handleChange={this.handleToggle}
                 id="repeat-toggle"
-                flat
+                name="repeat-toggle"
               />
             </div>
           </div>

src/components/Bismillah/index.stories.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+import Bismillah from './index';
+
+storiesOf('Bismillah', module).add('default', () => <Bismillah />);

src/components/ChapterIcon/index.js

@@ -0,0 +1,136 @@
+import styled from 'styled-components';
+
+const content = {
+  59: 'e900',
+  60: 'e901',
+  48: 'e902',
+  1: 'e904',
+  2: 'e905',
+  3: 'e906',
+  4: 'e907',
+  5: 'e908',
+  38: 'e909',
+  39: 'e90a',
+  6: 'e90b',
+  7: 'e90c',
+  8: 'e90d',
+  9: 'e90e',
+  10: 'e90f',
+  11: 'e910',
+  12: 'e911',
+  13: 'e912',
+  14: 'e913',
+  15: 'e914',
+  16: 'e915',
+  17: 'e916',
+  18: 'e917',
+  19: 'e918',
+  20: 'e919',
+  21: 'e91a',
+  22: 'e91b',
+  23: 'e91c',
+  24: 'e91d',
+  25: 'e91e',
+  26: 'e91f',
+  27: 'e920',
+  28: 'e921',
+  29: 'e922',
+  30: 'e923',
+  31: 'e924',
+  32: 'e925',
+  33: 'e926',
+  40: 'e927',
+  41: 'e928',
+  42: 'e929',
+  43: 'e92a',
+  44: 'e92b',
+  45: 'e92c',
+  46: 'e92d',
+  34: 'e92e',
+  35: 'e92f',
+  36: 'e930',
+  37: 'e931',
+  47: 'e932',
+  49: 'e933',
+  50: 'e934',
+  51: 'e935',
+  52: 'e936',
+  53: 'e937',
+  54: 'e938',
+  55: 'e939',
+  56: 'e93a',
+  57: 'e93b',
+  58: 'e93c',
+  79: 'e93d',
+  80: 'e93e',
+  81: 'e93f',
+  82: 'e940',
+  61: 'e941',
+  62: 'e942',
+  63: 'e943',
+  64: 'e944',
+  65: 'e945',
+  66: 'e946',
+  67: 'e947',
+  68: 'e948',
+  69: 'e949',
+  70: 'e94a',
+  71: 'e94b',
+  72: 'e94c',
+  73: 'e94d',
+  74: 'e94e',
+  75: 'e94f',
+  76: 'e950',
+  77: 'e951',
+  78: 'e952',
+  83: 'e953',
+  84: 'e954',
+  85: 'e955',
+  86: 'e956',
+  87: 'e957',
+  88: 'e958',
+  89: 'e959',
+  90: 'e95a',
+  91: 'e95b',
+  92: 'e95c',
+  93: 'e95d',
+  94: 'e95e',
+  95: 'e95f',
+  96: 'e960',
+  97: 'e961',
+  98: 'e962',
+  99: 'e963',
+  100: 'e964',
+  101: 'e965',
+  102: 'e966',
+  103: 'e967',
+  104: 'e968',
+  105: 'e969',
+  106: 'e96a',
+  107: 'e96b',
+  108: 'e96c',
+  109: 'e96d',
+  110: 'e96e',
+  111: 'e96f',
+  112: 'e970',
+  113: 'e971',
+  114: 'e972'
+};
+
+export default styled.span`
+  font-family: 'surah_names' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 25px;
+  float: right;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  content: ${props => content[props.id] || 'e903'};
+`;

src/components/Container/index.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export default styled.div`
+  padding-top: 70px;
+  min-height: 100vh;
+
+  @media (max-width: ${props => props.theme.screen.sm}) {
+    padding-top: 70px;
+  }
+`;

src/components/FontText/index.js

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+import { darken } from 'polished';
+
+export default styled.h1`
+  white-space: pre-line;
+  color: #000;
+  width: 100%;
+  overflow-wrap: break-word;
+  line-height: 1.5;
+  word-break: break-all;
+  text-align: right;
+  float: left;
+  b,
+  span {
+    border-color: transparent;
+    border-width: 0 0 1px 0;
+    border-style: solid;
+    float: right;
+    &.active {
+      color: ${props => darken(0.05, props.theme.brandPrimary)};
+      border-color: ${props => darken(0.15, props.theme.brandPrimary)};
+    }
+  }
+  .line {
+    direction: rtl;
+    b,
+    span {
+      float: none;
+      display: inline-block;
+    }
+  }
+  b,
+  a {
+    font-weight: 100;
+    padding: 0 2px;
+    color: #000;
+    &:hover {
+      color: ${props => props.theme.brandPrimary};
+      cursor: help;
+    }
+    &:focus {
+      color: ${props => darken(0.1, props.theme.brandPrimary)};
+      outline: none;
+    }
+  }
+  p {
+    display: block;
+    clear: both;
+    text-align: right;
+    direction: rtl;
+    float: right;
+  }
+  @media (max-width: ${props => props.theme.screen.sm}) {
+    font-size: 300%;
+    line-height: 130%;
+  }
+}
+`;

src/components/Footer/index.stories.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+import Footer from 'components/Footer';
+
+storiesOf('Footer', module).add('default', () => <Footer />);

src/components/GlobalSidebar/Container.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+const CONTAINER_WIDTH = 280;
+
+export default styled.div`
+  position: fixed;
+  left: ${CONTAINER_WIDTH * -1}px;
+  top: 0;
+  bottom: 0;
+  background: #fff;
+  z-index: 1031;
+  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
+    0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
+  visibility: hidden;
+
+  background: #fff;
+  width: ${CONTAINER_WIDTH}px;
+  transition: left 0.35s cubic-bezier(0.24, 1, 0.32, 1), visibility 0.2s;
+
+  ${props => (props.open ? 'left: 0; visibility: visible;' : '')} .navbar-text {
+    margin-left: 0;
+    .backToHome {
+      margin-right: 23px;
+      font-size: 17px;
+    }
+  }
+
+  @media (max-width: ${props => props.theme.screen.sm}) {
+    width: ${CONTAINER_WIDTH}px;
+    left: ${CONTAINER_WIDTH * -1}px;
+
+    ${props => (props.open ? 'left: 0; ' : '')} .navbar-text {
+      padding-left: 15px;
+    }
+  }
+`;