ncore-ui-kit/src/components/markdownEditor/stylesheet.ts

import {
    type ViewStyle,
    StyleSheet
} from "react-native";
import type {
    MarkdownDynamicStyles
} from "./type";
import type {
    Mutable
} from "../../types";

const stylesheet = StyleSheet.create({
    typographyScroll: {
        paddingHorizontal: 8,
        flexDirection: "row"
    },
    toolbarContainer: {
        borderBottomWidth: 0,
        paddingHorizontal: 8,
        flexDirection: "row",
        alignItems: "center",
        paddingVertical: 4,
        flexWrap: "wrap"
    },
    toolbarSeparator: {
        marginHorizontal: 6,
        height: 18
    },
    previewContainer: {
        minHeight: 150
    },
    typographyPill: {
        justifyContent: "center",
        paddingHorizontal: 10,
        alignItems: "center",
        paddingVertical: 4,
        marginRight: 6,
        borderWidth: 0
    },
    toolbarAction: {
        justifyContent: "center",
        alignItems: "center",
        marginHorizontal: 2,
        padding: 6
    },
    tabsContainer: {
        flexDirection: "row"
    },
    switchContainer: {
        justifyContent: "center",
        marginLeft: "auto",
        paddingRight: 8
    },
    editorInput: {
        textAlignVertical: "top",
        minHeight: 100,
        height: 250
    },
    tabButton: {
        paddingHorizontal: 16,
        paddingVertical: 10
    },
    container: {
        width: "100%"
    }
});

export const useStyles = ({
    spreadBehaviour,
    radiuses,
    borders,
    colors,
    spaces
}: MarkdownDynamicStyles) => {
    const styles = {
        container: {
            alignSelf: "auto"
        } as Mutable<ViewStyle>,
        tabButtonInactive: {
            borderBottomColor: "transparent"
        },
        toolbarContainer: {
            backgroundColor: colors.content.container.subtle,
            borderColor: colors.content.border.subtle,
            borderTopRightRadius: radiuses.form,
            borderTopLeftRadius: radiuses.form,
            borderWidth: borders.line
        },
        toolbarSeparator: {
            backgroundColor: colors.content.border.subtle,
            width: borders.line
        },
        toolbarAction: {
            borderRadius: radiuses.actions
        },
        previewContainer: {
            backgroundColor: colors.content.container.default,
            borderColor: colors.content.border.subtle,
            borderRadius: radiuses.form,
            borderWidth: borders.line,
            padding: spaces.spacingMd
        },
        tabButtonActive: {
            borderBottomColor: colors.content.container.primary
        },
        tabButton: {
            borderBottomWidth: borders.indicator
        },
        typographyPill: {
            backgroundColor: colors.content.container.subtle,
            borderColor: colors.content.border.subtle,
            borderRadius: radiuses.chip
        },
        tabsContainer: {
            borderBottomColor: colors.content.border.subtle,
            borderBottomWidth: borders.line,
            marginBottom: spaces.spacingSm
        },
        editorInput: {
            backgroundColor: colors.content.container.default,
            borderColor: colors.content.border.subtle,
            borderBottomRightRadius: radiuses.form,
            borderBottomLeftRadius: radiuses.form,
            color: colors.content.text.high,
            borderWidth: borders.line,
            padding: spaces.spacingMd
        }
    };

    if (spreadBehaviour === "baseline") {
        styles.container.alignSelf = spreadBehaviour;
        styles.container.width = "auto";
    } else if (spreadBehaviour === "stretch") {
        styles.container.alignSelf = spreadBehaviour;
        styles.container.width = "100%";
    }

    return styles;
};
export default stylesheet;