pxt-core 7.4.10 → 7.4.14

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,52 @@
+import * as React from "react";
+
+export interface ControlProps {
+    id?: string;
+    className?: string;
+    ariaLabel?: string;
+    ariaHidden?: boolean;
+    role?: string;
+}
+
+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();
+    }
+}
+
+export function classList(...classes: string[]) {
+    return classes
+        .filter(c => typeof c === "string")
+        .reduce((prev, c) => prev.concat(c.split(" ")), [] as string[])
+        .map(c => c.trim())
+        .filter(c => !!c)
+        .join(" ");
+}

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

@@ -0,0 +1,157 @@
+.common-button {
+    cursor: pointer;
+    display: inline-block;
+    min-height: 1rem;
+    outline: none;
+    border: none;
+    vertical-align: middle;
+    color: @buttonTextColor;
+    background: @buttonBackgroundColor;
+    font-family: @pageFont;
+    margin: 0 0.25rem 0 0;
+    padding: 0.8rem 2rem 0.95rem;
+    text-transform: none;
+    text-shadow: none;
+    font-weight: 400;
+    line-height: 1em;
+    font-style: normal;
+    text-align: center;
+    text-decoration: none;
+    border-radius: 0.2em;
+    user-select: none;
+    transition: opacity .1s ease,background-color .1s ease,box-shadow .1s ease,color .1s ease,background .1s ease;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.common-button:hover {
+    filter: grayscale(.15) brightness(.85) contrast(1.3);
+}
+
+.common-button .right {
+    margin-left: 0.5rem;
+}
+
+/****************************************************
+ *                  Color Variants                   *
+ ****************************************************/
+
+.common-button.primary {
+    background: @primaryColor;
+    color: @buttonTextColorInverted;
+    border: 1px solid @primaryColor;
+}
+
+.common-button.secondary {
+    background: @secondaryColor;
+    color: @buttonTextColorInverted;
+    border: 1px solid @secondaryColor;
+}
+
+.common-button.teal {
+    background: @teal;
+    color: @buttonTextColorInverted;
+    border: 1px solid @teal;
+}
+
+.common-button.orange {
+    background: @orange;
+    color: @buttonTextColorInverted;
+    border: 1px solid @orange;
+}
+
+.common-button.red {
+    background: @red;
+    color: @buttonTextColorInverted;
+    border: 1px solid @red;
+}
+
+.common-button.green {
+    background: @green;
+    color: @buttonTextColorInverted;
+    border: 1px solid @green;
+}
+
+.common-button.primary.inverted {
+    background: @buttonTextColorInverted;
+    color: @primaryColor;
+}
+
+.common-button.teal.inverted {
+    background: @buttonTextColorInverted;
+    color: @teal;
+}
+
+.common-button.orange.inverted {
+    background: @buttonTextColorInverted;
+    color: @orange;
+}
+
+.common-button.red.inverted {
+    background: @buttonTextColorInverted;
+    color: @red;
+}
+
+.common-button.green.inverted {
+    background: @buttonTextColorInverted;
+    color: @green;
+}
+
+
+/****************************************************
+ *                Disabled Buttons                  *
+ ****************************************************/
+
+.common-button.disabled:hover {
+    filter: none;
+}
+
+.common-button.disabled,
+.common-button.disabled.primary,
+.common-button.disabled.primary.inverted,
+.common-button.disabled.secondary,
+.common-button.disabled.secondary.inverted,
+.common-button.disabled.teal,
+.common-button.disabled.teal.inverted,
+.common-button.disabled.orange,
+.common-button.disabled.orange.inverted,
+.common-button.disabled.red,
+.common-button.disabled.red.inverted,
+.common-button.disabled.green,
+.common-button.disabled.green.inverted
+ {
+    cursor: default;
+    background-color: @buttonBackgroundColorDisabled;
+    color: @buttonTextColor;
+    border: @buttonBackgroundColorDisabled;
+}
+
+
+/****************************************************
+ *                   Menu Buttons                   *
+ ****************************************************/
+
+.common-button.menu-button {
+    background: none;
+    border: none;
+    color: @buttonMenuTextColor;
+    height: 100%;
+    padding: 0em 1rem 0rem;
+    margin: 0;
+    border-radius: 0;
+    font-size: 20px;
+
+    i.fas, i.far, .icon, .xicon {
+        font-size: 24px;
+    }
+}
+
+.common-button.menu-button:hover {
+    background: rgba(0,0,0,.1);
+}
+
+.common-button.menu-button.inverted,
+.common-button.menu-button.inverted:hover  {
+    background: @buttonMenuBackgroundColorInverted;
+    color: @buttonMenuTextColorInverted;
+}
+

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

@@ -0,0 +1,11 @@
+i.far, i.fas {
+    margin: 0 0.25rem 0 0;
+    text-align: center;
+    width: 1.81rem;
+    line-height: inherit;
+    font-size: 18px;
+}
+
+i.far.large, i.fas.large {
+    font-size: 24px;
+}

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

@@ -0,0 +1,12 @@
+.common-list {
+    display: flex;
+    flex-direction: column;
+
+    .common-list-item {
+        margin-bottom: 0.25rem;
+    }
+}
+
+.common-list.horizontal {
+    flex-direction: row;
+}

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-variables.less

@@ -0,0 +1,12 @@
+/****************************************************
+ *                    Buttons                       *
+ ****************************************************/
+
+@buttonTextColor: rgb(50, 49, 48);
+@buttonTextColorInverted: @white;
+@buttonBackgroundColor: @white;
+@buttonBackgroundColorDisabled: rgb(243, 242, 241);
+
+@buttonMenuTextColor: #ffffff;
+@buttonMenuTextColorInverted: @primaryColor;
+@buttonMenuBackgroundColorInverted: @buttonMenuTextColor;

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

@@ -0,0 +1,8 @@
+@import "profile/profile.less";
+@import "controls/Button.less";
+@import "controls/Icon.less";
+@import "./react-common-variables.less";
+
+@import "fontawesome-free/less/solid.less";
+@import "fontawesome-free/less/regular.less";
+@import "fontawesome-free/less/fontawesome.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"
+    ]
+}