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

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# 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)
+
+### 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-3651767:** radio module ([f0a0f6a](https://github.com/Pxs-Corporate/react-native-lavender/commit/f0a0f6ac805651ecb46c13c2b2119b0d9492b58a))
+- **BCRI-3651770:** spinner module ([7671419](https://github.com/Pxs-Corporate/react-native-lavender/commit/76714190c7f7908a4199e2e3194844dbdbe2fb0f))
+- **BCRI-3660857:** cell components ([af9e45c](https://github.com/Pxs-Corporate/react-native-lavender/commit/af9e45cefc20d08d2338380ff4cd8cd6851abe24))
+- **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)
+
+### 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-3651767:** radio module ([f0a0f6a](https://github.com/Pxs-Corporate/react-native-lavender/commit/f0a0f6ac805651ecb46c13c2b2119b0d9492b58a))
+- **BCRI-3651770:** spinner module ([7671419](https://github.com/Pxs-Corporate/react-native-lavender/commit/76714190c7f7908a4199e2e3194844dbdbe2fb0f))
+- **BCRI-3660857:** cell components ([af9e45c](https://github.com/Pxs-Corporate/react-native-lavender/commit/af9e45cefc20d08d2338380ff4cd8cd6851abe24))
+- **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/PxRadioButton.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { AccessibilityProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+export interface IRadioButton extends AccessibilityProps {
+    containerStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    checked: boolean;
+    color?: string;
+    onPress?: () => void;
+    label?: string;
+    testID?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    size?: number;
+    labelA11y?: AccessibilityProps;
+}
+export declare function PxRadioButton({ color, checked, label, onPress, testID, disabled, hasError, labelA11y, containerStyle, labelStyle, size, ...accessibilityProps }: IRadioButton & AccessibilityProps): React.JSX.Element;
+//# sourceMappingURL=PxRadioButton.d.ts.map

package/dist/PxRadioButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxRadioButton.d.ts","sourceRoot":"","sources":["../src/PxRadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,kBAAkB,EAElB,SAAS,EAET,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAMtB,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACtD,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,kBAAkB,CAAC;CAChC;AACD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EACP,KAAK,EACL,OAAO,EACP,MAAM,EACN,QAAgB,EAChB,QAAgB,EAChB,SAAS,EACT,cAAc,EACd,UAAU,EACV,IAAS,EACT,GAAG,kBAAkB,EACtB,EAAE,YAAY,GAAG,kBAAkB,qBAyGnC"}

package/dist/index.d.ts

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

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@proximus/lavender-radio-native",
+  "version": "0.1.0-alpha.0",
+  "description": "Lavender radio 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-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/PxRadioButton.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import {
+  AccessibilityProps,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import { Colors, useIsThemeScarlet } from '@proximus/lavender-styling-native';
+import { Body } from '@proximus/lavender-texts-native';
+
+export interface IRadioButton extends AccessibilityProps {
+  containerStyle?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  checked: boolean;
+  color?: string;
+  onPress?: () => void;
+  label?: string;
+  testID?: string;
+  disabled?: boolean;
+  hasError?: boolean;
+  size?: number;
+  labelA11y?: AccessibilityProps;
+}
+export function PxRadioButton({
+  color,
+  checked,
+  label,
+  onPress,
+  testID,
+  disabled = false,
+  hasError = false,
+  labelA11y,
+  containerStyle,
+  labelStyle,
+  size = 24,
+  ...accessibilityProps
+}: IRadioButton & AccessibilityProps) {
+  const isScarlet = useIsThemeScarlet();
+
+  const getColors = () =>
+    isScarlet
+      ? {
+          backgroundColor: Colors.v7.shadesOfGrey.blackOpacity2,
+          checkedBgColor: Colors.brand.purple,
+          errorColor: '#F22613',
+          disabledLabelColor: Colors.v7.shadesOfGrey.whiteOpacity64,
+          disabledBgColor: Colors.v7.shadesOfGrey.whiteOpacity52,
+          disabledBorderColor: Colors.v7.shadesOfGrey.whiteOpacity12,
+          disabledCheckedBgColor: Colors.v7.shadesOfGrey.whiteOpacity12,
+          defaultLabel: '#FFF',
+          borderColor: Colors.shadesOfGrey.white,
+          focusColor: Colors.white,
+          defaultBorderColor: Colors.v7.shadesOfGrey.whiteOpacity52,
+          checkedBorderColor: color || Colors.shadesOfGrey.white,
+        }
+      : {
+          defaultBorderColor: Colors.v8_1.strokeBlack,
+          checkedBorderColor: color || Colors.v8_1.shadesOfPurple.purple,
+          backgroundColor: Colors.v8_1.shadesOfGrey.dark4,
+          errorColor: '#B30000',
+          checkedBgColor: Colors.v8_1.white,
+          disabledLabelColor: Colors.v7.shadesOfGrey.black0Opacity56,
+          disabledBgColor: Colors.v8_1.shadesOfGrey.dark160,
+          disabledCheckedBgColor: Colors.v8_1.shadesOfGrey.dark320,
+          disabledBorderColor: '#cccccc',
+          defaultLabel: '#0A0A0A',
+          borderColor: Colors.v8_1.shadesOfPurple.purple,
+          focusColor: Colors.v8_1.shadesOfPurple.purple,
+        };
+
+  return (
+    <View focusable style={containerStyle} {...e2eID(testID + '-radioButton')}>
+      <TouchableOpacity
+        focusable={true}
+        onPress={onPress}
+        style={[styles.container, { height: size }]}
+        disabled={disabled}
+        {...a11y({
+          accessible: true,
+          accessibilityRole: 'button',
+          accessibilityLabel: labelA11y?.accessibilityLabel || label,
+          accessibilityState: {
+            checked,
+            disabled,
+          },
+          ...accessibilityProps,
+        })}
+      >
+        <View
+          style={[
+            styles.radio,
+            {
+              borderColor: getColors().defaultBorderColor,
+              backgroundColor: getColors().backgroundColor,
+            },
+            checked && {
+              borderWidth: 7,
+              borderColor: getColors().checkedBorderColor,
+              backgroundColor: getColors().checkedBgColor,
+            },
+            disabled && {
+              backgroundColor: getColors().disabledBgColor,
+              borderColor: getColors().disabledBgColor,
+            },
+            disabled &&
+              checked && {
+                borderColor: getColors().disabledBorderColor,
+                backgroundColor: getColors().disabledCheckedBgColor,
+                borderWidth: 7,
+              },
+            hasError && {
+              borderColor: getColors().errorColor,
+            },
+            hasError &&
+              checked && {
+                borderColor: getColors().errorColor,
+                backgroundColor: isScarlet ? '#0A0A0A' : Colors.v8_1.white,
+                borderWidth: 7,
+              },
+            { height: size, width: size },
+          ]}
+        />
+        {label && (
+          <Body
+            style={[
+              styles.label,
+              {
+                color: disabled
+                  ? getColors().disabledLabelColor
+                  : getColors().defaultLabel,
+              },
+              labelStyle,
+            ]}
+            {...(labelA11y && a11y(labelA11y))}
+          >
+            {label}
+          </Body>
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  radio: {
+    borderRadius: 12,
+    borderWidth: 2,
+  },
+  label: {
+    marginHorizontal: 12,
+    lineHeight: 21,
+    fontSize: Platform.OS === 'android' ? 12 : 14,
+  },
+});

package/src/index.ts

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

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