@proximus/lavender-topnavigation-native 0.1.0-alpha.0

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Change Log
+
+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.0 (2025-08-14)
+
+### 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))

package/dist/PxTopNavigation.d.ts

@@ -0,0 +1,19 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+export interface PxTopNavigationProps {
+    title: string;
+    titleColor?: string;
+    centerTitle?: boolean;
+    colors?: (string | number)[];
+    description?: string;
+    testId?: string;
+    wrapperStyle?: StyleProp<ViewStyle>;
+    menuElement?: React.ReactNode;
+    searchElement?: React.ReactNode;
+    accessibilityLabel?: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    descriptionContent?: React.ReactNode;
+}
+export declare function PxTopNavigation(props: PxTopNavigationProps): React.JSX.Element;
+//# sourceMappingURL=PxTopNavigation.d.ts.map

package/dist/PxTopNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxTopNavigation.d.ts","sourceRoot":"","sources":["../src/PxTopNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAA8B,MAAM,OAAO,CAAC;AA+BnD,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAsHD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAqB1D"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { PxTopNavigation } from './PxTopNavigation';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@proximus/lavender-topnavigation-native",
+  "version": "0.1.0-alpha.0",
+  "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",
+    "build": "npx tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "@proximus/lavender-common-native": "workspace:*",
+    "@proximus/lavender-icon-native": "workspace:*",
+    "@proximus/lavender-styling-native": "workspace:*",
+    "@proximus/lavender-texts-native": "workspace:*",
+    "react-native-gesture-handler": "*"
+  },
+  "devDependencies": {
+    "@proximus/lavender-common-native": "0.1.0-alpha.1",
+    "@proximus/lavender-icon-native": "0.1.0-alpha.1",
+    "@proximus/lavender-styling-native": "0.1.0-alpha.1",
+    "@proximus/lavender-texts-native": "0.1.0-alpha.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "dist",
+          "src",
+          "package.json"
+        ]
+      }
+    }
+  },
+  "gitHead": "7883d62b0246c39143275a6759cc287e54caeb40"
+}

package/src/PxTopNavigation.tsx

@@ -0,0 +1,244 @@
+import {
+  ScrollView,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} 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 { Colors } from '@proximus/lavender-styling-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { PxIcon } from '@proximus/lavender-icon-native';
+import {
+  BackgroundColorActionNeutralDefault,
+  BorderColorActionNeutralDefault,
+  IconColorActionBrandDefault,
+  BorderSizeM,
+} from '@proximus/lavender-styling/dist/js/proximus/themesTokens.js';
+
+function isWhiteColor(color: string | number | undefined): boolean {
+  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 color === Colors.v8_1.white;
+}
+
+export interface PxTopNavigationProps {
+  title: string;
+  titleColor?: string;
+  centerTitle?: boolean;
+  colors?: (string | number)[];
+  description?: string;
+  testId?: string;
+  wrapperStyle?: StyleProp<ViewStyle>;
+  menuElement?: React.ReactNode;
+  searchElement?: React.ReactNode;
+  accessibilityLabel?: string;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  descriptionContent?: React.ReactNode;
+}
+
+function LeftComponent({
+  title,
+  titleColor = Colors.v8_1.white,
+  description,
+  prefix,
+  descriptionContent,
+  centerTitle = false,
+}: PxTopNavigationProps) {
+  return (
+    <View style={styles.leftComponent}>
+      {prefix}
+      <View style={[styles.title, { flex: 1 }]}>
+        <TextHeader
+          ellipsizeMode={'tail'}
+          numberOfLines={1}
+          style={[
+            styles.textHeader,
+            {
+              color: titleColor,
+              textAlign: centerTitle ? 'center' : 'left',
+            },
+          ]}
+          {...a11y({
+            accessibilityRole: 'header',
+          })}
+        >
+          {[title]}
+        </TextHeader>
+        {(descriptionContent && (
+          <View
+            style={{
+              alignItems: 'flex-start',
+            }}
+          >
+            {descriptionContent}
+          </View>
+        )) ||
+          (description && (
+            <Body
+              ellipsizeMode={'tail'}
+              numberOfLines={1}
+              style={[
+                styles.description,
+                {
+                  color: titleColor,
+                  textAlign: centerTitle ? 'center' : 'left',
+                },
+              ]}
+            >
+              {description}
+            </Body>
+          ))}
+      </View>
+    </View>
+  );
+}
+
+function RightComponent({ suffix }: PxTopNavigationProps) {
+  return <View style={styles.rightComponent}>{suffix}</View>;
+}
+
+function Menu({ menuElement }: PxTopNavigationProps) {
+  return (
+    <ScrollView
+      horizontal={true}
+      contentContainerStyle={styles.menu}
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+    >
+      {menuElement}
+    </ScrollView>
+  );
+}
+
+function Search({ searchElement, colors }: PxTopNavigationProps) {
+  const [isWhiteBackground, setIsWhiteBackground] = useState(false);
+
+  useEffect(() => {
+    setIsWhiteBackground(
+      isWhiteColor(colors?.[0]) && isWhiteColor(colors?.[1])
+    );
+  }, [colors]);
+  return (
+    <View
+      style={[
+        styles.search,
+        {
+          ...(isWhiteBackground
+            ? { backgroundColor: BackgroundColorActionNeutralDefault }
+            : {}),
+          ...(isWhiteBackground
+            ? {
+                borderColor: BorderColorActionNeutralDefault,
+                borderWidth: BorderSizeM.number,
+              }
+            : {}),
+        },
+      ]}
+    >
+      <PxIcon
+        name={'search'}
+        size={24}
+        color={
+          isWhiteBackground || !colors?.[0]
+            ? IconColorActionBrandDefault
+            : (colors?.[0] as string)
+        }
+        accessible={false}
+        accessibilityElementsHidden={true}
+        importantForAccessibility={'no-hide-descendants'}
+      />
+      <View style={{ flex: 1, marginLeft: 8 }}>{searchElement}</View>
+    </View>
+  );
+}
+
+export function PxTopNavigation(props: PxTopNavigationProps) {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <LinearGradient
+      colors={props.colors || ['#5C2D91', '#9F3ACE']}
+      start={{ x: 0, y: 1.0 }}
+      end={{ x: 1.0, y: 1.0 }}
+      style={props.wrapperStyle as any}
+    >
+      <View
+        style={[
+          { paddingBottom: 8, paddingTop: insets.top }, // Horizontal padding is added in the children
+        ]}
+      >
+        <Header {...props} />
+        {props.menuElement && <Menu {...props} />}
+        {props.searchElement && <Search {...props} />}
+      </View>
+    </LinearGradient>
+  );
+}
+
+function Header(props: PxTopNavigationProps) {
+  return (
+    <View style={[styles.container]}>
+      <LeftComponent {...props} />
+      <RightComponent {...props} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    paddingHorizontal: 8,
+  },
+  title: {
+    margin: 8,
+  },
+  textHeader: {
+    color: Colors.v8_1.white,
+    fontSize: 16,
+  },
+  description: {
+    color: Colors.v8_1.white,
+    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,
+    backgroundColor: Colors.v8_1.white,
+    borderRadius: 12,
+    marginVertical: 8,
+    marginHorizontal: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

package/src/index.ts

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

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.npm.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src","../../../lib.d.ts"],
+  "exclude": ["dist", "node_modules", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}