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. Type & Lint Configuration (Optional)

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

npx ncore-type-kit

This command safely merges .vscode/, eslint.config.mjs, eslint-local-rules/, and tsconfig.json (preserves your existing include/exclude options) to your project.

2. Auto Configuration for Webpack & Metro

To automatically inject NCore UI Kit plugins into your existing webpack.config.js and metro.config.js, you can run:

npx ncore-setup

If you only want to configure one specific platform, use:

npx ncore-setup-web     # Only updates webpack.config.js
npx ncore-setup-mobile  # Only updates metro.config.js

3. Manual 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);

4. Manual Metro Configuration (React Native Mobile)

If you did not use npx ncore-setup and are using this library in a React Native or Expo mobile project, you must manually 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"
    });