@noya-app/noya-designsystem 0.0.13 → 0.0.15

package/src/components/GridView.tsx

@@ -1,4 +1,4 @@
-import { KeyModifiers } from '@noya-app/noya-keymap';
+import { KeyModifiers } from "@noya-app/noya-keymap";
 import React, {
   createContext,
   CSSProperties,
@@ -9,19 +9,19 @@ import React, {
   useCallback,
   useContext,
   useMemo,
-} from 'react';
-import styled, { keyframes } from 'styled-components';
-import { useHover } from '../hooks/useHover';
-import withSeparatorElements from '../utils/withSeparatorElements';
-import { ActivityIndicator } from './ActivityIndicator';
-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';
-
-export type GridViewSize = 'xxs' | 'xs' | 'small' | 'large';
+} from "react";
+import styled, { keyframes } from "styled-components";
+import { useHover } from "../hooks/useHover";
+import withSeparatorElements from "../utils/withSeparatorElements";
+import { ActivityIndicator } from "./ActivityIndicator";
+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";
+
+export type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
 
 const sizes: Record<
   GridViewSize,
@@ -46,20 +46,30 @@ const sizes: Record<
     itemHeight: 170,
     gap: 20,
   },
+  medium: {
+    itemWidth: 220,
+    itemHeight: 220,
+    gap: 16,
+  },
   large: {
     itemWidth: 280,
     itemHeight: 280,
-    gap: 20,
+    gap: 24,
+  },
+  xl: {
+    itemWidth: 400,
+    itemHeight: 400,
+    gap: 32,
   },
 };
 
 const Grid = styled.div<{
   size: GridViewSize;
-  padding: CSSProperties['padding'];
+  padding: CSSProperties["padding"];
 }>(({ theme, size, padding }) => {
   return {
     color: theme.colors.text,
-    display: 'grid',
+    display: "grid",
     gridTemplateColumns: `repeat(auto-fill, minmax(${sizes[size].itemWidth}px, 1fr))`,
     // gridAutoRows: `${sizes[size].itemHeight}px`,
     gap: `${sizes[size].gap}px`,
@@ -75,10 +85,10 @@ const Grid = styled.div<{
 
 const Container = styled.div<{ scrollable: boolean }>(
   ({ theme, scrollable }) => ({
-    flex: scrollable ? '1' : '0 0 auto',
-    display: 'flex',
-    flexDirection: 'column',
-  }),
+    flex: scrollable ? "1" : "0 0 auto",
+    display: "flex",
+    flexDirection: "column",
+  })
 );
 
 const ContentContainer = styled.div<{
@@ -87,83 +97,83 @@ const ContentContainer = styled.div<{
   bordered: boolean;
   disabled: boolean;
 }>(({ theme, selected, hovered, bordered, disabled }) => ({
-  display: 'flex',
-  flex: '1',
+  display: "flex",
+  flex: "1",
   backgroundColor: theme.colors.sidebar.background,
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '2px',
+  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'
+        // ? `rgb(132, 63, 255, 0.5)`
+        bordered
+        ? theme.colors.divider
+        : "transparent"
   }`,
-  overflow: 'hidden',
+  overflow: "hidden",
 
-  cursor: 'pointer',
+  cursor: "pointer",
   ...(disabled
     ? { opacity: 0.5 }
     : {
-        '&:hover': { opacity: 0.85 },
-        '&:active': { opacity: 0.7 },
+        "&:hover": { opacity: 0.85 },
+        "&:active": { opacity: 0.7 },
       }),
 }));
 
 const ItemContainer = styled.div(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  position: 'relative',
+  display: "flex",
+  flexDirection: "column",
+  position: "relative",
 
-  '&:focus': {
+  "&:focus": {
     boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`,
-    outline: 'none',
+    outline: "none",
   },
 }));
 
 const ItemTitle = styled.span<{ showBackground: boolean }>(
   ({ theme, showBackground }) => ({
     ...theme.textStyles.small,
-    lineHeight: '1',
+    lineHeight: "1",
     color: theme.colors.text,
     fontWeight: 500,
-    userSelect: 'none',
-    whiteSpace: 'pre',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
+    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)',
+      padding: "2px 4px",
+      borderRadius: "2px",
+      backdropFilter: "blur(4px)",
     }),
-  }),
+  })
 );
 
 const ItemDescription = styled.span<{ showBackground: boolean }>(
   ({ theme, showBackground }) => ({
     ...theme.textStyles.small,
-    fontSize: '0.7rem',
-    lineHeight: '1',
+    fontSize: "0.7rem",
+    lineHeight: "1",
     color: theme.colors.textMuted,
-    userSelect: 'none',
-    whiteSpace: 'pre',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
+    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)',
+      padding: "2px 4px",
+      borderRadius: "2px",
+      backdropFilter: "blur(4px)",
     }),
