ncore-ui-kit 1.0.0-alpha.0

package/src/components/localeSwitcher/index.tsx

@@ -0,0 +1,136 @@
+import {
+    useEffect,
+    useState,
+    type FC
+} from "react";
+import type ILocaleSwitcherProps from "./type";
+import type {
+    LocaleSwitchVariants
+} from "./type";
+import {
+    NCoreUIKitLocalize
+} from "../../core/hooks";
+import type {
+    NCoreUIKitIcon
+} from "../../types";
+import Button from "../button";
+import {
+    EnUsIcon,
+    TRTRIcon
+} from "../../assets/svg";
+
+const PaletteSwitcher: FC<ILocaleSwitcherProps> = ({
+    variants: variantsProps = [],
+    isWorkWithNextShowSystem,
+    customLocalize,
+    color,
+    style,
+    ...props
+}) => {
+    const {
+        activeLocale,
+        localeKeys
+    } = NCoreUIKitLocalize.useContext(customLocalize);
+
+    const [
+        currentIndex,
+        setCurrentIndex
+    ] = useState(localeKeys.findIndex(t => t === activeLocale));
+
+    useEffect(() => {
+        const cI = localeKeys.findIndex(tI => tI === activeLocale);
+
+        const nextCI = isWorkWithNextShowSystem ? cI + 1 > localeKeys.length - 1 ? 0 : cI + 1 : cI;
+
+        if(currentIndex !== nextCI) {
+            setCurrentIndex(nextCI);
+        }
+    }, [activeLocale]);
+
+    const variantsPre: LocaleSwitchVariants = variantsProps;
+
+    const isHaveNCTRTR = variantsProps.findIndex(iV => iV.localeKey === "tr-TR") !== -1;
+    const isHaveNCENUS = variantsProps.findIndex(iV => iV.localeKey === "en-US") !== -1;
+
+    if(!isHaveNCTRTR) {
+        variantsPre.unshift({
+            borderColor: "transparent",
+            backgroundColor: "subtle",
+            iconColor: "turkish",
+            localeKey: "tr-TR",
+            icon: ({
+                size
+            }) => {
+                return <TRTRIcon
+                    size={size + 5}
+                />;
+            }
+        });
+    }
+
+    if(!isHaveNCENUS) {
+        variantsPre.unshift({
+            borderColor: "transparent",
+            backgroundColor: "subtle",
+            iconColor: "english",
+            localeKey: "en-US",
+            icon: ({
+                size
+            }) => {
+                return <EnUsIcon
+                    size={size + 5}
+                />;
+            }
+        });
+    }
+
+    const variants = [...variantsPre].sort((a, b) => {
+        return localeKeys.indexOf(a.localeKey) - localeKeys.indexOf(b.localeKey);
+    });
+
+    const currentVariantIndex = variants.findIndex(e => e.localeKey === activeLocale);
+
+    if(currentVariantIndex === -1) {
+        return null;
+    }
+
+    const nextVariantIndex = currentVariantIndex + 1;
+    const viewVariantIndex = nextVariantIndex > variants.length - 1 ? 0 : nextVariantIndex;
+
+    const currentVariant = variants[isWorkWithNextShowSystem ? viewVariantIndex : currentVariantIndex];
+
+    return <Button
+        {...props}
+        customBorderColor={currentVariant && currentVariant.borderColor ?
+            currentVariant.borderColor
+            :
+            color
+        }
+        customColor={currentVariant && currentVariant.backgroundColor ?
+            currentVariant.backgroundColor
+            :
+            color
+        }
+        icon={({
+            color,
+            size
+        }) => {
+            const Icon = currentVariant?.icon as NCoreUIKitIcon;
+
+            return <Icon
+                customColor={currentVariant && currentVariant.iconColor ? currentVariant.iconColor : undefined}
+                color={color}
+                size={size}
+            />;
+        }}
+        onPress={() => {
+            NCoreUIKitLocalize.switch({
+                localeKey: localeKeys[viewVariantIndex] as keyof NCoreUIKit.LocaleKey
+            });
+        }}
+        style={[
+            style
+        ]}
+    />;
+};
+export default PaletteSwitcher;

package/src/components/localeSwitcher/type.ts

