User Interface

AchievementContainer

src/components/ui/interface/achievement/AchievementContainer.tsx

Prop name	Type	Default	Description
`intl`	any	Required
`onClose`	any	Required	Callback invoked when the close button is clicked
`user`	User	Required	Logged in user object

AchievementContainer

The AchievementContainer component renders a list of achievements based on the achievements state. Currently the achievement list is based on a json file (achievements-content.json).

Basic usage

import AchievementContainer from './AchievementContainer';

<div className="bg-black">
  <AchievementContainer 
    intl={{
      messages: {
        achievements: {
          list: []
        }
      }
    }}
    onClose={() => alert('onClose trigged!!!')}
  />
</div>

import AchievementContainer from './AchievementContainer';

<div className="bg-black">
  <AchievementContainer 
    intl={{
      messages: {
        achievements: {
          list: []
        }
      }
    }}
    onClose={() => alert('onClose trigged!!!')}
  />
</div>

AchievementItem

src/components/ui/interface/achievement/AchievementItem.tsx

Prop name	Type	Default
`active`	bool
`description`	string
`host`	string	`config.host`
`intl`	object	Shape
`items`	array	`[]`
`onClick`	func
`title`	string

AchievementItem

heading

import { AchievementItem } from './AchievementItem';

<div className="bgblack">
  <AchievementItem
    title="heading"
  />
</div>

import { AchievementItem } from './AchievementItem';

<div className="bgblack">
  <AchievementItem
    title="heading"
  />
</div>

AchievementList

src/components/ui/interface/achievement/AchievementList.tsx

Prop name	Type	Default
`achievements`	Item[]	`[]`
`intl`	any	`{ messages: { achievements: {} } }`
`user`	User	`{}`

AchievementList

import { AchievementList} from './AchievementList';

<div className="bgblack">
  <AchievementList />
</div>

import { AchievementList} from './AchievementList';

<div className="bgblack">
  <AchievementList />
</div>

Background

src/components/ui/interface/background/Background.tsx

Prop name	Type	Default
`children`	node
`options`	object	Shape
`user`	object	Shape

EditorManager

src/components/ui/interface/editor-manager/EditorManager.tsx

Prop name	Type	Default
`className`	string
`code`	object
`editor`	number	`1`
`onErrorCode`	object	Shape
`onValidCode`	object
`options`	object	Shape
`style`	object	Shape

EditorManager

The EditorManager component is a wrapper to orchestrate the Editor component.

Basic usage

import EditorManager from './EditorManager';
<EditorManager />

import EditorManager from './EditorManager';
<EditorManager />

Rendering 2 editors

<EditorManager editor={2} />

<EditorManager editor={2} />

Editor

src/components/ui/interface/editor/Editor.tsx

Prop name	Type	Default	Description
`className`	string		The desired class to be toggle in the editor wrapper - this does not apply to the CodeMirror component
`codeChanged`	func	Function	Callback executed when the editor code has changed. Important to note that this event is fired when the editor is about to change the code. This event is fired before the code takes place inside the editor.
`onFocus`	func	Function	Callback executed when the editor is focused
`options`	object	Shape	javascript object with codemirror options https://codemirror.net/3/doc/manual.html
`value`	string		The text to be placed inside the editor

Editor

Basic usage

Raw Editor component

  <Editor />

  <Editor />

Default text inside the editor

my text

  <Editor value={'my text'} />

  <Editor value={'my text'} />

Fire callback when the editor text has changed

  <Editor codeChanged={ code => alert(code) } />

  <Editor codeChanged={ code => alert(code) } />

Guide

src/components/ui/interface/guide/Guide.tsx

Prop name	Type	Default
`afkExpirationTime`	number	`30000`
`currentHint`	number
`guideContent`	array
`handleProgress`	func
`hovered`	bool
`invalidCode`	bool
`onFinishedTyping`	func
`onHover`	func
`showNext`	bool

src/components/ui/interface/header/Header.tsx

Prop name	Type	Default
`onSidebar`	func
`updateUser`	func	Function
`user`	object	Shape

Intro

src/components/ui/interface/intro/Intro.tsx

LanguageSelector

src/components/ui/interface/language-selector/LanguageSelector.tsx

Prop name	Type	Default
`intl`	any	`{ messages: { options: { languages: {} }, global: {}, } }`
`locale`	string	`pt-br`
`onChange`	any
`options`	any	`{}`
`setLocale`	any
`setUpdateOptions`	any

Level

src/components/ui/interface/level/Level.tsx

Prop name	Type	Default	Description
`intl`	object	Shape
`level`	number		A number representing the level: 0, 1, 20, 2400, 9999. There is no restrictions.
`progress`	number		A percentage representing the progress from 0 to 100. The progress is used as percentage, the minimum is 0 (zero) and the maximum is 100. Any number greater than 100, is going to be displayed as if it were 100.

Level

Basic usage

Raw Level component

1

import { Level } from './Level';

<Level level={1} progress={20} />

import { Level } from './Level';

<Level level={1} progress={20} />

Loading

