@proximus/lavender-selectablebox-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
  1. package/dist/PxSelectableBox.js +106 -0
  2. package/package.json +12 -34
  3. package/CHANGELOG.md +0 -51
  4. package/src/PxSelectableBox.tsx +0 -185
  5. package/tsconfig.json +0 -8
  6. /package/{src/index.ts → dist/index.js} +0 -0
package/dist/PxSelectableBox.js ADDED
@@ -0,0 +1,106 @@
1
+ import React from 'react';
2
+ import { StyleSheet, TouchableOpacity, View, } from 'react-native';
3
+ import { a11y, e2eID } from '@proximus/lavender-common-native';
4
+ import { PxRadioButton } from '@proximus/lavender-radio-native';
5
+ import { PxCheckBox } from '@proximus/lavender-checkbox-native';
6
+ import { useTheme } from '@proximus/lavender-styling-native';
7
+ import { Body, Header } from '@proximus/lavender-texts-native';
8
+ export function PxSelectableBox({ selected, label, onPress, containerStyle, withCheckbox, disabled = false, locked, priceComponent, contentComponent, description, testID = 'selectableBox', ...accessibilityProps }) {
9
+ const { theme } = useTheme();
10
+ const accessibilityRole = locked
11
+ ? 'text'
12
+ : withCheckbox
13
+ ? 'checkbox'
14
+ : 'radio';
15
+ const accessibilityHint = `Selectable Item ${label}, checked: ${selected}`;
16
+ const colors = {
17
+ uncheckedBorderColor: theme.t('ColorBorderMainDefault'),
18
+ backgroundColor: theme.t('ColorBackgroundContainerLightDefault'),
19
+ focusBorderColor: theme.t('ColorBorderBrandDefault'),
20
+ disabledBackgroundColor: theme.t('ColorBackgroundStateDisabledDefault'),
21
+ defaultLabel: theme.t('ColorTextNeutralDefault'),
22
+ uncheckedLabel: theme.t('ColorTextNeutralDefault'),
23
+ borderColor: theme.t('ColorBorderBrandDefault'),
24
+ };
25
+ return (React.createElement(TouchableOpacity, { onPress: () => {
26
+ onPress?.(!selected);
27
+ }, style: [{ width: '100%' }, containerStyle], disabled: disabled || locked, ...e2eID(testID), ...a11y({
28
+ accessible: true,
29
+ accessibilityRole,
30
+ accessibilityHint,
31
+ accessibilityLabel: label,
32
+ accessibilityState: {
33
+ checked: selected,
34
+ disabled: disabled || locked,
35
+ },
36
+ ...accessibilityProps,
37
+ }) },
38
+ React.createElement(View, { style: [
39
+ styles.container,
40
+ {
41
+ borderColor: selected
42
+ ? colors.borderColor
43
+ : colors.uncheckedBorderColor,
44
+ backgroundColor: colors.backgroundColor,
45
+ },
46
+ disabled && {
47
+ borderWidth: 0,
48
+ backgroundColor: colors.disabledBackgroundColor,
49
+ },
50
+ locked && {
51
+ borderColor: colors.borderColor,
52
+ },
53
+ ], ...a11y({
54
+ accessible: true,
55
+ accessibilityRole,
56
+ accessibilityHint,
57
+ }) },
58
+ React.createElement(View, { style: styles.topContentContainer },
59
+ React.createElement(View, { style: styles.topContainer },
60
+ withCheckbox ? (React.createElement(PxCheckBox, { onChange: onPress, checked: selected, disabled: disabled })) : (React.createElement(PxRadioButton, { onPress: () => onPress?.(!selected), checked: selected, disabled: disabled })),
61
+ React.createElement(View, { style: styles.textContainer },
62
+ React.createElement(Header, { textBreakStrategy: 'balanced', accessible: true, style: [
63
+ styles.title,
64
+ {
65
+ color: !selected
66
+ ? colors.uncheckedLabel
67
+ : colors.defaultLabel,
68
+ },
69
+ ] }, label),
70
+ React.createElement(Body, { style: styles.description }, description))),
71
+ contentComponent && (React.createElement(View, { style: { marginTop: 16 } }, contentComponent))),
72
+ priceComponent && (React.createElement(View, { style: styles.priceComponent }, priceComponent)))));
73
+ }
74
+ const styles = StyleSheet.create({
75
+ container: {
76
+ flexDirection: 'row',
77
+ borderWidth: 2,
78
+ borderRadius: 12,
79
+ },
80
+ title: {
81
+ fontSize: 14,
82
+ },
83
+ priceComponent: {
84
+ padding: 8,
85
+ alignItems: 'center',
86
+ justifyContent: 'center',
87
+ },
88
+ description: {
89
+ fontSize: 12,
90
+ },
91
+ topContentContainer: {
92
+ padding: 16,
93
+ flex: 1,
94
+ },
95
+ topContainer: {
96
+ flexDirection: 'row',
97
+ alignItems: 'center',
98
+ justifyContent: 'flex-start',
99
+ },
100
+ textContainer: {
101
+ flexDirection: 'column',
102
+ marginHorizontal: 16,
103
+ justifyContent: 'center',
104
+ flex: 1,
105
+ },
106
+ });
package/package.json CHANGED
@@ -1,44 +1,22 @@
1
1
  {
2
2
  "name": "@proximus/lavender-selectablebox-native",
3
- "version": "0.1.0-alpha.4",
3
+ "version": "0.1.0-beta.0",
4
4
  "description": "Lavender selectable box component",
5
5
  "license": "MIT",
6
- "main": "src/index.ts",
6
+ "main": "dist/index.js",
7
+ "files": [
8
+ "dist"
9
+ ],
7
10
  "type": "module",
8
- "scripts": {
9
- "clean": "rm -rf dist",
10
- "prepublish": "yarn clean && yarn build",
11
- "build": "npx tsc -p tsconfig.json"
12
- },
13
11
  "peerDependencies": {
14
- "@proximus/lavender-checkbox-native": "workspace:*",
15
- "@proximus/lavender-common-native": "workspace:*",
16
- "@proximus/lavender-icon-native": "workspace:*",
17
- "@proximus/lavender-radio-native": "workspace:*",
18
- "@proximus/lavender-styling-native": "workspace:*",
19
- "@proximus/lavender-texts-native": "workspace:*"
20
- },
21
- "devDependencies": {
22
- "@proximus/lavender-checkbox-native": "0.1.0-alpha.4",
23
- "@proximus/lavender-common-native": "0.1.0-alpha.4",
24
- "@proximus/lavender-icon-native": "0.1.0-alpha.4",
25
- "@proximus/lavender-radio-native": "0.1.0-alpha.4",
26
- "@proximus/lavender-styling-native": "0.1.0-alpha.3",
27
- "@proximus/lavender-texts-native": "0.1.0-alpha.4"
12
+ "@proximus/lavender-checkbox-native": "*",
13
+ "@proximus/lavender-common-native": "*",
14
+ "@proximus/lavender-icon-native": "*",
15
+ "@proximus/lavender-radio-native": "*",
16
+ "@proximus/lavender-styling-native": "*",
17
+ "@proximus/lavender-texts-native": "*"
28
18
  },
29
19
  "publishConfig": {
30
20
  "access": "public"
31
- },
32
- "lerna": {
33
- "command": {
34
- "publish": {
35
- "assets": [
36
- "dist",
37
- "src",
38
- "package.json"
39
- ]
40
- }
41
- }
42
- },
43
- "gitHead": "6e9252a716a08ededdfbfd6f5b1db70ab21e026e"
21
+ }
44
22
  }
