Skip to content

Commit 4a40557

Browse files
OrenZakethanshar
OrenZak
and
ethanshar
authored
WIP - web demo app (wix#2233)
* remove use of ViewPropTypes from react-native * remove use of ViewPropTypes from react-native * remove use of deprecated propTypes * remove use of requireNativeComp * logs svg require * test svg web support * test svg web support * test svg web support * test svg web support * remove the use of requireNativeComponent * remove the use of requireNativeComponent * slider check fix * revert slider changes * add web demo app - using react-native-web * remove dup import of TextInputPropTypes * remove blur polyfill * remove webDemo from publish bundle * update snapshot uiliv version * change script names * change webComps directory to examples Co-authored-by: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com>
1 parent cd69d7c commit 4a40557

File tree

25 files changed

+1239
-2
lines changed

25 files changed

+1239
-2
lines changed

‎.npmignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,7 @@ ios/
234234
android/
235235
demo/
236236
expoDemo/
237+
webDemo/
237238
uilib-docs/
238239
markdowns/
239240
.babelrc

‎lib/components/HighlighterOverlayView.web.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
import {Modal, ViewStyle} from 'react-native';
3+
4+
type HighlightFrameType = {
5+
x: number;
6+
y: number;
7+
width: number;
8+
height: number;
9+
}
10+
11+
type HighlightViewTagParams = {
12+
padding: number | ViewStyle['padding'];
13+
offset: Pick<HighlightFrameType, 'x' | 'y'>;
14+
}
15+
16+
export type HighlighterOverlayViewProps = {
17+
visible: boolean;
18+
overlayColor?: string;
19+
borderRadius?: number;
20+
strokeColor?: string;
21+
strokeWidth?: number;
22+
onRequestClose?: () => void;
23+
highlightFrame?: HighlightFrameType;
24+
style?: ViewStyle;
25+
highlightViewTag?: number | null;
26+
children?: JSX.Element[] | JSX.Element;
27+
highlightViewTagParams?: HighlightViewTagParams;
28+
minimumRectSize?: Pick<HighlightFrameType, 'width' | 'height'>;
29+
innerPadding?: number;
30+
accessible?: boolean;
31+
testID?: string;
32+
};
33+
34+
35+
const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => {
36+
const {
37+
visible,
38+
onRequestClose,
39+
children
40+
} = props;
41+
42+
43+
44+
return (
45+
<Modal
46+
visible={!!(visible)}
47+
animationType={'fade'}
48+
transparent
49+
onRequestClose={() => onRequestClose?.()}
50+
>
51+
52+
{children}
53+
</Modal>
54+
);
55+
};
56+
57+
HighlighterOverlayView.displayName = 'IGNORE';
58+
export default HighlighterOverlayView;

‎lib/components/Keyboard/KeyboardInput/CustomKeyboardView/index.web.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
3+
console.log('keyboard is not supported on web');
4+
const CustomKeyboardView = () => {
5+
6+
return (
7+
null
8+
);
9+
};
10+
11+
export default CustomKeyboardView;

‎lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/index.web.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
3+
console.log('KeyboardTrackingView not supported on web');
4+
const KeyboardTrackingView = () => {
5+
return (null
6+
);
7+
};
8+
9+
export default KeyboardTrackingView;
10+
11+
KeyboardTrackingView.scrollBehaviors = {};

‎lib/components/SafeArea/SafeAreaSpacerView.web.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import {View, ViewStyle} from 'react-native';
3+
4+
5+
export type SafeAreaSpacerViewProps = {
6+
style?: ViewStyle;
7+
};
8+
9+
const SafeAreaSpacerView = ({style}: SafeAreaSpacerViewProps) => {
10+
return (<View style={style}/>);
11+
};
12+
13+
SafeAreaSpacerView.displayName = 'IGNORE';
14+
export default SafeAreaSpacerView;

‎lib/components/WheelPicker/index.web.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
import React from 'react';
3+
4+
5+
6+
console.log('WheelPicker not supported on web');
7+
class WheelPicker extends React.Component {
8+
static displayName = 'WheelPicker';
9+
10+
11+
render() {
12+
13+
return (
14+
null
15+
);
16+
}
17+
}
18+
19+
20+
export default WheelPicker;

‎src/components/animatedScanner/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {Colors} from '../../style';
77
import {BaseComponent} from '../../commons';
88
import View from '../../components/view';
99

10-
1110
// TODO: add finisher animation (check icon animation or something)
1211
/**
1312
* @description: Scanner component for progress indication

‎src/components/slider/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -409,7 +409,7 @@ export default class Slider extends PureComponent<SliderProps, State> {
409409
this._minTrackStyles.width = Math.min(trackSize.width, x);
410410
}
411411

412-
this.thumb.current?.setNativeProps(this._thumbStyles);
412+
this.thumb.current.setNativeProps(this._thumbStyles);
413413
this.minTrack.current?.setNativeProps(this._minTrackStyles);
414414
}
415415
} else {

‎src/components/svgImage/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import {isSvg, isSvgUri} from '../../utils/imageUtils';
33
import {SvgPackage} from '../../optionalDependencies';
4+
45
const SvgXml = SvgPackage?.SvgXml;
56
const SvgCssUri = SvgPackage?.SvgCssUri;
67
// const SvgProps = SvgPackage?.SvgProps; TODO: not sure how (or if) we can use their props

‎src/components/svgImage/index.web.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
import {isSvg, isSvgUri} from '../../utils/imageUtils';
3+
// import {SvgPackage} from '../../optionalDependencies';
4+
5+
// const SvgXml = SvgPackage?.SvgXml;
6+
// const SvgCssUri = SvgPackage?.SvgCssUri;
7+
// const SvgProps = SvgPackage?.SvgProps; TODO: not sure how (or if) we can use their props
8+
9+
export interface SvgImageProps {
10+
/**
11+
* the asset tint
12+
*/
13+
tintColor?: string | null;
14+
data: any; // TODO: I thought this should be string | React.ReactNode but it doesn't work properly
15+
}
16+
17+
function SvgImage(props: SvgImageProps) {
18+
// tintColor crashes Android, so we're removing this until we properly support it.
19+
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
20+
// const {data, tintColor, ...others} = props;
21+
const {data} = props;
22+
23+
// if (!SvgXml) {
24+
// // eslint-disable-next-line max-len
25+
// console.error(`RNUILib Image "svg" prop requires installing "react-native-svg" and "react-native-svg-transformer" dependencies`);
26+
// return null;
27+
// }
28+
29+
if (isSvgUri(data)) {
30+
return <img src={data.uri}/>;
31+
// return <SvgCssUri {...others} uri={data.uri}/>;
32+
// }
33+
// else if (typeof data === 'string') {
34+
// return <SvgXml xml={data} {...others}/>;
35+
} else if (data) {
36+
return <img src={data}/>;
37+
}
38+
39+
return null;
40+
}
41+
42+
SvgImage.displayName = 'IGNORE';
43+
SvgImage.isSvg = isSvg;
44+
45+
export default SvgImage;

