Merge pull request #2 from bbc/master

Merge `bbc/react-transcript-editor@master` in

.eslintrc

@@ -1,17 +1,22 @@
 {
   "parser": "babel-eslint",
   "plugins": [
-    "react"
+    "react",
+    "css-modules"
   ],
   "extends": [
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "plugin:css-modules/recommended"
   ],
   "env": {
     "browser": true,
     "jest": true
   },
   "rules": {
+    "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" ],
@@ -40,6 +45,7 @@
     "camelcase": [ 1 ],
     "no-underscore-dangle" : [0, "always"],
     "keyword-spacing": ["error", { "before": true, "after": true }],
+    "key-spacing": ["error", { "afterColon": true }],
     "newline-before-return": "error",
     "space-before-blocks": "error",
     "no-unused-vars": "error",

.stylelintrc

@@ -0,0 +1,18 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "indentation": 2,
+    "string-quotes": "single",
+    "color-named": "always-where-possible",
+    "selector-combinator-space-after": "always",
+    "selector-attribute-quotes": "always",
+    "selector-attribute-operator-space-before": "always",
+    "selector-attribute-operator-space-after": "always",
+    "declaration-colon-space-before": "never",
+    "declaration-colon-space-after": "always",
+    "rule-empty-line-before": "always",
+    "media-feature-range-operator-space-before": "always",
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-colon-space-after": "always"
+  }
+}

README.md

@@ -1,13 +1,14 @@
 # React Transcript Editor
 
 <!-- _One liner_ -->
+
 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).
 
-_--> Work in progress <--_ 
+_--> Work in progress <--_
 
 <!-- _Screenshot of UI - optional_ -->
 
