ncore-ui-kit 1.0.0-alpha.0

package/lib/src/components/snackBar/index.js

@@ -0,0 +1,249 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from "react";
+import { TouchableWithoutFeedback, PanResponder, Platform, Animated, Easing, View } from "react-native";
+import stylesheet, { getSnackBarType, useStyles } from "./stylesheet";
+import { NCoreUIKitTheme } from "../../core/hooks";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { safeGlobal } from "../../types";
+import { X as XIcon } from "lucide-react-native";
+import { Portal } from "../../helpers/portalize";
+import { windowHeight } from "../../utils";
+import Button from "../button";
+import Text from "../text";
+const SnackBar = ({ isCloseOnPressActionButton = true, closeAnimationDelay = 350, openAnimationDelay = 200, contentContainerStyle, autoCloseDelay = 5000, isCloseOnPress = true, isShowAction = true, isFullWidth = false, isInlineSafeArea, icon: CustomIcon, type = "neutral", customTheme, onClosed, subTitle, children, onPress, action, style, title, id }) => {
+    const { radiuses, colors, spaces } = NCoreUIKitTheme.useContext(customTheme);
+    const { top } = useSafeAreaInsets();
+    const [isMeasured, setIsMeasured] = useState(false);
+    const contentHeight = useRef(windowHeight);
+    const transformAnim = useRef(new Animated.Value(-contentHeight.current + -top + -spaces.spacingSm)).current;
+    const opacityAnim = useRef(new Animated.Value(0)).current;
+    const currentType = getSnackBarType({
+        type
+    });
+    const { contentContainer: contentContainerDynamicStyle, containerObject: containerObjectDynamicStyle, iconContainer: iconContainerDynamicStyle, container: containerDynamicStyle, subTitle: subTitleDynamicStyle, action: actionDynamicStyle, title: titleDynamicStyle } = useStyles({
+        isInlineSafeArea,
+        safeAreaTop: top,
+        isFullWidth,
+        currentType,
+        radiuses,
+        spaces,
+        colors,
+        type
+    });
+    useEffect(() => {
+        if (isMeasured) {
+            transformAnim.setValue(-contentHeight.current + -top + -spaces.spacingSm);
+            Animated.parallel([
+                Animated.timing(opacityAnim, {
+                    duration: openAnimationDelay,
+                    useNativeDriver: true,
+                    easing: Easing.linear,
+                    toValue: 1
+                }),
+                Animated.timing(transformAnim, {
+                    duration: openAnimationDelay,
+                    useNativeDriver: true,
+                    easing: Easing.linear,
+                    toValue: 0
+                })
+            ]).start();
+            setTimeout(() => {
+                closeAnimation();
+            }, autoCloseDelay);
+        }
+    }, [isMeasured]);
+    const panResponder = useRef(PanResponder.create({
+        onStartShouldSetPanResponder: () => false,
+        onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+            const { dy } = gestureState;
+            if (Math.abs(dy) < 20) {
+                return false;
+            }
+            return true;
+        },
+        onPanResponderMove: (_, gestureState) => {
+            const { moveY, y0, dy } = gestureState;
+            if (moveY > y0) {
+                return;
+            }
+            const op = moveY / y0;
+            opacityAnim.setValue(op);
+            transformAnim.setValue(dy);
+        },
+        onPanResponderEnd: (_, gestureState) => {
+            const { moveY, y0, vy } = gestureState;
+            if (vy < -1) {
+                closeAnimation();
+                return;
+            }
+            if (y0 - moveY > 25) {
+                closeAnimation();
+                return;
+            }
+            Animated.parallel([
+                Animated.timing(opacityAnim, {
+                    duration: openAnimationDelay,
+                    useNativeDriver: true,
+                    easing: Easing.linear,
+                    toValue: 1
+                }),
+                Animated.timing(transformAnim, {
+                    duration: openAnimationDelay,
+                    useNativeDriver: true,
+                    easing: Easing.linear,
+                    toValue: 0
+                })
+            ]).start();
+        },
+        onPanResponderTerminationRequest: () => false,
+        onShouldBlockNativeResponder: () => true
+    })).current;
+    const closeAnimation = (_onClosed) => {
+        Animated.parallel([
+            Animated.timing(transformAnim, {
+                toValue: -contentHeight.current + -top + -spaces.spacingSm,
+                duration: closeAnimationDelay,
+                useNativeDriver: true,
+                easing: Easing.linear
+            }),
+            Animated.timing(opacityAnim, {
+                duration: closeAnimationDelay,
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 0
+            })
+        ]).start(({ finished }) => {
+            if (finished) {
+                if (onClosed)
+                    onClosed({
+                        id
+                    });
+                if (_onClosed)
+                    _onClosed({
+                        id
+                    });
+            }
+        });
+    };
+    const renderIcon = () => {
+        if (!CustomIcon) {
+            return null;
+        }
+        return _jsx(View, { style: [
+                stylesheet.iconContainer,
+                iconContainerDynamicStyle
+            ], children: _jsx(CustomIcon, { color: "default", size: 18 }) });
+    };
+    const renderContent = () => {
+        return _jsxs(View, { style: [
+                contentContainerStyle,
+                stylesheet.contentContainer,
+                contentContainerDynamicStyle
+            ], children: [_jsx(Text, { numberOfLines: 3, style: {
+                        ...stylesheet.title,
+                        ...titleDynamicStyle
+                    }, children: title }), subTitle ?
+                    _jsx(Text, { variant: "labelSmallSize", numberOfLines: 2, color: "low", style: {
+                            ...stylesheet.subTitle,
+                            ...subTitleDynamicStyle
+                        }, children: subTitle })
+                    :
+                        null] });
+    };
+    const renderAction = () => {
+        if (!isShowAction) {
+            return null;
+        }
+        return _jsx(Button, { title: action && action.title ? action.title : undefined, isCustomPadding: true, spreadBehaviour: "free", onPress: () => {
+                if (isCloseOnPressActionButton)
+                    closeAnimation();
+                if (action && action.onPress)
+                    action.onPress({
+                        closeAnimation: ({ onClosed: _onClosed }) => closeAnimation(_onClosed)
+                    });
+            }, icon: ({ color }) => {
+                if (action?.title) {
+                    return null;
+                }
+                return _jsx(XIcon, { color: colors.content.icon[color ? color : "default"], size: 18 });
+            }, style: {
+                ...action?.style,
+                ...actionDynamicStyle
+            }, variant: "ghost", type: "neutral", size: "small" });
+    };
+    const renderContainer = () => {
+        return _jsxs(View, { style: [
+                stylesheet.containerObject,
+                containerObjectDynamicStyle
+            ], children: [renderIcon(), renderContent(), renderAction()] });
+    };
+    return _jsx(Portal, { name: "snack-bar-system", children: _jsx(Animated.View, { ...(Platform.OS === "web" ? {} : panResponder.panHandlers), onLayout: (event) => {
+                const _contentHeight = event.nativeEvent.layout.height;
+                contentHeight.current = _contentHeight;
+                setIsMeasured(true);
+            }, onPointerDown: Platform.OS === "web" ? (evt) => {
+                const nativeEvt = evt;
+                const startY = nativeEvt.clientY;
+                let lastY = startY;
+                let lastTime = Date.now();
+                let velocityY = 0;
+                const handlePointerMove = (moveEvt) => {
+                    const dy = moveEvt.clientY - startY;
+                    if (dy > 0)
+                        return; // sadece yukarı swipe
+                    const now = Date.now();
+                    const dt = now - lastTime;
+                    if (dt > 0)
+                        velocityY = (moveEvt.clientY - lastY) / dt;
+                    lastY = moveEvt.clientY;
+                    lastTime = now;
+                    const op = Math.max(0, 1 + (dy / contentHeight.current));
+                    opacityAnim.setValue(op);
+                    transformAnim.setValue(dy);
+                };
+                const handlePointerUp = () => {
+                    safeGlobal.removeEventListener("pointermove", handlePointerMove);
+                    safeGlobal.removeEventListener("pointerup", handlePointerUp);
+                    const dy = lastY - startY;
+                    if (velocityY < -0.5 || dy < -25) {
+                        closeAnimation();
+                        return;
+                    }
+                    Animated.parallel([
+                        Animated.timing(opacityAnim, {
+                            duration: openAnimationDelay,
+                            useNativeDriver: true,
+                            easing: Easing.linear,
+                            toValue: 1
+                        }),
+                        Animated.timing(transformAnim, {
+                            duration: openAnimationDelay,
+                            useNativeDriver: true,
+                            easing: Easing.linear,
+                            toValue: 0
+                        })
+                    ]).start();
+                };
+                safeGlobal.addEventListener("pointermove", handlePointerMove);
+                safeGlobal.addEventListener("pointerup", handlePointerUp);
+            } : undefined, style: [
+                style,
+                stylesheet.container,
+                containerDynamicStyle,
+                {
+                    opacity: opacityAnim,
+                    transform: [{
+                            translateY: transformAnim
+                        }]
+                }
+            ], children: _jsx(TouchableWithoutFeedback, { onPress: () => {
+                    if (onPress)
+                        onPress({
+                            id
+                        });
+                    if (isCloseOnPress) {
+                        closeAnimation();
+                    }
+                }, children: children ? children : renderContainer() }) }) });
+};
+export default SnackBar;

