Feature: CodeViewer example page added.

example/src/navigation/index.tsx

@@ -57,6 +57,7 @@ import BottomSheetPage from "../pages/components/bottomSheet";
 import RadioButtonPage from "../pages/components/radioButton";
 import SelectSheetPage from "../pages/components/selectSheet";
 import ToolsUsagePage from "../pages/coreFeatures/toolsUsage";
+import CodeViewerPage from "../pages/components/codeViewer";
 import MainHeaderPage from "../pages/components/mainHeader";
 import SelectBoxPage from "../pages/components/selectBox";
 import SeperatorPage from "../pages/components/seperator";
@@ -158,6 +159,10 @@ const ComponentsNav = () => {
             component={CheckBoxPage}
             name="CheckBox"
         />
+        <ComponentsStack.Screen
+            component={CodeViewerPage}
+            name="CodeViewer"
+        />
         <ComponentsStack.Screen
             component={ChipPage}
             name="Chip"
@@ -566,6 +571,11 @@ const RootNav = () => {
                             redirectSub: "AvatarGroup",
                             title: "AvatarGroup"
                         },
+                        {
+                            redirectMain: "Components",
+                            redirectSub: "CodeViewer",
+                            title: "CodeViewer"
+                        },
                         {
                             redirectMain: "Components",
                             redirectSub: "Chip",
@@ -828,6 +838,7 @@ const Navigation = () => {
                             Button: "button",
                             CheckBox: "checkbox",
                             Chip: "chip",
+                            CodeViewer: "codeviewer",
                             DateSelector: "dateselector",
                             DateTimePicker: "datetimepicker",
                             DateTimeSheet: "datetimesheet",

example/src/navigation/type.ts

@@ -35,6 +35,7 @@ export type ComponentsStackParamList = {
     BottomSheet: undefined;
     RadioButton: undefined;
     SelectSheet: undefined;
+    CodeViewer: undefined;
     SelectBox: undefined;
     Seperator: undefined;
     StateCard: undefined;

example/src/pages/components/codeViewer/index.tsx

@@ -0,0 +1,179 @@
+import {
+    useLayoutEffect,
+    useState
+} from "react";
+import {
+    View
+} from "react-native";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    TextAreaInput,
+    PageContainer,
+    CodeViewer,
+    SelectBox,
+    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";
+
+const LANGUAGES = [
+    "typescript",
+    "javascript",
+    "python",
+    "csharp",
+    "bash",
+    "tsx",
+    "jsx",
+    "sql"
+];
+
+const LANGUAGES_DATA = LANGUAGES.map(item => ({
+    __key: item,
+    __title: item
+}));
+
+const DEFAULT_CODE = `import {
+    CodeViewer
+} from "ncore-ui-kit";
+
+const App = () => {
+    return <CodeViewer
+        language="tsx"
+        code={"console.log('Hello World');"}
+    />;
+};
+
+export default App;`;
+
+const CodeViewerPage = () => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+    const [
+        languageIndex,
+        setLanguageIndex
+    ] = useState<number>(0);
+
+    const [
+        code,
+        setCode
+    ] = useState<string>(DEFAULT_CODE);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            headerShown: true,
+            header: () => <Header
+                isWrapSafeareaContext={false}
+                title={localize("codeViewer")}
+                navigation={navigation}
+                isGoBackEnable={true}
+            />
+        });
+    }, []);
+
+    return <PageContainer
+        isWorkWithHeaderSpace={false}
+        isScrollable={true}
+        scrollViewProps={{
+            contentContainerStyle: stylesheet.scrollContent
+        }}
+        scrollViewStyle={[
+            stylesheet.container
+        ]}
+    >
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            <Text
+                variant="bodyMediumSize"
+                color="mid"
+                style={stylesheet.descText}
+            >
+                {localize("codeViewer-desc") || localize("codeViewer")}
+            </Text>
+            <View
+                style={[
+                    stylesheet.previewContainer,
+                    {
+                        borderColor: colors.content.border.subtle,
+                        marginBottom: spaces.spacingMd,
+                        borderRadius: radiuses.form,
+                        borderWidth: borders.line,
+                        padding: spaces.spacingMd
+                    }
+                ]}
+            >
+                <CodeViewer
+                    language={LANGUAGES[languageIndex]}
+                    code={code}
+                />
+            </View>
+            <View
+                style={[
+                    stylesheet.rowContainer,
+                    {
+                        gap: spaces.spacingMd,
+                        marginBottom: spaces.spacingMd
+                    }
+                ]}
+            >
+                <SelectBox
+                    initialSelectedItems={
+
+                        LANGUAGES_DATA[languageIndex]
+
+                            ? [
+                                LANGUAGES_DATA[languageIndex]!
+                            ]
+
+                            : []
+
+                    }
+                    titleExtractor={(item) => item.__title}
+                    keyExtractor={(item) => item.__key}
+                    title={localize("change-language")}
+                    spreadBehaviour="free"
+                    data={LANGUAGES_DATA}
+                    onChange={(selectedItems) => {
+                        if (selectedItems.length > 0) {
+                            const index = LANGUAGES.indexOf(selectedItems[0]!.__key);
+                            if (index !== -1) setLanguageIndex(index);
+                        }
+                    }}
+                />
+            </View>
+            <TextAreaInput
+                placeholder={localize("enter-code")}
+                title={localize("codeViewer-code")}
+                isUpdateOnRealtime={true}
+                spreadBehaviour="stretch"
+                onChangeText={setCode}
+                value={code}
+                style={{
+                    marginBottom: spaces.spacingMd
+                }}
+            />
+        </View>
+    </PageContainer>;
+};
+export default CodeViewerPage;

