[Feature] Jace experience system

addon/components/o-s-s/button.ts

@@ -70,7 +70,7 @@ const SQUARE_CLASS = 'upf-square-btn';
 const DEFAULT_COUNTER_TIME = 5000;
 const DEFAULT_STEP_COUNTER_TIME = 1000;
 
-interface ButtonArgs {
+export interface OSSButtonArgs {
   skin?: string;
   size?: string;
   loading?: boolean;
@@ -87,15 +87,17 @@ interface ButtonArgs {
   };
 }
 
-export default class OSSButton extends Component<ButtonArgs> {
+export default class OSSButton<T extends OSSButtonArgs> extends Component<T> {
   @tracked DOMElement: HTMLElement | undefined;
   @tracked intervalID: ReturnType<typeof setInterval> | undefined;
   @tracked intervalState: boolean = false;
   @tracked counterTimeLeft: number = 0;
 
-  constructor(owner: unknown, args: ButtonArgs) {
+  constructor(owner: unknown, args: OSSButtonArgs, preventDefaultAssertions?: boolean) {
     super(owner, args);
 
+    if (preventDefaultAssertions) return;
+
     assert(
       '[component][OSS::Button] You must pass either a @label, an @icon or an @iconUrl argument.',
       args.label || args.icon || args.iconUrl

addon/components/o-s-s/currency-input.hbs

@@ -1,9 +1,14 @@
 <div class={{this.computedClasses}} ...attributes>
-  <div class="currency-input fx-row fx-1 fx-xalign-center
-              {{if @onlyCurrency 'onlycurrency'}} {{if this.currencySelectorShown 'currency-input--active'}}">
-    <div class="currency-selector fx-row fx-gap-px-12 fx-malign-space-between fx-xalign-center"
-         role={{if this.allowCurrencyUpdate 'button' 'img'}}
-         {{on "click" this.toggleCurrencySelector}}>
+  <div
+    class="currency-input fx-row fx-1 fx-xalign-center
+      {{if @onlyCurrency 'onlycurrency'}}
+      {{if this.currencySelectorShown 'currency-input--active'}}"
+  >
+    <div
+      class="currency-selector fx-row fx-gap-px-12 fx-malign-space-between fx-xalign-center"
+      role={{if this.allowCurrencyUpdate "button" "img"}}
+      {{on "click" this.toggleCurrencySelector}}
+    >
       <div class="fx-col">
         <div class="fx-row fx-gap-px-9">
           <span>{{this.selectedCurrencySymbol}}</span>
@@ -14,8 +19,10 @@
       </div>
 
       {{#if (and this.allowCurrencyUpdate (not this.disabled))}}
-        <OSS::Icon @icon="{{if this.currencySelectorShown "fa-chevron-up" "fa-chevron-down"}}"
-                   class="margin-left-px-6" />
+        <OSS::Icon
+          @icon="{{if this.currencySelectorShown 'fa-chevron-up' 'fa-chevron-down'}}"
+          class="margin-left-px-6"
+        />
       {{/if}}
     </div>
     {{#unless @onlyCurrency}}

addon/components/o-s-s/currency-input.ts

@@ -9,7 +9,7 @@ export type Currency = {
   symbol: string;
 };
 
-interface OSSCurrencyInputArgs {
+export interface OSSCurrencyInputArgs {
   currency: string;
   value: number;
   onChange(currency: string, value: number): void;
@@ -67,16 +67,18 @@ const AUTHORIZED_INPUTS = [
   'ArrowDown'
 ];
 
-export default class OSSCurrencyInput extends Component<OSSCurrencyInputArgs> {
+export default class OSSCurrencyInput<T extends OSSCurrencyInputArgs> extends Component<T> {
   private currencies = this.args.allowedCurrencies ?? PLATFORM_CURRENCIES;
 
   @tracked currencySelectorShown: boolean = false;
   @tracked filteredCurrencies: Currency[] = this.currencies;
   @tracked localValue: number = this.args.value;
 
-  constructor(owner: unknown, args: OSSCurrencyInputArgs) {
+  constructor(owner: unknown, args: OSSCurrencyInputArgs, preventDefaultAssertions?: boolean) {
     super(owner, args);
 
+    if (preventDefaultAssertions) return;
+
     if (!this.args.value && !this.args.placeholder) {
       this.localValue = 0;
     }

addon/components/o-s-s/infinite-select.hbs

@@ -1,7 +1,9 @@
 <div
   id={{this.elementId}}
   data-internal-id={{this.elementId}}
-  class="fx-col fx-gap-px-12 upf-infinite-select {{unless this.inline 'upf-infinite-select--absolute'}}"
+  class="fx-col fx-gap-px-12 upf-infinite-select
+    {{unless this.inline 'upf-infinite-select--absolute'}}
+    upf-infinite-select--{{this.skin}}"
   {{did-insert this.onRender}}
   ...attributes
 >
@@ -10,6 +12,7 @@
       @value={{this._searchKeyword}}
       @placeholder={{this.searchPlaceholder}}
       @onChange={{this.updateSearchKeyword}}
+      class="upf-infinite-select--search"
       {{on "keydown" this.handleKeyEventInput}}
       {{did-insert this.initSearchInput}}
     />

addon/components/o-s-s/infinite-select.stories.js

@@ -11,6 +11,8 @@ const FAKE_DATA = [
   { superhero: 'Spider Man', characters: 'Peter Parker' }
 ];
 
+const SkinTypes = ['default', 'smart'];
+
 export default {
   title: 'Components/OSS::InfiniteSelect',
   component: 'infinite-select',
@@ -56,6 +58,17 @@ export default {
       },
       control: { type: 'boolean' }
     },
+    skin: {
+      description: 'Adjust the skin of the badge',
+      table: {
+        type: {
+          summary: SkinTypes.join('|')
+        },
+        defaultValue: { summary: 'default' }
+      },
+      options: SkinTypes,
+      control: { type: 'select' }
+    },
     loading: {
       type: { name: 'boolean' },
       description: 'Whether or not the initial content is loading',
@@ -159,6 +172,7 @@ const defaultArgs = {
   loadingMore: false,
   inline: false,
   enableKeyboard: false,
+  skin: 'default',
   onSelect: action('onSelect'),
   onSearch: action('onSearch'),
   onBottomReached: action('onBottomReached'),
@@ -171,7 +185,8 @@ const Template = (args) => ({
         @items={{this.items}} @itemLabel={{this.itemLabel}} @searchEnabled={{this.searchEnabled}} @onSearch={{this.onSearch}}
         @searchPlaceholder={{this.searchPlaceholder}} @onSelect={{this.onSelect}} @loading={{this.loading}}
         @loadingMore={{this.loadingMore}} @inline={{this.inline}} @onBottomReached={{this.onBottomReached}} 
-        @didRender={{this.didRender}} @enableKeyboard={{this.enableKeyboard}} class="upf-align--absolute-center"/>
+        @skin={{this.skin}} @didRender={{this.didRender}} @enableKeyboard={{this.enableKeyboard}}
+        class="upf-align--absolute-center"/>
   `,
   context: args
 });

addon/components/o-s-s/infinite-select.ts

@@ -14,6 +14,7 @@ interface InfiniteSelectArgs {
   items: InfinityItem[];
   inline: boolean;
   enableKeyboard?: boolean;
+  skin?: 'default' | 'smart';
 
   onSelect: (item: InfinityItem) => void;
   onSearch?: (keyword: string) => void;
@@ -71,6 +72,10 @@ export default class OSSInfiniteSelect extends Component<InfiniteSelectArgs> {
     return this.args.inline ?? false;
   }
 
+  get skin(): 'default' | 'smart' {
+    return this.args.skin ?? 'default';
+  }
+
   @action
   onRender(): void {
     this.args.didRender?.();

addon/components/o-s-s/input-container.ts

@@ -7,7 +7,7 @@ export type FeedbackMessage = {
   value: string;
 };
 
-interface OSSInputContainerArgs {
+export interface OSSInputContainerArgs {
   value?: string;
   disabled?: boolean;
   feedbackMessage?: FeedbackMessage;
@@ -21,7 +21,7 @@ interface OSSInputContainerArgs {
 
 export const AutocompleteValues = ['on', 'off'];
 
-export default class OSSInputContainer extends Component<OSSInputContainerArgs> {
+export default class OSSInputContainer<T extends OSSInputContainerArgs> extends Component<T> {
   get feedbackMessage(): FeedbackMessage | undefined {
     if (this.args.feedbackMessage && ['error', 'warning', 'success'].includes(this.args.feedbackMessage.type)) {
       return this.args.feedbackMessage;

addon/components/o-s-s/number-input.ts

@@ -2,7 +2,7 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-interface OSSNumberInputArgs {
+export interface OSSNumberInputArgs {
   value?: number;
   min?: number;
   max?: number;
@@ -21,7 +21,7 @@ const DECREASE_VALUE_KEYS = ['ArrowDown', 'ArrowLeft'];
 const BASE_INPUT_PIXEL_WIDTH = 40;
 const CHAR_PIXEL_WIDTH = 7;
 
-export default class OSSNumberInput extends Component<OSSNumberInputArgs> {
+export default class OSSNumberInput<T extends OSSNumberInputArgs> extends Component<T> {
   @tracked localValue: number = this.args.value || DEFAULT_VALUE;
   @tracked reachedTooltip: string | null = null;
   @tracked inputElement: HTMLElement | null = null;

addon/components/o-s-s/scrollable-panel.stories.js

@@ -45,6 +45,16 @@ export default {
         type: 'boolean'
       }
     },
+    offset: {
+      description: 'Offset in pixels from which the scrollable panel will be considered as scrolled',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' }
+      },
+      control: {
+        type: 'number'
+      }
+    },
     onBottomReached: {
       description: 'Function to be called when the scroll hits the bottom',
       table: {
@@ -68,6 +78,7 @@ const defaultArgs = {
   plain: false,
   disableShadows: false,
   hideScrollbar: false,
+  offset: 0,
   onBottomReached: action('onBottomReached')
 };
 
@@ -83,7 +94,8 @@ const Template = (args) => ({
                             @disableShadows={{this.disableShadows}}
                             @onBottomReached={{this.onBottomReached}}
                             @hideScrollbar={{this.hideScrollbar}}
-                            @horizontal={{this.horizontal}} >
+                            @horizontal={{this.horizontal}}
+                            @offset={{this.offset}} >
         <div class="fx-col fx-gap-px-12 padding-px-12">
           <div class="background-color-gray-200" style="height: 50px; width: 100%;" />
           <div class="background-color-gray-200" style="height: 50px; width: 100%;" />
@@ -105,7 +117,8 @@ const TemplateHorizontal = (args) => ({
                             @disableShadows={{this.disableShadows}}
                             @onBottomReached={{this.onBottomReached}}
                             @hideScrollbar={{this.hideScrollbar}}
-                            @horizontal={{this.horizontal}} >
+                            @horizontal={{this.horizontal}}
+                            @offset={{this.offset}} >
         <div class="fx-row fx-gap-px-12 padding-px-12" style="width: fit-content">
           <div class="background-color-gray-200" style="height: 50px; width: 100px;" />
           <div class="background-color-gray-200" style="height: 50px; width: 100px;" />

addon/components/o-s-s/scrollable-panel.ts

@@ -7,6 +7,7 @@ interface OSSScrollablePanelComponentSignature {
   disableShadows?: boolean;
   horizontal?: boolean;
   hideScrollbar?: boolean;
+  offset?: number;
   onBottomReached?: () => void;
 }
 
@@ -19,6 +20,10 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
 
   resizeObserver = new ResizeObserver(this.resizeObserverCallback.bind(this));
 
+  get offset(): number {
+    return this.args.offset ?? 0;
+  }
+
   @action
   initScrollListener(element: HTMLElement): void {
     this.parentElement = element;
@@ -54,7 +59,7 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
   }
 
   private scrollListener(): void {
-    if (this.parentElement.scrollTop > 0) {
+    if (this.parentElement.scrollTop - this.offset > 0) {
       this.shadowTopVisible = true;
     } else {
       this.shadowTopVisible = false;
@@ -63,15 +68,18 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
   }
 
   private displayBottomShadow(): void {
-    if (this.parentElement.scrollTop + this.parentElement.clientHeight >= this.parentElement.scrollHeight - 1) {
+    if (
+      this.parentElement.scrollTop + this.parentElement.clientHeight + this.offset >=
+      this.parentElement.scrollHeight - 1
+    ) {
       this.shadowBottomVisible = false;
     } else {
       this.shadowBottomVisible = true;
     }
   }
 
   private horizontalScrollListener(): void {
-    if (this.parentElement.scrollLeft > 0) {
+    if (this.parentElement.scrollLeft - this.offset > 0) {
       this.shadowLeftVisible = true;
     } else {
       this.shadowLeftVisible = false;
@@ -80,7 +88,10 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
   }
 
   private displayRightShadow(): void {
-    if (this.parentElement.scrollLeft + this.parentElement.clientWidth >= this.parentElement.scrollWidth - 1) {
+    if (
+      this.parentElement.scrollLeft + this.parentElement.clientWidth + this.offset >=
+      this.parentElement.scrollWidth - 1
+    ) {
       this.shadowRightVisible = false;
     } else {
       this.shadowRightVisible = true;

addon/components/o-s-s/skeleton.ts

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 import { htmlSafe } from '@ember/template';
 
-interface OSSSkeletonArgs {
+export interface OSSSkeletonArgs {
   width?: number | string;
   height?: number | string;
   multiple?: number;
@@ -13,10 +13,12 @@ interface OSSSkeletonArgs {
 
 const RANGE_PERCENTAGE: number = 15;
 
-export default class OSSSkeleton extends Component<OSSSkeletonArgs> {
-  constructor(owner: unknown, args: OSSSkeletonArgs) {
+export default class OSSSkeleton<T extends OSSSkeletonArgs> extends Component<T> {
+  constructor(owner: unknown, args: OSSSkeletonArgs, preventDefaultAssertions?: boolean) {
     super(owner, args);
 
+    if (preventDefaultAssertions) return;
+
     if (this.args.direction) {
       assert(
         `[component][OSS::Skeleton] The @direction argument should be a value of ${['row', 'column', 'col']}`,

addon/components/o-s-s/smart/button.hbs

@@ -0,0 +1,26 @@
+{{! template-lint-disable u-template-lint/no-bare-button}}
+<div class="upf-smart-btn-container fx-row" ...attributes>
+  <button
+    type="button"
+    class={{this.computedSmartClasses}}
+    disabled={{@disabled}}
+    {{did-insert this.didInsert}}
+    {{on "click" this.onclick}}
+  >
+    {{#if this.loadingState}}
+      <OSS::Icon @style="solid" @icon="fa-spinner-third fa-spin" />
+      {{#if (and @label @loadingOptions.showLabel)}}
+        <span class="margin-left-px-6">{{@label}}</span>
+      {{/if}}
+    {{else}}
+      {{#if @icon}}
+        <OSS::Icon @style={{fa-icon-style @icon}} @icon={{fa-icon-value @icon}} />
+      {{else if @iconUrl}}
+        <img src={{@iconUrl}} alt="icon" />
+      {{/if}}
+      {{#if (and @label (not this.isCircle))}}
+        <span class={{if (or @icon @iconUrl) "margin-left-px-6"}}>{{@label}}</span>
+      {{/if}}
+    {{/if}}
+  </button>
+</div>