react-native-ui-lib 7.40.1-snapshot.6853 → 7.40.1-snapshot.6855

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 (13) hide show
  1. package/package.json +1 -1
  2. package/scripts/docs/buildDocsCommon.js +2 -1
  3. package/src/components/chip/chip.api.json +7 -1
  4. package/src/components/chipsInput/chipsInput.api.json +14 -4
  5. package/src/components/colorPalette/ColorPalette.api.json +12 -5
  6. package/src/components/colorPicker/colorPicker.api.json +19 -11
  7. package/src/components/radioButton/radioButton.api.json +8 -4
  8. package/src/components/radioGroup/radioGroup.api.json +7 -6
  9. package/src/components/segmentedControl/segmentedControl.api.json +10 -12
  10. package/src/components/slider/slider.api.json +2 -2
  11. package/src/components/stepper/stepper.api.json +3 -1
  12. package/src/components/test.api.json +1 -1
  13. package/src/incubator/slider/slider.api.json +6 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-ui-lib",
3
- "version": "7.40.1-snapshot.6853",
3
+ "version": "7.40.1-snapshot.6855",
4
4
  "main": "src/index.js",
5
5
  "types": "src/index.d.ts",
6
6
  "author": "Ethan Sharabi <ethan.shar@gmail.com>",
package/scripts/docs/buildDocsCommon.js CHANGED
@@ -26,7 +26,8 @@ const VALID_COMPONENTS_CATEGORIES = [
26
26
  'incubator',
27
27
  'infra',
28
28
  // non components categories
29
- 'services'
29
+ 'services',
30
+ 'dev' // development category for components we don't want to render in our docs (used in test.api.json)
30
31
  ];
31
32
 
32
33
  function buildDocs(apiFolders, componentsPreProcess) {
package/src/components/chip/chip.api.json CHANGED
@@ -53,6 +53,12 @@
53
53
  {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
54
54
  ],
55
55
  "snippet": [
56
- "<Chip label={'Chip'$1} onPress={() => console.log('pressed')$2}/>"
56
+ "<View flex center gap-s4>",
57
+ "<Chip label={'Chip'} onPress={() => console.log('pressed')}/>",
58
+ "<Chip label={'Square'} borderRadius={2} backgroundColor={Colors.blue50}/>",
59
+ "<Chip label={'Badge'} badgeProps={{label: '2', backgroundColor: Colors.red30}}/>",
60
+ "<Chip label={'Avatar'} avatarProps={{source: {uri: 'https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/avatar_1.jpg'}}}/>",
61
+ "<Chip label={'Accessories'} rightElement={<Icon source={Assets.icons.demo.chevronRight}/>}/>",
62
+ "</View>"
57
63
  ]
58
64
  }
package/src/components/chipsInput/chipsInput.api.json CHANGED
@@ -35,10 +35,20 @@
35
35
  }
36
36
  ],
37
37
  "snippet": [
38
- "<ChipsInput",
39
- " placeholder={'Placeholder'$1}",
40
- " chips={[{label: 'Falcon 9'}, {label: 'Enterprise'}, {label: 'Challenger', borderRadius: 0}]$2}",
41
- "/>"
38
+ "function Example(props) {",
39
+ " const [chips, setChips] = useState([{label: 'Falcon 9'}, {label: 'Enterprise'}]);",
40
+
41
+ " return (",
42
+ " <View flex padding-s5>",
43
+ " <ChipsInput",
44
+ " onChange={setChips}",
45
+ " placeholder={'Placeholder'}",
46
+ " defaultChipProps={{borderRadius: 0}}",
47
+ " chips={chips}",
48
+ " />",
49
+ " </View>",
50
+ " );",
51
+ "}"
42
52
  ],
43
53
  "docs": {
44
54
  "hero": {
package/src/components/colorPalette/ColorPalette.api.json CHANGED
@@ -79,11 +79,18 @@
79
79
  }
80
80
  ],
