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

@proximus/lavender-checkbox-native 0.1.0-alpha.4 → 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 (6) hide show

package/dist/PxCheckBox.js +88 -0
package/package.json +9 -28
package/CHANGELOG.md +0 -59
package/src/PxCheckBox.tsx +0 -163
package/tsconfig.json +0 -8
/package/{src/index.ts → dist/index.js} +0 -0

package/dist/PxCheckBox.js ADDED Viewed

@@ -0,0 +1,88 @@
+import CheckBox from '@react-native-community/checkbox';
+import React, { useCallback, useEffect, useState } from 'react';
+import { StyleSheet, TouchableOpacity, } from 'react-native';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { Body } from '@proximus/lavender-texts-native';
+import 'nullthrows';
+export function PxCheckBox({ checked, onChange, testID, label, disabled = false, wrapperStyle, ...accessibilityProps }) {
+    const { theme } = useTheme();
+    const onChangeCallback = useCallback((value) => {
+        setInternalChecked(value);
+        if (onChange) {
+            onChange(value);
+        }
+    }, [onChange]);
+    const [internalChecked, setInternalChecked] = useState(checked);
+    useEffect(() => {
+        setInternalChecked(checked);
+    }, [checked]);
+    const colors = {
+        disabledBackgroundColor: theme.t('ColorBackgroundStateDisabledDefault'),
+        disabledLabelColor: theme.t('ColorTextStateDisabledDefault'),
+        disabledCheckColor: 'rgba(255, 255, 255, 0.3)',
+        disabledBorderColor: theme.t('ColorBorderMainDefault'),
+        checkedBackgroundColor: theme.t('ColorBackgroundContainerPrimaryDefault'),
+        checkColor: '#FFFFFF',
+        tintColor: theme.t('ColorIconBrandDefault'),
+        backgroundColor: theme.t('ColorBackgroundContainerLightDefault'),
+        borderColor: theme.t('ColorBorderNeutralDefault'),
+        defaultLabelColor: theme.t('ColorTextNeutralDefault'),
+    };
+    return (React.createElement(TouchableOpacity, { style: [
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+            },
+            wrapperStyle,
+        ], onPress: () => {
+            onChangeCallback(!internalChecked);
+        }, ...a11y({
+            accessible: false,
+        }), ...(testID && e2eID(testID + '-checkbox-wrapper')), disabled: disabled },
+        React.createElement(CheckBox, { lineWidth: 2, style: [
+                styles.checkbox,
+                {
+                    // @ts-ignore
+                    width: theme.t('SizeM').number,
+                    // @ts-ignore
+                    height: theme.t('SizeM').number,
+                }, // Unchecked background color
+            ], tintColors: {
+                // Android only
+                true: disabled ? colors.disabledBackgroundColor : colors.tintColor,
+                false: disabled ? colors.disabledBackgroundColor : colors.tintColor,
+            }, tintColor:
+            // iOS only
+            disabled ? colors.disabledBackgroundColor : colors.borderColor // enabled
+            , onTintColor:
+            // iOS only
+            disabled
+                ? colors.disabledBackgroundColor
+                : colors.checkedBackgroundColor, onFillColor: disabled
+                ? colors.disabledBackgroundColor
+                : colors.checkedBackgroundColor, onCheckColor: disabled ? colors.disabledCheckColor : colors.checkColor, animationDuration: 0.2, value: internalChecked, disabled: disabled, boxType: 'square', onValueChange: onChangeCallback, focusable: true, ...a11y({
+                accessible: accessibilityProps.accessible,
+                accessibilityLabel: accessibilityProps.accessibilityLabel || label,
+                accessibilityHint: accessibilityProps.accessibilityHint,
+                importantForAccessibility: accessibilityProps.importantForAccessibility,
+            }), ...(testID && e2eID(testID + '-checkbox')) }),
+        label && label.trim() !== '' && (React.createElement(Body, { accessible: false, importantForAccessibility: 'no', style: [
+                styles.label,
+                {
+                    color: disabled
+                        ? colors.disabledLabelColor
+                        : colors.defaultLabelColor,
+                },
+            ] }, label))));
+}
+const styles = StyleSheet.create({
+    checkbox: {
+        borderRadius: 5,
+    },
+    label: {
+        marginHorizontal: 12,
+        fontStyle: 'normal',
+        fontWeight: '400',
+    },
+});

package/package.json CHANGED Viewed

@@ -1,38 +1,19 @@
 {
   "name": "@proximus/lavender-checkbox-native",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-beta.0",
   "description": "Lavender Checkbox native component",
   "license": "MIT",
   "type": "module",
-  "main": "src/index.ts",
-  "scripts": {
-    "clean": "rm -rf dist",
-    "prepublish": "yarn clean && yarn build",
-    "build": "npx tsc -p tsconfig.json"
-  },
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
   "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.4",
-    "@proximus/lavender-styling-native": "0.1.0-alpha.3",
-    "@proximus/lavender-texts-native": "0.1.0-alpha.4"
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-styling-native": "*",
+    "@proximus/lavender-texts-native": "*"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "lerna": {
-    "command": {
-      "publish": {
-        "assets": [
-          "dist",
-          "src",
-          "package.json"
-        ]
-      }
-    }
-  },
-  "gitHead": "6e9252a716a08ededdfbfd6f5b1db70ab21e026e"
+  }
 }

