Skip to content

Docs/example fixes #3687

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Docs/example fixes #3687

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a1ce5ac
Avoid rendering test component in docs
ethanshar Apr 20, 2025
1d0f3f1
Improve chip example code
ethanshar Apr 20, 2025
0588125
Enhance RadioButton and RadioGroup examples with additional options a…
ethanshar Apr 20, 2025
9da38c0
Fix markdown content issues
ethanshar Apr 20, 2025
2a2089c
Improve ChipsInput snippet
ethanshar Apr 20, 2025
842a79b
Update ColorPalette snippet to include a functional example with stat…
ethanshar Apr 20, 2025
c9e73b0
Refactor ColorPicker snippet to include a functional example with sta…
ethanshar Apr 20, 2025
aed1baa
Enhance SegmentedControl API documentation and snippet examples for c…
ethanshar Apr 20, 2025
7e9f2f2
Update Stepper snippet to include a functional example with minValue …
ethanshar Apr 20, 2025
1a3867f
Remove snippet placeholders
ethanshar Apr 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docuilib/src/theme/ReactLiveScope/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Card from 'react-native-ui-lib/card';
import Carousel from 'react-native-ui-lib/carousel';
import Checkbox from 'react-native-ui-lib/checkbox';
import Chip from 'react-native-ui-lib/chip';
import ChipsInput from 'react-native-ui-lib/chipsInput';
import ColorPalette from 'react-native-ui-lib/colorPalette';
import ColorPicker from 'react-native-ui-lib/colorPicker';
import ColorSwatch from 'react-native-ui-lib/colorSwatch';
Expand Down Expand Up @@ -87,6 +88,7 @@ const ReactLiveScope = {
Carousel,
Checkbox,
Chip,
ChipsInput,
ColorPalette,
ColorPicker,
Colors,
Expand Down
3 changes: 2 additions & 1 deletion scripts/docs/buildDocsCommon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ const VALID_COMPONENTS_CATEGORIES = [
'incubator',
'infra',
// non components categories
'services'
'services',
'dev' // development category for components we don't want to render in our docs (used in test.api.json)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to add this to the sidebars? Perhaps only in the next version?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How do you recommend doing it only for next?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can add it to

react-native-ui-lib/docuilib/sidebars.js

Lines 26 to 28 in 2015fa0

incubator: 'Incubator',
infra: 'Infra'
};

Now that I see there a huge difference between the design of the sidebars in the regular version then in the next version. In the regular version theres dividers and such.
I guess it was added here manually. we'll have to adjust the sidebars script to generate that, we need to add that to the components sidebar. I'll create a pr.

    {
      type: 'category',
      label: 'Incubator',
      collapsible: false,
      items: [
        {
          type: 'autogenerated',
          dirName: `components/infra`
        }
      ]
    },
    {
      type: 'category',
      label: 'Infra',
      collapsible: false,
      items: [
        {
          type: 'autogenerated',
          dirName: `components/infra`
        }
      ]
    }

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#3690

];