@@ -24,13 +25,12 @@ Node version is set in node version manager [`.nvmrc`](https://github.com/creati
 
 <!-- _Linting, github pre-push hook - optional_ -->
 
-
 ## Setup
 
 <!-- _stack - optional_ -->
 <!-- _How to build and run the code/app_ -->
 
-Fork this repository + git clone + cd into folder 
+Fork this repository + git clone + cd into folder
 
 ## Usage - development
 
@@ -44,7 +44,6 @@ npm start
 
 Visit [http://localhost:3000](http://localhost:3000)
 
-
 ## Usage - production
 
 <!-- npm install react-transcript-editor -->
@@ -61,14 +60,18 @@ npm install @bbc/react-transcript-editor
 ```js
 import { TranscriptEditor } from '@bbc/react-transcript-editor';
 
-<TranscriptEditor
-    transcriptData=// Transcript json
-    mediaUrl=// string url to media file - audio or video 
-    isEditable={true}// se to true if you want to be able to edit the text
-    sttJsonType={ 'bbckaldi' }// the type of STT Json transcript supported.
-    fileName={ this.state.fileName }// optional*
-/>
+  <TranscriptEditor
+     transcriptData=// Transcript json
+     mediaUrl=// string url to media file - audio or video 
+     isEditable={true}// se to true if you want to be able to edit the text
+     sttJsonType={ 'bbckaldi' }// the type of STT Json transcript supported.
+     handleAnalyticsEvents={ this.handleAnalyticsEvents } // optional - if you want to collect analytics events.
+     fileName=// optional - used for saving and retrieving local storage blob files 
+     title=// optional - defaults to ''
+     ref= // 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.
 
 _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)_
 
@@ -78,10 +81,9 @@ If using in a parent project where [typescript](https://www.typescriptlang.org/)
 
 ```js
 //@ts-ignore
-import {TranscriptEditor} from "@bbc/react-transcript-editor";
+import { TranscriptEditor } from "@bbc/react-transcript-editor";
 ```
 
-
 ## System Architecture
 
 <!-- _High level overview of system architecture_ -->
@@ -90,13 +92,13 @@ Uses [`create-component-lib`](https://www.npmjs.com/package/create-component-lib
 
 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.
 
-> Place everything you want to publish to npm inside `src/lib`. 
+> Place everything you want to publish to npm inside `src/lib`.
 
 > Outside `src/lib` (but inside src/), you can create example web pages to test or demonstrate the usage of your components.
 
-## Documentation 
+## Documentation
 
-There's a [docs](./docs) folder in this repository. 
+There's a [docs](./docs) folder in this repository.
 
 [docs/notes](./docs/notes) contains dev notes on various aspects of the project.
 
@@ -118,15 +120,14 @@ We are using [this template for ADR](https://gist.github.com/iaincollins/92923cc
 npm run build:component
 ```
 
-## Demo 
+## Demo
 
 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 
+<!-- https://github.com/gitname/react-gh-pages
 -->
 
-
-## Build - demo 
+## Build - demo
 
 This github repository uses [github pages](https://pages.github.com/) to host a demo of the component, in [docs/demo](./docs/demo)
 
@@ -150,15 +151,15 @@ npm run build:example
 
 Test coverage using [`jest`](https://jestjs.io/), to run tests
 
- ```
- npm run test
- ```
+```
+npm run test
+```
 
 ## Deployment
 
 <!-- _How to deploy the code/app into test/staging/production_ -->
 
-To push to  [npm - `@bbc/react-transcript-editor`](https://www.npmjs.com/package/@bbc/react-transcript-editor)
+To push to [npm - `@bbc/react-transcript-editor`](https://www.npmjs.com/package/@bbc/react-transcript-editor)
 
 ```
 npm publish:public
@@ -168,17 +169,14 @@ This runs `npm run build:component` and `npm publish --access public` under the
 
 > Note that only `README.md` and the `dist` folders are published to npm.
 
-
-## Contributing 
+## Contributing
 
 See [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) guidelines.
 
-
 ## Licence
 
 See [LICENCE.md](./LICENCE.md)
 
-
 ## Legal Disclaimer
 
 Despite using React and DraftJs, the BBC is not promoting any Facebook products or other commercial interest.

docs/features-list.md

@@ -55,6 +55,7 @@ Import Transcript Json - Adapters
 - [x] BBC Kaldi 
 - [x] News Labs API - BBC Kaldi
 - [x] autoEdit 2
+- [x] AWS Transcriber
 - [ ] Gentle Transcription 
 - [ ] Gentle Alignment Json
 - [ ] IBM Watson STT

docs/guides/adapters.md

@@ -34,7 +34,7 @@ checkout [a quick side note on how the DraftJS `block`, `entityRanges` and `enti
 In your branch 
 
 - [ ] Create a folder with the name of the STT service - eg `speechmatics`
-- [ ] add a `adapters/${sttServiceName}/sample` folder
+- [ ] add a `src/lib/Util/adapters/${sttServiceName}/sample` folder
 - [ ] add a sample json file from the STT service in this last folder - this will be useful for testing. Name it `${name of the stt service}.sample.json`
 <!-- TODO: we should check these json are excluded from the bundle -->
 - [ ] add option in [adapters/index.js](adapters/index.js)
@@ -107,6 +107,8 @@ This project uses jest. and once you submit the PR the tests are run by TravisCI
 
 In order to write your tests, you want to have a `sample` folder with transcript data from stt and expected draftJs data output with file extensions `.sample.json` and `.sample.js` - see `bbc-kaldi` and `autoEdit2` example. This is so that those stub/example files are not bundled with the component when packaging for npm.
 
+You can create and run your `example-usage.js` file and save the output json. This can be used to create the `.sample.js` file for the main test.
+
 _If you don't have much experience with automated testing don't let this put you off tho, feel free to raise it as an issue and we can help out._
 
 **top tip**: the draftJs block key attributes are randomly generated, and therefore cannot be tested in a deterministic way. However there is a well established workaround, you can replace them in the json with a type definition. eg instead of expecting it to be a specific number, you just expect it to be a string.