@24i/bigscreen-sdk 0.9.9-alpha.2147

package/packages/keyboard/src/WhitelabelNumericKeyboard/NumericKeyboard.scss

@@ -0,0 +1,105 @@
+@mixin mask-svg-icon($icon-url) {
+    -webkit-mask-image: url($icon-url);
+    -webkit-mask-size: $icon-mask-size;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-image: url($icon-url);
+    mask-size: $icon-mask-size;
+    mask-repeat: no-repeat;
+    mask-position: center;
+}
+
+.numeric-keyboard {
+    position: absolute;
+    text-align: center;
+    outline: none;
+    left: 0;
+    bottom: 0;
+    z-index: 10;
+    width: 100%;
+
+    .numeric-keyboard-wrapper {
+        padding-top: $keyboard-padding-top;
+        padding-bottom: $keyboard-padding-bottom;
+        height: 100%;
+        width: 100%;
+    }
+
+    .keys-container {
+        display: inline-block;
+        vertical-align: top;
+        margin: $keys-container-margin;
+
+        &.key-layout {
+            .key-row:last-child {
+                background-color: transparent;
+            }
+
+            .key-background-wrapper {
+                display: inline-block;
+            }
+        }
+
+        &.side-bar {
+            width: $side-bar-width;
+        }
+
+        .key-row {
+            height: $key-row-height;
+        }
+
+        .rounded-border-container {
+            border-radius: $key-border-radius;
+            overflow: hidden;
+            box-shadow: $rounded-border-container-shadow-1 rgba(0, 0, 0, 0.2),
+                $rounded-border-container-shadow-2 rgba(0, 0, 0, 0.2);
+        }
+    }
+
+    .key {
+        display: inline-block;
+        border: $key-border-size solid transparent;
+        box-sizing: border-box;
+        position: relative;
+        padding: $key-padding;
+        vertical-align: top;
+        text-align: center;
+        overflow: hidden;
+        outline: none;
+        height: $key-height;
+        width: $key-width;
+
+        &:focus {
+            border-radius: $key-border-radius;
+            box-shadow: $focus-shadow-1 rgba(0, 0, 0, 0.2), $focus-shadow-2 rgba(0, 0, 0, 0.3);
+            z-index: 1;
+        }
+
+        &.key-wide {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            padding: $key-wide-padding;
+            width: $key-wide-width;
+        }
+
+        &.key-with-icon {
+            padding: $key-with-icon-padding;
+        }
+
+        .key-mask-icon {
+            display: inline-block;
+            height: 100%;
+            width: 100%;
+        }
+
+        &.key-empty {
+            visibility: hidden;
+        }
+
+        &.key-backspace {
+            .key-mask-icon {
+                @include mask-svg-icon('./icons/key_backspace.svg');
+            }
+        }
+    }
+}

package/packages/keyboard/src/WhitelabelNumericKeyboard/NumericKeyboard.styles.1080.scss

@@ -0,0 +1,2 @@
+@import './sizes.1080';
+@import './NumericKeyboard';

package/packages/keyboard/src/WhitelabelNumericKeyboard/NumericKeyboard.styles.scss

@@ -0,0 +1,2 @@
+@import './sizes';
+@import './NumericKeyboard';

package/packages/keyboard/src/WhitelabelNumericKeyboard/NumericKeyboard.tsx

