Monorepo refactor (#130)

* Task: added lerna

* WIP: storybook conversion

* mend

* WIP: adding MediaPlayer

* move TimedTextEditor, TranscriptEditor and adapters util to packages (#128)

* moved TimedTextEditor and TranscriptEditor to packages

also created stories, and package.json for each, but can't test them in storybook coz they have dependencies on adapters in Util folder

* moved Util and demdemo app

* got storybook working

* added demo app to storybook

* mend

* Fix: commenting out demo

* Changed repo packages folder structure (#129)

* cleaned up adapters

* changed folder structure

* fixed timecode converter duplice module

* made all packages private except for TranscriptEditor

* working

* "Monorepo" refactor spike remove lerna (#135)

* got storybook working

tests not working yet

* fixed tests

using jest, and removed CRA dependency, updated babel config for babel 7 and stubbed css files for jest tests for css node modules

* Added support for demo app in storybook

* fixed eslint

CRA had it's own linter internally, so added linting + dependencies

* cleaned up export scripts in package.json

* updated README

* finalised refactor

see PR description for more details

* rename demo app editor to demoTranscript

* bringing back style lint, and fixing lint in storybook config

* updated with current master AWS adapter

* linting

* fix #132 playtime displaied double

 playtime on display is double of actual total playtime

* temporary fix #73 monospace duration and current time

 in media player to stop moving while playing

* Feature: Added custom css loading to storybook (#136)

* Resolved conflict iwth AWS adapter

Author: pietrop

.babelrc

@@ -18,7 +18,6 @@
     "no-unused-expressions": "error",
     "no-trailing-spaces": "error",
     "no-nested-ternary": "error",
-    "space-infix-ops": "error",
     "indent": ["warn", 2],
     "arrow-spacing": ["error", { "before": true, "after": true }],
     "space-in-parens": [ 0, "never" ],

.eslintrc

@@ -8,7 +8,7 @@ assignees: pietrop
 ---
 
 **Describe the bug**
-A clear and concise description of what the bug is.
+<!-- A clear and concise description of what the bug is. -->
 
 **To Reproduce**
 Steps to reproduce the behavior:
@@ -18,10 +18,10 @@ Steps to reproduce the behavior:
 4. See error
 
 **Expected behavior**
-A clear and concise description of what you expected to happen.
+<!-- A clear and concise description of what you expected to happen. -->
 
 **Screenshots**
-If applicable, add screenshots to help explain your problem.
+<!-- If applicable, add screenshots to help explain your problem. -->
 
 **Desktop (please complete the following information):**
  - OS: [e.g. iOS]
@@ -35,4 +35,4 @@ If applicable, add screenshots to help explain your problem.
  - Version [e.g. 22]
 
 **Additional context**
-Add any other context about the problem here.
+<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/bug_report.md

@@ -8,13 +8,13 @@ assignees: pietrop
 ---
 
 **Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
 
 **Describe the solution you'd like**
-A clear and concise description of what you want to happen.
+<!-- A clear and concise description of what you want to happen. -->
 
 **Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
 
 **Additional context**
-Add any other context or screenshots about the feature request here.
+<!-- Add any other context or screenshots about the feature request here. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -7,4 +7,4 @@ assignees: pietrop
 
 ---
 
-_where applicable, please provide context and use case around your question._
+<!-- _where applicable, please provide context and use case around your question._ -->

.github/ISSUE_TEMPLATE/question.md

@@ -88,3 +88,5 @@ typings/
 
 # next.js build output
 .next
+
+stats.json

.gitignore

@@ -0,0 +1,8 @@
+src
+demo
+lib
+packages
+build
+.babelrc
+.babel.config.js
+webpack.config.js

.npmignore

@@ -0,0 +1,3 @@
+import '@storybook/addon-options/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

.storybook/addons.js

@@ -0,0 +1,22 @@
+import { configure } from '@storybook/react';
+import { setOptions } from '@storybook/addon-options';
+
+// automatically import all files ending in *.stories.js
+// https://webpack.js.org/guides/dependency-management/
+const components = require.context('../packages/components/', true, /.stories.js$/);
+const demo = require.context('../demo/', true, /.stories.js$/);
+const styles = require.context('./styles', true, /\.scss$/);
+
+function loadStories() {
+  demo.keys().forEach((filename) => demo(filename));
+  components.keys().forEach((filename) => components(filename));
+  styles.keys().forEach((filename) => styles(filename));
+}
+
+setOptions({
+  name: 'react-transcript-editor',
+  url: 'https://github.com/bbc/react-transcript-editor',
+  addonPanelInRight: true
+});
+
+configure(loadStories, module);

.storybook/config.js

@@ -0,0 +1 @@
+@import url('https://gel.files.bbci.co.uk/r2.302/bbc-reith.css');

.storybook/styles/fonts.scss

@@ -0,0 +1,4 @@
+body * {
+  // font-family: ReithSans, Helvetica, sans-serif !important;
+  font-family: ReithSerif, Fallback, sans-serif;
+}

.storybook/styles/main.scss

@@ -0,0 +1,44 @@
+// https://github.com/storybooks/storybook/issues/270#issuecomment-318101549
+// this config augments the storybook one with support for css modules
+// storybook does not have support for css modules out of the box
+// if CRA were to be present, storybook webpack augment those configs
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.module.css$/,
+        use: [
+          {
+            loader: "style-loader"
+          },
+          {
+            loader: "css-loader",
+            options: {
+              modules: true
+            }
+          }
+        ]
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: "style-loader"
+          },
+          {
+            loader: "css-loader",
+            options: {
+              sourceMap: true
+            }
+          },
+          {
+            loader: "sass-loader",
+            options: {
+              sourcemap: true
+            }
+          }
+        ]
+      }
+    ]
+  }
+};