81
81
  "snippet": [
82
- "<ColorPalette",
83
- " colors={['transparent', Colors.green30, Colors.yellow30, Colors.red30]$1}",
84
- " value={selectedColor$2}",
85
- " onValueChange={() => console.log('value changed')$3}",
86
- "/>"
82
+ "function Example(props) {",
83
+ " const [value, setValue] = useState(Colors.yellow30);",
84
+ " return (",
85
+ " <View flex padding-s5 gap-s4>",
86
+ " <ColorPalette",
87
+ " colors={['transparent', Colors.green30, Colors.yellow30, Colors.red30]}",
88
+ " value={value}",
89
+ " onValueChange={setValue}",
90
+ " />",
91
+ " </View>",
92
+ " );",
93
+ "}"
87
94
  ],
88
95
  "docs": {
89
96
  "hero": {
package/src/components/colorPicker/colorPicker.api.json CHANGED
@@ -47,14 +47,22 @@
47
47
  }
48
48
  ],
49
49
  "snippet": [
50
- "<ColorPicker",
51
- " colors={[Colors.green10, Colors.green20, Colors.green30, Colors.green40, Colors.green50, Colors.green60, Colors.green70]$1}",
52
- " initialColor={Colors.green10$2}",
53
- " value={currentColor$3}",
54
- " onDismiss={() => console.log('dismissed')$4}",
55
- " onSubmit={() => console.log('submit')$5}",
56
- " onValueChange={() => console.log('value changed')$6}",
57
- "/>"
50
+ "function Example(props) {",
51
+ " const [colors, setColors] = useState([Colors.green30, Colors.yellow30, Colors.red30]);",
52
+ " const [color, setColor] = useState();",
53
+ " return (",
54
+ " <View flex padding-s5>",
55
+ " <ColorPicker",
56
+ " colors={colors}",
57
+ " initialColor={Colors.green10}",
58
+ " value={color}",
59
+ " onDismiss={() => console.log('dismissed')}",
60
+ " onSubmit={(newColor) => setColors([newColor, ...colors])}",
61
+ " onValueChange={setColor}",
62
+ " />",
63
+ " </View>",
64
+ " );",
65
+ "}"
58
66
  ],
