Skip to content

Commit f10571c

Browse files
ethansharnitzanyiz
ethanshar
and
nitzanyiz
authored
Docs/example fixes (#3687)
* Avoid rendering test component in docs * Improve chip example code * Enhance RadioButton and RadioGroup examples with additional options and improved layout * Fix markdown content issues * Improve ChipsInput snippet * Update ColorPalette snippet to include a functional example with state management * Refactor ColorPicker snippet to include a functional example with state management * Enhance SegmentedControl API documentation and snippet examples for clarity and consistency * Update Stepper snippet to include a functional example with minValue and maxValue props * Remove snippet placeholders --------- Co-authored-by: Nitzan Yizhar <nitzany@wix.com>
1 parent 27e1cfa commit f10571c

File tree

13 files changed

+93
-54
lines changed

13 files changed

+93
-54
lines changed

‎docuilib/src/theme/ReactLiveScope/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Card from 'react-native-ui-lib/card';
1010
import Carousel from 'react-native-ui-lib/carousel';
1111
import Checkbox from 'react-native-ui-lib/checkbox';
1212
import Chip from 'react-native-ui-lib/chip';
13+
import ChipsInput from 'react-native-ui-lib/chipsInput';
1314
import ColorPalette from 'react-native-ui-lib/colorPalette';
1415
import ColorPicker from 'react-native-ui-lib/colorPicker';
1516
import ColorSwatch from 'react-native-ui-lib/colorSwatch';
@@ -87,6 +88,7 @@ const ReactLiveScope = {
8788
Carousel,
8889
Checkbox,
8990
Chip,
91+
ChipsInput,
9092
ColorPalette,
9193
ColorPicker,
9294
Colors,

‎scripts/docs/buildDocsCommon.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ const VALID_COMPONENTS_CATEGORIES = [
2626
'incubator',
2727
'infra',
2828
// 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)
3031
];
3132

3233
function buildDocs(apiFolders, componentsPreProcess) {

‎src/components/chip/chip.api.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,12 @@
5353
{"name": "testID", "type": "string", "description": "The test id for e2e tests"}
5454
],
5555
"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>"
5763
]
5864
}

‎src/components/chipsInput/chipsInput.api.json

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,20 @@
3535
}
3636
],
3737
"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+
"}"
4252
],
4353
"docs": {
4454
"hero": {

‎src/components/colorPalette/ColorPalette.api.json

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,18 @@
7979
}
8080
],
8181
"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+
"}"
8794
],
8895
"docs": {
8996
"hero": {

‎src/components/colorPicker/colorPicker.api.json

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,22 @@
4747
}
4848
],
4949
"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+
"}"
5866
],
5967
"docs": {
6068
"hero": {
@@ -77,7 +85,7 @@
7785
"items": [
7886
{
7987
"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. ",
8189
"content": [
8290
{
8391
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_usage1.png"
@@ -113,7 +121,7 @@
113121
"items": [
114122
{
115123
"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. ",
117125
"content": [
118126
{
119127
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex1.png"
@@ -122,7 +130,7 @@
122130
},
123131
{
124132
"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. ",
126134
"content": [
127135
{
128136
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex2.png"

‎src/components/radioButton/radioButton.api.json

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -87,11 +87,15 @@
8787
],
8888
"snippet": [
8989
"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);",
9193
" 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>",
9599
" );",
96100
"}"
97101
],

‎src/components/radioGroup/radioGroup.api.json

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,15 @@
2323
],
2424
"snippet": [
2525
"function Example(props) {",
26-
" const [currentValue, setCurrentValue] = useState('yes'$1);",
26+
" const [currentValue, setCurrentValue] = useState('yes');",
2727
" 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'}/>",
3233
" </RadioGroup>",
33-
" </div>",
34+
" </View>",
3435
" );",
3536
"}"
3637
]

‎src/components/segmentedControl/segmentedControl.api.json

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -96,18 +96,22 @@
9696
"description": "Pass props for the SegmentedControl label"
9797
},
9898
{
99-
"name":"preset",
99+
"name": "preset",
100100
"type": "SegmentedControlPreset",
101101
"description": "Preset of the SegmentedControl [default, form]"
102102
}
103103
],
104104
"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>"
106110
],
107111
"docs": {
108112
"hero": {
109113
"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.",
111115
"type": "hero",
112116
"layout": "horizontal",
113117
"content": [
@@ -131,10 +135,7 @@
131135
},
132136
{
133137
"type": "table",
134-
"columns": [
135-
"Property",
136-
"Preview"
137-
],
138+
"columns": ["Property", "Preview"],
138139
"items": [
139140
{
140141
"title": "Default",
@@ -147,7 +148,7 @@
147148
},
148149
{
149150
"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\"",
151152
"content": [
152153
{
153154
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SegmentedControl/segmentedControl_style_form.png"
@@ -159,10 +160,7 @@
159160
},
160161
{
161162
"type": "table",
162-
"columns": [
163-
"Property",
164-
"Preview"
165-
],
163+
"columns": ["Property", "Preview"],
166164
"items": [
167165
{
168166
"title": "Full width",

‎src/components/slider/slider.api.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@
227227
}
228228
],
229229
"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**"
231231
},
232232
{
233233
"type": "section",
@@ -237,7 +237,7 @@
237237
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_range.png"
238238
}
239239
],
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"
241241
}
242242
]
243243
}

‎src/components/stepper/stepper.api.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,9 @@
5858
}
5959
],
6060
"snippet": [
61-
"<Stepper$1/>"
61+
"<View flex center>",
62+
"<Stepper minValue={0} maxValue={5}/>",
63+
"</View>"
6264
],
6365
"docs": {
6466
"hero": {

‎src/components/test.api.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "Tests",
3-
"category": "basic",
3+
"category": "dev",
44
"description": "This is just a tests page for the new docs component page",
55
"extends": [
66
"Text",

‎src/incubator/slider/slider.api.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,10 @@
100100
],
101101
"snippet": [
102102
"<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}\\`)}",
107107
"/>"
108108
],
109109
"docs": {
@@ -187,7 +187,7 @@
187187
}
188188
],
189189
"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**"
191191
},
192192
{
193193
"type": "section",
@@ -197,7 +197,7 @@
197197
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_range.png"
198198
}
199199
],
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"
201201
}
202202
]
203203
}

0 commit comments

Comments
 (0)