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

package/CHANGELOG.md

@@ -0,0 +1,31 @@
+# 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:** remove default E2E on DEV env build for all components ([a5d27bf](https://github.com/Pxs-Corporate/react-native-lavender/commit/a5d27bfaaebf5b75f3160f31c64b590b7bd00b93))
+- **BCRI-3651768:** selectable box module ([20a18ab](https://github.com/Pxs-Corporate/react-native-lavender/commit/20a18ab36049889d8860395a3e6ced9469bd6c0c))
+- **BCRI-3810979:** tile components ([46fc5c7](https://github.com/Pxs-Corporate/react-native-lavender/commit/46fc5c7a0ddff6c2db43fba0de9929626092f265))
+- **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:** remove default E2E on DEV env build for all components ([a5d27bf](https://github.com/Pxs-Corporate/react-native-lavender/commit/a5d27bfaaebf5b75f3160f31c64b590b7bd00b93))
+- **BCRI-3651768:** selectable box module ([20a18ab](https://github.com/Pxs-Corporate/react-native-lavender/commit/20a18ab36049889d8860395a3e6ced9469bd6c0c))
+- **BCRI-3810979:** tile components ([46fc5c7](https://github.com/Pxs-Corporate/react-native-lavender/commit/46fc5c7a0ddff6c2db43fba0de9929626092f265))
+- **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))

package/dist/PxSelectableBox.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+import { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
+export interface ISelectableBoxProps {
+    selected: boolean;
+    label: string;
+    onPress: (val: boolean) => void;
+    withCheckbox?: boolean;
+    containerStyle?: StyleProp<ViewStyle>;
+    disabled?: boolean;
+    locked?: boolean;
+    priceComponent?: ReactNode;
+    contentComponent?: ReactNode;
+    description?: string;
+    testID?: string;
+    selectedColor?: string;
+    wrapperStyle?: StyleProp<ViewStyle>;
+}
+export declare function PxSelectableBox({ selected, label, onPress, containerStyle, withCheckbox, disabled, locked, priceComponent, contentComponent, description, selectedColor, testID, ...accessibilityProps }: ISelectableBoxProps & AccessibilityProps): React.JSX.Element;
+//# sourceMappingURL=PxSelectableBox.d.ts.map

package/dist/PxSelectableBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxSelectableBox.d.ts","sourceRoot":"","sources":["../src/PxSelectableBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EACL,kBAAkB,EAClB,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAOtB,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,OAAO,EACP,cAAc,EACd,YAAY,EACZ,QAAgB,EAChB,MAAM,EACN,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,MAAwB,EACxB,GAAG,kBAAkB,EACtB,EAAE,mBAAmB,GAAG,kBAAkB,qBAmI1C"}

package/dist/index.d.ts

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

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@proximus/lavender-selectablebox-native",
+  "version": "0.1.0-alpha.0",
+  "description": "Lavender selectable box 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-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-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/PxSelectableBox.tsx

@@ -0,0 +1,213 @@
+import React, { ReactNode } from 'react';
+import {
+  AccessibilityProps,
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import { PxRadioButton } from '@proximus/lavender-radio-native';
+import { PxCheckBox } from '@proximus/lavender-checkbox-native';
+import { Colors, ThemeName, useTheme } from '@proximus/lavender-styling-native';
+import { Body, Header } from '@proximus/lavender-texts-native';
+
+export interface ISelectableBoxProps {
+  selected: boolean;
+  label: string;
+  onPress: (val: boolean) => void;
+  withCheckbox?: boolean;
+  containerStyle?: StyleProp<ViewStyle>;
+  disabled?: boolean;
+  locked?: boolean;
+  priceComponent?: ReactNode;
+  contentComponent?: ReactNode;
+  description?: string;
+  testID?: string;
+  selectedColor?: string;
+  wrapperStyle?: StyleProp<ViewStyle>;
+}
+
+export function PxSelectableBox({
+  selected,
+  label,
+  onPress,
+  containerStyle,
+  withCheckbox,
+  disabled = false,
+  locked,
+  priceComponent,
+  contentComponent,
+  description,
+  selectedColor,
+  testID = 'selectableBox',
+  ...accessibilityProps
+}: ISelectableBoxProps & AccessibilityProps) {
+  const { theme } = useTheme();
+  const isScarlet = theme.name === ThemeName.SCARLET;
+
+  const accessibilityRole = locked
+    ? 'text'
+    : withCheckbox
+      ? 'checkbox'
+      : 'radio';
+  const accessibilityHint = `Selectable Item ${label}, checked: ${selected}`;
+  const computedSelectedColor =
+    selectedColor ||
+    (isScarlet
+      ? Colors.v7.status.epicSuccess
+      : Colors.v8_1.shadesOfPurple.purple);
+
+  const getColors = () =>
+    isScarlet
+      ? {
+          uncheckedBorderColor: Colors.v7.shadesOfGrey.whiteOpacity12,
+          backgroundColor: Colors.v7.shadesOfGrey.whiteOpacity8,
+          focusBorderColor: Colors.shadesOfGrey.white,
+          disabledBgColor: Colors.v7.shadesOfGrey.whiteOpacity8,
+          defaultLabel: Colors.shadesOfGrey.white,
+          uncheckedLabel: Colors.v7.shadesOfGrey.whiteOpacity16,
+        }
+      : {
+          uncheckedBorderColor: Colors.v8_1.shadesOfGrey.dark120,
+          backgroundColor: Colors.v8_1.white,
+          focusBorderColor: Colors.v8_1.shadesOfPurple.purple,
+          disabledBgColor: Colors.v8_1.white,
+          defaultLabel: Colors.v8_1.shadesOfPurple.purple,
+          uncheckedLabel: Colors.v8_1.text.black,
+        };
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        onPress?.(!selected);
+      }}
+      style={[{ width: '100%' }, containerStyle]}
+      disabled={disabled || locked}
+      {...e2eID(testID)}
+      {...a11y({
+        accessible: true,
+        accessibilityRole,
+        accessibilityHint,
+        accessibilityLabel: label,
+        accessibilityState: {
+          checked: selected,
+          disabled: disabled || locked,
+        },
+        ...accessibilityProps,
+      })}
+    >
+      <View
+        style={[
+          styles.container,
+          {
+            borderColor: selected
+              ? computedSelectedColor
+              : getColors().uncheckedBorderColor,
+            backgroundColor: getColors().backgroundColor,
+          },
+          disabled && {
+            borderWidth: 0,
+            backgroundColor: getColors().disabledBgColor,
+          },
+          locked && {
+            borderColor: computedSelectedColor,
+          },
+        ]}
+        {...a11y({
+          accessible: true,
+          accessibilityRole,
+          accessibilityHint,
+        })}
+      >
+        <View style={styles.topContentContainer}>
+          <View style={styles.topContainer}>
+            {withCheckbox ? (
+              <PxCheckBox
+                onChange={onPress}
+                checked={selected}
+                color={
+                  selected
+                    ? computedSelectedColor
+                    : isScarlet
+                      ? Colors.v7.shadesOfGrey.whiteOpacity52
+                      : Colors.v7.shadesOfGrey.blackOpacity44
+                }
+                checkedColor={isScarlet ? '#0A0A0A' : undefined}
+                disabled={disabled}
+              />
+            ) : (
+              <PxRadioButton
+                onPress={() => onPress?.(!selected)}
+                color={computedSelectedColor}
+                checked={selected}
+                disabled={disabled}
+              />
+            )}
+            <View style={styles.textContainer}>
+              <Header
+                textBreakStrategy={'balanced'}
+                accessible={true}
+                style={[
+                  styles.title,
+                  {
+                    color: !selected
+                      ? getColors().uncheckedLabel
+                      : getColors().defaultLabel,
+                  },
+                ]}
+              >
+                {label}
+              </Header>
+              <Body style={styles.description}>{description}</Body>
+            </View>
+          </View>
+          {contentComponent && (
+            <View style={{ marginTop: 16 }}>{contentComponent}</View>
+          )}
+        </View>
+
+        {priceComponent && (
+          <View style={styles.priceComponent}>{priceComponent}</View>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderWidth: 2,
+    borderRadius: 12,
+  },
+  title: {
+    fontSize: 14,
+  },
+  priceComponent: {
+    padding: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: Colors.v8_1.shadesOfGrey.dark4,
+  },
+  description: {
+    color: Colors.v8_1.text.details,
+    fontSize: 12,
+  },
+  topContentContainer: {
+    padding: 16,
+    flex: 1,
+  },
+  topContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  textContainer: {
+    flexDirection: 'column',
+    marginHorizontal: 16,
+    justifyContent: 'center',
+    flex: 1,
+  },
+});

package/src/index.ts

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

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