@noya-app/noya-designsystem 0.0.2

package/src/components/ContextMenu.tsx

@@ -0,0 +1,224 @@
+import { CheckIcon, ChevronRightIcon } from '@noya-app/noya-icons';
+import { useKeyboardShortcuts } from '@noya-app/noya-keymap';
+import * as RadixContextMenu from '@radix-ui/react-context-menu';
+import React, {
+  ReactElement,
+  ReactNode,
+  memo,
+  useCallback,
+  useMemo,
+} from 'react';
+import styled from 'styled-components';
+import { Spacer } from './Spacer';
+import {
+  CHECKBOX_RIGHT_INSET,
+  CHECKBOX_WIDTH,
+  KeyboardShortcut,
+  MenuItem,
+  SEPARATOR_ITEM,
+  getKeyboardShortcutsForMenuItems,
+  styles,
+} from './internal/Menu';
+
+/* ----------------------------------------------------------------------------
+ * Separator
+ * ------------------------------------------------------------------------- */
+
+const SeparatorElement = styled(RadixContextMenu.Separator)(
+  styles.separatorStyle,
+);
+
+/* ----------------------------------------------------------------------------
+ * Item
+ * ------------------------------------------------------------------------- */
+
+const ItemElement = styled(RadixContextMenu.Item)(styles.itemStyle);
+
+const CheckboxItemElement = styled(RadixContextMenu.CheckboxItem)(
+  styles.itemStyle,
+);
+
+const StyledItemIndicator = styled(RadixContextMenu.ItemIndicator)(
+  styles.itemIndicatorStyle,
+);
+
+export interface MenuItemProps<T extends string> {
+  value?: T;
+  children: ReactNode;
+  onSelect: (value: T) => void;
+  checked: boolean;
+  disabled: boolean;
+  indented: boolean;
+  shortcut?: string;
+  icon?: ReactElement;
+  items?: MenuItem<T>[];
+}
+
+const ContextMenuItem = memo(function ContextMenuItem<T extends string>({
+  value,
+  children,
+  onSelect,
+  checked,
+  disabled,
+  indented,
+  icon,
+  items,
+  shortcut,
+}: MenuItemProps<T>) {
+  // The pointer event within the context menu will bubble outside of the
+  // context menu unless we stop it here.
+  const handlePointerDown = useCallback(
+    (event: React.PointerEvent) => event.stopPropagation(),
+    [],
+  );
+
+  const handleSelectItem = useCallback(() => {
+    if (!value) return;
+
+    onSelect(value);
+  }, [onSelect, value]);
+
+  if (checked) {
+    return (
+      <CheckboxItemElement
+        checked={checked}
+        disabled={disabled}
+        onSelect={handleSelectItem}
+      >
+        <StyledItemIndicator>
+          <CheckIcon />
+        </StyledItemIndicator>
+        {children}
+      </CheckboxItemElement>
+    );
+  }
+
+  const element = (
+    <ItemElement
+      disabled={disabled}
+      onSelect={handleSelectItem}
+      onPointerDown={handlePointerDown}
+    >
+      {indented && (
+        <Spacer.Horizontal size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET} />
+      )}
+      {icon && (
+        <>
+          {icon}
+          <Spacer.Horizontal size={8} />
+        </>
+      )}
+      {children}
+      {shortcut && (
+        <>
+          <Spacer.Horizontal />
+          <Spacer.Horizontal size={24} />
+          <KeyboardShortcut shortcut={shortcut} />
+        </>
+      )}
+      {items && items.length > 0 && (
+        <>
+          <Spacer.Horizontal />
+          <Spacer.Horizontal size={16} />
+          <ChevronRightIcon />
+        </>
+      )}
+    </ItemElement>
+  );
+
+  if (items && items.length > 0) {
+    return (
+      <ContextMenuRoot isNested items={items} onSelect={onSelect}>
+        {element}
+      </ContextMenuRoot>
+    );
+  } else {
+    return element;
+  }
+});
+
+/* ----------------------------------------------------------------------------
+ * Root
+ * ------------------------------------------------------------------------- */
+
+const Content = styled(RadixContextMenu.Content)(styles.contentStyle);
+const SubContent = styled(RadixContextMenu.SubContent)(styles.contentStyle);
+
+export interface MenuProps<T extends string> {
+  children: ReactNode;
+  items: MenuItem<T>[];
+  onSelect: (value: T) => void;
+  isNested?: boolean;
+  shouldBindKeyboardShortcuts?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+function ContextMenuRoot<T extends string>({
+  items,
+  children,
+  onSelect,
+  isNested,
+  shouldBindKeyboardShortcuts,
+  onOpenChange,
+}: MenuProps<T>) {
+  const hasCheckedItem = items.some(
+    (item) => item !== SEPARATOR_ITEM && item.checked,
+  );
+
+  const keymap = useMemo(
+    () =>
+      isNested || shouldBindKeyboardShortcuts === false
+        ? {}
+        : getKeyboardShortcutsForMenuItems(items, onSelect),
+    [isNested, items, onSelect, shouldBindKeyboardShortcuts],
+  );
+
+  useKeyboardShortcuts(keymap);
+
+  // We call preventDefault both to:
+  // - Disable radix-ui's long-press-to-open behavior
+  //   https://github.com/radix-ui/primitives/issues/748#issuecomment-869502837
+  // - Mark the event as handled, so our ListView root doesn't handle it (a hack)
+  const onPointerDown = useCallback((event: React.PointerEvent) => {
+    event.preventDefault();
+  }, []);
+
+  const RootComponent = isNested ? RadixContextMenu.Sub : RadixContextMenu.Root;
+  const TriggerComponent = isNested
+    ? RadixContextMenu.SubTrigger
+    : RadixContextMenu.Trigger;
+  const ContentComponent: typeof Content = isNested ? SubContent : Content;
+
+  return (
+    <RootComponent onOpenChange={onOpenChange}>
+      <TriggerComponent asChild onPointerDown={onPointerDown}>
+        {children}
+      </TriggerComponent>
+      <RadixContextMenu.Portal>
+        <ContentComponent>
+          {items.map((item, index) =>
+            item === SEPARATOR_ITEM ? (
+              <SeparatorElement key={index} />
+            ) : (
+              <ContextMenuItem
+                key={item.value ?? index}
+                value={item.value}
+                indented={hasCheckedItem}
+                checked={item.checked ?? false}
+                disabled={item.disabled ?? false}
+                icon={item.icon}
+                onSelect={onSelect}
+                items={item.items}
+                shortcut={item.shortcut}
+              >
+                {item.title}
+              </ContextMenuItem>
+            ),
+          )}
+        </ContentComponent>
+      </RadixContextMenu.Portal>
+    </RootComponent>
+  );
+}
+
+export const ContextMenu = memo(ContextMenuRoot);

package/src/components/Dialog.tsx

@@ -0,0 +1,143 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import React, {
+  ComponentProps,
+  ForwardedRef,
+  forwardRef,
+  ReactNode,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import styled from 'styled-components';
+import { IconButton } from './IconButton';
+import { Spacer } from './Spacer';
+
+const StyledOverlay = styled(DialogPrimitive.Overlay)({
+  backgroundColor: 'rgba(0,0,0,0.5)',
+  position: 'fixed',
+  inset: 0,
+});
+
+const StyledContent = styled(DialogPrimitive.Content)(({ theme }) => ({
+  boxShadow:
+    'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
+  position: 'fixed',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '90vw',
+  maxWidth: '450px',
+  maxHeight: '85vh',
+  padding: theme.sizes.dialog.padding,
+  borderRadius: 2,
+  ...theme.textStyles.small,
+  backgroundColor: theme.colors.popover.background,
+  overflowY: 'auto',
+  color: theme.colors.textMuted,
+  '&:focus': { outline: 'none' },
+  pointerEvents: 'all',
+  zIndex: 1000,
+}));
+
+const StyledTitle = styled(DialogPrimitive.Title)(({ theme }) => ({
+  margin: 0,
+  ...theme.textStyles.body,
+  color: theme.colors.text,
+}));
+
+const StyledDescription = styled(DialogPrimitive.Description)(({ theme }) => ({
+  margin: 0,
+  ...theme.textStyles.small,
+  color: theme.colors.textMuted,
+}));
+
+export const CloseButtonContainer = styled.div(({ theme }) => ({
+  position: 'absolute',
+  top: theme.sizes.dialog.padding,
+  right: theme.sizes.dialog.padding,
+  zIndex: 1,
+  backgroundColor: theme.colors.popover.background,
+  padding: '4px 6px',
+  borderRadius: '2px',
+  // boxShadow: `0 0 2px rgba(0, 0, 0, 0.2)`,
+  border: `1px solid rgba(128,128,128,0.2)`,
+}));
+
+export interface IDialog {
+  containsElement: (element: HTMLElement) => boolean;
+}
+
+interface Props {
+  title?: ReactNode;
+  description?: ReactNode;
+  children?: ReactNode;
+  style?: ComponentProps<typeof StyledContent>['style'];
+  open: ComponentProps<typeof DialogPrimitive.Root>['open'];
+  onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>['onOpenChange'];
+  onOpenAutoFocus?: ComponentProps<
+    typeof DialogPrimitive.Content
+  >['onOpenAutoFocus'];
+  closeOnInteractOutside?: boolean;
+}
+
+export const Dialog = forwardRef(function Dialog(
+  {
+    children,
+    title,
+    description,
+    open,
+    style,
+    onOpenChange,
+    onOpenAutoFocus,
+    closeOnInteractOutside = true,
+  }: Props,
+  forwardedRef: ForwardedRef<IDialog>,
+) {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useImperativeHandle(forwardedRef, () => ({
+    containsElement(element) {
+      if (!contentRef.current) return false;
+
+      return contentRef.current.contains(element);
+    },
+  }));
+
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <StyledOverlay />
+      <StyledContent
+        ref={contentRef}
+        onOpenAutoFocus={onOpenAutoFocus}
+        style={style}
+        {...(closeOnInteractOutside === false && {
+          onPointerDownOutside: (event) => {
+            event.preventDefault();
+          },
+          onInteractOutside: (event) => {
+            event.preventDefault();
+          },
+        })}
+      >
+        <CloseButtonContainer>
+          <DialogPrimitive.Close asChild>
+            <IconButton iconName="Cross1Icon" />
+          </DialogPrimitive.Close>
+        </CloseButtonContainer>
+        {title && (
+          <>
+            <StyledTitle>{title}</StyledTitle>
+            <Spacer.Vertical size={description ? 10 : 20} />
+          </>
+        )}
+        {description && (
+          <>
+            <Spacer.Vertical size={10} />
+            <StyledDescription>{description}</StyledDescription>
+            <Spacer.Vertical size={20} />
+          </>
+        )}
+        {children}
+      </StyledContent>
+    </DialogPrimitive.Root>
+  );
+});

package/src/components/Divider.tsx

@@ -0,0 +1,40 @@
+import React, { memo } from 'react';
+import styled from 'styled-components';
+
+/* ----------------------------------------------------------------------------
+ * Divider
+ * ------------------------------------------------------------------------- */
+
+type DividerVariant = 'normal' | 'strong' | 'subtle';
+
+const DividerContainer = styled.div<
+  DividerProps & {
+    orientation: 'horizontal' | 'vertical';
+  }
+>(({ theme, variant = 'normal', orientation, overflow = 0 }) => ({
+  ...(orientation === 'horizontal'
+    ? { height: '1px', minHeight: '1px', margin: `0px -${overflow}px` }
+    : { width: '1px', minWidth: '1px', margin: `-${overflow}px 0px` }),
+  background:
+    variant === 'strong'
+      ? theme.colors.dividerStrong
+      : variant === 'subtle'
+      ? theme.colors.dividerSubtle
+      : theme.colors.divider,
+  alignSelf: 'stretch',
+}));
+
+interface DividerProps {
+  variant?: DividerVariant;
+  overflow?: number;
+}
+
+export const Divider = memo(function Divider(props: DividerProps) {
+  return <DividerContainer orientation="horizontal" {...props} />;
+});
+
+export const DividerVertical = memo(function DividerVertical(
+  props: DividerProps,
+) {
+  return <DividerContainer orientation="vertical" {...props} />;
+});

package/src/components/DropdownMenu.tsx

@@ -0,0 +1,208 @@
+import { CheckIcon, ChevronRightIcon } from '@noya-app/noya-icons';
+import { useKeyboardShortcuts } from '@noya-app/noya-keymap';
+import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
+import React, {
+  ForwardedRef,
+  SyntheticEvent,
+  forwardRef,
+  memo,
+  useCallback,
+  useMemo,
+} from 'react';
+import styled from 'styled-components';
+import { MenuItemProps, MenuProps } from './ContextMenu';
+import { Spacer } from './Spacer';
+import {
+  CHECKBOX_RIGHT_INSET,
+  CHECKBOX_WIDTH,
+  KeyboardShortcut,
+  SEPARATOR_ITEM,
+  getKeyboardShortcutsForMenuItems,
+  styles,
+} from './internal/Menu';
+
+/* ----------------------------------------------------------------------------
+ * Separator
+ * ------------------------------------------------------------------------- */
+
+const SeparatorElement = styled(RadixDropdownMenu.Separator)(
+  styles.separatorStyle,
+);
+
+/* ----------------------------------------------------------------------------
+ * Item
+ * ------------------------------------------------------------------------- */
+
+const ItemElement = styled(RadixDropdownMenu.Item)(styles.itemStyle);
+
+const CheckboxItemElement = styled(RadixDropdownMenu.CheckboxItem)(
+  styles.itemStyle,
+);
+
+const StyledItemIndicator = styled(RadixDropdownMenu.ItemIndicator)(
+  styles.itemIndicatorStyle,
+);
+
+const DropdownMenuItem = memo(function ContextMenuItem<T extends string>({
+  value,
+  children,
+  onSelect,
+  checked,
+  disabled,
+  indented,
+  icon,
+  items,
+  shortcut,
+}: MenuItemProps<T>) {
+  const handleSelectItem = useCallback(() => {
+    if (!value) return;
+
+    onSelect(value);
+  }, [onSelect, value]);
+
+  if (checked) {
+    return (
+      <CheckboxItemElement
+        checked={checked}
+        disabled={disabled}
+        onSelect={handleSelectItem}
+      >
+        <StyledItemIndicator>
+          <CheckIcon />
+        </StyledItemIndicator>
+        {icon && (
+          <>
+            {icon}
+            <Spacer.Horizontal size={8} />
+          </>
+        )}
+        {children}
+      </CheckboxItemElement>
+    );
+  }
+
+  const element = (
+    <ItemElement disabled={disabled} onSelect={handleSelectItem}>
+      {indented && (
+        <Spacer.Horizontal size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET} />
+      )}
+      {icon && (
+        <>
+          {icon}
+          <Spacer.Horizontal size={8} />
+        </>
+      )}
+      {children}
+      {shortcut && (
+        <>
+          <Spacer.Horizontal />
+          <Spacer.Horizontal size={24} />
+          <KeyboardShortcut shortcut={shortcut} />
+        </>
+      )}
+      {items && items.length > 0 && (
+        <>
+          <Spacer.Horizontal />
+          <Spacer.Horizontal size={16} />
+          <ChevronRightIcon />
+        </>
+      )}
+    </ItemElement>
+  );
+
+  if (items && items.length > 0) {
+    return (
+      <DropdownMenuRoot isNested items={items} onSelect={onSelect}>
+        {element}
+      </DropdownMenuRoot>
+    );
+  } else {
+    return element;
+  }
+});
+
+/* ----------------------------------------------------------------------------
+ * Root
+ * ------------------------------------------------------------------------- */
+
+const Content = styled(RadixDropdownMenu.Content)(styles.contentStyle);
+const SubContent = styled(RadixDropdownMenu.SubContent)(styles.contentStyle);
+
+const DropdownMenuRoot = forwardRef(function DropdownMenuRoot<T extends string>(
+  {
+    items,
+    children,
+    onSelect,
+    isNested,
+    shouldBindKeyboardShortcuts,
+    onOpenChange,
+    open,
+    onCloseAutoFocus,
+  }: MenuProps<T> & {
+    open?: boolean;
+    onCloseAutoFocus?: React.EventHandler<SyntheticEvent<unknown>>;
+  },
+  forwardedRef: ForwardedRef<HTMLElement>,
+) {
+  const hasCheckedItem = items.some(
+    (item) => item !== SEPARATOR_ITEM && item.checked,
+  );
+
+  const keymap = useMemo(
+    () =>
+      isNested || shouldBindKeyboardShortcuts === false
+        ? {}
+        : getKeyboardShortcutsForMenuItems(items, onSelect),
+    [isNested, items, onSelect, shouldBindKeyboardShortcuts],
+  );
+
+  useKeyboardShortcuts(keymap);
+
+  const RootComponent = isNested
+    ? RadixDropdownMenu.Sub
+    : RadixDropdownMenu.Root;
+  const TriggerComponent = isNested
+    ? RadixDropdownMenu.SubTrigger
+    : RadixDropdownMenu.Trigger;
+  const ContentComponent = isNested ? SubContent : Content;
+
+  const contentStyle = useMemo(() => ({ zIndex: 1000 }), []);
+
+  return (
+    <RootComponent onOpenChange={onOpenChange} open={open}>
+      <TriggerComponent ref={forwardedRef as ForwardedRef<any>} asChild>
+        {children}
+      </TriggerComponent>
+      <RadixDropdownMenu.Portal>
+        <ContentComponent
+          sideOffset={4}
+          style={contentStyle}
+          collisionPadding={8}
+          {...({ onCloseAutoFocus } as any)}
+        >
+          {items.map((item, index) =>
+            item === SEPARATOR_ITEM ? (
+              <SeparatorElement key={index} />
+            ) : (
+              <DropdownMenuItem
+                key={item.value ?? index}
+                value={item.value}
+                indented={hasCheckedItem}
+                checked={item.checked ?? false}
+                disabled={item.disabled ?? false}
+                icon={item.icon}
+                onSelect={onSelect}
+                items={item.items}
+                shortcut={item.shortcut}
+              >
+                {item.title}
+              </DropdownMenuItem>
+            ),
+          )}
+        </ContentComponent>
+      </RadixDropdownMenu.Portal>
+    </RootComponent>
+  );
+});
+
+export const DropdownMenu = memo(DropdownMenuRoot);

