@noya-app/noya-designsystem 0.0.2

package/src/components/Toast.tsx

@@ -0,0 +1,86 @@
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+import { IconButton } from './IconButton';
+
+const ToastViewport = styled(ToastPrimitive.Viewport)({
+  position: 'fixed',
+  bottom: 0,
+  right: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  padding: 20,
+  gap: 10,
+  minWidth: 200,
+  maxWidth: '100vw',
+  margin: 0,
+  listStyle: 'none',
+  zIndex: 2147483647,
+  outline: 'none',
+});
+
+const ToastRoot = styled(ToastPrimitive.Root)(({ theme }) => ({
+  borderRadius: 4,
+  fontSize: 14,
+  backgroundColor: theme.colors.popover.background,
+  boxShadow: '0 2px 4px rgba(0,0,0,0.2), 0 0 12px rgba(0,0,0,0.1)',
+  color: theme.colors.textMuted,
+
+  padding: '8px 10px',
+  display: 'grid',
+  gridTemplateAreas: '"title action" "description action"',
+  gridTemplateColumns: 'auto max-content',
+  columnGap: 10,
+  alignItems: 'center',
+}));
+
+const ToastTitle = styled(ToastPrimitive.Title)(({ theme }) => ({
+  gridArea: 'title',
+  marginBottom: 5,
+  ...theme.textStyles.label,
+  fontWeight: 'bold',
+  color: theme.colors.text,
+}));
+
+const ToastDescription = styled(ToastPrimitive.Description)(({ theme }) => ({
+  gridArea: 'description',
+  ...theme.textStyles.small,
+  color: theme.colors.textMuted,
+}));
+
+const ToastAction = styled(ToastPrimitive.Action)({
+  gridArea: 'action',
+});
+
+export const Toast = ({
+  title,
+  content,
+  children,
+  ...props
+}: {
+  title?: string;
+  content: ReactNode;
+  children?: React.ReactNode;
+}) => {
+  return (
+    <ToastRoot {...props}>
+      {title && <ToastTitle>{title}</ToastTitle>}
+      <ToastDescription>{content}</ToastDescription>
+      {children && (
+        <ToastAction asChild altText="">
+          {children}
+        </ToastAction>
+      )}
+      <ToastPrimitive.Close aria-label="Close" asChild>
+        <IconButton iconName="Cross1Icon" />
+      </ToastPrimitive.Close>
+    </ToastRoot>
+  );
+};
+
+export const ToastProvider = ({ children }: { children: React.ReactNode }) => (
+  <ToastPrimitive.Provider>
+    {children}
+    <ToastViewport />
+  </ToastPrimitive.Provider>
+);

package/src/components/Tooltip.tsx

