@noya-app/noya-designsystem 0.0.2

package/src/components/Popover.tsx

@@ -0,0 +1,113 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import React, { ComponentProps } from 'react';
+import styled from 'styled-components';
+import { IconButton } from './IconButton';
+
+type PopoverVariant = 'normal' | 'large';
+
+const ContentElement = styled(PopoverPrimitive.Content)<{
+  variant?: PopoverVariant;
+}>(({ theme, variant }) => ({
+  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)',
+  maxHeight: '600px',
+  overflowY: 'auto',
+  color: theme.colors.textMuted,
+  ...(variant === 'large' && { width: '680px' }),
+  ...(variant === 'normal' && { width: '240px' }),
+  zIndex: 1000,
+}));
+
+const ArrowElement = styled(PopoverPrimitive.Arrow)(({ theme }) => ({
+  fill: theme.colors.popover.background,
+}));
+
+const PopoverClose = styled(PopoverPrimitive.Close)(({ theme }) => ({
+  all: 'unset',
+  fontFamily: 'inherit',
+  borderRadius: '100%',
+  height: 25,
+  width: 25,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  position: 'absolute',
+  top: 5,
+  right: 5,
+}));
+
+interface Props
+  extends Pick<
+    ComponentProps<typeof PopoverPrimitive['Content']>,
+    | 'onOpenAutoFocus'
+    | 'onCloseAutoFocus'
+    | 'onPointerDownOutside'
+    | 'onInteractOutside'
+    | 'onFocusOutside'
+    | 'side'
+  > {
+  children: React.ReactNode;
+  trigger: React.ReactNode;
+  variant?: PopoverVariant;
+  closable?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  sideOffset?: number;
+  onClickClose?: () => void;
+  showArrow?: boolean;
+}
+
+export function Popover({
+  children,
+  trigger,
+  variant,
+  closable,
+  open,
+  side,
+  sideOffset = 4,
+  showArrow = true,
+  onOpenChange,
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  onPointerDownOutside,
+  onInteractOutside,
+  onFocusOutside,
+  onClickClose,
+}: Props) {
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <ContentElement
+          variant={variant}
+          side={side}
+          align="center"
+          sideOffset={sideOffset}
+          onOpenAutoFocus={onOpenAutoFocus}
+          onCloseAutoFocus={onCloseAutoFocus}
+          onInteractOutside={onInteractOutside}
+          onFocusOutside={onFocusOutside}
+          onPointerDownOutside={onPointerDownOutside}
+          collisionPadding={8}
+          // Don't propagate pointer down events to the canvas
+          onPointerDown={(event) => {
+            event.stopPropagation();
+          }}
+          onWheel={(event) => {
+            event.stopPropagation();
+          }}
+        >
+          {children}
+          {showArrow && <ArrowElement />}
+          {closable && (
+            <PopoverClose>
+              <IconButton iconName="Cross2Icon" onClick={onClickClose} />
+            </PopoverClose>
+          )}
+        </ContentElement>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+}

package/src/components/Progress.tsx

@@ -0,0 +1,57 @@
+import { clamp } from '@noya-app/noya-utils';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import React, { CSSProperties } from 'react';
+import styled from 'styled-components';
+
+type ProgressVariant = 'normal' | 'warning' | 'primary' | 'secondary';
+
+export function Progress({
+  value,
+  width,
+  height = 5,
+  flex,
+  variant = 'normal',
+}: {
+  value: number;
+  height?: CSSProperties['height'];
+  width?: CSSProperties['width'];
+  flex?: CSSProperties['flex'];
+  variant?: ProgressVariant;
+}) {
+  const clampedValue = clamp(value, 0, 100);
+
+  return (
+    <ProgressRoot value={clampedValue} style={{ width, flex, height }}>
+      <ProgressIndicator
+        variant={variant}
+        style={{ transform: `translateX(-${100 - clampedValue}%)` }}
+      />
+    </ProgressRoot>
+  );
+}
+
+const ProgressRoot = styled(ProgressPrimitive.Root)(({ theme }) => ({
+  position: 'relative',
+  overflow: 'hidden',
+  background: theme.colors.inputBackground,
+
+  // Fix overflow clipping in Safari
+  // https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0
+  transform: 'translateZ(0)',
+}));
+
+const ProgressIndicator = styled(ProgressPrimitive.Indicator)<{
+  variant: ProgressVariant;
+}>(({ theme, variant }) => ({
+  backgroundColor:
+    variant === 'primary'
+      ? theme.colors.primary
+      : variant === 'secondary'
+      ? theme.colors.secondary
+      : variant === 'warning'
+      ? theme.colors.warning
+      : theme.colors.text,
+  width: '100%',
+  height: '100%',
+  transition: 'transform 660ms cubic-bezier(0.65, 0, 0.35, 1)',
+}));

