Skip to content

usage section should show LivePreview or CodeBlock #3452

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

Closed
wants to merge 5 commits into from
Closed

usage section should show LivePreview or CodeBlock #3452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2621435
usage section should show LivePreview or CodeBlock
adids1221 Dec 9, 2024
d28e039
streamline snippet formatting and improve usage component rendering
adids1221 Feb 4, 2025
6607fa2
Merge branch 'master' into docs/Usage/live_playground_section
adids1221 Feb 4, 2025
c347ad3
Merge branch 'master' into docs/Usage/live_playground_section
adids1221 Feb 23, 2025
b64c6e9
Merge branch 'master' into docs/Usage/live_playground_section
adids1221 Mar 10, 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
12 changes: 5 additions & 7 deletions docuilib/src/components/pageComponents/Usage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,13 @@ import _ from 'lodash';
import React from 'react';
import CodeBlock from '@theme/CodeBlock';
import '../ComponentPage.module.scss';
import ReactLiveScope from '../../theme/ReactLiveScope';
import UILivePreview from '../UILivePreview';

export const Usage = ({component}) => {
const componentLivePlaygroundSupport = !!ReactLiveScope[component.name];
const code = component.snippet?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), '')).join('\n');
if (component.snippet) {
return (
<div>
<CodeBlock language="jsx">
{component.snippet?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), '')).join('\n')}
</CodeBlock>
</div>
);
return componentLivePlaygroundSupport ? <UILivePreview code={code}/> : <CodeBlock language="jsx">{code}</CodeBlock>;
}
};
15 changes: 2 additions & 13 deletions src/components/checkbox/checkbox.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,7 @@
"background"
],
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CheckboxScreen.tsx",
"images": [
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Checkbox/Checkbox.gif?raw=true"
],
"images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Checkbox/Checkbox.gif?raw=true"],
"props": [
{
"name": "value",
Expand Down Expand Up @@ -95,16 +93,7 @@
"description": "Custom styling for the checkbox and label container"
}
],
"snippet": [
"function Example(props) {",
" const [value, setValue] = useState(false$1);",
" return (",
" <div>",
" <Checkbox value={value$2} onValueChange={setValue$3}/>",
" </div>",
" );",
"}"
],
"snippet": ["<Checkbox value={value} onValueChange={setValue}/>"],
"docs": {
"hero": {
"title": "Checkbox",
Expand Down
11 changes: 1 addition & 10 deletions src/components/radioButton/radioButton.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,16 +85,7 @@
"description": "Additional styling for the container"
}
],
"snippet": [
"function Example(props) {",
" const [value, setValue] = useState(false$1);",
" return (",
" <div>",
" <RadioButton label={'Individual Radio Button'} selected={value$2} onPress={() => setValue(!value)$3}/>",
" </div>",
" );",
"}"
],
"snippet": ["<RadioButton label={'Individual Radio Button'} selected={value} onPress={() => setValue(!value)}/>"],
"docs": {
"hero": {
"title": "RadioButton",
Expand Down
26 changes: 4 additions & 22 deletions src/components/switch/switch.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@
"category": "controls",
"description": "Switch component for toggling boolean value related to some context",
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SwitchScreen.tsx",
"images": [
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Switch/Switch.gif?raw=true"
],
"images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Switch/Switch.gif?raw=true"],
"props": [
{
"name": "value",
Expand Down Expand Up @@ -78,16 +76,7 @@
"description": "Component id"
}
],
"snippet": [
"function Example(props) {",
" const [value, setValue] = useState(false$1);",
" return (",
" <div>",
" <Switch value={value$2} onValueChange={setValue$3}/>",
" </div>",
" );",
"}"
],
"snippet": ["<Switch value={value$2} onValueChange={setValue$3}/>"],
"docs": {
"hero": {
"title": "Switch",
Expand All @@ -106,10 +95,7 @@
"sections": [
{
"type": "table",
"columns": [
"Property",
"Preview"
],
"columns": ["Property", "Preview"],
"items": [
{
"title": "Default",
Expand All @@ -135,11 +121,7 @@
},
{
"type": "table",
"columns": [
"Property",
"Default Style",
"Light Style"
],
"columns": ["Property", "Default Style", "Light Style"],
"items": [
{
"title": "ON",
Expand Down