Merge branch 'dev' into accounts_management

oskar-binary · Sep 11, 2019 · ccbfd2d · ccbfd2d
2 parents 46fb07d + 8c55d21
commit ccbfd2d
Show file tree

Hide file tree

Showing 35 changed files with 496 additions and 327 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -41,12 +41,11 @@
 #  kelly-binary
 #  Mahboobeh-binary
 #  mahdipourziaei-binary
-#  mamali-fs
 #  morteza-binary
 #  mustofa-binary
-#  nazanin-binary
 #  negarn
 #  oskar-binary
+#  reza-fs
 #  sam-binary
 #  zaki-binary
 
@@ -74,6 +73,24 @@
 #   - sam-binary
 
 
+# ===========================================================
+#  binary-com/deriv-core
+# ===========================================================
+#  Used for approving all relevant changes to Core
+#
+#   - aaron-binary
+#   - mahdipourziaei-binary
+
+
+# ===========================================================
+#  binary-com/deriv-shared
+# ===========================================================
+#  Used for approving all relevant changes to Core
+#
+#   - Mahboobeh-binary
+#   - reza-fs
+
+
 # ===========================================================
 #  binary-com/deriv-trader
 # ===========================================================
@@ -82,12 +99,11 @@
 #   - brandon-binary
 #   - kelly-binary
 #   - mahdipourziaei-binary
-#   - mamali-fs
 #   - morteza-binary
 #   - mustofa-binary
-#   - nazanin-binary
 #   - negarn
 #   - oskar-binary
+#   - reza-fs
 #   - zaki-binary
 
 
@@ -123,6 +139,24 @@
 
 
 
+
+# ================================================
+#  deriv-app/core
+# ================================================
+
+/packages/core/**                                 @binary-com/deriv-core
+
+
+
+# ================================================
+#  deriv-app/shared
+# ================================================
+
+/packages/shared/**                               @binary-com/deriv-shared
+/packages/components/**                           @binary-com/deriv-shared
+
+
+
 # ================================================
 #  deriv-app/trader
 # ================================================

diff --git a/.github/labeler.yml b/.github/labeler.yml
@@ -0,0 +1,5 @@
+Trader: packages/trader/**/*
+Bot: packages/bot/**/*
+Core: packages/core/**/*
+Components: packages/components/**/*
+Shared: packages/shared/**/*
diff --git a/.github/workflows/label.yml b/.github/workflows/label.yml
@@ -0,0 +1,14 @@
+name: Labeler
+on:
+  schedule:
+    - cron: '0 3,8 */1 * *'
+
+  jobs:
+    label:
+
+      runs-on: ubuntu-latest
+
+      steps:
+        - uses: actions/labeler@v2
+          with:
+            repo-token: '${{ secrets.GITHUB_TOKEN }}'
diff --git a/README.md b/README.md
@@ -1,10 +1,18 @@
 Deriv App
 ============
-
 This repository contains the various platforms of Deriv.
 