package/src/components/RadioGroup.tsx

@@ -0,0 +1,163 @@
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import React, {
+  ComponentProps,
+  createContext,
+  forwardRef,
+  memo,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+} from 'react';
+import styled from 'styled-components';
+import { Tooltip } from './Tooltip';
+
+type RadioGroupColorScheme = 'primary' | 'secondary';
+
+const ignoredProps = new Set(['colorScheme']);
+
+const StyledRoot = styled(ToggleGroupPrimitive.Root).withConfig({
+  shouldForwardProp: (prop) => !ignoredProps.has(prop),
+})<{
+  colorScheme?: RadioGroupColorScheme;
+}>(({ theme, colorScheme }) => ({
+  appearance: 'none',
+  width: '0px', // Reset intrinsic width
+  flex: '1 1 0px',
+  position: 'relative',
+  border: '0',
+  outline: 'none',
+  minWidth: '0',
+  textAlign: 'left',
+  alignSelf: 'stretch',
+  borderRadius: '4px',
+  background: theme.colors.inputBackground,
+  '&:focus': {
+    boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${
+      theme.colors[colorScheme ?? 'primary']
+    }`,
+  },
+  display: 'flex',
+  alignItems: 'stretch',
+  minHeight: '27px',
+  padding: colorScheme === undefined ? '2px' : 0,
+}));
+
+const StyledItem = styled(ToggleGroupPrimitive.Item).withConfig({
+  shouldForwardProp: (prop) => !ignoredProps.has(prop),
+})<{
+  colorScheme?: RadioGroupColorScheme;
+}>(({ theme, colorScheme }) => ({
+  position: 'relative',
+  flex: '1 1 0',
+  appearance: 'none',
+  border: 'none',
+  background: 'none',
+  color: 'rgb(139, 139, 139)',
+  padding: 0,
+  margin: 0,
+  borderRadius: '4px',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  verticalAlign: 'middle',
+  '&[aria-checked="true"]': {
+    backgroundColor: colorScheme
+      ? theme.colors[colorScheme]
+      : theme.colors.radioGroup.background,
+    color: colorScheme ? theme.colors.radioGroup.background : theme.colors.text,
+    boxShadow: colorScheme ? undefined : `0 1px 1px rgba(0,0,0,0.1)`,
+  },
+  '&:focus': {
+    outline: 'none',
+    boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${
+      theme.colors[colorScheme ?? 'primary']
+    }`,
+  },
+}));
+
+interface ItemProps {
+  value: string;
+  tooltip?: ReactNode;
+  children: ReactNode;
+  disabled?: boolean;
+}
+
+const ToggleGroupItem = forwardRef(function ToggleGroupItem(
+  { value, tooltip, children, disabled = false }: ItemProps,
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { colorScheme } = useContext(RadioGroupContext);
+
+  const itemElement = (
+    <StyledItem
+      ref={forwardedRef}
+      value={value}
+      disabled={disabled}
+      colorScheme={colorScheme}
+    >
+      {children}
+    </StyledItem>
+  );
+
+  return tooltip ? (
+    <Tooltip content={tooltip}>{itemElement}</Tooltip>
+  ) : (
+    itemElement
+  );
+});
+
+type RadioGroupContextValue = {
+  colorScheme?: RadioGroupColorScheme;
+};
+
+const RadioGroupContext = createContext<RadioGroupContextValue>({
+  colorScheme: 'primary',
+});
+
+interface Props {
+  id?: string;
+  value?: string;
+  onValueChange?: ComponentProps<typeof StyledRoot>['onValueChange'];
+  colorScheme?: RadioGroupColorScheme;
+  allowEmpty?: boolean;
+  children: ReactNode;
+}
+
+function ToggleGroupRoot({
+  id,
+  value,
+  onValueChange,
+  colorScheme,
+  allowEmpty,
+  children,
+}: Props) {
+  const contextValue = useMemo(() => ({ colorScheme }), [colorScheme]);
+
+  const handleValueChange = useCallback(
+    (value: string) => {
+      if (!allowEmpty && !value) return;
+      onValueChange?.(value);
+    },
+    [allowEmpty, onValueChange],
+  );
+
+  return (
+    <RadioGroupContext.Provider value={contextValue}>
+      <StyledRoot
+        id={id}
+        type="single"
+        value={value}
+        colorScheme={colorScheme}
+        onValueChange={handleValueChange}
+      >
+        {children}
+      </StyledRoot>
+    </RadioGroupContext.Provider>
+  );
+}
+
+export namespace RadioGroup {
+  export const Root = memo(ToggleGroupRoot);
+  export const Item = memo(ToggleGroupItem);
+}

