Skip to content

Commit ecb1770

Browse files
M-i-k-e-lM-i-k-e-l
authored
Live Code - support more components 2 (#3272)
* Support live code for components * Add ActionBar * Add Checkbox * Add Chip * Add RadioButton * Add RadioGroup * Remove (regular) Slider * Add Switch * Add Incubator.Slider (add incubator package) * Add SortableList and Icon (add assets package and add a couple of assets) * Add flexMigration to SortableList * Add SortableGridList and Card (add Assets.data.products) * Add MaskedInput * Add Carousel * Add Drawer * Add usesAnimated to the API * Fix assets (and relevant examples) * Fix some review notes * Remove usesAnimated and drawer's snippet * Move to Data and Playground * Add Icon configuration * Fix chevronRight size
1 parent df04a76 commit ecb1770

24 files changed

+466
-37
lines changed

‎docuilib/src/assets/data/products.ts

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
const products = [
2+
{
3+
id: 'a',
4+
name: 'I\'m a Product',
5+
formattedPrice: '$19.99',
6+
inventory: {
7+
trackingMethod: 'status',
8+
status: 'In Stock',
9+
quantity: 1
10+
},
11+
mediaUrl: 'https://images.pexels.com/photos/248412/pexels-photo-248412.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200'
12+
},
13+
{
14+
id: 'b',
15+
name: 'I\'m a Product',
16+
formattedPrice: '$19.99',
17+
inventory: {
18+
trackingMethod: 'status',
19+
status: 'In Stock',
20+
quantity: 2
21+
},
22+
mediaUrl: 'https://images.pexels.com/photos/3737604/pexels-photo-3737604.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200'
23+
},
24+
{
25+
id: 'c',
26+
name: 'I\'m a Product',
27+
formattedPrice: '$19.99',
28+
inventory: {
29+
trackingMethod: 'status',
30+
status: 'In Stock',
31+
quantity: 1
32+
},
33+
mediaUrl: 'https://images.pexels.com/photos/3685538/pexels-photo-3685538.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200'
34+
},
35+
{
36+
id: 'd',
37+
name: 'I\'m a Product',
38+
formattedPrice: '$19.99',
39+
inventory: {
40+
trackingMethod: 'status',
41+
status: 'Out of Stock',
42+
quantity: 0
43+
},
44+
mediaUrl: 'https://images.pexels.com/photos/4202467/pexels-photo-4202467.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200'
45+
},
46+
{
47+
id: 'e',
48+
name: 'I\'m a Product',
49+
formattedPrice: '$19.99',
50+
inventory: {
51+
trackingMethod: 'status',
52+
status: 'In Stock',
53+
quantity: 3
54+
},
55+
mediaUrl: 'https://static.wixstatic.com/media/cda177_f9de629d8c97416f82b398725bd49918.jpg_128'
56+
},
57+
{
58+
id: 'f',
59+
name: 'I\'m a Product',
60+
formattedPrice: '$19.99',
61+
inventory: {
62+
trackingMethod: 'statu',
63+
status: 'Out of Stock',
64+
quantity: 0
65+
},
66+
mediaUrl: 'https://static.wixstatic.com/media/cda177_1782572f1dfc49d397e830918d912568.jpg_128'
67+
},
68+
{
69+
id: 'g',
70+
name: 'I\'m a Product',
71+
formattedPrice: '$19.99',
72+
inventory: {
73+
trackingMethod: 'status',
74+
status: 'In Stock',
75+
quantity: 10
76+
},
77+
mediaUrl: 'https://static.wixstatic.com/media/cda177_03906910d07749199b09e443ce9fed6c.jpg_128'
78+
},
79+
{
80+
id: 'h',
81+
name: 'I\'m a Product',
82+
formattedPrice: '$19.99',
83+
inventory: {
84+
trackingMethod: 'status',
85+
status: 'In Stock',
86+
quantity: 11
87+
},
88+
mediaUrl: 'https://static.wixstatic.com/media/cda177_9d3e5b8fc70e4d2997806ece35e7de54.jpg_128'
89+
},
90+
{
91+
id: 'i',
92+
name: 'I\'m a Product',
93+
formattedPrice: '$19.99',
94+
inventory: {
95+
trackingMethod: 'status',
96+
status: 'In Stock',
97+
quantity: 10
98+
},
99+
mediaUrl: 'https://static.wixstatic.com/media/cda177_db24e0568cdc4a82be0a8559fb123b55.jpg_128'
100+
},
101+
{
102+
id: 'j',
103+
name: 'I\'m a Product',
104+
formattedPrice: '$19.99',
105+
inventory: {
106+
trackingMethod: 'status',
107+
status: 'In Stock',
108+
quantity: 2
109+
},
110+
mediaUrl: 'https://static.wixstatic.com/media/cda177_085a5f9575ba4b208f6091b26cbda4c4.jpg_128'
111+
},
112+
{
113+
id: 'k',
114+
name: 'I\'m a Product',
115+
formattedPrice: '$19.99',
116+
inventory: {
117+
trackingMethod: 'status',
118+
status: 'In Stock',
119+
quantity: 8
120+
},
121+
mediaUrl: 'https://static.wixstatic.com/media/cda177_82d66fece3e54a7aa10d49bda4d98259.jpg_128'
122+
},
123+
{
124+
id: 'l',
125+
name: 'I\'m a Product',
126+
formattedPrice: '$19.99',
127+
inventory: {
128+
trackingMethod: 'status',
129+
status: 'In Stock',
130+
quantity: 8
131+
},
132+
mediaUrl: 'https://static.wixstatic.com/media/84770f_c611ded729fd4461a1bb57134d4e9dd2.png_128'
133+
},
134+
{
135+
id: 'm',
136+
name: 'I\'m a Product',
137+
formattedPrice: '$19.99',
138+
inventory: {
139+
trackingMethod: 'status',
140+
status: 'In Stock',
141+
quantity: 3
142+
},
143+
mediaUrl: 'https://images.pexels.com/photos/3612182/pexels-photo-3612182.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=150'
144+
},
145+
{
146+
id: 'n',
147+
name: 'I\'m a Product',
148+
formattedPrice: '$19.99',
149+
inventory: {
150+
trackingMethod: 'status',
151+
status: 'In Stock',
152+
quantity: 22
153+
},
154+
mediaUrl: 'https://images.pexels.com/photos/4841529/pexels-photo-4841529.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=150'
155+
},
156+
{
157+
id: 'o',
158+
name: 'I\'m a Product',
159+
formattedPrice: '$19.99',
160+
inventory: {
161+
trackingMethod: 'status',
162+
status: 'In Stock',
163+
quantity: 10
164+
},
165+
mediaUrl: 'https://images.pexels.com/photos/4173450/pexels-photo-4173450.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=150'
166+
},
167+
{
168+
id: 'p',
169+
name: 'I\'m a Product',
170+
formattedPrice: '$19.99',
171+
inventory: {
172+
trackingMethod: 'status',
173+
status: 'In Stock',
174+
quantity: 10
175+
},
176+
mediaUrl: 'https://images.pexels.com/photos/10513273/pexels-photo-10513273.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=150'
177+
}
178+
];
179+
180+
export default products;

‎docuilib/src/assets/icons/chevronRight.png

360 Bytes
Loading

‎docuilib/src/assets/icons/[email protected]

463 Bytes
Loading

‎docuilib/src/assets/icons/[email protected]

594 Bytes
Loading

‎docuilib/src/assets/icons/[email protected]

793 Bytes
Loading

‎docuilib/src/assets/icons/[email protected]

952 Bytes
Loading

‎docuilib/src/assets/icons/drag.png

161 Bytes
Loading

‎docuilib/src/assets/icons/[email protected]

211 Bytes
Loading

‎docuilib/src/assets/icons/[email protected]

279 Bytes
Loading

‎docuilib/src/assets/icons/[email protected]

405 Bytes
Loading

‎docuilib/src/assets/icons/[email protected]

587 Bytes
Loading

‎docuilib/src/theme/ReactLiveScope/Playground.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import {Text, View} from 'react-native-ui-lib/core';
3+
import Switch from 'react-native-ui-lib/switch';
4+
5+
interface ControlBaseProps<S> {
6+
state: S;
7+
setState: React.Dispatch<React.SetStateAction<S>>;
8+
}
9+
10+
interface ToggleControlProps extends ControlBaseProps<boolean> {
11+
title: string;
12+
key?: string;
13+
spread?: boolean;
14+
}
15+
16+
export function ToggleControl(props: ToggleControlProps) {
17+
const {state, setState, title, spread = false, key = 'does not change'} = props;
18+
return (
19+
<View row centerV spread={spread} marginB-s4 key={key}>
20+
<Text $textDefault flex={spread} marginR-s4={!spread}>
21+
{title}
22+
</Text>
23+
<Switch key={key} testID={key} value={state} onValueChange={setState}/>
24+
</View>
25+
);
26+
}

‎docuilib/src/theme/ReactLiveScope/configurations.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import {ThemeManager} from 'react-native-ui-lib/core';
2+
3+
ThemeManager.setComponentForcedTheme('Icon', props => {
4+
const {source} = props;
5+
return source?.source ? source : undefined;
6+
});

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

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,83 @@
11
import React from 'react';
2+
import products from '../../assets/data/products';
3+
require('./configurations');
24
import {Colors} from 'react-native-ui-lib/style';
3-
import {Button, Image, Text, TouchableOpacity, View} from 'react-native-ui-lib/core';
5+
import {BorderRadiuses, Button, Image, Spacings, Text, TouchableOpacity, View} from 'react-native-ui-lib/core';
46
import ActionBar from 'react-native-ui-lib/actionBar';
7+
import Assets from 'react-native-ui-lib/assets';
8+
import Card from 'react-native-ui-lib/card';
9+
import Carousel from 'react-native-ui-lib/carousel';
510
import Checkbox from 'react-native-ui-lib/checkbox';
611
import Chip from 'react-native-ui-lib/chip';
12+
import Constants from 'react-native-ui-lib/constants';
13+
import Drawer from 'react-native-ui-lib/drawer';
14+
import Icon from 'react-native-ui-lib/icon';
15+
import Incubator from 'react-native-ui-lib/incubator';
16+
import MaskedInput from 'react-native-ui-lib/maskedInput';
717
import RadioButton from 'react-native-ui-lib/radioButton';
818
import RadioGroup from 'react-native-ui-lib/radioGroup';
919
import SegmentedControl from 'react-native-ui-lib/segmentedControl';
20+
import SortableGridList from 'react-native-ui-lib/sortableGridList';
21+
import SortableList from 'react-native-ui-lib/sortableList';
1022
import Switch from 'react-native-ui-lib/switch';
1123
import TextField from 'react-native-ui-lib/textField';
24+
import * as Playground from './Playground';
25+
26+
Assets.loadAssetsGroup('icons.demo', {
27+
// chevronDown: require('../../assets/icons/chevronDown.png').default,
28+
chevronRight: {
29+
source: require('../../assets/icons/chevronRight.png').default,
30+
style: {width: 24, height: 24}
31+
},
32+
// add: require('../../assets/icons/add.png').default,
33+
// camera: require('../../assets/icons/cameraSelected.png').default,
34+
// close: require('../../assets/icons/close.png').default,
35+
// dashboard: require('../../assets/icons/dashboard.png').default,
36+
drag: {
37+
source: require('../../assets/icons/drag.png').default,
38+
style: {width: 10, height: 16}
39+
}
40+
// image: require('../../assets/icons/image.png').default,
41+
// plus: require('../../assets/icons/plus.png').default,
42+
// refresh: require('../../assets/icons/refresh.png').default,
43+
// search: require('../../assets/icons/search.png').default,
44+
// settings: require('../../assets/icons/settings.png').default,
45+
// share: require('../../assets/icons/share.png').default,
46+
// info: require('../../assets/icons/info.png').default,
47+
// exclamation: require('../../assets/icons/exclamationFillSmall.png').default
48+
});
49+
50+
const Data = {products};
1251

1352
// Add react-live imports you need here
1453
const ReactLiveScope = {
1554
React,
1655
...React,
17-
/* uilib components */
56+
/* Docs' utils and components */
57+
Data,
58+
Playground,
59+
/* UI Lib's components */
1860
ActionBar,
61+
Assets,
62+
BorderRadiuses,
1963
Button,
64+
Card,
65+
Carousel,
2066
Checkbox,
2167
Chip,
68+
Constants,
2269
Colors,
70+
Drawer,
71+
Icon,
2372
Image,
73+
Incubator,
74+
MaskedInput,
2475
RadioButton,
2576
RadioGroup,
2677
SegmentedControl,
78+
SortableGridList,
79+
SortableList,
80+
Spacings,
2781
Switch,
2882
Text,
2983
TextField,

‎scripts/buildDocs.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,10 +155,12 @@ function getFirstTab(component) {
155155

156156
/* Snippet */
157157
if (component.snippet) {
158-
content += '### Usage\n';
158+
content += `### Usage\n`;
159159
content += '``` jsx live\n';
160160
content += component.snippet?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), '')).join('\n');
161161
content += '\n```\n';
162+
} else {
163+
console.warn(`${component.name} does not have a snippet`);
162164
}
163165

