ncore-ui-kit 1.0.0-pre-alpha.0

package/src/components/loading/index.tsx

@@ -0,0 +1,26 @@
+import {
+    type FC
+} from "react";
+import type ILoadingProps from "./type";
+import stylesheet from "./stylesheet";
+import LoadingIcon from "../../assets/svg/loadingIcon";
+
+const Loading: FC<ILoadingProps> = ({
+    color = "emphasized" as keyof NCoreUIKit.IconContentColors,
+    customColor,
+    size = 22,
+    style,
+    ...props
+}) => {
+    return <LoadingIcon
+        {...props}
+        customColor={customColor}
+        color={color}
+        size={size}
+        style={[
+            stylesheet.container,
+            style
+        ]}
+    />;
+};
+export default Loading;

package/src/components/loading/stylesheet.ts

@@ -0,0 +1,10 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        transformOrigin: "center"
+    }
+});
+export default stylesheet;

package/src/components/loading/type.ts

@@ -0,0 +1,18 @@
+import {
+    type ReactNode
+} from "react";
+import {
+    type SvgProps
+} from "react-native-svg";
+
+interface ILoadingProps {
+    color?: keyof NCoreUIKit.IconContentColors;
+    style?: SvgProps["style"];
+    customColor?: string;
+    children?: ReactNode;
+    size?: number;
+    id?: string;
+}
+export type {
+    ILoadingProps 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"
+};

package/src/components/markdownViewer/index.tsx

