[![npm version](https://badge.fury.io/js/capsule-mobiteach-components.svg)](https://badge.fury.io/js/capsule-mobiteach-components)
# Capsule mobiteach components

Useful react components to use in Mobiteach capsules

- [Capsule mobiteach components](#capsule-mobiteach-components)
  - [Usage](#usage)
  - [GUI Components](#gui-components)
    - [MbtLeaveButton](#mbtleavebutton)
    - [MbtPopup](#mbtpopup)
    - [MbtScenesMenu](#mbtscenesmenu)
    - [MbtScenesIcon](#mbtscenesicon)
    - [MbtBrick](#mbtbrick)
    - [MbtDialog](#mbtdialog)
    - [MbtFullScreen](#mbtfullscreen)
    - [MbtLoader](#mbtloader)
    - [MbtDragElement](#mbtdragelement)
  - [Mobiteach Activities](#mobiteach-activities)
    - [MbtDocument](#mbtdocument)
    - [MbtDome360](#mbtdome360)
    - [MbtPostIt](#mbtpostit)
    - [MbtQuiz](#mbtquiz)
    - [MbtUrl](#mbturl)
  - [Language](#language)
  - [To update the package in npm](#to-update-the-package-in-npm)

## Usage
```bash
yarn add capsule-mobiteach-components # or npm install capsule-mobiteach-components
```

Import the components you want to use from the package

```jsx
import { example } from 'capsule-mobiteach-components';
```
## GUI Components

A list of useful design components for Mobiteach capsules

### MbtLeaveButton

A leave button that is placed on the top right of the parent and a function is called when clicked

| Prop    | Description          | Default |
| ------- | -------------------- | ------- |
| OnLeave | called upon on click |         |

### MbtPopup

A popup with a clickable dimmed background

| Prop     | Description                                   | Default  |
| -------- | --------------------------------------------- | -------- |
| OnLeave  | called upon clicking on the dimmed background | () => {} |
| children | JSX Element(s) that will show on the popup    |          |

### MbtScenesMenu

Menu showing the scenes

| Prop     | Description                               | Default             |
| -------- | ----------------------------------------- | ------------------- |
| show     | If the menu is visible or not             |                     |
| size     | Size of the menu                          | 150                 |
| mode     | Vertical or horizontal menu               | ModeType.HORIZONTAL |
| children | JSX Element(s) that will show on the menu |                     |

### MbtScenesIcon

Usually used alongside with MbtScenesMenu, represents the icon of a single scene

| Prop             | Description                                             | Default |
| ---------------- | ------------------------------------------------------- | ------- |
| background       | Image of the scene                                      |         |
| name             | Name of the scene                                       |         |
| mode             | Horizontal of Vertical for size reasons                 |         |
| size             | Size wanted                                             |         |
| onSceneIconClick | Function called upon clicking on the scene              |         |
| selected         | If the scene is selected makes a blue outline around it | false   |

### MbtBrick

A brick, fully customizable  
Brick state can be any of the following: 
```ts
"INVISIBLE | INACTIVE | ACTIVE | INPROGRESS | DONE | FAILED | SUCCESS"
```
Type can be: 
```ts
"GOTO | QUIZ | POST-IT | DOC | URL | IMAGE360 | VIDEO360"
```
And documentType: 
```ts
"pdf | doc | docx | ppt | pptx | xls | xlsx | image | mp3 | mp4"
```

| Prop         | Description                      | Default  |
| ------------ | -------------------------------- | -------- |
| name         | named of the brick               |          |
| type         | brick type                       | Unknown  |
| documentType | document type if it's a DOC      |          |
| state        | brick state                      | "ACTIVE" |
| showSubIcon  | if the brick sub icon is shown   | true     |
| showText     | if the brick text below is shown | true     |
| htmlAttr     | All custom html attributes       | none     |

### MbtDialog

A dialog in absolute that the size depends on the parent
There's 2 options and a default value.
- Either in a grid (that starts with 1 not 0) with:
  - Start (ex: {2, 2})
  - End (ex: {4, 4})
  - nbSquares (ex: 5)

So the dialog will show up like this relative to it's parent in this example, grid of 5 and starts at 2,2 (s) and ends at 4,4 (e)
<pre>
d  d  d  d  d  
d  s  x  x  d  
d  x  x  x  d  
d  x  x  e  d  
d  d  d  d  d  
</pre>
- Or in absolute with percentages
  - posStart (ex : {10,10})
  - width (ex: 80)
  - height (ex: 80)

It applies the css properties top,left,width,height in position absolute to the dialog

- If you want to use the modes above you have to provide ALL 3 props related to it, if the props are invalid or none are given the default values will make it take up all available space :
  - posStart: {0 , 0}
  - height: 100
  - width: 100

| Prop      | Description                                                        | Default             |
| --------- | ------------------------------------------------------------------ | ------------------- |
| start     | Start position on the grid                                         |                     |
| end       | End position on the grid                                           |                     |
| nbSquares | Number of squares in the grid                                      |                     |
| posStart  | Percentage from the top and left it starts (ex: {top: 5, left: 5}) | { top: 0, left: 0 } |
| height    | Height in percentage                                               | 100                 |
| width     | Width in percentage                                                | 100                 |
| mode      | 'preview' has an opacity and 'plain' is normal                     | 'plain'             |
| children  | JSX Element(s) in the component                                    |                     |
| htmlAttr  | All the html attributes are optional                               |                     |

### MbtFullScreen

A fullscreen button

| Prop   | Description                                  | Default |
| ------ | -------------------------------------------- | ------- |
| divRef | ref of the div you want to get in fullscreen |         |

### MbtLoader

Loader with a z-index of 10000

| Prop | Description                     | Default |
| ---- | ------------------------------- | ------- |
| show | If the loader is showing or not |         |

### MbtDragElement

| Prop          | Description                             | Default |
| ------------- | --------------------------------------- | ------- |
| position      | the position                            |         |
| dropRef       | ref of the drop element                 |         |
| showDragImage | If the drag image shows                 |         |
| data          | Data                                    |         |
| children      | JSX Element(s) shown under this element |         |
| ...htmlAttr   | any html attributes                     |         |

## Mobiteach Activities

### MbtDocument

A document activity

Example of a documentState :
```ts
documentState: {
    results: null,
    successRate: 0 | 1,
    activityCompletedRate: 0...1,
    activityState: {
        currentPdfPageNumber: newPage
        mediaCurrentTime: currentTime
    }
}
```

| Prop              | Description                                                                     | Default       |
| ----------------- | ------------------------------------------------------------------------------- | ------------- |
| activity          | The activity gotten form the API                                                |               |
| documentState     | The initial state of the document                                               | {}            |
| onDocumentLeave   | Function called upon leaving the document through the button                    | (state) => {} |
| onDocumentAdvance | Function called upon changing page/advancing in the document                    | (state) => {} |
| onDocumentFinish  | Function called upon finishing the document                                     | (state) => {} |
| onStatusChange    | When the status of the document changes, best function to use to get the status | (state) => {} |
| baseUrl           | If there's a baseUrl before the path of the document                            | ""            |

### MbtDome360

Dome360 can be used to show 360° images and videos

activity is of type: 
```ts
{
  url: "src", 
  activityType: "IMAGE360" | "VIDEO360"
}
```

| Prop             | Description                                 | Default       |
| ---------------- | ------------------------------------------- | ------------- |
| activity         | The activity                                |               |
| mediaCurrentTime | Current time if it's a video360             | 0             |
| onStatusChange   | When the status of the activity changes     | (state) => {} |
| onDomeLeave      | Function called upon finishing the activity | (state) => {} |

### MbtPostIt

Can be used to create post-its, the topic in activity is the title.
The best function to use to get all the status changes is onStatusChange.

Activity of type:
```ts
{ topic : "" } 
```
And user of type:
```ts
{
  _id: 0, 
  firstname: "", 
  lastname: ""
}
```

| Prop           | Description                                                  | Default        |
| -------------- | ------------------------------------------------------------ | -------------- |
| activity       | The activity                                                 |                |
| user           | The user                                                     |                |
| postIts        | If already created postIts you can pass them in props        | {}             |
| onPostItCreate | Function called upon creating a postIt                       | (postIt) => {} |
| onPostItEdit   | Function called upon editing a postIt                        | (postIt) => {} |
| onPostItDelete | Function called upon deleting a postIt                       | (postIt) => {} |
| onStatusChange | Function called upon any change in the postIts               | (state) => {}  |
| onPostItLeave  | Function called upon clicking the leave button               | () => {}       |
| viewOnly       | If the postIts are in "view only" mode, can't edit or create |                |

### MbtQuiz

Shows the quiz and returns the state.

The initialState if not currentState prop is defined is:
```ts
initialState = {
    questionIndex: 0,
    answers: [],
    isFinish: false,
    status: "QUESTION"
}
```
Mode is the QUIZ mode, it can be:
```ts
mode: "MODE01 | MODE02 | MODE03"
```

| Prop               | Description                                          | Default                |
| ------------------ | ---------------------------------------------------- | ---------------------- |
| activity           | Data about the activity gotten from the Mobitech API |                        |
| mode               | The mode of the quiz                                 | "MODE01"               |
| currentState       | The current state of the activity                    | InitialState           |
| onStatusChange     | Function called upon any change in the state         | (state) => {}          |
| onQuestionAnswer   | Function called upon answering a question            | (state) => {}          |
| onFinish           | Function called upon finishing the QUIZ              | (state) => {}          |
| onQuizLeave        | Function called upon clicking the leave button       | (state) => {}          |
| hasLeaveButton     | If the QUIZ has a leave button                       | true                   |
| showResultOnFinish | If you want to show the results on finish            | true                   |
| baseUrl            | If there's a baseUrl                                 | window.location.origin |

### MbtUrl

A url type activity, opens the URL in a new tab or in an iframe

| Prop           | Description                                     | Default       |
| -------------- | ----------------------------------------------- | ------------- |
| UrlName        | Name of the url                                 |               |
| Url            | url                                             |               |
| withIframe     | If it opens in an iframe                        | false         |
| onUrlLeave     | Function called upong clicking the leave button | (state) => {} |
| onStatusChange | The activity                                    | (state) => {} |

## Language

You can set and get the language used using the functions:
- SetMbtLang("fr")
- GetMbtLang()

## To update the package in npm
* Add the component you want to add to the package to the index.tsx file in the src folder
* Run "npm run build" to compile the folder with babel
* Change the version in package.json and run "npm publish" 
* Needs an npm account with access to the package, must use "npm login"