@bacon-pos/ui 0.2.0 → 0.3.0

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,269 @@
+import { type ReactNode } from 'react';
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import { Button, type ButtonVariant } from '../Button/Button';
+import { Icon } from '../Icon/Icon';
+import { Text } from '../Text/Text';
+import { ScrollArea } from '../_internal/ScrollArea';
+
+export interface DialogAction {
+  label: string;
+  onPress?: () => void;
+  /** Button variant. Defaults to `default` (lime). Pass another for other colors. */
+  variant?: ButtonVariant;
+  loading?: boolean;
+  disabled?: boolean;
+}
+
+export interface DialogCancelConfig {
+  /** Cancel label. Defaults to "Cancel". */
+  label?: string;
+  /** Handler. Defaults to `onClose`. */
+  onPress?: () => void;
+  /** Use the destructive style (subtle red) instead of the neutral secondary. */
+  destructive?: boolean;
+}
+
+export interface DialogProps {
+  /** Whether the dialog is shown. */
+  visible: boolean;
+  /** Called on backdrop press, close button, or Android back. */
+  onClose: () => void;
+  /** Required title. */
+  title: string;
+  /** Optional subtitle. */
+  subtitle?: string;
+  /** Any content — from text to a full form. */
+  children?: ReactNode;
+  /** Primary/secondary action buttons (right side). Keep total buttons ≤ 3. */
+  actions?: DialogAction[];
+  /** Optional cancel button (left side). */
+  cancel?: DialogCancelConfig;
+  /** Show the top-right close (×). Defaults to true. */
+  showClose?: boolean;
+  /** Render the close (×) in the destructive color. */
+  closeDestructive?: boolean;
+  /** Dismiss when the backdrop (overlay) is pressed. Defaults to false. */
+  dismissOnBackdrop?: boolean;
+  /**
+   * `inner` (default): the card caps at the screen height and its content
+   * scrolls inside. `page`: the card grows to its content and the whole modal
+   * scrolls (nothing behind moves) — better for short screens.
+   */
+  scrollMode?: 'inner' | 'page';
+  /** Keep the header pinned while content scrolls (inner mode). Defaults to true. */
+  stickyHeader?: boolean;
+  /** Keep the footer pinned while content scrolls (inner mode). Defaults to true. */
+  stickyFooter?: boolean;
+  /** Inner padding. Defaults to 24. */
+  padding?: number;
+  /** Vertical space between header↔content and content↔footer. Defaults to 24. */
+  contentSpacing?: number;
+  /** Corner radius. Defaults to 24. */
+  radius?: number;
+  /** Max width of the dialog card. Defaults to 560. */
+  maxWidth?: number;
+  /** Fraction of screen height the card may occupy (inner mode). Defaults to 0.9. */
+  maxHeightRatio?: number;
+  /** Scroll indicator color (a design-system color). Defaults to a subtle neutral. */
+  scrollbarColor?: string;
+  /** Override the card style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Dialog — an accessible, keyboard-aware modal that can hold anything from a
+ * short message to a full form (selects, date pickers, etc. keep working thanks
+ * to `keyboardShouldPersistTaps`). Content scrolls with an elegant thin,
+ * auto-hiding indicator. `scrollMode="page"` scrolls the whole modal on short
+ * screens instead of scrolling inside the card. Footer composes the
+ * design-system `Button`.
+ */
+export function Dialog({
+  visible,
+  onClose,
+  title,
+  subtitle,
+  children,
+  actions = [],
+  cancel,
+  showClose = true,
+  closeDestructive = false,
+  dismissOnBackdrop = false,
+  scrollMode = 'inner',
+  stickyHeader = true,
+  stickyFooter = true,
+  padding = 24,
+  contentSpacing = 24,
+  radius = 24,
+  maxWidth = 560,
+  maxHeightRatio = 0.9,
+  scrollbarColor,
+  style,
+}: DialogProps) {
+  const theme = useTheme();
+  const { height } = useWindowDimensions();
+  const indicatorColor = scrollbarColor ?? theme.colors.text.tertiary;
+
+  const closeBtn = showClose ? (
+    <Pressable
+      onPress={onClose}
+      hitSlop={8}
+      accessibilityRole="button"
+      accessibilityLabel="Close"
+      style={{ position: 'absolute', top: padding, right: padding, padding: 4, zIndex: 1 }}
+    >
+      <Icon
+        name="close"
+        size={24}
+        color={closeDestructive ? theme.colors.feedback.error : theme.colors.text.secondary}
+      />
+    </Pressable>
+  ) : null;
+
+  const header = (
+    <View style={{ paddingHorizontal: padding, paddingTop: padding, paddingBottom: contentSpacing }}>
+      <View style={{ paddingRight: showClose ? 40 : 0, gap: 4 }}>
+        <Text variant="h3" weight="semibold" color="primary">
+          {title}
+        </Text>
+        {subtitle ? (
+          <Text variant="bodyLarge" color="secondary">
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+
+  const contentBody = <View style={{ paddingHorizontal: padding }}>{children}</View>;
+
+  const hasFooter = cancel != null || actions.length > 0;
+  const footer = hasFooter ? (
+    <View
+      style={{
+        flexDirection: 'row',
+        gap: 12,
+        paddingHorizontal: padding,
+        paddingBottom: padding,
+        paddingTop: contentSpacing,
+      }}
+    >
+      {cancel ? (
+        <View style={{ flex: 1 }}>
+          <Button
+            fullWidth
+            variant={cancel.destructive ? 'destructive' : 'secondary'}
+            label={cancel.label ?? 'Cancel'}
+            onPress={cancel.onPress ?? onClose}
+          />
+        </View>
+      ) : null}
+      {actions.map((action, i) => (
+        <View key={i} style={{ flex: 1 }}>
+          <Button
+            fullWidth
+            variant={action.variant ?? 'default'}
+            label={action.label}
+            onPress={action.onPress}
+            loading={action.loading}
+            disabled={action.disabled}
+          />
+        </View>
+      ))}
+    </View>
+  ) : null;
+
+  const cardBase: ViewStyle = {
+    width: '100%',
+    maxWidth,
+    backgroundColor: theme.colors.background.default,
+    borderRadius: radius,
+    overflow: 'hidden',
+  };
+
+  const card =
+    scrollMode === 'page' ? (
+      <View accessibilityViewIsModal style={[cardBase, style]}>
+        {closeBtn}
+        {header}
+        {contentBody}
+        {footer}
+      </View>
+    ) : (
+      <View
+        accessibilityViewIsModal
+        style={[cardBase, { maxHeight: height * maxHeightRatio }, style]}
+      >
+        {closeBtn}
+        {stickyHeader ? header : null}
+        <ScrollArea
+          indicatorColor={indicatorColor}
+          style={{ flexShrink: 1 }}
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="interactive"
+        >
+          {!stickyHeader ? header : null}
+          {contentBody}
+          {!stickyFooter ? footer : null}
+        </ScrollArea>
+        {stickyFooter ? footer : null}
+      </View>
+    );
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      statusBarTranslucent
+      onRequestClose={onClose}
+    >
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        style={{ flex: 1 }}
+      >
+        <View style={{ flex: 1, backgroundColor: 'rgba(16, 18, 20, 0.55)' }}>
+          {scrollMode === 'page' ? (
+            <ScrollView
+              style={{ flex: 1 }}
+              contentContainerStyle={{ flexGrow: 1, padding: 16 }}
+              keyboardShouldPersistTaps="handled"
+              showsVerticalScrollIndicator={false}
+            >
+              <Pressable
+                style={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}
+                onPress={dismissOnBackdrop ? onClose : undefined}
+              >
+                <Pressable style={{ width: '100%', alignItems: 'center' }} onPress={() => {}}>
+                  {card}
+                </Pressable>
+              </Pressable>
+            </ScrollView>
+          ) : (
+            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 }}>
+              <Pressable
+                style={StyleSheet.absoluteFill}
+                onPress={dismissOnBackdrop ? onClose : undefined}
+                accessibilityElementsHidden
+                importantForAccessibility="no-hide-descendants"
+              />
+              {card}
+            </View>
+          )}
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}

package/src/components/Dialog/index.ts

@@ -0,0 +1,6 @@
+export {
+  Dialog,
+  type DialogProps,
+  type DialogAction,
+  type DialogCancelConfig,
+} from './Dialog';

package/src/components/_internal/ScrollArea.tsx

@@ -0,0 +1,95 @@
+import { useRef, useState, type ReactNode } from 'react';
+import {
+  Animated,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+export interface ScrollAreaProps {
+  children: ReactNode;
+  /** Thin indicator color (a design-system color). */
+  indicatorColor: string;
+  /** Indicator thickness. Defaults to 4. */
+  indicatorWidth?: number;
+  keyboardShouldPersistTaps?: 'always' | 'never' | 'handled';
+  keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+/**
+ * ScrollView with an elegant custom vertical indicator: thin, rounded, colored,
+ * and only visible while scrolling (fades out when idle). The native indicator
+ * is hidden so it looks the same on iOS, Android and web.
+ */
+export function ScrollArea({
+  children,
+  indicatorColor,
+  indicatorWidth = 4,
+  keyboardShouldPersistTaps,
+  keyboardDismissMode,
+  style,
+  contentContainerStyle,
+}: ScrollAreaProps) {
+  const [viewportH, setViewportH] = useState(0);
+  const [contentH, setContentH] = useState(0);
+  const scrollY = useRef(new Animated.Value(0)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const scrollable = contentH > viewportH + 1;
+  const thumbH = scrollable ? Math.max(24, (viewportH / contentH) * viewportH) : 0;
+  const maxScroll = Math.max(1, contentH - viewportH);
+  const translateY = scrollY.interpolate({
+    inputRange: [0, maxScroll],
+    outputRange: [0, viewportH - thumbH],
+    extrapolate: 'clamp',
+  });
+
+  const reveal = () => {
+    Animated.timing(opacity, { toValue: 1, duration: 120, useNativeDriver: true }).start();
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    hideTimer.current = setTimeout(() => {
+      Animated.timing(opacity, { toValue: 0, duration: 400, useNativeDriver: true }).start();
+    }, 900);
+  };
+
+  return (
+    <Animated.View style={[{ position: 'relative' }, style]}>
+      <Animated.ScrollView
+        style={{ flexShrink: 1 }}
+        contentContainerStyle={contentContainerStyle}
+        showsVerticalScrollIndicator={false}
+        scrollEventThrottle={16}
+        keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+        keyboardDismissMode={keyboardDismissMode}
+        onLayout={(e) => setViewportH(e.nativeEvent.layout.height)}
+        onContentSizeChange={(_w: number, h: number) => setContentH(h)}
+        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+          useNativeDriver: true,
+          listener: (_e: NativeSyntheticEvent<NativeScrollEvent>) => reveal(),
+        })}
+      >
+        {children}
+      </Animated.ScrollView>
+      {scrollable ? (
+        <Animated.View
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: 2,
+            width: indicatorWidth,
+            height: thumbH,
+            borderRadius: indicatorWidth / 2,
+            backgroundColor: indicatorColor,
+            opacity,
+            transform: [{ translateY }],
+          }}
+        />
+      ) : null}
+    </Animated.View>
+  );
+}

package/src/components/index.ts

@@ -6,6 +6,7 @@ export * from './Checkbox';
 export * from './Chip';
 export * from './CodeField';
 export * from './CodeInput';
+export * from './Dialog';
 export * from './Icon';
 export * from './IconButton';
 export * from './Input';
@@ -13,6 +14,7 @@ export * from './LinkButton';
 export * from './ProductCard';
 export * from './QuantityStepper';
 export * from './Radio';
+export * from './Spinner';
 export * from './Surface';
 export * from './Switch';
 export * from './Text';