ncore-ui-kit 1.0.0-alpha.0

package/src/components/highlightButton/stylesheet.ts

@@ -0,0 +1,259 @@
+import {
+    type TextStyle,
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import {
+    type HighlightButtonTypeConstantType,
+    type HighlightButtonSizeConstantType,
+    type HighlightButtonDynamicStyleType,
+    type HighlightButtonMeasuresKeys,
+    type HighlightButtonMeasures,
+    type HighlightButtonTypes,
+    type HighlightButtonSize,
+    type HighlightButtonType
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+import {
+    webStyle
+} from "../../utils";
+
+export const BUTTON_SIZES: Record<HighlightButtonSize, HighlightButtonMeasuresKeys> = {
+    small: {
+        paddingHorizontal: "spacingMd",
+        paddingVertical: "spacingXs",
+        fontSize: "labelSmallSize"
+    },
+    medium: {
+        paddingHorizontal: "spacingLg",
+        paddingVertical: "spacingSm",
+        fontSize: "labelMediumSize"
+    },
+    large: {
+        paddingHorizontal: "spacingXl",
+        paddingVertical: "spacingMd",
+        fontSize: "labelLargeSize"
+    }
+};
+
+export const BUTTON_TYPE_STYLES: Record<
+    HighlightButtonType,
+    {
+        borderColor: keyof NCoreUIKit.BorderContentColors;
+        titleColor: keyof NCoreUIKit.TextContentColors;
+        iconColor: keyof NCoreUIKit.IconContentColors;
+        containerColor: keyof NCoreUIKit.LowColors;
+    }
+> = {
+    glass: {
+        titleColor: "constrastHigh",
+        iconColor: "constrastHigh",
+        containerColor: "neutral",
+        borderColor: "subtle"
+    },
+    primary: {
+        containerColor: "primary",
+        borderColor: "onPrimary",
+        titleColor: "onPrimary",
+        iconColor: "onPrimary"
+    },
+    danger: {
+        containerColor: "error",
+        borderColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        containerColor: "success",
+        borderColor: "success",
+        titleColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        containerColor: "warning",
+        borderColor: "warning",
+        titleColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        containerColor: "info",
+        borderColor: "info",
+        titleColor: "info",
+        iconColor: "info"
+    },
+    neutral: {
+        containerColor: "neutral",
+        borderColor: "subtle",
+        titleColor: "mid",
+        iconColor: "mid"
+    }
+};
+
+export const getHighlightButtonType = ({
+    type
+}: HighlightButtonTypeConstantType): HighlightButtonTypes => {
+    const currentType = BUTTON_TYPE_STYLES[type];
+
+    return currentType;
+};
+
+export const getHighlightButtonSize = ({
+    spaces,
+    size
+}: HighlightButtonSizeConstantType): HighlightButtonMeasures => {
+    const currentSize = BUTTON_SIZES[size];
+
+    return {
+        paddingHorizontal: spaces[currentSize.paddingHorizontal],
+        paddingVertical: spaces[currentSize.paddingVertical],
+        fontSize: currentSize.fontSize
+    };
+};
+
+const stylesheet = StyleSheet.create({
+    container: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        flexDirection: "row",
+        borderStyle: "solid",
+        alignItems: "center",
+        position: "relative",
+        display: "flex"
+    },
+    title: {
+        textAlign: "center",
+        margin: "0"
+    },
+    loading: {},
+    overlay: {
+        position: "absolute",
+        display: "none",
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    }
+});
+
+export const useStyles = ({
+    displayBehaviourWhileLoading,
+    customBorderColor,
+    spreadBehaviour,
+    isCustomPadding,
+    iconDirection,
+    glassEffect,
+    currentType,
+    currentSize,
+    customColor,
+    isDisabled,
+    isLoading,
+    radiuses,
+    borders,
+    colors,
+    spaces,
+    title,
+    icon,
+    type
+}: HighlightButtonDynamicStyleType) => {
+    const styleType = type === "danger" ? "error" : type === "glass" ? "neutral" : type;
+
+    const styles = {
+        container: {
+            backgroundColor: colors.system.low[currentType.containerColor],
+            borderColor: colors.content.border[currentType.borderColor],
+            paddingRight: currentSize.paddingHorizontal,
+            paddingBottom: currentSize.paddingVertical,
+            paddingLeft: currentSize.paddingHorizontal,
+            paddingTop: currentSize.paddingVertical,
+            borderRadius: radiuses.actions,
+            borderWidth: borders.line / 4,
+            ...webStyle({
+                boxShadow: `inset 0 0px 0.5px ${currentType.borderColor}, inset 0 -2px 6px ${currentType.borderColor}, 0 10px 30px ${currentType.borderColor}`,
+                WebkitBackdropFilter: `blur(${glassEffect}px) saturate(180%) brightness(1.1)`,
+                backdropFilter: `blur(${glassEffect}px) saturate(180%) brightness(1.1)`
+            })
+        } as Mutable<ViewStyle>,
+        title: {
+        } as Mutable<TextStyle>,
+        loading: {
+        } as Mutable<ViewStyle>,
+        overlay: {
+            borderRadius: radiuses.actions - 2
+        } as Mutable<ViewStyle>
+    };
+
+    if (isLoading) {
+        styles.title.marginLeft = spaces.spacingSm;
+
+        styles.overlay.display = "flex";
+
+        if (displayBehaviourWhileLoading === "disabled") {
+            styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+        }
+    }
+
+    if (isLoading && spreadBehaviour === "stretch") {
+        styles.title.marginLeft = spaces.spacingSm;
+        styles.title.margin = "initial";
+    }
+
+    if (icon && !isLoading) {
+        styles.title.marginLeft = spaces.spacingSm;
+        styles.title.margin = "initial";
+    }
+
+    if (spreadBehaviour === "baseline") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
+    } else if (spreadBehaviour === "stretch") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.justifyContent = "center";
+        styles.container.flexShrink = 1;
+        styles.container.width = "100%";
+    }
+
+    if (isDisabled) {
+        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+    }
+
+    if (icon && title) {
+        if (iconDirection === "left") {
+            styles.title.marginLeft = spaces.spacingSm;
+        } else {
+            styles.title.marginRight = spaces.spacingSm;
+        }
+    }
+
+    if(icon && !title) {
+        styles.container.paddingBottom = currentSize.paddingVertical;
+        styles.container.paddingRight = currentSize.paddingVertical;
+        styles.container.paddingLeft = currentSize.paddingVertical;
+        styles.container.paddingTop = currentSize.paddingVertical;
+    }
+
+    if(isCustomPadding) {
+        delete styles.container.paddingBottom;
+        delete styles.container.paddingRight;
+        delete styles.container.paddingLeft;
+        delete styles.container.paddingTop;
+    }
+
+    if(customColor) {
+        const _customContainerColor = customColor as keyof NCoreUIKit.ContainerContentColors;
+        const _customColor = customColor as keyof NCoreUIKit.ProjectColorPalette;
+
+        styles.container.backgroundColor = colors.project[_customColor] ? colors.project[_customColor] : colors.content.container[_customContainerColor] ? colors.content.container[_customContainerColor] : customColor;
+    }
+
+    if(customBorderColor) {
+        const _customContentBorderColor = customBorderColor as keyof NCoreUIKit.BorderContentColors;
+        const _customBorderColor = customBorderColor as keyof NCoreUIKit.ProjectColorPalette;
+
+        styles.container.borderColor = colors.project[_customBorderColor] ? colors.project[_customBorderColor] : colors.content.border[_customContentBorderColor] ? colors.content.border[_customContentBorderColor] : customBorderColor;
+    }
+
+    return styles;
+};
+export default stylesheet;

