From a1ce5acf7913cbb0c5905a31243e9ab132cfcbc2 Mon Sep 17 00:00:00 2001 From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com> Date: Sun, 20 Apr 2025 14:02:49 +0300 Subject: [PATCH 01/10] Avoid rendering test component in docs --- scripts/docs/buildDocsCommon.js | 3 ++- src/components/test.api.json | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/scripts/docs/buildDocsCommon.js b/scripts/docs/buildDocsCommon.js index 3012c72b32..faa278da79 100644 --- a/scripts/docs/buildDocsCommon.js +++ b/scripts/docs/buildDocsCommon.js @@ -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) ]; function buildDocs(apiFolders, componentsPreProcess) { diff --git a/src/components/test.api.json b/src/components/test.api.json index e5943b166b..875312ce8c 100644 --- a/src/components/test.api.json +++ b/src/components/test.api.json @@ -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", From 1d0f3f170d9392513eebd028343f030f3178ec4e Mon Sep 17 00:00:00 2001 From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com> Date: Sun, 20 Apr 2025 14:02:57 +0300 Subject: [PATCH 02/10] Improve chip example code --- src/components/chip/chip.api.json | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/chip/chip.api.json b/src/components/chip/chip.api.json index 492421721f..9052e3aa1a 100644 --- a/src/components/chip/chip.api.json +++ b/src/components/chip/chip.api.json @@ -53,6 +53,12 @@ {"name": "testID", "type": "string", "description": "The test id for e2e tests"} ], "snippet": [ - " console.log('pressed')$2}/>" + "", + " console.log('pressed')$2}/>", + "", + "", + "", + "}/>", + "" ] } From 058812537ecbb0cabc807551e41dc44103e75414 Mon Sep 17 00:00:00 2001 From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com> Date: Sun, 20 Apr 2025 14:13:12 +0300 Subject: [PATCH 03/10] Enhance RadioButton and RadioGroup examples with additional options and improved layout --- src/components/radioButton/radioButton.api.json | 10 +++++++--- src/components/radioGroup/radioGroup.api.json | 9 +++++---- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/radioButton/radioButton.api.json b/src/components/radioButton/radioButton.api.json index 1dfed8c8cf..4c20f57947 100644 --- a/src/components/radioButton/radioButton.api.json +++ b/src/components/radioButton/radioButton.api.json @@ -88,10 +88,14 @@ "snippet": [ "function Example(props) {", " const [value, setValue] = useState(false$1);", + " const [value2, setValue2] = useState(false$1);", + " const [value3, setValue3] = useState(false$1);", " return (", - "
", - " setValue(!value)$3}/>", - "
", + " ", + " setValue(!value)$3}/>", + " setValue2(!value2)$3}/>", + " setValue3(!value3)$3}/>", + " ", " );", "}" ], diff --git a/src/components/radioGroup/radioGroup.api.json b/src/components/radioGroup/radioGroup.api.json index 70f2fae4a4..74a838105f 100644 --- a/src/components/radioGroup/radioGroup.api.json +++ b/src/components/radioGroup/radioGroup.api.json @@ -25,12 +25,13 @@ "function Example(props) {", " const [currentValue, setCurrentValue] = useState('yes'$1);", " return (", - "
", - " ", + " ", + " ", " ", - " ", + " ", + " ", " ", - "
", + " ", " );", "}" ] From 9da38c0db3f8f5c404d2e63f9bc318d8288c811b Mon Sep 17 00:00:00 2001 From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com> Date: Sun, 20 Apr 2025 14:32:23 +0300 Subject: [PATCH 04/10] Fix markdown content issues --- src/components/slider/slider.api.json | 4 ++-- src/incubator/slider/slider.api.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/slider/slider.api.json b/src/components/slider/slider.api.json index 61de92fda2..307de5642d 100644 --- a/src/components/slider/slider.api.json +++ b/src/components/slider/slider.api.json @@ -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", @@ -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" } ] } diff --git a/src/incubator/slider/slider.api.json b/src/incubator/slider/slider.api.json index ca01367066..52d1d9b979 100644 --- a/src/incubator/slider/slider.api.json +++ b/src/incubator/slider/slider.api.json @@ -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", @@ -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" } ] } From 2a2089cc06cecd5756fa5ddb29848dc02f0efdb8 Mon Sep 17 00:00:00 2001 From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com> Date: Sun, 20 Apr 2025 16:44:06 +0300 Subject: [PATCH 05/10] Improve ChipsInput snippet --- docuilib/src/theme/ReactLiveScope/index.js | 2 ++ src/components/chipsInput/chipsInput.api.json | 18 ++++++++++++++---- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/docuilib/src/theme/ReactLiveScope/index.js b/docuilib/src/theme/ReactLiveScope/index.js index 64529c8e04..ebe7424f41 100644 --- a/docuilib/src/theme/ReactLiveScope/index.js +++ b/docuilib/src/theme/ReactLiveScope/index.js @@ -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'; @@ -87,6 +88,7 @@ const ReactLiveScope = { Carousel, Checkbox, Chip, + ChipsInput, ColorPalette, ColorPicker, Colors, diff --git a/src/components/chipsInput/chipsInput.api.json b/src/components/chipsInput/chipsInput.api.json index 746ce8958a..6981731b54 100644 --- a/src/components/chipsInput/chipsInput.api.json +++ b/src/components/chipsInput/chipsInput.api.json @@ -21,9 +21,19 @@ {"name": "maxChips", "type": "number", "description": "The maximum chips to allow adding"} ], "snippet": [ - "" + "function Example(props) {", + " const [chips, setChips] = useState([{label: 'Falcon 9'}, {label: 'Enterprise'}]);", + + " return (", + " ", + " ", + " ", + " );", + "}" ] } From 842a79b103e0f719d245385a901140b9b6f123cc Mon Sep 17 00:00:00 2001 From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com> Date: Sun, 20 Apr 2025 16:47:53 +0300 Subject: [PATCH 06/10] Update ColorPalette snippet to include a functional example with state management --- .../colorPalette/ColorPalette.api.json | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/colorPalette/ColorPalette.api.json b/src/components/colorPalette/ColorPalette.api.json index a2ead5ff61..8779657ea9 100644 --- a/src/components/colorPalette/ColorPalette.api.json +++ b/src/components/colorPalette/ColorPalette.api.json @@ -79,11 +79,19 @@ } ], "snippet": [ - " console.log('value changed')$3}", - "/>" + + "function Example(props) {", + " const [value, setValue] = useState(Colors.yellow30);", + " return (", + " ", + " ", + " ", + " );", + "}" ], "docs": { "hero": { From c9e73b03eee8e9d14f57a1308dc1e624a287d5e6 Mon Sep 17 00:00:00 2001 From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com> Date: Sun, 20 Apr 2025 16:59:05 +0300 Subject: [PATCH 07/10] Refactor ColorPicker snippet to include a functional example with state management --- .../colorPalette/ColorPalette.api.json | 1 - .../colorPicker/colorPicker.api.json | 30 ++++++++++++------- 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/src/components/colorPalette/ColorPalette.api.json b/src/components/colorPalette/ColorPalette.api.json index 8779657ea9..d92368f73d 100644 --- a/src/components/colorPalette/ColorPalette.api.json +++ b/src/components/colorPalette/ColorPalette.api.json @@ -79,7 +79,6 @@ } ], "snippet": [ - "function Example(props) {", " const [value, setValue] = useState(Colors.yellow30);", " return (", diff --git a/src/components/colorPicker/colorPicker.api.json b/src/components/colorPicker/colorPicker.api.json index b2cfe55846..dc9cbbb1a0 100644 --- a/src/components/colorPicker/colorPicker.api.json +++ b/src/components/colorPicker/colorPicker.api.json @@ -47,14 +47,22 @@ } ], "snippet": [ - " 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 (", + " ", + " console.log('dismissed')$4}", + " onSubmit={(newColor) => setColors([newColor, ...colors])}", + " onValueChange={setColor}", + " />", + " ", + " );", + "}" ], "docs": { "hero": { @@ -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" @@ -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" @@ -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" From aed1baad62a2a1dd53f174e5b6576c9ec5c88f4c Mon Sep 17 00:00:00 2001 From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com> Date: Sun, 20 Apr 2025 17:07:36 +0300 Subject: [PATCH 08/10] Enhance SegmentedControl API documentation and snippet examples for clarity and consistency --- .../segmentedControl.api.json | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/segmentedControl/segmentedControl.api.json b/src/components/segmentedControl/segmentedControl.api.json index 43a8030ee7..af275f8fa5 100644 --- a/src/components/segmentedControl/segmentedControl.api.json +++ b/src/components/segmentedControl/segmentedControl.api.json @@ -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": [ - "" + "", + "", + "", + "", + "" ], "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": [ @@ -131,10 +135,7 @@ }, { "type": "table", - "columns": [ - "Property", - "Preview" - ], + "columns": ["Property", "Preview"], "items": [ { "title": "Default", @@ -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" @@ -159,10 +160,7 @@ }, { "type": "table", - "columns": [ - "Property", - "Preview" - ], + "columns": ["Property", "Preview"], "items": [ { "title": "Full width", From 7e9f2f2f1f2b7cde01ef410e28103540551148f5 Mon Sep 17 00:00:00 2001 From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com> Date: Sun, 20 Apr 2025 17:10:22 +0300 Subject: [PATCH 09/10] Update Stepper snippet to include a functional example with minValue and maxValue props --- src/components/stepper/stepper.api.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/stepper/stepper.api.json b/src/components/stepper/stepper.api.json index 98d1d724ef..2160cfe354 100644 --- a/src/components/stepper/stepper.api.json +++ b/src/components/stepper/stepper.api.json @@ -58,7 +58,9 @@ } ], "snippet": [ - "" + "", + "", + "" ], "docs": { "hero": { From 1a3867f32b28c66ed61995fe0c7e7bb54c40578d Mon Sep 17 00:00:00 2001 From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com> Date: Tue, 22 Apr 2025 13:56:07 +0300 Subject: [PATCH 10/10] Remove snippet placeholders --- src/components/chip/chip.api.json | 10 +++++----- src/components/chipsInput/chipsInput.api.json | 2 +- src/components/colorPalette/ColorPalette.api.json | 2 +- src/components/colorPicker/colorPicker.api.json | 2 +- src/components/radioButton/radioButton.api.json | 12 ++++++------ src/components/radioGroup/radioGroup.api.json | 10 +++++----- .../segmentedControl/segmentedControl.api.json | 6 +++--- src/components/stepper/stepper.api.json | 2 +- src/incubator/slider/slider.api.json | 8 ++++---- 9 files changed, 27 insertions(+), 27 deletions(-) diff --git a/src/components/chip/chip.api.json b/src/components/chip/chip.api.json index 9052e3aa1a..b303c38a74 100644 --- a/src/components/chip/chip.api.json +++ b/src/components/chip/chip.api.json @@ -54,11 +54,11 @@ ], "snippet": [ "", - " console.log('pressed')$2}/>", - "", - "", - "", - "}/>", + " console.log('pressed')}/>", + "", + "", + "", + "}/>", "" ] } diff --git a/src/components/chipsInput/chipsInput.api.json b/src/components/chipsInput/chipsInput.api.json index 6981731b54..432cc76829 100644 --- a/src/components/chipsInput/chipsInput.api.json +++ b/src/components/chipsInput/chipsInput.api.json @@ -28,7 +28,7 @@ " ", " ", diff --git a/src/components/colorPalette/ColorPalette.api.json b/src/components/colorPalette/ColorPalette.api.json index d92368f73d..dc819dd543 100644 --- a/src/components/colorPalette/ColorPalette.api.json +++ b/src/components/colorPalette/ColorPalette.api.json @@ -84,7 +84,7 @@ " return (", " ", " ", diff --git a/src/components/colorPicker/colorPicker.api.json b/src/components/colorPicker/colorPicker.api.json index dc9cbbb1a0..868afbcf6a 100644 --- a/src/components/colorPicker/colorPicker.api.json +++ b/src/components/colorPicker/colorPicker.api.json @@ -56,7 +56,7 @@ " colors={colors}", " initialColor={Colors.green10}", " value={color}", - " onDismiss={() => console.log('dismissed')$4}", + " onDismiss={() => console.log('dismissed')}", " onSubmit={(newColor) => setColors([newColor, ...colors])}", " onValueChange={setColor}", " />", diff --git a/src/components/radioButton/radioButton.api.json b/src/components/radioButton/radioButton.api.json index 4c20f57947..ab9657586d 100644 --- a/src/components/radioButton/radioButton.api.json +++ b/src/components/radioButton/radioButton.api.json @@ -87,14 +87,14 @@ ], "snippet": [ "function Example(props) {", - " const [value, setValue] = useState(false$1);", - " const [value2, setValue2] = useState(false$1);", - " const [value3, setValue3] = useState(false$1);", + " const [value, setValue] = useState(false);", + " const [value2, setValue2] = useState(false);", + " const [value3, setValue3] = useState(false);", " return (", " ", - " setValue(!value)$3}/>", - " setValue2(!value2)$3}/>", - " setValue3(!value3)$3}/>", + " setValue(!value)}/>", + " setValue2(!value2)}/>", + " setValue3(!value3)}/>", " ", " );", "}" diff --git a/src/components/radioGroup/radioGroup.api.json b/src/components/radioGroup/radioGroup.api.json index 74a838105f..39d3e4d137 100644 --- a/src/components/radioGroup/radioGroup.api.json +++ b/src/components/radioGroup/radioGroup.api.json @@ -23,13 +23,13 @@ ], "snippet": [ "function Example(props) {", - " const [currentValue, setCurrentValue] = useState('yes'$1);", + " const [currentValue, setCurrentValue] = useState('yes');", " return (", " ", - " ", - " ", - " ", - " ", + " ", + " ", + " ", + " ", " ", " ", " );", diff --git a/src/components/segmentedControl/segmentedControl.api.json b/src/components/segmentedControl/segmentedControl.api.json index af275f8fa5..01e3cdbd70 100644 --- a/src/components/segmentedControl/segmentedControl.api.json +++ b/src/components/segmentedControl/segmentedControl.api.json @@ -103,9 +103,9 @@ ], "snippet": [ "", - "", - "", - "", + "", + "", + "", "" ], "docs": { diff --git a/src/components/stepper/stepper.api.json b/src/components/stepper/stepper.api.json index 2160cfe354..ca74501ffa 100644 --- a/src/components/stepper/stepper.api.json +++ b/src/components/stepper/stepper.api.json @@ -59,7 +59,7 @@ ], "snippet": [ "", - "", + "", "" ], "docs": { diff --git a/src/incubator/slider/slider.api.json b/src/incubator/slider/slider.api.json index 52d1d9b979..48ad78c1c7 100644 --- a/src/incubator/slider/slider.api.json +++ b/src/incubator/slider/slider.api.json @@ -100,10 +100,10 @@ ], "snippet": [ " console.log(\\`value changed: \\${value}\\`)$4}", + " value={0}", + " minimumValue={0}", + " maximumValue={10}", + " onValueChange={value => console.log(\\`value changed: \\${value}\\`)}", "/>" ], "docs": {