@noya-app/noya-designsystem 0.1.31 → 0.1.32

package/src/components/GridView.tsx

@@ -10,7 +10,6 @@ import React, {
   useContext,
   useMemo,
 } from "react";
-import styled, { keyframes } from "styled-components";
 import { useHover } from "../hooks/useHover";
 import withSeparatorElements from "../utils/withSeparatorElements";
 import { ActivityIndicator } from "./ActivityIndicator";
@@ -18,8 +17,8 @@ import { ContextMenu } from "./ContextMenu";
 import { MenuItem } from "./internal/Menu";
 import { ScrollArea } from "./ScrollArea";
 import { Spacer } from "./Spacer";
-import { Stack } from "./Stack";
 import { Tooltip } from "./Tooltip";
+import { cn } from "../utils/tailwind";
 
 export type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
 
@@ -63,178 +62,42 @@ const sizes: Record<
   },
 };
 
-const Grid = styled.div<{
-  $size: GridViewSize;
-  $padding: CSSProperties["padding"];
-}>(({ theme, $size, $padding }) => {
-  return {
-    color: theme.colors.text,
-    display: "grid",
-    gridTemplateColumns: `repeat(auto-fill, minmax(${sizes[$size].itemWidth}px, 1fr))`,
-    // gridAutoRows: `${sizes[size].itemHeight}px`,
-    gap: `${sizes[$size].gap}px`,
-    // gridTemplateColumns: `repeat(auto-fill, minmax(
-    //   ${size === 'large' ? '280px' : size === 'small' ? '160px' : '116px'}
-    // , 1fr))`,
-    // gridAutoRows:
-    //   size === 'large' ? '280px' : size === 'small' ? '170px' : '116px',
-    // gap: size === 'large' || size === 'small' ? `20px` : `12px`,
-    padding: $padding,
-  };
-});
-
-const Container = styled.div<{ $scrollable: boolean }>(
-  ({ theme, $scrollable }) => ({
-    flex: $scrollable ? "1" : "0 0 auto",
-    display: "flex",
-    flexDirection: "column",
-  })
-);
-
-const ContentContainer = styled.div<{
-  $selected?: boolean;
-  $hovered?: boolean;
-  $bordered: boolean;
-  $disabled: boolean;
-}>(({ theme, $selected, $hovered, $bordered, $disabled }) => ({
-  display: "flex",
-  flex: "1",
-  backgroundColor: theme.colors.sidebar.background,
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: "2px",
-  border: `1px solid ${
-    $selected
-      ? theme.colors.primary
-      : // : hovered
-        // ? `rgb(132, 63, 255, 0.5)`
-        $bordered
-        ? theme.colors.divider
-        : "transparent"
-  }`,
-  overflow: "hidden",
-
-  cursor: "pointer",
-  ...($disabled
-    ? { opacity: 0.5 }
-    : {
-        "&:hover": { opacity: 0.85 },
-        "&:active": { opacity: 0.7 },
-      }),
-}));
-
-const ItemContainer = styled.div(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  position: "relative",
-
-  "&:focus": {
-    boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`,
-    outline: "none",
-  },
-}));
-
-const ItemTitle = styled.span<{ $showBackground: boolean }>(
-  ({ theme, $showBackground }) => ({
-    ...theme.textStyles.small,
-    lineHeight: "1",
-    color: theme.colors.text,
-    fontWeight: 500,
-    userSelect: "none",
-    whiteSpace: "pre",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-
-    ...($showBackground && {
-      background: theme.colors.sidebar.background,
-      // border: `1px solid ${theme.colors.dividerSubtle}`,
-      padding: "2px 4px",
-      borderRadius: "2px",
-      backdropFilter: "blur(4px)",
-    }),
-  })
-);
-
-const ItemDescription = styled.span<{ $showBackground: boolean }>(
-  ({ theme, $showBackground }) => ({
-    ...theme.textStyles.small,
-    fontSize: "0.7rem",
-    lineHeight: "1",
-    color: theme.colors.textMuted,
-    userSelect: "none",
-    whiteSpace: "pre",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-
-    ...($showBackground && {
-      background: theme.colors.sidebar.background,
-      // border: `1px solid ${theme.colors.dividerSubtle}`,
-      padding: "2px 4px",
-      borderRadius: "2px",
-      backdropFilter: "blur(4px)",
-    }),
-  })
-);
-
-const SectionTitle = styled.span<{ last?: boolean }>(
-  ({ theme, last = false }) => ({
-    ...theme.textStyles.heading3,
-    color: last ? theme.colors.text : theme.colors.textMuted,
-    fontWeight: 500,
-    userSelect: "none",
-    whiteSpace: "pre",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    lineHeight: "1",
-  })
-);
-
-const SectionHeaderContainer = styled.div(({ theme }) => ({
-  padding: "0 20px",
-}));
+const ItemTitle = ({showBackground, children}: {showBackground?: boolean, children?: React.ReactNode}) => {
+    return (
+      <span
+        className={`font-sans text-heading5 leading-[1] text-text font-medium select-none whitespace-pre overflow-hidden text-ellipsis ${
+          showBackground &&
+          "bg-sidebar-background border border-dividerSubtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"
+        }`}
+      >
+        {children}
+      </span>
+    );
 
-const TextOverlay = styled.div({
-  position: "absolute",
-  inset: 0,
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "end",
-  alignItems: "start",
-  padding: "4px",
-  pointerEvents: "none",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  gap: "2px",
-});
+}
 
-const shimmer = keyframes({
-  "0%": {
-    backgroundPosition: "-200% 0",
-  },
-  "100%": {
-    backgroundPosition: "200% 0",
-  },
-});
+const ItemDescription = ({showBackground, children}: {showBackground?: boolean, children?: React.ReactNode}) => {
+    return (
+      <span
+        className={`font-sans text-heading5 font-normal leading-[1] text-[0.7rem] text-text-muted select-none whitespace-pre overflow-hidden text-ellipsis ${
+          showBackground &&
+          "bg-sidebar-background border border-dividerSubtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"
+        }`}
+      >
+        {children}
+      </span>
+    );
+  };
 
-const Shimmer = styled.div`
-  pointer-events: none;
-  position: absolute;
-  inset: 0;
-  animation: ${shimmer} 6s infinite linear;
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0),
-    rgba(226, 232, 240, 0.5),
-    rgba(255, 255, 255, 0)
+const SectionTitle = ({last = false, children}: { last?: boolean; children?: React.ReactNode }) => {
+  return (
+    <span
+      className={`font-sans text-heading3 font-medium user-select-none whitespace-pre overflow-hidden text-ellipsis ${last ? "text-text" : "text-text-muted"}`}
+    >
+      {children}
+    </span>
   );
-  background-size: 200% 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: end;
-  padding: 4px;
-`;
+};
 
 interface ItemProps<MenuItemType extends string = string> {
   id: string;
@@ -311,48 +174,54 @@ const GridViewItem = forwardRef(function GridViewItem<
   );
 
   let element = (
-    <ItemContainer
+    <div
+      className="flex flex-col relative focus:shadow-[0px_0px_0px_1px_var(--sidebar-background),_0px_0px_0px_3px_var(--primary)] focus:outline-none"
       id={id}
       ref={forwardedRef}
       {...hoverProps}
       tabIndex={disabled ? undefined : 0}
       onKeyDown={handleKeyDown}
     >
-      <ContentContainer
-        $disabled={disabled}
-        $bordered={bordered}
-        $selected={selected}
-        $hovered={!disabled && hovered}
+      <div
+        className={cn(
+          "flex flex-1 items-center justify-center",
+          "bg-sidebar-background rounded-[2px] overflow-hidden",
+          "cursor-pointer",
+          selected
+            ? "border border-primary"
+            : bordered
+              ? "border border-divider"
+              : "border border-transparent",
+          disabled ? "opacity-50" : "hover:opacity-85 active:opacity-70"
+        )}
         onClick={handleClick}
         onDoubleClick={onDoubleClick}
         onContextMenu={onContextMenu}
         style={style}
       >
         {children}
-      </ContentContainer>
+      </div>
       {textPosition === "below" && (
         <>
           <Spacer.Vertical size={8} />
-          <ItemTitle $showBackground={false}>{title || " "}</ItemTitle>
-          <ItemDescription $showBackground={false}>
-            {subtitle || " "}
-          </ItemDescription>
+          <ItemTitle>{title || " "}</ItemTitle>
+          <ItemDescription>{subtitle || " "}</ItemDescription>
         </>
       )}
       {textPosition === "overlay" && hovered && (title || subtitle) && (
-        <TextOverlay>
-          {title && <ItemTitle $showBackground>{title}</ItemTitle>}
+        <div className="absolute inset-0 flex flex-col justify-end items-start p-1 pointer-events-none truncate g-0.5">
+          {title && <ItemTitle showBackground>{title}</ItemTitle>}
           {subtitle && (
-            <ItemDescription $showBackground>{subtitle}</ItemDescription>
+            <ItemDescription showBackground>{subtitle}</ItemDescription>
           )}
-        </TextOverlay>
+        </div>
       )}
       {loading && (
-        <Shimmer>
+        <div className="flex flex-col justify-start items-end p-1 pointer-events-none animate-shimmer absolute inset-0 bg-gradient-to-r from-white/0 via-[rgb(226,232,240)]/50 to-white/0 bg-length:200%_100%]">
           <ActivityIndicator opacity={0.5} size={13} />
-        </Shimmer>
+        </div>
       )}
-    </ItemContainer>
+    </div>
   );
 
   if (menuItems && onSelectMenuItem) {
@@ -367,12 +236,12 @@ const GridViewItem = forwardRef(function GridViewItem<
     element = (
       <Tooltip
         content={
-          <Stack.V gap={2}>
-            <ItemTitle $showBackground={false}>{title}</ItemTitle>
-            <ItemDescription $showBackground={false}>
+          <div className="flex flex-col gap-0.5">
+            <ItemTitle >{title}</ItemTitle>
+            <ItemDescription>
               {subtitle}
             </ItemDescription>
-          </Stack.V>
+          </div>
         }
       >
         {element}
@@ -434,26 +303,27 @@ function GridViewRoot({
 
   return (
     <GridViewContext.Provider value={contextValue}>
-      <Container onClick={handleClick} $scrollable={scrollable}>
+      <div onClick={handleClick} className={`flex flex-col ${scrollable ? "flex-1" : "flex-[0_0_auto]"}`}>
         {scrollable ? <ScrollArea>{children}</ScrollArea> : children}
-      </Container>
+      </div>
     </GridViewContext.Provider>
   );
 }
 
 function GridViewSection({
   children,
-  padding = "20px",
+  className,
 }: {
   children?: ReactNode;
-  padding?: CSSProperties["padding"];
+  className?: string;
 }) {
   const { size } = useContext(GridViewContext);
+  const gapStyle = { gap: `${sizes[size].gap}px` };
 
   return (
-    <Grid $size={size} $padding={padding}>
+    <div className={cn(className, "text-text grid", `grid-cols-[auto-fill,_minmax(${sizes[size].itemWidth}px,_1fr)]`)} style={gapStyle}>
       {children}
-    </Grid>
+    </div>
   );
 }
 
@@ -461,7 +331,7 @@ function GridViewSectionHeader({ title }: { title: string }) {
   const grouped = title.split("/");
 
   return (
-    <SectionHeaderContainer>
+    <div className="px-5">
       <Spacer.Vertical size={24} />
       {withSeparatorElements(
         grouped.map((title, index) => (
@@ -471,7 +341,7 @@ function GridViewSectionHeader({ title }: { title: string }) {
         )),
         <SectionTitle> / </SectionTitle>
       )}
-    </SectionHeaderContainer>
+    </div>
   );
 }
 

package/src/components/IconButton.tsx

@@ -5,7 +5,6 @@ import React, {
   memo,
   useMemo,
 } from "react";
-import { useTheme } from "styled-components";
 import { Button, ButtonRootProps } from "./Button";
 import { IconName, Icons } from "./Icons";
 
@@ -23,9 +22,6 @@ export const IconButton = memo(
     { selected, iconName, color, size, contentStyle, ...props }: Props,
     forwardedRef: ForwardedRef<HTMLButtonElement>
   ) {
-    const { icon: iconColor, iconSelected: iconSelectedColor } =
-      useTheme().colors;
-
     const Icon = Icons[iconName];
 
     const style = useMemo((): CSSProperties => {
@@ -39,7 +35,7 @@ export const IconButton = memo(
     return (
       <Button ref={forwardedRef} {...props} variant="none" contentStyle={style}>
         <Icon
-          color={color ?? (selected ? iconSelectedColor : iconColor)}
+          color={color ?? (selected ? "var(--icon-selected)" : "var(--icon)")}
           {...(size && { width: size, height: size })}
         />
       </Button>