package/lib/src/components/snackBar/stylesheet.js

@@ -0,0 +1,118 @@
+import { StyleSheet } from "react-native";
+import { windowWidth } from "../../utils";
+export const SNACK_BAR_TYPE_STYLES = {
+    primary: {
+        actionColor: "onPrimary",
+        iconColor: "emphasized",
+        containerColor: "mid",
+        subTitleColor: "low",
+        titleColor: "mid"
+    },
+    danger: {
+        subTitleColor: "dangerLow",
+        containerColor: "danger",
+        actionColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        subTitleColor: "successLow",
+        containerColor: "success",
+        actionColor: "success",
+        titleColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        subTitleColor: "warningLow",
+        containerColor: "warning",
+        actionColor: "warning",
+        titleColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        subTitleColor: "infoLow",
+        containerColor: "info",
+        actionColor: "info",
+        titleColor: "info",
+        iconColor: "info"
+    },
+    neutral: {
+        containerColor: "mid",
+        subTitleColor: "low",
+        actionColor: "mid",
+        titleColor: "mid",
+        iconColor: "mid"
+    }
+};
+export const getSnackBarType = ({ type }) => {
+    const currentType = SNACK_BAR_TYPE_STYLES[type];
+    return currentType;
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        position: "absolute",
+        alignSelf: "center",
+        zIndex: 99998
+    },
+    containerObject: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    contentContainer: {
+        justifyContent: "center",
+        alignItems: "flex-start",
+        flexDirection: "column",
+        flexShrink: 1,
+        flex: 1
+    },
+    iconContainer: {
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    title: {
+        textAlign: "left"
+    },
+    subTitle: {
+        textAlign: "left"
+    }
+});
+export const useStyles = ({ isInlineSafeArea, isFullWidth, safeAreaTop, currentType, radiuses, colors, spaces }) => {
+    const styles = {
+        container: {
+            backgroundColor: colors.content.container[currentType.containerColor],
+            width: windowWidth - (spaces.spacingMd * 2),
+            top: safeAreaTop + spaces.spacingSm,
+            borderRadius: radiuses.lg
+        },
+        containerObject: {
+            paddingHorizontal: spaces.spacingLg,
+            paddingVertical: spaces.spacingMd
+        },
+        contentContainer: {},
+        title: {},
+        subTitle: {
+            marginTop: spaces.spacingXs
+        },
+        iconContainer: {
+            paddingRight: spaces.spacingSm,
+            marginRight: spaces.spacingSm
+        },
+        action: {
+            paddingBottom: spaces.spacingSm,
+            paddingRight: spaces.spacingSm,
+            paddingLeft: spaces.spacingMd,
+            paddingTop: spaces.spacingSm,
+            marginLeft: spaces.spacingMd
+        }
+    };
+    if (isFullWidth) {
+        styles.container.width = windowWidth;
+        styles.container.borderRadius = 0;
+    }
+    if (isInlineSafeArea) {
+        styles.container.paddingTop = safeAreaTop;
+        styles.container.top = 0;
+    }
+    return styles;
+};
+export default stylesheet;

