@proulr/sdui-components 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
   "exports": {
@@ -16,6 +16,7 @@
     "url": "git+https://github.com/saviorbp/proulr-sdui-components.git"
   },
   "scripts": {
+    "prepare": "husky",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run typecheck",
     "lint": "eslint .",
@@ -57,10 +58,16 @@
     "eslint": "^9.0.0",
     "eslint-config-expo": "~56.0.4",
     "expo-linear-gradient": "~56.0.4",
+    "globals": "^16.0.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.4.0",
     "react": "19.2.3",
     "react-native": "0.85.3",
     "react-native-google-mobile-ads": "^16.3.4",
     "react-native-safe-area-context": "~5.7.0",
     "typescript": "~6.0.3"
+  },
+  "engines": {
+    "node": ">=22"
   }
 }

package/src/renderer/theme/proulr-theme.ts

@@ -31,6 +31,8 @@ export const m3Colors = {
   inverseOnSurface: '#000000',
   scrim: 'rgba(0,0,0,0.78)',
   online: '#34FF88',
+  chromePillBackground: 'rgba(28, 28, 30, 0.82)',
+  chromePillBorder: 'rgba(255, 255, 255, 0.06)',
 } as const;
 
 export const m3Shape = {
@@ -77,6 +79,8 @@ export const colors = {
   dangerSoft: 'rgba(255,68,68,0.22)',
   overlay: 'rgba(0,0,0,0.78)',
   surfaceGlass: 'rgba(255,255,255,0.06)',
+  chromePillBackground: 'rgba(28, 28, 30, 0.82)',
+  chromePillBorder: 'rgba(255, 255, 255, 0.06)',
   primary: m3Colors.primary,
   onSurface: m3Colors.onSurface,
   onSurfaceVariant: m3Colors.onSurfaceVariant,

package/src/renderer/ui/compose-pill-input.tsx

@@ -0,0 +1,557 @@
+import React, { useCallback, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import {
+  NativeSyntheticEvent,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  TextInputContentSizeChangeEventData,
+  View,
+  type StyleProp,
+  type TextInputProps,
+  type ViewStyle,
+} from 'react-native';
+import { AppIcon } from './app-icon';
+import { colors, fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+
+const ACTION_BUTTON_SIZE = 48;
+const FONT_SIZE = 16;
+const LINE_HEIGHT = 25;
+const MAX_LINES_DEFAULT = 4;
+const PILL_MIN_HEIGHT = ACTION_BUTTON_SIZE;
+const VERTICAL_PAD = (PILL_MIN_HEIGHT - LINE_HEIGHT) / 2;
+
+export type ComposePillVariant = 'surface' | 'chrome' | 'overlay';
+
+export type ComposePillReplyPreview = {
+  title: string;
+  body: string;
+  onDismiss: () => void;
+};
+
+export type ComposePillLineLayout = {
+  lineCount: number;
+  isMultiline: boolean;
+  pillHeight: number;
+  inputMaxHeight: number;
+};
+
+export type ComposePillLineLayoutState = ComposePillLineLayout & {
+  handleContentSizeChange: (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => void;
+  resetLineCount: () => void;
+  setLineCount: (count: number) => void;
+};
+
+type ComposePillLayoutOptions = {
+  maxLines?: number;
+};
+
+function singleLineMaxContentHeight(): number {
+  return LINE_HEIGHT * 2;
+}
+
+function maxPillHeight(maxLines: number): number {
+  return LINE_HEIGHT * maxLines + VERTICAL_PAD * 2;
+}
+
+export function countComposePillLines(
+  text: string,
+  contentHeight: number,
+  maxLines: number = MAX_LINES_DEFAULT,
+): number {
+  if (!text) return 1;
+
+  const explicitLines = text.split('\n').length;
+  if (explicitLines > 1) {
+    return Math.min(maxLines, explicitLines);
+  }
+
+  if (contentHeight <= singleLineMaxContentHeight()) {
+    return 1;
+  }
+
+  const wrappedLines = Math.round(contentHeight / LINE_HEIGHT);
+  return Math.min(maxLines, Math.max(1, wrappedLines));
+}
+
+export function pillHeightForLineCount(lineCount: number, maxLines: number = MAX_LINES_DEFAULT): number {
+  if (lineCount <= 1) return PILL_MIN_HEIGHT;
+  const textBlockHeight = lineCount * LINE_HEIGHT;
+  return Math.min(maxPillHeight(maxLines), textBlockHeight);
+}
+
+export function useComposePillLineLayout(
+  value: string,
+  { maxLines = MAX_LINES_DEFAULT }: ComposePillLayoutOptions = {},
+): ComposePillLineLayoutState {
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const [lineCount, setLineCount] = useState(1);
+
+  const updateLineLayout = useCallback(
+    (text: string, contentHeight: number) => {
+      const nextLineCount = text ? countComposePillLines(text, contentHeight, maxLines) : 1;
+      setLineCount(nextLineCount);
+    },
+    [maxLines],
+  );
+
+  const handleContentSizeChange = useCallback(
+    (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+      const text = valueRef.current;
+      if (!text) {
+        setLineCount(1);
+        return;
+      }
+      updateLineLayout(text, event.nativeEvent.contentSize.height);
+    },
+    [updateLineLayout],
+  );
+
+  const resetLineCount = useCallback(() => {
+    setLineCount(1);
+  }, []);
+
+  const isMultiline = lineCount > 1;
+  const pillHeight = pillHeightForLineCount(lineCount, maxLines);
+  const inputMaxHeight = maxPillHeight(maxLines) - VERTICAL_PAD * 2;
+
+  return {
+    lineCount,
+    isMultiline,
+    pillHeight,
+    inputMaxHeight,
+    handleContentSizeChange,
+    resetLineCount,
+    setLineCount,
+  };
+}
+
+type ComposePillTextInputRef = React.Ref<TextInput>;
+
+export type ComposePillTextFieldProps = Omit<TextInputProps, 'multiline' | 'style'> & {
+  value: string;
+  onChangeText: (text: string) => void;
+  variant?: ComposePillVariant;
+  maxLines?: number;
+  inputRef?: ComposePillTextInputRef;
+  layout?: ComposePillLineLayoutState;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function ComposePillTextField({
+  value,
+  onChangeText,
+  variant = 'surface',
+  maxLines = MAX_LINES_DEFAULT,
+  inputRef,
+  layout,
+  placeholder,
+  placeholderTextColor,
+  onFocus,
+  onBlur,
+  editable,
+  style,
+  ...rest
+}: ComposePillTextFieldProps) {
+  const internalLayout = useComposePillLineLayout(value, { maxLines });
+  const {
+    lineCount,
+    isMultiline,
+    inputMaxHeight,
+    handleContentSizeChange,
+    setLineCount,
+  } = layout ?? internalLayout;
+
+  const handleChange = useCallback(
+    (text: string) => {
+      onChangeText(text);
+      if (!text) {
+        setLineCount(1);
+      }
+    },
+    [onChangeText, setLineCount],
+  );
+
+  const variantColors = composePillVariantColors(variant);
+
+  return (
+    <TextInput
+      ref={inputRef}
+      value={value}
+      onChangeText={handleChange}
+      onContentSizeChange={handleContentSizeChange}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      placeholder={placeholder}
+      placeholderTextColor={placeholderTextColor ?? variantColors.placeholder}
+      multiline
+      scrollEnabled={lineCount >= maxLines}
+      blurOnSubmit={false}
+      returnKeyType="default"
+      editable={editable}
+      style={[
+        styles.input,
+        {
+          color: variantColors.text,
+          maxHeight: inputMaxHeight,
+          textAlignVertical: isMultiline ? 'top' : 'center',
+        },
+        style,
+      ]}
+      {...(Platform.OS === 'android' ? { includeFontPadding: false } : {})}
+      {...(Platform.OS === 'web'
+        ? ({
+            outlineStyle: 'none',
+            resize: 'none',
+            overflow: 'hidden',
+          } as object)
+        : {})}
+      {...rest}
+    />
+  );
+}
+
+export type ComposePillInputProps = {
+  value: string;
+  onChangeText: (text: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  maxLines?: number;
+  variant?: ComposePillVariant;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  inputRef?: ComposePillTextInputRef;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  endAction?: ReactNode;
+  replyPreview?: ComposePillReplyPreview | null;
+  style?: StyleProp<ViewStyle>;
+  transparentWrap?: boolean;
+  /** Bare row without pill chrome — text field only grows inline (ex.: comentários). */
+  bare?: boolean;
+  rowAlignItems?: 'center' | 'flex-end';
+};
+
+function composePillVariantColors(variant: ComposePillVariant) {
+  if (variant === 'overlay') {
+    return {
+      text: colors.white,
+      placeholder: 'rgba(255,255,255,0.55)',
+      pillBackground: 'rgba(28,28,30,0.72)',
+      pillBorder: 'rgba(255,255,255,0.08)',
+      replyBackground: 'rgba(28,28,30,0.72)',
+    };
+  }
+
+  if (variant === 'chrome') {
+    return {
+      text: m3Colors.onSurface,
+      placeholder: m3Colors.onSurfaceVariant,
+      pillBackground: colors.chromePillBackground,
+      pillBorder: colors.chromePillBorder,
+      replyBackground: colors.chromePillBackground,
+    };
+  }
+
+  return {
+    text: m3Colors.onSurface,
+    placeholder: m3Colors.onSurfaceVariant,
+    pillBackground: m3Colors.surfaceContainerHigh,
+    pillBorder: 'transparent',
+    replyBackground: m3Colors.surfaceContainerHigh,
+  };
+}
+
+export function ComposePillReplyBar({
+  preview,
+  variant = 'surface',
+}: {
+  preview: ComposePillReplyPreview;
+  variant?: ComposePillVariant;
+}) {
+  const variantColors = composePillVariantColors(variant);
+
+  return (
+    <View style={[styles.replyBar, { backgroundColor: variantColors.replyBackground }]}>
+      <View style={styles.replyBarAccent} />
+      <View style={styles.replyBarContent}>
+        <Text style={styles.replyBarName} numberOfLines={1}>
+          {preview.title}
+        </Text>
+        <Text style={styles.replyBarPreview} numberOfLines={1}>
+          {preview.body}
+        </Text>
+      </View>
+      <Pressable
+        onPress={preview.onDismiss}
+        hitSlop={8}
+        style={styles.replyBarClose}
+        accessibilityRole="button"
+        accessibilityLabel="Cancelar resposta"
+      >
+        <AppIcon name="close" size={14} color={m3Colors.onSurfaceVariant} />
+      </Pressable>
+    </View>
+  );
+}
+
+export function ComposePillIconButton({
+  label,
+  children,
+  onPress,
+  disabled,
+}: {
+  label: string;
+  children: ReactNode;
+  onPress?: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <Pressable
+      style={[styles.iconButton, disabled && styles.iconButtonDisabled]}
+      onPress={onPress}
+      disabled={disabled || !onPress}
+      hitSlop={6}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+export function ComposePillActionButton({
+  label,
+  children,
+  onPress,
+  disabled,
+}: {
+  label: string;
+  children: ReactNode;
+  onPress?: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <Pressable
+      style={[styles.actionButton, disabled && styles.actionButtonDisabled]}
+      onPress={onPress}
+      disabled={disabled || !onPress}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+export function ComposePillInput({
+  value,
+  onChangeText,
+  placeholder = 'Mensagem',
+  disabled,
+  maxLines = MAX_LINES_DEFAULT,
+  variant = 'surface',
+  onFocus,
+  onBlur,
+  inputRef,
+  leading,
+  trailing,
+  endAction,
+  replyPreview,
+  style,
+  transparentWrap = false,
+  bare = false,
+  rowAlignItems = bare ? 'center' : 'flex-end',
+}: ComposePillInputProps) {
+  const layout = useComposePillLineLayout(value, { maxLines });
+  const { isMultiline, pillHeight, resetLineCount } = layout;
+  const variantColors = composePillVariantColors(variant);
+
+  const handleChange = useCallback(
+    (text: string) => {
+      onChangeText(text);
+      if (!text) {
+        resetLineCount();
+      }
+    },
+    [onChangeText, resetLineCount],
+  );
+
+  const textField = (
+    <ComposePillTextField
+      value={value}
+      onChangeText={handleChange}
+      variant={variant}
+      maxLines={maxLines}
+      inputRef={inputRef}
+      layout={layout}
+      placeholder={placeholder}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      editable={!disabled}
+      style={bare ? styles.bareInput : undefined}
+    />
+  );
+
+  return (
+    <View
+      style={[
+        styles.wrap,
+        transparentWrap && styles.wrapTransparent,
+        variant === 'surface' && !transparentWrap && styles.wrapSurface,
+        style,
+      ]}
+    >
+      {replyPreview ? <ComposePillReplyBar preview={replyPreview} variant={variant} /> : null}
+
+      <View style={[styles.composerRow, { alignItems: rowAlignItems }]}>
+        {bare ? (
+          <>
+            {leading}
+            {textField}
+            {trailing}
+          </>
+        ) : (
+          <View
+            style={[
+              styles.inputPill,
+              isMultiline ? styles.inputPillExpanded : styles.inputPillSingle,
+              {
+                minHeight: pillHeight,
+                alignItems: isMultiline ? 'flex-end' : 'center',
+                backgroundColor: variantColors.pillBackground,
+                borderColor: variantColors.pillBorder,
+                borderWidth: variant === 'overlay' || variant === 'chrome' ? 1 : 0,
+              },
+            ]}
+          >
+            {leading}
+            {textField}
+            {trailing ? (
+              <View style={[styles.trailingIcons, isMultiline && styles.trailingIconsExpanded]}>
+                {trailing}
+              </View>
+            ) : null}
+          </View>
+        )}
+
+        {endAction}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    backgroundColor: 'transparent',
+  },
+  wrapTransparent: {
+    backgroundColor: 'transparent',
+  },
+  wrapSurface: {
+    backgroundColor: m3Colors.surface,
+  },
+  replyBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: spacing.sm,
+    marginTop: spacing.sm,
+    marginBottom: spacing.xs,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.md,
+    borderRadius: m3Shape.cornerMedium,
+    gap: spacing.sm,
+  },
+  replyBarAccent: {
+    width: 4,
+    alignSelf: 'stretch',
+    borderRadius: m3Shape.cornerExtraSmall,
+    backgroundColor: m3Colors.primary,
+  },
+  replyBarContent: {
+    flex: 1,
+    gap: 2,
+  },
+  replyBarName: {
+    color: m3Colors.primary,
+    fontSize: 13,
+    fontFamily: fonts.semibold,
+  },
+  replyBarPreview: {
+    color: m3Colors.onSurfaceVariant,
+    fontSize: 13,
+    fontFamily: fonts.regular,
+  },
+  replyBarClose: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  composerRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: spacing.sm,
+    paddingHorizontal: spacing.sm,
+    paddingTop: spacing.sm,
+  },
+  inputPill: {
+    flex: 1,
+    flexDirection: 'row',
+    paddingLeft: spacing.xs,
+    paddingRight: spacing.xs,
+    overflow: 'hidden',
+  },
+  inputPillSingle: {
+    borderRadius: m3Shape.cornerFull,
+  },
+  inputPillExpanded: {
+    borderRadius: m3Shape.cornerLarge,
+  },
+  iconButton: {
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconButtonDisabled: {
+    opacity: 0.4,
+  },
+  trailingIcons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  trailingIconsExpanded: {
+    paddingBottom: spacing.xs,
+  },
+  input: {
+    flex: 1,
+    fontSize: FONT_SIZE,
+    lineHeight: LINE_HEIGHT,
+    fontFamily: fonts.regular,
+    paddingHorizontal: spacing.xs,
+    paddingTop: VERTICAL_PAD,
+    paddingBottom: VERTICAL_PAD,
+  },
+  bareInput: {
+    minHeight: 40,
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+  },
+  actionButton: {
+    width: ACTION_BUTTON_SIZE,
+    height: ACTION_BUTTON_SIZE,
+    borderRadius: ACTION_BUTTON_SIZE / 2,
+    backgroundColor: m3Colors.primary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  actionButtonDisabled: {
+    opacity: 0.45,
+  },
+});
+
+export const COMPOSE_PILL_ACTION_BUTTON_SIZE = ACTION_BUTTON_SIZE;

package/src/renderer/ui/index.ts

@@ -71,6 +71,23 @@ export { ComposeMediaShortcut, COMPOSE_MEDIA_TILE_SIZE } from './compose-media-s
 export { ComposeRecentMediaGrid, type ComposeRecentMediaItem } from './compose-recent-media-grid';
 export { ComposeScreenHeader } from './compose-screen-header';
 export { ComposeTextArea, ComposeMediaPreviewFrame } from './compose-text-area';
+export {
+  ComposePillActionButton,
+  ComposePillIconButton,
+  ComposePillInput,
+  ComposePillReplyBar,
+  ComposePillTextField,
+  COMPOSE_PILL_ACTION_BUTTON_SIZE,
+  countComposePillLines,
+  pillHeightForLineCount,
+  useComposePillLineLayout,
+  type ComposePillInputProps,
+  type ComposePillLineLayout,
+  type ComposePillLineLayoutState,
+  type ComposePillReplyPreview,
+  type ComposePillTextFieldProps,
+  type ComposePillVariant,
+} from './compose-pill-input';
 export { ComposeToolbar, ComposeToolbarIcon, COMPOSE_TOOLBAR_ICON_SIZE } from './compose-toolbar';
 export { ComposeReplyAudienceSheet, type ComposeReplyAudienceOption, type ComposeReplyAudienceValue } from './compose-reply-audience-sheet';
 export { ComposeVisibilityRow } from './compose-visibility-row';