package/src/components/highlightButton/type.ts

@@ -0,0 +1,100 @@
+import type {
+    ReactNode
+} from "react";
+import {
+    type ButtonProps,
+    type ViewStyle,
+    type StyleProp,
+    type TextStyle
+} from "react-native";
+import {
+    type NCoreUIKitIcon
+} from "../../types";
+
+export type HighlightButtonDynamicStyleType = {
+    displayBehaviourWhileLoading?: HighlightButtonDisplayBehaviourWhileLoading;
+    customBorderColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
+    customColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
+    spreadBehaviour?: HighlightButtonSpreadBehaviour;
+    radiuses: NCoreUIKit.ActivePalette["radiuses"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    currentSize: HighlightButtonMeasures;
+    currentType: HighlightButtonTypes;
+    iconDirection?: "left" | "right";
+    borders: NCoreUIKit.Borders;
+    isCustomPadding?: boolean;
+    type: HighlightButtonType;
+    icon?: NCoreUIKitIcon;
+    glassEffect?: number;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    title?: string;
+};
+
+export type HighlightButtonMeasuresKeys = {
+    paddingHorizontal: keyof NCoreUIKit.Spaces;
+    paddingVertical: keyof NCoreUIKit.Spaces;
+    fontSize: keyof NCoreUIKit.Typography;
+};
+
+export type HighlightButtonTypes = {
+    borderColor: keyof NCoreUIKit.BorderContentColors;
+    titleColor: keyof NCoreUIKit.TextContentColors;
+    iconColor: keyof NCoreUIKit.IconContentColors;
+    containerColor: keyof NCoreUIKit.LowColors;
+};
+
+export type HighlightButtonMeasures = {
+    fontSize: keyof NCoreUIKit.Typography;
+    paddingHorizontal: number;
+    paddingVertical: number;
+};
+
+export type HighlightButtonTypeConstantType = {
+    type: HighlightButtonType;
+};
+
+export type HighlightButtonSizeConstantType = {
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    size: HighlightButtonSize;
+};
+
+export type HighlightButtonType = "glass" | "primary" | "danger" | "warning" | "neutral" | "success" | "info";
+
+export type HighlightButtonDisplayBehaviourWhileLoading = "none" | "disabled";
+
+export type HighlightButtonSpreadBehaviour = "baseline" | "stretch" | "free";
+
+export type HighlightButtonSize = "small" | "medium" | "large";
+
+interface IHighlightButtonProps extends Omit<ButtonProps, "title" | "disabled"> {
+    displayBehaviourWhileLoading?: HighlightButtonDisplayBehaviourWhileLoading;
+    customBorderColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
+    customIconColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
+    customTextColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
+    customColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
+    titleStyle?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+    style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    spreadBehaviour?: HighlightButtonSpreadBehaviour;
+    iconDirection?: "left" | "right";
+    renderLoading?: () => ReactNode;
+    size?: HighlightButtonSize;
+    type?: HighlightButtonType;
+    isCustomPadding?: boolean;
+    icon?: NCoreUIKitIcon;
+    glassEffect?: number;
+    isDisabled?: boolean;
+    onPress: () => void;
+    isLoading?: boolean;
+    title?: string;
+}
+export type {
+    IHighlightButtonProps as default
+};

package/src/components/index.ts

@@ -0,0 +1,215 @@
+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 type {
+    IDialogRef
+} from "./dialog/type";
+
+export {
+    default as Modal
+} from "./modal";
+
+export type {
+    IModalRef
+} from "./modal/type";
+
+export {
+    default as Loading
+} from "./loading";
+
+export {
+    default as TextInput
+} from "./textInput";
+
+export type {
+    ITextInputRef
+} from "./textInput/type";
+
+export {
+    default as SelectBox
+} from "./selectBox";
+
+export {
+    default as BottomSheet
+} from "./bottomSheet";
+
+export type {
+    IBottomSheetRef
+} from "./bottomSheet/type";
+
+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 type {
+    ITextAreaInputRef
+} from "./textAreaInput/type";
+
+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 type {
+    IDateTimePickerRef
+} from "./dateTimePicker/type";
+
+export {
+    default as DateSelector
+} from "./dateSelector";
+
+export type {
+    IDateSelectorRef
+} from "./dateSelector/type";
+
+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 {
+    default as Header
+} from "./header";
+
+export {
+    default as ThemeSwitcher
+} from "./themeSwitcher";
+
+export {
+    default as PaletteSwitcher
+} from "./paletteSwitcher";
+
+export {
+    default as Avatar
+} from "./avatar";
+
+export {
+    default as AvatarGroup
+} from "./avatarGroup";
+
+export {
+    default as Menu
+} from "./menu";
+
+export {
+    default as MenuButton
+} from "./menu/components/menuButton";
+
+export {
+    default as SiteLogo
+} from "./siteLogo";
+
+export {
+    default as Seperator
+} from "./seperator";
+
+export {
+    default as EmbeddedMenu
+} from "./embeddedMenu";
+
+export {
+    default as MainHeader
+} from "./mainHeader";
+
+export {
+    default as HighlightButton
+} from "./highlightButton";
+
+export {
+    default as LocaleSwitcher
+} from "./localeSwitcher";
+
+export type {
+    EnterMarkdownTypes,
+    CodeMarkdownTypes,
+    TextMarkdownTypes,
+    BlockquoteTypes,
+    MarkdownObject,
+    MarkdownKeys,
+    ListTypes
+} from "./markdownViewer/type";
+
+export {
+    blockquoteMarkdown,
+    centerMarkdown,
+    enterMarkdown,
+    imageMarkdown,
+    parseMarkdown,
+    rightMarkdown,
+    textMarkdown,
+    codeMarkdown,
+    leftMarkdown,
+    linkMarkdown,
+    listMarkdown
+} from "./markdownViewer/util";

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
+};