diff --git a/.storybook/config.js b/.storybook/config.js new file mode 100644 index 000000000..66b72b70c --- /dev/null +++ b/.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 => + + + {story()} + + +); + +const req = require.context('../src/components', true, /\.stories\.js$/); + +function loadStories() { + req.keys().forEach(filename => req(filename)); +} + +configure(loadStories, module); diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 000000000..71146a17b --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1 @@ + diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js new file mode 100644 index 000000000..3186d4cdd --- /dev/null +++ b/.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. + ] + } +}; diff --git a/package.json b/package.json index 2ea7ee3f5..3a59dc712 100644 --- a/package.json +++ b/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", diff --git a/src/components/AboutText/index.js b/src/components/AboutText/index.js new file mode 100644 index 000000000..b8f5cae74 --- /dev/null +++ b/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}; + } + } +`; diff --git a/src/components/Audioplayer/RepeatDropdown/index.js b/src/components/Audioplayer/RepeatDropdown/index.js index 156ac0b75..5d4398338 100644 --- a/src/components/Audioplayer/RepeatDropdown/index.js +++ b/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" /> {' '} - diff --git a/src/components/Bismillah/index.stories.js b/src/components/Bismillah/index.stories.js new file mode 100644 index 000000000..5b16dd955 --- /dev/null +++ b/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', () => ); diff --git a/src/components/ChapterIcon/index.js b/src/components/ChapterIcon/index.js new file mode 100644 index 000000000..c83aea4f3 --- /dev/null +++ b/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'}; +`; diff --git a/src/components/Container/index.js b/src/components/Container/index.js new file mode 100644 index 000000000..35519ca67 --- /dev/null +++ b/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; + } +`; diff --git a/src/components/FontText/index.js b/src/components/FontText/index.js new file mode 100644 index 000000000..fc1956930 --- /dev/null +++ b/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%; + } +} +`; diff --git a/src/components/Footer/index.stories.js b/src/components/Footer/index.stories.js new file mode 100644 index 000000000..4ed6111f5 --- /dev/null +++ b/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', () =>