@24i/bigscreen-sdk 1.0.40-alpha.2687 → 1.0.40

package/packages/runtime-config/README.md

@@ -1,37 +1,37 @@
----
-id: README
-title: Runtime Config
-hide_title: true
-sidebar_label: Runtime Config
----
-
-# Runtime Config
-This package manages runtime configuration through external JSON file.
-
-## Setup in project
-If you use the BIGscreen template, it should be prepared.
-The location of the `config.json` is in `src` folder. After the build it is located inside `assets`
-folder together with other files. So the default path to config.json is `./assets/config.json`.
-This path can be changed in init function like this:
-```ts
-config.init('custom/path/to/config.json');
-```
-In your `main` function you first need to init the package:
-```ts
-import { config } from '@24i/bigscreen-sdk/runtime-config';
-
-const main = () => {
-    await config.init(); // This should be first
-    // ... other stuff like device init, render, etc.
-};
-```
-
-## Usage in packages
-```ts
-import { config } from '@24i/bigscreen-sdk/runtime-config';
-
-const backgroundColor = config.get('branding.background');
-```
-
-`config.get('path.to.key')` goes through the config object and
-either returns found value or undefined.
+---
+id: README
+title: Runtime Config
+hide_title: true
+sidebar_label: Runtime Config
+---
+
+# Runtime Config
+This package manages runtime configuration through external JSON file.
+
+## Setup in project
+If you use the BIGscreen template, it should be prepared.
+The location of the `config.json` is in `src` folder. After the build it is located inside `assets`
+folder together with other files. So the default path to config.json is `./assets/config.json`.
+This path can be changed in init function like this:
+```ts
+config.init('custom/path/to/config.json');
+```
+In your `main` function you first need to init the package:
+```ts
+import { config } from '@24i/bigscreen-sdk/runtime-config';
+
+const main = () => {
+    await config.init(); // This should be first
+    // ... other stuff like device init, render, etc.
+};
+```
+
+## Usage in packages
+```ts
+import { config } from '@24i/bigscreen-sdk/runtime-config';
+
+const backgroundColor = config.get('branding.background');
+```
+
+`config.get('path.to.key')` goes through the config object and
+either returns found value or undefined.

package/packages/runtime-config/src/Config.ts

@@ -1,44 +1,44 @@
-const DEFAULT_PATH = './assets/config.json';
-
-class Config {
-    private config: Record<string, any> = {};
-
-    async init(path: string = DEFAULT_PATH) {
-        return new Promise<void>((resolve, reject) => {
-            const xhr = new XMLHttpRequest();
-            xhr.onload = () => {
-                try {
-                    this.setConfig(JSON.parse(xhr.response));
-                    resolve();
-                } catch (error) {
-                    reject(error);
-                }
-            };
-
-            xhr.onerror = function (error) {
-                reject(error);
-            };
-
-            xhr.open('GET', path);
-            xhr.send();
-        });
-    }
-
-    setConfig(configObject: Record<string, any>) {
-        this.config = configObject;
-    }
-
-    get<T>(path: string): T | undefined {
-        const pathParts = path.split('.');
-        const pathPartsLength = pathParts.length;
-        let subConfig = this.config;
-        for (let i = 0; i < pathPartsLength; i++) {
-            const part = pathParts[i];
-            subConfig = subConfig[part];
-            if (typeof subConfig === 'undefined') return undefined;
-        }
-        return subConfig as T;
-    }
-}
-
-export const config = new Config();
+const DEFAULT_PATH = './assets/config.json';
+
+class Config {
+    private config: Record<string, any> = {};
+
+    async init(path: string = DEFAULT_PATH) {
+        return new Promise<void>((resolve, reject) => {
+            const xhr = new XMLHttpRequest();
+            xhr.onload = () => {
+                try {
+                    this.setConfig(JSON.parse(xhr.response));
+                    resolve();
+                } catch (error) {
+                    reject(error);
+                }
+            };
+
+            xhr.onerror = function (error) {
+                reject(error);
+            };
+
+            xhr.open('GET', path);
+            xhr.send();
+        });
+    }
+
+    setConfig(configObject: Record<string, any>) {
+        this.config = configObject;
+    }
+
+    get<T>(path: string): T | undefined {
+        const pathParts = path.split('.');
+        const pathPartsLength = pathParts.length;
+        let subConfig = this.config;
+        for (let i = 0; i < pathPartsLength; i++) {
+            const part = pathParts[i];
+            subConfig = subConfig[part];
+            if (typeof subConfig === 'undefined') return undefined;
+        }
+        return subConfig as T;
+    }
+}
+
+export const config = new Config();