@@ -0,0 +1,158 @@
+import { DeclareProps, clearNode } from '@24i/bigscreen-sdk/jsx';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { Matrix, CircularDirection } from '@24i/bigscreen-sdk/focus';
+import { Interactable } from '@24i/bigscreen-sdk/interactable';
+import { Backdrop } from '../Backdrop/Backdrop';
+import { BaseProps, KeyboardBase } from '../KeyboardBase';
+import { makeFocusMatrixStrings, layout } from './layout';
+import './NumericKeyboard.styles';
+
+type Layouts = 'normal';
+
+export type Props = BaseProps<Layouts> & {
+    texts?: {
+        clear: string | JSX.Element,
+        continue: string | JSX.Element,
+    };
+    includeContinueButton?: boolean;
+};
+
+export class NumericKeyboard extends KeyboardBase<Layouts, Props> {
+    static defaultProps = {
+        ...KeyboardBase.defaultProps,
+        className: 'numeric-keyboard',
+        circular: CircularDirection.NONE,
+        layouts: {
+            normal: layout,
+        },
+        texts: {
+            clear: 'Clear',
+            continue: 'Continue',
+        },
+        initialFocus: { x: 0, y: 0 },
+        shouldHideOnBackdropClick: true,
+        includeContinueButton: false,
+    };
+
+    declare props: DeclareProps<Props, typeof NumericKeyboard.defaultProps>;
+
+    createFocusMatrices() {
+        const { includeContinueButton } = this.props;
+        super.createFocusMatrices({
+            normal: makeFocusMatrixStrings(includeContinueButton),
+        });
+    }
+
+    show() {
+        super.show();
+        this.renderNumericKeyboard();
+    }
+
+    hide() {
+        super.hide();
+        clearNode(this.keyboardWrapper);
+    }
+
+    generateKey = (char: string) => (
+        <Interactable
+            ref={this.keyRefs[char]}
+            className={`key key-${char}`}
+            onPress={() => this.onKey(char)}
+        >
+            {char}
+        </Interactable>
+    );
+
+    renderNumericKeyboard() {
+        const { texts, circular, shouldHideOnBackdropClick, includeContinueButton } = this.props;
+        this.clearMount(
+            <>
+                <Backdrop
+                    onClick={() => this.onCancel()}
+                    enableOnClick={shouldHideOnBackdropClick}
+                />
+                <Matrix
+                    ref={this.matrix}
+                    domRef={this.keyboardWrapper}
+                    matrix={this.focusMatrices.normal}
+                    circular={circular}
+                >
+                    <div className="numeric-keyboard-wrapper">
+                        <div className="keys-container key-layout">
+                            <div className="rounded-border-container">
+                                <div className="key-row key-chars">
+                                    {map(layout[0], this.generateKey)}
+                                </div>
+                                <div className="key-row key-chars">
+                                    {map(layout[1], this.generateKey)}
+                                </div>
+                                <div className="key-row key-chars">
+                                    {map(layout[2], this.generateKey)}
+                                </div>
+                                <div className="key-row key-chars">
+                                    <div className="key key-blank">&nbsp;</div>
+                                    <div className="key-background-wrapper">
+                                        {
+                                            // eslint-disable-next-line no-magic-numbers
+                                            this.generateKey(layout[3][0])
+                                        }
+                                    </div>
+                                    <div className="key key-blank">&nbsp;</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="keys-container side-bar">
+                            <div className="rounded-border-container">
+                                <div className="key-row">
+                                    <Interactable
+                                        ref={this.keyRefs.backspace}
+                                        className="key key-wide key-with-icon key-backspace"
+                                        onPress={() => this.onBackspace()}
+                                    >
+                                        <div className="key-mask-icon" />
+                                    </Interactable>
+                                </div>
+                                <div className="key-row">
+                                    <Interactable
+                                        ref={this.keyRefs.clear}
+                                        className="key key-wide key-clear"
+                                        onPress={() => this.onClear()}
+                                    >
+                                        {texts.clear}
+                                    </Interactable>
+                                </div>
+                            </div>
+                            <div className="key-row">
+                                <div className="key key-wide key-empty">&nbsp;</div>
+                            </div>
+                            {
+                                includeContinueButton
+                                    ? (
+                                        <div className="rounded-border-container">
+                                            <div className="key-row">
+                                                <Interactable
+                                                    ref={this.keyRefs.continue}
+                                                    className="key key-wide key-continue"
+                                                    onPress={() => this.onDone()}
+                                                >
+                                                    <div className="key-background">
+                                                        {texts.continue}
+                                                    </div>
+                                                </Interactable>
+                                            </div>
+                                        </div>
+                                    )
+                                    : (
+                                        <div className="key-row">
+                                            <div className="key key-wide key-empty">&nbsp;</div>
+                                        </div>
+                                    )
+                            }
+                        </div>
+                    </div>
+                </Matrix>
+            </>,
+            this.keyboardWrapper,
+        );
+    }
+}

