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

package/src/index.tsx

@@ -0,0 +1,117 @@
+export {
+    getNCoreUIKitVersion,
+    setupNCoreUIKit
+} from "./core";
+
+export {
+    NCoreUIKitBottomSheet,
+    NCoreUIKitLocalize,
+    NCoreUIKitSnackBar,
+    NCoreUIKitDialog,
+    NCoreUIKitModal,
+    NCoreUIKitTheme,
+    NCoreUIKitToast
+} from "./core/hooks";
+
+export {
+    NotificationIndicator,
+    MarkdownViewer,
+    DateTimePicker,
+    PageContainer,
+    DateTimeSheet,
+    TextAreaInput,
+    MonthSelector,
+    NumericInput,
+    TimeSelector,
+    DateSelector,
+    BottomSheet,
+    SelectSheet,
+    RadioButton,
+    StateCard,
+    TextInput,
+    SelectBox,
+    SnackBar,
+    CheckBox,
+    Sticker,
+    RowCard,
+    Loading,
+    Dialog,
+    Switch,
+    Button,
+    Modal,
+    Toast,
+    Chip,
+    Text
+} from "./components";
+
+export type {
+    IDateTimePickerRef,
+    EnterMarkdownTypes,
+    ITextAreaInputRef,
+    CodeMarkdownTypes,
+    TextMarkdownTypes,
+    IDateSelectorRef,
+    IBottomSheetRef,
+    BlockquoteTypes,
+    MarkdownObject,
+    ITextInputRef,
+    MarkdownKeys,
+    IDialogRef,
+    ListTypes,
+    IModalRef
+} from "./components";
+
+export {
+    blockquoteMarkdown,
+    centerMarkdown,
+    enterMarkdown,
+    imageMarkdown,
+    parseMarkdown,
+    rightMarkdown,
+    codeMarkdown,
+    leftMarkdown,
+    linkMarkdown,
+    listMarkdown,
+    textMarkdown
+} from "./components/markdownViewer/util";
+
+export {
+    mergeTypographyTokens,
+    parseRRuleConfig,
+    mergeTypography,
+    mergeRadiuses,
+    mergePalettes,
+    mergeBorders,
+    mergeSpaces,
+    mergeShapes,
+    mergeTheme
+} from "./helpers";
+
+export {
+    ChevronRightIcon,
+    LoadingIcon,
+    CleanIcon
+} from "./assets/svg";
+
+export type {
+    PortalizedComponentProps,
+    INCoreUIKitIconProps,
+    GapPropagationType,
+    NCoreUIKitConfig,
+    RecursiveRecord,
+    NCoreUIKitIcon,
+    ModalDataType,
+    SharpnessType,
+    LocalizeType,
+    PaletteType,
+    ThemesType,
+    LocaleType,
+    ThemeType,
+    ModalType,
+    Mutable
+} from "./types";
+
+export {
+    Portal,
+    Host
+} from "./helpers/portalize";

package/src/types/bottomSheet.ts

@@ -0,0 +1,23 @@
+import type IBottomSheetProps from "../components/bottomSheet/type";
+
+export type BottomSheetType = {
+    data?: Array<BottomSheetDataType>;
+};
+
+export type BottomSheetDataType = Omit<IBottomSheetProps, "id"> & {
+    isAutoClosed?: boolean;
+    id?: string;
+};
+
+export type BottomSheetContextType = {
+    open: (dialogData: BottomSheetDataType) => string;
+    close: (props?: {
+        index?: number;
+        id?: string;
+    }) => void;
+    data: Array<BottomSheetDataType>;
+};
+
+export type BottomSheetStateContextType = {
+    data: Array<BottomSheetDataType>;
+};

package/src/types/dialog.ts

@@ -0,0 +1,23 @@
+import type IDialogProps from "../components/dialog/type";
+
+export type DialogType = {
+    data?: Array<DialogDataType>;
+};
+
+export type DialogDataType = Omit<IDialogProps, "id"> & {
+    isAutoClosed?: boolean;
+    id?: string;
+};
+
+export type DialogContextType = {
+    open: (dialogData: DialogDataType) => string;
+    close: (props?: {
+        index?: number;
+        id?: string;
+    }) => void;
+    data: Array<DialogDataType>;
+};
+
+export type DialogStateContextType = {
+    data: Array<DialogDataType>;
+};

package/src/types/icon.ts

@@ -0,0 +1,20 @@
+import {
+    type FC
+} from "react";
+import {
+    type SvgProps
+} from "react-native-svg";
+
+export interface INCoreUIKitIconProps {
+    color?: keyof NCoreUIKit.IconContentColors;
+    style?: SvgProps["style"];
+    customColor?: string;
+    size?: number;
+}
+
+export type INCoreUIKitIconCallbackProps = Omit<INCoreUIKitIconProps, "color" | "size"> & {
+    color: keyof NCoreUIKit.IconContentColors;
+    size: number;
+};
+
+export type NCoreUIKitIcon = FC<INCoreUIKitIconCallbackProps>;

