capsule-mobiteach-components

Mobiteach capsule components

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
capsule-mobiteach-components
1.1.12a year ago2 years agoMinified + gzip package size for capsule-mobiteach-components in KB

Readme

npm version
Capsule mobiteach components
Useful react components to use in Mobiteach capsules - Usage - GUI Components
- [MbtLeaveButton](#mbtleavebutton)
- [MbtPopup](#mbtpopup)
- [MbtScenesMenu](#mbtscenesmenu)
- [MbtScenesIcon](#mbtscenesicon)
- [MbtBrick](#mbtbrick)
- [MbtDialog](#mbtdialog)
- [MbtFullScreen](#mbtfullscreen)
- [MbtLoader](#mbtloader)
- [MbtDragElement](#mbtdragelement)
- Mobiteach Activities
- [MbtDocument](#mbtdocument)
- [MbtDome360](#mbtdome360)
- [MbtPostIt](#mbtpostit)
- [MbtQuiz](#mbtquiz)
- [MbtUrl](#mbturl)
- Language - 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)
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  
  • 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"