package/packages/keyboard/src/WhitelabelNumericKeyboard/WhitelabelStyles/_sizes.1080.scss

@@ -0,0 +1,7 @@
+$normal-font-size: 30px;
+$normal-letter-spacing: -0.31px;
+$normal-line-height: normal;
+
+$small-font-size: 24px;
+$small-letter-spacing: -0.26px;
+$small-line-height: normal;

package/packages/keyboard/src/WhitelabelNumericKeyboard/WhitelabelStyles/_sizes.scss

@@ -0,0 +1,7 @@
+$normal-font-size: 20px;
+$normal-letter-spacing: -0.21px;
+$normal-line-height: normal;
+
+$small-font-size: 16px;
+$small-letter-spacing: -0.17px;
+$small-line-height: normal;

package/packages/keyboard/src/WhitelabelNumericKeyboard/WhitelabelStyles/index.ts

@@ -0,0 +1 @@
+import './whitelabel.styles';

package/packages/keyboard/src/WhitelabelNumericKeyboard/WhitelabelStyles/whitelabel.scss

@@ -0,0 +1,62 @@
+// Colors
+$key-background: rgb(255, 255, 255);
+$focus-background: rgb(255, 255, 255, 0.1);
+$keyboard-background: rgba(31, 31, 31, 0.6);
+$keyboard-background-over: rgba(31, 31, 31, 0.9);
+$medium-background: rgba(97, 98, 100, 0.6);
+$light-background: rgba(97, 98, 100, 0.3);
+
+.numeric-keyboard {
+    background-color: $keyboard-background;
+
+    .numeric-keyboard-wrapper {
+        background-color: $keyboard-background-over;
+    }
+
+    .keys-container.key-layout {
+        .key-row,
+        .key-background-wrapper {
+            background-color: $medium-background;
+        }
+    }
+
+    .keys-container.side-bar {
+        .rounded-border-container {
+            background-color: $medium-background;
+        }
+    }
+
+    .key {
+        &.key-blank {
+            background-color: $light-background;
+        }
+
+        &:focus {
+            background-color: $focus-background;
+            border-color: $key-background;
+        }
+
+        .key-mask-icon {
+            background-color: $key-background;
+        }
+    }
+}
+
+// Typography
+.numeric-keyboard {
+    .keys-container {
+        &.key-layout {
+            font-size: $normal-font-size;
+            font-weight: 700;
+            letter-spacing: $normal-letter-spacing;
+            line-height: $normal-line-height;
+        }
+
+        &.side-bar {
+            font-size: $small-font-size;
+            font-weight: 600;
+            letter-spacing: $small-letter-spacing;
+            line-height: $small-line-height;
+        }
+    }
+}

package/packages/keyboard/src/WhitelabelNumericKeyboard/WhitelabelStyles/whitelabel.styles.1080.scss

@@ -0,0 +1,2 @@
+@import './sizes.1080';
+@import './whitelabel';

package/packages/keyboard/src/WhitelabelNumericKeyboard/WhitelabelStyles/whitelabel.styles.scss

@@ -0,0 +1,2 @@
+@import './sizes';
+@import './whitelabel';

package/packages/keyboard/src/WhitelabelNumericKeyboard/_sizes.1080.scss