package/src/types/index.ts

@@ -0,0 +1,217 @@
+import {
+    type ForwardRefRenderFunction
+} from "react";
+import {
+    type StyleProp,
+    type ViewStyle,
+    Platform
+} from "react-native";
+import {
+    type INCoreUIKitIconCallbackProps
+} from "./icon";
+import {
+    type LocalizeType,
+    type LocaleType
+} from "./locale";
+import {
+    type ModalDataType,
+    type ModalType
+} from "./modal";
+import {
+    type GapPropagationType,
+    type SharpnessType,
+    type PaletteType,
+    type ThemesType,
+    type ThemeType
+} from "./theme";
+import defaultLocaleJSON from "../variants/locales/default.json";
+import defaultThemeJSON from "../variants/themes/default.json";
+
+export type {
+    PortalizedComponentProps
+} from "./portalize";
+
+export type {
+    INCoreUIKitIconCallbackProps,
+    INCoreUIKitIconProps,
+    NCoreUIKitIcon
+} from "./icon";
+
+export type {
+    ThemeContextStateType,
+    ThemeContextType
+} from "./theme";
+
+export type {
+    LocalizeContextStateType,
+    LocalizeContextType
+} from "./locale";
+
+export type {
+    GapPropagationType,
+    NCoreUIKitConfig,
+    SharpnessType,
+    ModalDataType,
+    LocalizeType,
+    PaletteType,
+    ThemesType,
+    LocaleType,
+    ModalType,
+    ThemeType
+};
+
+export const webStyle = (styles: Record<string, unknown>): StyleProp<ViewStyle> => Platform.OS === "web" ? (styles as StyleProp<ViewStyle>) : {};
+
+export type RecursiveRecord = {
+  [key: string]: string | RecursiveRecord;
+};
+
+export interface RefForwardingComponent<T, P = object> extends ForwardRefRenderFunction<T, P> {};
+
+export interface SafePointerEvent {
+    clientY: number;
+}
+
+export interface SafeWebWindow {
+    addEventListener: (type: "pointermove" | "pointerup", listener: (evt: SafePointerEvent) => void) => void;
+    removeEventListener: (type: "pointermove" | "pointerup", listener: (evt: SafePointerEvent) => void) => void;
+}
+
+export const safeGlobal = globalThis as unknown as SafeWebWindow;
+
+export type Mutable<T> = {
+    -readonly [P in keyof T]: T[P];
+};
+
+type NCoreUIKitConfig = ThemesType & LocalizeType & ModalType;
+
+declare global {
+    namespace NCoreUIKit {
+        interface GapPropagationKey extends Record<GapPropagationType, unknown> {}
+        interface SharpnessKey extends Record<SharpnessType, unknown> {}
+        interface PaletteKey extends Record<PaletteType, unknown> {}
+        interface LocaleKey extends Record<LocaleType, unknown> {}
+        interface ThemeKey extends Record<ThemeType, unknown> {}
+
+        type IconCallbackProps = INCoreUIKitIconCallbackProps;
+
+        interface ActivePalette {
+            inlineSpaces: InlineSpaces;
+            typography: Typography;
+            colors: ThemeTokens;
+            radiuses: Radiuses;
+            borders: Borders;
+            spaces: Spaces;
+        }
+
+        interface Palette {
+            isNeedAndroidTypographyFixer: boolean;
+            typography: TypographyWithVariants;
+            palettes: ThemePalettes;
+            shapes: Shapes;
+        }
+
+        type SpacesWithVariants = Record<GapPropagationType, Spaces>;
+
+        type RadiusesWithVariants = Record<SharpnessType, Radiuses>;
+
+        type Shapes = {
+            radiuses: RadiusesWithVariants;
+            inlineSpaces: InlineSpaces;
+            spaces: SpacesWithVariants;
+            borders: Borders;
+        };
+
+        type DefaultSpaces = Record<keyof typeof defaultThemeJSON.shapes.spaces.compact, number>;
+
+        interface Spaces extends DefaultSpaces {}
+
+        type DefaultBorders = Record<keyof typeof defaultThemeJSON.shapes.borders, number>;
+
+        interface Borders extends DefaultBorders {
+        }
+
+        type DefaultInlineSpaces = Record<keyof typeof defaultThemeJSON.shapes.inlineSpaces, number>;
+
+        interface InlineSpaces extends DefaultInlineSpaces {
+        }
+
+        type DefaultRadiuses = Record<keyof typeof defaultThemeJSON.shapes.radiuses.rounded, number>;
+
+        interface Radiuses extends DefaultRadiuses {}
+
+        type TypographyWithVariants = Record<GapPropagationType, Typography>;
+
+        type DefaultTypography = Record<keyof typeof defaultThemeJSON.typography.compact, TypographyToken>;
+
+        interface Typography extends DefaultTypography {}
+
+        interface TypographyToken {
+            letterSpacing: number;
+            fontWeight: string;
+            fontFamily: string;
+            lineHeight: number;
+            fontSize: number;
+        }
+
+        type ThemePalettes = Array<ThemePalette>;
+
+        interface ThemePalette {
+            themes: Theme;
+            name: string;
+        }
+
+        type Theme = Record<keyof ThemeKey, ThemeTokens>;
+
+        type ColorsMerged = DefaultSystemColors & DefaultContentColors;
+
+        type ThemeTokens = {
+            content: ContentColorPalette;
+            system: SystemColorPalette;
+        };
+
+        type DefaultPalette = typeof defaultThemeJSON.palettes[0];
+
+        type SystemData = DefaultPalette["themes"]["dark"]["system"];
+        type DefaultSystemColors = SystemData;
+
+        interface SystemColorPalette extends DefaultSystemColors {
+        }
+
+        type ContentData = DefaultPalette["themes"]["dark"]["content"];
+        type DefaultContentColors = ContentData;
+
+        interface ContentColorPalette extends DefaultContentColors {
+        }
+
+        type ContainerContentColors = DefaultContentColors["container"];
+        type BorderContentColors = DefaultContentColors["border"];
+        type IconContentColors = DefaultContentColors["icon"];
+        type TextContentColors = DefaultContentColors["text"];
+
+        type DisabledSystemColors = DefaultSystemColors["disabled"];
+        type StateSystemColors = DefaultSystemColors["state"];
+
+        type Locales = Array<Locale>;
+
+        interface Locale {
+            rruleConfig: GeneratedRRuleConfigs;
+            translations: Translation;
+            locale: string;
+            isRTL: boolean;
+        }
+
+        type DefaultLocalization = typeof defaultLocaleJSON[0];
+
+        type GeneratedRRuleConfigs = {
+            [K in keyof DefaultLocalization["rruleConfig"]]: DefaultLocalization["rruleConfig"][K];
+        };
+
+        type GeneratedTranslations = {
+            [K in keyof DefaultLocalization["translations"]]: DefaultLocalization["translations"][K];
+        };
+
+        interface Translation extends GeneratedTranslations {
+        }
+    }
+}

