"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

Author: pietrop

.babelrc

@@ -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

@@ -2,10 +2,10 @@ import { configure } from "@storybook/react";
 
 // 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 components = require.context('../packages/components/', true, /.stories.js$/);
+const demo = require.context('../demo/', true, /.stories.js$/);
 
 configure(() => {
   components.keys().forEach(filename => components(filename));
-  // demo.keys().forEach(filename => demo(filename));
+  demo.keys().forEach(filename => demo(filename));
 }, module);

.storybook/config.js

@@ -0,0 +1,24 @@
+// 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
+            }
+          }
+        ]
+      }
+    ]
+  }
+};

.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. -->

PULL_REQUEST_TEMPLATE.md

@@ -6,12 +6,15 @@ A React component to make transcribing audio and video easier and faster.
 
 [![install size](https://packagephobia.now.sh/badge?p=@bbc/react-transcript-editor)](https://packagephobia.now.sh/result?p=@bbc/react-transcript-editor)
 
-The project uses [this github project board to organise and the co-ordinate development](https://github.com/bbc/react-transcript-editor/projects/1).
+The project uses [this github project boards to organise and the co-ordinate development](https://github.com/bbc/react-transcript-editor/projects).
 
 _--> Work in progress <--_
 
 <!-- _Screenshot of UI - optional_ -->
 
+- [You can see a demo by clicking here ](https://bbc.github.io/react-transcript-editor/iframe.html?id=demo--default) (and then click the `load demo` button)
+- [And you can see a list of features here](./docs/features-list.md).
+
 ## Development env
 
  <!-- _How to run the development environment_ -->
@@ -34,32 +37,29 @@ Fork this repository + git clone + cd into folder
 
 ## Usage - development
 
-<!-- git clone [email protected]:bbc/react-transcript-editor.git -->
+Git clone this repository and cd into the folder.
 
-> To start the development server (with entry point `src/index.js`), run
+To start the storybook run
 
 ```
 npm start
 ```
 
-Visit [http://localhost:3000](http://localhost:3000)
+Visit [http://localhost:6006](http://localhost:6006)
 
 ## Usage - production
 
-<!-- npm install react-transcript-editor -->
-
-<!-- exampel usage - require etc.. -->
-<!-- https://www.npmjs.com/package/@bbc/react-transcript-editor -->
-
 Available on [npm - `@bbc/react-transcript-editor`](https://www.npmjs.com/package/@bbc/react-transcript-editor)
 
 ```
 npm install @bbc/react-transcript-editor
 ```
 
 ```js
-import { TranscriptEditor } from '@bbc/react-transcript-editor';
+import  TranscriptEditor  from '@bbc/react-transcript-editor';
+```
 
+```js
   <TranscriptEditor
      transcriptData=// Transcript json
      mediaUrl=// string url to media file - audio or video 
@@ -71,7 +71,7 @@ import { TranscriptEditor } from '@bbc/react-transcript-editor';
      ref={ this.transcriptEditorRef } // optional - if you want to have access to internal functions such as retrieving content from the editor. eg to save to a server/db.
    />
 ```
-See [`./src/index.js` demo](./src/index.js) as a more detailed example usage of the component.
+See [`./demo/app.js` demo](./demo/app.js) as a more detailed example usage of the component.
 
 _Note: `fileName` it is optional but it's needed if working with user uploaded local media in the browser, to be able to save and retrieve from local storage. For instance if you are passing a blob url to `mediaUrl` using `createObjectURL` this url is randomly re-generated on every page refresh so you wouldn't be able to restore a session, as `mediaUrl` is used as the local storage key. See demo app for more detail example of this[`./src/index.js`](./src/index.js)_
 
@@ -84,19 +84,54 @@ If using in a parent project where [typescript](https://www.typescriptlang.org/)
 import { TranscriptEditor } from "@bbc/react-transcript-editor";
 ```
 
-## System Architecture
+#### Internal components
 
-<!-- _High level overview of system architecture_ -->
+You can also import some of the underlying React components directly. 
+
+- `TranscriptEditor`
+- `TimedTextEditor`
+- `VideoPlayer`
+- `Settings`
+- `KeyboardShortcuts`
 
-uses [`create-component-lib`](https://www.npmjs.com/package/create-component-lib) as explaied in this [blog post](https://hackernoon.com/creating-a-library-of-react-components-using-create-react-app-without-ejecting-d182df690c6b) to setup the environment to develop this React.
+```js
+import TimedTextEditor from '@bbc/react-transcript-editor/TimedTextEditor';
+```
+```js
+import { TimedTextEditor } from '@bbc/react-transcript-editor';
+```
+
+However if you are not using `TranscriptEditor` it is recommended to follow the second option and import individual components like: `@bbc/react-transcript-editor/TimedTextEditor` rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client. (Similarly to how [`react-bootstrap`](https://react-bootstrap.github.io/getting-started/introduction) works)
+
+See the storybook for for each component details on optional and required attributes.
+
+You can also use this node modules as standalone 
+
+```js
+import exportAdapter from '@bbc/react-transcript-editor/exportAdapter'
+```
+Converts from draftJs json format to other formats
+
+```js
+import  sttJsonAdapter from '@bbc/react-transcript-editor/sttJsonAdapter'
+```
+Converts various stt json formats to draftJs
+
+```js
+import { secondsToTimecode, timecodeToSeconds, shortTimecode} from '@bbc/react-transcript-editor/timecodeConverter'
+```
+some modules to convert to and from timecodes
 
-This uses [Create React App 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) so we are using [CSS Modules](https://github.com/css-modules/css-modules) to contain the scope of the css for this component.
-<!-- 
-Uses CSS grid-layout https://medium.com/samsung-internet-dev/common-responsive-layouts-with-css-grid-and-some-without-245a862f48df -->
+## System Architecture
 
-> Place everything you want to publish to npm inside `src/lib`.
+<!-- _High level overview of system architecture_ -->
+- uses [`storybook`](https://storybook.js.org) with the setup as [explained in their docs](https://storybook.js.org/docs/guides/guide-react/) to develop this React.
+- This uses [CSS Modules](https://github.com/css-modules/css-modules) to contain the scope of the css for this component.
+- [`.storybook/webpack.config.js](./.storybook/webpack.config.js) enanches the storybook webpack config to add support for css modules.
+- The parts of the component are inside [`./packages`](./packages)
+- [babel.config.js](./babel.config.js) provides root level system config for [babel 7](https://babeljs.io/docs/en/next/config-files#project-wide-configuration).
 
-> Outside `src/lib` (but inside src/), you can create example web pages to test or demonstrate the usage of your components.
+<!-- - for build, packaging, and deployment of the npm module, we use webpack with babel 7 -->
 
 ## Documentation
 
@@ -116,22 +151,35 @@ We are using [this template for ADR](https://gist.github.com/iaincollins/92923cc
 
 <!-- _How to run build_ -->
 
-> To transpile `src/lib` and create a build in the dist folder, run:
+> To transpile `./packages` and create a build in the `./dist` folder, run:
 
 ```
 npm run build:component
 ```
 
-## Demo
+## Demo & storybook
+
+- **Storybook** can bew viewed at [https://bbc.github.io/react-transcript-editor/](https://bbc.github.io/react-transcript-editor/)
+
+- **Demo** can be viewed at [https://bbc.github.io/react-transcript-editor/iframe.html?id=demo--default](https://bbc.github.io/react-transcript-editor/iframe.html?id=demo--default)
+
+
+http://localhost:6006
 
-Demo can be viewed at [https://bbc.github.io/react-transcript-editor](https://bbc.github.io/react-transcript-editor)
 
 <!-- https://github.com/gitname/react-gh-pages
 -->
 
-## Build - demo
+## Build - storybook
+To build the storybook as a static site 
+
+```
+npm run build:storybook
+```
+
+## publish storybook & demo to github pages
 
-This github repository uses [github pages](https://pages.github.com/) to host a demo of the component, in [docs/demo](./docs/demo)
+This github repository uses [github pages](https://pages.github.com/) to host the storybook and the demo of the component
 
 ```
 npm run deploy:ghpages
@@ -144,11 +192,16 @@ add to git, and push to origin master to update
 Alternatively If you simply want to build the demo locally in the `build` folder then just
 
 ```
-npm run build:example
+npm run build:storybook
 ```
 
-## Tests
+you can then run this command to serve the static site locally
 
+```
+npm run build:storybook:serve
+```
+
+## Tests
 <!-- _How to carry out tests_ -->
 
 Test coverage using [`jest`](https://jestjs.io/), to run tests
@@ -157,6 +210,16 @@ Test coverage using [`jest`](https://jestjs.io/), to run tests
 npm run test
 ```
 
+During development you can use 
+
+```
+npm run test:watch
+```
+
+## Travis CI
+
+On commit this repo uses the [.travis.yml](./.travis.yml) config tu run the automated test on [travis CI](https://travis-ci.org/bbc/react-transcript-editor).
+
 ## Deployment
 
 <!-- _How to deploy the code/app into test/staging/production_ -->
@@ -176,9 +239,9 @@ This runs `npm run build:component` and `npm publish --access public` under the
 See [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) guidelines.
 
 ## Licence
-
 <!-- mention MIT Licence -->
+See [LICENCE](./LICENCE.md)
 
 ## Legal Disclaimer
 
-Despite using React and DraftJs, the BBC is not promoting any Facebook products or other commercial interest.
+_Despite using React and DraftJs, the BBC is not promoting any Facebook products or other commercial interest._

README.md

@@ -0,0 +1,5 @@
+// __mocks__/styleMock.js
+// mocking css files and other media for jest when used with react import
+// see also package.json under jest -> moduleNameMapper
+// https://jestjs.io/docs/en/webpack.html
+module.exports = {};