@@ -0,0 +1,43 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import React, { memo, ReactNode } from 'react';
+import styled from 'styled-components';
+
+// const Arrow = styled(TooltipPrimitive.Arrow)(({ theme }) => ({
+//   fill: theme.colors.popover.background,
+// }));
+
+const Content = styled(TooltipPrimitive.Content)(({ theme }) => ({
+  ...theme.textStyles.small,
+  color: theme.colors.text,
+  borderRadius: 3,
+  padding: `${theme.sizes.spacing.small}px ${theme.sizes.spacing.medium}px`,
+  backgroundColor: theme.colors.popover.background,
+  boxShadow: '0 2px 4px rgba(0,0,0,0.2), 0 0 12px rgba(0,0,0,0.1)',
+  border: `1px solid ${theme.colors.dividerStrong}`,
+}));
+
+interface Props {
+  children: ReactNode;
+  content: ReactNode;
+}
+
+export const Tooltip = memo(function Tooltip({ children, content }: Props) {
+  return (
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root>
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>
+          <Content
+            side="bottom"
+            align="center"
+            sideOffset={2}
+            collisionPadding={8}
+          >
+            {content}
+            {/* <Arrow /> */}
+          </Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+});

package/src/components/TreeView.tsx

@@ -0,0 +1,85 @@
+import React, {
+  ForwardedRef,
+  forwardRef,
+  memo,
+  ReactNode,
+  useCallback,
+  useContext,
+} from 'react';
+import { IconButton } from './IconButton';
+import { ListView } from './ListView';
+import { Spacer } from './Spacer';
+
+/* ----------------------------------------------------------------------------
+ * Row
+ * ------------------------------------------------------------------------- */
+
+type TreeRowBaseProps = {
+  icon?: ReactNode;
+  expanded?: boolean;
+  onClickChevron?: ({ altKey }: { altKey: boolean }) => void;
+};
+
+type TreeViewRowProps<MenuItemType extends string> =
+  ListView.RowProps<MenuItemType> & TreeRowBaseProps;
+
+const TreeRow = forwardRef(function TreeRow<MenuItemType extends string>(
+  {
+    icon,
+    expanded,
+    onClickChevron,
+    children,
+    ...rest
+  }: TreeViewRowProps<MenuItemType>,
+  forwardedRef: ForwardedRef<HTMLLIElement>,
+) {
+  const { expandable } = useContext(ListView.RowContext);
+
+  const handleClickChevron = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      onClickChevron?.({ altKey: event.altKey });
+    },
+    [onClickChevron],
+  );
+
+  return (
+    <ListView.Row ref={forwardedRef} {...rest}>
+      {expandable && (
+        <>
+          {expanded === undefined ? (
+            <Spacer.Horizontal size={19} />
+          ) : (
+            <IconButton
+              iconName={expanded ? 'ChevronDownIcon' : 'ChevronRightIcon'}
+              onClick={handleClickChevron}
+              selected={rest.selected}
+            />
+          )}
+          <Spacer.Horizontal size={6} />
+        </>
+      )}
+      {icon && (
+        <>
+          {icon}
+          <Spacer.Horizontal size={10} />
+        </>
+      )}
+      {children}
+    </ListView.Row>
+  );
+});
+
+/* ----------------------------------------------------------------------------
+ * Root
+ * ------------------------------------------------------------------------- */
+
+export namespace TreeView {
+  export const Root = ListView.Root;
+  export const RowTitle = ListView.RowTitle;
+  export const EditableRowTitle = ListView.EditableRowTitle;
+  export const Row = memo(TreeRow);
+  export type ClickInfo = ListView.ClickInfo;
+  export type RowProps<MenuItemType extends string> =
+    TreeViewRowProps<MenuItemType>;
+}

package/src/components/internal/Menu.tsx