src/components/ui/interface/loading/Loading.tsx

src/components/ui/interface/modal/Modal.tsx

Prop name	Type	Default	Description
`children`	node
`onClose`	func
`title`	node

Profile

src/components/ui/interface/profile/container/Profile.tsx

Prop name	Type	Default
`className`	string
`intl`	object	Shape
`setUser`	func
`user`	object

Profile

Basic usage

Raw Profile component

my user

import { Profile } from './Profile';
<Profile
  user={{ name: 'my user' }}
  intl={{
    messages: {
      global: {},
      menu: {}
    }
   }
  }
/>

import { Profile } from './Profile';
<Profile
  user={{ name: 'my user' }}
  intl={{
    messages: {
      global: {},
      menu: {}
    }
   }
  }
/>

Options

src/components/ui/interface/profile/options/Options.tsx

Prop name	Type	Default
`intl`	object	Shape
`options`	object	Shape
`setUpdateOptions`	func

Ranking

src/components/ui/interface/ranking/Ranking.tsx

Prop name	Type	Default	Description
`intl`	object	Shape
`onRanking`	func

Rocket

src/components/ui/interface/rocket/Rocket.tsx

Scene

src/components/ui/interface/scene-manager/Scene.tsx

Prop name	Type	Default
`button`	string
`className`	string
`handleLastScene`	any
`intl`	any	`{}`
`lastScene`	boolean
`next`	any
`onCompleted`	any	`{}`
`previous`	any
`releaseButton`	number	`2000`
`showAlien`	any
`showBuggy`	any	`{}`
`showNextButton`	number	`900`
`step`	number
`text`	TextItem[]	`[]`

SceneContentManager

src/components/ui/interface/scene-manager/SceneContentManager.tsx

SceneManager

src/components/ui/interface/scene-manager/SceneManager.tsx

Prop name	Type	Default
`content`	any	Required
`handleLastScene`	function	Required
`identifier`	string	Required
`className`	string

src/components/ui/interface/sidebar/Sidebar.tsx

Prop name	Type	Default	Description
`children`	node
`user`	object	Shape

Survey

src/components/ui/interface/survey/index.tsx

Survey

src/components/ui/interface/survey/Survey.tsx

Prop name	Type	Default	Description
`className`	string
`skip`	boolean
`surveyUrl`	string
`user`	User

TestExecutionAnimation

src/components/ui/interface/test-execution-animation/TestExecutionAnimation.tsx

AnimatedText

src/components/ui/interface/text-keyboard-animation/AnimatedText.tsx

Prop name	Type	Default
`text`	TextItem[]	Required
`className`	string
`onFinishedTyping`	any

TypedText

src/components/ui/interface/text-keyboard-animation/TypedText.tsx

Prop name	Type	Default	Description
`onComplete`	any	Required
`strings`	string[]	`[]`

Title

src/components/ui/interface/title/Title.tsx

Prop name	Type	Default	Description
`children`	ReactNode	Required

Title

Basic usage

my title

import Title from './Title';

<Title>
  <div>my title</div>
</Title>

import Title from './Title';

<Title>
  <div>my title</div>
</Title>

UserMenu

src/components/ui/interface/user-menu/UserMenu.tsx

Prop name	Type	Default
`intl`	object	Shape
`onNotification`	func
`showUpSurvey`	bool	`config.showSurvey`
`user`	object

Icons

Achievement

src/components/ui/icons/Achievement.tsx

Check

src/components/ui/icons/Check.tsx

Close

src/components/ui/icons/Close.tsx

Cup

src/components/ui/icons/Cup.tsx

Load

src/components/ui/icons/load/Load.tsx

Load

Basic usage

import Load  from './Load';
<Load />

import Load  from './Load';
<Load />

src/components/ui/icons/Next.tsx

Images

AlienRocket

src/components/ui/images/alien/AlienSvg.tsx

AlienSvg

Basic usage

Raw AlienSvg component

import AlienSvg from './AlienSvg';

<AlienSvg />

import AlienSvg from './AlienSvg';

<AlienSvg />

BuggyLeft

src/components/ui/images/buggy/Buggy.tsx

Logo

src/components/ui/images/logo/Logo.tsx

PlaceholderImage

src/components/ui/images/profile/PlaceholderImage.tsx

Buttons

Debug

src/components/ui/buttons/debug/Debug.tsx

Prop name	Type	Default	Description
`onClick`	MouseEventHandler<HTMLInputElement>	Required
`value`	string	Required

Debug

Basic usage

import Debug from './Debug';
<Debug value="next scene" />

import Debug from './Debug';
<Debug value="next scene" />

Primary

src/components/ui/buttons/primary/Primary.tsx

Prop name	Type	Description
`className`	string	Custom class to append in the ed of the button element class list.
`description`	string	The text that goes inside the button.
`disabled`	bool	Indicates whether the button should be disabled (true) or not (false)
`onClick`	func	Calback to be executed when the button is clicked.

Primary

Basic usage

Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

import Primary from './Primary';
<Primary description="OK!"/>

import Primary from './Primary';
<Primary description="OK!"/>