package/src/components/ScrollArea.tsx

@@ -0,0 +1,70 @@
+import * as RadixScrollArea from "@radix-ui/react-scroll-area";
+import React, { memo, ReactNode, useCallback, useState } from "react";
+import styled from "styled-components";
+
+const SCROLLBAR_SIZE = 10;
+
+const StyledScrollArea = styled(RadixScrollArea.Root)({
+  width: "100%",
+  height: "100%",
+});
+
+const StyledViewport = styled(RadixScrollArea.Viewport)({
+  width: "100%",
+  height: "100%",
+  // Override the `display: table` in the child, since this allows
+  // elements to expand beyond the width of the viewport.
+  "& > div": {
+    display: "block !important",
+  },
+});
+
+const StyledScrollbar = styled(RadixScrollArea.Scrollbar)({
+  display: "flex",
+  padding: "3px",
+  '&[data-orientation="vertical"]': {
+    width: SCROLLBAR_SIZE,
+  },
+});
+
+const StyledThumb = styled(RadixScrollArea.Thumb)(({ theme }) => ({
+  flex: 1,
+  borderRadius: SCROLLBAR_SIZE,
+  backgroundColor: theme.colors.scrollbar,
+}));
+
+const Container = styled.div({
+  flex: "1 1 0px",
+  minHeight: 0,
+});
+
+interface Props {
+  children?: ReactNode | ((scrollElementRef: HTMLDivElement) => ReactNode);
+}
+
+export const ScrollArea = memo(function ScrollArea({ children }: Props) {
+  const [scrollElementRef, setScrollElementRef] =
+    useState<HTMLDivElement | null>(null);
+
+  return (
+    <Container>
+      <StyledScrollArea>
+        <StyledViewport
+          ref={useCallback(
+            (ref: HTMLDivElement | null) => setScrollElementRef(ref),
+            []
+          )}
+        >
+          {typeof children === "function"
+            ? scrollElementRef
+              ? children(scrollElementRef)
+              : null
+            : children}
+        </StyledViewport>
+        <StyledScrollbar orientation="vertical" className="scroll-component">
+          <StyledThumb className="scroll-component" />
+        </StyledScrollbar>
+      </StyledScrollArea>
+    </Container>
+  );
+});

package/src/components/Select.tsx

