ncore-ui-kit 1.0.0-alpha.0

package/src/assets/svg/index.ts

@@ -0,0 +1,23 @@
+export {
+    default as LoadingIcon
+} from "./loadingIcon";
+
+export {
+    default as NIBGATIcon
+} from "./nibgatIcon";
+
+export {
+    default as NIBGATCommunityIcon
+} from "./nibgatCommunityIcon";
+
+export {
+    default as CayCoreIcon
+} from "./cayCoreIcon";
+
+export {
+    default as EnUsIcon
+} from "./enUSIcon";
+
+export {
+    default as TRTRIcon
+} from "./trTRIcon";

package/src/assets/svg/loadingIcon/index.tsx

@@ -0,0 +1,96 @@
+import {
+    useEffect,
+    useRef
+} from "react";
+import {
+    Animated,
+    Platform,
+    Easing,
+    View
+} from "react-native";
+import {
+    NCoreUIKitTheme
+} from "../../../core/hooks";
+import {
+    type INCoreUIKitIconProps
+} from "../../../types";
+import {
+    Path,
+    Svg
+} from "react-native-svg";
+
+const LoadingIcon = ({
+    color = "emphasized",
+    customColor,
+    size = 22,
+    ...props
+}: INCoreUIKitIconProps) => {
+    const {
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const animValue = useRef(new Animated.Value(0)).current;
+
+    const pathScale = 38 / size;
+
+    useEffect(() => {
+        const animation = Animated.loop(
+            Animated.timing(animValue, {
+                toValue: 1,
+                duration: 2000,
+                easing: Easing.linear,
+                useNativeDriver: Platform.OS !== "web"
+            })
+        );
+
+        animation.start();
+
+        return () => animation.stop();
+    }, [animValue]);
+
+    const rotate = animValue.interpolate({
+        inputRange: [
+            0,
+            1
+        ],
+        outputRange: [
+            "0deg",
+            "-360deg"
+        ]
+    });
+
+    return <View
+        style={{
+            height: size,
+            width: size,
+            ...props?.style
+        }}
+    >
+        <Animated.View
+            style={{
+                transform: [{
+                    rotate: rotate
+                }]
+            }}
+        >
+            <Svg
+                height={size}
+                width={size}
+                fill="none"
+                style={props.style}
+                {...props}
+            >
+                <Path
+                    d="M11.885 7.303 19 3.194l7.115 4.109v8.215l7.095 4.09v8.215l-7.115 4.108-7.076-4.108-7.114 4.108-7.115-4.108v-8.216l7.095-4.089V7.303Z"
+                    stroke={customColor ? customColor : colors.content.icon[color]}
+                    transform={`scale(${1 / pathScale})`}
+                    strokeLinejoin="round"
+                    strokeLinecap="round"
+                    clipRule="evenodd"
+                    strokeWidth={3}
+                />
+            </Svg>
+        </Animated.View>
+    </View>;
+};
+export default LoadingIcon;

package/src/assets/svg/nibgatCommunityIcon/index.tsx

@@ -0,0 +1,61 @@
+import {
+    NCoreUIKitTheme
+} from "../../../core/hooks";
+import type {
+    INCoreUIKitIconProps
+} from "../../../types";
+import {
+    Path,
+    Defs,
+    Svg,
+    G
+} from "react-native-svg";
+
+const NIBGATCommunityIcon = ({
+    customColor = "#00c2a9",
+    size = 30,
+    color,
+    style,
+    ...props
+}: INCoreUIKitIconProps) => {
+    const {
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const pathScale = 3543 / size;
+
+    const strokeWidth = (size * 2.362) / 3543;
+
+    return <Svg
+        fillRule="evenodd"
+        clipRule="evenodd"
+        height={size}
+        width={size}
+        style={{
+            ...style
+        }}
+        {...props}
+    >
+        <Defs></Defs>
+        <G id="Layer_x0020_1">
+            <Path
+                d="m1263 780 127-220 127-221h509l127 221 127 220-127 220-127 221h-509l-127-221zM2121 1276l128-221 127-220h509l127 220 127 221-127 220-127 220h-509l-127-220zM2121 2267l128-220 127-220h509l127 220 127 220-127 221-127 220h-509l-127-220zM1263 2763l127-220 127-221h509l127 221 127 220-127 220-127 221h-509l-127-221zM404 2267l127-220 127-220h509l127 220 128 220-128 221-127 220H658l-127-220zM404 1276l127-221 127-220h509l127 220 128 221-128 220-127 220H658l-127-220z"
+                transform={[{
+                    scale: 1 / pathScale
+                }]}
+            />
+            <Path
+                d="m1263 1772 127-221 127-220h509l127 220 127 221-127 220-127 220h-509l-127-220-127-220zm599-215h0c9-5 21-2 26 6l114 199c2 3 3 6 3 10 0 3-1 6-3 9l-113 197c-2 4-5 7-9 9h0c-9 4-20 1-25-8l-185-368-92 161 109 189c5 9 2 20-6 25h0c-9 5-21 2-26-6l-114-199c-2-3-3-6-3-10 0-3 1-6 3-9l113-197c2-4 5-7 9-9h0c9-4 20-1 25 8l185 368 92-160-109-190c-5-9-2-20 6-25z"
+                stroke={color ? colors.content.icon[color] : customColor}
+                fill={color ? colors.content.icon[color] : customColor}
+                strokeWidth={strokeWidth}
+                strokeLinejoin="round"
+                strokeLinecap="round"
+                transform={[{
+                    scale: 1 / pathScale
+                }]}
+            />
+        </G>
+    </Svg>;
+};
+export default NIBGATCommunityIcon;

package/src/assets/svg/nibgatIcon/index.tsx

@@ -0,0 +1,97 @@
+import type {
+    INCoreUIKitIconProps
+} from "../../../types";
+import {
+    LinearGradient,
+    Path,
+    Defs,
+    Stop,
+    Svg
+} from "react-native-svg";
+
+const NIBGATIcon = ({
+    size = 30,
+    style,
+    ...props
+}: INCoreUIKitIconProps) => {
+    const pathScale = 620 / size;
+
+    return <Svg
+        height={size}
+        width={size}
+        fill="none"
+        {...props}
+        style={{
+            ...style
+        }}
+    >
+        <Path
+            d="m171.363 110.098 138.558-80.013 138.557 80.013v159.987l138.18 79.635v159.987L448.1 589.72l-137.801-80.013-138.558 80.013-138.557-80.013V349.72l138.179-79.635V110.098Z"
+            transform={[{
+                scale: 1 / pathScale
+            }]}
+            fillOpacity={0.922}
+            clipRule="evenodd"
+            fillRule="evenodd"
+            fill="url(#a)"
+        />
+        <Path
+            d="m222.613 198.652 21.808-37.795 21.846-37.834h87.307l21.846 37.834 21.807 37.795-21.807 37.833-21.846 37.795h-87.307l-21.846-37.795-21.808-37.833ZM353.574 425.537l21.846-37.834 21.808-37.795h87.345l21.808 37.795 21.845 37.834-21.845 37.795-21.808 37.833h-87.345l-21.808-37.833-21.846-37.795ZM91.615 425.537l21.846-37.834 21.808-37.795h87.345l21.808 37.795 21.845 37.834-21.845 37.795-21.808 37.833h-87.345l-21.808-37.833-21.846-37.795Z"
+            transform={[{
+                scale: 1 / pathScale
+            }]}
+            strokeOpacity={0.69}
+            strokeWidth={6.65}
+            clipRule="evenodd"
+            stroke="#323232"
+        />
+        <Path
+            d="m353.574 123.024 25.625-52.914M397.229 198.652h51.25M266.267 123.023l-29.329-50.796M222.614 198.652h-51.251M484.572 349.908l25.512-44.296M528.227 425.537h58.431M484.572 501.165l29.216 50.646M397.227 501.165l-25.625 44.145M222.613 501.165l25.625 44.372M135.268 501.165l-29.215 50.646M91.615 425.537H33.184M135.268 349.908l-25.512-44.296"
+            transform={[{
+                scale: 1 / pathScale
+            }]}
+            strokeOpacity={0.69}
+            strokeWidth={5.669}
+            stroke="#323232"
+        />
+        <Path
+            d="m222.613 349.909 21.808-37.796 21.846-37.833h87.307l21.846 37.833 21.807 37.796-21.807 37.795-21.846 37.833h-87.307l-21.846-37.833-21.808-37.795Z"
+            transform={[{
+                scale: 1 / pathScale
+            }]}
+            strokeWidth={6.65}
+            clipRule="evenodd"
+            fillRule="evenodd"
+            stroke="#323232"
+            fill="#323232"
+        />
+        <Path
+            d="m284.031 298.394-29.707 51.515 29.707 51.514M335.811 298.394l29.707 51.515-29.707 51.514M284.031 298.394l51.78 103.029"
+            transform={[{
+                scale: 1 / pathScale
+            }]}
+            strokeLinejoin="round"
+            strokeOpacity={0.941}
+            strokeLinecap="round"
+            strokeWidth={9.449}
+            stroke="#FBFBFB"
+        />
+        <Defs>
+            <LinearGradient
+                gradientUnits="userSpaceOnUse"
+                x1={484.077 / pathScale}
+                x2={135.764 / pathScale}
+                y2={531.137 / pathScale}
+                y1={88.682 / pathScale}
+                id="a"
+            >
+                <Stop stopColor="#36B49E" />
+                <Stop
+                    stopColor="#068F7C"
+                    offset={1}
+                />
+            </LinearGradient>
+        </Defs>
+    </Svg>;
+};
+export default NIBGATIcon;

package/src/assets/svg/trTRIcon/index.tsx

@@ -0,0 +1,47 @@
+import type {
+    INCoreUIKitIconProps
+} from "../../../types";
+import {
+    Path,
+    Svg
+} from "react-native-svg";
+
+const TRTRIcon = ({
+    size = 32,
+    style,
+    ...props
+}: INCoreUIKitIconProps) => {
+    const pathScale = 32 / size;
+
+    return <Svg
+        height={size}
+        width={size}
+        style={{
+            ...style
+        }}
+        {...props}
+    >
+        <Path
+            fill="#ED4C5C"
+            d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16Z"
+            transform={[{
+                scale: 1 / pathScale
+            }]}
+        />
+        <Path
+            fill="#fff"
+            d="m20.96 19.734.053-2.88-2.88-.853 2.88-.853-.054-2.88 1.76 2.293 2.88-.853L23.84 16l1.76 2.293-2.88-.853-1.76 2.293Z"
+            transform={[{
+                scale: 1 / pathScale
+            }]}
+        />
+        <Path
+            fill="#fff"
+            d="M16.638 22.4c-3.52 0-6.346-2.88-6.346-6.4 0-3.52 2.826-6.4 6.346-6.4 1.334 0 2.56.427 3.627 1.12A7.901 7.901 0 0 0 14.292 8c-4.374 0-7.894 3.573-7.894 8s3.52 8 7.894 8c2.4 0 4.533-1.067 5.973-2.72a6.355 6.355 0 0 1-3.627 1.12Z"
+            transform={[{
+                scale: 1 / pathScale
+            }]}
+        />
+    </Svg>;
+};
+export default TRTRIcon;

package/src/components/avatar/index.tsx

@@ -0,0 +1,255 @@
+import {
+    useState
+} from "react";
+import {
+    TouchableOpacity,
+    Image,
+    View
+} from "react-native";
+import type IAvatarProps from "./type";
+import stylesheet, {
+    getAvatarSize,
+    useStyles
+} from "./stylesheet";
+import {
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import {
+    UserRound as UserRoundIcon
+} from "lucide-react-native";
+import Loading from "../loading";
+import Text from "../text";
+
+const Avatar = ({
+    titleAbbreviationType = "first-last",
+    isShowStatusIndicatorSplicer = true,
+    avatarBackgroundColor = "default",
+    statusIndicatorType = "online",
+    titleColor = "onPrimary",
+    isShowBorder = false,
+    isStatusIndicator,
+    isWorkWithAction,
+    image: ImageProp,
+    backgroundColor,
+    size = "medium",
+    icon: IconProp,
+    imageSource,
+    customTheme,
+    borderColor,
+    isDisabled,
+    imageProps,
+    isLoading,
+    iconColor,
+    imageUrl,
+    onPress,
+    title,
+    style
+}: IAvatarProps) => {
+    const {
+        borders,
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext(customTheme);
+
+    const currentSize = getAvatarSize({
+        spaces,
+        size
+    });
+
+    const [
+        imageLoadError,
+        setImageLoadError
+    ] = useState(false);
+
+    const {
+        statusIndicator: statusIndicatorDynamicStyle,
+        container: containerDynamicStyle,
+        image: imageDynamicStyle,
+        icon: iconDynamicStyle
+    } = useStyles({
+        isShowStatusIndicatorSplicer,
+        avatarBackgroundColor,
+        statusIndicatorType,
+        image: ImageProp,
+        backgroundColor,
+        isShowBorder,
+        borderColor,
+        currentSize,
+        isDisabled,
+        isLoading,
+        imageUrl,
+        borders,
+        colors,
+        title
+    });
+
+    const calculateShortTitle = () => {
+        if(!title) {
+            return "";
+        }
+
+        const allWords: Array<string> = title.split(" ");
+
+        if(titleAbbreviationType === "every-first") {
+            let newString = "";
+
+            allWords.forEach((wordItem, wordIndex) => {
+                if(wordIndex < 3) newString += wordItem[0];
+            });
+
+            return newString;
+        }
+
+        if(titleAbbreviationType === "first-last") {
+            let newString = "";
+
+            if(allWords[0]) newString += allWords[0][0];
+
+            if(allWords.length > 1 && allWords[allWords.length - 1]) newString += allWords[allWords.length - 1]?.[0];
+
+            return newString;
+        }
+
+        if(titleAbbreviationType === "first-next") {
+            let newString = "";
+
+            if(allWords[0]) newString += allWords[0][0];
+
+            if(allWords[1]) newString += allWords[1][0];
+
+            return newString;
+        }
+
+        return title;
+    };
+
+    const renderIcon = () => {
+        if(IconProp) {
+            return <IconProp
+                size={currentSize.iconSize}
+                customColor={iconColor}
+                color="default"
+                style={{
+                    ...iconDynamicStyle
+                }}
+            />;
+        }
+
+        return <UserRoundIcon
+            color={iconColor ? iconColor : colors.content.icon.default}
+            size={currentSize.iconSize}
+            style={{
+                ...iconDynamicStyle
+            }}
+        />;
+    };
+
+    const renderStatusIndicator = () => {
+        if(!isStatusIndicator) {
+            return null;
+        }
+
+        return <View
+            style={[
+                stylesheet.statusIndicator,
+                statusIndicatorDynamicStyle
+            ]}
+        />;
+    };
+
+    const renderLoading = () => {
+        let loadingColor: keyof NCoreUIKit.IconContentColors = "default";
+
+        if(title) {
+            loadingColor = "onPrimary";
+        } else if(imageUrl || ImageProp) {
+            loadingColor = "mid";
+        }
+
+        return <Loading
+            color={loadingColor}
+        />;
+    };
+
+    const renderContent = () => {
+        if(isLoading) {
+            return renderLoading();
+        }
+
+        if(IconProp) {
+            return renderIcon();
+        }
+
+        if(!title && !ImageProp && !imageUrl) {
+            return renderIcon();
+        }
+
+        if((imageUrl || ImageProp) && imageLoadError) {
+            if(title) {
+                return <Text
+                    variant={currentSize.fontSize}
+                    color={titleColor}
+                >
+                    {calculateShortTitle()}
+                </Text>;
+            } else {
+                return renderIcon();
+            }
+        }
+
+        if(ImageProp) {
+            return <ImageProp
+                {...imageProps}
+                onError={() => setImageLoadError(true)}
+                height={currentSize.size}
+                width={currentSize.size}
+                style={[
+                    stylesheet.image,
+                    imageDynamicStyle,
+                    imageProps?.style
+                ]}
+            />;
+        }
+
+        if(imageUrl) {
+            return <Image
+                {...imageProps}
+                onError={() => setImageLoadError(true)}
+                height={currentSize.size}
+                width={currentSize.size}
+                source={{
+                    uri: imageUrl,
+                    ...imageSource
+                }}
+                style={[
+                    stylesheet.image,
+                    imageDynamicStyle,
+                    imageProps?.style
+                ]}
+            />;
+        }
+
+        return <Text
+            variant={currentSize.fontSize}
+            color={titleColor}
+        >
+            {calculateShortTitle()}
+        </Text>;
+    };
+
+    return <TouchableOpacity
+        disabled={!isWorkWithAction || isDisabled || isLoading}
+        onPress={!isWorkWithAction || isDisabled || isLoading ? undefined : () => {
+            if(onPress) onPress();
+        }}
+        style={[
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ]}
+    >
+        {renderContent()}
+        {renderStatusIndicator()}
+    </TouchableOpacity>;
+};
+export default Avatar;