@noya-app/noya-designsystem 0.1.31 → 0.1.32

package/src/components/ListView.tsx

@@ -7,6 +7,7 @@ import React, {
   CSSProperties,
   ForwardedRef,
   forwardRef,
+  HTMLAttributes,
   isValidElement,
   memo,
   ReactElement,
@@ -21,11 +22,10 @@ import React, {
 } from "react";
 import { WindowScroller, WindowScrollerChildProps } from "react-virtualized";
 import { ListChildComponentProps, VariableSizeList } from "react-window";
-import styled from "styled-components";
 import { mergeEventHandlers } from "../hooks/mergeEventHandlers";
 import { useHover } from "../hooks/useHover";
 import { ContextMenu } from "./ContextMenu";
-import { InputField } from "./InputField";
+import { InputField, InputFieldInputProps } from "./InputField";
 import { MenuItem } from "./internal/Menu";
 import { ScrollArea } from "./ScrollArea";
 import {
@@ -95,22 +95,38 @@ const ListRowContext = createContext<ListRowContextValue>({
  * RowTitle
  * ------------------------------------------------------------------------- */
 
-const ListViewRowTitle = styled.span(({ theme }) => ({
-  flex: "1 1 0",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "pre",
-}));
+const ListViewRowTitle = ({
+  className,
+  children,
+  ...props
+}: {
+  className?: string;
+  children: React.ReactNode;
+} & HTMLAttributes<HTMLSpanElement>) => (
+  <span
+    className={`flex-1 overflow-hidden text-ellipsis whitespace-pre ${className ?? ""}`}
+    {...props}
+  >
+    {children}
+  </span>
+);
 
 /* ----------------------------------------------------------------------------
  * EditableRowTitle
  * ------------------------------------------------------------------------- */
 
-const ListViewEditableRowTitleElement = styled(InputField.Input)(
-  ({ theme }) => ({
-    background: theme.colors.listView.editingBackground,
-  })
-) as typeof InputField.Input;
+const ListViewEditableRowTitleElement = forwardRef(
+  (
+    { className, ...props }: InputFieldInputProps,
+    forwardedRef: ForwardedRef<HTMLInputElement>
+  ) => (
+    <InputField.Input
+      ref={forwardedRef}
+      className={`bg-listview-editing-background ${className ?? ""}`}
+      {...props}
+    />
+  )
+);
 
 export interface EditableRowProps {
   value: string;
@@ -164,147 +180,216 @@ function getPositionMargin(marginType: ListRowMarginType) {
  * Row
  * ------------------------------------------------------------------------- */
 
-const RowContainer = styled.div<{
-  $marginType: ListRowMarginType;
-  $selected: boolean;
-  $selectedPosition: ListRowPosition;
-  $disabled: boolean;
-  $hovered: boolean;
-  $variant: ListViewVariant;
-  $divider: boolean;
-  $isSectionHeader: boolean;
-  $showsActiveState: boolean;
-  $sectionHeaderVariant: ListViewSectionHeaderVariant;
-  $colorScheme: ListColorScheme;
-  $gap: number;
-  $backgroundColor?: CSSProperties["backgroundColor"];
-}>(
-  ({
-    theme,
-    $marginType,
-    $selected,
-    $selectedPosition,
-    $disabled,
-    $hovered,
-    $variant,
-    $divider,
-    $isSectionHeader,
-    $showsActiveState,
-    $sectionHeaderVariant,
-    $colorScheme,
-    $gap,
-    $backgroundColor,
-  }) => {
+const theme = {
+  colors: {
+    textMuted: "var(--text-muted)",
+    listView: {
+      raisedBackground: "var(--listview-raised-background)",
+    },
+    secondary: "var(--secondary)",
+    primary: "var(--primary)",
+    textDisabled: "var(--text-disabled)",
+    primaryLight: "var(--primary-light)",
+    secondaryLight: "var(--secondary-light)",
+    activeBackground: "var(--active-background)",
+    dividerSubtle: "var(--divider-subtle)",
+  },
+};
+
+const RowContainer = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    $marginType: ListRowMarginType;
+    $selected: boolean;
+    $selectedPosition: ListRowPosition;
+    $disabled: boolean;
+    $hovered: boolean;
+    $variant: ListViewVariant;
+    $divider: boolean;
+    $isSectionHeader: boolean;
+    $showsActiveState: boolean;
+    $sectionHeaderVariant: ListViewSectionHeaderVariant;
+    $colorScheme: ListColorScheme;
+    $gap: number;
+    $backgroundColor?: CSSProperties["backgroundColor"];
+  }
+>(
+  (
+    {
+      className,
+      $marginType,
+      $selected,
+      $selectedPosition,
+      $disabled,
+      $hovered,
+      $variant,
+      $divider,
+      $isSectionHeader,
+      $showsActiveState,
+      $sectionHeaderVariant,
+      $colorScheme,
+      $gap,
+      $backgroundColor,
+      style,
+      ...props
+    },
+    ref
+  ) => {
     const margin = getPositionMargin($marginType);
 
-    return {
-      ...($isSectionHeader && $sectionHeaderVariant === "label"
-        ? theme.textStyles.label
-        : theme.textStyles.small),
-      ...($isSectionHeader && { fontWeight: 500 }),
-      gap: $gap,
-      flex: "0 0 auto",
-      userSelect: "none",
-      cursor: "default",
-      ...($variant !== "bare" && {
-        paddingTop: "6px",
-        paddingRight: "12px",
-        paddingBottom: "6px",
-        paddingLeft: "12px",
-        ...($variant === "padded" && {
-          borderRadius: "2px",
-          marginLeft: "8px",
-          marginRight: "8px",
-          marginTop: `${margin.top}px`,
-          marginBottom: `${margin.bottom}px`,
-        }),
-      }),
-      color: theme.colors.textMuted,
-      ...($isSectionHeader && {
-        backgroundColor: theme.colors.listView.raisedBackground,
-        ...($sectionHeaderVariant === "label" && {
-          color: theme.colors.textDisabled,
-        }),
-      }),
-      ...($disabled && {
-        color: theme.colors.textDisabled,
-      }),
-      ...($selected && {
-        color: "white",
-        backgroundColor: theme.colors[$colorScheme],
-      }),
-      display: "flex",
-      alignItems: "center",
-      ...($selected &&
-        !$isSectionHeader &&
-        ($selectedPosition === "middle" || $selectedPosition === "last") && {
-          borderTopRightRadius: "0px",
-          borderTopLeftRadius: "0px",
-        }),
-      ...($selected &&
-        !$isSectionHeader &&
-        ($selectedPosition === "middle" || $selectedPosition === "first") && {
-          borderBottomRightRadius: "0px",
-          borderBottomLeftRadius: "0px",
-        }),
-      position: "relative",
-      ...($hovered && {
-        boxShadow: `0 0 0 1px ${theme.colors[$colorScheme]} inset`,
-      }),
-      ...($showsActiveState && {
-        "&:active": {
-          backgroundColor: $selected
-            ? $colorScheme === "secondary"
-              ? theme.colors.secondaryLight
-              : theme.colors.primaryLight
-            : theme.colors.activeBackground,
-        },
-      }),
-      ...($divider && {
-        borderBottom: `1px solid ${theme.colors.dividerSubtle}`,
-      }),
-      ...($backgroundColor && {
-        backgroundColor: $backgroundColor,
-        "&:hover": {
-          backgroundColor: $backgroundColor,
-        },
-        "&:active": {
-          backgroundColor: $backgroundColor,
-        },
-      }),
-    };
+    return (
+      <div
+        ref={ref}
+        className={`${
+          $isSectionHeader && $sectionHeaderVariant === "label"
+            ? "font-sans text-label font-medium"
+            : "font-sans text-heading5 font-normal"
+        } ${className ?? ""}`}
+        style={{
+          ...($isSectionHeader && { fontWeight: 500 }),
+          gap: $gap,
+          flex: "0 0 auto",
+          userSelect: "none",
+          cursor: "default",
+          ...($variant !== "bare" && {
+            paddingTop: "6px",
+            paddingRight: "12px",
+            paddingBottom: "6px",
+            paddingLeft: "12px",
+            ...($variant === "padded" && {
+              borderRadius: "2px",
+              marginLeft: "8px",
+              marginRight: "8px",
+              marginTop: `${margin.top}px`,
+              marginBottom: `${margin.bottom}px`,
+            }),
+          }),
+          color: theme.colors.textMuted,
+          ...($isSectionHeader && {
+            backgroundColor: theme.colors.listView.raisedBackground,
+            ...($sectionHeaderVariant === "label" && {
+              color: theme.colors.textDisabled,
+            }),
+          }),
+          ...($disabled && {
+            color: theme.colors.textDisabled,
+          }),
+          ...($selected && {
+            color: "white",
+            backgroundColor: theme.colors[$colorScheme],
+          }),
+          display: "flex",
+          alignItems: "center",
+          ...($selected &&
+            !$isSectionHeader &&
+            ($selectedPosition === "middle" ||
+              $selectedPosition === "last") && {
+              borderTopRightRadius: "0px",
+              borderTopLeftRadius: "0px",
+            }),
+          ...($selected &&
+            !$isSectionHeader &&
+            ($selectedPosition === "middle" ||
+              $selectedPosition === "first") && {
+              borderBottomRightRadius: "0px",
+              borderBottomLeftRadius: "0px",
+            }),
+          position: "relative",
+          ...($hovered && {
+            boxShadow: `0 0 0 1px ${theme.colors[$colorScheme]} inset`,
+          }),
+          ...($showsActiveState && {
+            "&:active": {
+              backgroundColor: $selected
+                ? $colorScheme === "secondary"
+                  ? theme.colors.secondaryLight
+                  : theme.colors.primaryLight
+                : theme.colors.activeBackground,
+            },
+          }),
+          ...($divider && {
+            borderBottom: `1px solid ${theme.colors.dividerSubtle}`,
+          }),
+          ...($backgroundColor && {
+            backgroundColor: $backgroundColor,
+            "&:hover": {
+              backgroundColor: $backgroundColor,
+            },
+            "&:active": {
+              backgroundColor: $backgroundColor,
+            },
+          }),
+          ...style,
+        }}
+        {...props}
+      />
+    );
   }
 );
 
-const ListViewDragIndicatorElement = styled.div<{
-  $relativeDropPosition: RelativeDropPosition;
-  $gap: number;
-  $offsetLeft: number;
-  $colorScheme: ListColorScheme;
-}>(({ theme, $relativeDropPosition, $offsetLeft, $colorScheme, $gap }) => ({
-  zIndex: 1,
-  position: "absolute",
-  borderRadius: "3px",
-  ...($relativeDropPosition === "inside"
-    ? {
-        inset: 2,
-        boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${
-          $colorScheme === "secondary"
-            ? theme.colors.secondary
-            : theme.colors.dragOutline
-        }`,
-      }
-    : {
-        top: $relativeDropPosition === "above" ? -(3 + $gap / 2) : undefined,
-        bottom: $relativeDropPosition === "below" ? -(3 + $gap / 2) : undefined,
-        left: $offsetLeft,
-        right: 0,
-        height: 6,
-        background: theme.colors[$colorScheme],
-        border: `2px solid white`,
-        boxShadow: "0 0 2px rgba(0,0,0,0.5)",
-      }),
-}));
+const ListViewDragIndicatorElement = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    $relativeDropPosition: RelativeDropPosition;
+    $gap: number;
+    $offsetLeft: number;
+    $colorScheme: ListColorScheme;
+  }
+>(
+  (
+    {
+      className,
+      $relativeDropPosition,
+      $offsetLeft,
+      $colorScheme,
+      $gap,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        {...props}
+        className={className}
+        style={{
+          zIndex: 1000,
+          position: "absolute",
+          borderRadius: "3px",
+          ...($relativeDropPosition === "inside"
+            ? {
+                inset: 2,
+                boxShadow: `0 0 0 1px var(--sidebar-background), 0 0 0 3px ${
+                  $colorScheme === "secondary"
+                    ? "var(--secondary)"
+                    : "var(--drag-outline)"
+                }`,
+              }
+            : {
+                top:
+                  $relativeDropPosition === "above"
+                    ? -(3 + $gap / 2)
+                    : undefined,
+                bottom:
+                  $relativeDropPosition === "below"
+                    ? -(3 + $gap / 2)
+                    : undefined,
+                left: $offsetLeft,
+                right: 0,
+                height: 6,
+                backgroundColor:
+                  $colorScheme === "secondary"
+                    ? "var(--secondary)"
+                    : "var(--primary)",
+                border: `2px solid white`,
+                boxShadow: "0 0 2px rgba(0,0,0,0.5)",
+              }),
+          ...style,
+        }}
+      />
+    );}
+);
 
 interface ListViewClickInfo {
   shiftKey: boolean;
@@ -662,18 +747,6 @@ const VirtualizedList = memo(
  * Root
  * ------------------------------------------------------------------------- */
 
-const RootContainer = styled.div<{
-  $scrollable?: boolean;
-  $gap?: number;
-}>(({ theme, $scrollable, $gap }) => ({
-  flex: $scrollable ? "1 0 0" : "0 0 auto",
-  display: "flex",
-  flexDirection: "column",
-  flexWrap: "nowrap",
-  color: theme.colors.textMuted,
-  gap: $gap,
-}));
-
 type ListViewItemInfo = {
   isDragging: boolean;
 };
@@ -943,18 +1016,17 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
   );
 
   const draggingContextValue = useMemo(() => ({ indentation }), [indentation]);
+  const gapStyle = useMemo(() => ({ gap: `${gap}px` }), [gap]);
 
   return (
     <ListViewDraggingContext.Provider value={draggingContextValue}>
-      <RootContainer
+      <div
         id={id}
-        className={className}
-        style={style}
+        className={`flex flex-col text-text-muted ${scrollable ? "flex-1" : "flex-none"} ${className ?? ""}`}
+        style={{ ...gapStyle, ...style }}
         {...{
           [pressEventName]: handleClick,
         }}
-        $gap={gap}
-        $scrollable={scrollable}
       >
         {withScrollable((scrollElementRef: HTMLDivElement | null) =>
           withSortable(
@@ -973,7 +1045,7 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
             )
           )
         )}
-      </RootContainer>
+      </div>
     </ListViewDraggingContext.Provider>
   );
 });

package/src/components/Popover.tsx

@@ -1,42 +1,13 @@
 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 }) => ({
+const closeStyles: React.CSSProperties = {
   all: "unset",
   fontFamily: "inherit",
-  borderRadius: "100%",
-  height: 25,
-  width: 25,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  position: "absolute",
-  top: 5,
-  right: 5,
-}));
+};
+
+type PopoverVariant = "normal" | "large";
 
 interface Props
   extends Pick<
@@ -80,8 +51,8 @@ export function Popover({
     <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
       <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
       <PopoverPrimitive.Portal>
-        <ContentElement
-          variant={variant}
+        <PopoverPrimitive.Content
+          className={`rounded font-[14px] bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] max-h-[600px] overflow-y-auto text-text-muted z-[1000] ${variant === "large" ? "w-[680px]" : variant === "normal" ? "w-[240px]" : ""}`}
           side={side}
           align="center"
           sideOffset={sideOffset}
@@ -101,13 +72,18 @@ export function Popover({
           // }}
         >
           {children}
-          {showArrow && <ArrowElement />}
+          {showArrow && (
+            <PopoverPrimitive.Arrow className="fill-popover-background" />
+          )}
           {closable && (
-            <PopoverClose>
+            <PopoverPrimitive.Close
+              className="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center absolute top-[5px] right-[5px]"
+              style={closeStyles}
+            >
               <IconButton iconName="Cross2Icon" onClick={onClickClose} />
-            </PopoverClose>
+            </PopoverPrimitive.Close>
           )}
-        </ContentElement>
+        </PopoverPrimitive.Content>
       </PopoverPrimitive.Portal>
     </PopoverPrimitive.Root>
   );

package/src/components/Progress.tsx

@@ -1,57 +1,34 @@
-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';
+import { clamp } from "@noya-app/noya-utils";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import React, { useMemo } from "react";
+import { cn } from "../utils/tailwind";
 
-type ProgressVariant = 'normal' | 'warning' | 'primary' | 'secondary';
+type ProgressVariant = "normal" | "warning" | "primary" | "secondary";
 
 export function Progress({
   value,
-  width,
-  height = 5,
-  flex,
-  variant = 'normal',
+  variant = "normal",
+  className,
 }: {
   value: number;
-  height?: CSSProperties['height'];
-  width?: CSSProperties['width'];
-  flex?: CSSProperties['flex'];
   variant?: ProgressVariant;
+  className?: string;
 }) {
   const clampedValue = clamp(value, 0, 100);
+  const transformStyles = useMemo(() => ({
+    transform: `translateX(-${100 - clampedValue}%)`,
+  }), [clampedValue]);
 
   return (
-    <ProgressRoot value={clampedValue} style={{ width, flex, height }}>
-      <ProgressIndicator
-        variant={variant}
-        style={{ transform: `translateX(-${100 - clampedValue}%)` }}
+    <ProgressPrimitive.Root
+      className={`relative hidden bg-input-background h-[5px] ${className ?? ""}`}
+      style={{ transform: "translateZ(0)" }}
+      value={clampedValue}
+    >
+      <ProgressPrimitive.Indicator
+      className={cn(variant === 'primary' ? "bg-primary" : variant === 'secondary' ? "bg-secondary" : variant === 'warning' ? "bg-warning" : "bg-text", "transition-[transform_660ms_cubic-bezier(0.65,0,0.35,1)", "w-full h-full")}
+        style={transformStyles}
       />
-    </ProgressRoot>
+    </ProgressPrimitive.Root>
   );
-}
-
-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)',
-}));
+}