@@ -0,0 +1,152 @@
+import { memoize } from "@noya-app/noya-utils";
+import React, {
+  createContext,
+  CSSProperties,
+  memo,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+import styled from "styled-components";
+
+type SelectContextValue = {
+  addListener: (value: string, listener: () => void) => void;
+  removeListener: (value: string) => void;
+};
+
+const SelectContext = createContext<SelectContextValue | undefined>(undefined);
+
+interface SelectOptionProps<T extends string> {
+  value: T;
+  title?: string;
+  onSelect?: () => void;
+}
+
+export const SelectOption = memo(function SelectOption<T extends string>({
+  value,
+  title,
+  onSelect,
+}: SelectOptionProps<T>) {
+  const { addListener, removeListener } = useContext(SelectContext)!;
+
+  useEffect(() => {
+    if (!onSelect) return;
+
+    addListener(value, onSelect);
+
+    return () => removeListener(value);
+  }, [addListener, onSelect, removeListener, value]);
+
+  return <option value={value}>{title ?? value}</option>;
+});
+
+const createChevronSVGString = memoize(
+  (color: string) => `
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='${color}'>
+    <path d='M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z'></path>
+  </svg>
+`
+);
+
+const SelectElement = styled.select<{ flex: CSSProperties["flex"] }>(
+  ({ theme, flex }) => ({
+    appearance: "none",
+    ...theme.textStyles.small,
+    color: theme.colors.text,
+    width: "0px", // Reset intrinsic width
+    flex: flex ?? "1 1 0px",
+    position: "relative",
+    border: "0",
+    outline: "none",
+    minWidth: "0",
+    textAlign: "left",
+    alignSelf: "stretch",
+    borderRadius: "4px",
+    paddingTop: "4px",
+    paddingBottom: "4px",
+    paddingLeft: "8px",
+    paddingRight: "23px",
+    background: [
+      `calc(100% - 6px) / 15px url("data:image/svg+xml;utf8,${createChevronSVGString(
+        theme.colors.icon
+      )}") no-repeat`,
+      theme.colors.inputBackground,
+    ].join(","),
+    "&:focus": {
+      boxShadow: `0 0 0 2px ${theme.colors.primary}`,
+    },
+  })
+);
+
+type ChildrenProps<T> =
+  | {
+      children: ReactNode;
+    }
+  | {
+      options: T[];
+      getTitle?: (option: T, index: number) => string;
+      onChange: (value: T) => void;
+    };
+
+type Props<T extends string> = ChildrenProps<T> & {
+  id: string;
+  flex?: CSSProperties["flex"];
+  value: T;
+};
+
+export const Select = memo(function Select<T extends string>({
+  id,
+  flex,
+  value,
+  ...rest
+}: Props<T>) {
+  const options = "options" in rest ? rest.options : undefined;
+  const getTitle = "options" in rest ? rest.getTitle : undefined;
+  const onChange = "options" in rest ? rest.onChange : undefined;
+  const children = "options" in rest ? undefined : rest.children;
+
+  const optionElements = useMemo(
+    () =>
+      options
+        ? options.map((option, index) => (
+            <SelectOption
+              key={option}
+              value={option}
+              title={getTitle?.(option, index)}
+              onSelect={() => onChange?.(option)}
+            />
+          ))
+        : children,
+    [children, getTitle, onChange, options]
+  );
+
+  const listeners = useRef<Map<string, () => void>>(new Map());
+
+  const contextValue: SelectContextValue = useMemo(
+    () => ({
+      addListener: (value, listener) => listeners.current.set(value, listener),
+      removeListener: (value) => listeners.current.delete(value),
+    }),
+    []
+  );
+
+  return (
+    <SelectContext.Provider value={contextValue}>
+      <SelectElement
+        id={id}
+        flex={flex}
+        value={value}
+        onChange={useCallback(
+          (event: React.ChangeEvent<HTMLSelectElement>) =>
+            listeners.current.get(event.target.value)?.(),
+          [listeners]
+        )}
+      >
+        {optionElements}
+      </SelectElement>
+    </SelectContext.Provider>
+  );
+});

package/src/components/Slider.tsx

@@ -0,0 +1,82 @@
+import * as RadixSlider from '@radix-ui/react-slider';
+import React, { useCallback, useMemo } from 'react';
+import styled from 'styled-components';
+
+const StyledSlider = styled(RadixSlider.Root)({
+  flex: '1',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  userSelect: 'none',
+  touchAction: 'none',
+  height: '16px',
+});
+
+const StyledTrack = styled(RadixSlider.Track)(({ theme }) => ({
+  backgroundColor: theme.colors.divider,
+  position: 'relative',
+  flexGrow: 1,
+  height: '2px',
+}));
+
+const StyledRange = styled(RadixSlider.Range)(({ theme }) => ({
+  position: 'absolute',
+  backgroundColor: theme.colors.primary,
+  borderRadius: '9999px',
+  height: '100%',
+}));
+
+const StyledThumb = styled(RadixSlider.Thumb)(({ theme }) => ({
+  display: 'block',
+  width: '12px',
+  height: '12px',
+  backgroundColor: theme.colors.slider.background,
+  border: `1px solid ${theme.colors.slider.border}`,
+  borderRadius: '20px',
+  ':focus': {
+    outline: 'none',
+  },
+}));
+
+interface Props {
+  id?: string;
+  value: number;
+  onValueChange: (value: number) => void;
+  min: number;
+  max: number;
+}
+
+export const Slider = function Slider({
+  id,
+  value,
+  onValueChange,
+  min,
+  max,
+}: Props) {
+  const arrayValue = useMemo(
+    () => [Math.min(Math.max(value, min), max)],
+    [value, min, max],
+  );
+
+  const handleValueChange = useCallback(
+    (arrayValue: number[]) => {
+      onValueChange(arrayValue[0]);
+    },
+    [onValueChange],
+  );
+
+  return (
+    <StyledSlider
+      min={min}
+      max={max}
+      id={id}
+      value={arrayValue}
+      onValueChange={handleValueChange}
+    >
+      <StyledTrack>
+        <StyledRange />
+      </StyledTrack>
+      <StyledThumb />
+    </StyledSlider>
+  );
+};