ncore-ui-kit 1.0.0-pre-alpha.0

package/src/components/dialog/index.tsx

@@ -0,0 +1,336 @@
+import {
+    useImperativeHandle,
+    forwardRef,
+    useEffect,
+    useRef
+} from "react";
+import {
+    Animated,
+    Easing,
+    View
+} from "react-native";
+import type IDialogProps from "./type";
+import type {
+    IDialogRef
+} from "./type";
+import stylesheet, {
+    useStyles
+} from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import type {
+    RefForwardingComponent
+} from "../../types";
+import type {
+    IModalRef
+} from "../modal/type";
+import {
+    X as XIcon
+} from "lucide-react-native";
+import Button from "../button";
+import Modal from "../modal";
+import Text from "../text";
+import {
+    uuid
+} from "../../utils";
+
+const Dialog: RefForwardingComponent<IDialogRef, IDialogProps> = ({
+    bottomContentContainerStyle,
+    contentJustify = "centered",
+    closeAnimationDelay = 100,
+    openAnimationDelay = 100,
+    contentContainerStyle,
+    bottomContainerStyle,
+    headerContainerStyle,
+    secondaryButtonStyle,
+    secondaryButtonProps,
+    primaryButtonStyle,
+    primaryButtonProps,
+    closeIconProps = {
+        color: "low",
+        size: 22
+    },
+    isVisible = false,
+    withModal = true,
+    headerComponent,
+    bottomComponent,
+    onOverlayPress,
+    variant = "ok",
+    modalProps,
+    id: outID,
+    onClosed,
+    children,
+    content,
+    style,
+    title
+}, ref) => {
+    const {
+        radiuses,
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const id = useRef(outID ? outID : uuid());
+
+    const {
+        bottomContentContainer: bottomContentContainerDynamicStyle,
+        headerContainer: headerContainerDynamicStyle,
+        bottomContainer: bottomContainerDynamicStyle,
+        primaryButton: primaryButtonDynamicStyle,
+        contentText: contentTextDynamicStyle,
+        headerTitle: headerTitleDynamicStyle,
+        container: containerDynamicStyle,
+        closeIcon: closeIconDynamicStyle,
+        content: contentDynamicStyle
+    } = useStyles({
+        contentJustify,
+        isVisible,
+        radiuses,
+        variant,
+        colors,
+        spaces
+    });
+
+    const scaleAnim = useRef(new Animated.Value(0)).current;
+
+    const modalRef = useRef<IModalRef>(null);
+
+    useEffect(() => {
+        if(isVisible) {
+            Animated.timing(scaleAnim, {
+                duration: openAnimationDelay,
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 1
+            }).start();
+        }
+    }, [isVisible]);
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            closeAnimation
+        }),
+        []
+    );
+
+    const closeAnimation = (_onClosed?: (props: {
+        id: string;
+    }) => void) => {
+        Animated.timing(scaleAnim, {
+            duration: closeAnimationDelay,
+            useNativeDriver: true,
+            easing: Easing.linear,
+            toValue: 0
+        }).start(({
+            finished
+        }) => {
+            if(finished) {
+                if(_onClosed) _onClosed({
+                    id: id.current
+                });
+
+                if(onClosed) onClosed({
+                    id: id.current
+                });
+
+                if(modalRef && modalRef.current) modalRef.current.closeAnimation();
+            }
+        });
+    };
+
+    const renderHeader = () => {
+        return <View
+            style={[
+                headerContainerStyle,
+                stylesheet.headerContainer,
+                headerContainerDynamicStyle
+            ]}
+        >
+            {headerComponent || <Text
+                style={[
+                    stylesheet.headerTitle,
+                    headerTitleDynamicStyle
+                ]}
+                variant="titleLargeSize"
+                color="mid"
+            >
+                {title}
+            </Text>}
+        </View>;
+    };
+
+    const renderBottom = () => {
+        if(variant === "info") {
+            return null;
+        }
+
+        return <View
+            style={[
+                bottomContainerStyle,
+                stylesheet.bottomContainer,
+                bottomContainerDynamicStyle
+            ]}
+        >
+            {bottomComponent || <View
+                style={[
+                    bottomContentContainerStyle,
+                    stylesheet.bottomContentContainer,
+                    bottomContentContainerDynamicStyle
+                ]}
+            >
+                {secondaryButton()}
+                {primaryButton()}
+            </View>}
+        </View>;
+    };
+
+    const secondaryButton = () => {
+        if(variant !== "yes-no") {
+            return null;
+        }
+
+        return <Button
+            type="neutral"
+            {...secondaryButtonProps}
+            onPress={() => {
+                if(secondaryButtonProps?.onPress) secondaryButtonProps.onPress({
+                    closeAnimation: (onClosed?: (props: {
+                        id: string;
+                    }) => void) => {
+                        closeAnimation(onClosed);
+                    }
+                });
+            }}
+            spreadBehaviour={contentJustify === "centered" ? "stretch" : "free"}
+            title={secondaryButtonProps?.title || localize("cancel")}
+            style={secondaryButtonStyle}
+            variant="outline"
+        />;
+    };
+
+    const primaryButton = () => {
+        return <Button
+            type="primary"
+            size="medium"
+            {...primaryButtonProps}
+            spreadBehaviour={contentJustify === "centered" ? "stretch" : "free"}
+            onPress={() => {
+                if(primaryButtonProps?.onPress) primaryButtonProps?.onPress({
+                    closeAnimation: (onClosed?: (props: {
+                        id: string;
+                    }) => void) => {
+                        closeAnimation(onClosed);
+                    }
+                });
+            }}
+            title={primaryButtonProps?.title || localize("ok")}
+            style={[
+                primaryButtonStyle,
+                stylesheet.primaryButton,
+                primaryButtonDynamicStyle
+            ]}
+            variant="filled"
+        />;
+    };
+
+    const renderCloseIcon = () => {
+        if(variant !== "info") {
+            return null;
+        }
+
+        if(contentJustify === "centered") {
+            return null;
+        }
+
+        return <Button
+            onPress={() => {
+                if(onOverlayPress) onOverlayPress({
+                    closeAnimation: (onClosed?: (props: {
+                        id: string;
+                    }) => void) => {
+                        closeAnimation(onClosed);
+                    }
+                });
+            }}
+            icon={() => <XIcon
+                color={closeIconProps.color}
+                size={closeIconProps.size}
+            />}
+            style={[
+                stylesheet.closeIcon,
+                closeIconDynamicStyle
+            ]}
+            isCustomPadding={true}
+            variant="ghost"
+        />;
+    };
+
+    const renderDialog = () => {
+        if(!isVisible) {
+            return null;
+        }
+
+        return <Animated.View
+            style={[
+                style,
+                stylesheet.container,
+                containerDynamicStyle,
+                {
+                    transform: [{
+                        scale: scaleAnim
+                    }]
+                }
+            ]}
+        >
+            {renderCloseIcon()}
+            {renderHeader()}
+            <View
+                style={[
+                    contentContainerStyle,
+                    stylesheet.content,
+                    contentDynamicStyle
+                ]}
+            >
+                {children || <Text
+                    style={[
+                        stylesheet.contentText,
+                        contentTextDynamicStyle
+                    ]}
+                    variant="bodyLargeSize"
+                >
+                    {content}
+                </Text>}
+            </View>
+            {renderBottom()}
+        </Animated.View>;
+    };
+
+    if(!isVisible) {
+        return null;
+    }
+
+    return withModal ? <Modal
+        {...modalProps}
+        id={`${id.current}-modal`}
+        ref={modalRef}
+        onOverlayPress={() => {
+            if(onOverlayPress) onOverlayPress({
+                closeAnimation: (onClosed?: (props: {
+                    id: string;
+                }) => void) => {
+                    closeAnimation(onClosed);
+                }
+            });
+        }}
+    >
+        {renderDialog()}
+    </Modal> : renderDialog();
+};
+export default forwardRef(Dialog);