‎src/optionalDependencies/BlurViewPackage.web.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
console.info('blur is not supported on web');
2+
const BlurViewPackage = undefined;
3+
export default BlurViewPackage;

‎webDemo/.babelrc

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"presets": [
3+
"@babel/preset-react",
4+
[
5+
"@babel/preset-env",
6+
{
7+
"targets": "last 2 chrome versions, last 2 firefox versions"
8+
}
9+
]
10+
],
11+
"plugins": [
12+
"@babel/plugin-proposal-export-namespace-from",
13+
[
14+
"@babel/plugin-proposal-class-properties",
15+
{
16+
"loose": true
17+
}
18+
],
19+
[
20+
"react-native-web",
21+
{
22+
"commonjs": true
23+
}
24+
],
25+
[
26+
"module-resolver",
27+
{
28+
"alias": {
29+
"^react-native$": "react-native-web"
30+
}
31+
}
32+
],
33+
"react-native-reanimated/plugin"
34+
]
35+
}

‎webDemo/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<title>react-native-ui-lib-web demo app</title>
9+
</head>
10+
11+
<body>
12+
<noscript>You need to enable JavaScript to run this app.</noscript>
13+
<div id="root"></div>
14+
<!--
15+
This HTML file is a template.
16+
If you open it directly in the browser, you will see an empty page.
17+
18+
You can add webfonts, meta tags, or analytics to this file.
19+
The build step will place the bundled scripts into the <body> tag.
20+
21+
To begin the development, run `npm start` or `yarn start`.
22+
To create a production bundle, use `npm run build` or `yarn build`.
23+
-->
24+
</body>
25+
26+
</html>