@@ -0,0 +1,29 @@
+$keyboard-padding-top: 24px;
+$keyboard-padding-bottom: 54px;
+
+$keys-container-margin: 0 12px;
+
+$side-bar-width: 176px;
+
+$key-row-height: 74px;
+
+$key-border-radius: 8px;
+$key-border-size: 2px;
+$key-padding: 18px;
+$key-height: 74px;
+$key-width: 88px;
+
+$rounded-border-container-shadow-1: 0 4px 6px 0;
+$rounded-border-container-shadow-2: 0 1px 1px 0;
+
+$key-wide-padding: 21px 18px;
+$key-wide-width: 176px;
+
+$icon-mask-size: 40px;
+
+$key-with-icon-padding: 17px 22px;
+
+$key-space-width: 528px;
+
+$focus-shadow-1: 0 1px 3px 0;
+$focus-shadow-2: 0 20px 32px 0;

package/packages/keyboard/src/WhitelabelNumericKeyboard/_sizes.scss

@@ -0,0 +1,29 @@
+$keyboard-padding-top: 16px;
+$keyboard-padding-bottom: 37px;
+
+$keys-container-margin: 0 8px;
+
+$side-bar-width: 118px;
+
+$key-row-height: 49px;
+
+$key-border-radius: 5px;
+$key-border-size: 1px;
+$key-padding: 12px;
+$key-height: 49px;
+$key-width: 58px;
+
+$rounded-border-container-shadow-1: 0 3px 4px 0;
+$rounded-border-container-shadow-2: 0 1px 1px 0;
+
+$key-wide-padding: 14px 12px;
+$key-wide-width: 117px;
+
+$icon-mask-size: 27px;
+
+$key-with-icon-padding: 11px 15px;
+
+$key-space-width: 352px;
+
+$focus-shadow-1: 0 1px 2px 0;
+$focus-shadow-2: 0 13px 21px 0;

package/packages/keyboard/src/WhitelabelNumericKeyboard/icons/key_backspace.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>System icons/onPrimary-Backspace</title>
+    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="backspace-white-18dp-2" transform="translate(5.000000, 5.000000)">
+            <polygon id="Path" points="0 0 30 0 30 30 0 30"></polygon>
+            <path d="M27.5,3.75 L8.75,3.75 C7.8875,3.75 7.2125,4.1875 6.7625,4.85 L0.4625,14.3125 C0.1875,14.7375 0.1875,15.275 0.4625,15.7 L6.7625,25.15 C7.2125,25.8 7.8875,26.25 8.75,26.25 L27.5,26.25 C28.875,26.25 30,25.125 30,23.75 L30,6.25 C30,4.875 28.875,3.75 27.5,3.75 Z M22.875,20.375 C22.3875,20.8625 21.6,20.8625 21.1125,20.375 L17.5,16.7625 L13.8875,20.375 C13.4,20.8625 12.6125,20.8625 12.125,20.375 C11.6375,19.8875 11.6375,19.1 12.125,18.6125 L15.7375,15 L12.125,11.3875 C11.6375,10.9 11.6375,10.1125 12.125,9.625 C12.6125,9.1375 13.4,9.1375 13.8875,9.625 L17.5,13.2375 L21.1125,9.625 C21.6,9.1375 22.3875,9.1375 22.875,9.625 C23.3625,10.1125 23.3625,10.9 22.875,11.3875 L19.2625,15 L22.875,18.6125 C23.35,19.0875 23.35,19.8875 22.875,20.375 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
+        </g>
+    </g>
+</svg>

package/packages/keyboard/src/WhitelabelNumericKeyboard/index.ts

@@ -0,0 +1,2 @@
+export { NumericKeyboard } from './NumericKeyboard';
+export type { Props } from './NumericKeyboard';

package/packages/keyboard/src/WhitelabelNumericKeyboard/layout.ts

