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

package/CHANGELOG.md

@@ -0,0 +1,22 @@
+# 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-13)
+
+### Bug Fixes
+
+- **BCRI-4026235:** icon fixes ([b5f0e58](https://github.com/Pxs-Corporate/react-native-lavender/commit/b5f0e58492a6bb654869e73b2f309d13037be76c))
+
+### Features
+
+- **BCRI-3660857:** cell components ([af9e45c](https://github.com/Pxs-Corporate/react-native-lavender/commit/af9e45cefc20d08d2338380ff4cd8cd6851abe24))
+- **BCRI-3689585:** icon module ([f13230d](https://github.com/Pxs-Corporate/react-native-lavender/commit/f13230d9c7643680089a0db2c69b96cd73ff246e))
+- **BCRI-3702949:** tertiary button ([4999cea](https://github.com/Pxs-Corporate/react-native-lavender/commit/4999cea4d7866084d0f8c1cba37070c6cdaa7601))
+- **BCRI-3702949:** tertiary button ([db24455](https://github.com/Pxs-Corporate/react-native-lavender/commit/db24455bd9687d80920be3e42c9e1fc14703a571))
+- **BCRI-3810979:** tile components ([46fc5c7](https://github.com/Pxs-Corporate/react-native-lavender/commit/46fc5c7a0ddff6c2db43fba0de9929626092f265))
+- **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-4026235:** fix mapping ([8fafee5](https://github.com/Pxs-Corporate/react-native-lavender/commit/8fafee5ab742dfbe8d1aeb139341ceb01371cd52))
+- **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))

package/dist/PxIcon.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { AccessibilityProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { IconName } from '@proximus/lavender-icon/dist/iconNames.js';
+export declare function convertIconName(oldName: string): string;
+interface PxIconProps extends AccessibilityProps {
+    name: IconName;
+    size?: number;
+    color?: string;
+    background?: boolean;
+    disabled?: boolean;
+    backgroundSize?: number;
+    style?: StyleProp<TextStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+}
+export declare function PxIcon({ name, size, color, style, disabled, containerStyle, ...accessibilityProps }: PxIconProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=PxIcon.d.ts.map

package/dist/PxIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxIcon.d.ts","sourceRoot":"","sources":["../src/PxIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,kBAAkB,EAClB,SAAS,EAET,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAI1E,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAuEvD;AAED,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC;AAID,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,cAAc,EACd,GAAG,kBAAkB,EACtB,EAAE,WAAW,qBAiBb"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PxIcon';
+//# 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,cAAc,UAAU,CAAC"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@proximus/lavender-icon-native",
+  "version": "0.1.0-alpha.0",
+  "description": "Lavender icon component",
+  "main": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npx tsc -p tsconfig.json",
+    "prepublish": "yarn clean && yarn build"
+  },
+  "peerDependencies": {
+    "@proximus/lavender-common-native": "workspace:*",
+    "@proximus/lavender-styling-native": "workspace:*",
+    "@proximus/lavender-texts-native": "workspace:*"
+  },
+  "devDependencies": {
+    "@proximus/lavender-common-native": "0.1.0-alpha.0",
+    "@proximus/lavender-styling-native": "0.1.0-alpha.0",
+    "@proximus/lavender-texts-native": "0.1.0-alpha.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "dist",
+          "src",
+          "package.json"
+        ]
+      }
+    }
+  },
+  "gitHead": "59b3436b786cc1c73b4a20a98b2a85139e75b72e"
+}

package/src/PxIcon.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import {
+  AccessibilityProps,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { createIconSet } from 'react-native-vector-icons';
+import LavenderGlyphMap from '@proximus/lavender-icon/dist/glyphmap.json';
+import type { IconName } from '@proximus/lavender-icon/dist/iconNames.js';
+
+import { Colors } from '@proximus/lavender-styling-native';
+
+export function convertIconName(oldName: string): string {
+  const iconMap: Record<string, string> = {
+    chevron_bottom: 'chevron_down',
+    chevron_top: 'chevron_up',
+    arrow_bottom: 'arrow_down',
+    arrow_top: 'arrow_up',
+    contacts: 'community',
+    bills: 'bill',
+    bin: 'trash',
+    chart: 'markets',
+    copy: 'copy_paste',
+    dash: 'dashboard',
+    dots: '3dots_vertical',
+    double_dots: 'handle',
+    download_arrow: 'download',
+    enjoy: 'gift',
+    equalizer: 'filter',
+    error: 'cross',
+    error_circle: 'cross_circle',
+    error_circle_filled: 'cross_fill',
+    eye_visible: 'eye',
+    eye_not_visible: 'eye_close',
+    grid_layout: 'dashboard',
+    help: 'question_mark',
+    help_circle: 'question_mark_circle',
+    history: 'clock_circle',
+    housing: 'buildings',
+    ia: 'ai',
+    info: 'information',
+    info_circle: 'information_circle',
+    info_circle_filled: 'information_fill',
+    link: 'links',
+    location_pin: 'location',
+    liveloc: 'current_location',
+    mail: 'enveloppe',
+    menu: 'burger_menu',
+    mic: 'microphone',
+    no_cellular: 'wifi_off',
+    no_router: 'bbox_off',
+    orders: 'euro_invoice',
+    parcel: 'pack',
+    pen: 'edit',
+    qrcode: 'qr_code',
+    reaload_onlince: 'euro_reload',
+    road_accident: 'car_crash',
+    router: 'bbox_connection',
+    shopping: 'caddy',
+    smart_home: 'home_wifi',
+    smartphone: 'mobile',
+    socket: 'electricity',
+    speed_test: 'speed',
+    star_filled: 'star_fill',
+    success: 'checkmark',
+    success_circle: 'checkmark_circle',
+    success_circle_filled: 'checkmark_fill',
+    support: 'headset',
+    switcher: 'switch',
+    thunder: 'bolt',
+    ticket: 'voucher',
+    truck: 'delivery_flexibility',
+    upload_arrow: 'upload',
+    user_avatar: 'profile_circle',
+    warning: 'exclamation_mark',
+    warning_circle: 'exclamation_mark_circle',
+    warning_circle_filled: 'exclamation_mark_fill',
+    wifi_no_signal: 'wifi_off',
+    wifi_signal_strong: 'wifi',
+    work_cone: 'roadwork',
+  };
+
+  return iconMap[oldName] ?? oldName;
+}
+
+interface PxIconProps extends AccessibilityProps {
+  name: IconName;
+  size?: number;
+  color?: string;
+  background?: boolean;
+  disabled?: boolean;
+  backgroundSize?: number;
+  style?: StyleProp<TextStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+const LavenderIcon = createIconSet(LavenderGlyphMap, 'lavender');
+
+export function PxIcon({
+  name,
+  size,
+  color,
+  style,
+  disabled,
+  containerStyle,
+  ...accessibilityProps
+}: PxIconProps) {
+  const iconColor = disabled
+    ? Colors.v8_1.shadesOfGrey.dark40
+    : color || Colors.v8_1.shadesOfPurple.purple;
+  const iconSize = size || 16;
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <LavenderIcon
+        name={name}
+        color={iconColor}
+        size={iconSize}
+        style={style as any}
+        {...accessibilityProps}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    textAlign: 'center',
+  },
+});

package/src/index.ts

@@ -0,0 +1 @@
+export * from './PxIcon';

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"]
+}