npm - @proximus/lavender-topnavigation-native - Versions diffs - 0.1.0-alpha.3 → 0.1.0-beta.0 - Mend

@proximus/lavender-topnavigation-native 0.1.0-alpha.3 → 0.1.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/PxTopNavigation.d.ts.map +1 -1
package/dist/PxTopNavigation.js +133 -0
package/package.json +10 -30
package/CHANGELOG.md +0 -37
package/src/PxTopNavigation.tsx +0 -243
package/tsconfig.json +0 -8
/package/{src/index.ts → dist/index.js} +0 -0

package/dist/PxTopNavigation.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
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;AAyBnD,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;~~AA8HD~~,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAqB1D"}
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;AAyBnD,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;AAiID,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAqB1D"}

package/dist/PxTopNavigation.js ADDED Viewed

@@ -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, e2eID } 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, testId, }) {
+    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',
+                }), ...(testId && e2eID(`${testId}-topnav-title`)) }, [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',
+                        },
+                    ], ...(testId && e2eID(`${testId}-topnav-description`)) }, 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: 'M', deprecatedColor: 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/package.json CHANGED Viewed

@@ -1,41 +1,21 @@
 {
   "name": "@proximus/lavender-topnavigation-native",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-beta.0",
   "description": "Lavender react native top navigation component",
   "license": "MIT",
-  "main": "src/index.ts",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
   "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:*",
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-icon-native": "*",
+    "@proximus/lavender-styling-native": "*",
+    "@proximus/lavender-texts-native": "*",
     "react-native-gesture-handler": "*"
   },
-  "devDependencies": {
-    "@proximus/lavender-common-native": "0.1.0-alpha.4",
-    "@proximus/lavender-icon-native": "0.1.0-alpha.4",
-    "@proximus/lavender-styling-native": "0.1.0-alpha.3",
-    "@proximus/lavender-texts-native": "0.1.0-alpha.4"
-  },
   "publishConfig": {
     "access": "public"
-  },
-  "lerna": {
-    "command": {
-      "publish": {
-        "assets": [
-          "dist",
-          "src",
-          "package.json"
-        ]
-      }
-    }
-  },
-  "gitHead": "6e9252a716a08ededdfbfd6f5b1db70ab21e026e"
+  }
 }

package/CHANGELOG.md DELETED Viewed

@@ -1,37 +0,0 @@
-# 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.3](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-topnavigation-native@0.1.0-alpha.2...@proximus/lavender-topnavigation-native@0.1.0-alpha.3) (2025-09-19)
-**Note:** Version bump only for package @proximus/lavender-topnavigation-native
-# [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)
-**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)
-### 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/src/PxTopNavigation.tsx DELETED Viewed

@@ -1,243 +0,0 @@
-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 { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { PxIcon } from '@proximus/lavender-icon-native';
-import { useTheme } from '@proximus/lavender-styling-native';
-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 false;
-}
-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,
-  description,
-  prefix,
-  descriptionContent,
-  centerTitle = false,
-}: PxTopNavigationProps) {
-  const { theme } = useTheme();
-  return (
-    <View style={styles.leftComponent}>
-      {prefix}
-      <View style={[styles.title, { flex: 1 }]}>
-        <TextHeader
-          ellipsizeMode={'tail'}
-          numberOfLines={1}
-          style={[
-            styles.textHeader,
-            {
-              color: titleColor || theme.t('ColorTextBrandInverted'),
-              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 || theme.t('ColorTextBrandInverted'),
-                  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);
-  const { theme } = useTheme();
-  useEffect(() => {
-    setIsWhiteBackground(
-      isWhiteColor(colors?.[0]) && isWhiteColor(colors?.[1])
-    );
-  }, [colors]);
-  return (
-    <View
-      style={[
-        styles.search,
-        {
-          ...(isWhiteBackground
-            ? {
-                backgroundColor: theme.t(
-                  'ColorBackgroundContainerDefaultDefault'
-                ),
-                borderColor: theme.t('ColorBorderNeutralDefault'),
-                borderWidth: theme.t('SizeBorderS').number,
-              }
-            : {
-                backgroundColor: theme.t(
-                  'ColorBackgroundContainerLightDefault'
-                ),
-              }),
-        },
-      ]}
-    >
-      <PxIcon
-        name={'search'}
-        size={24}
-        color={
-          isWhiteBackground || !colors?.[0]
-            ? theme.t('ColorIconBrandDefault')
-            : (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: {
-    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/tsconfig.json DELETED Viewed

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

/package/{src/index.ts → dist/index.js} RENAMED Viewed

File without changes