@dxos/shell 0.7.5-feature-compute.4d9d99a → 0.7.5-labs.071a3e2

package/src/components/EmojiPicker.tsx

@@ -1,187 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import emojiData from '@emoji-mart/data';
-import EmojiMart from '@emoji-mart/react';
-import { ArrowCounterClockwise, CaretDown, UserCircle } from '@phosphor-icons/react';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { useRef, useState } from 'react';
-
-import {
-  Button,
-  type ButtonProps,
-  Popover,
-  type ThemedClassName,
-  Toolbar,
-  Tooltip,
-  useMediaQuery,
-  useThemeContext,
-  useTranslation,
-} from '@dxos/react-ui';
-import { getSize } from '@dxos/react-ui-theme';
-
-import './emoji.css';
-
-export type EmojiPickerProps = {
-  disabled?: boolean;
-  defaultEmoji?: string;
-  emoji?: string;
-  onChangeEmoji?: (nextEmoji: string) => void;
-  onClickClear?: ButtonProps['onClick'];
-};
-
-/**
- * A toolbar button for picking an emoji. Use only in `role=toolbar` elements. Unable to unset the value.
- */
-export const EmojiPickerToolbarButton = ({
-  disabled,
-  defaultEmoji,
-  emoji,
-  onChangeEmoji,
-  classNames,
-}: ThemedClassName<Omit<EmojiPickerProps, 'onClickClear'>>) => {
-  const { t } = useTranslation('os');
-  const { themeMode } = useThemeContext();
-
-  const [_emojiValue, setEmojiValue] = useControllableState<string>({
-    prop: emoji,
-    onChange: onChangeEmoji,
-    defaultProp: defaultEmoji,
-  });
-
-  const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);
-  const suppressNextTooltip = useRef<boolean>(false);
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
-
-  return (
-    <Tooltip.Root
-      open={triggerTooltipOpen}
-      onOpenChange={(nextOpen) => {
-        if (suppressNextTooltip.current) {
-          setTriggerTooltipOpen(false);
-          suppressNextTooltip.current = false;
-        } else {
-          setTriggerTooltipOpen(nextOpen);
-        }
-      }}
-    >
-      <Popover.Root
-        open={emojiPickerOpen}
-        onOpenChange={(nextOpen) => {
-          setEmojiPickerOpen(nextOpen);
-          suppressNextTooltip.current = true;
-        }}
-      >
-        <Tooltip.Trigger asChild>
-          <Popover.Trigger asChild>
-            <Toolbar.Button classNames={['gap-2 text-2xl plb-1', classNames]} disabled={disabled}>
-              <span className='sr-only'>{t('select emoji label')}</span>
-              <UserCircle className={getSize(5)} />
-            </Toolbar.Button>
-          </Popover.Trigger>
-        </Tooltip.Trigger>
-        <Tooltip.Portal>
-          <Tooltip.Content side='bottom'>
-            {t('select emoji label')}
-            <Tooltip.Arrow />
-          </Tooltip.Content>
-        </Tooltip.Portal>
-        <Popover.Content
-          side='bottom'
-          onKeyDownCapture={(event) => {
-            if (event.key === 'Escape') {
-              event.stopPropagation();
-              setEmojiPickerOpen(false);
-              suppressNextTooltip.current = true;
-            }
-          }}
-        >
-          {/* https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props */}
-          <EmojiMart
-            data={emojiData}
-            onEmojiSelect={({ native }: { native?: string }) => {
-              if (native) {
-                setEmojiValue(native);
-                setEmojiPickerOpen(false);
-              }
-            }}
-            autoFocus={true}
-            maxFrequentRows={0}
-            noCountryFlags={true}
-            theme={themeMode}
-          />
-          <Popover.Arrow />
-        </Popover.Content>
-      </Popover.Root>
-    </Tooltip.Root>
-  );
-};
-
-/**
- * A button for picking an emoji alongside a button for unsetting it.
- */
-export const EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear }: EmojiPickerProps) => {
-  const { t } = useTranslation('os');
-  const [isMd] = useMediaQuery('md', { ssr: false });
-
-  const [emojiValue, setEmojiValue] = useControllableState<string>({
-    prop: emoji,
-    onChange: onChangeEmoji,
-    defaultProp: defaultEmoji,
-  });
-
-  const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false);
-
-  return (
-    <>
-      <Popover.Root open={emojiPickerOpen} onOpenChange={setEmojiPickerOpen}>
-        <Popover.Trigger asChild>
-          <Button variant='ghost' classNames='gap-2 text-2xl plb-1' disabled={disabled}>
-            <span className='sr-only'>{t('select emoji label')}</span>
-            <span className='grow pis-14'>{emojiValue}</span>
-            <CaretDown className={getSize(4)} />
-          </Button>
-        </Popover.Trigger>
-        <Popover.Content
-          side='right'
-          sideOffset={isMd ? 0 : -310}
-          onKeyDownCapture={(event) => {
-            if (event.key === 'Escape') {
-              event.stopPropagation();
-              setEmojiPickerOpen(false);
-            }
-          }}
-        >
-          <EmojiMart
-            data={emojiData}
-            onEmojiSelect={({ native }: { native?: string }) => {
-              if (native) {
-                setEmojiValue(native);
-                setEmojiPickerOpen(false);
-              }
-            }}
-            autoFocus={true}
-            maxFrequentRows={0}
-            noCountryFlags={true}
-          />
-          <Popover.Arrow />
-        </Popover.Content>
-      </Popover.Root>
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <Button variant='ghost' onClick={onClickClear} disabled={disabled}>
-            <span className='sr-only'>{t('clear label')}</span>
-            <ArrowCounterClockwise />
-          </Button>
-        </Tooltip.Trigger>
-        <Tooltip.Portal>
-          <Tooltip.Content side='right'>
-            {t('clear label')}
-            <Tooltip.Arrow />
-          </Tooltip.Content>
-        </Tooltip.Portal>
-      </Tooltip.Root>
-    </>
-  );
-};

