pxt-core 7.4.11 → 7.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-core",
-  "version": "7.4.11",
+  "version": "7.4.12",
   "description": "Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors",
   "keywords": [
     "TypeScript",
@@ -49,7 +49,8 @@
     "built/tests/blocksrunner.js",
     "docfiles",
     "theme",
-    "common-docs"
+    "common-docs",
+    "react-common"
   ],
   "main": "built/pxt.js",
   "engines": {

package/react-common/components/Checkbox.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+export enum CheckboxStatus {
+    Selected,
+    Unselected,
+    Waiting
+}
+
+export interface CheckboxProps {
+    isChecked: CheckboxStatus;
+    onClick: (checked: boolean) => void;
+    label: string;
+}
+
+export const Checkbox = (props: CheckboxProps) => {
+    const { isChecked, label } = props;
+    return (
+        <div className="checkbox">
+            {isChecked == CheckboxStatus.Waiting ? <div className={`ui inline mini loader active`}/> :
+            <i className={`icon square outline ${isChecked == CheckboxStatus.Selected ? "check":""}`} onClick={() => props.onClick(!(isChecked == CheckboxStatus.Selected))}
+                role="checkbox" aria-checked={isChecked == CheckboxStatus.Selected} aria-labelledby={label}/>}
+        </div>
+    );
+}
+

package/react-common/components/Notification.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+export interface NotificationOptions {
+    kind?: string;
+    text?: string;
+    hc?: boolean;
+}
+
+export interface NotificationState {
+    notifications?: pxt.Map<NotificationOptions>;
+}
+
+export interface NotificationProps {
+}
+
+export class Notification extends React.Component<NotificationProps, NotificationState> {
+
+    constructor(props?: NotificationProps) {
+        super(props);
+        this.state = {
+            notifications: {}
+        }
+    }
+
+    push(notification: NotificationOptions) {
+        const notifications = this.state.notifications;
+        const id = ts.pxtc.Util.guidGen();
+        Object.keys(notifications).filter(e => notifications[e].kind == notification.kind)
+            .forEach(previousNotification => this.remove(previousNotification));
+        notifications[id] = notification;
+        const that = this;
+        // Show for 3 seconds before removing
+        setTimeout(() => {
+            that.remove(id);
+        }, 3000);
+
+        this.setState({ notifications: notifications });
+    }
+
+    remove(id: string) {
+        const notifications = this.state.notifications;
+        if (notifications[id]) {
+            delete notifications[id];
+            this.setState({ notifications: notifications });
+        }
+    }
+
+    render() {
+        const { notifications } = this.state;
+
+        function renderNotification(id: string, notification: NotificationOptions) {
+            const { kind, text, hc } = notification;
+            let cls = 'ignored info message';
+            switch (kind) {
+                case 'err': cls = 'red inverted segment'; break;
+                case 'warn': cls = 'orange inverted segment'; break;
+                case 'info': cls = 'teal inverted segment'; break;
+                case 'compile': cls = 'ignored info message'; break;
+            }
+            return <div key={`${id}`} id={`${kind}msg`} className={`ui ${hc} ${cls}`}>{text}</div>
+        }
+
+        return <div id="msg" aria-live="polite">
+            {Object.keys(notifications).map(k => renderNotification(k, notifications[k]))}
+        </div>;
+    }
+}
+
+let notificationsInitialized = false;
+let notificationMessages: Notification;
+
+export function pushNotificationMessage(options: NotificationOptions): void {
+    if (!notificationsInitialized) {
+        notificationsInitialized = true;
+        const wrapper = document.body.appendChild(document.createElement('div'));
+        notificationMessages = ReactDOM.render(React.createElement(Notification, options), wrapper);
+        notificationMessages.push(options);
+    } else if (notificationMessages) {
+        notificationMessages.push(options);
+    }
+}

package/react-common/components/profile/Badge.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { fireClickOnEnter } from "../util";
+
+export interface BadgeProps {
+    onClick?: (badge: pxt.auth.Badge) => void;
+    badge: pxt.auth.Badge;
+    disabled?: boolean;
+    isNew?: boolean;
+}
+
+export const Badge = (props: BadgeProps) => {
+    const { badge, disabled, isNew, onClick } = props;
+
+    const onBadgeClick = onClick && (() => {
+        onClick(badge);
+    })
+
+    const image = (disabled && badge.lockedImage) || badge.image;
+    const alt = disabled ? pxt.U.lf("Locked '{0}' badge", badge.title) : badge.title;
+
+    return (
+        <div className={`profile-badge ${onClick ? "clickable" : ""}`}
+            role={onClick ? "button" : undefined}
+            tabIndex={onClick ? 0 : undefined}
+            title={lf("{0} Badge", badge.title)}
+            onClick={onBadgeClick}
+            onKeyDown={fireClickOnEnter}>
+            {isNew && <div className="profile-badge-notification">{pxt.U.lf("New!")}</div>}
+            <img src={image} alt={alt} />
+        </div>
+    );
+}
+

package/react-common/components/profile/BadgeInfo.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { jsxLF } from "../util";
+import { Badge } from "./Badge";
+
+export interface BadgeInfoProps {
+    badge: pxt.auth.Badge;
+}
+
+export const BadgeInfo = (props: BadgeInfoProps) => {
+    const { badge } = props;
+
+    const date = new Date(badge.timestamp)
+
+    return <div className="profile-badge-info">
+        <div className="profile-badge-info-image">
+            <Badge badge={badge} disabled={!badge.timestamp} />
+        </div>
+        <div className="profile-badge-info-item">
+            <div className="profile-badge-info-header">
+                {lf("Awarded For:")}
+            </div>
+            <div className="profile-badge-info-text">
+                {badgeDescription(badge)}
+            </div>
+        </div>
+        { badge.timestamp ?
+            <div className="profile-badge-info-item">
+                <div className="profile-badge-info-header">
+                    {lf("Awarded On:")}
+                </div>
+                <div className="profile-badge-info-text">
+                    {date.toLocaleDateString(pxt.U.userLanguage())}
+                </div>
+            </div>
+        : undefined }
+    </div>
+}
+
+
+export const badgeDescription = (badge: pxt.auth.Badge) => {
+    switch (badge.type) {
+        case "skillmap-completion":
+            return <span>{jsxLF(
+                lf("Completing {0}"),
+                <a target="_blank" rel="noopener noreferrer" href={sourceURLToSkillmapURL(badge.sourceURL)}>{pxt.U.rlf(badge.title)}</a>
+            )}</span>
+    }
+}
+
+function sourceURLToSkillmapURL(sourceURL: string) {
+    if (sourceURL.indexOf("/api/md/") !== -1) {
+        // docs url: https://www.makecode.com/api/md/arcade/skillmap/forest
+        const path = sourceURL.split("/api/md/")[1];
+        // remove the target from the url
+        const docsPath = path.split("/").slice(1).join("/");
+        return pxt.webConfig?.skillmapUrl + "#docs:" + docsPath;
+    }
+    else {
+        // github url: /user/repo#filename
+        const parts = sourceURL.split("#");
+
+        if (parts.length == 2) {
+            return pxt.webConfig.skillmapUrl + "#github:https://github.com/" + parts[0] + "/" + parts[1];
+        }
+    }
+
+    if (pxt.BrowserUtils.isLocalHostDev()) {
+        // local url: skillmap/forest
+        return "http://localhost:3000#local:" + sourceURL
+    }
+
+    return sourceURL;
+}
+

package/react-common/components/profile/BadgeList.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { Badge } from "./Badge";
+
+export interface BadgeListProps {
+    onBadgeClick: (badge: pxt.auth.Badge) => void;
+    availableBadges: pxt.auth.Badge[];
+    userState: pxt.auth.UserBadgeState;
+}
+
+export const BadgeList = (props: BadgeListProps) => {
+    const { onBadgeClick, availableBadges, userState } = props;
+
+    const badges = availableBadges.slice();
+
+    let unlocked: pxt.Map<boolean> = {};
+
+    for (const badge of userState.badges) {
+        unlocked[badge.id] = true;
+        const existing = badges.findIndex(b => b.id === badge.id);
+        if (existing > -1) {
+            badges[existing] = {
+                ...badges[existing],
+                timestamp: badges[existing].timestamp || badge.timestamp
+            }
+        } else {
+            badges.push(badge);
+        }
+    }
+
+    const bg: JSX.Element[] = []
+    for (let i = 0; i < Math.max(badges.length + 10, 20); i++) {
+        bg.push(<div key={i} className="placeholder-badge" />)
+    }
+
+    return <div className="profile-badge-list">
+        <div className="profile-badge-header">
+            <span className="profile-badge-title">
+                {lf("Badges")}
+            </span>
+
+            <span className="profile-badge-subtitle">
+                {lf("Click each badge to see details")}
+            </span>
+        </div>
+        <div className="profile-badges-scroller">
+            <div className="profile-badges">
+                <div className="profile-badges-background-container">
+                    <div className="profile-badges-background">
+                        { bg }
+                    </div>
+                </div>
+                { badges.map(badge =>
+                    <div className="profile-badge-and-title">
+                        <Badge key={badge.id}
+                            onClick={onBadgeClick}
+                            badge={badge}
+                            disabled={!unlocked[badge.id]}
+                        />
+                        <div className="profile-badge-name">
+                            {badge.title}
+                        </div>
+                    </div>
+                ) }
+            </div>
+        </div>
+    </div>
+}

package/react-common/components/profile/Profile.tsx

@@ -0,0 +1,42 @@
+/// <reference path="../types.d.ts" />
+
+import * as React from "react";
+import { BadgeList } from "./BadgeList";
+import { UserPane } from "./UserPane";
+import { BadgeInfo } from "./BadgeInfo";
+import { CheckboxStatus } from "../Checkbox";
+
+export interface ProfileProps {
+    user: pxt.auth.State;
+    signOut: () => void;
+    deleteProfile: () => void;
+    checkedEmail: CheckboxStatus;
+    onClickedEmail: (isChecked: boolean) => void;
+    notification?: pxt.ProfileNotification;
+    showModalAsync(options: DialogOptions): Promise<void>;
+}
+
+export const Profile = (props: ProfileProps) => {
+    const { user, signOut, deleteProfile, onClickedEmail, notification, checkedEmail, showModalAsync } = props;
+    const userProfile = user?.profile || { idp: {} };
+    const userBadges = user?.preferences?.badges || { badges: [] };
+
+    const onBadgeClick = (badge: pxt.auth.Badge) => {
+        showModalAsync({
+            header: lf("{0} Badge", badge.title),
+            size: "tiny",
+            hasCloseIcon: true,
+            jsx: <BadgeInfo badge={badge} />
+        });
+    }
+
+    return <div className="user-profile">
+        <UserPane profile={userProfile} onSignOutClick={signOut} onDeleteProfileClick={deleteProfile} notification={notification}
+                  emailChecked={checkedEmail} onEmailCheckClick={onClickedEmail}/>
+        <BadgeList
+            availableBadges={pxt.appTarget.defaultBadges || []}
+            userState={userBadges}
+            onBadgeClick={onBadgeClick}
+        />
+    </div>
+}

package/react-common/components/profile/UserNotification.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+
+export interface UserNotificationProps {
+    notification: pxt.ProfileNotification;
+}
+
+export const UserNotification = (props: UserNotificationProps) => {
+    const { message, icon, actionText, link, xicon, title } = props.notification;
+
+    const onActionClick = () => {
+        window.open(link, "_blank");
+    }
+
+
+    return (
+        <div className="profile-notification">
+            <div className="profile-notification-icon">
+                <i className={`${xicon ? "xicon" : "ui large circular icon "} ${icon}`} />
+            </div>
+            <div className="profile-notification-title">
+                {title}
+            </div>
+            <div className="profile-notification-message">
+                {message}
+            </div>
+            <button className="ui icon button profile-notification-button" onClick={onActionClick} role="link" >
+                <i className="icon external alternate"></i>
+                {actionText}
+            </button>
+        </div>
+    );
+}

package/react-common/components/profile/UserPane.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { fireClickOnEnter } from "../util";
+import { UserNotification } from "./UserNotification";
+import { Checkbox, CheckboxStatus } from "../Checkbox";
+
+export interface UserPaneProps {
+    profile: pxt.auth.UserProfile;
+    notification?: pxt.ProfileNotification;
+    emailChecked: CheckboxStatus;
+
+    onSignOutClick: () => void;
+    onDeleteProfileClick: () => void;
+    onEmailCheckClick: (isChecked: boolean) => void;
+}
+
+export const UserPane = (props: UserPaneProps) => {
+    const { profile, onSignOutClick, onDeleteProfileClick, onEmailCheckClick, notification, emailChecked } = props;
+
+    const { username, displayName, picture } = profile.idp;
+
+    const checkboxLabel = "email-optin-label"
+
+    return <div className="profile-user-pane">
+        <div className="profile-portrait">
+            { picture?.dataUrl ?
+                <img src={picture?.dataUrl} alt={pxt.U.lf("Profile Picture")} />
+                : <div className="profile-initials-portrait">
+                    {pxt.auth.userInitials(profile)}
+                </div>
+            }
+        </div>
+        <div className="profile-user-details">
+            <div className="profile-display-name">
+                {displayName}
+            </div>
+            { username &&
+                <div className="profile-username">
+                    {username}
+                </div>
+            }
+        </div>
+        { notification && <UserNotification notification={notification}/> }
+        <div className="profile-spacer"></div>
+        <div className="profile-email">
+            <Checkbox isChecked={emailChecked} onClick={onEmailCheckClick} label={checkboxLabel}/>
+            <div id={checkboxLabel}>
+                {lf("I would like to receive the MakeCode newsletter. ")}
+                <a href="https://makecode.com/privacy" target="_blank" rel="noopener noreferrer">{lf("View Privacy Statement")}</a>
+            </div>
+        </div>
+        <div className="profile-actions">
+            <a role="button"
+                tabIndex={0}
+                onKeyPress={fireClickOnEnter}
+                onClick={onDeleteProfileClick}>
+                {lf("Delete Profile")}
+            </a>
+            <button onClick={onSignOutClick} className="ui icon button sign-out">
+                <i className="icon sign-out"></i>
+                {lf("Sign Out")}
+            </button>
+        </div>
+    </div>
+}

package/react-common/components/types.d.ts

@@ -0,0 +1,29 @@
+/// <reference path="../../built/pxtlib.d.ts" />
+
+
+interface DialogOptions {
+    type?: string;
+    hideCancel?: boolean;
+    disagreeLbl?: string;
+    disagreeClass?: string;
+    disagreeIcon?: string;
+    logos?: string[];
+    className?: string;
+    header: string;
+    headerIcon?: string;
+    body?: string;
+    jsx?: JSX.Element;
+    jsxd?: () => JSX.Element; // dynamic-er version of jsx
+    copyable?: string;
+    size?: "" | "small" | "fullscreen" | "large" | "mini" | "tiny"; // defaults to "small"
+    onLoaded?: (_: HTMLElement) => void;
+    // buttons?: sui.ModalButton[];
+    timeout?: number;
+    modalContext?: string;
+    hasCloseIcon?: boolean;
+    helpUrl?: string;
+    bigHelpButton?: boolean;
+    confirmationText?: string;      // Display a text input the user must type to confirm.
+    confirmationCheckbox?: string;  // Display a checkbox the user must check to confirm.
+    confirmationGranted?: boolean;
+}

package/react-common/components/util.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+
+export function jsxLF(loc: string, ...rest: JSX.Element[]) {
+    const indices: number[] = [];
+
+    loc.replace(/\{\d\}/g, match => {
+        indices.push(parseInt(match.substr(1, 1)));
+        return match;
+    });
+
+    const out: JSX.Element[] = [];
+
+    let parts: string[];
+
+    let i = 0;
+
+    for (const index of indices) {
+        parts = loc.split(`{${index}}`);
+        pxt.U.assert(parts.length === 2);
+        out.push(<span key={i++}>{parts[0]}</span>);
+        out.push(<span key={i++}>{rest[index]}</span>);
+        loc = parts[1]
+    }
+    out.push(<span key={i++}>{loc}</span>);
+
+    return out;
+}
+
+export function fireClickOnEnter(e: React.KeyboardEvent<HTMLElement>) {
+    const charCode = (typeof e.which == "number") ? e.which : e.keyCode;
+    if (charCode === 13 /* enter */ || charCode === 32 /* space */) {
+        e.preventDefault();
+        e.currentTarget.click();
+    }
+}

package/{built/web/react-common.css → react-common/styles/profile/profile.less}

@@ -70,6 +70,7 @@
 
 .profile-email {
     display: flex;
+    padding-bottom: 1rem;
 }
 
 .profile-email .checkbox {

package/react-common/styles/react-common-skillmap-core.less

@@ -0,0 +1,10 @@
+/**
+ * This file is the same as react-common-skillmap.less except it doesn't import any
+ * variables from the target. This is used for pxt-core's css build
+ */
+
+// Import variables from pxt-core
+@import "themes/default/globals/site.variables";
+@import "themes/pxt/globals/site.variables";
+
+@import "react-common.less";

package/react-common/styles/react-common-skillmap.less

@@ -0,0 +1,12 @@
+/**
+ * Used for building react-common-skillmap.css
+ */
+
+// Import variables from pxt-core
+@import "themes/default/globals/site.variables";
+@import "themes/pxt/globals/site.variables";
+
+// Import the variables from the target
+@import "site/globals/site.variables";
+
+@import "react-common.less";

package/react-common/styles/react-common.less

@@ -0,0 +1 @@
+@import "profile/profile.less";

package/react-common/tsconfig.json

@@ -0,0 +1,36 @@
+{
+    "compilerOptions": {
+        "target": "es2017",
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "module": "commonjs",
+        "outDir": "../built/react-common",
+        "rootDir": ".",
+        "newLine": "LF",
+        "sourceMap": false,
+        "moduleResolution": "node",
+        "isolatedModules": false,
+        "jsx": "react",
+        "experimentalDecorators": true,
+        "emitDecoratorMetadata": true,
+        "declaration": true,
+        "preserveConstEnums": true,
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "scripthost",
+            "es2017",
+            "ES2018.Promise"
+        ],
+        "types": [
+            "react",
+            "react-dom",
+            "resize-observer-browser"
+        ],
+        "incremental": false
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}

package/theme/common-components.less

@@ -16,6 +16,7 @@
     margin-top: -0.25rem;
     background-color: @red;
     border-radius: 50%;
+    animation: notification-glow 5s infinite ease-in-out;
 }
 
 .tab-icon {
@@ -31,4 +32,10 @@
 .tab-content,
 .tab-content > div {
     height: 100%;
+}
+
+@keyframes notification-glow {
+    0%, 50% { box-shadow: 0 0 0.12rem -0.12rem @red; }
+    10%, 40% { box-shadow: 0 0 0.12rem 0rem @red; }
+    25% { box-shadow: 0 0 0.12rem 0.12rem @white; }
 }

package/theme/common.less

@@ -1326,7 +1326,7 @@ p.ui.font.small {
     .simPanel.ui.items {
         position: fixed;
         padding: 0;
-        margin: 1em;
+        margin: 1em 1em 0;
         bottom: ~"calc(5.5rem + var(--extra-mobile-sim-padding))" !important;
         right: 0.5rem;
         top: unset;

package/theme/highcontrast.less

@@ -841,6 +841,10 @@
             color: @HCbackground;
             background-color: @HCtextColor;
         }
+
+        .tab-badge {
+            display: none;
+        }
     }
 
     .ui.label {

package/theme/pxt.less

@@ -39,5 +39,7 @@
 
 @import 'image-editor/imageEditor';
 
+@import "react-common";
+
 /* Reference import */
 @import (reference) "semantic.less";