example/src/pages/components/codeViewer/stylesheet.ts

@@ -0,0 +1,33 @@
+import {
+    StyleSheet
+} from "react-native";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        maxWidth: 850,
+        width: "100%"
+    },
+    scrollContent: {
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    descText: {
+        marginBottom: 20
+    },
+    previewContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: 120
+    },
+    rowContainer: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%"
+    }
+});
+export default stylesheet;

example/src/variants/locales/default.json

@@ -48,6 +48,7 @@
             "highlightButton-desc": "Önemli eylemleri vurgulamak için kullanılan dikkat çekici buton bileşeni.",
             "bottomSheet-desc": "Ekranın altından açılan ve ek içerikler sunan kaydırılabilir panel bileşeni.",
             "button-desc": "Kullanıcı etkileşimlerini tetiklemek için kullanılan temel tıklanabilir bileşen.",
+            "toolsUsage-codeThemeComment": "Mevcut tema renklerine, boşluklarına ve aktif tercihlere erişin",
             "localeExamples-desc": "Diller arası geçiş ve localize fonksiyonu ile dinamik metin kullanımı.",
             "menu-desc": "Kullanıcıya çeşitli seçenekler ve bağlantılar sunan genel amaçlı menü bileşeni.",
             "yearSelector-desc": "Bir listeden sadece yılı seçmeye odaklanan özel zaman arayüzü bileşeni.",
@@ -55,8 +56,10 @@
             "switch-desc": "İki durumlu (açık/kapalı) tercihleri değiştirmeye yarayan anahtar bileşeni.",
             "toolsUsage-desc": "NCore UI Kit hook'ları olan useTheme, useLocale ve useToast kullanımı.",
             "siteLogo-desc": "Markayı veya uygulamayı temsil eden ana logo görselini işleyen bileşen.",
+            "codeViewer-desc": "Kod bloklarını görüntülemek ve kopyalamak için kullanılan bileşen.",
             "avatarGroup-desc": "Birden fazla avatarı bir arada gruplayarak gösteren bileşen.",
             "avatar-desc": "Kullanıcı veya varlıkları temsil eden profil görseli bileşeni.",
+            "toolsUsage-codeLocaleComment": "Mevcut çevirilere ve aktif dile erişin",
             "markdownViewer-title": "Markdown Görüntüleyici (Markdown Viewer)",
             "typesOverride-tsconfigIntegration": "tsconfig.json Entegrasyonu",
             "bottomSheet-toggleSwipeClose": "Kaydırarak Kapatmayı Aç/Kapat",
@@ -291,6 +294,7 @@
             "radioButton-titleLabel": "Başlık",
             "selectBox-placeholder": "Seçiniz",
             "switch-title": "Anahtar (Switch)",
