@proximus/lavender-topnavigation-native 0.1.0-alpha.2 → 0.1.0-alpha.5

package/CHANGELOG.md

@@ -3,31 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [0.1.0-alpha.2](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-topnavigation-native@0.1.0-alpha.1...@proximus/lavender-topnavigation-native@0.1.0-alpha.2) (2025-09-12)
+# [0.1.0-alpha.5](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-topnavigation-native@0.1.0-alpha.4...@proximus/lavender-topnavigation-native@0.1.0-alpha.5) (2025-09-26)
 
 **Note:** Version bump only for package @proximus/lavender-topnavigation-native
 
-# [0.1.0-alpha.1](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-topnavigation-native@0.1.0-alpha.0...@proximus/lavender-topnavigation-native@0.1.0-alpha.1) (2025-09-05)
-
-### Features
-
-- **BCRI-4279213:** update token architecture and component styles ([#18](https://github.com/Pxs-Corporate/react-native-lavender/issues/18)) ([2fabf41](https://github.com/Pxs-Corporate/react-native-lavender/commit/2fabf416ce069e9756daa868c3012181db87e7f5))
-
-# 0.1.0-alpha.0 (2025-08-14)
+# [0.1.0-alpha.4](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-topnavigation-native@0.1.0-alpha.3...@proximus/lavender-topnavigation-native@0.1.0-alpha.4) (2025-09-25)
 
 ### Bug Fixes
 
-- **BCRI-3998258:** long title-description truncation ([d3cde41](https://github.com/Pxs-Corporate/react-native-lavender/commit/d3cde41c876c8c1fb38e98773b7a5c78635bb9ce))
-- **BCRI-4210372:** fix types field in modules ([68ac126](https://github.com/Pxs-Corporate/react-native-lavender/commit/68ac12657112473ae9e0e683076b1d9172be9ce6))
-- **BCRI-4210372:** topnavigation version number ([675d1c3](https://github.com/Pxs-Corporate/react-native-lavender/commit/675d1c3371d3d9505a3df5c005fc7bd47850654b))
-
-### Features
-
-- **BCRI-000000:** remove default E2E on DEV env build for all components ([a5d27bf](https://github.com/Pxs-Corporate/react-native-lavender/commit/a5d27bfaaebf5b75f3160f31c64b590b7bd00b93))
-- **BCRI-3619796:** top navigation bar ([0b2bcae](https://github.com/Pxs-Corporate/react-native-lavender/commit/0b2bcaee7243b9f00f88e2b2fb97d86cf0cf5b77))
-- **BCRI-3651772:** top navigation module ([8be234c](https://github.com/Pxs-Corporate/react-native-lavender/commit/8be234c30f8a35093ff306b25512ebf1e10e75f2))
-- **BCRI-3660857:** cell components ([af9e45c](https://github.com/Pxs-Corporate/react-native-lavender/commit/af9e45cefc20d08d2338380ff4cd8cd6851abe24))
-- **BCRI-3713127:** demo app ([6907714](https://github.com/Pxs-Corporate/react-native-lavender/commit/6907714ac2313813bf74657a72cf5cb10c99fec3))
-- **BCRI-4002610:** update icon handling and remove deprecated font references ([4399fe4](https://github.com/Pxs-Corporate/react-native-lavender/commit/4399fe4bff06aa70f5c29705fcc89d5243b0e3e7))
-- **BCRI-4002610:** update package versions and add new dependencies for styling and icon handling ([bd36e12](https://github.com/Pxs-Corporate/react-native-lavender/commit/bd36e120c36fd33602f441ceed5f41f15f81f0ea))
-- **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))
+- **BCRI-000000:** no free space on gh runner during build ([#27](https://github.com/Pxs-Corporate/react-native-lavender/issues/27)) ([a7c8604](https://github.com/Pxs-Corporate/react-native-lavender/commit/a7c86043b5cefcb10fd768d449c5718fbabe87ec))

package/dist/PxTopNavigation.js

@@ -0,0 +1,133 @@
+import { ScrollView, StyleSheet, View, } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import LinearGradient from 'react-native-linear-gradient';
+import { a11y } from '@proximus/lavender-common-native';
+import { Body, Header as TextHeader } from '@proximus/lavender-texts-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { PxIcon } from '@proximus/lavender-icon-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+function isWhiteColor(color) {
+    if (!color)
+        return false;
+    const str = color.toString().trim();
+    // Hex: #fff, #ffffff, fff, ffffff (case-insensitive)
+    if (/^#?fff(f)?(f)?$/i.test(str.replace(/^#/, '')))
+        return true;
+    // RGB: rgb(255,255,255) or with spaces
+    if (/^rgb\(\s*255\s*,\s*255\s*,\s*255\s*\)$/i.test(str))
+        return true;
+    // RGBA: rgba(255,255,255,1) or with spaces, alpha 1 or 1.0 or 100%
+    if (/^rgba\(\s*255\s*,\s*255\s*,\s*255\s*,\s*(1(\.0+)?|100%|1\.0+)\s*\)$/i.test(str))
+        return true;
+    return false;
+}
+function LeftComponent({ title, titleColor, description, prefix, descriptionContent, centerTitle = false, }) {
+    const { theme } = useTheme();
+    return (React.createElement(View, { style: styles.leftComponent },
+        prefix,
+        React.createElement(View, { style: [styles.title, { flex: 1 }] },
+            React.createElement(TextHeader, { ellipsizeMode: 'tail', numberOfLines: 1, style: [
+                    styles.textHeader,
+                    {
+                        color: titleColor || theme.t('ColorTextBrandInverted'),
+                        textAlign: centerTitle ? 'center' : 'left',
+                    },
+                ], ...a11y({
+                    accessibilityRole: 'header',
+                }) }, [title]),
+            (descriptionContent && (React.createElement(View, { style: {
+                    alignItems: 'flex-start',
+                } }, descriptionContent))) ||
+                (description && (React.createElement(Body, { ellipsizeMode: 'tail', numberOfLines: 1, style: [
+                        styles.description,
+                        {
+                            color: titleColor || theme.t('ColorTextBrandInverted'),
+                            textAlign: centerTitle ? 'center' : 'left',
+                        },
+                    ] }, description))))));
+}
+function RightComponent({ suffix }) {
+    return React.createElement(View, { style: styles.rightComponent }, suffix);
+}
+function Menu({ menuElement }) {
+    return (React.createElement(ScrollView, { horizontal: true, contentContainerStyle: styles.menu, showsHorizontalScrollIndicator: false, showsVerticalScrollIndicator: false }, menuElement));
+}
+function Search({ searchElement, colors }) {
+    const [isWhiteBackground, setIsWhiteBackground] = useState(false);
+    const { theme } = useTheme();
+    useEffect(() => {
+        setIsWhiteBackground(isWhiteColor(colors?.[0]) && isWhiteColor(colors?.[1]));
+    }, [colors]);
+    return (React.createElement(View, { style: [
+            styles.search,
+            {
+                ...(isWhiteBackground
+                    ? {
+                        backgroundColor: theme.t('ColorBackgroundContainerDefaultDefault'),
+                        borderColor: theme.t('ColorBorderNeutralDefault'),
+                        borderWidth: theme.t('SizeBorderS').number,
+                    }
+                    : {
+                        backgroundColor: theme.t('ColorBackgroundContainerLightDefault'),
+                    }),
+            },
+        ] },
+        React.createElement(PxIcon, { name: 'search', size: 24, color: isWhiteBackground || !colors?.[0]
+                ? theme.t('ColorIconBrandDefault')
+                : colors?.[0], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: 'no-hide-descendants' }),
+        React.createElement(View, { style: { flex: 1, marginLeft: 8 } }, searchElement)));
+}
+export function PxTopNavigation(props) {
+    const insets = useSafeAreaInsets();
+    return (React.createElement(LinearGradient, { colors: props.colors || ['#5C2D91', '#9F3ACE'], start: { x: 0, y: 1.0 }, end: { x: 1.0, y: 1.0 }, style: props.wrapperStyle },
+        React.createElement(View, { style: [
+                { paddingBottom: 8, paddingTop: insets.top }, // Horizontal padding is added in the children
+            ] },
+            React.createElement(Header, { ...props }),
+            props.menuElement && React.createElement(Menu, { ...props }),
+            props.searchElement && React.createElement(Search, { ...props }))));
+}
+function Header(props) {
+    return (React.createElement(View, { style: [styles.container] },
+        React.createElement(LeftComponent, { ...props }),
+        React.createElement(RightComponent, { ...props })));
+}
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        paddingHorizontal: 8,
+    },
+    title: {
+        margin: 8,
+    },
+    textHeader: {
+        fontSize: 16,
+    },
+    description: {
+        fontSize: 12,
+    },
+    leftComponent: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+    },
+    rightComponent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    menu: {
+        paddingBottom: 8,
+        paddingTop: 16,
+        paddingHorizontal: 16,
+        gap: 8,
+    },
+    search: {
+        padding: 11,
+        borderRadius: 12,
+        marginVertical: 8,
+        marginHorizontal: 16,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+});

package/dist/far/away/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@proximus/lavender-topnavigation-native",
+  "version": "0.1.0-alpha.5",
+  "description": "Lavender react native top navigation component",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "type": "module",
+  "peerDependencies": {
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-icon-native": "*",
+    "@proximus/lavender-styling-native": "*",
+    "@proximus/lavender-texts-native": "*",
+    "react-native-gesture-handler": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          {
+            "from": "dist/far/away/package.json",
+            "to": "."
+          },
+          "dist/*.js",
+          "dist/*.d.ts",
+          "dist/*.d.ts.map",
+          "src",
+          "package.json"
+        ]
+      }
+    }
+  },
+  "gitHead": "e50a17526561b3eafb159e36c737173956093e0d"
+}

package/dist/index.js

@@ -0,0 +1 @@
+export { PxTopNavigation } from './PxTopNavigation';

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@proximus/lavender-topnavigation-native",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.5",
   "description": "Lavender react native top navigation component",
   "license": "MIT",
   "main": "src/index.ts",
   "type": "module",
   "scripts": {
     "clean": "rm -rf dist",
-    "prepublish": "yarn clean && yarn build",
+    "transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
+    "prepublish": "yarn clean && yarn transform-package-json && yarn build",
     "build": "npx tsc -p tsconfig.json"
   },
   "peerDependencies": {
@@ -18,10 +19,10 @@
     "react-native-gesture-handler": "*"
   },
   "devDependencies": {
-    "@proximus/lavender-common-native": "0.1.0-alpha.3",
-    "@proximus/lavender-icon-native": "0.1.0-alpha.3",
-    "@proximus/lavender-styling-native": "0.1.0-alpha.2",
-    "@proximus/lavender-texts-native": "0.1.0-alpha.3"
+    "@proximus/lavender-common-native": "0.1.0-alpha.6",
+    "@proximus/lavender-icon-native": "0.1.0-alpha.6",
+    "@proximus/lavender-styling-native": "0.1.0-alpha.5",
+    "@proximus/lavender-texts-native": "0.1.0-alpha.6"
   },
   "publishConfig": {
     "access": "public"
@@ -30,12 +31,18 @@
     "command": {
       "publish": {
         "assets": [
-          "dist",
+          {
+            "from": "dist/far/away/package.json",
+            "to": "."
+          },
+          "dist/*.js",
+          "dist/*.d.ts",
+          "dist/*.d.ts.map",
           "src",
           "package.json"
         ]
       }
     }
   },
-  "gitHead": "6328f584529cb675f4a2ede8ad89f31e2b3c9ffb"
+  "gitHead": "e50a17526561b3eafb159e36c737173956093e0d"
 }

package/tsconfig.json

@@ -4,5 +4,5 @@
     "outDir": "dist"
   },
   "include": ["src","../../../lib.d.ts"],
-  "exclude": ["dist", "node_modules", "src/**/*.test.ts", "src/**/*.spec.ts"]
+  "exclude": ["dist", "node_modules", "src/**/*.spec.tsx", "src/**/*.spec.ts"]
 }