Bugfix: General lint problems fixed.

.agents/AGENTS.md

@@ -32,3 +32,9 @@ Always follow these rules by default. Pay "extreme attention" (aşırı dikkat)
 - NEVER use `multi_replace_file_content` or attempt to edit multiple files in a single pass. The user explicitly bans batch operations ("Toplu işlemi yasaklıyorum").
 - Any fix or change MUST be done one-by-one, meticulously.
 - Before applying any change to a file, verify the exact location, context, and potential side effects from at least 3 different angles (e.g., check exact lines using view_file, consider how the component uses the prop, and anticipate how the linter will react).
+
+## Semantic Naming for Styles
+- When defining styles in `stylesheet.ts`, you MUST use semantic naming based on the object or component being styled, NOT based on the style values.
+- **Incorrect:** `flex1`, `fullWidth`, `transparentBackground`
+- **Correct:** `container`, `content`, `titleContainer`, `title`, `emptyCheckIcon`
+- For example: The outermost `<View>` in a component is usually `container`. A wrapper for content is `contentContainer`. A view wrapping a title is `titleContainer`. Always look at the semantic purpose of the element in the UI hierarchy.

babel.config.js

@@ -12,5 +12,5 @@ module.exports = {
             ],
             include: /\/node_modules\//
         }
-    ],
+    ]
 };

src/assets/svg/enUSIcon/index.tsx

@@ -8,6 +8,12 @@ import {
     G
 } from "react-native-svg";
 
