@netless/fastboard-react 0.2.13-canary.0 → 0.3.0-canary.0

package/src/components/Toolbar/Toolbar.scss

@@ -1,343 +0,0 @@
-$name: "fastboard-toolbar";
-
-.#{$name} {
-  display: flex;
-  align-items: center;
-  padding: 4px;
-  border-radius: 4px;
-  flex-direction: column;
-  gap: 4px;
-  position: absolute;
-  z-index: 100;
-  backdrop-filter: blur(5px);
-  -webkit-backdrop-filter: blur(5px);
-
-  .rc-slider {
-    padding: 6px 0;
-  }
-  .rc-slider-rail,
-  .rc-slider-track {
-    height: 2px;
-  }
-
-  .tippy-content {
-    padding: 8px;
-  }
-  .tippy-box {
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    background-color: rgba($color: #333, $alpha: 0.95);
-    backdrop-filter: blur(2px);
-    -webkit-backdrop-filter: blur(2px);
-  }
-  .tippy-box[data-theme~="light"] {
-    background-color: rgba($color: #fff, $alpha: 0.95);
-    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25);
-  }
-
-  &.light {
-    color: #333;
-    background-color: rgba(255, 255, 255, 0.9);
-    border: 1px solid #e5e8f0;
-  }
-
-  &.dark {
-    color: #ddd;
-    background-color: #14181e;
-    border: 1px solid #383b42;
-  }
-
-  &.expanded {
-    border: 1px solid rgba(0, 0, 0, 0.15);
-  }
-
-  &.expanded:hover {
-    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
-    transform: translate3d(0, 0, 0);
-  }
-
-  &.collapsed {
-    padding: 0;
-    background-color: transparent;
-  }
-
-  &-tooltip {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  &-hotkey {
-    margin-right: -4px;
-    width: 24px;
-    height: 24px;
-    border-radius: 4px;
-    background-color: rgba($color: #fff, $alpha: 0.1);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &-btn {
-    appearance: none;
-    cursor: pointer;
-    margin: 0;
-    border: 0;
-    padding: 4px;
-    width: 32px;
-    height: 32px;
-    background-color: transparent;
-    border-radius: 4px;
-    font-size: 24px;
-    line-height: 1;
-    position: relative;
-
-    &-interactive {
-      display: inline-block;
-      width: 32px;
-      height: 32px;
-    }
-
-    svg,
-    img {
-      width: 100%;
-      height: 100%;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    &.light:not(:disabled):hover {
-      background-color: #ebf2ff;
-    }
-
-    &.dark:not(:disabled):hover {
-      background-color: #383b42;
-    }
-  }
-
-  &-triangle {
-    width: 0px;
-    height: 0px;
-    border-bottom: 4px solid;
-    border-left: 4px solid transparent;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-  }
-
-  &-cut-line {
-    display: inline-block;
-    height: 0.5px;
-    width: 100%;
-
-    &.light {
-      background-color: #e7e7e7;
-    }
-
-    &.dark {
-      background-color: rgba(255, 255, 255, 0.15);
-    }
-  }
-
-  &-section {
-    display: inline-flex;
-    flex-flow: column nowrap;
-    gap: 4px;
-    scroll-behavior: smooth;
-
-    &.collapsed {
-      transform: translateX(-100%);
-      transition: 1s transform;
-    }
-  }
-
-  &-section ~ &-mask {
-    opacity: 0;
-    transition: 0.5s opacity 0.4s;
-  }
-
-  &-section:hover ~ &-mask,
-  &-mask:hover {
-    opacity: 1;
-    transition: 0.2s opacity;
-  }
-
-  &-panel {
-    width: 136px - 8px * 2;
-    padding: 0;
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: center;
-    gap: 8px;
-
-    &.apps {
-      width: 240px + 8px * 2;
-    }
-  }
-
-  &-color-box,
-  &-shapes {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 8px;
-    align-items: center;
-    justify-items: center;
-
-    .#{$name}-btn {
-      padding: 0;
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  &-apps {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 8px;
-    align-items: center;
-    justify-items: center;
-
-    .#{$name}-btn {
-      width: 40px;
-      height: 40px;
-      font-size: 0;
-    }
-  }
-
-  &-app-icon-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &-app-icon-mask {
-    position: absolute;
-    width: 36px;
-    height: 36px;
-    animation: fastboard-app-loading-rotate 0.5s linear infinite;
-    transform-origin: center;
-  }
-
-  &-app-is-loading {
-    cursor: wait;
-    button:disabled {
-      cursor: wait;
-    }
-  }
-
-  &-app-is-failed {
-    cursor: not-allowed;
-    button:disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  &-app-icon {
-    padding-top: 4px;
-    display: inline-flex;
-    flex-flow: column nowrap;
-    align-items: center;
-    gap: 4px;
-
-    .fastboard-toolbar-btn {
-      padding: 0;
-    }
-
-    &-text {
-      font-size: 14px;
-      color: #5d5d5d;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-
-  &-color-item {
-    width: 24px;
-    height: 24px;
-    border-radius: 4px;
-    cursor: pointer;
-
-    *.light:hover {
-      background-color: #f5f5f5;
-    }
-
-    *.dark:hover {
-      background-color: #333;
-    }
-  }
-
-  &-color-border {
-    width: 24px;
-    height: 24px;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    &.active.light {
-      border: 1px solid rgba(51, 129, 255, 0.8);
-    }
-
-    &.active.dark {
-      border: 1px solid rgba(51, 129, 255, 0.8);
-    }
-  }
-
-  &-color-btn {
-    margin: 0;
-    border: 1px solid rgba(0, 0, 0, 0.24);
-    padding: 0;
-    appearance: none;
-    width: 16px;
-    height: 16px;
-    border-radius: 4px;
-    cursor: pointer;
-
-    &:focus-visible {
-      outline-offset: 2px;
-    }
-  }
-
-  &-mask {
-    position: absolute;
-    left: calc(100% + 1px);
-    top: 50%;
-    transform: translateY(-50%);
-    opacity: 0.85;
-    &.dark {
-      left: calc(100%);
-    }
-  }
-
-  &-mask-btn {
-    width: 17px;
-    height: 62px;
-    cursor: pointer;
-    opacity: 0.85;
-    &.dark {
-      filter: invert(0.8);
-    }
-  }
-
-  &-expand-btn {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    left: 0;
-  }
-}
-
-@keyframes fastboard-app-loading-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/components/Toolbar/Toolbar.tsx

@@ -1,84 +0,0 @@
-import type { CommonProps, GenericIcon, Theme } from "../../typings";
-import type { ToolbarHook } from "./hooks";
-
-import clsx from "clsx";
-import { AnimatePresence, motion } from "framer-motion";
-import React, { createContext, useState } from "react";
-
-import expandPNG from "./components/assets/expanded.png";
-
-import { Icon } from "../../icons";
-import { useTheme } from "../hooks";
-import { Content } from "./Content";
-import { EmptyToolbarHook, useToolbar } from "./hooks";
-
-export type ToolbarProps = CommonProps & {
-  icons?: GenericIcon<
-    | "clicker"
-    | "selector"
-    | "pencil"
-    | "eraser"
-    | "clean"
-    | "expand"
-    | "collapse"
-    | "up"
-    | "down"
-    | "text"
-    | "apps"
-  >;
-};
-
-type ToolbarContextType = ToolbarHook & {
-  theme: Theme;
-  icons?: ToolbarProps["icons"];
-};
-
-export const ToolbarContext = createContext<ToolbarContextType>({
-  theme: "light",
-  ...EmptyToolbarHook,
-});
-
-export const name = "fastboard-toolbar";
-
-export function Toolbar({ theme, icons }: ToolbarProps) {
-  theme = useTheme(theme);
-
-  const hook = useToolbar();
-  const [expanded, setExpanded] = useState(true);
-  const [pointerEvents, setPointerEvents] = useState<"auto" | "none">("auto");
-  const disabled = !hook.writable;
-
-  return (
-    <ToolbarContext.Provider value={{ theme, icons, ...hook }}>
-      <AnimatePresence>
-        {expanded ? (
-          <motion.div
-            key="toolbar"
-            className={clsx(name, theme)}
-            initial={{ x: -100 }}
-            animate={{ x: 0, transition: { duration: 0.5 } }}
-            exit={{ x: -100, transition: { duration: 0.5 } }}
-            onAnimationStart={() => setPointerEvents("none")}
-            onAnimationComplete={() => setPointerEvents("auto")}
-            style={{ pointerEvents }}
-          >
-            <Content onCollapse={() => setExpanded(false)} />
-          </motion.div>
-        ) : (
-          <motion.div
-            className={clsx(`${name}-expand-btn`, theme)}
-            key="expand"
-            onClick={() => setExpanded(true)}
-            initial={{ x: -100 }}
-            animate={{ x: 0, transition: { duration: 0.5 } }}
-          >
-            <Icon
-              fallback={<img draggable={false} src={expandPNG} className={clsx(`${name}-mask-btn`, theme)} />}
-              src={disabled ? icons?.expandIconDisable : icons?.expandIcon}
-            />
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </ToolbarContext.Provider>
-  );
-}

package/src/components/Toolbar/components/ApplianceButtons.tsx

@@ -1,108 +0,0 @@
-import type { HotKey } from "white-web-sdk";
-
-import React, { useCallback, useContext } from "react";
-import { ApplianceNames } from "white-web-sdk";
-
-import { useTranslation } from "../../../i18n";
-import { Icon } from "../../../icons";
-import { defaultHotKeys } from "../../../internal";
-import { useFastboardApp } from "../../hooks";
-import { Icons } from "../icons";
-import { ToolbarContext } from "../Toolbar";
-import { Button } from "./Button";
-
-export function renderToolTip(text: string | undefined, hotkey?: HotKey) {
-  if (!(typeof hotkey === "string")) return text;
-  return (
-    <span className="fastboard-toolbar-tooltip">
-      <span>{text}</span>
-      <span className="fastboard-toolbar-hotkey">{hotkey.toUpperCase()}</span>
-    </span>
-  );
-}
-
-export function ClickerButton() {
-  const app = useFastboardApp();
-  const { t } = useTranslation();
-  const { theme, icons, writable, setAppliance, memberState } = useContext(ToolbarContext);
-
-  const changeAppliance = useCallback(() => setAppliance(ApplianceNames.clicker), [setAppliance]);
-
-  const shortcut = app.hotKeys?.changeToClick;
-  const appliance = memberState?.currentApplianceName;
-  const active = appliance === ApplianceNames.clicker;
-  const disabled = !writable;
-
-  return (
-    <Button content={renderToolTip(t("clicker"), shortcut)} onClick={changeAppliance} active={active}>
-      <Icon
-        fallback={<Icons.Clicker theme={theme} active={active} />}
-        src={disabled ? icons?.clickerIconDisable : icons?.clickerIcon}
-        alt="[clicker]"
-      />
-    </Button>
-  );
-}
-
-export function SelectorButton() {
-  const app = useFastboardApp();
-  const { t } = useTranslation();
-  const { theme, icons, writable, setAppliance, memberState } = useContext(ToolbarContext);
-
-  const changeAppliance = useCallback(() => setAppliance(ApplianceNames.selector), [setAppliance]);
-
-  const appliance = memberState?.currentApplianceName;
-  const active = appliance === ApplianceNames.selector;
-  const disabled = !writable;
-  const shortcut = (app.hotKeys || defaultHotKeys).changeToSelector;
-
-  return (
-    <Button content={renderToolTip(t("selector"), shortcut)} onClick={changeAppliance} active={active}>
-      <Icon
-        fallback={<Icons.Selector theme={theme} active={active} />}
-        src={disabled ? icons?.selectorIconDisable : icons?.selectorIcon}
-        alt="[selector]"
-      />
-    </Button>
-  );
-}
-
-export function EraserButton() {
-  const app = useFastboardApp();
-  const { t } = useTranslation();
-  const { theme, icons, writable, setAppliance, memberState } = useContext(ToolbarContext);
-
-  const changeAppliance = useCallback(() => setAppliance(ApplianceNames.eraser), [setAppliance]);
-
-  const appliance = memberState?.currentApplianceName;
-  const active = appliance === ApplianceNames.eraser;
-  const disabled = !writable;
-  const shortcut = (app?.hotKeys || defaultHotKeys).changeToEraser;
-
-  return (
-    <Button content={renderToolTip(t("eraser"), shortcut)} onClick={changeAppliance} active={active}>
-      <Icon
-        fallback={<Icons.Eraser theme={theme} active={active} />}
-        src={disabled ? icons?.eraserIconDisable : icons?.eraserIcon}
-        alt="[eraser]"
-      />
-    </Button>
-  );
-}
-
-export function CleanButton() {
-  const { t } = useTranslation();
-  const { theme, icons, writable, cleanCurrentScene } = useContext(ToolbarContext);
-
-  const disabled = !writable;
-
-  return (
-    <Button content={t("clean")} onClick={cleanCurrentScene}>
-      <Icon
-        fallback={<Icons.Clean theme={theme} />}
-        src={disabled ? icons?.cleanIconDisable : icons?.cleanIcon}
-        alt="[clean]"
-      />
-    </Button>
-  );
-}

package/src/components/Toolbar/components/AppsButton.tsx

@@ -1,134 +0,0 @@
-import clsx from "clsx";
-import Tippy from "@tippyjs/react";
-import React, { useContext } from "react";
-
-import vscodePNG from "./assets/vscode.png";
-import geogebraPNG from "./assets/geogebra.png";
-import countdownPNG from "./assets/countdown.png";
-
-import { Icon } from "../../../icons";
-import { RightOffset } from "../../../theme";
-import { Icons } from "../icons";
-import { ToolbarContext } from "../Toolbar";
-import { Button } from "./Button";
-import { useFastboardApp } from "../../hooks";
-import { Loading } from "../icons/Loading";
-
-export interface AppsButtonProps {
-  content?: React.ReactNode;
-  onClick?: () => void;
-}
-
-export function AppsButton({ content, onClick }: AppsButtonProps) {
-  const { theme, icons, writable } = useContext(ToolbarContext);
-
-  const disabled = !writable;
-
-  const button = (
-    <Button content="Apps" onClick={onClick}>
-      <Icon
-        fallback={<Icons.Apps theme={theme} />}
-        src={disabled ? icons?.appsIconDisable : icons?.appsIcon}
-        alt="[apps]"
-      />
-    </Button>
-  );
-
-  return content === false ? (
-    button
-  ) : (
-    <span className="fastboard-toolbar-btn-interactive">
-      <Tippy
-        className="fastboard-tip"
-        content={renderAppsButtonContent(content)}
-        theme={theme}
-        placement="right-end"
-        trigger="click"
-        offset={RightOffset}
-        arrow={false}
-        interactive
-      >
-        {button}
-      </Tippy>
-    </span>
-  );
-}
-
-function renderAppsButtonContent(content?: React.ReactNode) {
-  return (
-    <div className="fastboard-toolbar-panel apps">
-      <div className="fastboard-toolbar-apps">{content || <DefaultApps />}</div>
-    </div>
-  );
-}
-
-function DefaultApps() {
-  const app = useFastboardApp();
-  const { appsStatus } = useContext(ToolbarContext);
-
-  return (
-    <>
-      <AppIcon
-        title="Code Editor"
-        src={vscodePNG}
-        alt="[code editor]"
-        appStatus={appsStatus["Monaco"]}
-        onClick={app?.insertCodeEditor.bind(app)}
-      />
-      <AppIcon
-        title="GeoGebra"
-        src={geogebraPNG}
-        alt="[geogebra]"
-        appStatus={appsStatus["GeoGebra"]}
-        onClick={app?.insertGeoGebra.bind(app)}
-      />
-      <AppIcon
-        title="Countdown"
-        src={countdownPNG}
-        alt="[countdown]"
-        appStatus={appsStatus["Countdown"]}
-        onClick={app?.insertCountdown.bind(app)}
-      />
-    </>
-  );
-}
-
-interface AppIconProps {
-  title: string;
-  src: string;
-  alt: string;
-  appStatus?: {
-    status: "idle" | "loading" | "failed";
-    reason?: string | undefined;
-  };
-  onClick?: () => void;
-}
-
-function AppIcon({ title, src, alt, appStatus, onClick }: AppIconProps) {
-  const { theme } = useContext(ToolbarContext);
-  const { status = "idle", reason } = appStatus || {};
-  const loading = status === "loading";
-  const failed = status === "failed";
-  const unifiedTitle = loading ? "loading" : failed ? reason : title;
-
-  return (
-    <div className="fastboard-toolbar-app-icon-wrapper">
-      <span
-        className={clsx("fastboard-toolbar-app-icon", {
-          "fastboard-toolbar-app-is-loading": loading,
-          "fastboard-toolbar-app-is-failed": failed,
-        })}
-      >
-        <Button disabled={failed || loading} placement="top" content={unifiedTitle} onClick={onClick}>
-          <img src={src} alt={alt} title={unifiedTitle} />
-        </Button>
-        <span className="fastboard-toolbar-app-icon-text">{title}</span>
-      </span>
-      {loading && (
-        <span className="fastboard-toolbar-app-icon-mask">
-          <Loading theme={theme} />
-        </span>
-      )}
-    </div>
-  );
-}

package/src/components/Toolbar/components/Button.tsx

@@ -1,45 +0,0 @@
-import type { PropsWithChildren } from "react";
-
-import clsx from "clsx";
-import React, { forwardRef, useContext } from "react";
-import Tippy from "@tippyjs/react";
-
-import { RightOffset } from "../../../theme";
-import { ToolbarContext } from "../Toolbar";
-
-type ButtonProps = PropsWithChildren<{
-  content: React.ReactNode;
-  disabled?: boolean;
-  active?: boolean;
-  onClick?: () => void;
-  interactive?: boolean;
-  placement?: "top" | "right"; // not using tippy.js's placement to satisfy dts
-}>;
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const { content, disabled, active, onClick, interactive, placement = "right", children } = props;
-  const { writable, theme } = useContext(ToolbarContext);
-
-  return (
-    <Tippy
-      className="fastboard-tip"
-      content={content}
-      interactive={interactive}
-      theme={theme}
-      disabled={disabled || !writable}
-      placement={placement}
-      offset={placement.includes("right") ? RightOffset : undefined}
-      delay={[1000, 400]}
-      duration={300}
-    >
-      <button
-        ref={ref}
-        className={clsx("fastboard-toolbar-btn", theme, { active })}
-        onClick={onClick}
-        disabled={disabled || !writable}
-      >
-        {children}
-      </button>
-    </Tippy>
-  );
-});