ncore-ui-kit/example/src/pages/implementation/index.tsx

import {
    useLayoutEffect
} from "react";
import {
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PageContainer,
    CodeViewer,
    Button,
    Header,
    Text
} from "ncore-ui-kit";
import {
    useNavigation
} from "@react-navigation/native";
import type RootStackParamList from "../../navigation/type";
import type {
    NativeStackNavigationProp
} from "@react-navigation/native-stack";
import {
    ChevronRightIcon,
    ChevronLeftIcon
} from "lucide-react-native";

const Implementation = () => {
    const {
        colors,
        spaces
    } = NCoreUIKitTheme.useContext();

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();

    useLayoutEffect(() => {
        navigation.setOptions({
            header: () => <Header
                title={localize("implementation-title")}
                isWrapSafeareaContext={false}
                navigation={navigation}
                isGoBackEnable={true}
            />,
            headerShown: true
        });
    }, []);

    const exampleCode = `import {
    type NCoreUIKitConfig,
    setupNCoreUIKit,
    Host
} from "ncore-ui-kit";

// Kendi temanızı ve dil dosyanızı dahil edin
import defaultLocaleJSON from "./variants/locales/default.json";
import defaultThemeJSON from "./variants/themes/default.json";

// NCore konfigürasyonunu oluşturun
const NCoreConfig: NCoreUIKitConfig = {
    projectThemes: defaultThemeJSON as NCoreUIKit.Palette,
    initialSelectedGapPropagation: "spacious",
    projectLocales: defaultLocaleJSON,
    initialSelectedPalette: "nibgat",
    initialSelectedTheme: "light"
};

// NCoreUIKitBase nesnesini ayağa kaldırın
const NCoreUIKitBase = setupNCoreUIKit(NCoreConfig);

const App = () => {
    return <NCoreUIKitBase.Provider>
        <Host name="main-header">
            {/* Sayfalarınız veya Navigasyon yapınız burada yer almalı */}
        </Host>
    </NCoreUIKitBase.Provider>;
};
export default App;`;

    const expoMetroConfigCode = `// For Expo
const { getDefaultConfig } = require("expo/metro-config");
const { withNCoreUIKit } = require("ncore-ui-kit/metro-config");

const config = getDefaultConfig(__dirname);

module.exports = withNCoreUIKit(config);`;

    const bareMetroConfigCode = `// For Bare React Native CLI
const { getDefaultConfig } = require("@react-native/metro-config");
const { withNCoreUIKit } = require("ncore-ui-kit/metro-config");

const config = getDefaultConfig(__dirname);

module.exports = withNCoreUIKit(config);`;

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

module.exports = createDefaultWebpackConfig({
    appDirectory: require("path").resolve(__dirname, "./"),
    HtmlWebpackPlugin: require("html-webpack-plugin"),
    ESLintPlugin: require("eslint-webpack-plugin"),
    CopyPlugin: require("copy-webpack-plugin"),
    webpack: require("webpack")
});`;

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

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

module.exports = withNCoreUIKitWebpack(config, webpack);`;

    const envSetupCode = `npx ncore-type-kit`;
    const autoSetupCode = `npx ncore-setup
# Sadece web için: npx ncore-setup-web
# Sadece mobil için: npx ncore-setup-mobile`;

    return <PageContainer
        isWorkWithHeaderSpace={false}
        isScrollable={true}
    >
        <View
            style={[
                stylesheet.paddedContainer,
                {
                    padding: spaces.spacingMd
                }
            ]}
        >
            <Text
                style={{
                    marginBottom: spaces.spacingMd
                }}
                variant="bodyMediumSize"
                color="mid"
            >
                {localize("implementation-desc")}
            </Text>
            <View
                style={[
                    stylesheet.borderedCard,
                    {
                        backgroundColor: colors.content.container.default,
                        borderColor: colors.content.border.subtle,
                        marginBottom: spaces.spacingMd,
                        padding: spaces.spacingMd
                    }
                ]}
            >
                <Text
                    variant="headlineSmallSize"
                >
                    {localize("your-project-main-directory")}/src/index.tsx
                </Text>
                <CodeViewer
                    code={exampleCode}
                    language="tsx"
                />
            </View>
            <Text
                style={{
                    marginBottom: spaces.spacingMd
                }}
                variant="bodyMediumSize"
                color="mid"
            >
                Web (Webpack) ve Mobil (Metro) ayarlarınızı NCore UI Kit ile uyumlu hale getirmek için otomatik kurulum komutlarını kullanabilirsiniz:
            </Text>
            <View
                style={[
                    stylesheet.borderedCard,
                    {
                        backgroundColor: colors.content.container.default,
                        borderColor: colors.content.border.subtle,
                        marginBottom: spaces.spacingMd,
                        padding: spaces.spacingMd
                    }
                ]}
            >
                <Text
                    variant="headlineSmallSize"
                >
                    Terminal (Otomatik Yapılandırma)
                </Text>
                <CodeViewer
                    code={autoSetupCode}
                    language="bash"
                />
            </View>
            <Text
                style={{
                    marginBottom: spaces.spacingMd
                }}
                variant="bodyMediumSize"
                color="mid"
            >
                Mobil (React Native / Expo) ortamında kurulum yaparken, otomatik kurulumu tercih etmezseniz metro.config.js dosyanızı NCore UIKit ile manuel sarmalamanız (wrap) gerekir.
            </Text>
            <View
                style={[
                    stylesheet.borderedCard,
                    {
                        backgroundColor: colors.content.container.default,
                        borderColor: colors.content.border.subtle,
                        marginBottom: spaces.spacingMd,
                        padding: spaces.spacingMd
                    }
                ]}
            >
                <Text
                    variant="headlineSmallSize"
                >
                    {localize("your-project-main-directory")}/metro.config.js (Expo)
                </Text>
                <CodeViewer
                    code={expoMetroConfigCode}
                    language="javascript"
                />
            </View>
            <View
                style={[
                    stylesheet.borderedCard,
                    {
                        backgroundColor: colors.content.container.default,
                        borderColor: colors.content.border.subtle,
                        marginBottom: spaces.spacingMd,
                        padding: spaces.spacingMd
                    }
                ]}
            >
                <Text
                    variant="headlineSmallSize"
                >
                    {localize("your-project-main-directory")}/metro.config.js (React Native CLI)
                </Text>
                <CodeViewer
                    code={bareMetroConfigCode}
                    language="javascript"
                />
            </View>
            <Text
                style={{
                    marginBottom: spaces.spacingMd
                }}
                variant="bodyMediumSize"
                color="mid"
            >
                Web (React Native Web) ortamında derleme yapmak için, otomatik kurulumu kullanmak yerine NCore'un hazır Webpack ayarını kullanabilir veya mevcut ayarınızı manuel sarmalayabilirsiniz.
            </Text>
            <View
                style={[
                    stylesheet.borderedCard,
                    {
                        backgroundColor: colors.content.container.default,
                        borderColor: colors.content.border.subtle,
                        marginBottom: spaces.spacingMd,
                        padding: spaces.spacingMd
                    }
                ]}
            >
                <Text
                    variant="headlineSmallSize"
                >
                    {localize("your-project-main-directory")}/webpack.config.js (Hazır Ayar)
                </Text>
                <CodeViewer
                    code={defaultWebpackCode}
                    language="javascript"
                />
            </View>
            <View
                style={[
                    stylesheet.borderedCard,
                    {
                        backgroundColor: colors.content.container.default,
                        borderColor: colors.content.border.subtle,
                        marginBottom: spaces.spacingMd,
                        padding: spaces.spacingMd
                    }
                ]}
            >
                <Text
                    variant="headlineSmallSize"
                >
                    {localize("your-project-main-directory")}/webpack.config.js (Sarmalama)
                </Text>
                <CodeViewer
                    code={wrapWebpackCode}
                    language="javascript"
                />
            </View>
            <Text
                style={{
                    marginBottom: spaces.spacingMd
                }}
                variant="bodyMediumSize"
                color="mid"
            >
                Geliştirme ortamınızın (ESLint, TS, VSCode vb.) NCore UI Kit ile aynı standartlara sahip olmasını istiyorsanız tek tıkla projenizi yapılandırabilirsiniz:
            </Text>
            <View
                style={[
                    stylesheet.borderedCard,
                    {
                        backgroundColor: colors.content.container.default,
                        borderColor: colors.content.border.subtle,
                        marginBottom: spaces.spacingMd,
                        padding: spaces.spacingMd
                    }
                ]}
            >
                <Text
                    variant="headlineSmallSize"
                >
                    Terminal (Tip ve Lint Ayarları)
                </Text>
                <CodeViewer
                    code={envSetupCode}
                    language="bash"
                />
            </View>
            <View
                style={[
                    stylesheet.rowSpaceBetween,
                    {
                        marginTop: spaces.spacingMd
                    }
                ]}
            >
                <Button
                    onPress={() => {
                        navigation.navigate("GettingStarted", {
                            screen: "Installation"
                        });
                    }}
                    icon={({
                        color,
                        size
                    }) => {
                        return <ChevronLeftIcon
                            color={colors.content.icon[color]}
                            size={size + 3}
                        />;
                    }}
                    title={localize("installation")}
                    iconDirection="left"
                />
                <Button
                    icon={({
                        color,
                        size
                    }) => {
                        return <ChevronRightIcon
                            color={colors.content.icon[color]}
                            size={size + 3}
                        />;
                    }}
                    onPress={() => {
                        navigation.navigate("CoreFeatures", {
                            screen: "ToolsUsage"
                        });
                    }}
                    title={localize("coreFeatures")}
                    iconDirection="right"
                />
            </View>
        </View>
    </PageContainer>;
};
export default Implementation;