ncore-ui-kit

NİBGAT® | NCore - Mobile

The NCore, NİBGAT® UI - Kit. The NİBGAT®'s UI / Component Library.

🛠 Tooling & Environment Setup (Optional)

NCore UI Kit provides built-in configuration tools to maintain standard coding guidelines and ensure seamless integration across NİBGAT projects.

1. Environment Setup (One-Click)

If you want to use the exact same ESLint rules, TypeScript configs, and VSCode settings used in NCore UI Kit, simply run the setup command in your project root:

npx ncore-setup

This command automatically copies .vscode/, eslint.config.mjs, eslint-local-rules/, and tsconfig.json to your project.

2. Webpack Configuration (React Native Web)

When building a web project with React Native Web, you have two options:

Option A: Default NCore Webpack Config (Zero-config) Use this if you are starting a new web project and want a ready-to-use configuration.

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ESLintPlugin = require("eslint-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const { createDefaultWebpackConfig } = require("ncore-ui-kit/webpack-config");

module.exports = createDefaultWebpackConfig({
    appDirectory: path.resolve(__dirname, "./"),
    HtmlWebpackPlugin,
    ESLintPlugin,
    CopyPlugin,
    webpack
});

Option B: Wrap your existing Webpack config If you already have a complex webpack config, you can wrap it to inject necessary polyfills and aliases.

// webpack.config.js
const { withNCoreUIKitWebpack } = require("ncore-ui-kit/webpack-config");
const webpack = require("webpack");

let config = {
    // ... your existing config
};

module.exports = withNCoreUIKitWebpack(config, webpack);

3. Metro Configuration (React Native Mobile)

If you are using this library in a React Native or Expo mobile project, you must update your metro.config.js to include the required Node.js core module polyfills (crypto, process, stream).

For Expo Projects:

// metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const { withNCoreUIKit } = require("ncore-ui-kit/metro-config");

const config = getDefaultConfig(__dirname);
module.exports = withNCoreUIKit(config);

For Bare React Native Projects (CLI):

// metro.config.js
const { getDefaultConfig } = require("@react-native/metro-config");
const { withNCoreUIKit } = require("ncore-ui-kit/metro-config");

const config = getDefaultConfig(__dirname);
module.exports = withNCoreUIKit(config);

Usage

useEffect(() => {
    NCoreUIKitMenu.load({
        siteLogoProps: {
            imageUrl: "https://www.nibgat.com/assets/images/logo.png",
            onPress: () => {
                navigation.navigate("Home");
            },
            imageProps: {
                resizeMode: "stretch"
            },
            imageSpace: "spacingLg",
            isWorkWithAction: true,
            subTitle: "Core Tech",
            title: "NİBGAT®"
        },
        renderFooter: () => {
            return <View
                style={{
                    padding: spaces.spacingMd,
                    flexDirection: "row",
                    alignItems: "center"
                }}
            >
                <View
                    style={{
                        marginRight: spaces.spacingSm,
                        justifyContent: "center",
                        flexDirection: "row",
                        alignItems: "center"
                    }}
                >
                    <Text
                        variant="labelLargeSize"
                    >
                        Palet:
                    </Text>
                    <PaletteSwitcher/>
                </View>
                <View
                    style={{
                        justifyContent: "center",
                        flexDirection: "row",
                        alignItems: "center"
                    }}
                >
                    <Text
                        variant="labelLargeSize"
                    >
                        Tema:
                    </Text>
                    <ThemeSwitcher/>
                </View>
            </View>;
        },
        isAutoClosed: true,
        buttons: [
            {
                redirectMain: "Home",
                isCollapsible: true,
                title: "Ana Sayfa",
                icon: ({
                    color
                }) => <HomeIcon
                    color={colors.content.icon[color]}
                />,
                subButtons: [
                    {
                        title: "Text",
                        redirectMain: "TextPage"
                    }
                ]
            },
            {
                redirectMain: "Text",
                isCollapsible: true,
                title: "Deneme",
                icon: ({
                    color
                }) => <HomeIcon
                    color={colors.content.icon[color]}
                />,
                subButtons: [
                    {
                        title: "Noliii",
                        redirectMain: "Home"
                    }
                ]
            },
            {
                title: "Text",
                redirectMain: "TextPage"
            }
        ],
        navigation: navigation as unknown as NCoreUIKit.Navigation,
        id: "test"
    });