package/src/types/locale.ts

@@ -0,0 +1,30 @@
+import {
+    type ReactElement,
+    type ReactNode
+} from "react";
+import type ITextProps from "../components/text/type";
+
+export type LocalizeType = {
+    initialSelectedLocale?: keyof NCoreUIKit.LocaleKey;
+    projectLocales?: NCoreUIKit.Locales;
+};
+
+export type LocaleType = "en-US" | "tr-TR";
+
+export type LocalizeContextStateType = Partial<LocalizeContextType>;
+
+export type LocalizeContextType = {
+    rruleConfig: NCoreUIKit.GeneratedRRuleConfigs;
+    translations: NCoreUIKit.Translation;
+    localizeWithObject: (
+        translation: keyof NCoreUIKit.Translation,
+        parameters?: Array<string | ReactNode | ReactElement>,
+        props?: Array<ITextProps>
+    ) => string;
+    activeLocale: keyof NCoreUIKit.LocaleKey;
+    localize: (
+        translation: keyof NCoreUIKit.Translation,
+        parameters?: Array<string | number>
+    ) => string;
+    isRTL: boolean;
+};

package/src/types/modal.ts

@@ -0,0 +1,25 @@
+import {
+    type ModalInternalProps
+} from "../components/modal/type";
+
+export type ModalType = {
+    data?: Array<ModalDataType>;
+};
+
+export type ModalDataType = Omit<ModalInternalProps, "id"> & {
+    isAutoClose?: boolean;
+    id?: string;
+};
+
+export type ModalContextType = {
+    open: (modalData: ModalDataType) => void;
+    close: (props?: {
+        index?: number;
+        id?: string;
+    }) => void;
+    data: Array<ModalDataType>;
+};
+
+export type ModalStateContextType = {
+    data: Array<ModalDataType>;
+};

package/src/types/portalize.ts

@@ -0,0 +1,3 @@
+export type PortalizedComponentProps = {
+    isVisible: boolean;
+};

package/src/types/snackBar.ts

