ncore-ui-kit 1.0.0-alpha.0

package/src/components/seperator/stylesheet.ts

@@ -0,0 +1,70 @@
+import {
+    type TextStyle,
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import type {
+    SeperatorDynamicStyle
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        justifyContent: "center",
+        alignItems: "center",
+        display: "flex"
+    },
+    indicator: {
+        flex: 1
+    },
+    title: {
+    }
+});
+
+export const useStyles = ({
+    customColor,
+    direction,
+    borders,
+    length,
+    colors,
+    spaces,
+    color
+}: SeperatorDynamicStyle) => {
+    const styles = {
+        container: {
+        } as Mutable<ViewStyle>,
+        indicator: {
+            backgroundColor: customColor ? customColor : color ? colors.content.border[color] : colors.content.border.subtle
+        } as Mutable<ViewStyle>,
+        title: {
+            marginHorizontal: spaces.spacingSm
+        } as Mutable<TextStyle>
+    };
+
+    if(direction === "horizontal") {
+        styles.container.flexDirection = "row";
+        styles.container.width = "90%";
+
+        styles.indicator.height = borders.seperator;
+        styles.indicator.width = "100%";
+    } else {
+        styles.container.flexDirection = "column";
+        styles.container.height = "90%";
+
+        styles.indicator.width = borders.seperator;
+        styles.indicator.height = "100%";
+    }
+
+    if(length !== undefined) {
+        if(direction === "horizontal") {
+            styles.container.width = length;
+        } else {
+            styles.container.height = length;
+        }
+    }
+
+    return styles;
+};
+export default stylesheet;

package/src/components/seperator/type.ts

