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

package/lib/src/components/dialog/stylesheet.js

@@ -0,0 +1,90 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+const stylesheet = StyleSheet.create({
+    container: {
+        flexDirection: "column",
+        position: "relative",
+        overflow: "hidden",
+        maxHeight: "80%",
+        maxWidth: "85%",
+        minWidth: "23%",
+        zIndex: 99998
+    },
+    content: {
+        flexWrap: "wrap"
+    },
+    headerContainer: {
+        paddingBottom: 0
+    },
+    bottomContainer: {
+        width: "100%"
+    },
+    bottomContentContainer: {
+        justifyContent: "flex-end",
+        flexDirection: "row"
+    },
+    headerTitle: {},
+    contentText: {},
+    primaryButton: {},
+    closeIcon: {
+        position: "absolute",
+        right: 0,
+        top: 0
+    }
+});
+export const useStyles = ({ contentJustify, isVisible, radiuses, variant, colors, spaces }) => {
+    const styles = {
+        container: {
+            backgroundColor: colors.content.container.default,
+            borderRadius: radiuses.md
+        },
+        content: {
+            paddingBottom: spaces.spacingMd,
+            paddingRight: spaces.spacingMd,
+            paddingLeft: spaces.spacingMd,
+            paddingTop: spaces.spacingMd
+        },
+        headerContainer: {
+            paddingRight: spaces.spacingMd,
+            paddingLeft: spaces.spacingMd,
+            paddingTop: spaces.spacingLg
+        },
+        bottomContainer: {
+            paddingTop: spaces.spacingSm
+        },
+        bottomContentContainer: {
+            paddingBottom: spaces.spacingMd,
+            paddingRight: spaces.spacingMd,
+            paddingLeft: spaces.spacingMd
+        },
+        headerTitle: {},
+        contentText: {},
+        closeIcon: {
+            padding: spaces.spacingMd
+        },
+        primaryButton: {}
+    };
+    if (variant === "yes-no") {
+        styles.primaryButton.marginLeft = spaces.spacingMd;
+    }
+    if (isVisible === false) {
+        styles.container.display = "none";
+    }
+    if (contentJustify === "centered") {
+        styles.container.justifyContent = "center";
+        styles.container.alignItems = "center";
+        styles.content.justifyContent = "center";
+        styles.content.alignItems = "center";
+        styles.content.display = "flex";
+        styles.contentText.textAlign = "center";
+        styles.headerContainer.justifyContent = "center";
+        styles.headerContainer.alignItems = "center";
+        styles.headerContainer.display = "flex";
+        styles.headerTitle.textAlign = "center";
+    }
+    if (variant === "info") {
+        styles.content.paddingBottom = spaces.spacingLg;
+    }
+    return styles;
+};
+export default stylesheet;

package/lib/src/components/dialog/type.js

@@ -0,0 +1,3 @@
+import {} from "react";
+import {} from "react-native";
+;

package/lib/src/components/index.js

@@ -0,0 +1,29 @@
+export { default as Text } from "./text";
+export { default as Button } from "./button";
+export { default as PageContainer } from "./pageContainer";
+export { default as Dialog } from "./dialog";
+export { default as Modal } from "./modal";
+export { default as Loading } from "./loading";
+export { default as TextInput } from "./textInput";
+export { default as SelectBox } from "./selectBox";
+export { default as BottomSheet } from "./bottomSheet";
+export { default as SelectSheet } from "./selectSheet";
+export { default as CheckBox } from "./checkBox";
+export { default as Toast } from "./toast";
+export { default as SnackBar } from "./snackBar";
+export { default as TextAreaInput } from "./textAreaInput";
+export { default as RadioButton } from "./radioButton";
+export { default as RowCard } from "./rowCard";
+export { default as Switch } from "./switch";
+export { default as NotificationIndicator } from "./notificationIndicator";
+export { default as DateTimePicker } from "./dateTimePicker";
+export { default as DateTimeSheet } from "./dateTimeSheet";
+export { default as DateSelector } from "./dateSelector";
+export { default as NumericInput } from "./numericInput";
+export { default as MarkdownViewer } from "./markdownViewer";
+export { default as StateCard } from "./stateCard";
+export { default as MonthSelector } from "./monthSelector";
+export { default as TimeSelector } from "./timeSelector";
+export { default as Sticker } from "./sticker";
+export { default as Chip } from "./chip";
+export { blockquoteMarkdown, centerMarkdown, enterMarkdown, imageMarkdown, parseMarkdown, rightMarkdown, textMarkdown, codeMarkdown, leftMarkdown, linkMarkdown, listMarkdown } from "./markdownViewer/util";