-## Installation
+- [Installation](#installation)
+- [Working With This Repo](#working-with-this-repo)
+- [Usage](#usage)
+  - [How to Clean Packages](#how-to-clean-packages)
+  - [Examples](#examples)
+- [PR Guidelines](#pr-guidelines)
+- [FAQ](#faq)
 
+[comment]: <> (TODO: Refactor Clean Project to be under usage)
+
+## Installation
 In order to work on your own version of the Deriv Javascript and CSS, please **fork this project**.
 
 You will need to perform the following on your development machine:
@@ -16,9 +24,7 @@ You will need to perform the following on your development machine:
 [comment]: <> (1. Run `npm run bootstrap {package name}`. Replace `{package name}` with the name of the package you want to work with. eg.: `trader`, `bot`)
 [comment]: <> (2. Install all packages with a hoisting strategy \(lift all common packages to a root `node_modules` and not package specific\), run `npm run hoist`)
 
-How to work with this repo
-=============================
-
+## Working With This Repo
 All packages must contain the following scripts to perform the stated actions:
 
 | Command             | Description                                                                                   |
@@ -37,8 +43,14 @@ All packages must contain the following scripts to perform the stated actions:
 | `deploy:production` | Initiates procedures for deploying to production. (Package specific)                          |
 
 **Please follow the README of each package you intend to work with on how to get set up.** However, the above scripts can be run from the root directory in the following manner.
-## Usage
-### Example
+
+### Usage
+#### How to Clean Packages
+If you intend to remove `node_modules` folder(s) from the projects, please run `lerna clean` and follow the instructions.
+
+You can read more on the various lerna commands (and the `clean` command) over at the [Lerna docs](https://github.com/lerna/lerna/).
+
+#### Examples
 In order to run the `start` script for all packages (`trader`, `bot`, etc.), simply `cd` to the root of the repo and run:
 ```bash
 npm run start
@@ -58,19 +70,11 @@ npm run deploy:folder trader br_test_folder
 You can find the names of packages by first navigating to the `packages` folder. Each subfolder is a package, and contains a `package.json` file. The value of the `name` key in `package.json` is the package name.
 
 ### PR Guidelines
-
 1. Use the `developer 1|developer 2/task_name` format for PR titles. (e.g.: `dev1/fixed_emoji_issue`)
 2. Use the appropriate package labels available on the repo to indicate which packages your PR modifies.
 3. Use Draft PRs if you don't mean to request for reviews yet. [Read more here.](https://github.blog/2019-02-14-introducing-draft-pull-requests/)
 
-### Clean projects
-
-If you intend to remove `node_modules` folder(s) from the projects, please run `lerna clean` and follow the intstructions.
-
-You can read more on the various lerna commands (and the `clean` command) over at the [Lerna docs](https://github.com/lerna/lerna/).
-
 ### FAQ
-
 1. If you have to use `sudo -s` in your environment, please remove any hardcoded `sudo` from `packages/*` (eg., remove `sudo` from `start` and `serve` commands of `packages/trader`)
 
 2. How do I install a package?

diff --git a/packages/components/src/components/autocomplete/autocomplete.jsx b/packages/components/src/components/autocomplete/autocomplete.jsx
@@ -1,7 +1,6 @@
 import classNames   from 'classnames';
 import React        from 'react';
 import PropTypes    from 'prop-types';
-import { Field }    from 'formik';
 import Input        from '../input';
 import DropdownList from '../dropdown-list';
 
@@ -21,10 +20,27 @@ class Autocomplete extends React.PureComponent {
     state = {
         should_show_list: false,
         filtered_items  : null,
+        input_value     : '',
     };
 
     setInputWrapperRef = (node) => this.input_wrapper_ref = node;
 
+    onBlur = (e) => {
+        this.hideDropdownList();
+
+        if (typeof this.props.onBlur === 'function') {
+            this.props.onBlur(e);
+        }
+    };
+
+    onItemSelection = (item) => {
+        this.setState({ input_value: (item.text ? item.text : item) });
+
+        if (typeof this.props.onItemSelection === 'function') {
+            this.props.onItemSelection(item);
+        }
+    };
+
     showDropdownList = () => {
         this.setState({ should_show_list: true });
     };
@@ -52,47 +68,54 @@ class Autocomplete extends React.PureComponent {
     };
 
     render() {
+        const {
+            className,
+            onItemSelection,
+            value,
+            list_items,
+            ...otherProps
+        } = this.props;
+
         return (
-            <Field { ...this.props }>
-                {
-                    ({ field, form }) => (
-                        <div className={ classNames('dc-autocomplete', this.props.className) }>
-                            <div ref={ this.setInputWrapperRef } className='dc-autocomplete__input-field'>
-                                <Input
-                                    { ...field }
-                                    { ...this.props }
-                                    className='dc-autocomplete__field'
-                                    onFocus={ this.showDropdownList }
-                                    onInput={ this.filterList }
-                                    // Field's onBlur still needs to run to perform form functions such as validation
-                                    onBlur={ (e) => { this.hideDropdownList(); field.onBlur(e); } }
-                                    trailing_icon={
-                                        <IconArrow
-                                            className={ {
-                                                'dc-autocomplete__trailing-icon'        : true,
-                                                'dc-autocomplete__trailing-icon--opened': this.state.should_show_list,
-                                            } }
-                                        />
-                                    }
-                                />
-                            </div>
-                            <DropdownList
-                                style={ {
-                                    width    : this.input_wrapper_ref ? `${ this.input_wrapper_ref.offsetWidth }px` : '100%',
-                                    marginTop: 'calc(4px - 18px)', // 4px is the standard margin. In case of error, the list should overlap the error
-                                    // TODO confirm placement of dropdown list and positioning of error
-                                    // marginTop: form.errors[field.name] ? 'calc(4px - 18px)' : '4px', // 4px is the standard margin. In case of error, the list should overlap the error
+            <div className={ classNames('dc-autocomplete', className) }>
+                <div ref={ this.setInputWrapperRef } className='dc-autocomplete__input-field'>
+                    <Input
+                        { ...otherProps }
+                        className='dc-autocomplete__field'
+                        onFocus={ this.showDropdownList }
+                        onInput={ this.filterList }
+                        // Field's onBlur still needs to run to perform form functions such as validation
+                        onBlur={ this.onBlur }
+                        value={
+                            // This allows us to let control of value externally (from <Form/>) or internally if used without form
+                            typeof onItemSelection === 'function' ?
+                                value
+                                :
+                                this.state.input_value
+                        }
+                        trailing_icon={
+                            <IconArrow
+                                className={ {
+                                    'dc-autocomplete__trailing-icon'        : true,
+                                    'dc-autocomplete__trailing-icon--opened': this.state.should_show_list,
                                 } }
-                                is_visible={ this.state.should_show_list }
-                                list_items={ this.state.filtered_items || this.props.list_items }
-                                onItemSelection={ // Autocomplete must use the `text` property and not the `value`, however DropdownList provides access to both
-                                    (item) => form.setFieldValue(field.name, (item.text ? item.text : item), true)
-                                }
                             />
-                        </div>
-                    )
-                }
-            </Field>
+                        }
+                    />
+                </div>
+                <DropdownList
+                    style={ {
+                        width    : this.input_wrapper_ref ? `${ this.input_wrapper_ref.offsetWidth }px` : '100%',
+                        marginTop: 'calc(4px - 18px)', // 4px is the standard margin. In case of error, the list should overlap the error
+                        // TODO confirm placement of dropdown list and positioning of error
+                        // marginTop: form.errors[field.name] ? 'calc(4px - 18px)' : '4px', // 4px is the standard margin. In case of error, the list should overlap the error
+                    } }
+                    is_visible={ this.state.should_show_list }
+                    list_items={ this.state.filtered_items || list_items }
+                    // Autocomplete must use the `text` property and not the `value`, however DropdownList provides access to both
+                    onItemSelection={ this.onItemSelection }
+                />
+            </div>
         );
     }
 }
@@ -109,4 +132,5 @@ Autocomplete.propTypes = {
             })
         ),
     ]),
+    onItemSelection: PropTypes.func,
 };
diff --git a/packages/components/src/components/checkbox/checkbox.jsx b/packages/components/src/components/checkbox/checkbox.jsx
@@ -15,8 +15,17 @@ const IconCheckmark = ({ className, classNamePath }) => (
 );
 
 class Checkbox extends React.PureComponent {
-    onClick = () => {
-        this.props.onClick(!this.props.value);
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            checked: props.defaultChecked,
+        };
+    }
+
+    onChange = (e) => {
+        this.setState({ checked: e.target.checked });
+        this.props.onChange(e);
     };
 
     render() {
@@ -25,24 +34,32 @@ class Checkbox extends React.PureComponent {
             classNameLabel,
             id,
             label,
-            value,
+            onChange, // This needs to be here so it's not included in `otherProps`
+            ...otherProps
         } = this.props;
+
         return (
-            <div
-                id={id}
-                className={classNames('dc-checkbox', className)}
-                onClick={this.onClick}
-            >
-                <div className={classNames('dc-checkbox__box', {
-                    'dc-checkbox__box--active': value,
-                })}
+            <label htmlFor={ id } className={ classNames('dc-checkbox', className) }>
+                <input
+                    className='dc-checkbox__input'
+                    type='checkbox'
+                    id={ id }
+                    onChange={ this.onChange }
+                    { ...otherProps }
+                />
+                <span
+                    className={ classNames('dc-checkbox__box', {
+                        'dc-checkbox__box--active': this.state.checked,
+                    }) }
                 >
-                    { !!value &&
+                    { !!this.state.checked &&
                         <IconCheckmark />
                     }
-                </div>
-                <div className={classNames('dc-checkbox__label', classNameLabel)}>{label}</div>
-            </div>
+                </span>
+                <span className={classNames('dc-checkbox__label', classNameLabel)}>
+                    { label }
+                </span>
+            </label>
         );
     }
 }
@@ -52,7 +69,6 @@ Checkbox.propTypes = {
     classNameLabel: PropTypes.string,
     id            : PropTypes.string,
     label         : PropTypes.string,
-    value         : PropTypes.bool,
 };
 
 export default Checkbox;
diff --git a/packages/components/src/components/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss
@@ -2,9 +2,13 @@
     display: flex;
     justify-content: flex-start;
     cursor: pointer;
-    align-items: flex-start;
+    align-items: center;
 
+    &__input {
+        display: none;
+    }
     &__box {
+        display: block;
         width: 16px;
         height: 16px;
         transition: 0.3s ease-in-out;

diff --git a/packages/components/src/components/dialog/dialog.scss b/packages/components/src/components/dialog/dialog.scss
@@ -19,6 +19,7 @@
         position: absolute;
         left: calc(100vw - 70%);
         top: calc(100vh - 70%);
+        z-index: 1;
         transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25), opacity 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25);
 
         &--enter, &--exit {