.storybook/webpack.config.js

@@ -15,4 +15,4 @@
     "media-feature-range-operator-space-after": "always",
     "media-feature-colon-space-after": "always"
   }
-}
+}

.stylelintrc

@@ -1,3 +1,4 @@
+# Travis CI configuration to run automated test when pushing to github
 language: node_js
 node_js:
  - "10"
@@ -9,5 +10,5 @@ install:
   - npm install
 
 script:
-  - npm run test-ci
-  # could also run lit 
+  - npm run test:ci
+  # TODO: could also run lit 

.travis.yml

@@ -3,10 +3,8 @@
 This project has a [Code of Conduct](./CODE_OF_CONDUCT.md) that we expect all of our contributors to abide by, please check it out before contributing.
 
 ## Contributor license agreement
-
 By submitting code as an individual or as an entity you agree that your code is licensed the same as the [React Transcript Editor](./LICENCE.md).
 
-
 ## Pull requests and branching
 
 1. [Feel free to start by raising an issue](https://github.com/bbc/react-transcript-editor/issues/new?template=feature_request.md) so that others can be aware of areas where there is active development, and if needed we can synchronies the effort.

CONTRIBUTING.md

@@ -1,12 +1,12 @@
 **Is your Pull Request request related to another [issue](https://github.com/bbc/react-transcript-editor/issues) in this repository ?**      
-_If so please link to other issues and PRs as appropriate_
+<!-- _If so please link to other issues and PRs as appropriate_ -->
 
 **Describe what the PR does**    
-_A clear and concise description of what the PR does. Feel free to use bulletpoints and checkboxes if needed [...]_
+<!-- _A clear and concise description of what the PR does. Feel free to use bulletpoints and checkboxes if needed [...]_ -->
 
 
 **State whether the PR is ready for review or whether it needs extra work**    
-_If you are still working on it and just setting it up for later review, or if it's ready to be reviewed for merging_
+<!-- _If you are still working on it and just setting it up for later review, or if it's ready to be reviewed for merging_ -->
 
 **Additional context**    
-Add any other context or screenshots about the PR.
+<!-- Add any other context or screenshots about the PR. -->