package/lib/src/components/snackBar/type.js

@@ -0,0 +1,3 @@
+import {} from "react";
+import {} from "react-native";
+;

package/lib/src/components/stateCard/index.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { View } from "react-native";
+import stylesheet, { getStateCardType, useStyles } from "./stylesheet";
+import { NCoreUIKitTheme } from "../../core/hooks";
+import Text from "../text";
+import Button from "../button";
+const StateCard = ({ type = "neutral", icon: IconProp, subTitleStyle, customTheme, titleStyle, subTitle, iconSize, action, title, style, ...props }) => {
+    const { spaces } = NCoreUIKitTheme.useContext(customTheme);
+    const currentType = getStateCardType({
+        type
+    });
+    const { titleContainer: titleContainerDynamicStyle, actionButton: actionButtonDynamicStyle, container: containerDynamicStyle, subTitle: subTitleDynamicStyle, title: titleDynamicStyle, icon: iconDynamicStyle } = useStyles({
+        spaces
+    });
+    const iconProps = {
+        color: currentType.iconColor
+    };
+    const titleProps = {
+        color: currentType.titleColor
+    };
+    const subTitleProps = {
+        color: currentType.subTitleColor
+    };
+    const renderIcon = () => {
+        if (!IconProp) {
+            return null;
+        }
+        return _jsx(IconProp, { color: iconProps.color, size: iconSize ? iconSize : 75, style: iconDynamicStyle });
+    };
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+        return _jsx(View, { style: [
+                stylesheet.titleContainer,
+                titleContainerDynamicStyle
+            ], children: _jsx(Text, { variant: "headlineSmallSize", style: [
+                    titleStyle,
+                    stylesheet.title,
+                    titleDynamicStyle
+                ], ...titleProps, children: title }) });
+    };
+    const renderSubtitle = () => {
+        if (!subTitle) {
+            return null;
+        }
+        return _jsx(Text, { ...subTitleProps, variant: "bodyMediumSize", style: [
+                subTitleStyle,
+                stylesheet.subTitle,
+                subTitleDynamicStyle
+            ], children: subTitle });
+    };
+    const renderAction = () => {
+        if (!action) {
+            return null;
+        }
+        return _jsx(Button, { size: "small", ...action, spreadBehaviour: "free", type: type, style: [
+                action.style,
+                actionButtonDynamicStyle
+            ] });
+    };
+    return _jsxs(View, { ...props, style: [
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ], children: [renderIcon(), renderTitle(), renderSubtitle(), renderAction()] });
+};
+export default StateCard;

