@noya-app/noya-designsystem 0.1.31 → 0.1.32

package/src/components/InputField.tsx

@@ -17,14 +17,12 @@ import React, {
   useRef,
   useState,
 } from "react";
-import styled from "styled-components";
 import handleNudge from "../utils/handleNudge";
 import { Button } from "./Button";
 import { DropdownMenu } from "./DropdownMenu";
 import { MenuItem } from "./internal/Menu";
 import TextInput, { TextInputProps } from "./internal/TextInput";
 import { Popover } from "./Popover";
-import { Stack } from "./Stack";
 
 type LabelPosition = "start" | "end";
 
@@ -59,46 +57,60 @@ const InputFieldContext = createContext<InputFieldContextValue>({
  * Label
  * ------------------------------------------------------------------------- */
 
-const LabelContainer = styled.label<{
-  pointerEvents: Property.PointerEvents;
-  $labelPosition: LabelPosition;
-  $hasDropdown: boolean;
-  $size: InputFieldSize;
-}>(({ theme, $labelPosition, $hasDropdown, pointerEvents, $size }) => {
-  const offsetRelativeToSize =
-    $size === "large" ? 6 : $size === "medium" ? 2 : 0;
-  return {
-    ...theme.textStyles.label,
-    fontWeight: "bold",
-    color: theme.colors.textDisabled,
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    right: $labelPosition === "end" ? offsetRelativeToSize : undefined,
-    left: $labelPosition === "start" ? offsetRelativeToSize : undefined,
-    display: "flex",
-    alignItems: "center",
-    pointerEvents,
-    userSelect: "none",
-    ...($labelPosition === "start"
-      ? { justifyContent: "flex-start", paddingLeft: "6px" }
-      : {
-          justifyContent: "flex-end",
-          paddingRight: $hasDropdown ? "16px" : "6px",
-        }),
-  };
-});
+const LabelContainer = forwardRef<
+  HTMLLabelElement,
+  {
+    pointerEvents: Property.PointerEvents;
+    $labelPosition: LabelPosition;
+    $hasDropdown: boolean;
+    $size: InputFieldSize;
+    className?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+  }
+>(
+  (
+    { pointerEvents, $labelPosition, $hasDropdown, $size, className, style, ...props },
+    ref
+  ) => {
+      const memoizedStyles = useMemo(() => ({
+        left: $labelPosition === "start" ? $size === "large" ? "6px" : $size === "medium" ? "2px" : "0px" : "",
+        right: $labelPosition === "end" ? $size === "large" ? "6px" : $size === "medium" ? "2px" : "0px" : "",
+      }), [$labelPosition, $size])
+
+    return (
+      <label
+        ref={ref}
+        className={`absolute top-0 bottom-0 flex items-center font-sans text-label font-bold uppercase text-text-disabled select-none ${
+          $labelPosition === "start"
+            ? `justify-start pl-[6px]`
+            : $labelPosition === "end"
+              ? `justify-end ${$hasDropdown ? "pr-[16px]" : "pr-[6px]"}`
+              : ""
+        } ${pointerEvents === "none" ? "pointer-events-none" : ""} ${className ?? ""}`}
+        style={{...memoizedStyles, ...style}}
+        {...props}
+      />
+    );
+  }
+);
 
 interface InputFieldLabelProps {
   children?: ReactNode;
   pointerEvents?: Property.PointerEvents;
   style?: React.CSSProperties;
+  className?: string;
 }
 
 /** Inserts a Label at the start or end of the input given a `labelPosition`on InputField.Root. Should not be used with an InputField.Button */
 const InputFieldLabel = memo(
   forwardRef(function InputFieldLabel(
-    { children = false, pointerEvents = "none", style }: InputFieldLabelProps,
+    {
+      children = false,
+      pointerEvents = "none",
+      style,
+      className,
+    }: InputFieldLabelProps,
     forwardedRef: ForwardedRef<HTMLLabelElement>
   ) {
     const { labelPosition, hasDropdown, setLabelWidth, size } =
@@ -127,6 +139,7 @@ const InputFieldLabel = memo(
         $labelPosition={labelPosition}
         $hasDropdown={hasDropdown}
         style={style}
+        className={className}
       >
         {children}
       </LabelContainer>
@@ -138,14 +151,16 @@ const InputFieldLabel = memo(
  * Dropdown
  * ------------------------------------------------------------------------- */
 
-const DropdownContainer = styled.span(({ theme }) => ({
-  position: "absolute",
-  top: 0,
-  right: 0,
-  bottom: 0,
-  display: "flex",
-  flexDirection: "column",
-}));
+const DropdownContainer = forwardRef<
+  HTMLSpanElement,
+  { className?: string; children?: React.ReactNode }
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    className={`absolute inset-y-0 right-0 flex flex-col ${className ?? ""}`}
+    {...props}
+  />
+));
 
 interface InputFieldDropdownProps<T extends string> {
   id?: string;
@@ -171,7 +186,12 @@ const InputFieldDropdownMenu = memo(function InputFieldDropdownMenu<
     <DropdownContainer>
       <DropdownMenu<T> items={items} onSelect={onSelect}>
         {children || (
-          <Button id={id} variant="thin" flex="1" contentStyle={contentStyle}>
+          <Button
+            id={id}
+            variant="thin"
+            className="flex flex-1"
+            contentStyle={contentStyle}
+          >
             <CaretDownIcon />
           </Button>
         )}
@@ -184,26 +204,26 @@ const InputFieldDropdownMenu = memo(function InputFieldDropdownMenu<
  * Button
  * ------------------------------------------------------------------------- */
 
-const ButtonContainer = styled.span<{ $size: InputFieldSize }>(
-  ({ theme, $size }) => ({
-    position: "absolute",
-    right: $size === "large" ? "9px" : $size === "medium" ? "4px" : "2px",
-    top: $size === "large" ? "10px" : $size === "medium" ? "4px" : "2px",
-  })
-);
+const ButtonContainer = forwardRef<
+  HTMLSpanElement,
+  { $size: InputFieldSize; className?: string; children?: React.ReactNode }
+>(({ $size, className, ...props }, ref) => (
+  <span
+    ref={ref}
+    className={`absolute ${$size === "large" ? "right-[9px] top-[10px]" :
+      $size === "medium" ? "right-[4px] top-[4px]" :
+      $size === "small" ? "right-[2px] top-[2px]" : ""} ${className ?? ""}`}
+    {...props}
+  />
+));
 
 /** Inserts a Button at the end of the input. Should not be used with an InputField.Label */
 const InputFieldButton = memo(
   forwardRef(function InputFieldButton(
-    {
-      children,
-      onClick,
-    }: {
-      children?: ReactNode;
-      onClick?: () => void;
-    },
+    props: React.ButtonHTMLAttributes<HTMLButtonElement>,
     forwardedRef: ForwardedRef<HTMLButtonElement>
   ) {
+    const { children, onClick, ...rest } = props;
     const { size, inputRef, setButtonWidth } = useContext(InputFieldContext);
 
     const ref = useRef<HTMLButtonElement | null>(null);
@@ -219,7 +239,7 @@ const InputFieldButton = memo(
     }, [setButtonWidth]);
 
     const defaultHandleClick = useCallback(
-      (event: React.MouseEvent) => {
+      (event: React.MouseEvent<HTMLButtonElement>) => {
         if (inputRef && typeof inputRef !== "function") {
           inputRef.current?.focus();
           // Select all text
@@ -232,10 +252,13 @@ const InputFieldButton = memo(
       [inputRef]
     );
 
-    const handlePointerDown = useCallback((event: React.PointerEvent) => {
-      event.preventDefault();
-      event.stopPropagation();
-    }, []);
+    const handlePointerDown = useCallback(
+      (event: React.PointerEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      []
+    );
 
     return (
       <ButtonContainer $size={size}>
@@ -249,6 +272,7 @@ const InputFieldButton = memo(
           onPointerDown={handlePointerDown}
           tabIndex={-1}
           size={size === "medium" ? "normal" : size}
+          {...rest}
         >
           {children}
         </Button>
@@ -270,7 +294,7 @@ const InputFieldButton = memo(
 
 type InputFieldVariant = "normal" | "bare";
 
-export const InputElement = styled(TextInput)<{
+type InputElementProps = {
   disabled?: boolean;
   readOnly?: boolean;
   $labelPosition: LabelPosition;
@@ -279,89 +303,75 @@ export const InputElement = styled(TextInput)<{
   $textAlign?: Property.TextAlign;
   $variant?: InputFieldVariant;
   $size: InputFieldSize;
-}>(({
-  theme,
-  $labelPosition,
-  $labelSize,
-  $hasDropdown,
-  $textAlign,
-  disabled,
-  readOnly,
-  $variant = "normal",
-  $size,
-}) => {
-  return {
-    // placeholder
-    "&::placeholder": {
-      color: theme.colors.textDisabled,
-    },
-    ...theme.textStyles.small,
-    color: readOnly
-      ? theme.colors.textMuted
-      : disabled
-        ? theme.colors.textDisabled
-        : theme.colors.text,
-    ...($size === "small" && {
-      fontSize: "11px",
-    }),
-    width: "0px", // Reset intrinsic width
-    flex: "1 1 0px",
-    position: "relative",
-    border: "0",
-    outline: "none",
-    minWidth: "0",
-    textAlign: $textAlign ?? "left",
-    alignSelf: "stretch",
-    borderRadius: "4px",
-    paddingTop: $size === "large" ? "10px" : $size === "medium" ? "4px" : "1px",
-    paddingBottom:
-      $size === "large" ? "10px" : $size === "medium" ? "4px" : "1px",
-    paddingLeft:
-      ($size === "large" ? 10 : $size === "medium" ? 6 : 4) +
-      ($labelSize && $labelPosition === "start" ? 6 + $labelSize : 0) +
-      "px",
-    paddingRight:
+  children?: React.ReactNode;
+  className?: string;
+  value?: string;
+  onSubmit?: (value: string) => void;
+};
+
+const InputElement = forwardRef(
+  (
+    {
+      disabled,
+      readOnly,
+      $labelPosition,
+      $labelSize,
+      $hasDropdown,
+      $textAlign,
+      $variant = "normal",
+      $size,
+      className,
+      children,
+      value,
+      onSubmit,
+      ...props
+    }: InputElementProps,
+    ref: ForwardedRef<any>
+  ) => {
+    const paddingLeft =
       ($size === "large" ? 10 : $size === "medium" ? 6 : 4) +
+      ($labelSize && $labelPosition === "start" ? 6 + $labelSize : 0);
+
+    const paddingRight =
+      ($size === "large" ? 10 : $size === "medium" ? 6 : 1) +
       ($labelSize && $labelPosition === "end" ? 6 + $labelSize : 0) +
-      ($hasDropdown ? 11 : 0) +
-      "px",
-    background: theme.colors.inputBackground,
-    "&:focus": {
-      boxShadow: `0 0 0 2px ${theme.colors.primary}`,
-    },
-    ...($variant === "bare" && {
-      paddingTop: "4px",
-      paddingRight: "4px",
-      paddingBottom: "4px",
-      paddingLeft: "4px",
-      marginTop: "-4px",
-      marginRight: "-4px",
-      marginBottom: "-4px",
-      marginLeft: "-4px",
-    }),
+      ($hasDropdown ? 11 : 0);
 
-    // '&[type="search"]::-webkit-search-cancel-button': {
-    //   appearance: "none",
-    //   height: "15px",
-    //   width: "15px",
-    //   background: `url("data:image/svg+xml;utf8,${createCrossSVGString(
-    //     theme.colors.icon
-    //   )}") no-repeat`,
-    // },
-  };
-});
+      const memoizedStyles = useMemo(() => ({
+        paddingLeft: `${paddingLeft}px`,
+        paddingRight: `${paddingRight}px`,
+      }), [paddingLeft, paddingRight])
+
+    return (
+      <TextInput
+        value={value ?? ""}
+        onSubmit={onSubmit ?? (() => {})}
+        ref={ref}
+        className={`flex w-0 flex-[1_1_0px] relative border-0 outline-none min-w-0 self-stretch rounded bg-input-background focus:ring-2 focus:ring-primary focus:z-10 placeholder:text-text-disabled ${readOnly ? "text-text-muted" : disabled ? "text-text-disabled" : "text-text"} font-sans font-normal ${$textAlign && `text-${$textAlign}`} ${
+          $size === "small"
+            ? "text-[11px] leading-[19px] py-[1px]"
+            : $size === "large"
+              ? "py-[10px] text-heading5"
+              : $size === "medium"
+                ? "py-1  text-heading5"
+                : $variant === "bare" && "p-1 -m-1"
+        } ${className ?? ""}`}
+        style={memoizedStyles}
+        {...props}
+      />
+    );
+  }
+);
+
+export type InputFieldInputProps = TextInputProps & {
+  textAlign?: Property.TextAlign;
+  variant?: "bare";
+};
 
 /** Should always be wrapped in InputField.Root */
 const InputFieldInput = forwardRef(function InputFieldInput(
   // onFocusChange should only be passed from the root, never directly
-  {
-    textAlign,
-    variant,
-    ...rest
-  }: TextInputProps & {
-    textAlign?: Property.TextAlign;
-    variant?: "bare";
-  },
+  { textAlign, variant, ...rest }: InputFieldInputProps,
   forwardedRef: ForwardedRef<HTMLInputElement>
 ) {
   const {
@@ -411,7 +421,6 @@ const InputFieldTypeahead = (props: { prefix: string; value: string }) => {
 
   return (
     <InputElement
-      as="span"
       $labelPosition={labelPosition}
       $labelSize={labelSize}
       $hasDropdown={hasDropdown}
@@ -419,19 +428,9 @@ const InputFieldTypeahead = (props: { prefix: string; value: string }) => {
       // onFocusChange={onFocusChange}
       // readOnly
       // placeholder={props.value}
+      {...props}
       value=""
-      style={{
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        width: "100%",
-        height: "100%",
-        pointerEvents: "none",
-        background: "transparent",
-        boxShadow: "none",
-      }}
+      className="absolute inset-0 w-full h-full pointer-events-none bg-transparent shadow-none"
     >
       <span style={{ opacity: 0 }}>{props.prefix}</span>
       <span style={{ opacity: 0.5 }}>
@@ -556,16 +555,23 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
  * Root
  * ------------------------------------------------------------------------- */
 
-const RootContainer = styled.div<{
-  $width?: number;
-  $flex?: string;
-}>(({ theme, $flex, $width }) => ({
-  flex: $flex ?? "1",
-  display: "flex",
-  flexDirection: "row",
-  position: "relative",
-  maxWidth: typeof $width === "number" ? `${$width}px` : undefined,
-}));
+const RootContainer = forwardRef<
+  HTMLDivElement,
+  {
+    $width?: number;
+    $flex?: string;
+    className?: string;
+    children?: React.ReactNode;
+    id?: string;
+    style?: React.CSSProperties;
+  }
+>(({ $width, $flex, className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`flex flex-row relative ${$flex ? `flex-[${$flex}]` : "flex-1"} ${$width || $width === 0 ? `max-w-[${$width}px]` : ""} ${className ?? ""}`}
+    {...props}
+  />
+));
 
 interface InputFieldRootProps {
   id?: string;
@@ -686,9 +692,9 @@ function InputFieldRoot({
           }}
         >
           {measuredWidth && (
-            <Stack.V width={measuredWidth} overflow="hidden">
+            <div className={`flex flex-col w-[${measuredWidth}] hidden`}>
               {renderPopoverContent({ width: measuredWidth })}
-            </Stack.V>
+            </div>
           )}
         </Popover>
       ) : (
@@ -698,38 +704,29 @@ 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",
-  };
-});
+const PrimitiveInputField = ({
+  readOnly,
+  disabled,
+  className,
+  ...props
+}: {
+  readOnly?: boolean;
+  disabled?: boolean;
+} & React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+>) => (
+  <input
+    className={`flex w-0 flex-1 relative border-none outline-none min-w-0 self-stretch rounded py-1 px-1.5 bg-input-background select-all pointer-events-[all] focus:ring-2 focus:ring-primary focus:z-10 font-sans font-normal text-heading5 placeholder:text-text-disabled ${
+      readOnly
+        ? "text-text-muted"
+        : disabled
+          ? "text-text-disabled"
+          : "text-text"
+    } ${className ?? ""}`}
+    {...props}
+  />
+);
 
 export namespace InputField {
   export const Root = memo(InputFieldRoot);

package/src/components/InputFieldWithCompletions.tsx

@@ -13,18 +13,16 @@ import React, {
   useRef,
   useState,
 } from "react";
-import styled from "styled-components";
 import {
   CompletionItem,
   CompletionListItem,
   CompletionSectionHeader,
 } from "../utils/completions";
-import { IToken, fuzzyFilter, fuzzyTokenize } from "../utils/fuzzyScorer";
+import { fuzzyFilter, fuzzyTokenize } from "../utils/fuzzyScorer";
 import { ActivityIndicator } from "./ActivityIndicator";
 import { InputField, InputFieldSize } from "./InputField";
 import { IVirtualizedList, ListView } from "./ListView";
 import { Spacer } from "./Spacer";
-import { Stack } from "./Stack";
 import { Small } from "./Text";
 
 function filterWithGroupedSections(
@@ -66,13 +64,6 @@ function filterWithGroupedSections(
   });
 }
 
-export const CompletionToken = styled.span<{ $type: IToken["type"] }>(
-  ({ $type }) => ({
-    fontWeight: $type === "match" ? "bold" : "normal",
-    whiteSpace: "pre",
-  })
-);
-
 interface CompletionMenuProps {
   items: CompletionListItem[];
   selectedIndex: number;
@@ -127,9 +118,12 @@ export const CompletionMenu = memo(
               }}
             >
               {tokens.map((token, j) => (
-                <CompletionToken key={j} $type={token.type}>
+                <span
+                  key={j}
+                  className={`${token.type === "match" ? "font-bold" : "font-normal"} whitespace-pre`}
+                >
                   {token.text}
-                </CompletionToken>
+                </span>
               ))}
               {item.icon && (
                 <>
@@ -145,7 +139,7 @@ export const CompletionMenu = memo(
   })
 );
 
-type Props = {
+export type InputFieldWithCompletionsProps = {
   loading?: boolean;
   initialValue?: string;
   placeholder?: string;
@@ -164,7 +158,7 @@ type Props = {
   hideMenuWhenEmptyValue?: boolean;
 };
 
-export interface IInputFieldWithCompletions {
+export interface InputFieldWithCompletionsRef {
   focus(): void;
   setValue(value: string): void;
   selectAllInputText(): void;
@@ -189,8 +183,8 @@ export const InputFieldWithCompletions = memo(
       children,
       hideChildrenWhenFocused = false,
       hideMenuWhenEmptyValue = false,
-    }: Props,
-    forwardedRef: ForwardedRef<IInputFieldWithCompletions>
+    }: InputFieldWithCompletionsProps,
+    forwardedRef: ForwardedRef<InputFieldWithCompletionsRef>
   ) {
     const ref = useRef<HTMLInputElement>(null);
 
@@ -416,12 +410,16 @@ export const InputFieldWithCompletions = memo(
     return (
       <InputField.Root
         size={size}
-        labelSize={16}
         renderPopoverContent={({ width }) => {
           const listSize = { width, height };
 
           return (
-            <Stack.V flex={`0 0 ${height}px`} display={display}>
+            <div
+              className={`flex flex-col ${!filter && hideMenuWhenEmptyValue ? "none" : "flex"}`}
+              style={{
+                flex: `0 0 ${height}px`
+              }}
+            >
               {filteredItems.length > 0 ? (
                 <CompletionMenu
                   ref={listRef}
@@ -432,18 +430,13 @@ export const InputFieldWithCompletions = memo(
                   listSize={listSize}
                 />
               ) : (
-                <Stack.V
-                  height="100px"
-                  padding="20px"
-                  alignItems="center"
-                  justifyContent="center"
-                >
-                  <Small color="textDisabled">
+                <div className="flex flex-col h-[100px] p-5 items-center justify-center">
+                  <Small className="text-text-disabled">
                     {loading ? "Loading" : "No results"}
                   </Small>
-                </Stack.V>
+                </div>
               )}
-            </Stack.V>
+            </div>
           );
         }}
       >