@@ -0,0 +1,24 @@
+import {
+    type SnackBarInternalProps
+} from "../components/snackBar/type";
+
+export type SnackBarType = {
+    data?: Array<SnackBarDataType>;
+};
+
+export type SnackBarDataType = Omit<SnackBarInternalProps, "id"> & {
+    id?: string;
+};
+
+export type SnackBarContextType = {
+    open: (toastData: SnackBarDataType) => string;
+    close: (props?: {
+        index?: number;
+        id?: string;
+    }) => void;
+    data: Array<SnackBarDataType>;
+};
+
+export type SnackBarStateContextType = {
+    data: Array<SnackBarDataType>;
+};

package/src/types/theme.ts

@@ -0,0 +1,30 @@
+export type ThemesType = {
+    initialSelectedPalette?: keyof NCoreUIKit.PaletteKey;
+    initialSelectedGapPropagation?: GapPropagationType;
+    initialSelectedTheme?: keyof NCoreUIKit.ThemeKey;
+    initialSelectedActiveSharpness?: SharpnessType;
+    projectThemes?: NCoreUIKit.Palette;
+};
+
+export type PaletteType = "nibgat" | "nibgat-community" | "caycore";
+
+export type GapPropagationType = "spacious" | "compact";
+
+export type SharpnessType = "soft" | "sharp" | "rounded";
+
+export type ThemeType = "light" | "dark";
+
+export type ThemeContextStateType = Partial<ThemeContextType>;
+
+export type ThemeContextType = {
+    activePalette: keyof NCoreUIKit.PaletteKey;
+    activeGapPropagation: GapPropagationType;
+    activeTheme: keyof NCoreUIKit.ThemeKey;
+    inlineSpaces: NCoreUIKit.InlineSpaces;
+    typography: NCoreUIKit.Typography;
+    activeSharpness: SharpnessType;
+    colors: NCoreUIKit.ThemeTokens;
+    radiuses: NCoreUIKit.Radiuses;
+    borders: NCoreUIKit.Borders;
+    spaces: NCoreUIKit.Spaces;
+};

package/src/types/toast.ts

@@ -0,0 +1,24 @@
+import {
+    type ToastInternalProps
+} from "../components/toast/type";
+
+export type ToastType = {
+    data?: Array<ToastDataType>;
+};
+
+export type ToastDataType = Omit<ToastInternalProps, "id"> & {
+    id?: string;
+};
+
+export type ToastContextType = {
+    open: (toastData: ToastDataType) => string;
+    close: (props?: {
+        index?: number;
+        id?: string;
+    }) => void;
+    data: Array<ToastDataType>;
+};
+
+export type ToastStateContextType = {
+    data: Array<ToastDataType>;
+};

package/src/utils/index.ts

@@ -0,0 +1,65 @@
+import {
+    Dimensions,
+    Platform
+} from "react-native";
+
+const dimensions = Dimensions.get("window");
+
+export const windowHeight = dimensions.height;
+export const windowWidth = dimensions.width;
+
+export const uuid = () => {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+        const r = Math.random() * 16 | 0, v = c == "x" ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    });
+};
+
+const ANDROID_FONT_FIX = {
+    "100": "Thin",
+    "200": "ExtraLight",
+    "300": "Light",
+    "400": "Regular",
+    "500": "Medium",
+    "600": "SemiBold",
+    "700": "Bold",
+    "800": "ExtraBold",
+    "900": "Black"
+};
+
+export const androidTypographyFixer = (defaultPaletteData: NCoreUIKit.Palette): NCoreUIKit.Palette => {
+    if(defaultPaletteData.isNeedAndroidTypographyFixer && Platform.OS === "android") {
+        const spacious = defaultPaletteData.typography.spacious;
+        const compact = defaultPaletteData.typography.compact;
+
+        (Object.keys(spacious) as Array<keyof typeof spacious>).forEach((key) => {
+            spacious[key] = {
+                ...spacious[key],
+                fontWeight: "normal",
+                fontFamily: spacious[key].fontFamily.indexOf("-") === -1
+                    ? `${spacious[key].fontFamily}-${ANDROID_FONT_FIX[spacious[key].fontWeight as keyof typeof ANDROID_FONT_FIX]}`
+                    : spacious[key].fontFamily
+            };
+        });
+
+        (Object.keys(compact) as Array<keyof typeof compact>).forEach((key) => {
+            compact[key] = {
+                ...compact[key],
+                fontWeight: "normal",
+                fontFamily: compact[key].fontFamily.indexOf("-") === -1
+                    ? `${compact[key].fontFamily}-${ANDROID_FONT_FIX[compact[key].fontWeight as keyof typeof ANDROID_FONT_FIX]}`
+                    : compact[key].fontFamily
+            };
+        });
+
+        return {
+            ...defaultPaletteData,
+            typography: {
+                spacious: spacious,
+                compact: compact
+            }
+        };
+    } else {
+        return defaultPaletteData;
+    }
+};