package/CHANGELOG.md DELETED Viewed

@@ -1,59 +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.4](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-checkbox-native@0.1.0-alpha.3...@proximus/lavender-checkbox-native@0.1.0-alpha.4) (2025-09-19)
-**Note:** Version bump only for package @proximus/lavender-checkbox-native
-# [0.1.0-alpha.3](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-checkbox-native@0.1.0-alpha.2...@proximus/lavender-checkbox-native@0.1.0-alpha.3) (2025-09-12)
-**Note:** Version bump only for package @proximus/lavender-checkbox-native
-# [0.1.0-alpha.2](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-checkbox-native@0.1.0-alpha.1...@proximus/lavender-checkbox-native@0.1.0-alpha.2) (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.1](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-checkbox-native@0.1.0-alpha.0...@proximus/lavender-checkbox-native@0.1.0-alpha.1) (2025-08-13)
-### Bug Fixes
-- **BCRI-4210372:** fix types field in modules ([68ac126](https://github.com/Pxs-Corporate/react-native-lavender/commit/68ac12657112473ae9e0e683076b1d9172be9ce6))
-# 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/src/PxCheckBox.tsx DELETED Viewed

@@ -1,163 +0,0 @@
-import CheckBox from '@react-native-community/checkbox';
-import React, { useCallback, useEffect, useState } from 'react';
-import {
-  AccessibilityProps,
-  StyleProp,
-  StyleSheet,
-  TouchableOpacity,
-  ViewStyle,
-} from 'react-native';
-import { a11y, e2eID } from '@proximus/lavender-common-native';
-import { 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;
-  label?: string;
-  hasError?: boolean;
-  wrapperStyle?: StyleProp<ViewStyle>;
-}
-export function PxCheckBox({
-  checked,
-  onChange,
-  testID,
-  label,
-  disabled = false,
-  wrapperStyle,
-  ...accessibilityProps
-}: ICheckBoxProps & AccessibilityProps) {
-  const { theme } = useTheme();
-  const onChangeCallback = useCallback(
-    (value: boolean) => {
-      setInternalChecked(value);
-      if (onChange) {
-        onChange(value);
-      }
-    },
-    [onChange]
-  );
-  const [internalChecked, setInternalChecked] = useState(checked);
-  useEffect(() => {
-    setInternalChecked(checked);
-  }, [checked]);
-  const colors = {
-    disabledBackgroundColor: theme.t('ColorBackgroundStateDisabledDefault'),
-    disabledLabelColor: theme.t('ColorTextStateDisabledDefault'),
-    disabledCheckColor: 'rgba(255, 255, 255, 0.3)',
-    disabledBorderColor: theme.t('ColorBorderMainDefault'),
-    checkedBackgroundColor: theme.t('ColorBackgroundContainerPrimaryDefault'),
-    checkColor: '#FFFFFF',
-    tintColor: theme.t('ColorIconBrandDefault'),
-    backgroundColor: theme.t('ColorBackgroundContainerLightDefault'),
-    borderColor: theme.t('ColorBorderNeutralDefault'),
-    defaultLabelColor: theme.t('ColorTextNeutralDefault'),
-  };
-  return (
-    <TouchableOpacity
-      style={[
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
-        },
-        wrapperStyle,
-      ]}
-      onPress={() => {
-        onChangeCallback(!internalChecked);
-      }}
-      {...a11y({
-        accessible: false,
-      })}
-      {...e2eID(testID + '-checkbox')}
-      disabled={disabled}
-    >
-      <CheckBox
-        lineWidth={2}
-        style={[
-          styles.checkbox,
-          {
-            // @ts-ignore
-            width: theme.t('SizeM').number,
-            // @ts-ignore
-            height: theme.t('SizeM').number,
-          }, // Unchecked background color
-        ]}
-        tintColors={{
-          // Android only
-          true: disabled ? colors.disabledBackgroundColor : colors.tintColor,
-          false: disabled ? colors.disabledBackgroundColor : colors.tintColor,
-        }}
-        tintColor={
-          // iOS only
-          disabled ? colors.disabledBackgroundColor : colors.borderColor // enabled
-        } // checkbox border color when unchecked
-        onTintColor={
-          // iOS only
-          disabled
-            ? colors.disabledBackgroundColor
-            : colors.checkedBackgroundColor
-        } // checkbox border color when checked
-        onFillColor={
-          disabled
-            ? colors.disabledBackgroundColor
-            : colors.checkedBackgroundColor
-        }
-        onCheckColor={disabled ? colors.disabledCheckColor : colors.checkColor}
-        animationDuration={0.2}
-        value={internalChecked}
-        disabled={disabled}
-        boxType={'square'}
-        onValueChange={onChangeCallback}
-        focusable={true}
-        {...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: disabled
-                ? colors.disabledLabelColor
-                : colors.defaultLabelColor,
-            },
-          ]}
-        >
-          {label}
-        </Body>
-      )}
-    </TouchableOpacity>
-  );
-}
-const styles = StyleSheet.create({
-  checkbox: {
-    borderRadius: 5,
-  },
-  label: {
-    marginHorizontal: 12,
-    fontStyle: 'normal',
-    fontWeight: '400',
-  },
-});

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