package/CHANGELOG.md DELETED
@@ -1,51 +0,0 @@
1
- # Change Log
2
-
3
- All notable changes to this project will be documented in this file.
4
- See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
-
6
- # [0.1.0-alpha.4](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-selectablebox-native@0.1.0-alpha.3...@proximus/lavender-selectablebox-native@0.1.0-alpha.4) (2025-09-19)
7
-
8
- **Note:** Version bump only for package @proximus/lavender-selectablebox-native
9
-
10
- # [0.1.0-alpha.3](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-selectablebox-native@0.1.0-alpha.2...@proximus/lavender-selectablebox-native@0.1.0-alpha.3) (2025-09-12)
11
-
12
- **Note:** Version bump only for package @proximus/lavender-selectablebox-native
13
-
14
- # [0.1.0-alpha.2](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-selectablebox-native@0.1.0-alpha.1...@proximus/lavender-selectablebox-native@0.1.0-alpha.2) (2025-09-05)
15
-
16
- ### Features
17
-
18
- - **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))
19
-
20
- # [0.1.0-alpha.1](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-selectablebox-native@0.1.0-alpha.0...@proximus/lavender-selectablebox-native@0.1.0-alpha.1) (2025-08-13)
21
-
22
- ### Bug Fixes
23
-
24
- - **BCRI-4210372:** fix types field in modules ([68ac126](https://github.com/Pxs-Corporate/react-native-lavender/commit/68ac12657112473ae9e0e683076b1d9172be9ce6))
25
-
26
- # 0.1.0-alpha.0 (2025-08-13)
27
-
28
- ### Bug Fixes
29
-
30
- - **BCRI-3807748:** fix checkbox android native crash ([f358872](https://github.com/Pxs-Corporate/react-native-lavender/commit/f3588725a8a7440722b6fc13a5586da2da758ea0))
31
-
32
- ### Features
33
-
34
- - **BCRI-000000:** remove default E2E on DEV env build for all components ([a5d27bf](https://github.com/Pxs-Corporate/react-native-lavender/commit/a5d27bfaaebf5b75f3160f31c64b590b7bd00b93))
35
- - **BCRI-3651768:** selectable box module ([20a18ab](https://github.com/Pxs-Corporate/react-native-lavender/commit/20a18ab36049889d8860395a3e6ced9469bd6c0c))
36
- - **BCRI-3810979:** tile components ([46fc5c7](https://github.com/Pxs-Corporate/react-native-lavender/commit/46fc5c7a0ddff6c2db43fba0de9929626092f265))
37
- - **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))
38
- - **BCRI-4210372:** fix bad version numbers ([bc6a8ba](https://github.com/Pxs-Corporate/react-native-lavender/commit/bc6a8ba48c15347442f2ac38dacae7ffba3d95eb))
39
-
40
- # (2025-08-13)
41
-
42
- ### Bug Fixes
43
-
44
- - **BCRI-3807748:** fix checkbox android native crash ([f358872](https://github.com/Pxs-Corporate/react-native-lavender/commit/f3588725a8a7440722b6fc13a5586da2da758ea0))
45
-
46
- ### Features
47
-
48
- - **BCRI-000000:** remove default E2E on DEV env build for all components ([a5d27bf](https://github.com/Pxs-Corporate/react-native-lavender/commit/a5d27bfaaebf5b75f3160f31c64b590b7bd00b93))
49
- - **BCRI-3651768:** selectable box module ([20a18ab](https://github.com/Pxs-Corporate/react-native-lavender/commit/20a18ab36049889d8860395a3e6ced9469bd6c0c))
50
- - **BCRI-3810979:** tile components ([46fc5c7](https://github.com/Pxs-Corporate/react-native-lavender/commit/46fc5c7a0ddff6c2db43fba0de9929626092f265))
51
- - **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))
package/src/PxSelectableBox.tsx DELETED
@@ -1,185 +0,0 @@
1
- import React, { ReactNode } from 'react';
2
- import {
3
- AccessibilityProps,
4
- StyleProp,
5
- StyleSheet,
6
- TouchableOpacity,
7
- View,
8
- ViewStyle,
9
- } from 'react-native';
10
- import { a11y, e2eID } from '@proximus/lavender-common-native';
11
- import { PxRadioButton } from '@proximus/lavender-radio-native';
12
- import { PxCheckBox } from '@proximus/lavender-checkbox-native';
13
- import { useTheme } from '@proximus/lavender-styling-native';
14
- import { Body, Header } from '@proximus/lavender-texts-native';
15
-
16
- export interface ISelectableBoxProps {
17
- selected: boolean;
18
- label: string;
19
- onPress: (val: boolean) => void;
20
- withCheckbox?: boolean;
21
- containerStyle?: StyleProp<ViewStyle>;
22
- disabled?: boolean;
23
- locked?: boolean;
24
- priceComponent?: ReactNode;
25
- contentComponent?: ReactNode;
26
- description?: string;
27
- testID?: string;
28
- wrapperStyle?: StyleProp<ViewStyle>;
29
- }
30
-
31
- export function PxSelectableBox({
32
- selected,
33
- label,
34
- onPress,
35
- containerStyle,
36
- withCheckbox,
37
- disabled = false,
38
- locked,
39
- priceComponent,
40
- contentComponent,
41
- description,
42
- testID = 'selectableBox',
43
- ...accessibilityProps
44
- }: ISelectableBoxProps & AccessibilityProps) {
45
- const { theme } = useTheme();
46
-
47
- const accessibilityRole = locked
48
- ? 'text'
49
- : withCheckbox
50
- ? 'checkbox'
51
- : 'radio';
52
- const accessibilityHint = `Selectable Item ${label}, checked: ${selected}`;
53
-
54
- const colors = {
55
- uncheckedBorderColor: theme.t('ColorBorderMainDefault'),
56
- backgroundColor: theme.t('ColorBackgroundContainerLightDefault'),
57
- focusBorderColor: theme.t('ColorBorderBrandDefault'),
58
- disabledBackgroundColor: theme.t('ColorBackgroundStateDisabledDefault'),
59
- defaultLabel: theme.t('ColorTextNeutralDefault'),
60
- uncheckedLabel: theme.t('ColorTextNeutralDefault'),
61
- borderColor: theme.t('ColorBorderBrandDefault'),
62
- };
63
-
64
- return (
65
- <TouchableOpacity
66
- onPress={() => {
67
- onPress?.(!selected);
68
- }}
69
- style={[{ width: '100%' }, containerStyle]}
70
- disabled={disabled || locked}
71
- {...e2eID(testID)}
72
- {...a11y({
73
- accessible: true,
74
- accessibilityRole,
75
- accessibilityHint,
76
- accessibilityLabel: label,
77
- accessibilityState: {
78
- checked: selected,
79
- disabled: disabled || locked,
80
- },
81
- ...accessibilityProps,
82
- })}
83
- >
84
- <View
85
- style={[
86
- styles.container,
87
- {
88
- borderColor: selected
89
- ? colors.borderColor
90
- : colors.uncheckedBorderColor,
91
- backgroundColor: colors.backgroundColor,
92
- },
93
- disabled && {
94
- borderWidth: 0,
95
- backgroundColor: colors.disabledBackgroundColor,
96
- },
97
- locked && {
98
- borderColor: colors.borderColor,
99
- },
100
- ]}
101
- {...a11y({
102
- accessible: true,
103
- accessibilityRole,
104
- accessibilityHint,
105
- })}
106
- >
107
- <View style={styles.topContentContainer}>
108
- <View style={styles.topContainer}>
109
- {withCheckbox ? (
110
- <PxCheckBox
111
- onChange={onPress}
112
- checked={selected}
113
- disabled={disabled}
114
- />
115
- ) : (
116
- <PxRadioButton
117
- onPress={() => onPress?.(!selected)}
118
- checked={selected}
119
- disabled={disabled}
120
- />
121
- )}
122
- <View style={styles.textContainer}>
123
- <Header
124
- textBreakStrategy={'balanced'}
125
- accessible={true}
126
- style={[
127
- styles.title,
128
- {
129
- color: !selected
130
- ? colors.uncheckedLabel
131
- : colors.defaultLabel,
132
- },
133
- ]}
134
- >
135
- {label}
136
- </Header>
137
- <Body style={styles.description}>{description}</Body>
138
- </View>
139
- </View>
140
- {contentComponent && (
141
- <View style={{ marginTop: 16 }}>{contentComponent}</View>
142
- )}
143
- </View>
144
-
145
- {priceComponent && (
146
- <View style={styles.priceComponent}>{priceComponent}</View>
147
- )}
148
- </View>
149
- </TouchableOpacity>
150
- );
151
- }
152
-
153
- const styles = StyleSheet.create({
154
- container: {
155
- flexDirection: 'row',
156
- borderWidth: 2,
157
- borderRadius: 12,
158
- },
159
- title: {
160
- fontSize: 14,
161
- },
162
- priceComponent: {
163
- padding: 8,
164
- alignItems: 'center',
165
- justifyContent: 'center',
166
- },
167
- description: {
168
- fontSize: 12,
169
- },
170
- topContentContainer: {
171
- padding: 16,
172
- flex: 1,
173
- },
174
- topContainer: {
175
- flexDirection: 'row',
176
- alignItems: 'center',
177
- justifyContent: 'flex-start',
178
- },
179
- textContainer: {
180
- flexDirection: 'column',
181
- marginHorizontal: 16,
182
- justifyContent: 'center',
183
- flex: 1,
184
- },
185
- });
package/tsconfig.json DELETED
@@ -1,8 +0,0 @@
1
- {
2
- "extends": "../../../tsconfig.npm.json",
3
- "compilerOptions": {
4
- "outDir": "dist",
5
- },
6
- "include": ["src","../../../lib.d.ts"],
7
- "exclude": ["dist", "node_modules", "src/**/*.test.ts", "src/**/*.spec.ts"]
8
- }
/package/{src/index.ts → dist/index.js} RENAMED
File without changes