@@ -0,0 +1,222 @@
+import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
+import React, { memo, ReactElement, ReactNode } from "react";
+import styled, { CSSObject } from "styled-components";
+import { useDesignSystemConfiguration } from "../../contexts/DesignSystemConfiguration";
+import { Theme } from "../../theme";
+import withSeparatorElements from "../../utils/withSeparatorElements";
+
+export const SEPARATOR_ITEM = "separator";
+
+// From electron
+export type MenuItemRole =
+  | "undo"
+  | "redo"
+  | "cut"
+  | "copy"
+  | "paste"
+  | "pasteAndMatchStyle"
+  | "delete"
+  | "selectAll"
+  | "reload"
+  | "forceReload"
+  | "toggleDevTools"
+  | "resetZoom"
+  | "zoomIn"
+  | "zoomOut"
+  | "toggleSpellChecker"
+  | "togglefullscreen"
+  | "window"
+  | "minimize"
+  | "close"
+  | "help"
+  | "about"
+  | "services"
+  | "hide"
+  | "hideOthers"
+  | "unhide"
+  | "quit"
+  | "showSubstitutions"
+  | "toggleSmartQuotes"
+  | "toggleSmartDashes"
+  | "toggleTextReplacement"
+  | "startSpeaking"
+  | "stopSpeaking"
+  | "zoom"
+  | "front"
+  | "appMenu"
+  | "fileMenu"
+  | "editMenu"
+  | "viewMenu"
+  | "shareMenu"
+  | "recentDocuments"
+  | "toggleTabBar"
+  | "selectNextTab"
+  | "selectPreviousTab"
+  | "mergeAllWindows"
+  | "clearRecentDocuments"
+  | "moveTabToNewWindow"
+  | "windowMenu";
+
+export type RegularMenuItem<T extends string> = {
+  value?: T;
+  title: ReactNode;
+  shortcut?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  icon?: ReactElement;
+  items?: MenuItem<T>[];
+  role?: MenuItemRole;
+};
+
+export type MenuItem<T extends string> =
+  | typeof SEPARATOR_ITEM
+  | RegularMenuItem<T>;
+
+// Extract type T of RegularMenuItem<T> within MenuItem<T>
+export type ExtractMenuItemType<T> = T extends RegularMenuItem<infer U>
+  ? U
+  : never;
+
+export const CHECKBOX_WIDTH = 15;
+export const CHECKBOX_RIGHT_INSET = 3;
+
+export const styles = {
+  separatorStyle: ({ theme }: { theme: Theme }): CSSObject => ({
+    height: "1px",
+    backgroundColor: theme.colors.divider,
+    margin: "4px 8px",
+  }),
+
+  itemStyle: ({
+    theme,
+    disabled,
+  }: {
+    theme: Theme;
+    disabled?: boolean;
+  }): CSSObject => ({
+    ...theme.textStyles.small,
+    fontWeight: 500,
+    fontSize: "0.8rem",
+    flex: "0 0 auto",
+    userSelect: "none",
+    cursor: "pointer",
+    borderRadius: "3px",
+    padding: "4px 8px",
+    ...(disabled && {
+      color: theme.colors.textDisabled,
+    }),
+    "&:focus": {
+      outline: "none",
+      color: "white",
+      backgroundColor: theme.colors.primary,
+
+      "& kbd": {
+        color: "white",
+      },
+    },
+    "&:active": {
+      background: theme.colors.primaryLight,
+    },
+    display: "flex",
+    alignItems: "center",
+  }),
+
+  itemIndicatorStyle: {
+    display: "flex",
+    alignItems: "center",
+    left: `-${CHECKBOX_WIDTH / 2}px`,
+    position: "relative",
+    marginRight: `-${CHECKBOX_RIGHT_INSET}px`,
+  } as CSSObject,
+
+  contentStyle: ({
+    theme,
+    scrollable,
+  }: {
+    theme: Theme;
+    scrollable?: boolean;
+  }): CSSObject => ({
+    borderRadius: 4,
+    backgroundColor: theme.colors.popover.background,
+    color: theme.colors.text,
+    boxShadow: "0 2px 4px rgba(0,0,0,0.2), 0 0 12px rgba(0,0,0,0.1)",
+    padding: "4px",
+    border: `1px solid ${theme.colors.popover.divider}`,
+    zIndex: 1000,
+    ...(scrollable && {
+      height: "100%",
+      maxHeight: "calc(100vh - 80px)",
+      overflow: "hidden auto",
+    }),
+  }),
+};
+
+function getKeyboardShortcuts<T extends string>(
+  item: MenuItem<T>
+): [string, T][] {
+  if (item === SEPARATOR_ITEM) return [];
+
+  if (item.items) return item.items.flatMap(getKeyboardShortcuts);
+
+  if (item.disabled || !item.value || !item.shortcut) return [];
+
+  return [[item.shortcut, item.value]];
+}
+
+export function getKeyboardShortcutsForMenuItems<T extends string>(
+  menuItems: MenuItem<T>[],
+  onSelect: (type: T) => void
+): Record<string, () => void> {
+  return Object.fromEntries(
+    menuItems
+      .flatMap(getKeyboardShortcuts)
+      .map(([key, value]) => [key, () => onSelect(value)])
+  );
+}
+
+const ShortcutElement = styled.kbd(
+  ({
+    theme,
+    fixedWidth,
+  }: {
+    theme: Theme;
+    fixedWidth?: boolean;
+  }): CSSObject => ({
+    ...theme.textStyles.small,
+    color: theme.colors.textDisabled,
+    ...(fixedWidth && {
+      width: "0.9rem",
+      textAlign: "center",
+    }),
+  })
+);
+
+export const KeyboardShortcut = memo(function KeyboardShortcut({
+  shortcut,
+}: {
+  shortcut: string;
+}) {
+  const platform = useDesignSystemConfiguration().platform;
+
+  const { keys, separator } = getShortcutDisplayParts(shortcut, platform);
+
+  const keyElements = keys.map((key) => (
+    <ShortcutElement
+      key={key}
+      fixedWidth={platform === "mac" && key.length === 1}
+    >
+      {key}
+    </ShortcutElement>
+  ));
+
+  return (
+    <>
+      {separator
+        ? withSeparatorElements(
+            keyElements,
+            <ShortcutElement>{separator}</ShortcutElement>
+          )
+        : keyElements}
+    </>
+  );
+});