package/lib/src/components/loading/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from "react";
+import stylesheet from "./stylesheet";
+import LoadingIcon from "../../assets/svg/loadingIcon";
+const Loading = ({ color = "emphasized", customColor, size = 22, style, ...props }) => {
+    return _jsx(LoadingIcon, { ...props, customColor: customColor, color: color, size: size, style: [
+            stylesheet.container,
+            style
+        ] });
+};
+export default Loading;

package/lib/src/components/loading/stylesheet.js

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

package/lib/src/components/loading/type.js

@@ -0,0 +1,2 @@
+import {} from "react";
+import {} from "react-native-svg";

package/lib/src/components/markdownViewer/constant.js

@@ -0,0 +1,15 @@
+export const DEFAULT_VARIANTS = {
+    "# ": "displayLargeSize",
+    "## ": "displayMediumSize",
+    "### ": "displaySmallSize",
+    "#### ": "headlineLargeSize",
+    "##### ": "headlineMediumSize",
+    "###### ": "headlineSmallSize",
+    "<br/>": "bodyMediumSize",
+    "```": "labelMediumSize",
+    "<p>": "bodyMediumSize",
+    "<<": "titleMediumSize",
+    "* ": "bodyLargeSize",
+    "- ": "bodyLargeSize",
+    "": "bodyLargeSize"
+};

package/lib/src/components/markdownViewer/index.js