@@ -0,0 +1,31 @@
+import {
+    type TextStyle,
+    type StyleProp
+} from "react-native";
+import type {
+    NCoreUIKitIcon
+} from "../../types";
+import type IButtonProps from "../button/type";
+
+export type LocaleSwitchVariant = {
+    backgroundColor: keyof NCoreUIKit.ContainerContentColors | "transparent";
+    borderColor: keyof NCoreUIKit.BorderContentColors | "transparent";
+    iconColor: keyof NCoreUIKit.ProjectColorPalette;
+    localeKey: keyof NCoreUIKit.LocaleKey;
+    icon: NCoreUIKitIcon;
+};
+
+export type LocaleSwitchVariants = Array<LocaleSwitchVariant>;
+
+interface ILocaleSwitcherProps extends Omit<IButtonProps, "onPress"> {
+    color?: keyof NCoreUIKit.ContainerContentColors | "transparent";
+    style?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
+    customLocalize?: {
+        activeLocale?: keyof NCoreUIKit.LocaleKey;
+    };
+    isWorkWithNextShowSystem?: boolean;
+    variants?: LocaleSwitchVariants;
+}
+export type {
+    ILocaleSwitcherProps as default
+};

package/src/components/mainHeader/index.tsx

@@ -0,0 +1,176 @@
+import {
+    useEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import type IMainHeader from "./type";
+import stylesheet, {
+    useStyles
+} from "./stylesheet";
+import {
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import {
+    SafeAreaView
+} from "react-native-safe-area-context";
+import {
+    Portal
+} from "../../helpers/portalize";
+import SiteLogo from "../siteLogo";
+
+const MainHeader = ({
+    isWorkWithSafeAreaView = true,
+    isWorkWithStickySpace = false,
+    isSetAutoHeaderSpace = true,
+    isWorkWithSeperator = false,
+    backgroundColor = "default",
+    portalName = "main-header",
+    isWorkWithPortal = false,
+    isWorkWithSticky = false,
+    renderRight: RenderRight,
+    renderLeft: RenderLeft,
+    customBackgroundColor,
+    onContentHeight,
+    customLocalize,
+    siteLogoProps,
+    customTheme,
+    glassEffect,
+    children,
+    style,
+    ...props
+}: IMainHeader) => {
+    const {
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        safeAreaView: safeAreaViewDynamicStyle,
+        container: containerDynamicStyle
+    } = useStyles({
+        isWorkWithSafeAreaView,
+        customBackgroundColor,
+        isWorkWithSeperator,
+        isWorkWithSticky,
+        backgroundColor,
+        glassEffect,
+        borders,
+        spaces,
+        colors
+    });
+
+    const [
+        contentHeight,
+        setContentHeight
+    ] = useState<null | number>(null);
+
+    useEffect(() => {
+        if(onContentHeight) onContentHeight(contentHeight);
+    }, [contentHeight]);
+
+    const renderRight = () => {
+        if(RenderRight) {
+            return <RenderRight/>;
+        }
+
+        return <View/>;
+    };
+
+    const renderLeft = () => {
+        if(RenderLeft) {
+            return <RenderLeft/>;
+        }
+
+        return <SiteLogo
+            isWorkWithFlex1={false}
+            customLocalize={customLocalize}
+            customTheme={customTheme}
+            size="medium"
+            {...siteLogoProps}
+        />;
+    };
+
+    const renderContent = () => {
+        return <View
+            {...props}
+            style={[
+                style,
+                stylesheet.container,
+                containerDynamicStyle
+            ]}
+            onLayout={(event) => {
+                if(props && props.onLayout) {
+                    props.onLayout(event);
+                }
+
+                if(isWorkWithSticky) {
+                    const _contentHeight = event.nativeEvent.layout.height;
+
+                    setContentHeight(_contentHeight);
+
+                    if(isSetAutoHeaderSpace) {
+                        NCoreUIKitTheme.updateConfigs({
+                            headerSpace: _contentHeight
+                        });
+                    }
+                }
+            }}
+        >
+            {renderLeft()}
+            {renderRight()}
+        </View>;
+    };
+
+    const renderContentContainer = () => {
+        if(isWorkWithPortal) {
+            return <Portal
+                name={portalName}
+            >
+                {renderContent()}
+            </Portal>;
+        }
+
+        return renderContent();
+    };
+
+    const renderSafeAreaView = () => {
+        return <SafeAreaView
+            edges={[
+                "top"
+            ]}
+            style={[
+                safeAreaViewDynamicStyle
+            ]}
+        >
+            {renderContentContainer()}
+        </SafeAreaView>;
+    };
+
+    const renderWithChildren = () => {
+        return <View
+            style={[
+                stylesheet.baseContainer
+            ]}
+        >
+            {isWorkWithSafeAreaView ? renderSafeAreaView() : renderContentContainer()}
+            {isWorkWithSticky && isWorkWithStickySpace ? <View
+                style={{
+                    backgroundColor: customBackgroundColor ? colors.project[customBackgroundColor] : colors.content.container[backgroundColor],
+                    height: contentHeight,
+                    width: "100%"
+                }}
+            /> : null}
+            {children}
+        </View>;
+    };
+
+    if(children) {
+        return renderWithChildren();
+    }
+
+    return isWorkWithSafeAreaView ? renderSafeAreaView() : renderContentContainer();
+};
+export default MainHeader;

package/src/components/mainHeader/stylesheet.ts

@@ -0,0 +1,75 @@
+import {
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import type {
+    MainHeaderDynamicStyle
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+import {
+    webStyle
+} from "../../utils";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        width: "100%"
+    },
+    baseContainer: {
+        flexDirection: "column",
+        flex: 1
+    }
+});
+
+export const useStyles = ({
+    isWorkWithSafeAreaView,
+    customBackgroundColor,
+    isWorkWithSeperator,
+    isWorkWithSticky,
+    backgroundColor,
+    glassEffect,
+    borders,
+    spaces,
+    colors
+}: MainHeaderDynamicStyle) => {
+    const styles = {
+        container: {
+            backgroundColor: customBackgroundColor ? colors.project[customBackgroundColor] : backgroundColor ? colors.content.container[backgroundColor] : colors.content.container.default,
+            padding: spaces.spacingMd,
+            ...webStyle({
+                WebkitBackdropFilter: `blur(${glassEffect}px)`,
+                backdropFilter: `blur(${glassEffect}px)`
+            })
+        } as Mutable<ViewStyle>,
+        safeAreaView: {
+        } as Mutable<ViewStyle>
+    };
+
+    if(isWorkWithSeperator) {
+        styles.container.borderBottomColor = colors.content.border.subtle;
+        styles.container.borderBottomWidth = borders.line;
+    }
+
+    if(isWorkWithSticky) {
+        if(isWorkWithSafeAreaView) {
+            styles.safeAreaView.position = "absolute";
+            styles.safeAreaView.zIndex = 999;
+            styles.safeAreaView.right = 0;
+            styles.safeAreaView.left = 0;
+            styles.safeAreaView.top = 0;
+        } else {
+            styles.container.position = "absolute";
+            styles.container.zIndex = 999;
+            styles.container.right = 0;
+            styles.container.left = 0;
+            styles.container.top = 0;
+        }
+    }
+
+    return styles;
+};
+
+export default stylesheet;

package/src/components/mainHeader/type.ts

@@ -0,0 +1,50 @@
+import type {
+    ReactNode
+} from "react";
+import type {
+    ViewProps
+} from "react-native";
+import type ISiteLogoProps from "../siteLogo/type";
+
+export type MainHeaderDynamicStyle = {
+    customBackgroundColor?: keyof NCoreUIKit.ProjectColorPalette;
+    backgroundColor?: keyof NCoreUIKit.ContainerContentColors;
+    borders: NCoreUIKit.ActivePalette["borders"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    isWorkWithSafeAreaView?: boolean;
+    isWorkWithSeperator?: boolean;
+    isWorkWithSticky?: boolean;
+    glassEffect?: number;
+};
+
+interface IMainHeader extends ViewProps {
+    customBackgroundColor?: keyof NCoreUIKit.ProjectColorPalette;
+    backgroundColor?: keyof NCoreUIKit.ContainerContentColors;
+    onContentHeight?: (contentHeight: number | null) => void;
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+    customLocalize?: {
+        activeLocale?: keyof NCoreUIKit.LocaleKey;
+    };
+    isWorkWithSafeAreaView?: boolean;
+    isWorkWithStickySpace?: boolean;
+    isSetAutoHeaderSpace?: boolean;
+    siteLogoProps?: ISiteLogoProps;
+    isWorkWithSeperator?: boolean;
+    renderRight?: () => ReactNode;
+    renderLeft?: () => ReactNode;
+    isWorkWithPortal?: boolean;
+    isWorkWithSticky?: boolean;
+    glassEffect?: number;
+    children?: ReactNode;
+    portalName?: string;
+};
+
+export type {
+    IMainHeader as default
+};

package/src/components/markdownViewer/constant.ts

@@ -0,0 +1,19 @@
+import type {
+    MarkdownKeys
+} from "./type";
+
+export const DEFAULT_VARIANTS: Record<MarkdownKeys, keyof NCoreUIKit.Typography> = {
+    "# ": "displayLargeSize",
+    "## ": "displayMediumSize",
+    "### ": "displaySmallSize",
+    "#### ": "headlineLargeSize",
+    "##### ": "headlineMediumSize",
+    "###### ": "headlineSmallSize",
+    "<br/>": "bodyMediumSize",
+    "```": "labelMediumSize",
+    "<p>": "bodyMediumSize",
+    "<<": "titleMediumSize",
+    "* ": "bodyLargeSize",
+    "- ": "bodyLargeSize",
+    "": "bodyLargeSize"
+};