package/lib/src/components/stateCard/stylesheet.js

@@ -0,0 +1,90 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+export const CHECK_BOX_TYPE_STYLES = {
+    primary: {
+        iconColor: "emphasized",
+        containerColor: "mid",
+        subTitleColor: "low",
+        titleColor: "mid"
+    },
+    danger: {
+        subTitleColor: "dangerLow",
+        containerColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        subTitleColor: "successLow",
+        containerColor: "success",
+        titleColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        subTitleColor: "warningLow",
+        containerColor: "warning",
+        titleColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        subTitleColor: "infoLow",
+        containerColor: "info",
+        titleColor: "info",
+        iconColor: "info"
+    },
+    neutral: {
+        iconColor: "emphasized",
+        containerColor: "mid",
+        subTitleColor: "low",
+        titleColor: "mid"
+    }
+};
+export const getStateCardType = ({ type }) => {
+    const currentType = CHECK_BOX_TYPE_STYLES[type];
+    return currentType;
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        backgroundColor: "transparent",
+        justifyContent: "center",
+        flexDirection: "column",
+        alignItems: "center"
+    },
+    titleContainer: {
+        justifyContent: "flex-start",
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    title: {
+        textAlign: "center",
+        margin: 0
+    },
+    subTitle: {
+        textAlign: "center"
+    }
+});
+export const useStyles = ({ spaces }) => {
+    const styles = {
+        container: {
+            padding: spaces.spacingSm
+        },
+        titleContainer: {},
+        icon: {
+            marginBottom: spaces.spacingXs,
+            marginTop: spaces.spacingXs
+        },
+        title: {
+            marginBottom: spaces.spacingXs,
+            marginTop: spaces.spacingXs
+        },
+        subTitle: {
+            marginBottom: spaces.spacingXs,
+            marginTop: spaces.spacingXs
+        },
+        actionButton: {
+            marginBottom: spaces.spacingXs,
+            marginTop: spaces.spacingXs
+        }
+    };
+    return styles;
+};
+export default stylesheet;

