@munchi_oy/native-ui 0.1.0

package/src/MModal.tsx

@@ -0,0 +1,287 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import { ArrowLeft, X } from "lucide-react-native";
+import {
+  Fragment,
+  type ReactNode,
+  createContext,
+  useContext,
+  useRef
+} from "react";
+import {
+  type GestureResponderEvent,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  View,
+  type ViewProps
+} from "react-native";
+import { MText } from "./MText";
+import { useIconColors } from "./hooks/useIconColors";
+import { cn } from "./utils";
+
+export enum ModalHeight {
+  ExtraSmall = "xs",
+  Small = "sm",
+  Medium = "md",
+  Large = "lg",
+  ExtraLarge = "xl",
+  ExtraExtraLarge = "xxl",
+  Auto = "auto"
+}
+
+type ModalContextValue = {
+  isFixed: boolean;
+};
+
+const ModalContext = createContext<ModalContextValue>({ isFixed: false });
+export const ModalScrollContext =
+  createContext<React.RefObject<ScrollView | null> | null>(null);
+
+const modalVariants = cva("rounded-2xl p-6 shadow-lg flex flex-col", {
+  variants: {
+    variant: {
+      xs: "w-[40%]",
+      sm: "w-[60%]",
+      md: "w-[80%]",
+      lg: "w-[95%]",
+      auto: "w-auto self-center",
+      fullscreen: "w-full h-full rounded-none"
+    },
+    height: {
+      [ModalHeight.ExtraSmall]: "h-[30%]",
+      [ModalHeight.Small]: "h-[40%]",
+      [ModalHeight.Medium]: "h-[60%]",
+      [ModalHeight.Large]: "h-[80%]",
+      [ModalHeight.ExtraLarge]: "h-[90%]",
+      [ModalHeight.ExtraExtraLarge]: "h-[96%]",
+      [ModalHeight.Auto]: "h-auto"
+    },
+    background: {
+      white: "bg-card",
+      dark: "bg-secondary",
+      primary: "bg-muted",
+      transparent: "bg-transparent"
+    }
+  },
+  defaultVariants: {
+    variant: "md",
+    height: ModalHeight.Auto,
+    background: "white"
+  }
+});
+
+export interface MModalProps extends VariantProps<typeof modalVariants> {
+  isVisible: boolean;
+  onClose: () => void;
+  onButtonClose?: () => void;
+  onBack?: () => void;
+  onDismiss?: () => void;
+  children: React.ReactNode;
+  header?: React.ReactNode;
+  headingText?: string;
+  containerClassName?: ViewProps["className"];
+  closable?: boolean;
+  footer?: React.ReactNode;
+  showCloseButton?: boolean;
+  showBackButton?: boolean;
+  keyboardAvoidingEnabled?: boolean;
+}
+
+interface ModalBodyProps {
+  children: React.ReactNode;
+  scrollable?: boolean;
+}
+
+const ModalBody = ({ children, scrollable = true }: ModalBodyProps) => {
+  const { isFixed } = useContext(ModalContext);
+  const scrollViewRef = useContext(ModalScrollContext);
+  if (!scrollable) {
+    return (
+      <View
+        className={cn(isFixed && "flex-1")}
+        style={isFixed ? { flex: 1 } : undefined}
+      >
+        <Pressable style={{ flex: 1 }}>{children}</Pressable>
+      </View>
+    );
+  }
+  return (
+    <View className={cn(isFixed && "flex-1")}>
+      <ScrollView
+        ref={scrollViewRef}
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ flexGrow: 1 }}
+        keyboardShouldPersistTaps="handled"
+        style={isFixed ? { flex: 1 } : undefined}
+      >
+        <Pressable style={{ flex: 1 }}>{children}</Pressable>
+      </ScrollView>
+    </View>
+  );
+};
+
+ModalBody.displayName = "ModalBody";
+
+const ModalFooter: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <View className="mt-auto flex-shrink-0">{children}</View>;
+};
+
+export const ModalContent: React.FC<{
+  body: ReactNode;
+  footer?: ReactNode;
+}> = ({ body, footer }) => (
+  <Fragment>
+    <MModal.Body>{body}</MModal.Body>
+    {footer && <MModal.Footer>{footer}</MModal.Footer>}
+  </Fragment>
+);
+
+const MModalComponent: React.FC<MModalProps> = (props) => {
+  const {
+    isVisible,
+    onClose,
+    children,
+    onBack,
+    onDismiss,
+    header,
+    headingText,
+    closable = true,
+    variant = "sm",
+    containerClassName,
+    height,
+    background = "white",
+    footer,
+    onButtonClose,
+    showCloseButton = true,
+    showBackButton = true,
+    keyboardAvoidingEnabled = true
+  } = props;
+  const isFixed = height && height !== ModalHeight.Auto;
+  const contextValue: ModalContextValue = { isFixed: isFixed ?? false };
+  const scrollViewRef = useRef<ScrollView>(null);
+  const { foreground } = useIconColors();
+
+  const renderHeader = () => {
+    if (onBack && showBackButton) {
+      return (
+        <View className="flex-row items-center justify-between">
+          <Pressable onPress={onBack} className="bg-muted rounded-full p-2">
+            <ArrowLeft color={foreground} size={24} />
+          </Pressable>
+          {headingText && (
+            <MText
+              className="font-munchi-bold text-foreground flex-1 text-left mx-3"
+              size="2xl"
+              numberOfLines={1}
+            >
+              {headingText}
+            </MText>
+          )}
+
+          {showCloseButton && (
+            <Pressable onPress={onClose} className="bg-muted rounded-full p-3">
+              <X color={foreground} size={24} />
+            </Pressable>
+          )}
+        </View>
+      );
+    }
+
+    if (header) {
+      return header;
+    }
+
+    if (headingText) {
+      return (
+        <View className="flex-row items-center justify-between">
+          <MText
+            className="font-munchi-bold text-foreground w-11/12"
+            size="2xl"
+            numberOfLines={1}
+          >
+            {headingText}
+          </MText>
+          {showCloseButton && (
+            <Pressable
+              onPress={onButtonClose ?? onClose}
+              className="bg-muted rounded-full p-3"
+            >
+              <X color={foreground} size={24} />
+            </Pressable>
+          )}
+        </View>
+      );
+    }
+
+    if (showCloseButton) {
+      return (
+        <View className="flex-row items-center justify-between">
+          <View className="flex-1" />
+          <Pressable onPress={onClose} className="bg-muted rounded-full p-3">
+            <X color={foreground} size={24} />
+          </Pressable>
+        </View>
+      );
+    }
+
+    return null;
+  };
+  const handleBackdropPress = (event: GestureResponderEvent) => {
+    if (event.target === event.currentTarget && closable) {
+      onClose();
+    }
+  };
+
+  return (
+    <Modal
+      transparent
+      visible={isVisible}
+      onRequestClose={closable ? onClose : undefined}
+      animationType="fade"
+      onDismiss={onDismiss}
+    >
+      <KeyboardAvoidingView
+        className="flex-1"
+        enabled={keyboardAvoidingEnabled}
+        behavior={Platform.select({
+          ios: "padding",
+          default: "height"
+        })}
+      >
+        <Pressable
+          className="flex-1 items-center justify-center bg-black/50 p-4"
+          onPress={handleBackdropPress}
+        >
+          <View
+            className={cn(
+              "max-h-[95%]",
+              modalVariants({ variant, height, background }),
+              containerClassName
+            )}
+          >
+            <ModalContext.Provider value={contextValue}>
+              <ModalScrollContext.Provider value={scrollViewRef}>
+                {renderHeader() !== null && (
+                  <View className="pb-4 flex-shrink-0">{renderHeader()}</View>
+                )}
+                {children}
+                {footer && <ModalFooter>{footer}</ModalFooter>}
+              </ModalScrollContext.Provider>
+            </ModalContext.Provider>
+          </View>
+        </Pressable>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+};
+
+export const MModal = Object.assign(MModalComponent, {
+  Body: ModalBody,
+  Footer: ModalFooter
+});
+
+MModal.displayName = "MModal";
+
+export default MModal;

package/src/MNativeAlert.tsx

@@ -0,0 +1,33 @@
+import { Alert } from "react-native";
+
+export interface MNativeAlertProps {
+  title: string;
+  description: string;
+  onPress: () => void;
+  onPressText: string;
+  onCancel: () => void;
+  onCancelText: string;
+}
+
+export const MNativeAlert = ({
+  title,
+  description,
+  onPress,
+  onPressText,
+  onCancel,
+  onCancelText
+}: MNativeAlertProps) => {
+  Alert.alert(title, description, [
+    {
+      text: onPressText,
+      onPress
+    },
+    {
+      text: onCancelText,
+      style: "cancel",
+      onPress: onCancel
+    }
+  ]);
+};
+
+MNativeAlert.displayName = "MNativeAlert";