+const stylesheet = {
+    mask: {
+        maskType: "luminance" as const
+    }
+};
+
 const EnUsIcon = ({
     size = 32,
     style,
@@ -30,9 +36,7 @@ const EnUsIcon = ({
             width={32}
             x={0}
             y={0}
-            style={{
-                maskType: "luminance"
-            }}
+            style={stylesheet.mask}
         >
             <Path
                 fill="#fff"

src/components/button/index.tsx

@@ -64,11 +64,11 @@ const Button: FC<IButtonProps> = ({
     });
 
     const currentVariant = getButtonVariant({
-        variant,
+        variant
     });
 
     const currentType = getButtonType({
-        type,
+        type
     });
 
     const {

src/components/checkBox/index.tsx

@@ -86,11 +86,11 @@ const CheckBox: FC<ICheckBoxProps> = ({
     });
 
     const titleProps: ITextProps = {
-        color: currentType.titleColor,
+        color: currentType.titleColor
     };
 
     const subTitleProps: ITextProps = {
-        color: currentType.subTitleColor,
+        color: currentType.subTitleColor
     };
 
     const indicatorIconProps: {
@@ -159,10 +159,7 @@ const CheckBox: FC<ICheckBoxProps> = ({
     const renderCheckIcon = () => {
         if(!isChecked) {
             return <View
-                style={{
-                    height: 16,
-                    width: 16
-                }}
+                style={stylesheet.emptyIcon}
             />;
         }
 
@@ -244,31 +241,29 @@ const CheckBox: FC<ICheckBoxProps> = ({
         </View>;
     };
 
-    return (
-        <TouchableOpacity
-            {...props}
-            onPress={isDisabled || isLoading ? () => null : onPress ? onPress : undefined}
-            disabled={isDisabled || isLoading || !onPress}
-            style={[
-                style,
-                stylesheet.container,
-                containerDynamicStyle
-            ]}
-            {...Platform.select({
-                web: {
-                    dataSet: {
-                        disablePressableDownEffect: "true"
-                    }
-                },
-                default: {}
-            })}
-        >
-            {isFlip ? null : renderCheckIndicator()}
+    return <TouchableOpacity
+        {...props}
+        onPress={isDisabled || isLoading ? () => null : onPress ? onPress : undefined}
+        disabled={isDisabled || isLoading || !onPress}
+        style={[
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ]}
+        {...Platform.select({
+            web: {
+                dataSet: {
+                    disablePressableDownEffect: "true"
+                }
+            },
+            default: {}
+        })}
+    >
+        {isFlip ? null : renderCheckIndicator()}
 
-            {renderContent()}
+        {renderContent()}
 
-            {isFlip ? renderCheckIndicator() : null}
-        </TouchableOpacity>
-    );
+        {isFlip ? renderCheckIndicator() : null}
+    </TouchableOpacity>;
 };
 export default CheckBox;

src/components/checkBox/stylesheet.ts

@@ -112,6 +112,10 @@ const stylesheet = StyleSheet.create({
         right: -2,
         left: -2,
         top: -2
+    },
+    emptyIcon: {
+        height: 16,
+        width: 16
     }
 });
 

src/components/codeViewer/index.tsx

@@ -172,90 +172,85 @@ const CodeViewer = ({
         }
     };
 
-    return (
-        <View
-            ref={containerRef}
+    return <View
+        ref={containerRef}
+        style={[
+            stylesheet.container,
+            containerDynamicStyle
+        ]}
+    >
+        <ScrollView
+            contentContainerStyle={stylesheet.scrollContent}
+            showsHorizontalScrollIndicator={true}
+            horizontal={true}
             style={[
-                stylesheet.container,
-                containerDynamicStyle
+                stylesheet.scrollView,
+                {
+                    paddingVertical: spaces.spacingSm
+                }
             ]}
         >
-            <ScrollView
-                contentContainerStyle={stylesheet.scrollContent}
-                showsHorizontalScrollIndicator={true}
-                horizontal={true}
-                style={{
-                    paddingVertical: spaces.spacingSm,
-                    flex: 1
-                }}
+            <Text
+                style={[
+                    stylesheet.content,
+                    textDynamicStyle
+                ]}
             >
-                <Text
-                    style={[
-                        stylesheet.content,
-                        textDynamicStyle
-                    ]}
+                {language ? <Text
+                    color="low"
                 >
-                    {language ? <Text
-                        color="low"
+                    // {language}{"\n\n"}
+                </Text> : null}
+                {tokens.map((token, index) => {
+                    return <NativeText
+                        key={`code-token-${index}`}
+                        style={{
+                            fontFamily: Platform.OS === "web" ? "monospace" : "System",
+                            color: getTokenColor(token.type)
+                        }}
                     >
-                        // {language}{"\n\n"}
-                    </Text> : null}
-                    {tokens.map((token, index) => {
-                        return (
-                            <NativeText
-                                key={`code-token-${index}`}
-                                style={{
-                                    fontFamily: Platform.OS === "web" ? "monospace" : "System",
-                                    color: getTokenColor(token.type)
-                                }}
-                            >
-                                {token.value}
-                            </NativeText>
-                        );
-                    })}
-                </Text>
-            </ScrollView>
-            <View
-                style={{
+                        {token.value}
+                    </NativeText>;
+                })}
+            </Text>
+        </ScrollView>
+        <View
+            style={[
+                stylesheet.stickyActionContainer,
+                {
                     transform: [
                         {
                             translateY: stickyTop
                         }
                     ],
-                    marginLeft: spaces.spacingMd,
-                    alignSelf: "flex-start",
-                    zIndex: 1
+                    marginLeft: spaces.spacingMd
+                }
+            ]}
+        >
+            <Button
+                spreadBehaviour="free"
+                icon={({
+                    color,
+                    size
+                }) => {
+                    if (isCopied) {
+                        return <CheckIcon
+                            color={colors.content.icon.success}
+                            size={size + 5}
+                        />;
+                    }
+
+                    return <CopyIcon
+                        color={colors.content.icon[color]}
+                        size={size + 5}
+                    />;
                 }}
-            >
-                <Button
-                    spreadBehaviour="free"
-                    icon={({
-                        color,
-                        size
-                    }) => {
-                        if (isCopied) {
-                            return (
-                                <CheckIcon
-                                    color={colors.content.icon.success}
-                                    size={size + 5}
-                                />
-                            );
-                        }
-
-                        return (
-                            <CopyIcon
-                                color={colors.content.icon[color]}
-                                size={size + 5}
-                            />
-                        );
-                    }}
-                    onPress={handleCopyCode}
-                    variant="ghost"
-                    type="neutral"
-                    size="small"
-                />
-            </View>
+                onPress={handleCopyCode}
+                variant="ghost"
+                type="neutral"
+                size="small"
+            />
         </View>
-    );
+    </View>;
 };
 export default CodeViewer;

src/components/codeViewer/stylesheet.ts

@@ -22,6 +22,13 @@ const stylesheet = StyleSheet.create({
     scrollContent: {
         flexGrow: 1
     },
+    scrollView: {
+        flex: 1
+    },
+    stickyActionContainer: {
+        alignSelf: "flex-start",
+        zIndex: 1
+    },
     content: {
         fontFamily: Platform.OS === "web" ? "monospace" : "System",
         ...webStyle({

src/components/embeddedMenu/index.tsx

@@ -339,9 +339,7 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
                         siteLogoDynamicStyle
                     ]}
                 /> : <View
-                    style={{
-                        flex: 1
-                    }}
+                    style={stylesheet.emptyLogo}
                 />}
                 {renderToggleCollapseForExpended()}
             </View>
@@ -395,10 +393,12 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
         if(!isWorkWithSafeAreaView) {
             return <Fragment>
                 {isWorkWithHeaderSpace && (configs.headerSpace || headerSpace) ? <View
-                    style={{
-                        height: headerSpace ? headerSpace : configs.headerSpace,
-                        width: "100%"
-                    }}
+                    style={[
+                        stylesheet.headerSpacer,
+                        {
+                            height: headerSpace ? headerSpace : configs.headerSpace
+                        }
+                    ]}
                 /> : null}
                 {renderHeader()}
                 <ScrollView

src/components/embeddedMenu/stylesheet.ts

@@ -13,6 +13,12 @@ import {
 } from "../../utils";
 
 const stylesheet = StyleSheet.create({
+    emptyLogo: {
+        flex: 1
+    },
+    headerSpacer: {
+        width: "100%"
+    },
     container: {
         flexDirection: "column",
         display: "flex",

src/components/header/index.tsx

@@ -216,10 +216,12 @@ const Header = <T extends NavigationType>({
             ]}
         >
             {<View
-                style={{
-                    width: sideWidth,
-                    height: 40
-                }}
+                style={[
+                    stylesheet.sideSpacer,
+                    {
+                        width: sideWidth
+                    }
+                ]}
             />}
             <Text
                 variant="headlineSmallSize"
@@ -233,10 +235,12 @@ const Header = <T extends NavigationType>({
                 {title}
             </Text>
             {<View
-                style={{
-                    width: sideWidth,
-                    height: 40
-                }}
+                style={[
+                    stylesheet.sideSpacer,
+                    {
+                        width: sideWidth
+                    }
+                ]}
             />}
         </View>;
     };

src/components/header/stylesheet.ts

@@ -27,6 +27,9 @@ const stylesheet = StyleSheet.create({
             userSelect: "none"
         })
     },
+    sideSpacer: {
+        height: 40
+    },
     safeAreaViewContainer: {
     },
     titleContainer: {

src/components/highlightButton/index.tsx

@@ -62,7 +62,7 @@ const HighlightButton: FC<IHighlightButtonProps> = ({
     });
 
     const currentType = getHighlightButtonType({
-        type,
+        type
     });
 
     const {

src/components/mainHeader/index.tsx

@@ -159,11 +159,13 @@ const MainHeader = ({
         >
             {isWorkWithSafeAreaView ? renderSafeAreaView() : renderContentContainer()}
             {isWorkWithSticky && isWorkWithStickySpace ? <View
-                style={{
-                    backgroundColor: customBackgroundColor ? colors.project[customBackgroundColor] : colors.content.container[backgroundColor],
-                    height: contentHeight,
-                    width: "100%"
-                }}
+                style={[
+                    stylesheet.stickySpacer,
+                    {
+                        backgroundColor: customBackgroundColor ? colors.project[customBackgroundColor] : colors.content.container[backgroundColor],
+                        height: contentHeight
+                    }
+                ]}
             /> : null}
             {children}
         </View>;

src/components/mainHeader/stylesheet.ts

@@ -21,6 +21,9 @@ const stylesheet = StyleSheet.create({
     baseContainer: {
         flexDirection: "column",
         flex: 1
+    },
+    stickySpacer: {
+        width: "100%"
     }
 });
 

src/components/radioButton/index.tsx

@@ -86,11 +86,11 @@ const RadioButton: FC<IRadioButtonProps> = ({
     });
 
     const titleProps: ITextProps = {
-        color: currentType.titleColor,
+        color: currentType.titleColor
     };
 
     const subTitleProps: ITextProps = {
-        color: currentType.subTitleColor,
+        color: currentType.subTitleColor
     };
 
     const indicatorIconProps: {
@@ -161,9 +161,7 @@ const RadioButton: FC<IRadioButtonProps> = ({
             return <View
                 style={[
                     indicatorDynamicStyle,
-                    {
-                        backgroundColor: "transparent"
-                    }
+                    stylesheet.emptyIndicator
                 ]}
             />;
         }
@@ -239,31 +237,29 @@ const RadioButton: FC<IRadioButtonProps> = ({
         </View>;
     };
 
-    return (
-        <TouchableOpacity
-            {...props}
-            onPress={isDisabled || isLoading ? () => null : onPress ? onPress : undefined}
-            disabled={isDisabled || isLoading || !onPress}
-            style={[
-                style,
-                stylesheet.container,
-                containerDynamicStyle
-            ]}
-            {...Platform.select({
-                web: {
-                    dataSet: {
-                        disablePressableDownEffect: "true"
-                    }
-                },
-                default: {}
-            })}
-        >
-            {isFlip ? null : renderIndicatorContainer()}
+    return <TouchableOpacity
+        {...props}
+        onPress={isDisabled || isLoading ? () => null : onPress ? onPress : undefined}
+        disabled={isDisabled || isLoading || !onPress}
+        style={[
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ]}
+        {...Platform.select({
+            web: {
+                dataSet: {
+                    disablePressableDownEffect: "true"
+                }
+            },
+            default: {}
+        })}
+    >
+        {isFlip ? null : renderIndicatorContainer()}
 
-            {renderContent()}
+        {renderContent()}
 
-            {isFlip ? renderIndicatorContainer() : null}
-        </TouchableOpacity>
-    );
+        {isFlip ? renderIndicatorContainer() : null}
+    </TouchableOpacity>;
 };
 export default RadioButton;

src/components/radioButton/stylesheet.ts

@@ -115,6 +115,9 @@ const stylesheet = StyleSheet.create({
         right: -2,
         left: -2,
         top: -2
+    },
+    emptyIndicator: {
+        backgroundColor: "transparent"
     }
 });
 

src/components/selectSheet/index.tsx

@@ -153,8 +153,7 @@ function SelectSheet<T>({
                             stylesheet.itemContainer,
                             itemContainerDynamicStyle,
                             {
-                                marginTop: index === 0 ? 0 : spaces.spacingSm,
-                                position: "relative"
+                                marginTop: index === 0 ? 0 : spaces.spacingSm
                             }
                         ]}
                         onPress={() => {
@@ -166,12 +165,7 @@ function SelectSheet<T>({
                         }}
                     >
                         <View
-                            style={[
-                                stylesheet.itemContentContainer,
-                                {
-                                    zIndex: 99999
-                                }
-                            ]}
+                            style={stylesheet.itemContentContainer}
                         >
                             {renderOptionIcon ? renderOptionIcon({
                                 item,
@@ -197,15 +191,10 @@ function SelectSheet<T>({
                         </View>
                         {isDisabled ? <View
                             style={[
+                                stylesheet.disabledOverlay,
                                 {
                                     backgroundColor: colors.system.disabled.content,
-                                    borderRadius: radiuses.actions,
-                                    position: "absolute",
-                                    zIndex: 99998,
-                                    bottom: 0,
-                                    right: 0,
-                                    left: 0,
-                                    top: 0
+                                    borderRadius: radiuses.actions
                                 }
                             ]}
                         /> : null}

src/components/selectSheet/stylesheet.ts

@@ -25,11 +25,21 @@ const stylesheet = StyleSheet.create({
     },
     itemContainer: {
         flexDirection: "row",
-        alignItems: "center"
+        alignItems: "center",
+        position: "relative"
     },
     itemContentContainer: {
+        zIndex: 99999,
         flex: 1
     },
+    disabledOverlay: {
+        position: "absolute",
+        zIndex: 99998,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    },
     checkIconContainer: {
         justifyContent: "center",
         alignItems: "center"

src/components/siteLogo/index.tsx

@@ -206,7 +206,7 @@ const SiteLogo = ({
                 ellipsizeMode="tail"
                 numberOfLines={1}
                 style={{
-                    width: "100%",
+                    ...stylesheet.title,
                     ...titleStyle
                 }}
             >
@@ -221,7 +221,7 @@ const SiteLogo = ({
                         ellipsizeMode="tail"
                         numberOfLines={1}
                         style={{
-                            width: "100%",
+                            ...stylesheet.subTitle,
                             ...subTitleStyle
                         }}
                     >

src/components/siteLogo/stylesheet.ts

@@ -106,6 +106,12 @@ const stylesheet = StyleSheet.create({
         display: "flex",
         minWidth: 0,
         flex: 1
+    },
+    title: {
+        width: "100%"
+    },
+    subTitle: {
+        width: "100%"
     }
 });
 

src/components/switch/index.tsx

@@ -109,11 +109,11 @@ const Switch: FC<ISwitchProps> = ({
     ]);
 
     const titleProps: ITextProps = {
-        color: currentType.titleColor,
+        color: currentType.titleColor
     };
 
     const subTitleProps: ITextProps = {
-        color: currentType.subTitleColor,
+        color: currentType.subTitleColor
     };
 
     const indicatorIconProps: {
@@ -258,31 +258,29 @@ const Switch: FC<ISwitchProps> = ({
         </View>;
     };
 
-    return (
-        <TouchableOpacity
-            {...props}
-            onPress={isDisabled || isLoading ? () => null : onPress ? onPress : undefined}
-            disabled={isDisabled || isLoading || !onPress}
-            style={[
-                style,
-                stylesheet.container,
-                containerDynamicStyle
-            ]}
-            {...Platform.select({
-                web: {
-                    dataSet: {
-                        disablePressableDownEffect: "true"
-                    }
-                },
-                default: {}
-            })}
-        >
-            {isFlip ? null : renderIndicatorContainer()}
+    return <TouchableOpacity
+        {...props}
+        onPress={isDisabled || isLoading ? () => null : onPress ? onPress : undefined}
+        disabled={isDisabled || isLoading || !onPress}
+        style={[
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ]}
+        {...Platform.select({
+            web: {
+                dataSet: {
+                    disablePressableDownEffect: "true"
+                }
+            },
+            default: {}
+        })}
+    >
+        {isFlip ? null : renderIndicatorContainer()}
 
-            {renderContent()}
+        {renderContent()}
 
-            {isFlip ? renderIndicatorContainer() : null}
-        </TouchableOpacity>
-    );
+        {isFlip ? renderIndicatorContainer() : null}
+    </TouchableOpacity>;
 };
 export default Switch;

src/context/embeddedMenu.tsx

@@ -2,6 +2,7 @@ import {
     type ReactNode
 } from "react";
 import {
+    StyleSheet,
     View
 } from "react-native";
 import {
@@ -16,6 +17,13 @@ import {
     uuid
 } from "../utils";
 
+const stylesheet = StyleSheet.create({
+    wrapper: {
+        flexDirection: "row",
+        flex: 1
+    }
+});
+
 class NCoreUIKitEmbeddedMenu extends NCoreContext<EmbeddedMenuContextType, ConfigType<EmbeddedMenuContextType>> {
     constructor({
         data = []
@@ -267,12 +275,7 @@ class NCoreUIKitEmbeddedMenu extends NCoreContext<EmbeddedMenuContextType, Confi
 
             if(children) {
                 return <View
-                    style={[
-                        {
-                            flexDirection: "row",
-                            flex: 1
-                        }
-                    ]}
+                    style={stylesheet.wrapper}
                 >
                     {renderMenu({
                         currentMenu

src/context/localize.tsx

@@ -91,11 +91,9 @@ class NCoreUIKitLocalize<T extends LocalizeType> extends NCoreContext<LocalizeCo
         const defaultState: LocalizeContextStateType = {
             localeKeys: defaultLocalesData.map(lDI => lDI.locale) as Array<keyof NCoreUIKit.LocaleKey>,
             activeLocale: defaultLocale.locale as keyof NCoreUIKit.LocaleKey,
-            // localizeWithObject: this.localizeWithObject,
             translations: defaultLocale.translations,
             rruleConfig: defaultLocale.rruleConfig,
             isRTL: defaultLocale.isRTL
-            // localize: this.localize
         };
 
         if(!this.projectLocales || (this.projectLocales && !this.projectLocales.length)) {
@@ -118,13 +116,11 @@ class NCoreUIKitLocalize<T extends LocalizeType> extends NCoreContext<LocalizeCo
         const newState: LocalizeContextStateType = {
             activeLocale: currentProjectLocale.locale as keyof NCoreUIKit.LocaleKey,
             localeKeys: dLKeys as Array<keyof NCoreUIKit.LocaleKey>,
-            // localizeWithObject: this.localizeWithObject,
             rruleConfig: {
                 ...defaultLocale.rruleConfig,
                 ...currentProjectLocale.rruleConfig
             },
             isRTL: currentProjectLocale.isRTL,
-            // localize: this.localize,
             translations: {
                 ...defaultLocale.translations,
                 ...currentProjectLocale.translations