package/src/components/FillInputField.tsx

@@ -0,0 +1,43 @@
+import { Sketch } from '@noya-app/noya-file-format';
+import React, { CSSProperties, ForwardedRef, forwardRef, memo } from 'react';
+import styled from 'styled-components';
+import { SketchPattern } from '../utils/sketchPattern';
+import { FillPreviewBackground } from './FillPreviewBackground';
+
+const Container = styled.button<{ flex?: CSSProperties['flex'] }>(
+  ({ theme, flex }) => ({
+    outline: 'none',
+    padding: 0,
+    width: '50px',
+    height: '27px',
+    borderRadius: '4px',
+    overflow: 'hidden',
+    border: 'none',
+    boxShadow: `0 0 0 1px ${theme.colors.divider} inset`,
+    background: 'transparent',
+    '&:focus': {
+      boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`,
+    },
+    position: 'relative',
+    flex,
+  }),
+);
+
+interface Props {
+  id?: string;
+  value?: Sketch.Color | Sketch.Gradient | SketchPattern;
+  flex?: CSSProperties['flex'];
+}
+
+export const FillInputField = memo(
+  forwardRef(function FillInputField(
+    { id, value, ...rest }: Props,
+    ref: ForwardedRef<HTMLButtonElement>,
+  ) {
+    return (
+      <Container ref={ref} id={id} {...rest}>
+        <FillPreviewBackground value={value} />
+      </Container>
+    );
+  }),
+);