@@ -0,0 +1,503 @@
+import {
+    useEffect,
+    useState,
+    type FC
+} from "react";
+import {
+    Text as NativeText,
+    TouchableOpacity,
+    Linking,
+    Image,
+    View
+} from "react-native";
+import type IMarkdownViewerProps from "./type";
+import type {
+    MarkdownObject,
+    TextMarkdownTypes
+} from "./type";
+import stylesheet, {
+    useStyles
+} from "./stylesheet";
+import {
+    parseMarkdown
+} from "./util";
+import {
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import type ITextProps from "../text/type";
+import {
+    Quote as QuoteIcon
+} from "lucide-react-native";
+import Text from "../text";
+
+const MarkdownViewer: FC<IMarkdownViewerProps> = ({
+    blockquoteIconSize = "titleLargeSize",
+    codeTextColor = "emphasized",
+    blockquoteIconColor = "mid",
+    blockquoteTextColor = "mid",
+    blockquoteContainerProps,
+    centerContainerProps,
+    blockquoteTextStyle,
+    rightContainerProps,
+    blockquoteIconStyle,
+    centerMarkdownProps,
+    leftContainerProps,
+    rightMarkdownProps,
+    listContainerProps,
+    linkContainerProps,
+    codeContainerProps,
+    leftMarkdownProps,
+    linkMarkdownProps,
+    customTextStyles,
+    customTextProps,
+    italicTextProps,
+    enterTextProps,
+    boldTextProps,
+    listIconProps,
+    codeTextProps,
+    listTextProps,
+    italicStyle,
+    imageProps,
+    boldStyle,
+    content,
+    style,
+    ...props
+}) => {
+    const {
+        typography,
+        radiuses,
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const [
+        containerWidth,
+        setContainerWidth
+    ] = useState<null | number>(null);
+
+    const {
+        blockquoteContainer: blockquoteContainerDynamicStyle,
+        blockquoteIcon: blockquoteIconDynamicStyle,
+        codeContainer: codeContainerDynamicStyle
+    } = useStyles({
+        radiuses,
+        colors,
+        spaces
+    });
+
+    const nodes = parseMarkdown(content);
+
+    const renderBold = ({
+        part,
+        i
+    }: {
+        part: string;
+        i: number;
+    }) => {
+        return <NativeText
+            {...boldTextProps}
+            key={`bold-${i}`}
+            style={{
+                ...stylesheet.bold,
+                ...boldStyle
+            }}
+        >
+            {part.replace(/\*\*/g, "")}
+        </NativeText>;
+    };
+
+    const renderItalic = ({
+        part,
+        i
+    }: {
+        part: string;
+        i: number;
+    }) => {
+        return <NativeText
+            {...italicTextProps}
+            key={`italic-${i}`}
+            style={{
+                ...stylesheet.italic,
+                ...italicStyle
+            }}
+        >
+            {part.replace(/__/g, "")}
+        </NativeText>;
+    };
+
+    const renderInlineStyles = (_content: string) => {
+        const parts = _content.split(/(\*\*.*?\*\*|__.*?__)/g);
+
+        return parts.map((part, i) => {
+            if (part.startsWith("**") && part.endsWith("**")) return renderBold({
+                part,
+                i
+            });
+
+            if (part.startsWith("__") && part.endsWith("__")) return renderItalic({
+                part,
+                i
+            });
+
+            return part;
+        });
+    };
+
+    const renderText = ({
+        node
+    }: {
+        node: MarkdownObject
+    }) => {
+        let textProps: ITextProps = {
+            variant: node.variant
+        };
+
+        if(customTextStyles && customTextStyles[node.nativeType as TextMarkdownTypes]) {
+            const currentTextStyle = customTextStyles[node.nativeType as TextMarkdownTypes];
+
+            textProps.style = currentTextStyle;
+        }
+
+        if(customTextProps && customTextProps[node.nativeType as TextMarkdownTypes]) {
+            const currentTextProps = customTextProps[node.nativeType as TextMarkdownTypes];
+
+            textProps = {
+                ...textProps,
+                ...currentTextProps
+            };
+        }
+
+        return <Text
+            {...textProps}
+            key={node.key}
+        >{renderInlineStyles(node.content)}</Text>;
+    };
+
+    const renderEnter = ({
+        node
+    }: {
+        node: MarkdownObject
+    }) => {
+        return <View
+            {...enterTextProps}
+            key={node.key}
+            style={[
+                stylesheet.enter,
+                {
+                    height: typography[node.variant as keyof NCoreUIKit.Typography].fontSize
+                },
+                enterTextProps?.style
+            ]}
+        />;
+    };
+
+    const renderBlockquote = ({
+        node
+    }: {
+        node: MarkdownObject
+    }) => {
+        return <View
+            {...blockquoteContainerProps}
+            key={node.key}
+            style={[
+                blockquoteContainerDynamicStyle,
+                blockquoteContainerProps?.style
+            ]}
+        >
+            <QuoteIcon
+                color={colors.content.icon[blockquoteIconColor]}
+                size={typography[blockquoteIconSize].fontSize}
+                style={{
+                    ...blockquoteIconDynamicStyle,
+                    ...blockquoteIconStyle
+                }}
+            />
+            <Text
+                color={blockquoteTextColor}
+                variant={node.variant}
+                style={{
+                    ...stylesheet.blockquoteText,
+                    ...blockquoteTextStyle
+                }}
+            >
+                {renderInlineStyles(node.content)}
+            </Text>
+        </View>;
+    };
+
+    const renderImage = ({
+        node
+    }: {
+        node: MarkdownObject
+    }) => {
+        const [
+            imgSize,
+            setImgSize
+        ] = useState<{
+            height: number | string;
+            width: number | string;
+            isSetted: boolean;
+        }>({
+            isSetted: false,
+            width: "100%",
+            height: 0
+        });
+
+        useEffect(() => {
+            if(!imgSize.isSetted && node.size) {
+                setImgSize({
+                    height: node.size[1] as number | string,
+                    width: node.size[0] as number | string,
+                    isSetted: true
+                });
+            }
+        }, [imgSize]);
+
+        const currentWidth = typeof imgSize.width === "number" || imgSize.width.indexOf("%") === -1 || !containerWidth
+            ? imgSize.width
+            : (containerWidth * Number(imgSize.width.split("%")[0])) / 100;
+
+        const currentHeight = typeof imgSize.height === "number" || imgSize.height.indexOf("%") === -1 || !containerWidth
+            ? imgSize.height
+            : (containerWidth * Number(imgSize.height.split("%")[0])) / 100;
+
+        return <Image
+            {...imageProps}
+            alt={node.content}
+            key={node.key}
+            source={{
+                uri: node.url
+            }}
+            resizeMode={node.resizeMode ? node.resizeMode : "contain"}
+            onLoad={(event) => {
+                if(!node.size) {
+                    const {
+                        height,
+                        width
+                    } = event.nativeEvent.source;
+
+                    setImgSize({
+                        isSetted: true,
+                        height,
+                        width
+                    });
+                }
+            }}
+            style={{
+                ...stylesheet.image,
+                height: currentHeight,
+                width: currentWidth,
+                ...imageProps?.style
+            }}
+        />;
+    };
+
+    const renderList = ({
+        node
+    }: {
+        node: MarkdownObject
+    }) => {
+        return <View
+            {...listContainerProps}
+            key={node.key}
+            style={[
+                stylesheet.listContainer,
+                listContainerProps?.style
+            ]}
+        >
+            <Text
+                {...listIconProps}
+                variant={node.variant}
+            >
+                •{" "}
+            </Text>
+            <Text
+                {...listTextProps}
+                variant={node.variant}
+            >
+                {renderInlineStyles(node.content)}
+            </Text>
+        </View>;
+    };
+
+    const renderCode = ({
+        node
+    }: {
+        node: MarkdownObject
+    }) => {
+        return <View
+            {...codeContainerProps}
+            key={node.key}
+            style={[
+                codeContainerDynamicStyle,
+                codeContainerProps?.style
+            ]}
+        >
+            <Text
+                {...codeTextProps}
+                variant={node.variant}
+                color={codeTextColor}
+            >
+                {node.content}
+            </Text>
+        </View>;
+    };
+
+    const renderLink = ({
+        node
+    }: {
+        node: MarkdownObject
+    }) => {
+        return <TouchableOpacity
+            {...linkContainerProps}
+            key={node.key}
+            onPress={async () => {
+                const isCanOpen = await Linking.canOpenURL(node.url as string);
+
+                if(isCanOpen) {
+                    Linking.openURL(node.url as string);
+                }
+            }}
+        >
+            <MarkdownViewer
+                {...linkMarkdownProps}
+                content={node.content}
+            />
+        </TouchableOpacity>;
+    };
+
+    const renderCenter = ({
+        node
+    }: {
+        node: MarkdownObject
+    }) => {
+        return <View
+            {...centerContainerProps}
+            key={node.key}
+            style={[
+                stylesheet.centerContainer,
+                centerContainerProps?.style
+            ]}
+        >
+            <MarkdownViewer
+                {...centerMarkdownProps}
+                content={node.content}
+            />
+        </View>;
+    };
+
+    const renderLeft = ({
+        node
+    }: {
+        node: MarkdownObject
+    }) => {
+        return <View
+            {...leftContainerProps}
+            key={node.key}
+            style={[
+                stylesheet.leftContainer,
+                leftContainerProps?.style
+            ]}
+        >
+            <MarkdownViewer
+                {...leftMarkdownProps}
+                content={node.content}
+            />
+        </View>;
+    };
+
+    const renderRight = ({
+        node
+    }: {
+        node: MarkdownObject
+    }) => {
+        return <View
+            {...rightContainerProps}
+            key={node.key}
+            style={[
+                stylesheet.rightContainer,
+                rightContainerProps?.style
+            ]}
+        >
+            <MarkdownViewer
+                {...rightMarkdownProps}
+                content={node.content}
+            />
+        </View>;
+    };
+
+    return <View
+        {...props}
+        onLayout={({
+            nativeEvent
+        }) => {
+            setContainerWidth(nativeEvent.layout.width);
+        }}
+        style={[
+            stylesheet.container,
+            style
+        ]}
+    >
+        {nodes.map((node) => {
+            if (!node.content.trim() && node.nativeType === "<p>") return null;
+
+            switch (node.type) {
+                case undefined:
+                    return null;
+                case "text": {
+                    return renderText({
+                        node
+                    });
+                }
+                case "space":
+                    return renderEnter({
+                        node
+                    });
+                case "blockquote": {
+                    return renderBlockquote({
+                        node
+                    });
+                }
+                case "right": {
+                    return renderRight({
+                        node
+                    });
+                }
+                case "left": {
+                    return renderLeft({
+                        node
+                    });
+                }
+                case "center": {
+                    return renderCenter({
+                        node
+                    });
+                }
+                case "link": {
+                    return renderLink({
+                        node
+                    });
+                }
+                case "code": {
+                    return renderCode({
+                        node
+                    });
+                }
+                case "image": {
+                    return renderImage({
+                        node
+                    });
+                }
+                case "list":
+                    return renderList({
+                        node
+                    });
+                default:
+                    return renderText({
+                        node
+                    });
+            }
+        })}
+    </View>;
+};
+export default MarkdownViewer;

package/src/components/markdownViewer/stylesheet.ts

@@ -0,0 +1,72 @@
+import {
+    StyleSheet
+} from "react-native";
+import type {
+    MarkdownDynamicStyles
+} from "./type";
+
+const stylesheet = StyleSheet.create({
+    container: {
+    },
+    bold: {
+        fontWeight: "bold"
+    },
+    italic: {
+        fontStyle: "italic"
+    },
+    enter: {
+        flexShrink: 1,
+        width: "100%"
+    },
+    blockquoteText: {
+        textAlignVertical: "bottom",
+        verticalAlign: "bottom"
+    },
+    image: {
+        maxWidth: "100%"
+    },
+    listContainer: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    centerContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center"
+    },
+    leftContainer: {
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        alignSelf: "flex-start"
+    },
+    rightContainer: {
+        justifyContent: "flex-end",
+        alignItems: "flex-end",
+        alignSelf: "flex-end"
+    }
+});
+
+export const useStyles = ({
+    radiuses,
+    colors,
+    spaces
+}: MarkdownDynamicStyles) => {
+    const styles = {
+        blockquoteContainer: {
+            backgroundColor: colors.content.container.mid,
+            borderRadius: radiuses.form,
+            padding: spaces.spacingMd
+        },
+        blockquoteIcon: {
+            marginBottom: spaces.spacingXs
+        },
+        codeContainer: {
+            backgroundColor: colors.content.container.mid,
+            borderRadius: radiuses.form,
+            padding: spaces.spacingMd
+        }
+    };
+
+    return styles;
+};
+export default stylesheet;