ncore-ui-kit 1.0.0-alpha.0

package/src/components/avatar/stylesheet.ts

@@ -0,0 +1,184 @@
+import {
+    type ImageStyle,
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import type {
+    AvatarSizeConstantType,
+    AvatarDynamicStyleType,
+    AvatarMeasuresKeys,
+    AvatarSizeType,
+    AvatarMeasures,
+    AvatarStatusIndicatorType
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+export const AVATAR_SIZES: Record<AvatarSizeType, AvatarMeasuresKeys> = {
+    xxSmall: {
+        fontSize: "labelSmallSize",
+        statusIndicatorSize: 8,
+        iconSize: 14,
+        size: 24
+    },
+    xSmall: {
+        fontSize: "labelMediumSize",
+        statusIndicatorSize: 10,
+        iconSize: 18,
+        size: 32
+    },
+    small: {
+        fontSize: "labelLargeSize",
+        statusIndicatorSize: 12,
+        iconSize: 22,
+        size: 40
+    },
+    medium: {
+        fontSize: "bodyLargeSize",
+        statusIndicatorSize: 14,
+        iconSize: 26,
+        size: 48
+    },
+    large: {
+        fontSize: "headlineSmallSize",
+        statusIndicatorSize: 16,
+        iconSize: 32,
+        size: 64
+    },
+    xLarge: {
+        fontSize: "headlineMediumSize",
+        statusIndicatorSize: 20,
+        iconSize: 40,
+        size: 80
+    },
+    xxLarge: {
+        fontSize: "displaySmallSize",
+        statusIndicatorSize: 28,
+        iconSize: 60,
+        size: 120
+    },
+    xxxLarge: {
+        fontSize: "displayMediumSize",
+        statusIndicatorSize: 32,
+        iconSize: 76,
+        size: 150
+    }
+};
+
+export const getAvatarSize = ({
+    size
+}: AvatarSizeConstantType): AvatarMeasures => {
+    const currentSize = AVATAR_SIZES[size];
+
+    return {
+        statusIndicatorSize: currentSize.statusIndicatorSize,
+        fontSize: currentSize.fontSize,
+        iconSize: currentSize.iconSize,
+        size: currentSize.size
+    };
+};
+
+export const AvatarStatusCheatsheet: Record<AvatarStatusIndicatorType, keyof NCoreUIKit.IconContentColors> = {
+    "offline": "default",
+    "online": "success",
+    "away": "warning",
+    "busy": "danger",
+    "idle": "info"
+};
+
+const stylesheet = StyleSheet.create({
+    container: {
+        position: "relative",
+        overflow: "visible",
+        display: "flex"
+    },
+    image: {
+        objectFit: "cover"
+    },
+    icon: {
+    },
+    statusIndicator: {
+        position: "absolute",
+        bottom: 0,
+        right: 0
+    }
+});
+
+export const useStyles = ({
+    isShowStatusIndicatorSplicer,
+    avatarBackgroundColor,
+    statusIndicatorType,
+    backgroundColor,
+    isShowBorder,
+    borderColor,
+    currentSize,
+    isDisabled,
+    isLoading,
+    imageUrl,
+    borders,
+    colors,
+    image,
+    title
+}: AvatarDynamicStyleType) => {
+    const styles = {
+        container: {
+            borderColor: borderColor && borderColor !== "transparent" ? colors.content.border[borderColor] : avatarBackgroundColor ? colors.content.container[avatarBackgroundColor] : "transparent",
+            backgroundColor: backgroundColor ? backgroundColor === "transparent" ? "transparent" : colors.content.container[backgroundColor] : colors.content.container.subtle,
+            borderRadius: currentSize.size / 2,
+            height: currentSize.size,
+            width: currentSize.size
+        } as Mutable<ViewStyle>,
+        image: {
+            borderColor: borderColor && borderColor !== "transparent" ? colors.content.border[borderColor] : avatarBackgroundColor ? colors.content.container[avatarBackgroundColor] : "transparent",
+            borderRadius: currentSize.size / 2,
+            height: currentSize.size,
+            width: currentSize.size
+        } as Mutable<ImageStyle>,
+        icon: {
+        } as Mutable<ViewStyle>,
+        statusIndicator: {
+            backgroundColor: colors.content.icon[AvatarStatusCheatsheet[statusIndicatorType]],
+            borderColor: colors.content.container[avatarBackgroundColor],
+            borderRadius: currentSize.statusIndicatorSize / 2,
+            height: currentSize.statusIndicatorSize,
+            width: currentSize.statusIndicatorSize
+        } as Mutable<ViewStyle>
+    };
+
+    if(isShowBorder) {
+        styles.container.borderWidth = borders.subtract;
+        styles.image.borderWidth = borders.subtract;
+    }
+
+    if(!title && !image && !imageUrl && !backgroundColor) {
+        styles.container.backgroundColor = colors.content.container.subtle;
+
+        styles.container.justifyContent = "center";
+        styles.container.alignItems = "center";
+    }
+
+    if(title) {
+        styles.container.backgroundColor = colors.content.container.primary;
+
+        styles.container.justifyContent = "center";
+        styles.container.alignItems = "center";
+    }
+
+    if(isShowStatusIndicatorSplicer) {
+        const multiplier = currentSize.statusIndicatorSize / 14;
+
+        styles.statusIndicator.borderWidth = borders.subtract * multiplier;
+    }
+
+    if(isDisabled) {
+        styles.container.opacity = 0.33;
+    }
+
+    if(isLoading) {
+        styles.container.opacity = 0.33;
+    }
+
+    return styles;
+};
+export default stylesheet;

package/src/components/avatar/type.ts

@@ -0,0 +1,88 @@
+import type {
+    ComponentType
+} from "react";
+import {
+    type ImageURISource,
+    type ImageProps,
+    type TextStyle,
+    type StyleProp
+} from "react-native";
+import type {
+    NCoreUIKitIcon
+} from "../../types";
+
+export type AvatarDynamicStyleType = {
+    backgroundColor?: keyof NCoreUIKit.ContainerContentColors | "transparent";
+    borderColor?: keyof NCoreUIKit.BorderContentColors | "transparent";
+    avatarBackgroundColor: keyof NCoreUIKit.ContainerContentColors;
+    statusIndicatorType: AvatarStatusIndicatorType;
+    borders: NCoreUIKit.ActivePalette["borders"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    isShowStatusIndicatorSplicer?: boolean;
+    image?: ComponentType<ImageProps>;
+    currentSize: AvatarMeasures;
+    isShowBorder?: boolean;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    imageUrl?: string;
+    title?: string;
+};
+
+export type AvatarMeasuresKeys = {
+    fontSize: keyof NCoreUIKit.Typography;
+    statusIndicatorSize: number;
+    iconSize: number;
+    size: number;
+};
+
+export type AvatarMeasures = {
+    fontSize: keyof NCoreUIKit.Typography;
+    statusIndicatorSize: number;
+    iconSize: number;
+    size: number;
+};
+
+export type AvatarSizeConstantType = {
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    size: AvatarSizeType;
+};
+
+export type AvatarStatusIndicatorType = "online" | "offline" | "busy" | "away" | "idle";
+
+export type AvatarTitleAbbreviationTypes = "first-last" | "first-next" | "every-first";
+
+export type AvatarSizeType = "xxSmall" | "xSmall" | "small" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge";
+
+interface IAvatarProps {
+    backgroundColor?: keyof NCoreUIKit.ContainerContentColors | "transparent";
+    borderColor?: keyof NCoreUIKit.BorderContentColors | "transparent";
+    avatarBackgroundColor?: keyof NCoreUIKit.ContainerContentColors;
+    iconColor?: keyof NCoreUIKit.ProjectColorPalette;
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+    style?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
+    titleAbbreviationType?: AvatarTitleAbbreviationTypes;
+    statusIndicatorType?: AvatarStatusIndicatorType;
+    titleColor?: keyof NCoreUIKit.TextContentColors;
+    isShowStatusIndicatorSplicer?: boolean;
+    image?: ComponentType<ImageProps>;
+    imageSource?: ImageURISource;
+    isStatusIndicator?: boolean;
+    isWorkWithAction?: boolean;
+    imageProps?: ImageProps;
+    isShowBorder?: boolean;
+    icon?: NCoreUIKitIcon;
+    size?: AvatarSizeType;
+    isDisabled?: boolean;
+    onPress?: () => void;
+    isLoading?: boolean;
+    imageUrl?: string;
+    title?: string;
+}
+export type {
+    IAvatarProps as default
+};

package/src/components/avatarGroup/index.tsx

@@ -0,0 +1,172 @@
+import {
+    Fragment
+} from "react";
+import {
+    TouchableOpacity,
+    View
+} from "react-native";
+import type IAvatarProps from "./type";
+import stylesheet, {
+    getAvatarGroupSize,
+    useStyles
+} from "./stylesheet";
+import {
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import {
+    UserRound as UserRoundIcon
+} from "lucide-react-native";
+import Loading from "../loading";
+import Avatar from "../avatar";
+import Text from "../text";
+
+const AvatarGroup = ({
+    titleAbbreviationType = "first-last",
+    isShowStatusIndicatorSplicer = true,
+    avatarBackgroundColor = "default",
+    isStatusIndicator,
+    isWorkWithAction,
+    size = "medium",
+    borderColor,
+    customTheme,
+    isDisabled,
+    imageProps,
+    isLoading,
+    avatars,
+    onPress,
+    style
+}: IAvatarProps) => {
+    const {
+        borders,
+        colors
+    } = NCoreUIKitTheme.useContext(customTheme);
+
+    const currentSize = getAvatarGroupSize({
+        size
+    });
+
+    const currentAvatars = avatars && avatars.length > 2 ? avatars?.slice(0, 2) : avatars;
+
+    const {
+        moreAvatarsContainer: moreAvatarsContainerDynamicStyle,
+        iconContainer: iconContainerDynamicStyle,
+        container: containerDynamicStyle,
+        avatar: avatarDynamicStyle,
+        icon: iconDynamicStyle
+    } = useStyles({
+        avatarBackgroundColor,
+        currentSize,
+        borderColor,
+        isDisabled,
+        isLoading,
+        avatars,
+        borders,
+        colors
+    });
+
+    const renderIcon = () => {
+        if(isLoading) {
+            return renderLoading();
+        }
+
+        return <UserRoundIcon
+            color={colors.content.icon.default}
+            size={currentSize.iconSize}
+            style={{
+                ...iconDynamicStyle
+            }}
+        />;
+    };
+
+    const renderLoading = () => {
+        return <Loading
+            color="default"
+        />;
+    };
+
+    const renderAvatars = () => {
+        if(!currentAvatars || !currentAvatars.length) {
+            return null;
+        }
+
+        return currentAvatars.map((avatarItem, avatarIndex) => {
+            return <Avatar
+                {...avatarItem}
+                isShowStatusIndicatorSplicer={isShowStatusIndicatorSplicer}
+                titleAbbreviationType={titleAbbreviationType}
+                avatarBackgroundColor={avatarBackgroundColor}
+                isStatusIndicator={isStatusIndicator}
+                isWorkWithAction={undefined}
+                borderColor={borderColor}
+                customTheme={customTheme}
+                imageProps={imageProps}
+                isShowBorder={true}
+                onPress={undefined}
+                isDisabled={false}
+                isLoading={false}
+                size={size}
+                style={{
+                    ...avatarDynamicStyle,
+                    ...avatarItem.style,
+                    transform: [{
+                        translateX: avatarIndex === 0 ? currentSize.size / 3 : 0
+                    }]
+                }}
+            />;
+        });
+    };
+
+    const renderMoreAvatars = () => {
+        if(!avatars) {
+            return null;
+        }
+
+        if(avatars.length < 3) {
+            return null;
+        }
+
+        return <View
+            style={[
+                stylesheet.moreAvatarsContainer,
+                moreAvatarsContainerDynamicStyle
+            ]}
+        >
+            <Text
+                variant="labelLargeSize"
+                color="mid"
+            >
+                +{avatars.length - 2}
+            </Text>
+        </View>;
+    };
+
+    const renderContent = () => {
+        return <Fragment>
+            {renderAvatars()}
+            <View
+                style={[
+                    stylesheet.iconContainer,
+                    iconContainerDynamicStyle
+                ]}
+            >
+                {renderIcon()}
+            </View>
+            {renderMoreAvatars()}
+        </Fragment>;
+    };
+
+    return <TouchableOpacity
+        disabled={!isWorkWithAction || isDisabled || isLoading}
+        onPress={!isWorkWithAction || isDisabled || isLoading ? undefined : () => {
+            if(onPress) onPress();
+        }}
+        style={[
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ]}
+    >
+        {renderContent()}
+    </TouchableOpacity>;
+};
+export default AvatarGroup;

package/src/components/avatarGroup/stylesheet.ts

@@ -0,0 +1,138 @@
+import {
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import type {
+    AvatarGroupSizeConstantType,
+    AvatarGroupDynamicStyleType,
+    AvatarGroupMeasuresKeys,
+    AvatarGroupSizeType
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+export const AVATAR_GROUP_SIZES: Record<AvatarGroupSizeType, AvatarGroupMeasuresKeys> = {
+    xxSmall: {
+        fontSize: "labelSmallSize",
+        iconSize: 14,
+        size: 24
+    },
+    xSmall: {
+        fontSize: "labelMediumSize",
+        iconSize: 18,
+        size: 32
+    },
+    small: {
+        fontSize: "labelLargeSize",
+        iconSize: 22,
+        size: 40
+    },
+    medium: {
+        fontSize: "bodyLargeSize",
+        iconSize: 26,
+        size: 48
+    },
+    large: {
+        fontSize: "headlineSmallSize",
+        iconSize: 32,
+        size: 64
+    },
+    xLarge: {
+        fontSize: "headlineMediumSize",
+        iconSize: 40,
+        size: 80
+    },
+    xxLarge: {
+        fontSize: "displaySmallSize",
+        iconSize: 60,
+        size: 120
+    },
+    xxxLarge: {
+        fontSize: "displayMediumSize",
+        iconSize: 76,
+        size: 150
+    }
+};
+
+export const getAvatarGroupSize = ({
+    size
+}: AvatarGroupSizeConstantType): AvatarGroupMeasuresKeys => {
+    const currentSize = AVATAR_GROUP_SIZES[size];
+
+    return {
+        fontSize: currentSize.fontSize,
+        iconSize: currentSize.iconSize,
+        size: currentSize.size
+    };
+};
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        position: "relative"
+    },
+    iconContainer: {
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    icon: {
+    },
+    moreAvatarsContainer: {
+        justifyContent: "center",
+        alignItems: "center"
+    }
+});
+
+export const useStyles = ({
+    avatarBackgroundColor,
+    currentSize,
+    borderColor,
+    isDisabled,
+    isLoading,
+    avatars,
+    borders,
+    colors
+}: AvatarGroupDynamicStyleType) => {
+    const styles = {
+        container: {
+        } as Mutable<ViewStyle>,
+        iconContainer: {
+            borderColor: borderColor ? borderColor === "transparent" ? "transparent" : colors.content.border[borderColor] : avatarBackgroundColor ? colors.content.container[avatarBackgroundColor] : colors.content.container.default,
+            transform: [{
+                translateX: avatars && avatars.length === 1 ? 0 : (currentSize.size / 3) * -1
+            }],
+            backgroundColor: colors.content.container.subtle,
+            borderRadius: currentSize.size / 2,
+            borderWidth: borders.subtract,
+            height: currentSize.size,
+            width: currentSize.size
+        } as Mutable<ViewStyle>,
+        icon: {
+        } as Mutable<ViewStyle>,
+        moreAvatarsContainer: {
+            borderColor: borderColor ? borderColor === "transparent" ? "transparent" : colors.content.border[borderColor] : avatarBackgroundColor ? colors.content.container[avatarBackgroundColor] : colors.content.container.default,
+            backgroundColor: colors.content.container.subtle,
+            transform: [{
+                translateX: (currentSize.size / 1.5) * -1
+            }],
+            borderRadius: currentSize.size / 2,
+            borderWidth: borders.subtract,
+            height: currentSize.size,
+            width: currentSize.size
+        } as Mutable<ViewStyle>,
+        avatar: {
+        } as Mutable<ViewStyle>
+    };
+
+    if(isDisabled) {
+        styles.container.opacity = 0.33;
+    }
+
+    if(isLoading) {
+        styles.container.opacity = 0.33;
+    }
+
+    return styles;
+};
+export default stylesheet;

package/src/components/avatarGroup/type.ts

@@ -0,0 +1,74 @@
+import {
+    type ImageProps,
+    type TextStyle,
+    type StyleProp
+} from "react-native";
+import type IAvatarProps from "../avatar/type";
+import type {
+    AvatarTitleAbbreviationTypes,
+    AvatarSizeType
+} from "../avatar/type";
+
+export type AvatarGroupDynamicStyleType = {
+    borderColor?: keyof NCoreUIKit.BorderContentColors | "transparent";
+    avatarBackgroundColor: keyof NCoreUIKit.ContainerContentColors;
+    borders: NCoreUIKit.ActivePalette["borders"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    avatars?: Array<AvatarGroupAvatarsType>;
+    currentSize: AvatarGroupMeasuresKeys;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+};
+
+export type AvatarGroupSizeConstantType = {
+    size: AvatarGroupSizeType;
+};
+
+export type AvatarGroupMeasuresKeys = {
+    fontSize: keyof NCoreUIKit.Typography;
+    iconSize: number;
+    size: number;
+};
+
+export type AvatarGroupTitleAbbreviationTypes = "first-last" | "first-next" | "every-first";
+
+export type AvatarGroupSizeType = "xxSmall" | "xSmall" | "small" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge";
+
+export type AvatarGroupAvatarsType = Omit<
+    IAvatarProps,
+    "isShowStatusIndicatorSplicer" |
+    "avatarBackgroundColor" |
+    "titleAbbreviationType" |
+    "isStatusIndicator" |
+    "isWorkWithAction" |
+    "isDisabled" |
+    "imageProps" |
+    "isLoading" |
+    "onPress" |
+    "size"
+>;
+
+interface IAvatarGroupProps {
+    borderColor?: keyof NCoreUIKit.BorderContentColors | "transparent";
+    avatarBackgroundColor?: keyof NCoreUIKit.ContainerContentColors;
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+    style?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
+    titleAbbreviationType?: AvatarTitleAbbreviationTypes;
+    avatars?: Array<AvatarGroupAvatarsType>;
+    isShowStatusIndicatorSplicer?: boolean;
+    isStatusIndicator?: boolean;
+    isWorkWithAction?: boolean;
+    imageProps?: ImageProps;
+    size?: AvatarSizeType;
+    isDisabled?: boolean;
+    onPress?: () => void;
+    isLoading?: boolean;
+}
+export type {
+    IAvatarGroupProps as default
+};