‎webDemo/package.json

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{
2+
"name": "web-demo-app",
3+
"version": "0.1.0",
4+
"author": "Ethan Sharabi <ethan.shar@gmail.com>",
5+
"license": "MIT",
6+
"publishConfig": {
7+
"registry": "https://registry.npmjs.org/"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/wix/react-native-ui-lib.git"
12+
},
13+
"scripts": {
14+
"build": "webpack --config ./webpack.config.js",
15+
"start": "webpack-dev-server --config ./webpack.config.js"
16+
},
17+
"dependencies": {
18+
"@react-native-community/datetimepicker": "^3.4.6",
19+
"@react-native-community/netinfo": "^9.3.0",
20+
"@react-native-community/picker": "^1.8.1",
21+
"@react-native-picker/picker": "^2.4.2",
22+
"react": "^17.0.2",
23+
"react-dom": "^17.0.2",
24+
"react-native-gesture-handler": "^1.10.3",
25+
"react-native-haptic-feedback": "^1.14.0",
26+
"react-native-linear-gradient": "^2.6.2",
27+
"react-native-reanimated": "2.4.1",
28+
"react-native-shimmer-placeholder": "^2.0.8",
29+
"react-native-svg": "^12.1.0",
30+
"react-native-svg-transformer": "^0.14.3",
31+
"react-native-ui-lib": "6.21.2-snapshot.1927",
32+
"react-native-web": "^0.18.6",
33+
"typescript": "^4.4.2"
34+
},
35+
"devDependencies": {
36+
"@babel/core": "^7.14.8",
37+
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
38+
"@babel/preset-react": "^7.16.7",
39+
"@babel/preset-typescript": "^7.14.5",
40+
"@types/node": "^16.7.13",
41+
"@types/react": "^17.0.2",
42+
"@types/react-dom": "^17.0.2",
43+
"@types/react-native": "^0.66.4",
44+
"@typescript-eslint/eslint-plugin": "4.25.0",
45+
"@typescript-eslint/parser": "4.25.0",
46+
"babel-loader": "^8.2.3",
47+
"babel-plugin-module-resolver": "^4.1.0",
48+
"babel-plugin-react-native-web": "^0.18.7",
49+
"babel-preset-react": "^6.24.1",
50+
"clean-webpack-plugin": "^4.0.0",
51+
"concat-with-sourcemaps": "^1.1.0",
52+
"eslint": "^6.8.0",
53+
"eslint-plugin-react": "7.24.0",
54+
"eslint-plugin-react-hooks": "^4.0.4",
55+
"html-webpack-plugin": "^4.0.0",
56+
"metro-react-native-babel-preset": "^0.71.3",
57+
"process": "^0.11.10",
58+
"ts-loader": "^9.3.1",
59+
"url-loader": "^4.1.1",
60+
"webpack": "^4.35.2",
61+
"webpack-cli": "^3.3.5",
62+
"webpack-dev-server": "^3.7.2"
63+
}
64+
}

0 commit comments

Comments
 (0)