@@ -0,0 +1,237 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useEffect, useState } from "react";
+import { Text as NativeText, TouchableOpacity, Linking, Image, View } from "react-native";
+import stylesheet, { useStyles } from "./stylesheet";
+import { parseMarkdown } from "./util";
+import { NCoreUIKitTheme } from "../../core/hooks";
+import { Quote as QuoteIcon } from "lucide-react-native";
+import Text from "../text";
+const MarkdownViewer = ({ 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);
+    const { blockquoteContainer: blockquoteContainerDynamicStyle, blockquoteIcon: blockquoteIconDynamicStyle, codeContainer: codeContainerDynamicStyle } = useStyles({
+        radiuses,
+        colors,
+        spaces
+    });
+    const nodes = parseMarkdown(content);
+    const renderBold = ({ part, i }) => {
+        return _createElement(NativeText, { ...boldTextProps, key: `bold-${i}`, style: {
+                ...stylesheet.bold,
+                ...boldStyle
+            } }, part.replace(/\*\*/g, ""));
+    };
+    const renderItalic = ({ part, i }) => {
+        return _createElement(NativeText, { ...italicTextProps, key: `italic-${i}`, style: {
+                ...stylesheet.italic,
+                ...italicStyle
+            } }, part.replace(/__/g, ""));
+    };
+    const renderInlineStyles = (_content) => {
+        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 }) => {
+        let textProps = {
+            variant: node.variant
+        };
+        if (customTextStyles && customTextStyles[node.nativeType]) {
+            const currentTextStyle = customTextStyles[node.nativeType];
+            textProps.style = currentTextStyle;
+        }
+        if (customTextProps && customTextProps[node.nativeType]) {
+            const currentTextProps = customTextProps[node.nativeType];
+            textProps = {
+                ...textProps,
+                ...currentTextProps
+            };
+        }
+        return _createElement(Text, { ...textProps, key: node.key }, renderInlineStyles(node.content));
+    };
+    const renderEnter = ({ node }) => {
+        return _createElement(View, { ...enterTextProps, key: node.key, style: [
+                stylesheet.enter,
+                {
+                    height: typography[node.variant].fontSize
+                },
+                enterTextProps?.style
+            ] });
+    };
+    const renderBlockquote = ({ node }) => {
+        return _createElement(View, { ...blockquoteContainerProps, key: node.key, style: [
+                blockquoteContainerDynamicStyle,
+                blockquoteContainerProps?.style
+            ] },
+            _jsx(QuoteIcon, { color: colors.content.icon[blockquoteIconColor], size: typography[blockquoteIconSize].fontSize, style: {
+                    ...blockquoteIconDynamicStyle,
+                    ...blockquoteIconStyle
+                } }),
+            _jsx(Text, { color: blockquoteTextColor, variant: node.variant, style: {
+                    ...stylesheet.blockquoteText,
+                    ...blockquoteTextStyle
+                }, children: renderInlineStyles(node.content) }));
+    };
+    const renderImage = ({ node }) => {
+        const [imgSize, setImgSize] = useState({
+            isSetted: false,
+            width: "100%",
+            height: 0
+        });
+        useEffect(() => {
+            if (!imgSize.isSetted && node.size) {
+                setImgSize({
+                    height: node.size[1],
+                    width: node.size[0],
+                    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 _createElement(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 }) => {
+        return _createElement(View, { ...listContainerProps, key: node.key, style: [
+                stylesheet.listContainer,
+                listContainerProps?.style
+            ] },
+            _jsxs(Text, { ...listIconProps, variant: node.variant, children: ["\u2022", " "] }),
+            _jsx(Text, { ...listTextProps, variant: node.variant, children: renderInlineStyles(node.content) }));
+    };
+    const renderCode = ({ node }) => {
+        return _createElement(View, { ...codeContainerProps, key: node.key, style: [
+                codeContainerDynamicStyle,
+                codeContainerProps?.style
+            ] },
+            _jsx(Text, { ...codeTextProps, variant: node.variant, color: codeTextColor, children: node.content }));
+    };
+    const renderLink = ({ node }) => {
+        return _createElement(TouchableOpacity, { ...linkContainerProps, key: node.key, onPress: async () => {
+                const isCanOpen = await Linking.canOpenURL(node.url);
+                if (isCanOpen) {
+                    Linking.openURL(node.url);
+                }
+            } },
+            _jsx(MarkdownViewer, { ...linkMarkdownProps, content: node.content }));
+    };
+    const renderCenter = ({ node }) => {
+        return _createElement(View, { ...centerContainerProps, key: node.key, style: [
+                stylesheet.centerContainer,
+                centerContainerProps?.style
+            ] },
+            _jsx(MarkdownViewer, { ...centerMarkdownProps, content: node.content }));
+    };
+    const renderLeft = ({ node }) => {
+        return _createElement(View, { ...leftContainerProps, key: node.key, style: [
+                stylesheet.leftContainer,
+                leftContainerProps?.style
+            ] },
+            _jsx(MarkdownViewer, { ...leftMarkdownProps, content: node.content }));
+    };
+    const renderRight = ({ node }) => {
+        return _createElement(View, { ...rightContainerProps, key: node.key, style: [
+                stylesheet.rightContainer,
+                rightContainerProps?.style
+            ] },
+            _jsx(MarkdownViewer, { ...rightMarkdownProps, content: node.content }));
+    };
+    return _jsx(View, { ...props, onLayout: ({ nativeEvent }) => {
+            setContainerWidth(nativeEvent.layout.width);
+        }, style: [
+            stylesheet.container,
+            style
+        ], children: 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
+                    });
+            }
+        }) });
+};
+export default MarkdownViewer;

package/lib/src/components/markdownViewer/stylesheet.js

@@ -0,0 +1,59 @@
+import { StyleSheet } from "react-native";
+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 }) => {
+    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;

package/lib/src/components/markdownViewer/type.js

@@ -0,0 +1,2 @@
+;
+export {};