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

package/CHANGELOG.md

@@ -0,0 +1,33 @@
+# 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-3807748:** fix checkbox android native crash ([f358872](https://github.com/Pxs-Corporate/react-native-lavender/commit/f3588725a8a7440722b6fc13a5586da2da758ea0))
+
+### Features
+
+- **BCRI-000000:** adding testids on cells ([1e5f002](https://github.com/Pxs-Corporate/react-native-lavender/commit/1e5f00201a84516c1a6fe3fe5c04032204c32ae8))
+- **BCRI-3660857:** cell components ([af9e45c](https://github.com/Pxs-Corporate/react-native-lavender/commit/af9e45cefc20d08d2338380ff4cd8cd6851abe24))
+- **BCRI-4002610:** update icon handling and remove deprecated font references ([4399fe4](https://github.com/Pxs-Corporate/react-native-lavender/commit/4399fe4bff06aa70f5c29705fcc89d5243b0e3e7))
+- **BCRI-4149480:** cell background color ([acf6722](https://github.com/Pxs-Corporate/react-native-lavender/commit/acf67226cf17589647163886f64f77cd18a87959))
+- **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))
+- **BCRI-4210372:** fix bad version numbers ([bc6a8ba](https://github.com/Pxs-Corporate/react-native-lavender/commit/bc6a8ba48c15347442f2ac38dacae7ffba3d95eb))
+
+# (2025-08-13)
+
+### Bug Fixes
+
+- **BCRI-3807748:** fix checkbox android native crash ([f358872](https://github.com/Pxs-Corporate/react-native-lavender/commit/f3588725a8a7440722b6fc13a5586da2da758ea0))
+
+### Features
+
+- **BCRI-000000:** adding testids on cells ([1e5f002](https://github.com/Pxs-Corporate/react-native-lavender/commit/1e5f00201a84516c1a6fe3fe5c04032204c32ae8))
+- **BCRI-3660857:** cell components ([af9e45c](https://github.com/Pxs-Corporate/react-native-lavender/commit/af9e45cefc20d08d2338380ff4cd8cd6851abe24))
+- **BCRI-4002610:** update icon handling and remove deprecated font references ([4399fe4](https://github.com/Pxs-Corporate/react-native-lavender/commit/4399fe4bff06aa70f5c29705fcc89d5243b0e3e7))
+- **BCRI-4149480:** cell background color ([acf6722](https://github.com/Pxs-Corporate/react-native-lavender/commit/acf67226cf17589647163886f64f77cd18a87959))
+- **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))

package/dist/PxCell.d.ts

@@ -0,0 +1,21 @@
+import { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
+import React, { ReactElement, ReactNode } from 'react';
+export interface IPxCell extends AccessibilityProps {
+    label: string;
+    description?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    backgroundColor?: 'ActionNeutral' | 'ActionNeutralBare';
+    onPress?: () => void;
+    prefix?: ReactNode;
+    suffix?: ReactElement;
+    suffixLabel?: string;
+    suffixDescription?: string;
+    type?: 'naked' | 'contained';
+    testID?: string;
+    disabled?: boolean;
+    separator?: boolean;
+    labelsAccessibilityProps?: AccessibilityProps;
+    borderRadius?: 'top' | 'bottom' | 'all' | 'none';
+}
+export declare function PxCell({ label, description, onPress, backgroundColor, containerStyle, prefix, suffix, suffixLabel, suffixDescription, testID, type, accessible, accessibilityRole, accessibilityLabel, accessibilityHint, disabled, labelsAccessibilityProps, borderRadius, separator, }: IPxCell): React.JSX.Element;
+//# sourceMappingURL=PxCell.d.ts.map

package/dist/PxCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxCell.d.ts","sourceRoot":"","sources":["../src/PxCell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,OAAQ,SAAQ,kBAAkB;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,eAAe,GAAG,mBAAmB,CAAC;IACxD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB,CAAC,EAAE,kBAAkB,CAAC;IAC9C,YAAY,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;CAClD;AAID,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,WAAW,EACX,OAAO,EACP,eAAe,EACf,cAAc,EACd,MAAM,EACN,MAAM,EACN,WAAW,EACX,iBAAiB,EACjB,MAAM,EACN,IAAc,EACd,UAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,EACR,wBAAwB,EACxB,YAAqB,EACrB,SAAiB,GAClB,EAAE,OAAO,qBA6HT"}

package/dist/PxCellCheckbox.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IPxCell } from './PxCell';
+export declare function PxCellCheckbox(props: IPxCell & {
+    checked: boolean;
+    side?: 'left' | 'right';
+}): React.JSX.Element;
+//# sourceMappingURL=PxCellCheckbox.d.ts.map

package/dist/PxCellCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxCellCheckbox.d.ts","sourceRoot":"","sources":["../src/PxCellCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAU,MAAM,UAAU,CAAC;AAI3C,wBAAgB,cAAc,CAC5B,KAAK,EAAE,OAAO,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,qBAsD/D"}

package/dist/PxCellRadio.d.ts

@@ -0,0 +1,7 @@
+import { IPxCell } from './PxCell';
+import React from 'react';
+export declare function PxCellRadio(props: IPxCell & {
+    checked: boolean;
+    side?: 'left' | 'right';
+}): React.JSX.Element;
+//# sourceMappingURL=PxCellRadio.d.ts.map

package/dist/PxCellRadio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxCellRadio.d.ts","sourceRoot":"","sources":["../src/PxCellRadio.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAU,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,WAAW,CACzB,KAAK,EAAE,OAAO,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,qBA4C/D"}

package/dist/PxEntrypoint.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IPxCell } from './PxCell';
+export declare function PxEntrypoint(props: IPxCell): React.JSX.Element;
+//# sourceMappingURL=PxEntrypoint.d.ts.map

package/dist/PxEntrypoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxEntrypoint.d.ts","sourceRoot":"","sources":["../src/PxEntrypoint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAU,MAAM,UAAU,CAAC;AAG3C,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,qBAQ1C"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './PxCell';
+export * from './PxEntrypoint';
+export * from './PxCellCheckbox';
+export * from './PxCellRadio';
+//# 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;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@proximus/lavender-cells-native",
+  "version": "0.1.0-alpha.0",
+  "description": "Lavender cell list component",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "prepublish": "yarn clean && yarn build",
+    "build": "npx tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "@proximus/lavender-checkbox-native": "workspace:*",
+    "@proximus/lavender-common-native": "workspace:*",
+    "@proximus/lavender-icon-native": "workspace:*",
+    "@proximus/lavender-radio-native": "workspace:*",
+    "@proximus/lavender-separator-native": "workspace:*",
+    "@proximus/lavender-styling-native": "workspace:*",
+    "@proximus/lavender-texts-native": "workspace:*"
+  },
+  "devDependencies": {
+    "@proximus/lavender-checkbox-native": "0.1.0-alpha.0",
+    "@proximus/lavender-common-native": "0.1.0-alpha.0",
+    "@proximus/lavender-icon-native": "0.1.0-alpha.0",
+    "@proximus/lavender-radio-native": "0.1.0-alpha.0",
+    "@proximus/lavender-separator-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": "27525289a448a6e4f3c2d36a88b9dc54d0f15fbf"
+}

package/src/PxCell.tsx

@@ -0,0 +1,199 @@
+import {
+  AccessibilityProps,
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import { Body, Header } from '@proximus/lavender-texts-native';
+import { PxSeparator } from '@proximus/lavender-separator-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+import React, { ReactElement, ReactNode } from 'react';
+
+export interface IPxCell extends AccessibilityProps {
+  label: string;
+  description?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  backgroundColor?: 'ActionNeutral' | 'ActionNeutralBare';
+  onPress?: () => void;
+  prefix?: ReactNode;
+  suffix?: ReactElement;
+  suffixLabel?: string;
+  suffixDescription?: string;
+  type?: 'naked' | 'contained';
+  testID?: string;
+  disabled?: boolean;
+  separator?: boolean;
+  labelsAccessibilityProps?: AccessibilityProps;
+  borderRadius?: 'top' | 'bottom' | 'all' | 'none';
+}
+
+const BORDER_RADIUS = 8;
+
+export function PxCell({
+  label,
+  description,
+  onPress,
+  backgroundColor,
+  containerStyle,
+  prefix,
+  suffix,
+  suffixLabel,
+  suffixDescription,
+  testID,
+  type = 'naked',
+  accessible = true,
+  accessibilityRole,
+  accessibilityLabel,
+  accessibilityHint,
+  disabled,
+  labelsAccessibilityProps,
+  borderRadius = 'none',
+  separator = false,
+}: IPxCell) {
+  const { theme } = useTheme();
+
+  return (
+    <TouchableOpacity
+      {...a11y({
+        accessibilityRole,
+        accessible,
+        importantForAccessibility: accessible ? 'yes' : 'no',
+        accessibilityLabel: accessibilityLabel || label,
+        accessibilityHint: accessibilityHint || description,
+      })}
+      disabled={disabled || !onPress}
+      onPress={onPress}
+      {...e2eID(testID)}
+    >
+      <View
+        style={[
+          styles.container,
+          containerStyle,
+          {
+            backgroundColor:
+              type === 'naked'
+                ? 'transparent'
+                : backgroundColor
+                  ? theme.t(`BackgroundColor${backgroundColor}Default`)
+                  : theme.t('BackgroundColorActionNeutralDefault'),
+            borderTopLeftRadius: ['top', 'all'].includes(borderRadius)
+              ? BORDER_RADIUS
+              : 0,
+            borderTopEndRadius: ['top', 'all'].includes(borderRadius)
+              ? BORDER_RADIUS
+              : 0,
+            borderBottomLeftRadius: ['bottom', 'all'].includes(borderRadius)
+              ? BORDER_RADIUS
+              : 0,
+            borderBottomRightRadius: ['bottom', 'all'].includes(borderRadius)
+              ? BORDER_RADIUS
+              : 0,
+            borderRadius: 20,
+          },
+          disabled && {
+            backgroundColor: theme.t('BackgroundColorActionDisabledDefault'),
+          },
+        ]}
+      >
+        {!!prefix && <View style={styles.leftComponent}>{prefix}</View>}
+        <View style={styles.content}>
+          <Header
+            {...a11y({
+              ...labelsAccessibilityProps,
+              accessible,
+              importantForAccessibility: accessible ? 'yes' : 'no',
+            })}
+            style={[
+              {
+                fontSize: theme.t('TextSizeLabelLMobile').number,
+                color: theme.t('TextColorHeadingNeutralDefault'),
+              },
+            ]}
+            disabled={disabled}
+          >
+            {label}
+          </Header>
+          {description && (
+            <Body
+              {...a11y({
+                ...labelsAccessibilityProps,
+                accessible,
+                importantForAccessibility: accessible ? 'yes' : 'no',
+              })}
+              {...e2eID(`${testID}_subTitle`)}
+              style={[
+                {
+                  fontSize: theme.t('TextSizeLabelMMobile').number,
+                  color: theme.t('TextColorHeadingNeutralDefault'),
+                },
+              ]}
+              disabled={disabled}
+            >
+              {description}
+            </Body>
+          )}
+        </View>
+        {suffixLabel && suffixDescription && (
+          <View style={styles.suffixLabelDescription}>
+            <Header
+              {...a11y({
+                ...labelsAccessibilityProps,
+                accessible,
+                importantForAccessibility: accessible ? 'yes' : 'no',
+              })}
+              style={{
+                textAlign: 'right',
+                fontSize: theme.t('TextSizeLabelLMobile').number,
+                color: theme.t('TextColorHeadingNeutralDefault'),
+              }}
+              disabled={disabled}
+            >
+              {suffixLabel}
+            </Header>
+            {description && (
+              <Body
+                {...a11y({
+                  ...labelsAccessibilityProps,
+                  accessible,
+                  importantForAccessibility: accessible ? 'yes' : 'no',
+                })}
+                style={{
+                  color: theme.t('TextColorHeadingNeutralDefault'),
+                  fontSize: theme.t('TextSizeLabelMMobile').number,
+                }}
+                {...e2eID(`${testID}_subTitle`)}
+                disabled={disabled}
+              >
+                {suffixDescription}
+              </Body>
+            )}
+          </View>
+        )}
+        {suffix}
+      </View>
+      {separator && <PxSeparator />}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    padding: 16,
+    alignItems: 'center',
+    gap: 16,
+  },
+  content: {
+    flex: 1,
+  },
+  leftComponent: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  suffixLabelDescription: {
+    alignSelf: 'flex-end',
+  },
+});

package/src/PxCellCheckbox.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { IPxCell, PxCell } from './PxCell';
+import { PxCheckBox } from '@proximus/lavender-checkbox-native';
+import { Platform, StyleSheet, View } from 'react-native';
+
+export function PxCellCheckbox(
+  props: IPxCell & { checked: boolean; side?: 'left' | 'right' }
+) {
+  const { side = 'right' } = props;
+  const checkbox = (
+    <PxCheckBox
+      disabled={props.disabled}
+      accessibilityLabel={props.label}
+      accessibilityHint={props.description}
+      boxType={'square'}
+      wrapperStyle={{
+        height: 32,
+        justifyContent: 'center',
+      }}
+      checkboxStyle={{
+        // Not applied on Android because of a weird visual bug
+        ...(Platform.OS === 'ios' && {
+          width: 16,
+          height: 16,
+        }),
+        backgroundColor: 'transparent',
+      }}
+      checked={props.checked}
+      onChange={props.onPress}
+      testID={props.testID}
+    />
+  );
+
+  return (
+    <PxCell
+      {...props}
+      onPress={undefined} // override onPress to prevent double tap
+      accessible={false}
+      prefix={
+        side === 'left' ? (
+          <View style={styles.prefix}>
+            {checkbox}
+            {props.prefix}
+          </View>
+        ) : (
+          props.prefix
+        )
+      }
+      suffix={
+        side === 'right' ? (
+          <View style={styles.prefix}>
+            {props.suffix}
+            {checkbox}
+          </View>
+        ) : (
+          props.suffix
+        )
+      }
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  prefix: {
+    flexDirection: 'row',
+    gap: 16,
+    alignItems: 'center',
+  },
+});

package/src/PxCellRadio.tsx

@@ -0,0 +1,59 @@
+import { PxRadioButton } from '@proximus/lavender-radio-native';
+import { IPxCell, PxCell } from './PxCell';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+export function PxCellRadio(
+  props: IPxCell & { checked: boolean; side?: 'left' | 'right' }
+) {
+  const { side = 'right' } = props;
+
+  const radioButton = (
+    <PxRadioButton
+      size={20}
+      accessibilityLabel={props.label}
+      accessibilityHint={props.description}
+      labelA11y={{
+        accessible: false,
+      }}
+      checked={props.checked}
+      onPress={props.onPress}
+      testID={props.testID}
+    />
+  );
+
+  return (
+    <PxCell
+      {...props}
+      accessible={false}
+      prefix={
+        side === 'left' ? (
+          <View style={styles.prefix}>
+            {radioButton}
+            {props.prefix}
+          </View>
+        ) : (
+          props.prefix
+        )
+      }
+      suffix={
+        side === 'right' ? (
+          <View style={styles.prefix}>
+            {props.suffix}
+            {radioButton}
+          </View>
+        ) : (
+          props.suffix
+        )
+      }
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  prefix: {
+    flexDirection: 'row',
+    gap: 16,
+    alignItems: 'center',
+  },
+});

package/src/PxEntrypoint.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { IPxCell, PxCell } from './PxCell';
+import { PxIcon } from '@proximus/lavender-icon-native';
+
+export function PxEntrypoint(props: IPxCell) {
+  return (
+    <PxCell
+      {...props}
+      accessibilityRole={'button'}
+      suffix={<PxIcon name={'chevron_right'} />}
+    />
+  );
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './PxCell';
+export * from './PxEntrypoint';
+export * from './PxCellCheckbox';
+export * from './PxCellRadio';

package/tsconfig.json

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