package/src/components/dialog/stylesheet.ts

@@ -0,0 +1,129 @@
+import {
+    type TextStyle,
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import {
+    type DialogDynamicStyleType
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flexDirection: "column",
+        position: "relative",
+        overflow: "hidden",
+        maxHeight: "80%",
+        maxWidth: "85%",
+        minWidth: "23%",
+        zIndex: 99998
+    },
+    content: {
+        flexWrap: "wrap"
+    },
+    headerContainer: {
+        paddingBottom: 0
+    },
+    bottomContainer: {
+        width: "100%"
+    },
+    bottomContentContainer: {
+        justifyContent: "flex-end",
+        flexDirection: "row"
+    },
+    headerTitle: {
+
+    },
+    contentText: {
+
+    },
+    primaryButton: {
+
+    },
+    closeIcon: {
+        position: "absolute",
+        right: 0,
+        top: 0
+    }
+});
+
+export const useStyles = ({
+    contentJustify,
+    isVisible,
+    radiuses,
+    variant,
+    colors,
+    spaces
+}: DialogDynamicStyleType) => {
+    const styles = {
+        container: {
+            backgroundColor: colors.content.container.default,
+            borderRadius: radiuses.md
+        } as Mutable<ViewStyle>,
+        content: {
+            paddingBottom: spaces.spacingMd,
+            paddingRight: spaces.spacingMd,
+            paddingLeft: spaces.spacingMd,
+            paddingTop: spaces.spacingMd
+        } as Mutable<ViewStyle>,
+        headerContainer: {
+            paddingRight: spaces.spacingMd,
+            paddingLeft: spaces.spacingMd,
+            paddingTop: spaces.spacingLg
+        } as Mutable<ViewStyle>,
+        bottomContainer: {
+            paddingTop: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        bottomContentContainer: {
+            paddingBottom: spaces.spacingMd,
+            paddingRight: spaces.spacingMd,
+            paddingLeft: spaces.spacingMd
+        } as Mutable<ViewStyle>,
+        headerTitle: {
+
+        } as Mutable<TextStyle>,
+        contentText: {
+
+        } as Mutable<TextStyle>,
+        closeIcon: {
+            padding: spaces.spacingMd
+        } as Mutable<ViewStyle>,
+        primaryButton: {
+
+        } as Mutable<ViewStyle>
+    };
+
+    if(variant === "yes-no") {
+        styles.primaryButton.marginLeft = spaces.spacingMd;
+    }
+
+    if(isVisible === false) {
+        styles.container.display = "none";
+    }
+
+    if(contentJustify === "centered") {
+        styles.container.justifyContent = "center";
+        styles.container.alignItems = "center";
+
+        styles.content.justifyContent = "center";
+        styles.content.alignItems = "center";
+        styles.content.display = "flex";
+
+        styles.contentText.textAlign = "center";
+
+        styles.headerContainer.justifyContent = "center";
+        styles.headerContainer.alignItems = "center";
+        styles.headerContainer.display = "flex";
+
+        styles.headerTitle.textAlign = "center";
+    }
+
+    if(variant === "info") {
+        styles.content.paddingBottom = spaces.spacingLg;
+    }
+
+    return styles;
+};
+export default stylesheet;

package/src/components/dialog/type.ts

@@ -0,0 +1,79 @@
+import {
+    type ReactNode
+} from "react";
+import {
+    type StyleProp,
+    type ViewStyle
+} from "react-native";
+import type {
+    ModalInternalProps
+} from "../modal/type";
+import type IButtonProps from "../button/type";
+import type {
+    INCoreUIKitIconProps
+} from "../../types";
+
+export type IDialogRef = {
+    closeAnimation: (onClosed: (props: {
+        id: string;
+    }) => void) => void;
+};
+
+export type DialogDynamicStyleType = {
+    radiuses: NCoreUIKit.ActivePalette["radiuses"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    contentJustify?: DialogContentJustify;
+    variant: DialogVariant;
+    isVisible?: boolean;
+};
+
+export type DialogVariant = "yes-no" | "ok" | "info";
+
+export type DialogContentJustify = "centered" | "language-based";
+
+type DialogButton = Omit<IButtonProps, "onPress"> & {
+    onPress?: (props: {
+        closeAnimation: (onClosed?: (props: {
+            id: string;
+        }) => void) => void;
+    }) => void;
+};
+
+interface IDialogProps {
+    bottomContentContainerStyle?: StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
+    contentContainerStyle?: StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
+    bottomContainerStyle?: StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
+    headerContainerStyle?: StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
+    style?: StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
+    onOverlayPress?: (props: {
+        closeAnimation: (onClosed?: (props: {
+            id: string;
+        }) => void) => void;
+    }) => void;
+    secondaryButtonStyle?: IButtonProps["style"];
+    modalProps?: Omit<ModalInternalProps, "id">;
+    primaryButtonStyle?: IButtonProps["style"];
+    closeIconProps?: INCoreUIKitIconProps;
+    contentJustify?: DialogContentJustify;
+    secondaryButtonProps?: DialogButton;
+    primaryButtonProps?: DialogButton;
+    closeAnimationDelay?: number;
+    openAnimationDelay?: number;
+    headerComponent?: ReactNode;
+    bottomComponent?: ReactNode;
+    variant?: DialogVariant;
+    children?: ReactNode;
+    isVisible?: boolean;
+    withModal?: boolean;
+    onClosed?: (props: {
+        id: string;
+    }) => void;
+    content?: string;
+    title?: string;
+    id?: string;
+};
+
+export type {
+    IDialogProps as default
+};

package/src/components/index.ts

@@ -0,0 +1,163 @@
+export {
+    default as Text
+} from "./text";
+
+export {
+    default as Button
+} from "./button";
+
+export {
+    default as PageContainer
+} from "./pageContainer";
+
+export {
+    default as Dialog
+} from "./dialog";
+
+export type {
+    IDialogRef
+} from "./dialog/type";
+
+export {
+    default as Modal
+} from "./modal";
+
+export type {
+    IModalRef
+} from "./modal/type";
+
+export {
+    default as Loading
+} from "./loading";
+
+export {
+    default as TextInput
+} from "./textInput";
+
+export type {
+    ITextInputRef
+} from "./textInput/type";
+
+export {
+    default as SelectBox
+} from "./selectBox";
+
+export {
+    default as BottomSheet
+} from "./bottomSheet";
+
+export type {
+    IBottomSheetRef
+} from "./bottomSheet/type";
+
+export {
+    default as SelectSheet
+} from "./selectSheet";
+
+export {
+    default as CheckBox
+} from "./checkBox";
+
+export {
+    default as Toast
+} from "./toast";
+
+export {
+    default as SnackBar
+} from "./snackBar";
+
+export {
+    default as TextAreaInput
+} from "./textAreaInput";
+
+export type {
+    ITextAreaInputRef
+} from "./textAreaInput/type";
+
+export {
+    default as RadioButton
+} from "./radioButton";
+
+export {
+    default as RowCard
+} from "./rowCard";
+
+export {
+    default as Switch
+} from "./switch";
+
+export {
+    default as NotificationIndicator
+} from "./notificationIndicator";
+
+export {
+    default as DateTimePicker
+} from "./dateTimePicker";
+
+export {
+    default as DateTimeSheet
+} from "./dateTimeSheet";
+
+export type {
+    IDateTimePickerRef
+} from "./dateTimePicker/type";
+
+export {
+    default as DateSelector
+} from "./dateSelector";
+
+export type {
+    IDateSelectorRef
+} from "./dateSelector/type";
+
+export {
+    default as NumericInput
+} from "./numericInput";
+
+export {
+    default as MarkdownViewer
+} from "./markdownViewer";
+
+export {
+    default as StateCard
+} from "./stateCard";
+
+export {
+    default as MonthSelector
+} from "./monthSelector";
+
+export {
+    default as TimeSelector
+} from "./timeSelector";
+
+export {
+    default as Sticker
+} from "./sticker";
+
+export {
+    default as Chip
+} from "./chip";
+
+export type {
+    EnterMarkdownTypes,
+    CodeMarkdownTypes,
+    TextMarkdownTypes,
+    BlockquoteTypes,
+    MarkdownObject,
+    MarkdownKeys,
+    ListTypes
+} from "./markdownViewer/type";
+
+export {
+    blockquoteMarkdown,
+    centerMarkdown,
+    enterMarkdown,
+    imageMarkdown,
+    parseMarkdown,
+    rightMarkdown,
+    textMarkdown,
+    codeMarkdown,
+    leftMarkdown,
+    linkMarkdown,
+    listMarkdown
+} from "./markdownViewer/util";