@@ -0,0 +1,14 @@
+/* eslint-disable no-magic-numbers */
+export const makeFocusMatrixStrings = (includeContinueButton: boolean) => [
+    ['1', '2', '3', 'backspace'],
+    ['4', '5', '6', 'clear'],
+    ['7', '8', '9'],
+    ['0', '0', '0'], ...(includeContinueButton ? [['continue']] : [[]]),
+];
+
+export const layout = [
+    ['1', '2', '3'],
+    ['4', '5', '6'],
+    ['7', '8', '9'],
+    ['0'],
+];

package/packages/keyboard/src/hwKeyboardEventToChar.ts

@@ -0,0 +1,11 @@
+/**
+ * Converts pressed key char on HW keyboards to string.
+ * Supports also shifted chars (e.g. ! for Shift+1).
+ * @param event KeyboardEvent
+ * @returns string value of the char or null
+ */
+export const hwKeyboardEventToChar = ({ key }: KeyboardEvent) => {
+    // Some platforms do not have to have key. We need to check for it before accesing length.
+    if (key && key.length === 1) return key;
+    return null;
+};

package/packages/keyboard/src/types/index.ts

@@ -0,0 +1,11 @@
+export type KeyTexts = {
+    clear: string;
+    done: string;
+    shift: string;
+    shiftActive: string;
+    cancel: string;
+    toSpecialLayout: string;
+    toNormalLayout: string;
+};
+
+export type KeyMatrixCell = string | null;

package/packages/l10n/README.md

@@ -0,0 +1,102 @@
+---
+id: README
+title: l10n
+hide_title: true
+sidebar_label: l10n
+---
+
+# l10n
+Localization package for SmartApps BIGscreen apps.
+
+## Supported features/locales
+
+| Locale/Feature | date | time |
+|:--------------:|:----:|:----:| 
+| **iso**        |  ✅  |  ✅  |
+| chi            |  ❌  |  ❌  |
+| cs             |  ✅  |  ✅  |
+| en-001         |  ✅  |  ✅  |
+| en-uk          |  ❌  |  ❌  |
+| en-us          |  ✅  |  ✅  |
+| fi             |  ❌  |  ❌  |
+| nl             |  ❌  |  ❌  |
+
+Chars to use in the table: ✅ ❌
+
+### Feature/ISO
+- Date: [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html)
+- Time: [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html)
+
+## How to use
+This package provides formatters for various locale specific things. It can have locale set globally
+during initialization / language change. Or it can be set specifically for each call.
+
+If the specified locale is not found, `iso` will be used as a fallback and warning will be printed
+into the console.
+
+```ts
+// setup:
+import { l10n } from '@24i/bigscreen-sdk/l10n';
+
+l10n.setLocale('en-us');
+```
+
+To use other than `iso` locales, they must be imported to the project. `iso` is included always.
+```ts
+import '@24i/bigscreen-sdk/l10n/locales/cs'; // includes czech locale
+```
+
+To use it as a string returning function:
+```ts
+import { l10n } from '@24i/bigscreen-sdk/l10n';
+
+l10n.date(new Date()).toLocaleString();
+```
+
+There is also a component exported that automatically updates itself after locale change:
+```tsx
+import { Locale } from '@24i/bigscreen-sdk/l10n';
+
+return <Locale type="date" value={new Date()} options={{ weekday: 'long' }} />;
+```
+
+### DateTime format
+For date time formatting options we use a subset of [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) options. 
+The decision between 12 and 24 hour format is automated based on the set locale.
+```ts
+type DateTimeFormatOptions = {
+    weekday: 'narrow' | 'short' | 'long', // e.g. narrow - S, short - Sun, long - Sunday
+    year: '2-digit' | 'numeric', // e.g. 2-digit 98, numeric - 1998
+    // e.g. 2-digit - 07, numeric - 7, narrow - J, short - Jul, long - July
+    month: '2-digit' | 'numeric' | 'narrow' | 'short' | 'long',
+    day: '2-digit' | 'numeric', // e.g. 2-digit - 06, numeric - 6
+    hour: '2-digit' | 'numeric', // e.g. 2-digit - 09, numeric - 9
+    minute: '2-digit' | 'numeric', // e.g. 2-digit - 09, numeric - 9
+    second: '2-digit' | 'numeric', // e.g. 2-digit - 09, numeric - 9
+}
+```
+
+You can use both `timestamp` in `ms` or `Date` object directly for formatting.
+
+#### Examples
+```ts
+import { l10n } from '@24i/bigscreen-sdk/l10n';
+
+l10n.date(timestamp).toLocaleTimeString({ hour: 'numeric', minute: '2-digit' }); // 9:45
+
+l10n.date(new Date()).toLocaleTimeString({ hour: '2-digit', minute: '2-digit', second: '2-digit' }); // 09:45:30
+
+l10n.date(timestamp).toLocaleDateString({ day: '2-digit', month: '2-digit', year: 'numeric' }); // 18/03/2021
+
+l10n.date(new Date(), 'cs').toLocaleDateString({
+    { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' },
+}); // čtvrtek 18. března 2021
+
+l10n.date(timestamp, 'en-us').toLocaleString({
+    { month: '2-digit', day: '2-digit', year: 'numeric', hour: 'numeric', minute: '2-digit' },
+}); // 03/18/2021, 9:45 AM
+
+l10n.date(new Date(), 'cs').toLocaleString({
+    { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' },
+}); // čt 18. bře, 9:45
+```