package/packages/runtime-config/src/index.ts

@@ -1 +1 @@
-export { config } from './Config';
+export { config } from './Config';

package/packages/sass-utils/README.md

@@ -1,197 +1,197 @@
----
-id: README
-title: Sass utils
-hide_title: true
-sidebar_label: Sass utils
----
-
-# Sass utils
-This package contains only sass utils to speed up style writing and unify it across projects.
-
-## Available utils
-All utils that do prefixing (except for `linear-gradient`) use `webkit` as a default list of prefixes.
-With all of them you can pass your own prefixes if needed as the last param.
-```scss
-@include transform(translate3d());
-/* vs */
-@include transform(translate3d(), moz ms);
-```
-
-### Mixins
-- [box-shadow](#box-shadow---mixin)
-- [ellipsis and multiline ellipsis](#ellipsis-and-multiline-ellipsis---mixin)
-- [linear-gradient](#linear-gradient---mixin)
-- [transform](#transform---mixin)
-- [transition](#transition---mixin)
-- [prefix](#prefix---mixin)
-- [prefix-value](#prefix-value---mixin)
-
-### Functions
-- [scale](#scale---function)
-- [prefix-property](#prefix-property---function)
-
-### box-shadow - mixin
-```scss
-@import '@24i/bigscreen-sdk/sass-utils/box-shadow';
-
-.my-element {
-    @include box-shadow(1px 2px 3px 4px #fff);
-}
-```
-outputs:
-```css
-.my-element {
-    -webkit-box-shadow: 1px 2px 3px 4px #fff;
-    box-shadow: 1px 2px 3px 4px #fff;
-}
-```
-
-### ellipsis and multiline-ellipsis - mixin
-```scss
-@import '@24i/bigscreen-sdk/sass-utils/ellipsis';
-
-.my-component-1 {
-    @include ellipsis;
-}
-
-.my-component-2 {
-    @include multiline-ellipsis(3);
-}
-```
-outputs:
-```css
-.my-component-1 {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.my-component-2 {
-    display: -webkit-box;
-    display: box;
-    -webkit-line-clamp: 3;
-    line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-```
-
-### linear-gradient - mixin
-Linear gradient adds only webkit prefix for simplicity.
-```scss
-@import '@24i/bigscreen-sdk/sass-utils/linear-gradient';
-
-.my-component {
-    @include linear-gradient(to left, #f00 0%, #0f0 50%, #00f 100%);
-}
-```
-outputs:
-```css
-.my-component {
-    background: -webkit-linear-gradient(right, #f00 0%, #0f0 50%, #00f 100%);
-    background: linear-gradient(to left, #f00 0%, #0f0 50%, #00f 100%);
-}
-```
-
-### transform - mixin
-```scss
-@import '@24i/bigscreen-sdk/sass-utils/transform';
-
-.my-element {
-    @include transform(translate3d($left-offset, $top-offset, 0));
-}
-```
-outputs:
-```css
-.my-element {
-    -webkit-transform: translate3d(40px, 20px, 0);
-    transform: translate3d(40px, 20px, 0);
-}
-```
-
-### transition - mixin
-```scss
-@import '@24i/bigscreen-sdk/sass-utils/transition';
-@import '@24i/bigscreen-sdk/sass-utils/prefix-property';
-
-.my-element {
-    @include transition(prefix-property(transform) 300ms);
-}
-```
-outputs:
-```css
-.my-element {
-    -webkit-transition: all 300ms;
-    transition: all 300ms;
-    -webkit-transition-property: transform, -webkit-transform;
-    transition-property: transform, -webkit-transform;
-}
-```
-### scale - function
-Scale behaves slightly differently from other functions. There are two exports - one for 720 builds and
-one for 1080 builds. In your project, you should import the scale function in the styles file based
-on the size that you need. Then you should access the scale function through this import.
-- `scale.1080` just rounds the value.
-- `scale.720` divides the value by `1.5` and then rounds it.
-```scss
-// MyComponent.styles.scss
-@import '@24i/bigscreen-sdk/sass-utils/scale.720';
-@import './MyComponent';
-
-// MyComponent.styles.1080.scss
-@import '@24i/bigscreen-sdk/sass-utils/scale.1080';
-@import './MyComponent';
-
-// MyComponent.scss
-.my-component {
-    width: scale(1920px);
-}
-```
-
-### prefix-property - function
-```scss
-@import '@24i/bigscreen-sdk/sass-utils/prefix-property';
-
-.my-element {
-    /* Only to demonstrate standalone prefix-property. You should however use transition mixin */
-    transition: prefix-property(transform);
-}
-```
-outputs:
-```css
-.my-element {
-    transition: transform, -webkit-transform;
-}
-```
-
-### prefix - mixin
-```scss
-@import '@24i/bigscreen-sdk/sass-utils/prefix';
-
-.my-element {
-    @include prefix(transform, translate3d(10px, 20px, 0));
-}
-```
-outputs:
-```css
-.my-element {
-    -webkit-transform: translate3d(10px, 20px, 0);
-    transform: translate3d(10px, 20px, 0);
-}
-```
-
-### prefix-value - mixin
-```scss
-@import '@24i/bigscreen-sdk/sass-utils/prefix-value';
-
-.my-element {
-    @include prefix-value(display, box);
-}
-```
-outputs:
-```css
-.my-element {
-    display: -webkit-box;
-    display: box;
-}
-```
+---
+id: README
+title: Sass utils
+hide_title: true
+sidebar_label: Sass utils
+---
+
+# Sass utils
+This package contains only sass utils to speed up style writing and unify it across projects.
+
+## Available utils
+All utils that do prefixing (except for `linear-gradient`) use `webkit` as a default list of prefixes.
+With all of them you can pass your own prefixes if needed as the last param.
+```scss
+@include transform(translate3d());
+/* vs */
+@include transform(translate3d(), moz ms);
+```
+
+### Mixins
+- [box-shadow](#box-shadow---mixin)
+- [ellipsis and multiline ellipsis](#ellipsis-and-multiline-ellipsis---mixin)
+- [linear-gradient](#linear-gradient---mixin)
+- [transform](#transform---mixin)
+- [transition](#transition---mixin)
+- [prefix](#prefix---mixin)
+- [prefix-value](#prefix-value---mixin)
+
+### Functions
+- [scale](#scale---function)
+- [prefix-property](#prefix-property---function)
+
+### box-shadow - mixin
+```scss
+@import '@24i/bigscreen-sdk/sass-utils/box-shadow';
+
+.my-element {
+    @include box-shadow(1px 2px 3px 4px #fff);
+}
+```
+outputs:
+```css
+.my-element {
+    -webkit-box-shadow: 1px 2px 3px 4px #fff;
+    box-shadow: 1px 2px 3px 4px #fff;
+}
+```
+
+### ellipsis and multiline-ellipsis - mixin
+```scss
+@import '@24i/bigscreen-sdk/sass-utils/ellipsis';
+
+.my-component-1 {
+    @include ellipsis;
+}
+
+.my-component-2 {
+    @include multiline-ellipsis(3);
+}
+```
+outputs:
+```css
+.my-component-1 {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.my-component-2 {
+    display: -webkit-box;
+    display: box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+```
+
+### linear-gradient - mixin
+Linear gradient adds only webkit prefix for simplicity.
+```scss
+@import '@24i/bigscreen-sdk/sass-utils/linear-gradient';
+
+.my-component {
+    @include linear-gradient(to left, #f00 0%, #0f0 50%, #00f 100%);
+}
+```
+outputs:
+```css
+.my-component {
+    background: -webkit-linear-gradient(right, #f00 0%, #0f0 50%, #00f 100%);
+    background: linear-gradient(to left, #f00 0%, #0f0 50%, #00f 100%);
+}
+```
+
+### transform - mixin
+```scss
+@import '@24i/bigscreen-sdk/sass-utils/transform';
+
+.my-element {
+    @include transform(translate3d($left-offset, $top-offset, 0));
+}
+```
+outputs:
+```css
+.my-element {
+    -webkit-transform: translate3d(40px, 20px, 0);
+    transform: translate3d(40px, 20px, 0);
+}
+```
+
+### transition - mixin
+```scss
+@import '@24i/bigscreen-sdk/sass-utils/transition';
+@import '@24i/bigscreen-sdk/sass-utils/prefix-property';
+
+.my-element {
+    @include transition(prefix-property(transform) 300ms);
+}
+```
+outputs:
+```css
+.my-element {
+    -webkit-transition: all 300ms;
+    transition: all 300ms;
+    -webkit-transition-property: transform, -webkit-transform;
+    transition-property: transform, -webkit-transform;
+}
+```
+### scale - function
+Scale behaves slightly differently from other functions. There are two exports - one for 720 builds and
+one for 1080 builds. In your project, you should import the scale function in the styles file based
+on the size that you need. Then you should access the scale function through this import.
+- `scale.1080` just rounds the value.
+- `scale.720` divides the value by `1.5` and then rounds it.
+```scss
+// MyComponent.styles.scss
+@import '@24i/bigscreen-sdk/sass-utils/scale.720';
+@import './MyComponent';
+
+// MyComponent.styles.1080.scss
+@import '@24i/bigscreen-sdk/sass-utils/scale.1080';
+@import './MyComponent';
+
+// MyComponent.scss
+.my-component {
+    width: scale(1920px);
+}
+```
+
+### prefix-property - function
+```scss
+@import '@24i/bigscreen-sdk/sass-utils/prefix-property';
+
+.my-element {
+    /* Only to demonstrate standalone prefix-property. You should however use transition mixin */
+    transition: prefix-property(transform);
+}
+```
+outputs:
+```css
+.my-element {
+    transition: transform, -webkit-transform;
+}
+```
+
+### prefix - mixin
+```scss
+@import '@24i/bigscreen-sdk/sass-utils/prefix';
+
+.my-element {
+    @include prefix(transform, translate3d(10px, 20px, 0));
+}
+```
+outputs:
+```css
+.my-element {
+    -webkit-transform: translate3d(10px, 20px, 0);
+    transform: translate3d(10px, 20px, 0);
+}
+```
+
+### prefix-value - mixin
+```scss
+@import '@24i/bigscreen-sdk/sass-utils/prefix-value';
+
+.my-element {
+    @include prefix-value(display, box);
+}
+```
+outputs:
+```css
+.my-element {
+    display: -webkit-box;
+    display: box;
+}
+```

package/packages/sass-utils/src/box-shadow.scss

@@ -1,5 +1,5 @@
-@import './prefix';
-
-@mixin box-shadow($value, $prefixes: (webkit)) {
-    @include prefix(box-shadow, $value, $prefixes);
-}
+@import './prefix';
+
+@mixin box-shadow($value, $prefixes: (webkit)) {
+    @include prefix(box-shadow, $value, $prefixes);
+}

package/packages/sass-utils/src/ellipsis.scss

@@ -1,15 +1,15 @@
-@import './prefix-value';
-@import './prefix';
-
-@mixin ellipsis {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-@mixin multiline-ellipsis($lines, $prefixes: (webkit)) {
-    @include prefix-value(display, box, $prefixes);
-    @include prefix(line-clamp, $lines, $prefixes);
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
+@import './prefix-value';
+@import './prefix';
+
+@mixin ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+@mixin multiline-ellipsis($lines, $prefixes: (webkit)) {
+    @include prefix-value(display, box, $prefixes);
+    @include prefix(line-clamp, $lines, $prefixes);
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}