@noya-app/noya-designsystem 0.1.23 → 0.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/Chip.tsx

@@ -5,7 +5,7 @@ import { useDesignSystemTheme } from "../contexts/DesignSystemConfiguration";
 import { useHover } from "../hooks/useHover";
 
 type ChipColorScheme = "primary" | "secondary" | "error";
-type ChipSize = "small" | "medium";
+type ChipSize = "small" | "medium" | "large";
 type ChipVariant = "solid" | "outlined" | "ghost";
 
 const ChipElement = styled.span<{
@@ -49,15 +49,20 @@ const ChipElement = styled.span<{
     // lineHeight: "1.4",
     lineHeight: "15px",
     whiteSpace: "pre",
-    ...($size === "medium"
+    ...($size === "large"
       ? {
           fontSize: "11px",
           padding: "4px 8px",
         }
-      : {
-          fontSize: "9px",
-          padding: "0px 4px",
-        }),
+      : $size === "medium"
+        ? {
+            fontSize: "10px",
+            padding: "2px 6px",
+          }
+        : {
+            fontSize: "9px",
+            padding: "0px 4px",
+          }),
     ...($monospace && {
       fontFamily: theme.fonts.monospace,
     }),
@@ -96,7 +101,7 @@ const DeleteElement = styled(Cross1Icon)<{
   cursor: "pointer",
   opacity: 0.5,
 
-  ...(size === "medium"
+  ...(size === "large"
     ? {
         marginLeft: "2px",
         // top: '-1px',
@@ -124,7 +129,7 @@ const AddElement = styled(PlusIcon).withConfig({
   cursor: "pointer",
   opacity: 0.5,
 
-  ...(size === "medium"
+  ...(size === "large"
     ? {
         marginRight: "2px",
         top: "-1px",
@@ -168,7 +173,7 @@ export const Chip = memo(
       addable,
       clickable,
       style,
-      size = "medium",
+      size = "large",
       variant = "solid",
       monospace = false,
       tabIndex,

package/src/components/ContextMenu.tsx

@@ -3,6 +3,7 @@ import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
 import React, { ReactNode, memo, useCallback, useMemo } from "react";
 import styled from "styled-components";
+import { renderIcon } from "./Icons";
 import { Spacer } from "./Spacer";
 import {
   CHECKBOX_RIGHT_INSET,
@@ -98,7 +99,7 @@ const ContextMenuItem = memo(function ContextMenuItem<T extends string>({
       )}
       {icon && (
         <>
-          {icon}
+          {renderIcon(icon)}
           <Spacer.Horizontal size={8} />
         </>
       )}

package/src/components/DropdownMenu.tsx

@@ -12,6 +12,7 @@ import React, {
 } from "react";
 import styled from "styled-components";
 import { MenuItemProps, MenuProps } from "./ContextMenu";
+import { renderIcon } from "./Icons";
 import { Spacer } from "./Spacer";
 import {
   CHECKBOX_RIGHT_INSET,
@@ -73,7 +74,7 @@ const DropdownMenuItem = memo(function ContextMenuItem<T extends string>({
         </StyledItemIndicator>
         {icon && (
           <>
-            {icon}
+            {renderIcon(icon)}
             <Spacer.Horizontal size={8} />
           </>
         )}
@@ -89,7 +90,7 @@ const DropdownMenuItem = memo(function ContextMenuItem<T extends string>({
       )}
       {icon && (
         <>
-          {icon}
+          {renderIcon(icon)}
           <Spacer.Horizontal size={8} />
         </>
       )}

package/src/components/IconButton.tsx

@@ -1,4 +1,3 @@
-import * as Icons from "@noya-app/noya-icons";
 import React, {
   CSSProperties,
   ForwardedRef,
@@ -8,9 +7,10 @@ import React, {
 } from "react";
 import { useTheme } from "styled-components";
 import { Button, ButtonRootProps } from "./Button";
+import { IconName, Icons } from "./Icons";
 
 type Props = Omit<ButtonRootProps, "children" | "variant" | "flex" | "size"> & {
-  iconName: keyof typeof Icons;
+  iconName: IconName;
   className?: string;
   style?: CSSProperties;
   selected?: boolean;

package/src/components/Icons.tsx

@@ -0,0 +1,18 @@
+import * as Icons from "@noya-app/noya-icons";
+import React, { ReactNode } from "react";
+
+export type IconName = keyof typeof Icons;
+
+export { Icons };
+
+export function renderIcon(
+  iconName: Exclude<ReactNode, string> | IconName
+): ReactNode {
+  if (typeof iconName === "string") {
+    const Icon = Icons[iconName as IconName];
+
+    return <Icon />;
+  }
+
+  return iconName;
+}

package/src/components/InputField.tsx

@@ -662,6 +662,39 @@ function InputFieldRoot({
   );
 }
 
+const PrimitiveInputField = styled.input(({ theme, readOnly, disabled }) => {
+  return {
+    // placeholder
+    "&::placeholder": {
+      color: theme.colors.textDisabled,
+    },
+    ...theme.textStyles.small,
+    color: readOnly
+      ? theme.colors.textMuted
+      : disabled
+        ? theme.colors.textDisabled
+        : theme.colors.text,
+    width: "0px", // Reset intrinsic width
+    flex: "1 1 0px",
+    position: "relative",
+    border: "0",
+    outline: "none",
+    minWidth: "0",
+    alignSelf: "stretch",
+    borderRadius: "4px",
+    paddingTop: "4px",
+    paddingBottom: "4px",
+    paddingLeft: "6px",
+    paddingRight: "6px",
+    background: theme.colors.inputBackground,
+    "&:focus": {
+      boxShadow: `0 0 0 2px ${theme.colors.primary}`,
+    },
+    userSelect: "all",
+    pointerEvents: "all",
+  };
+});
+
 export namespace InputField {
   export const Root = memo(InputFieldRoot);
   export const Input = memo(InputFieldInput);
@@ -670,4 +703,5 @@ export namespace InputField {
   export const DropdownMenu = InputFieldDropdownMenu;
   export const Button = InputFieldButton;
   export const Label = InputFieldLabel;
+  export const PrimitiveElement = PrimitiveInputField;
 }

package/src/components/ListView.tsx

@@ -66,14 +66,15 @@ type ListRowContextValue = {
 // The dragged item isn't passed a context value (doing so causes an infinite loop),
 // so we pass this separately. Rows need the indentation to look correct when dragging,
 // and the dragged row doesn't have a ListRowContextValue.
-type DraggingContextValue = {
+type ListViewDraggingContextValue = {
   indentation: number;
   isDragging?: boolean;
 };
 
-const DraggingContext = createContext<DraggingContextValue>({
+const ListViewDraggingContext = createContext<ListViewDraggingContextValue>({
   indentation: 12,
 });
+(ListViewDraggingContext as any).displayName = "ListViewDraggingContext";
 
 const ListRowContext = createContext<ListRowContextValue>({
   marginType: "none",
@@ -88,6 +89,7 @@ const ListRowContext = createContext<ListRowContextValue>({
   isSectionHeader: false,
   colorScheme: "primary",
 });
+(ListRowContext as any).displayName = "ListRowContext";
 
 /* ----------------------------------------------------------------------------
  * RowTitle
@@ -386,7 +388,7 @@ const ListViewRow = forwardRef(function ListViewRow<
   const { hoverProps } = useHover({
     onHoverChange,
   });
-  const { indentation, isDragging } = useContext(DraggingContext);
+  const { indentation, isDragging } = useContext(ListViewDraggingContext);
 
   const handlePress = useCallback(
     (event: React.MouseEvent) => {
@@ -524,6 +526,7 @@ const ListViewRow = forwardRef(function ListViewRow<
 const RenderItemContext = createContext<(index: number) => ReactNode>(
   () => null
 );
+(RenderItemContext as any).displayName = "RenderItemContext";
 
 const VirtualizedListRow = memo(function VirtualizedListRow({
   index,
@@ -761,8 +764,29 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
     [data, renderItem]
   );
 
+  // TODO: Do we still use section header properties anywhere?
+  const defaultContextValue = useMemo(
+    (): ListRowContextValue => ({
+      colorScheme,
+      marginType: "none",
+      selectedPosition: "only",
+      sortable,
+      expandable,
+      divider,
+      pressEventName,
+      variant,
+      gap,
+      sectionHeaderVariant: "normal",
+      isSectionHeader: false,
+    }),
+    [colorScheme, sortable, expandable, divider, pressEventName, variant, gap]
+  );
+
   const getItemContextValue = useCallback(
     (i: number): ListRowContextValue | undefined => {
+      if (variant === "bare" || variant === "normal")
+        return defaultContextValue;
+
       const current = renderChild(i);
 
       if (!isValidElement(current)) return;
@@ -827,6 +851,8 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
       };
     },
     [
+      variant,
+      defaultContextValue,
       renderChild,
       data.length,
       colorScheme,
@@ -834,7 +860,6 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
       expandable,
       divider,
       pressEventName,
-      variant,
       sectionHeaderVariant,
       gap,
     ]
@@ -848,9 +873,9 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
   const renderOverlay = useCallback(
     (index: number) => (
       <div style={{ opacity: 0.25 }}>
-        <DraggingContext.Provider value={draggingContextOverlayValue}>
+        <ListViewDraggingContext.Provider value={draggingContextOverlayValue}>
           {renderItem(data[index], index, { isDragging: true })}
-        </DraggingContext.Provider>
+        </ListViewDraggingContext.Provider>
       </div>
     ),
     [draggingContextOverlayValue, renderItem, data]
@@ -916,7 +941,7 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
   const draggingContextValue = useMemo(() => ({ indentation }), [indentation]);
 
   return (
-    <DraggingContext.Provider value={draggingContextValue}>
+    <ListViewDraggingContext.Provider value={draggingContextValue}>
       <RootContainer
         id={id}
         className={className}
@@ -945,7 +970,7 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
           )
         )}
       </RootContainer>
-    </DraggingContext.Provider>
+    </ListViewDraggingContext.Provider>
   );
 });
 

package/src/components/SelectMenu.tsx

@@ -1,8 +1,9 @@
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import * as Select from "@radix-ui/react-select";
-import React, { memo } from "react";
+import React, { CSSProperties, memo } from "react";
 import { styled } from "styled-components";
 import { Button } from "./Button";
+import { renderIcon } from "./Icons";
 import { Spacer } from "./Spacer";
 import { MenuItem, RegularMenuItem, styles } from "./internal/Menu";
 
@@ -14,6 +15,13 @@ type Props<T extends string> = {
   value: T;
   onSelect?: (value: T) => void;
   placeholder?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+};
+
+const readOnlyStyle: CSSProperties = {
+  justifyContent: "flex-start",
+  textAlign: "left",
 };
 
 export const SelectMenu = memo(function SelectMenu<T extends string = string>({
@@ -24,6 +32,8 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   value,
   onSelect,
   placeholder,
+  disabled,
+  readOnly,
 }: Props<T>) {
   const selectedItem = menuItems.find(
     (item): item is RegularMenuItem<T> =>
@@ -31,13 +41,33 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   );
   const icon = selectedItem?.icon;
 
+  if (readOnly) {
+    return (
+      <Button
+        id={id}
+        style={style}
+        contentStyle={readOnlyStyle}
+        className={className}
+        disabled={disabled}
+      >
+        {icon && (
+          <>
+            {renderIcon(icon)}
+            <Spacer.Horizontal size={8} />
+          </>
+        )}
+        {selectedItem?.title ?? value}
+      </Button>
+    );
+  }
+
   return (
     <Select.Root value={value} onValueChange={onSelect}>
       <Select.SelectTrigger asChild>
-        <Button id={id} style={style} className={className}>
+        <Button id={id} style={style} className={className} disabled={disabled}>
           {icon && (
             <>
-              {icon}
+              {renderIcon(icon)}
               <Spacer.Horizontal size={8} />
             </>
           )}
@@ -86,7 +116,7 @@ const SelectItem = React.forwardRef(
       <StyledItem {...props} ref={forwardedRef}>
         {icon && (
           <>
-            {icon}
+            {renderIcon(icon)}
             <Spacer.Horizontal size={8} />
           </>
         )}

package/src/components/Switch.tsx

@@ -45,17 +45,20 @@ interface Props {
   value: boolean;
   onChange: (value: boolean) => void;
   colorScheme?: SwitchColorScheme;
+  disabled?: boolean;
 }
 
 export const Switch = function Switch({
   value,
   onChange,
   colorScheme = "normal",
+  disabled,
 }: Props) {
   return (
     <SwitchRoot
       $colorScheme={colorScheme}
       checked={value}
+      disabled={disabled}
       onCheckedChange={(newValue) => {
         onChange(newValue);
       }}

package/src/components/TreeView.tsx

@@ -7,6 +7,7 @@ import React, {
   useContext,
 } from "react";
 import { IconButton } from "./IconButton";
+import { IconName, renderIcon } from "./Icons";
 import { ListView } from "./ListView";
 import { Spacer } from "./Spacer";
 
@@ -15,7 +16,7 @@ import { Spacer } from "./Spacer";
  * ------------------------------------------------------------------------- */
 
 type TreeRowBaseProps = {
-  icon?: ReactNode;
+  icon?: Exclude<ReactNode, string> | IconName;
   expanded?: boolean;
   onClickChevron?: ({ altKey }: { altKey: boolean }) => void;
 };
@@ -61,7 +62,7 @@ const TreeRow = forwardRef(function TreeRow<MenuItemType extends string>(
       )}
       {icon && (
         <>
-          {icon}
+          {renderIcon(icon)}
           <Spacer.Horizontal size={10} />
         </>
       )}

package/src/components/internal/Menu.tsx

@@ -4,6 +4,7 @@ import styled, { CSSObject } from "styled-components";
 import { useDesignSystemConfiguration } from "../../contexts/DesignSystemConfiguration";
 import { Theme } from "../../theme";
 import withSeparatorElements from "../../utils/withSeparatorElements";
+import { IconName } from "../Icons";
 
 export const SEPARATOR_ITEM = "separator";
 
@@ -63,7 +64,7 @@ export type RegularMenuItem<T extends string> = {
   shortcut?: string;
   checked?: boolean;
   disabled?: boolean;
-  icon?: ReactNode;
+  icon?: Exclude<ReactNode, string> | IconName;
   items?: MenuItem<T>[];
   role?: MenuItemRole;
 };