59
67
  "docs": {
60
68
  "hero": {
@@ -77,7 +85,7 @@
77
85
  "items": [
78
86
  {
79
87
  "title": "",
80
- "description": "markdown:1. Tapping 'Add New' in the Color Palette opens a color picker dialog.
 \n2. Using HLS controls (or even typing actual HEX value) user can achieve any color. ",
88
+ "description": "markdown: 1. Tapping 'Add New' in the Color Palette opens a color picker dialog.
 \n2. Using HLS controls (or even typing actual HEX value) user can achieve any color. ",
81
89
  "content": [
82
90
  {
83
91
  "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_usage1.png"
@@ -113,7 +121,7 @@
113
121
  "items": [
114
122
  {
115
123
  "title": "",
116
- "description": "markdown:1. Tapping on the HEX value will “activate” the input field (Main Input) and display the keyboard. New color can be created either by typing a hex value or by pasting a specific value. \n2. Until new valid hex value is provided, the initial color background is kept. Hex value is highlighted with either white at 25% or black at 25%, depending on the background color. ",
124
+ "description": "markdown: 1. Tapping on the HEX value will “activate” the input field (Main Input) and display the keyboard. New color can be created either by typing a hex value or by pasting a specific value. \n2. Until new valid hex value is provided, the initial color background is kept. Hex value is highlighted with either white at 25% or black at 25%, depending on the background color. ",
117
125
  "content": [
118
126
  {
119
127
  "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex1.png"
@@ -122,7 +130,7 @@
122
130
  },
123
131
  {
124
132
  "title": "",
125
- "description": "markdown:3. ‘#’ symbol is permanent and cant be deleted. \n4. Once hex value is valid (6 characters), background color changes accordingly. ",
133
+ "description": "markdown: 3. ‘#’ symbol is permanent and cant be deleted. \n4. Once hex value is valid (6 characters), background color changes accordingly. ",
126
134
  "content": [
127
135
  {
128
136
  "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex2.png"
package/src/components/radioButton/radioButton.api.json CHANGED
@@ -87,11 +87,15 @@
87
87
  ],
88
88
  "snippet": [
89
89
  "function Example(props) {",
90
- " const [value, setValue] = useState(false$1);",
90
+ " const [value, setValue] = useState(false);",
91
+ " const [value2, setValue2] = useState(false);",
92
+ " const [value3, setValue3] = useState(false);",
91
93
  " return (",
92
- " <div>",
93
- " <RadioButton label={'Individual Radio Button'} selected={value$2} onPress={() => setValue(!value)$3}/>",
94
- " </div>",
94
+ " <View flex padding-s5 gap-s4>",
95
+ " <RadioButton label={'Radio Button'} selected={value} onPress={() => setValue(!value)}/>",
96
+ " <RadioButton label={'Green Radio Button'} color={Colors.green30} selected={value2} onPress={() => setValue2(!value2)}/>",
97
+ " <RadioButton label={'Square Radio Button'} borderRadius={0} size={20} selected={value3} onPress={() => setValue3(!value3)}/>",
98
+ " </View>",
95
99
  " );",
96
100
  "}"
97
101
  ],
package/src/components/radioGroup/radioGroup.api.json CHANGED
@@ -23,14 +23,15 @@
23
23
  ],
24
24
  "snippet": [
25
25
  "function Example(props) {",
26
- " const [currentValue, setCurrentValue] = useState('yes'$1);",
26
+ " const [currentValue, setCurrentValue] = useState('yes');",
27
27
  " return (",
28
- " <div>",
29
- " <RadioGroup initialValue={currentValue$2} onValueChange={setCurrentValue$3}>",
30
- " <RadioButton value={'yes'$4} label={'Yes'$5}/>",
31
- " <RadioButton marginT-10 value={'no'$6} label={'No'$7}/>",
28
+ " <View flex padding-s5>",
29
+ " <RadioGroup initialValue={currentValue} onValueChange={setCurrentValue} gap-s4>",
30
+ " <RadioButton value={'yes'} label={'Yes'}/>",
31
+ " <RadioButton value={'no'} label={'No'}/>",
32
+ " <RadioButton value={'maybe'} label={'Maybe'}/>",
32
33
  " </RadioGroup>",
33
- " </div>",
34
+ " </View>",
34
35
  " );",
35
36
  "}"
36
37
  ]
package/src/components/segmentedControl/segmentedControl.api.json CHANGED
@@ -96,18 +96,22 @@
96
96
  "description": "Pass props for the SegmentedControl label"
97
97
  },
98
98
  {
99
- "name":"preset",
99
+ "name": "preset",
100
100
  "type": "SegmentedControlPreset",
101
101
  "description": "Preset of the SegmentedControl [default, form]"
102
102
  }
103
103
  ],
104
104
  "snippet": [
105
- "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}]$1}/>"
105
+ "<View flex padding-s5 gap-s4>",
106
+ "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]}/>",
107
+ "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]} preset='form'/>",
108
+ "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]} borderRadius={12} outlineColor={Colors.yellow30} outlineWidth={3} activeColor={Colors.yellow20}/>",
109
+ "</View>"
106
110
  ],
107
111
  "docs": {
108
112
  "hero": {
109
113
  "title": "SegmentedControl",
110
- "description": "A segmented control is a linear set of two or more segments.
Segmented control is often used to display and switch between different views.",
114
+ "description": "A segmented control is a linear set of two or more segments.
Segmented control is often used to display and switch between different views.",
111
115
  "type": "hero",
112
116
  "layout": "horizontal",
113
117
  "content": [
@@ -131,10 +135,7 @@
131
135
  },
132
136
  {
133
137
  "type": "table",
134
- "columns": [
135
- "Property",
136
- "Preview"
137
- ],
138
+ "columns": ["Property", "Preview"],
138
139
  "items": [
139
140
  {
140
141
  "title": "Default",
@@ -147,7 +148,7 @@
147
148
  },
148
149
  {
149
150
  "title": "Form",
150
- "description": "markdown:\nSuitable for form or settings screens, matches with other related components such as textField, Picker and others. \n preset=\"form\"",
151
+ "description": "Suitable for form or settings screens, matches with other related components such as textField, Picker and others. \n preset=\"form\"",
151
152
  "content": [
152
153
  {
153
154
  "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SegmentedControl/segmentedControl_style_form.png"
@@ -159,10 +160,7 @@
159
160
  },
160
161
  {
161
162
  "type": "table",
162
- "columns": [
163
- "Property",
164
- "Preview"
165
- ],
163
+ "columns": ["Property", "Preview"],
166
164
  "items": [
167
165
  {
168
166
  "title": "Full width",
package/src/components/slider/slider.api.json CHANGED
@@ -227,7 +227,7 @@
227
227
  }
228
228
  ],
229
229
  "title": "Spec",
230
- "description": "Markdown:\n\n**Linear slider**\n\n**Default**\nThumb: 24px \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
230
+ "description": "markdown:\n\n**Linear slider**\n\n**Default**\nThumb: 24px \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
231
231
  },
232
232
  {
233
233
  "type": "section",
@@ -237,7 +237,7 @@
237
237
  "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_range.png"
238
238
  }
239
239
  ],
240
- "description": "Markdown:\n\n**Range slider**\n\n**Initial state**\nWidest range is displayed by default.\n\n**Thumbs**\nThumbs should not cross each other and keep minimum distance between them of S2 (8px). Thumbs shouldn’t overlap each other when idle.\n\n**Spacing**\nMinimum spacing between idle Thumbs - S2"
240
+ "description": "markdown:\n\n**Range slider**\n\n**Initial state**\nWidest range is displayed by default.\n\n**Thumbs**\nThumbs should not cross each other and keep minimum distance between them of S2 (8px). Thumbs shouldn’t overlap each other when idle.\n\n**Spacing**\nMinimum spacing between idle Thumbs - S2"
241
241
  }
242
242
  ]
243
243
  }
package/src/components/stepper/stepper.api.json CHANGED
@@ -58,7 +58,9 @@
58
58
  }
59
59
  ],
60
60
  "snippet": [
61
- "<Stepper$1/>"
61
+ "<View flex center>",
62
+ "<Stepper minValue={0} maxValue={5}/>",
63
+ "</View>"
62
64
  ],
63
65
  "docs": {
64
66
  "hero": {
package/src/components/test.api.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "Tests",
3
- "category": "basic",
3
+ "category": "dev",
4
4
  "description": "This is just a tests page for the new docs component page",
5
5
  "extends": [
6
6
  "Text",
package/src/incubator/slider/slider.api.json CHANGED
@@ -100,10 +100,10 @@
100
100
  ],
101
101
  "snippet": [
102
102
  "<Incubator.Slider",
103
- " value={0$1}",
104
- " minimumValue={0$2}",
105
- " maximumValue={10$3}",
106
- " onValueChange={value => console.log(\\`value changed: \\${value}\\`)$4}",
103
+ " value={0}",
104
+ " minimumValue={0}",
105
+ " maximumValue={10}",
106
+ " onValueChange={value => console.log(\\`value changed: \\${value}\\`)}",
107
107
  "/>"
108
108
  ],
109
109
  "docs": {
@@ -187,7 +187,7 @@
187
187
  }
188
188
  ],
189
189
  "title": "Spec",
190
- "description": "**Linear slider**\n\n**Default**\nThumb: 24px \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
190
+ "description": "markdown: **Linear slider**\n\n**Default**\nThumb: 24px \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
191
191
  },
192
192
  {
193
193
  "type": "section",
@@ -197,7 +197,7 @@
197
197
  "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_range.png"
198
198
  }
199
199
  ],
200
- "description": "**Range slider**\n\n**Initial state**\nWidest range is displayed by default.\n\n**Thumbs**\nThumbs should not cross each other and keep minimum distance between them of S2 (8px). Thumbs shouldn’t overlap each other when idle.\n\n**Spacing**\nMinimum spacing between idle Thumbs - S2"
200
+ "description": "markdown: **Range slider**\n\n**Initial state**\nWidest range is displayed by default.\n\n**Thumbs**\nThumbs should not cross each other and keep minimum distance between them of S2 (8px). Thumbs shouldn’t overlap each other when idle.\n\n**Spacing**\nMinimum spacing between idle Thumbs - S2"
201
201
  }
202
202
  ]
203
203
  }