package/packages/l10n/interface.ts

@@ -0,0 +1 @@
+export { DateTimeFormatOptions, DateFormatOptions, TimeFormatOptions } from './src/date/types';

package/packages/l10n/locales/cs.ts

@@ -0,0 +1,4 @@
+import { l10n } from '../src/l10n';
+import { csDateFormatter } from '../src/date/cs';
+
+l10n.addFormatter('date', 'cs', csDateFormatter);

package/packages/l10n/locales/en-001.ts

@@ -0,0 +1,4 @@
+import { l10n } from '../src/l10n';
+import { en001DateFormatter } from '../src/date/en-001';
+
+l10n.addFormatter('date', 'en-001', en001DateFormatter);

package/packages/l10n/locales/en-us.ts

@@ -0,0 +1,4 @@
+import { l10n } from '../src/l10n';
+import { enUsDateFormatter } from '../src/date/en-us';
+
+l10n.addFormatter('date', 'en-us', enUsDateFormatter);

package/packages/l10n/src/Locale.tsx

@@ -0,0 +1,44 @@
+import { Component, createRef, TextNode } from '@24i/bigscreen-sdk/jsx';
+import { l10n } from './l10n';
+import { Props } from './types';
+
+export class Locale extends Component<Props> {
+    textNode = createRef<Text>();
+
+    componentDidMount() {
+        l10n.addEventListener('localechange', this.onLocaleChange);
+    }
+
+    componentWillUnmount() {
+        l10n.removeEventListener('localechange', this.onLocaleChange);
+    }
+
+    onLocaleChange = () => {
+        const renderer = this.getRendererByType();
+        if (!this.textNode.current) return;
+        this.textNode.current.nodeValue = renderer();
+    };
+
+    getRendererByType() {
+        const { type } = this.props;
+        const FUNCTION_BY_TYPE = {
+            date: this.renderDate,
+        } as const;
+        return FUNCTION_BY_TYPE[type] ?? (() => null);
+    }
+
+    renderDate = () => {
+        const { locale, value, options } = this.props;
+        return l10n.date(value, locale).toLocaleString(options);
+    };
+
+    // @ts-ignore - Special case for BIGscreen JSX incompatible with types/react
+    render() {
+        const renderer = this.getRendererByType();
+        return (
+            <TextNode ref={this.textNode}>
+                {renderer()}
+            </TextNode>
+        );
+    }
+}