@himakarinv/nativex 1.0.0

package/src/components/Modals/Modals.tsx

@@ -0,0 +1,313 @@
+import { useEffect, useState, type ReactNode } from 'react';
+import {
+  Modal,
+  ScrollView,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { button as buttonTokens, colors, radius, spacing, typography } from '../../theme';
+import { Button, ButtonSize, ButtonVariant } from '../Button';
+import { Checkbox, CheckboxSize } from '../Checkbox';
+
+export const ModalsSize = {
+  Small: 'sm',
+  Medium: 'md',
+  Large: 'lg',
+} as const;
+
+export type ModalsSize = (typeof ModalsSize)[keyof typeof ModalsSize];
+
+export const ModalsHeaderMediaAlign = {
+  Start: 'start',
+  Center: 'center',
+  End: 'end',
+} as const;
+
+export type ModalsHeaderMediaAlign = (typeof ModalsHeaderMediaAlign)[keyof typeof ModalsHeaderMediaAlign];
+
+export type ModalsResultWithDontShowAgain =
+  | { action: 'confirm'; dontShowAgain: boolean }
+  | { action: 'cancel'; dontShowAgain: boolean };
+
+export type ModalsProps = {
+  visible?: boolean;
+  title?: string | null;
+  headerSubtitle?: ReactNode;
+  headerMedia?: ReactNode;
+  headerMediaAlign?: ModalsHeaderMediaAlign;
+  showFooter?: boolean;
+  cancelText?: string;
+  confirmText?: string;
+  showDontShowAgain?: boolean;
+  dontShowAgainLabel?: string;
+  dontShowAgainChecked?: boolean;
+  size?: ModalsSize;
+  children?: ReactNode;
+  onCancel?: (result?: ModalsResultWithDontShowAgain | 'cancel') => void;
+  onConfirm?: (result?: ModalsResultWithDontShowAgain | 'confirm') => void;
+  onDontShowAgainChange?: (checked: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const HEIGHT_RATIO: Record<ModalsSize, number> = {
+  [ModalsSize.Small]: 0.48,
+  [ModalsSize.Medium]: 0.58,
+  [ModalsSize.Large]: 0.68,
+};
+
+const WIDTH_CAP: Record<ModalsSize, number> = {
+  [ModalsSize.Small]: spacing['7xl'] * 6,
+  [ModalsSize.Medium]: spacing['7xl'] * 7,
+  [ModalsSize.Large]: spacing['7xl'] * 8,
+};
+
+const FOOTER_BUTTON_SIZE: Record<ModalsSize, ButtonSize> = {
+  [ModalsSize.Small]: ButtonSize.Small,
+  [ModalsSize.Medium]: ButtonSize.Medium,
+  [ModalsSize.Large]: ButtonSize.Large,
+};
+
+const HEADER_ALIGN: Record<ModalsHeaderMediaAlign, { items: 'flex-start' | 'center' | 'flex-end'; text: 'left' | 'center' | 'right' }> =
+  {
+    [ModalsHeaderMediaAlign.Start]: { items: 'flex-start', text: 'left' },
+    [ModalsHeaderMediaAlign.Center]: { items: 'center', text: 'center' },
+    [ModalsHeaderMediaAlign.End]: { items: 'flex-end', text: 'right' },
+  };
+
+export function Modals({
+  visible = false,
+  title = null,
+  headerSubtitle,
+  headerMedia,
+  headerMediaAlign = ModalsHeaderMediaAlign.Start,
+  showFooter = true,
+  cancelText = 'Cancel',
+  confirmText = 'Confirm',
+  showDontShowAgain = false,
+  dontShowAgainLabel = "Don't show again",
+  dontShowAgainChecked,
+  size = ModalsSize.Medium,
+  children,
+  onCancel,
+  onConfirm,
+  onDontShowAgainChange,
+  style,
+}: ModalsProps) {
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const [skipChecked, setSkipChecked] = useState(dontShowAgainChecked ?? false);
+  const [headerHeight, setHeaderHeight] = useState<number>(spacing.none);
+  const [footerHeight, setFooterHeight] = useState<number>(spacing.none);
+
+  useEffect(() => {
+    setSkipChecked(dontShowAgainChecked ?? false);
+  }, [dontShowAgainChecked]);
+
+  useEffect(() => {
+    if (!showDontShowAgain) {
+      setSkipChecked(false);
+    }
+  }, [showDontShowAgain]);
+
+  useEffect(() => {
+    if (!showFooter) {
+      setFooterHeight(spacing.none);
+    }
+  }, [showFooter]);
+
+  const align = HEADER_ALIGN[headerMediaAlign];
+  const availableWidth = Math.max(spacing.none, windowWidth - spacing['2xl'] * 2);
+  const cardWidth = Math.min(availableWidth, WIDTH_CAP[size]);
+  const cardMaxHeight = Math.round(windowHeight * HEIGHT_RATIO[size]);
+  const chromeHeight = headerHeight + footerHeight;
+  const bodyMaxHeight = Math.max(spacing['7xl'], cardMaxHeight - chromeHeight);
+  const footerButtonSize = FOOTER_BUTTON_SIZE[size];
+  const compactLine = typography.fontSize.sm * typography.lineHeight.tight;
+  const titleLine = typography.fontSize.lg * typography.lineHeight.tight;
+
+  function emit(action: 'confirm' | 'cancel') {
+    if (showDontShowAgain) {
+      const result = { action, dontShowAgain: skipChecked };
+      if (action === 'confirm') {
+        onConfirm?.(result);
+      } else {
+        onCancel?.(result);
+      }
+      return;
+    }
+    if (action === 'confirm') {
+      onConfirm?.('confirm');
+    } else {
+      onCancel?.('cancel');
+    }
+  }
+
+  function onSkipChange(checked: boolean) {
+    setSkipChecked(checked);
+    onDontShowAgainChange?.(checked);
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      statusBarTranslucent
+      presentationStyle="overFullScreen"
+      onRequestClose={() => emit('cancel')}>
+      <View style={styles.overlay}>
+        <View
+          accessibilityViewIsModal
+          style={[styles.card, { width: cardWidth, maxHeight: cardMaxHeight }, style]}>
+          {title || headerMedia || headerSubtitle ? (
+            <View
+              style={[styles.header, { alignItems: align.items }]}
+              onLayout={(event) => setHeaderHeight(event.nativeEvent.layout.height)}>
+              {headerMedia ? <View style={[styles.headerMedia, { justifyContent: align.items }]}>{headerMedia}</View> : null}
+              {title ? (
+                <Text
+                  nativeID="modals-title"
+                  accessibilityRole="header"
+                  style={[styles.title, { textAlign: align.text, lineHeight: titleLine }]}>
+                  {title}
+                </Text>
+              ) : null}
+              {headerSubtitle ? (
+                <View style={styles.subtitleWrap}>
+                  {typeof headerSubtitle === 'string' ? (
+                    <Text style={[styles.subtitle, { textAlign: align.text, lineHeight: compactLine }]}>
+                      {headerSubtitle}
+                    </Text>
+                  ) : (
+                    headerSubtitle
+                  )}
+                </View>
+              ) : null}
+            </View>
+          ) : null}
+
+          <ScrollView
+            style={[styles.body, { maxHeight: bodyMaxHeight }]}
+            contentContainerStyle={styles.bodyContent}
+            keyboardShouldPersistTaps="handled"
+            nestedScrollEnabled
+            showsVerticalScrollIndicator={false}>
+            {typeof children === 'string' ? (
+              <Text style={[styles.bodyText, { lineHeight: compactLine }]}>{children}</Text>
+            ) : (
+              children
+            )}
+          </ScrollView>
+
+          {showFooter ? (
+            <View style={styles.footer} onLayout={(event) => setFooterHeight(event.nativeEvent.layout.height)}>
+              {showDontShowAgain ? (
+                <Checkbox
+                  size={CheckboxSize.Small}
+                  checked={skipChecked}
+                  label={dontShowAgainLabel}
+                  onCheckedChange={onSkipChange}
+                  style={styles.skip}
+                />
+              ) : null}
+              <View style={styles.actions}>
+                <Button
+                  label={confirmText}
+                  variant={ButtonVariant.Primary}
+                  size={footerButtonSize}
+                  fullWidth
+                  onPress={() => emit('confirm')}
+                />
+                <Button
+                  label={cancelText}
+                  variant={ButtonVariant.SecondaryGray}
+                  size={footerButtonSize}
+                  fullWidth
+                  onPress={() => emit('cancel')}
+                />
+              </View>
+            </View>
+          ) : null}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: spacing['2xl'],
+    paddingVertical: spacing['2xl'],
+    backgroundColor: colors.modal.backdrop,
+  },
+  card: {
+    backgroundColor: colors.white,
+    borderRadius: radius.lg,
+    overflow: 'hidden',
+  },
+  header: {
+    width: '100%',
+    gap: spacing.md,
+    paddingHorizontal: spacing.base,
+    paddingVertical: spacing.md,
+  },
+  headerMedia: {
+    width: '100%',
+    flexDirection: 'row',
+  },
+  title: {
+    width: '100%',
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.lg,
+    fontWeight: typography.fontWeight.semibold,
+    color: colors.inputDropdown.text,
+  },
+  subtitleWrap: {
+    width: '100%',
+    marginTop: -spacing.sm,
+  },
+  subtitle: {
+    width: '100%',
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.regular,
+    color: colors.gray.dark,
+  },
+  body: {
+    flexGrow: 0,
+    flexShrink: 1,
+    width: '100%',
+  },
+  bodyContent: {
+    paddingHorizontal: spacing.base,
+    paddingVertical: spacing.md,
+  },
+  bodyText: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.regular,
+    color: colors.gray.dark,
+  },
+  footer: {
+    width: '100%',
+    gap: spacing.md,
+    paddingHorizontal: spacing.base,
+    paddingVertical: spacing.md,
+  },
+  skip: {
+    alignSelf: 'flex-start',
+  },
+  actions: {
+    width: '100%',
+    gap: spacing.md,
+  },
+});
+
+export const HEADER_MEDIA_SIZE = buttonTokens.height.lg;

package/src/components/Modals/index.ts

@@ -0,0 +1,2 @@
+export { Modals, ModalsSize, ModalsHeaderMediaAlign, HEADER_MEDIA_SIZE } from './Modals';
+export type { ModalsProps, ModalsResultWithDontShowAgain } from './Modals';

package/src/components/Offcanvas/Offcanvas.tsx

@@ -0,0 +1,404 @@
+import { type ReactNode } from 'react';
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { borders, button as buttonTokens, colors, radius, spacing, typography } from '../../theme';
+import { Button, ButtonSize, ButtonVariant, IconPosition } from '../Button';
+import { IconName } from '../Icon';
+
+export const OffcanvasSize = {
+  Small: 'sm',
+  Medium: 'md',
+  Large: 'lg',
+  ExtraLarge: 'xl',
+  ExtraExtraLarge: 'xxl',
+} as const;
+
+export type OffcanvasSize = (typeof OffcanvasSize)[keyof typeof OffcanvasSize];
+
+export const DEFAULT_OFFCANVAS_SIZE: OffcanvasSize = OffcanvasSize.Medium;
+
+export const OffcanvasPosition = {
+  Start: 'start',
+  End: 'end',
+  Top: 'top',
+  Bottom: 'bottom',
+} as const;
+
+export type OffcanvasPosition = (typeof OffcanvasPosition)[keyof typeof OffcanvasPosition];
+
+export type OffcanvasBackdrop = boolean | 'static';
+
+export type OffcanvasFooterButton = {
+  action: string;
+  label: string;
+  variant: ButtonVariant;
+  size?: ButtonSize;
+  ariaLabel?: string;
+  disabled?: boolean;
+};
+
+export type OffcanvasOpenConfig = {
+  size?: OffcanvasSize;
+  position?: OffcanvasPosition;
+  backdrop?: OffcanvasBackdrop;
+  keyboard?: boolean;
+  scroll?: boolean;
+  animation?: boolean;
+};
+
+export type OffcanvasProps = {
+  visible?: boolean;
+  title: string;
+  titleId?: string;
+  showCloseButton?: boolean;
+  closeAriaLabel?: string;
+  footerButtons?: ReadonlyArray<OffcanvasFooterButton>;
+  size?: OffcanvasSize;
+  position?: OffcanvasPosition;
+  backdrop?: OffcanvasBackdrop;
+  keyboard?: boolean;
+  scroll?: boolean;
+  animation?: boolean;
+  children?: ReactNode;
+  onCloseRequested?: () => void;
+  onFooterAction?: (action: string) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const SIDE_PEEK: Record<OffcanvasSize, number> = {
+  [OffcanvasSize.Small]: spacing['7xl'],
+  [OffcanvasSize.Medium]: spacing.xl,
+  [OffcanvasSize.Large]: spacing.md,
+  [OffcanvasSize.ExtraLarge]: spacing.none,
+  [OffcanvasSize.ExtraExtraLarge]: spacing.none,
+};
+
+const SHEET_HEIGHT_RATIO: Record<OffcanvasSize, number> = {
+  [OffcanvasSize.Small]: 0.42,
+  [OffcanvasSize.Medium]: 0.55,
+  [OffcanvasSize.Large]: 0.68,
+  [OffcanvasSize.ExtraLarge]: 0.82,
+  [OffcanvasSize.ExtraExtraLarge]: 0.94,
+};
+
+export function offcanvasOpenOptions(config: OffcanvasOpenConfig = {}) {
+  return {
+    size: config.size ?? DEFAULT_OFFCANVAS_SIZE,
+    position: config.position ?? OffcanvasPosition.End,
+    backdrop: config.backdrop ?? true,
+    keyboard: config.keyboard ?? true,
+    scroll: config.scroll ?? false,
+    animation: config.animation ?? true,
+  };
+}
+
+function isHorizontal(position: OffcanvasPosition) {
+  return position === OffcanvasPosition.Start || position === OffcanvasPosition.End;
+}
+
+function dismissKeyboard() {
+  Keyboard.dismiss();
+}
+
+export function Offcanvas({
+  visible = false,
+  title,
+  titleId = 'app-offcanvas-title',
+  showCloseButton = true,
+  closeAriaLabel = 'Close',
+  footerButtons = [],
+  size = DEFAULT_OFFCANVAS_SIZE,
+  position = OffcanvasPosition.End,
+  backdrop = true,
+  keyboard = true,
+  scroll: _scroll = false,
+  animation = true,
+  children,
+  onCloseRequested,
+  onFooterAction,
+  style,
+}: OffcanvasProps) {
+  const animationType = !animation ? 'none' : position === OffcanvasPosition.Bottom ? 'slide' : 'fade';
+
+  function requestClose() {
+    dismissKeyboard();
+    onCloseRequested?.();
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType={animationType}
+      statusBarTranslucent
+      presentationStyle="overFullScreen"
+      onRequestClose={keyboard ? requestClose : undefined}>
+      <SafeAreaProvider>
+        <OffcanvasSheet
+          title={title}
+          titleId={titleId}
+          showCloseButton={showCloseButton}
+          closeAriaLabel={closeAriaLabel}
+          footerButtons={footerButtons}
+          size={size}
+          position={position}
+          backdrop={backdrop}
+          onCloseRequested={requestClose}
+          onFooterAction={onFooterAction}
+          style={style}>
+          {children}
+        </OffcanvasSheet>
+      </SafeAreaProvider>
+    </Modal>
+  );
+}
+
+type SheetProps = Omit<
+  OffcanvasProps,
+  'visible' | 'keyboard' | 'animation' | 'scroll' | 'title'
+> & {
+  title: string;
+};
+
+function OffcanvasSheet({
+  title,
+  titleId,
+  showCloseButton,
+  closeAriaLabel,
+  footerButtons = [],
+  size = DEFAULT_OFFCANVAS_SIZE,
+  position = OffcanvasPosition.End,
+  backdrop = true,
+  children,
+  onCloseRequested,
+  onFooterAction,
+  style,
+}: SheetProps) {
+  const insets = useSafeAreaInsets();
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const dimmed = backdrop !== false;
+  const dismissOnScrim = backdrop === true;
+  const horizontal = isHorizontal(position);
+  const panelWidth = Math.max(spacing['7xl'] * 5, windowWidth - SIDE_PEEK[size]);
+  const panelHeight = Math.round(windowHeight * SHEET_HEIGHT_RATIO[size]);
+  const titleLine = typography.fontSize.lg * 1.3;
+  const showHandle = position === OffcanvasPosition.Bottom || position === OffcanvasPosition.Top;
+
+  const overlayDirection = horizontal ? 'row' : 'column';
+  const panelFirst = position === OffcanvasPosition.Start || position === OffcanvasPosition.Top;
+
+  const panelRadius: ViewStyle =
+    position === OffcanvasPosition.End && SIDE_PEEK[size] > spacing.none
+      ? { borderTopLeftRadius: radius.lg, borderBottomLeftRadius: radius.lg }
+      : position === OffcanvasPosition.Start && SIDE_PEEK[size] > spacing.none
+        ? { borderTopRightRadius: radius.lg, borderBottomRightRadius: radius.lg }
+        : position === OffcanvasPosition.Bottom
+          ? { borderTopLeftRadius: radius.lg, borderTopRightRadius: radius.lg }
+          : position === OffcanvasPosition.Top
+            ? { borderBottomLeftRadius: radius.lg, borderBottomRightRadius: radius.lg }
+            : {};
+
+  const panelSafe: ViewStyle = {
+    paddingTop: position === OffcanvasPosition.Bottom ? spacing.none : insets.top,
+    paddingBottom: position === OffcanvasPosition.Top ? spacing.none : insets.bottom,
+    paddingLeft: position === OffcanvasPosition.End ? spacing.none : insets.left,
+    paddingRight: position === OffcanvasPosition.Start ? spacing.none : insets.right,
+  };
+
+  const panelSize: ViewStyle = horizontal
+    ? { width: panelWidth, height: '100%' }
+    : { width: '100%', height: panelHeight };
+
+  function onFooterPress(button: OffcanvasFooterButton) {
+    if (button.disabled) {
+      return;
+    }
+    onFooterAction?.(button.action);
+  }
+
+  const handle = showHandle ? (
+    <View
+      style={position === OffcanvasPosition.Top ? styles.handleBottom : styles.handleTop}
+      accessible={false}>
+      <View style={styles.handle} />
+    </View>
+  ) : null;
+
+  const panel = (
+    <View
+      accessibilityViewIsModal
+      accessibilityLabel={title}
+      style={[styles.panel, panelSize, panelRadius, panelSafe, style]}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        style={styles.panelInner}>
+        {position === OffcanvasPosition.Bottom ? handle : null}
+
+        <View style={styles.header}>
+          <Text
+            nativeID={titleId}
+            accessibilityRole="header"
+            numberOfLines={2}
+            style={[styles.title, { lineHeight: titleLine }]}>
+            {title}
+          </Text>
+          {showCloseButton ? (
+            <Button
+              variant={ButtonVariant.LinkGray}
+              size={ButtonSize.Small}
+              iconPosition={IconPosition.Only}
+              iconName={IconName.Close}
+              accessibilityLabel={closeAriaLabel}
+              onPress={onCloseRequested}
+            />
+          ) : null}
+        </View>
+
+        <ScrollView
+          style={styles.body}
+          contentContainerStyle={styles.bodyContent}
+          keyboardShouldPersistTaps="handled"
+          nestedScrollEnabled
+          showsVerticalScrollIndicator={false}>
+          {typeof children === 'string' ? <Text style={styles.bodyText}>{children}</Text> : children}
+        </ScrollView>
+
+        {footerButtons.length > 0 ? (
+          <View style={styles.footer}>
+            {footerButtons.map((button) => (
+              <View key={button.action} style={styles.footerItem}>
+                <Button
+                  label={button.label}
+                  variant={button.variant}
+                  size={button.size ?? ButtonSize.Medium}
+                  disabled={button.disabled}
+                  accessibilityLabel={button.ariaLabel ?? button.label}
+                  onPress={() => onFooterPress(button)}
+                />
+              </View>
+            ))}
+          </View>
+        ) : null}
+
+        {position === OffcanvasPosition.Top ? handle : null}
+      </KeyboardAvoidingView>
+    </View>
+  );
+
+  const scrim = (
+    <Pressable
+      style={styles.scrim}
+      disabled={!dismissOnScrim}
+      onPress={dismissOnScrim ? onCloseRequested : undefined}
+      accessibilityRole={dismissOnScrim ? 'button' : undefined}
+      accessibilityLabel={dismissOnScrim ? 'Dismiss' : undefined}
+    />
+  );
+
+  return (
+    <View
+      style={[
+        styles.overlay,
+        {
+          flexDirection: overlayDirection,
+          backgroundColor: dimmed ? colors.modal.backdrop : colors.transparent,
+        },
+      ]}>
+      {panelFirst ? panel : scrim}
+      {panelFirst ? scrim : panel}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+  },
+  scrim: {
+    flex: 1,
+  },
+  panel: {
+    backgroundColor: colors.white,
+    overflow: 'hidden',
+  },
+  panelInner: {
+    flex: 1,
+  },
+  handleTop: {
+    alignItems: 'center',
+    paddingTop: spacing.sm,
+  },
+  handleBottom: {
+    alignItems: 'center',
+    paddingBottom: spacing.sm,
+  },
+  handle: {
+    width: spacing['7xl'],
+    height: spacing.sm,
+    borderRadius: radius.pill,
+    backgroundColor: colors.gray.medium,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing.md,
+    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.lg,
+    borderBottomWidth: borders.width.thin,
+    borderBottomColor: colors.borderSubtle,
+  },
+  title: {
+    flex: 1,
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.lg,
+    fontWeight: typography.fontWeight.bold,
+    color: colors.text.primary,
+  },
+  body: {
+    flexGrow: 1,
+    flexShrink: 1,
+    minHeight: spacing.none,
+  },
+  bodyContent: {
+    paddingVertical: spacing.lg,
+    paddingHorizontal: spacing.lg,
+    gap: spacing.lg,
+  },
+  bodyText: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.regular,
+    color: colors.gray.dark,
+    lineHeight: typography.fontSize.sm * typography.lineHeight.tight,
+  },
+  footer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: spacing.md,
+    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.lg,
+    borderTopWidth: borders.width.thin,
+    borderTopColor: colors.borderSubtle,
+  },
+  footerItem: {
+    justifyContent: 'center',
+    minHeight: buttonTokens.height.md,
+  },
+});