function buildDocs(apiFolders, componentsPreProcess) {
Expand Down
8 changes: 7 additions & 1 deletion src/components/chip/chip.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,12 @@
{"name": "testID", "type": "string", "description": "The test id for e2e tests"}
],
"snippet": [
"<Chip label={'Chip'$1} onPress={() => console.log('pressed')$2}/>"
"<View flex center gap-s4>",
"<Chip label={'Chip'} onPress={() => console.log('pressed')}/>",
"<Chip label={'Square'} borderRadius={2} backgroundColor={Colors.blue50}/>",
"<Chip label={'Badge'} badgeProps={{label: '2', backgroundColor: Colors.red30}}/>",
"<Chip label={'Avatar'} avatarProps={{source: {uri: 'https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/avatar_1.jpg'}}}/>",
"<Chip label={'Accessories'} rightElement={<Icon source={Assets.icons.demo.chevronRight}/>}/>",
"</View>"
]
}
18 changes: 14 additions & 4 deletions src/components/chipsInput/chipsInput.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,19 @@
{"name": "maxChips", "type": "number", "description": "The maximum chips to allow adding"}
],
"snippet": [
"<ChipsInput",
" placeholder={'Placeholder'$1}",
" chips={[{label: 'Falcon 9'}, {label: 'Enterprise'}, {label: 'Challenger', borderRadius: 0}]$2}",
"/>"
"function Example(props) {",
" const [chips, setChips] = useState([{label: 'Falcon 9'}, {label: 'Enterprise'}]);",

" return (",
" <View flex padding-s5>",
" <ChipsInput",
" onChange={setChips}",
" placeholder={'Placeholder'}",
" defaultChipProps={{borderRadius: 0}}",
" chips={chips}",
" />",
" </View>",
" );",
"}"
]
}
17 changes: 12 additions & 5 deletions src/components/colorPalette/ColorPalette.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,18 @@
}
],
"snippet": [
"<ColorPalette",
" colors={['transparent', Colors.green30, Colors.yellow30, Colors.red30]$1}",
" value={selectedColor$2}",
" onValueChange={() => console.log('value changed')$3}",
"/>"
"function Example(props) {",
" const [value, setValue] = useState(Colors.yellow30);",
" return (",
" <View flex padding-s5 gap-s4>",
" <ColorPalette",
" colors={['transparent', Colors.green30, Colors.yellow30, Colors.red30]}",
" value={value}",
" onValueChange={setValue}",
" />",
" </View>",
" );",
"}"
],
"docs": {
"hero": {
Expand Down
30 changes: 19 additions & 11 deletions src/components/colorPicker/colorPicker.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,22 @@
}
],
"snippet": [
"<ColorPicker",
" colors={[Colors.green10, Colors.green20, Colors.green30, Colors.green40, Colors.green50, Colors.green60, Colors.green70]$1}",
" initialColor={Colors.green10$2}",
" value={currentColor$3}",
" onDismiss={() => console.log('dismissed')$4}",
" onSubmit={() => console.log('submit')$5}",
" onValueChange={() => console.log('value changed')$6}",
"/>"
"function Example(props) {",
" const [colors, setColors] = useState([Colors.green30, Colors.yellow30, Colors.red30]);",
" const [color, setColor] = useState();",
" return (",
" <View flex padding-s5>",
" <ColorPicker",
" colors={colors}",
" initialColor={Colors.green10}",
" value={color}",
" onDismiss={() => console.log('dismissed')}",
" onSubmit={(newColor) => setColors([newColor, ...colors])}",
" onValueChange={setColor}",
" />",
" </View>",
" );",
"}"
],
"docs": {
"hero": {
Expand All @@ -77,7 +85,7 @@
"items": [
{
"title": "",
"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. ",
"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. ",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_usage1.png"
Expand Down Expand Up @@ -113,7 +121,7 @@
"items": [
{
"title": "",
"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. ",
"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. ",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex1.png"
Expand All @@ -122,7 +130,7 @@
},
{
"title": "",
"description": "markdown:3. ‘#’ symbol is permanent and cant be deleted. \n4. Once hex value is valid (6 characters), background color changes accordingly. ",
"description": "markdown: 3. ‘#’ symbol is permanent and cant be deleted. \n4. Once hex value is valid (6 characters), background color changes accordingly. ",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex2.png"
Expand Down
12 changes: 8 additions & 4 deletions src/components/radioButton/radioButton.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,11 +87,15 @@
],
"snippet": [
"function Example(props) {",
" const [value, setValue] = useState(false$1);",
" const [value, setValue] = useState(false);",
" const [value2, setValue2] = useState(false);",
" const [value3, setValue3] = useState(false);",
" return (",
" <div>",
" <RadioButton label={'Individual Radio Button'} selected={value$2} onPress={() => setValue(!value)$3}/>",
" </div>",
" <View flex padding-s5 gap-s4>",
" <RadioButton label={'Radio Button'} selected={value} onPress={() => setValue(!value)}/>",
" <RadioButton label={'Green Radio Button'} color={Colors.green30} selected={value2} onPress={() => setValue2(!value2)}/>",
" <RadioButton label={'Square Radio Button'} borderRadius={0} size={20} selected={value3} onPress={() => setValue3(!value3)}/>",
" </View>",
" );",
"}"
],
Expand Down
13 changes: 7 additions & 6 deletions src/components/radioGroup/radioGroup.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,15 @@
],
"snippet": [
"function Example(props) {",
" const [currentValue, setCurrentValue] = useState('yes'$1);",
" const [currentValue, setCurrentValue] = useState('yes');",
" return (",
" <div>",
" <RadioGroup initialValue={currentValue$2} onValueChange={setCurrentValue$3}>",
" <RadioButton value={'yes'$4} label={'Yes'$5}/>",
" <RadioButton marginT-10 value={'no'$6} label={'No'$7}/>",
" <View flex padding-s5>",
" <RadioGroup initialValue={currentValue} onValueChange={setCurrentValue} gap-s4>",
" <RadioButton value={'yes'} label={'Yes'}/>",
" <RadioButton value={'no'} label={'No'}/>",
" <RadioButton value={'maybe'} label={'Maybe'}/>",
" </RadioGroup>",
" </div>",
" </View>",
" );",
"}"
]
Expand Down
22 changes: 10 additions & 12 deletions src/components/segmentedControl/segmentedControl.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,18 +96,22 @@
"description": "Pass props for the SegmentedControl label"
},
{
"name":"preset",
"name": "preset",
"type": "SegmentedControlPreset",
"description": "Preset of the SegmentedControl [default, form]"
}
],
"snippet": [
"<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}]$1}/>"
"<View flex padding-s5 gap-s4>",
"<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]}/>",
"<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]} preset='form'/>",
"<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]} borderRadius={12} outlineColor={Colors.yellow30} outlineWidth={3} activeColor={Colors.yellow20}/>",
"</View>"
],
"docs": {
"hero": {
"title": "SegmentedControl",
"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.",
"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.",
"type": "hero",
"layout": "horizontal",
"content": [
Expand All @@ -131,10 +135,7 @@
},
{
"type": "table",
"columns": [
"Property",
"Preview"
],
"columns": ["Property", "Preview"],
"items": [
{
"title": "Default",
Expand All @@ -147,7 +148,7 @@
},
{
"title": "Form",
"description": "markdown:\nSuitable for form or settings screens, matches with other related components such as textField, Picker and others. \n preset=\"form\"",
"description": "Suitable for form or settings screens, matches with other related components such as textField, Picker and others. \n preset=\"form\"",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SegmentedControl/segmentedControl_style_form.png"
Expand All @@ -159,10 +160,7 @@
},
{
"type": "table",
"columns": [
"Property",
"Preview"
],
"columns": ["Property", "Preview"],
"items": [
{
"title": "Full width",
Expand Down
4 changes: 2 additions & 2 deletions src/components/slider/slider.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@
}
],
"title": "Spec",
"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**"
"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**"
},
{
"type": "section",
Expand All @@ -237,7 +237,7 @@
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_range.png"
}
],
"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"
"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"
}
]
}
Expand Down
4 changes: 3 additions & 1 deletion src/components/stepper/stepper.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,9 @@
}
],
"snippet": [
"<Stepper$1/>"
"<View flex center>",
"<Stepper minValue={0} maxValue={5}/>",
"</View>"
],
"docs": {
"hero": {
Expand Down
2 changes: 1 addition & 1 deletion src/components/test.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "Tests",
"category": "basic",
"category": "dev",
"description": "This is just a tests page for the new docs component page",
"extends": [
"Text",
Expand Down
12 changes: 6 additions & 6 deletions src/incubator/slider/slider.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,10 +100,10 @@
],
"snippet": [
"<Incubator.Slider",
" value={0$1}",
" minimumValue={0$2}",
" maximumValue={10$3}",
" onValueChange={value => console.log(\\`value changed: \\${value}\\`)$4}",
" value={0}",
" minimumValue={0}",
" maximumValue={10}",
" onValueChange={value => console.log(\\`value changed: \\${value}\\`)}",
"/>"
],
"docs": {
Expand Down Expand Up @@ -187,7 +187,7 @@
}
],
"title": "Spec",
"description": "**Linear slider**\n\n**Default**\nThumb: 24px \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
"description": "markdown: **Linear slider**\n\n**Default**\nThumb: 24px \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
},
{
"type": "section",
Expand All @@ -197,7 +197,7 @@
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_range.png"
}
],
"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"
"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"
}
]
}
Expand Down