164166
/* Props */

‎scripts/buildPackages/buildCustomPackages.js

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ const packages = [
66
filename: 'keyboard.js',
77
content: `module.exports = require('./lib/components/Keyboard').default;\n`
88
},
9+
{
10+
filename: 'assets.js',
11+
content: `module.exports = require('./src/assets').default;\n`
12+
},
913
{
1014
filename: 'config.js',
1115
content: `module.exports = require('./src/commons/Config').default;\n`
@@ -27,6 +31,10 @@ const packages = [
2731
'Scheme'
2832
]
2933
},
34+
{
35+
filename: 'incubator.js',
36+
incubatorComponents: ['Dialog', 'ExpandableOverlay', 'Slider', 'Toast']
37+
},
3038
{
3139
filename: 'style.js',
3240
styleComponents: [
@@ -56,7 +64,7 @@ packages.forEach((package) => {
5664
let content = package.content || '';
5765
let typings = '';
5866

59-
if (package.components || package.styleComponents) {
67+
if (package.components || package.incubatorComponents || package.styleComponents) {
6068
content += 'module.exports = {\n';
6169
_.forEach(package.components, (component) => {
6270
content += `get ${component}() {\n`;
@@ -66,6 +74,14 @@ packages.forEach((package) => {
6674
typings = addTyping(typings, component);
6775
});
6876

77+
_.forEach(package.incubatorComponents, (component) => {
78+
content += `get ${component}() {\n`;
79+
content += `return require('./src/incubator/${_.camelCase(component)}').default;`;
80+
content += `},\n`;
81+
82+
typings = addTyping(typings, component);
83+
});
84+
6985
_.forEach(package.styleComponents, (component) => {
7086
content += `get ${component}() {\n`;
7187
content += `return require('./src/style/${_.camelCase(component)}').default;`;

‎src/components/card/card.api.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,12 @@
4242
}
4343
],
4444
"snippet": [
45-
"<Card flex center onPress={() => console.log('pressed')}$1>",
46-
" <Card.Image source={{uri: 'https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg'$2}}/>",
45+
"<Card width={70} height={70} onPress={() => console.log('pressed')}$1>",
46+
" <Card.Image",
47+
" width={70}",
48+
" height={70}",
49+
" source={{uri: 'https://images.pexels.com/photos/248412/pexels-photo-248412.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200'$2}}",
50+
" />",
4751
"</Card>"
4852
]
4953
}

0 commit comments

Comments
 (0)