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

package/CHANGELOG.md

@@ -0,0 +1,39 @@
+# 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-3651613:** checkbox module ([b791f5f](https://github.com/Pxs-Corporate/react-native-lavender/commit/b791f5f9482f1162302826092d946fa364f37e9d))
+- **BCRI-3651673:** entrypoint module ([9a246af](https://github.com/Pxs-Corporate/react-native-lavender/commit/9a246af671f674f0ff768a9b6a72a77d1f12d065))
+- **BCRI-3660857:** cell components ([af9e45c](https://github.com/Pxs-Corporate/react-native-lavender/commit/af9e45cefc20d08d2338380ff4cd8cd6851abe24))
+- **BCRI-3707400:** entrypoint prefix slot ([5f5c4a9](https://github.com/Pxs-Corporate/react-native-lavender/commit/5f5c4a9a973a5168d359f6d4a9413a3b7bf50d48))
+- **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-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-3651613:** checkbox module ([b791f5f](https://github.com/Pxs-Corporate/react-native-lavender/commit/b791f5f9482f1162302826092d946fa364f37e9d))
+- **BCRI-3651673:** entrypoint module ([9a246af](https://github.com/Pxs-Corporate/react-native-lavender/commit/9a246af671f674f0ff768a9b6a72a77d1f12d065))
+- **BCRI-3660857:** cell components ([af9e45c](https://github.com/Pxs-Corporate/react-native-lavender/commit/af9e45cefc20d08d2338380ff4cd8cd6851abe24))
+- **BCRI-3707400:** entrypoint prefix slot ([5f5c4a9](https://github.com/Pxs-Corporate/react-native-lavender/commit/5f5c4a9a973a5168d359f6d4a9413a3b7bf50d48))
+- **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-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))

package/dist/PxCheckBox.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { AccessibilityProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import 'nullthrows';
+export interface ICheckBoxProps {
+    /**
+     * Common Props
+     */
+    checked: boolean;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    testID?: string;
+    color?: string;
+    label?: string;
+    hasError?: boolean;
+    wrapperStyle?: StyleProp<ViewStyle>;
+    checkboxStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    labelColor?: string;
+    /**
+     * Check @react-native-community/checkbox for more info
+     */
+    /**
+     * Android only
+     */
+    focusable?: boolean;
+    tintColors?: {
+        true?: string;
+        false?: string;
+    };
+    /**
+     * IOS only
+     */
+    checkedColor?: string;
+    boxType?: 'circle' | 'square';
+    tintColor?: string;
+    onTintColor?: string;
+    checkedBackgroundColor?: string;
+}
+export declare function PxCheckBox({ checked, onChange, testID, label, disabled, checkedColor, tintColor, checkedBackgroundColor, onTintColor, focusable, labelColor, boxType, wrapperStyle, checkboxStyle, labelStyle, ...accessibilityProps }: ICheckBoxProps & AccessibilityProps): React.JSX.Element;
+//# sourceMappingURL=PxCheckBox.d.ts.map

package/dist/PxCheckBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxCheckBox.d.ts","sourceRoot":"","sources":["../src/PxCheckBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EACL,kBAAkB,EAElB,SAAS,EAET,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAID,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAgB,EAChB,YAAY,EACZ,SAAS,EACT,sBAAsB,EACtB,WAAW,EACX,SAAiB,EACjB,UAAU,EACV,OAAkB,EAClB,YAAY,EACZ,aAAa,EACb,UAAU,EACV,GAAG,kBAAkB,EACtB,EAAE,cAAc,GAAG,kBAAkB,qBA2IrC"}

package/dist/index.d.ts

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

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@proximus/lavender-checkbox-native",
+  "version": "0.1.0-alpha.0",
+  "description": "Lavender Checkbox native component",
+  "license": "MIT",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "prepublish": "yarn clean && yarn build",
+    "build": "npx tsc -p tsconfig.json"
+  },
+  "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": "27525289a448a6e4f3c2d36a88b9dc54d0f15fbf"
+}

package/src/PxCheckBox.tsx

@@ -0,0 +1,225 @@
+import CheckBox from '@react-native-community/checkbox';
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  AccessibilityProps,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  TouchableOpacity,
+  ViewStyle,
+} from 'react-native';
+
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import { Colors, ThemeName, useTheme } from '@proximus/lavender-styling-native';
+import { Body } from '@proximus/lavender-texts-native';
+import 'nullthrows';
+
+export interface ICheckBoxProps {
+  /**
+   * Common Props
+   */
+  checked: boolean;
+  onChange?: (value: boolean) => void;
+  disabled?: boolean;
+  testID?: string;
+  color?: string;
+  label?: string;
+  hasError?: boolean;
+  wrapperStyle?: StyleProp<ViewStyle>;
+  checkboxStyle?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  labelColor?: string;
+  /**
+   * Check @react-native-community/checkbox for more info
+   */
+  /**
+   * Android only
+   */
+  focusable?: boolean;
+  tintColors?: {
+    true?: string;
+    false?: string;
+  };
+  /**
+   * IOS only
+   */
+  checkedColor?: string;
+  boxType?: 'circle' | 'square';
+  tintColor?: string;
+  onTintColor?: string;
+  checkedBackgroundColor?: string;
+}
+
+const isAndroid = Platform.OS === 'android';
+
+export function PxCheckBox({
+  checked,
+  onChange,
+  testID,
+  label,
+  disabled = false,
+  checkedColor,
+  tintColor,
+  checkedBackgroundColor,
+  onTintColor,
+  focusable = false,
+  labelColor,
+  boxType = 'square',
+  wrapperStyle,
+  checkboxStyle,
+  labelStyle,
+  ...accessibilityProps
+}: ICheckBoxProps & AccessibilityProps) {
+  const { theme } = useTheme();
+
+  const isScarlet = theme.name === ThemeName.SCARLET;
+
+  const onChangeCallback = useCallback(
+    (value: boolean) => {
+      setInternalChecked(value);
+      if (onChange) {
+        onChange(value);
+      }
+    },
+    [onChange]
+  );
+
+  const [internalChecked, setInternalChecked] = useState(checked);
+
+  useEffect(() => {
+    setInternalChecked(checked);
+  }, [checked]);
+
+  const getColors = () =>
+    isScarlet
+      ? {
+          disabledBackgroundColor: Colors.v7.shadesOfGrey.whiteOpacity8,
+          checkedBackgroundColor: Colors.v8_1.white,
+          backgroundColor: Colors.v7.shadesOfGrey.blackOpacity2,
+          errorColor: Colors.v7.status.epicError,
+          disabledLabelColor: Colors.v7.shadesOfGrey.whiteOpacity16,
+          disabledColor: Colors.v7.shadesOfGrey.whiteOpacity8,
+          defaultLabel: '#FFF',
+          tintColor: Colors.brand.purple,
+          focusColor: Colors.white,
+          disabledCheckColor: Colors.v8_1.shadesOfGrey.dark160,
+          disabledBorderColor: Colors.v8_1.strokeBlack,
+        }
+      : {
+          disabledBackgroundColor: Colors.v8_1.shadesOfGrey.dark160,
+          checkedBackgroundColor: Colors.v8_1.shadesOfPurple.purple,
+          tintColor: Colors.v8_1.shadesOfPurple.purple,
+          backgroundColor: Colors.v8_1.shadesOfGrey.dark4,
+          disabledBorderColor: Colors.v8_1.shadesOfGrey.dark160,
+          borderColor: Colors.v8_1.strokeBlack,
+          errorColor: Colors.v7.status.error,
+          disabledLabelColor: Colors.v7.shadesOfGrey.black0Opacity12,
+          disabledColor: Colors.v8_1.shadesOfGrey.dark160,
+          defaultLabel: '#0A0A0A',
+          checkColor: Colors.v8_1.white,
+          disabledCheckColor: Colors.v8_1.shadesOfGrey.dark160,
+          focusColor: Colors.v8_1.shadesOfPurple.purple,
+        };
+
+  return (
+    <TouchableOpacity
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+        },
+        wrapperStyle,
+      ]}
+      onPress={() => {
+        onChangeCallback(!internalChecked);
+      }}
+      {...a11y({
+        accessible: false,
+      })}
+      {...e2eID(testID + '-checkbox')}
+    >
+      <CheckBox
+        lineWidth={disabled || !internalChecked ? 2 : 3}
+        style={[
+          styles.checkbox,
+          {
+            backgroundColor: isAndroid
+              ? 'transparent'
+              : disabled
+                ? getColors().disabledBackgroundColor
+                : getColors().backgroundColor,
+          }, // Unchecked background color
+          checkboxStyle as any,
+        ]}
+        tintColors={{
+          true: getColors().tintColor,
+          false: getColors().tintColor,
+        }}
+        tintColor={
+          tintColor || disabled
+            ? internalChecked
+              ? getColors().backgroundColor
+              : getColors().disabledBackgroundColor
+            : getColors().borderColor
+        } // checkbox border color when unchecked
+        onTintColor={onTintColor || getColors().tintColor} // checkbox border color when checked
+        onFillColor={
+          checkedBackgroundColor || getColors().checkedBackgroundColor
+        }
+        onCheckColor={
+          checkedColor || disabled
+            ? getColors().disabledCheckColor
+            : getColors().checkColor
+        }
+        animationDuration={0.5}
+        value={internalChecked}
+        disabled={disabled}
+        boxType={boxType}
+        onValueChange={onChangeCallback}
+        hideBox={isAndroid || (disabled && internalChecked)}
+        focusable={focusable}
+        {...a11y({
+          accessible: accessibilityProps.accessible,
+          accessibilityLabel: accessibilityProps.accessibilityLabel || label,
+          accessibilityHint: accessibilityProps.accessibilityHint,
+          importantForAccessibility:
+            accessibilityProps.importantForAccessibility,
+        })}
+        {...e2eID(testID + '-checkbox')}
+      />
+      {label && label.trim() !== '' && (
+        <Body
+          accessible={false}
+          importantForAccessibility={'no'}
+          style={[
+            styles.label,
+            {
+              color: labelColor
+                ? labelColor
+                : disabled
+                  ? getColors().disabledLabelColor
+                  : getColors().defaultLabel,
+            },
+            labelStyle,
+          ]}
+        >
+          {label}
+        </Body>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  checkbox: {
+    height: 24,
+    width: 24,
+    borderRadius: 5,
+  },
+  label: {
+    marginHorizontal: 12,
+    fontStyle: 'normal',
+    fontWeight: '400',
+  },
+});

package/src/index.ts

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

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