package/src/components/HuePicker.tsx

@@ -1,182 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { ArrowCounterClockwise, CaretDown, Check, Palette } from '@phosphor-icons/react';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { useRef, useState } from 'react';
-
-import {
-  Button,
-  type ButtonProps,
-  DropdownMenu,
-  type ThemedClassName,
-  Toolbar,
-  Tooltip,
-  useThemeContext,
-  useTranslation,
-} from '@dxos/react-ui';
-import { getSize, hueTokenThemes, mx } from '@dxos/react-ui-theme';
-
-const HuePreview = ({ hue }: { hue: string }) => {
-  const { tx } = useThemeContext();
-  const size = 20;
-  return (
-    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
-      <rect x={0} y={0} width={size} height={size} className={tx('hue.fill', 'select--hue__preview', { hue })} />
-    </svg>
-  );
-};
-
-const hueTokens = Object.keys(hueTokenThemes).slice(0, 16);
-
-export type HuePickerProps = {
-  disabled?: boolean;
-  defaultHue?: string;
-  hue?: string;
-  onChangeHue?: (nextHue: string) => void;
-  onClickClear?: ButtonProps['onClick'];
-};
-
-/**
- * A toolbar button for picking hue. Use only in `role=toolbar` elements. Unable to unset the value.
- */
-export const HuePickerToolbarButton = ({
-  disabled,
-  hue,
-  onChangeHue,
-  classNames,
-  defaultHue,
-}: ThemedClassName<Omit<HuePickerProps, 'onClickClear'>>) => {
-  const { t } = useTranslation('os');
-
-  const [hueValue, setHueValue] = useControllableState<string>({
-    prop: hue,
-    onChange: onChangeHue,
-    defaultProp: defaultHue,
-  });
-
-  const [huePickerOpen, setHuePickerOpen] = useState<boolean>(false);
-
-  const suppressNextTooltip = useRef<boolean>(false);
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
-
-  return (
-    <Tooltip.Root
-      open={triggerTooltipOpen}
-      onOpenChange={(nextOpen) => {
-        if (suppressNextTooltip.current) {
-          setTriggerTooltipOpen(false);
-          suppressNextTooltip.current = false;
-        } else {
-          setTriggerTooltipOpen(nextOpen);
-        }
-      }}
-    >
-      <DropdownMenu.Root
-        modal={false}
-        open={huePickerOpen}
-        onOpenChange={(nextOpen) => {
-          setHuePickerOpen(nextOpen);
-          suppressNextTooltip.current = true;
-        }}
-      >
-        <Tooltip.Trigger asChild>
-          <DropdownMenu.Trigger asChild>
-            <Toolbar.Button classNames={mx('gap-2 plb-1', classNames)} disabled={disabled}>
-              <span className='sr-only'>{t('select hue label')}</span>
-              <Palette className={getSize(5)} />
-            </Toolbar.Button>
-          </DropdownMenu.Trigger>
-        </Tooltip.Trigger>
-        <Tooltip.Portal>
-          <Tooltip.Content side='bottom'>
-            {t('select hue label')}
-            <Tooltip.Arrow />
-          </Tooltip.Content>
-        </Tooltip.Portal>
-        {/* TODO(burdon): Change from DropdownMenu (show checked). */}
-        <DropdownMenu.Content side='bottom' classNames='!w-40'>
-          <DropdownMenu.Viewport classNames='grid grid-cols-4'>
-            {hueTokens.map((hue) => {
-              return (
-                <DropdownMenu.CheckboxItem
-                  key={hue}
-                  checked={hue === hueValue}
-                  onCheckedChange={() => setHueValue(hue)}
-                  classNames={'px-0 py-2 items-center justify-center'}
-                >
-                  <HuePreview hue={hue} />
-                </DropdownMenu.CheckboxItem>
-              );
-            })}
-          </DropdownMenu.Viewport>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </Tooltip.Root>
-  );
-};
-
-/**
- * A button for picking hue alongside a button for unsetting it.
- */
-export const HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => {
-  const { t } = useTranslation('os');
-
-  const [hueValue, setHueValue] = useControllableState<string>({
-    prop: hue,
-    onChange: onChangeHue,
-    defaultProp: defaultHue,
-  });
-
-  return (
-    <>
-      <DropdownMenu.Root modal={false}>
-        <DropdownMenu.Trigger asChild>
-          <Button variant='ghost' classNames='gap-2 plb-1' disabled={disabled}>
-            <span className='sr-only'>{t('select hue label')}</span>
-            <div role='none' className='pis-14 grow flex items-center justify-center gap-2'>
-              <HuePreview hue={hueValue!} />
-              <span>{t(`${hueValue} label`)}</span>
-            </div>
-            <CaretDown className={getSize(4)} />
-          </Button>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content side='right'>
-          <DropdownMenu.Viewport>
-            {Object.keys(hueTokenThemes).map((hue) => {
-              return (
-                <DropdownMenu.CheckboxItem
-                  key={hue}
-                  checked={hue === hueValue}
-                  onCheckedChange={() => setHueValue(hue)}
-                >
-                  <HuePreview hue={hue} />
-                  <span className='grow'>{t(`${hue} label`)}</span>
-                  <DropdownMenu.ItemIndicator>
-                    <Check />
-                  </DropdownMenu.ItemIndicator>
-                </DropdownMenu.CheckboxItem>
-              );
-            })}
-          </DropdownMenu.Viewport>
-          <DropdownMenu.Arrow />
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <Button variant='ghost' onClick={onClickClear} disabled={disabled}>
-            <span className='sr-only'>{t('clear label')}</span>
-            <ArrowCounterClockwise />
-          </Button>
-        </Tooltip.Trigger>
-        <Tooltip.Portal>
-          <Tooltip.Content side='right'>
-            {t('clear label')}
-            <Tooltip.Arrow />
-          </Tooltip.Content>
-        </Tooltip.Portal>
-      </Tooltip.Root>
-    </>
-  );
-};

package/src/components/emoji.css

@@ -1,25 +0,0 @@
-/**
- * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html
- */
-[data-theme="dark"] em-emoji-picker {
-  /* TODO(burdon): Get from TW defs: modal-surface? */
-  --background-rgb: #3B3B3F;
-  --rgb-background: #3B3B3F;
-
-  --font-family: "Inter Variable", ui-sans-serif;
-
-  /*--font-size: 16px;*/
-  /*--color-border-over: rgba(0, 0, 0, 0.1);*/
-  /*--color-border: rgba(0, 0, 0, 0.05);*/
-  /*--category-icon-size: 24px;*/
-  /*--border-radius: 24px;*/
-  /*--font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;*/
-  /*--rgb-accent: 255, 105, 180;*/
-  /*--rgb-color: 102, 51, 153;*/
-  /*--rgb-input: 255, 235, 235;*/
-  /*--shadow: 5px 5px 15px -8px rebeccapurple;*/
-
-  /*height: 50vh;*/
-  /*min-height: 400px;*/
-  /*max-height: 800px;*/
-}