@@ -0,0 +1,28 @@
+import {
+    type SvgProps
+} from "react-native-svg";
+
+export type SeperatorDynamicStyle = {
+    color?: keyof NCoreUIKit.BorderContentColors;
+    borders: NCoreUIKit.ActivePalette["borders"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    direction?: SeperatorDirectionType;
+    length?: number | string;
+    customColor?: string;
+};
+
+export type SeperatorDirectionType = "horizontal" | "vertical";
+
+interface ISeperatorProps {
+    color?: keyof NCoreUIKit.BorderContentColors;
+    direction?: SeperatorDirectionType;
+    style?: SvgProps["style"];
+    length?: number | string;
+    isShowTitle?: boolean;
+    customColor?: string;
+    title?: string;
+}
+export type {
+    ISeperatorProps as default
+};

package/src/components/siteLogo/index.tsx

@@ -0,0 +1,266 @@
+import {
+    useState
+} from "react";
+import {
+    TouchableOpacity,
+    Image,
+    View
+} from "react-native";
+import type ISiteLogoProps from "./type";
+import stylesheet, {
+    getSiteLogoSize,
+    useStyles
+} from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import {
+    Home as HomeIcon
+} from "lucide-react-native";
+import Loading from "../loading";
+import Text from "../text";
+
+const SiteLogo = ({
+    logoBackgroundColor = "default",
+    isWorkWithFlex1 = true,
+    isShowBorder = false,
+    subTitleCustomColor,
+    isCustomImageSize,
+    isShowIcon = true,
+    isWorkWithAction,
+    titleCustomColor,
+    image: ImageProp,
+    backgroundColor,
+    subTitleVariant,
+    customLocalize,
+    icon: IconProp,
+    size = "large",
+    subTitleStyle,
+    subTitleColor,
+    titleVariant,
+    imageSource,
+    customTheme,
+    borderColor,
+    subTitleKey,
+    titleStyle,
+    imageSpace,
+    isDisabled,
+    titleColor,
+    imageProps,
+    isLoading,
+    iconColor,
+    titleKey,
+    imageUrl,
+    subTitle,
+    onPress,
+    title,
+    style
+}: ISiteLogoProps) => {
+    const {
+        borders,
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext(customTheme);
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext(customLocalize);
+
+    const currentSize = getSiteLogoSize({
+        spaces,
+        size
+    });
+
+    const [
+        imageLoadError,
+        setImageLoadError
+    ] = useState(false);
+
+    const {
+        contentContainer: contentContainerDynamicStyle,
+        titlesContainer: titlesContainerDynamicStyle,
+        container: containerDynamicStyle,
+        image: imageDynamicStyle,
+        icon: iconDynamicStyle
+    } = useStyles({
+        logoBackgroundColor,
+        isCustomImageSize,
+        image: ImageProp,
+        isWorkWithFlex1,
+        backgroundColor,
+        isShowBorder,
+        borderColor,
+        currentSize,
+        isDisabled,
+        imageSpace,
+        isLoading,
+        imageUrl,
+        borders,
+        colors,
+        spaces
+    });
+
+    const renderIcon = () => {
+        if(IconProp) {
+            return <IconProp
+                size={currentSize.iconSize}
+                customColor={iconColor}
+                color="default"
+                style={{
+                    ...iconDynamicStyle
+                }}
+            />;
+        }
+
+        return <HomeIcon
+            color={iconColor ? iconColor : colors.content.icon.default}
+            size={currentSize.iconSize}
+            style={{
+                ...iconDynamicStyle
+            }}
+        />;
+    };
+
+    const renderLoading = () => {
+        let loadingColor: keyof NCoreUIKit.IconContentColors = "default";
+
+        if(title || titleKey) {
+            loadingColor = "onPrimary";
+        } else if(imageUrl || ImageProp) {
+            loadingColor = "mid";
+        }
+
+        return <Loading
+            color={loadingColor}
+        />;
+    };
+
+    const renderContent = () => {
+        if(isLoading) {
+            return renderLoading();
+        }
+
+        if(IconProp) {
+            return renderIcon();
+        }
+
+        if(!ImageProp && !imageUrl) {
+            return renderIcon();
+        }
+
+        if((imageUrl || ImageProp) && imageLoadError) {
+            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 null;
+    };
+
+    const renderTitles = () => {
+        if(!title && !titleKey) {
+            return null;
+        }
+
+        return <View
+            style={[
+                stylesheet.titlesContainer,
+                titlesContainerDynamicStyle
+            ]}
+        >
+            <Text
+                customColor={titleCustomColor ? colors.project[titleCustomColor] : undefined}
+                variant={titleVariant ? titleVariant : currentSize.titleSize}
+                color={titleColor ? titleColor : "high"}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={{
+                    width: "100%",
+                    ...titleStyle
+                }}
+            >
+                {titleKey ? localize(titleKey) : title}
+            </Text>
+            {
+                subTitle || subTitleKey ?
+                    <Text
+                        customColor={subTitleCustomColor ? colors.project[subTitleCustomColor] : undefined}
+                        variant={subTitleVariant ? subTitleVariant : currentSize.subTitleSize}
+                        color={subTitleColor ? subTitleColor : "low"}
+                        ellipsizeMode="tail"
+                        numberOfLines={1}
+                        style={{
+                            width: "100%",
+                            ...subTitleStyle
+                        }}
+                    >
+                        {subTitleKey ? subTitleKey : subTitle}
+                    </Text>
+                    :
+                    null
+            }
+        </View>;
+    };
+
+    const renderContentContainer = () => {
+        if(!isShowIcon) {
+            return null;
+        }
+
+        return <View
+            style={[
+                stylesheet.contentContainer,
+                contentContainerDynamicStyle
+            ]}
+        >
+            {renderContent()}
+        </View>;
+    };
+
+    return <TouchableOpacity
+        disabled={!isWorkWithAction || isDisabled || isLoading}
+        onPress={!isWorkWithAction || isDisabled || isLoading ? undefined : () => {
+            if(onPress) onPress();
+        }}
+        style={[
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ]}
+    >
+        {renderContentContainer()}
+        {renderTitles()}
+    </TouchableOpacity>;
+};
+export default SiteLogo;

package/src/components/siteLogo/stylesheet.ts

@@ -0,0 +1,193 @@
+import {
+    type ImageStyle,
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import type {
+    SiteLogoSizeConstantType,
+    SiteLogoDynamicStyleType,
+    SiteLogoMeasuresKeys,
+    SiteLogoSizeType,
+    SiteLogoMeasures
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+export const SITE_LOGO_SIZES: Record<SiteLogoSizeType, SiteLogoMeasuresKeys> = {
+    xxSmall: {
+        subTitleSize: "labelSmallSize",
+        titleSize: "labelSmallSize",
+        iconSize: 18,
+        size: 32
+    },
+    xSmall: {
+        subTitleSize: "labelSmallSize",
+        titleSize: "labelMediumSize",
+        iconSize: 22,
+        size: 40
+    },
+    small: {
+        subTitleSize: "labelMediumSize",
+        titleSize: "labelLargeSize",
+        iconSize: 26,
+        size: 48
+    },
+    medium: {
+        subTitleSize: "labelLargeSize",
+        titleSize: "bodyLargeSize",
+        iconSize: 32,
+        size: 64
+    },
+    large: {
+        titleSize: "headlineSmallSize",
+        subTitleSize: "bodyLargeSize",
+        iconSize: 40,
+        size: 80
+    },
+    xLarge: {
+        subTitleSize: "headlineSmallSize",
+        titleSize: "headlineMediumSize",
+        iconSize: 60,
+        size: 120
+    },
+    xxLarge: {
+        subTitleSize: "headlineMediumSize",
+        titleSize: "displaySmallSize",
+        iconSize: 76,
+        size: 150
+    },
+    xxxLarge: {
+        subTitleSize: "displaySmallSize",
+        titleSize: "displayMediumSize",
+        iconSize: 96,
+        size: 180
+    }
+};
+
+export const getSiteLogoSize = ({
+    size
+}: SiteLogoSizeConstantType): SiteLogoMeasures => {
+    const currentSize = SITE_LOGO_SIZES[size];
+
+    return {
+        subTitleSize: currentSize.subTitleSize,
+        titleSize: currentSize.titleSize,
+        iconSize: currentSize.iconSize,
+        size: currentSize.size
+    };
+};
+
+const stylesheet = StyleSheet.create({
+    container: {
+        justifyContent: "center",
+        flexDirection: "row",
+        alignItems: "center",
+        position: "relative",
+        overflow: "visible",
+        display: "flex"
+    },
+    image: {
+        objectFit: "cover"
+    },
+    icon: {
+    },
+    contentContainer: {
+        justifyContent: "center",
+        flexDirection: "row",
+        alignItems: "center",
+        position: "relative",
+        overflow: "visible",
+        display: "flex"
+    },
+    titlesContainer: {
+        justifyContent: "center",
+        flexDirection: "column",
+        display: "flex",
+        minWidth: 0,
+        flex: 1
+    }
+});
+
+export const useStyles = ({
+    logoBackgroundColor,
+    isCustomImageSize,
+    isWorkWithFlex1,
+    backgroundColor,
+    isShowBorder,
+    borderColor,
+    currentSize,
+    isDisabled,
+    imageSpace,
+    isLoading,
+    imageUrl,
+    borders,
+    colors,
+    spaces,
+    image
+}: SiteLogoDynamicStyleType) => {
+    const styles = {
+        container: {
+        } as Mutable<ViewStyle>,
+        image: {
+        } as Mutable<ImageStyle>,
+        icon: {
+        } as Mutable<ViewStyle>,
+        titlesContainer: {
+            marginLeft: spaces.spacingSm * 1.5
+        } as Mutable<ViewStyle>,
+        contentContainer: {
+        } as Mutable<ViewStyle>
+    };
+
+    if(isCustomImageSize) {
+        styles.image.width = currentSize.size * 3 - (imageSpace ? spaces[imageSpace] : 0);
+        styles.image.height = currentSize.size - (imageSpace ? spaces[imageSpace] : 0);
+
+        styles.contentContainer.borderRadius = currentSize.size / 2;
+        styles.contentContainer.width = currentSize.size * 3;
+        styles.contentContainer.height = currentSize.size;
+    } else {
+        styles.image.borderColor = borderColor && borderColor !== "transparent" ? colors.content.border[borderColor] : logoBackgroundColor ? colors.content.container[logoBackgroundColor] : "transparent";
+
+        styles.image.height = currentSize.size - (imageSpace ? spaces[imageSpace] : 0);
+        styles.image.width = currentSize.size - (imageSpace ? spaces[imageSpace] : 0);
+        styles.image.borderRadius = currentSize.size / 2;
+
+        styles.contentContainer.borderColor = borderColor && borderColor !== "transparent" ? colors.content.border[borderColor] : logoBackgroundColor ? colors.content.container[logoBackgroundColor] : "transparent";
+        styles.contentContainer.backgroundColor = backgroundColor ? backgroundColor === "transparent" ? "transparent" : colors.content.container[backgroundColor] : colors.content.container.subtle;
+
+        styles.contentContainer.borderRadius = currentSize.size / 2;
+        styles.contentContainer.height = currentSize.size;
+        styles.contentContainer.width = currentSize.size;
+    }
+
+    if(isShowBorder) {
+        styles.contentContainer.borderWidth = borders.subtract;
+        styles.image.borderWidth = borders.subtract;
+    }
+
+    if(!image && !imageUrl && !backgroundColor) {
+        styles.contentContainer.backgroundColor = colors.content.container.subtle;
+
+        styles.contentContainer.justifyContent = "center";
+        styles.contentContainer.alignItems = "center";
+
+        styles.titlesContainer.marginLeft = 0;
+    }
+
+    if(isDisabled) {
+        styles.container.opacity = 0.33;
+    }
+
+    if(isLoading) {
+        styles.container.opacity = 0.33;
+    }
+
+    if(isWorkWithFlex1) {
+        styles.container.flex = 1;
+    }
+
+    return styles;
+};
+export default stylesheet;

package/src/components/siteLogo/type.ts

@@ -0,0 +1,99 @@
+import type {
+    ComponentType
+} from "react";
+import {
+    type ImageURISource,
+    type ImageProps,
+    type StyleProp,
+    type ViewStyle,
+    type TextStyle
+} from "react-native";
+import type {
+    NCoreUIKitIcon
+} from "../../types";
+
+export type SiteLogoDynamicStyleType = {
+    backgroundColor?: keyof NCoreUIKit.ContainerContentColors | "transparent";
+    borderColor?: keyof NCoreUIKit.BorderContentColors | "transparent";
+    logoBackgroundColor: keyof NCoreUIKit.ContainerContentColors;
+    imageSpace?: keyof NCoreUIKit.ActivePalette["spaces"];
+    borders: NCoreUIKit.ActivePalette["borders"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    image?: ComponentType<ImageProps>;
+    currentSize: SiteLogoMeasures;
+    isCustomImageSize?: boolean;
+    isWorkWithFlex1?: boolean;
+    isShowBorder?: boolean;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    imageUrl?: string;
+};
+
+export type SiteLogoMeasuresKeys = {
+    subTitleSize: keyof NCoreUIKit.Typography;
+    titleSize: keyof NCoreUIKit.Typography;
+    iconSize: number;
+    size: number;
+};
+
+export type SiteLogoMeasures = {
+    subTitleSize: keyof NCoreUIKit.Typography;
+    titleSize: keyof NCoreUIKit.Typography;
+    iconSize: number;
+    size: number;
+};
+
+export type SiteLogoSizeConstantType = {
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    size: SiteLogoSizeType;
+};
+
+export type SiteLogoSizeType = "xxSmall" | "xSmall" | "small" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge";
+
+interface ISiteLogoProps {
+    backgroundColor?: keyof NCoreUIKit.ContainerContentColors | "transparent";
+    borderColor?: keyof NCoreUIKit.BorderContentColors | "transparent";
+    logoBackgroundColor?: keyof NCoreUIKit.ContainerContentColors;
+    subTitleCustomColor?: keyof NCoreUIKit.ProjectColorPalette;
+    titleCustomColor?: keyof NCoreUIKit.ProjectColorPalette;
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+    style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    imageSpace?: keyof NCoreUIKit.ActivePalette["spaces"];
+    subTitleColor?: keyof NCoreUIKit.TextContentColors;
+    iconColor?: keyof NCoreUIKit.ProjectColorPalette;
+    titleColor?: keyof NCoreUIKit.TextContentColors;
+    subTitleVariant?: keyof NCoreUIKit.Typography;
+    customLocalize?: {
+        activeLocale?: keyof NCoreUIKit.LocaleKey;
+    };
+    titleVariant?: keyof NCoreUIKit.Typography;
+    subTitleKey?: keyof NCoreUIKit.Translation;
+    titleKey?: keyof NCoreUIKit.Translation;
+    image?: ComponentType<ImageProps>;
+    imageSource?: ImageURISource;
+    isCustomImageSize?: boolean;
+    isWorkWithAction?: boolean;
+    isWorkWithFlex1?: boolean;
+    subTitleStyle?: TextStyle;
+    imageProps?: ImageProps;
+    size?: SiteLogoSizeType;
+    isShowBorder?: boolean;
+    titleStyle?: TextStyle;
+    icon?: NCoreUIKitIcon;
+    isShowIcon?: boolean;
+    isDisabled?: boolean;
+    onPress?: () => void;
+    isLoading?: boolean;
+    imageUrl?: string;
+    subTitle?: string;
+    title?: string;
+}
+export type {
+    ISiteLogoProps as default
+};