package/lib/src/components/stateCard/type.js

@@ -0,0 +1 @@
+import {} from "react-native";

package/lib/src/components/sticker/index.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { View } from "react-native";
+import stylesheet, { getStickerType, useStyles } from "./stylesheet";
+import { NCoreUIKitTheme } from "../../core/hooks";
+import Text from "../text";
+const Sticker = ({ spreadBehaviour = "baseline", iconPosition = "left", type = "neutral", customTitleColor, customIconColor, size = "medium", icon: IconProp, customColor, customTheme, titleStyle, title, style, ...props }) => {
+    const { typography, radiuses, spaces, colors } = NCoreUIKitTheme.useContext(customTheme);
+    const currentType = getStickerType({
+        type
+    });
+    const { titleContainer: titleContainerDynamicStyle, container: containerDynamicStyle, title: titleDynamicStyle, icon: iconDynamicStyle } = useStyles({
+        spreadBehaviour,
+        iconPosition,
+        customColor,
+        currentType,
+        radiuses,
+        spaces,
+        colors,
+        size
+    });
+    const iconProps = {
+        color: customIconColor ? customIconColor : currentType.iconColor
+    };
+    const titleProps = {
+        color: customTitleColor ? customTitleColor : currentType.titleColor
+    };
+    const contentSize = size === "large" ? "bodyLargeSize" : size === "medium" ? "bodyMediumSize" : "bodySmallSize";
+    const renderIcon = () => {
+        if (!IconProp) {
+            return null;
+        }
+        return _jsx(IconProp, { color: iconProps.color, size: typography[contentSize].fontSize + 4, style: iconDynamicStyle });
+    };
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+        return _jsx(View, { style: [
+                stylesheet.titleContainer,
+                titleContainerDynamicStyle
+            ], children: _jsx(Text, { style: [
+                    titleStyle,
+                    stylesheet.title,
+                    titleDynamicStyle
+                ], variant: contentSize, ...titleProps, children: title }) });
+    };
+    return _jsxs(View, { ...props, style: [
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ], children: [iconPosition === "left" ? renderIcon() : null, renderTitle(), iconPosition === "right" ? renderIcon() : null] });
+};
+export default Sticker;

package/lib/src/components/sticker/stylesheet.js

@@ -0,0 +1,83 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+export const CHECK_BOX_TYPE_STYLES = {
+    primary: {
+        containerColor: "mid",
+        titleColor: "mid",
+        iconColor: "mid"
+    },
+    danger: {
+        containerColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        containerColor: "success",
+        titleColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        containerColor: "warning",
+        titleColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        containerColor: "info",
+        titleColor: "info",
+        iconColor: "info"
+    },
+    neutral: {
+        containerColor: "mid",
+        titleColor: "mid",
+        iconColor: "mid"
+    }
+};
+export const getStickerType = ({ type }) => {
+    const currentType = CHECK_BOX_TYPE_STYLES[type];
+    return currentType;
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        backgroundColor: "transparent",
+        justifyContent: "center",
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    titleContainer: {
+        justifyContent: "flex-start",
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    title: {
+        textAlign: "center",
+        margin: 0
+    }
+});
+export const useStyles = ({ spreadBehaviour, iconPosition, customColor, currentType, radiuses, spaces, colors, size }) => {
+    const styles = {
+        container: {
+            paddingHorizontal: size === "small" ? spaces.spacingSm : spaces.spacingMd,
+            paddingVertical: size === "small" ? spaces.spacingXs : spaces.spacingSm,
+            backgroundColor: colors.content.container[currentType.containerColor],
+            borderRadius: radiuses.chip
+        },
+        titleContainer: {},
+        title: {},
+        icon: {}
+    };
+    if (customColor) {
+        styles.container.backgroundColor = colors.content.container[customColor];
+    }
+    if (spreadBehaviour === "baseline") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
+    }
+    if (iconPosition === "right") {
+        styles.icon.marginLeft = spaces.spacingXs;
+    }
+    else {
+        styles.icon.marginRight = spaces.spacingXs;
+    }
+    return styles;
+};
+export default stylesheet;

package/lib/src/components/sticker/type.js

@@ -0,0 +1 @@
+import {} from "react-native";