+            "change-language": "Dili Değiştir",
             "avatar-enterText": "Metin Girin",
             "dialog-enterText": "Metin Girin",
             "dialog-title": "İletişim Kutusu",
@@ -303,6 +307,7 @@
             "themeExamples-danger": "Tehlike",
             "toolsUsage": "Araç Kullanımları",
             "typesOverride": "Tip Değiştirme",
+            "codeViewer": "Kod Görüntüleyici",
             "bottomSheet-title": "Alt Panel",
             "change-size": "Boyutu Değiştir",
             "menu-openMenu": "Menu OpenMenu",
@@ -343,11 +348,13 @@
             "enter-text": "Metin Girin",
             "check-box": "Onay Kutusu",
             "menu-title": "Menu Title",
+            "enter-code": "Kodu Girin",
             "installation": "Kurulum",
             "sub-title": "Alt Başlık",
             "avatar-title": "Avatar",
             "menu-home": "Menu Home",
             "text": "Text ( Metin )",
+            "codeViewer-code": "Kod",
             "chip-title": "Çip",
             "content": "İçerik",
             "home": "Ana Sayfa",
@@ -360,9 +367,7 @@
             "close": "Kapat",
             "right": "Sağ",
             "chip": "Çip",
-            "left": "Sol",
-            "toolsUsage-codeThemeComment": "Mevcut tema renklerine, boşluklarına ve aktif tercihlere erişin",
-            "toolsUsage-codeLocaleComment": "Mevcut çevirilere ve aktif dile erişin"
+            "left": "Sol"
         },
         "locale": "tr-TR",
         "isRTL": false
@@ -417,7 +422,9 @@
             "localeExamples-desc": "Switching between locales and dynamic text usage with localize function.",
             "highlightButton-desc": "An eye-catching button component used to highlight important actions.",
             "toolsUsage-codeViewerDesc": "To render code beautifully in your app and copy it to clipboard.",
+            "toolsUsage-codeLocaleComment": "Access current localization translations and active language",
             "monthSelector-desc": "A component used to select a specific month or months within a year.",
+            "toolsUsage-codeThemeComment": "Access current theme colors, spaces, and active preferences",
             "dateSelector-desc": "An interface component that allows users to select a specific date.",
             "sticker-desc": "A dynamic sticker component used for adding playful visuals or icons.",
             "switch-desc": "A toggle switch component used to change binary (on/off) preferences.",
@@ -425,6 +432,7 @@
             "toolsUsage-desc": "Usage of NCore UI Kit hooks useTheme, useLocale, and useToast.",
             "button-desc": "A basic clickable component used to trigger user interactions.",
             "avatar-desc": "A profile image component representing users or entities.",
+            "codeViewer-desc": "A component used to display and copy code blocks.",
             "typesOverride-tsconfigIntegration": "tsconfig.json Integration",
             "highlightButton-toggleCustomPadding": "Toggle Custom Padding",
             "notificationIndicator-toggleShowCount": "Toggle Show Count",
@@ -622,6 +630,7 @@
             "toggle-closable": "Toggle Closable",
             "toggle-disabled": "Toggle Disabled",
             "ui-kit-library": "UI Kit - Library",
+            "change-language": "Change Language",
             "avatarGroup-title": "Avatar Group",
             "bottomSheet-title": "Bottom Sheet",
             "gettingStarted": "Getting Started",
@@ -702,11 +711,14 @@
             "components-toast": "Toast",
             "rowCard-title": "Row Card",
             "toolsUsage": "Tools Usage",
+            "codeViewer": "Code Viewer",
             "chip-titleLabel": "Title",
             "enter-text": "Enter Text",
             "loading-title": "Loading",
             "menu-title": "Menu Title",
             "sticker-title": "Sticker",
+            "enter-code": "Enter Code",
+            "codeViewer-code": "Code",
             "avatar-title": "Avatar",
             "check-box": "Check Box",
             "dialog-title": "Dialog",
@@ -728,9 +740,7 @@
             "chip": "Chip",
             "left": "Left",
             "next": "Next",
-            "text": "Text",
-            "toolsUsage-codeThemeComment": "Access current theme colors, spaces, and active preferences",
-            "toolsUsage-codeLocaleComment": "Access current localization translations and active language"
+            "text": "Text"
         },
         "locale": "en-US",
         "isRTL": false