-  }),
+  })
 );
 
 const SectionTitle = styled.span<{ last?: boolean }>(
@@ -171,39 +181,39 @@ const SectionTitle = styled.span<{ last?: boolean }>(
     ...theme.textStyles.heading3,
     color: last ? theme.colors.text : theme.colors.textMuted,
     fontWeight: 500,
-    userSelect: 'none',
-    whiteSpace: 'pre',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    lineHeight: '1',
-  }),
+    userSelect: "none",
+    whiteSpace: "pre",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    lineHeight: "1",
+  })
 );
 
 const SectionHeaderContainer = styled.div(({ theme }) => ({
-  padding: '0 20px',
+  padding: "0 20px",
 }));
 
 const TextOverlay = styled.div({
-  position: 'absolute',
+  position: "absolute",
   inset: 0,
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'end',
-  alignItems: 'start',
-  padding: '4px',
-  pointerEvents: 'none',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  gap: '2px',
+  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',
+  "0%": {
+    backgroundPosition: "-200% 0",
   },
-  '100%': {
-    backgroundPosition: '200% 0',
+  "100%": {
+    backgroundPosition: "200% 0",
   },
 });
 
@@ -240,6 +250,7 @@ interface ItemProps<MenuItemType extends string = string> {
   menuItems?: MenuItem<MenuItemType>[];
   onSelectMenuItem?: (value: MenuItemType) => void;
   onContextMenu?: () => void;
+  style?: CSSProperties;
 }
 
 const GridViewItem = forwardRef(function GridViewItem<
@@ -259,8 +270,9 @@ const GridViewItem = forwardRef(function GridViewItem<
     menuItems,
     onSelectMenuItem,
     onContextMenu,
+    style,
   }: ItemProps<MenuItemType>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
+  forwardedRef: ForwardedRef<HTMLDivElement>
 ) {
   const [hovered, setHovered] = React.useState(false);
 
@@ -281,12 +293,12 @@ const GridViewItem = forwardRef(function GridViewItem<
       onClick?.(event);
       onPress?.(event);
     },
-    [onClick, onPress],
+    [onClick, onPress]
   );
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent) => {
-      if (event.key === 'Enter' || event.key === ' ') {
+      if (event.key === "Enter" || event.key === " ") {
         event.stopPropagation();
         event.preventDefault();
 
@@ -295,7 +307,7 @@ const GridViewItem = forwardRef(function GridViewItem<
         return;
       }
     },
-    [onPress],
+    [onPress]
   );
 
   let element = (
@@ -314,19 +326,20 @@ const GridViewItem = forwardRef(function GridViewItem<
         onClick={handleClick}
         onDoubleClick={onDoubleClick}
         onContextMenu={onContextMenu}
+        style={style}
       >
         {children}
       </ContentContainer>
-      {textPosition === 'below' && (
+      {textPosition === "below" && (
         <>
           <Spacer.Vertical size={8} />
-          <ItemTitle showBackground={false}>{title || ' '}</ItemTitle>
+          <ItemTitle showBackground={false}>{title || " "}</ItemTitle>
           <ItemDescription showBackground={false}>
-            {subtitle || ' '}
+            {subtitle || " "}
           </ItemDescription>
         </>
       )}
-      {textPosition === 'overlay' && hovered && (title || subtitle) && (
+      {textPosition === "overlay" && hovered && (title || subtitle) && (
         <TextOverlay>
           {title && <ItemTitle showBackground>{title}</ItemTitle>}
           {subtitle && (
@@ -350,7 +363,7 @@ const GridViewItem = forwardRef(function GridViewItem<
     );
   }
 
-  if (textPosition === 'toolip') {
+  if (textPosition === "toolip") {
     element = (
       <Tooltip
         content={
@@ -370,14 +383,14 @@ const GridViewItem = forwardRef(function GridViewItem<
 
 type GridViewContextValue = {
   size: GridViewSize;
-  textPosition: 'overlay' | 'below' | 'toolip';
+  textPosition: "overlay" | "below" | "toolip";
   bordered: boolean;
   disabled: boolean;
 };
 
 const GridViewContext = createContext<GridViewContextValue>({
-  size: 'small',
-  textPosition: 'below',
+  size: "small",
+  textPosition: "below",
   bordered: false,
   disabled: false,
 });
@@ -389,11 +402,11 @@ interface GridViewRootProps extends Partial<GridViewContextValue> {
 }
 
 function GridViewRoot({
-  size = 'small',
+  size = "small",
   children,
   scrollable = true,
   onClick,
-  textPosition = 'below',
+  textPosition = "below",
   bordered = false,
   disabled = false,
 }: GridViewRootProps) {
@@ -404,7 +417,7 @@ function GridViewRoot({
 
       onClick?.();
     },
-    [onClick],
+    [onClick]
   );
 
   const contextValue = useMemo(
@@ -414,7 +427,7 @@ function GridViewRoot({
       bordered,
       disabled,
     }),
-    [bordered, disabled, size, textPosition],
+    [bordered, disabled, size, textPosition]
   );
 
   return (
@@ -428,10 +441,10 @@ function GridViewRoot({
 
 function GridViewSection({
   children,
-  padding = '20px',
+  padding = "20px",
 }: {
   children?: ReactNode;
-  padding?: CSSProperties['padding'];
+  padding?: CSSProperties["padding"];
 }) {
   const { size } = useContext(GridViewContext);
 
@@ -443,7 +456,7 @@ function GridViewSection({
 }
 
 function GridViewSectionHeader({ title }: { title: string }) {
-  const grouped = title.split('/');
+  const grouped = title.split("/");
 
   return (
     <SectionHeaderContainer>
@@ -454,7 +467,7 @@ function GridViewSectionHeader({ title }: { title: string }) {
             {title}
           </SectionTitle>
         )),
-        <SectionTitle> / </SectionTitle>,
+        <SectionTitle> / </SectionTitle>
       )}
     </SectionHeaderContainer>
   );

package/src/components/IconButton.tsx

@@ -1,16 +1,18 @@
-import * as Icons from '@noya-app/noya-icons';
+import * as Icons from "@noya-app/noya-icons";
 import React, {
   CSSProperties,
   ForwardedRef,
   forwardRef,
   memo,
   useMemo,
-} from 'react';
-import { useTheme } from 'styled-components';
-import { Button, ButtonRootProps } from './Button';
+} from "react";
+import { useTheme } from "styled-components";
+import { Button, ButtonRootProps } from "./Button";
 
-type Props = Omit<ButtonRootProps, 'children' | 'variant' | 'flex' | 'size'> & {
+type Props = Omit<ButtonRootProps, "children" | "variant" | "flex" | "size"> & {
   iconName: keyof typeof Icons;
+  className?: string;
+  style?: CSSProperties;
   selected?: boolean;
   color?: string;
   size?: number;
@@ -19,7 +21,7 @@ type Props = Omit<ButtonRootProps, 'children' | 'variant' | 'flex' | 'size'> & {
 export const IconButton = memo(
   forwardRef(function IconButton(
     { selected, iconName, color, size, contentStyle, ...props }: Props,
-    forwardedRef: ForwardedRef<HTMLButtonElement>,
+    forwardedRef: ForwardedRef<HTMLButtonElement>
   ) {
     const { icon: iconColor, iconSelected: iconSelectedColor } =
       useTheme().colors;
@@ -28,7 +30,7 @@ export const IconButton = memo(
 
     const style = useMemo((): CSSProperties => {
       return {
-        padding: '0 2px',
+        padding: "0 2px",
         ...(size && { minHeight: size }),
         ...contentStyle,
       };
@@ -42,5 +44,5 @@ export const IconButton = memo(
         />
       </Button>
     );
-  }),
+  })
 );

package/src/components/InputFieldWithCompletions.tsx

@@ -157,6 +157,7 @@ type Props = {
   onDeleteWhenEmpty?: () => void;
   size?: InputFieldSize;
   style?: React.CSSProperties;
+  className?: string;
   children?: React.ReactNode;
   hideChildrenWhenFocused?: boolean;
   hideMenuWhenEmptyValue?: boolean;
@@ -177,6 +178,7 @@ export const InputFieldWithCompletions = memo(
       onBlur,
       onDeleteWhenEmpty,
       style,
+      className,
       children,
       hideChildrenWhenFocused = false,
       hideMenuWhenEmptyValue = false,
@@ -421,6 +423,7 @@ export const InputFieldWithCompletions = memo(
           onFocusCapture={handleFocus}
           onKeyDown={handleKeyDown}
           style={style}
+          className={className}
           autoCapitalize="off"
           autoComplete="off"
           autoCorrect="off"

package/src/components/InspectorPrimitives.tsx

@@ -50,7 +50,7 @@ export const Column = styled.div(({ theme }) => ({
   flex: "1",
   display: "flex",
   flexDirection: "column",
-  gap: "2px",
+  gap: "4px",
 }));
 
 export const Checkbox = styled.input(({ theme }) => ({

package/src/components/Switch.tsx

@@ -1,20 +1,20 @@
-import * as SwitchPrimitive from '@radix-ui/react-switch';
-import React from 'react';
-import styled from 'styled-components';
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import React from "react";
+import styled from "styled-components";
 
-type SwitchVariant = 'normal' | 'primary' | 'secondary';
+type SwitchColorScheme = "normal" | "primary" | "secondary";
 
 const SwitchRoot = styled(SwitchPrimitive.Root)<{
-  variant: SwitchVariant;
-}>(({ theme, variant }) => ({
-  all: 'unset',
+  colorScheme: SwitchColorScheme;
+}>(({ theme, colorScheme: variant }) => ({
+  all: "unset",
   width: 32,
   height: 19,
   backgroundColor: theme.colors.activeBackground,
-  borderRadius: '9999px',
-  position: 'relative',
-  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-  cursor: 'pointer',
+  borderRadius: "9999px",
+  position: "relative",
+  WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
+  cursor: "pointer",
   // '&:focus': {
   //   boxShadow: `0 0 0 1px ${
   //     variant === 'secondary' ? theme.colors.secondary : theme.colors.primary
@@ -22,40 +22,40 @@ const SwitchRoot = styled(SwitchPrimitive.Root)<{
   // },
   '&[data-state="checked"]': {
     backgroundColor:
-      variant === 'primary'
+      variant === "primary"
         ? theme.colors.primary
-        : variant === 'secondary'
-        ? theme.colors.secondary
-        : undefined,
+        : variant === "secondary"
+          ? theme.colors.secondary
+          : undefined,
   },
 }));
 
 const SwitchThumb = styled(SwitchPrimitive.Thumb)({
-  display: 'block',
+  display: "block",
   width: 15,
   height: 15,
-  backgroundColor: 'white',
-  borderRadius: '9999px',
-  transition: 'transform 100ms',
-  transform: 'translateX(2px)',
-  willChange: 'transform',
-  '&[data-state="checked"]': { transform: 'translateX(15px)' },
+  backgroundColor: "white",
+  borderRadius: "9999px",
+  transition: "transform 100ms",
+  transform: "translateX(2px)",
+  willChange: "transform",
+  '&[data-state="checked"]': { transform: "translateX(15px)" },
 });
 
 interface Props {
   value: boolean;
   onChange: (value: boolean) => void;
-  variant?: SwitchVariant;
+  colorScheme?: SwitchColorScheme;
 }
 
 export const Switch = function Switch({
   value,
   onChange,
-  variant = 'normal',
+  colorScheme = "normal",
 }: Props) {
   return (
     <SwitchRoot
-      variant={variant}
+      colorScheme={colorScheme}
       checked={value}
       onCheckedChange={(newValue) => {
         onChange(newValue);