WIP - web demo app

.npmignore

@@ -234,6 +234,7 @@ ios/
 android/
 demo/
 expoDemo/
+webDemo/
 uilib-docs/
 markdowns/
 .babelrc

lib/components/HighlighterOverlayView.web.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {Modal, ViewStyle} from 'react-native';
+
+type HighlightFrameType = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+type HighlightViewTagParams = {
+  padding: number | ViewStyle['padding'];
+  offset: Pick<HighlightFrameType, 'x' | 'y'>;
+}
+
+export type HighlighterOverlayViewProps = {
+  visible: boolean;
+  overlayColor?: string;
+  borderRadius?: number;
+  strokeColor?: string;
+  strokeWidth?: number;
+  onRequestClose?: () => void;
+  highlightFrame?: HighlightFrameType;
+  style?: ViewStyle;
+  highlightViewTag?: number | null;
+  children?: JSX.Element[] | JSX.Element;
+  highlightViewTagParams?: HighlightViewTagParams;
+  minimumRectSize?: Pick<HighlightFrameType, 'width' | 'height'>;
+  innerPadding?: number;
+  accessible?: boolean;
+  testID?: string;
+};
+
+
+const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => {
+  const {
+    visible,
+    onRequestClose,
+    children
+  } = props;
+
+
+
+  return (
+    <Modal
+      visible={!!(visible)}
+      animationType={'fade'}
+      transparent
+      onRequestClose={() => onRequestClose?.()}
+    >
+
+      {children}
+    </Modal>
+  );
+};
+
+HighlighterOverlayView.displayName = 'IGNORE';
+export default HighlighterOverlayView;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+console.log('keyboard is not supported on web');
+const CustomKeyboardView = () => {
+
+  return (
+    null
+  );
+};
+
+export default CustomKeyboardView;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+console.log('KeyboardTrackingView not supported on web');
+const KeyboardTrackingView = () => {
+  return (null
+  );
+};
+
+export default KeyboardTrackingView;
+
+KeyboardTrackingView.scrollBehaviors = {};

lib/components/SafeArea/SafeAreaSpacerView.web.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {View, ViewStyle} from 'react-native';
+
+
+export type SafeAreaSpacerViewProps = {
+  style?: ViewStyle;
+};
+
+const SafeAreaSpacerView = ({style}: SafeAreaSpacerViewProps) => {
+  return (<View style={style}/>);
+};
+
+SafeAreaSpacerView.displayName = 'IGNORE';
+export default SafeAreaSpacerView;

lib/components/WheelPicker/index.web.tsx

@@ -0,0 +1,20 @@
+
+import React from 'react';
+
+
+
+console.log('WheelPicker not supported on web');
+class WheelPicker extends React.Component {
+  static displayName = 'WheelPicker';
+
+
+  render() {
+
+    return (
+      null
+    );
+  }
+}
+
+
+export default WheelPicker;

src/components/animatedScanner/index.js

@@ -7,7 +7,6 @@ import {Colors} from '../../style';
 import {BaseComponent} from '../../commons';
 import View from '../../components/view';
 
-
 // TODO: add finisher animation (check icon animation or something)
 /**
  * @description: Scanner component for progress indication

src/components/slider/index.tsx

@@ -409,7 +409,7 @@ export default class Slider extends PureComponent<SliderProps, State> {
           this._minTrackStyles.width = Math.min(trackSize.width, x);
         }
 
-        this.thumb.current?.setNativeProps(this._thumbStyles);
+        this.thumb.current.setNativeProps(this._thumbStyles);
         this.minTrack.current?.setNativeProps(this._minTrackStyles);
       }
     } else {

src/components/svgImage/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {isSvg, isSvgUri} from '../../utils/imageUtils';
 import {SvgPackage} from '../../optionalDependencies';
+
 const SvgXml = SvgPackage?.SvgXml;
 const SvgCssUri = SvgPackage?.SvgCssUri;
 // const SvgProps = SvgPackage?.SvgProps; TODO: not sure how (or if) we can use their props

src/components/svgImage/index.web.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {isSvg, isSvgUri} from '../../utils/imageUtils';
+// import {SvgPackage} from '../../optionalDependencies';
+
+// const SvgXml = SvgPackage?.SvgXml;
+// const SvgCssUri = SvgPackage?.SvgCssUri;
+// const SvgProps = SvgPackage?.SvgProps; TODO: not sure how (or if) we can use their props
+
+export interface SvgImageProps {
+  /**
+   * the asset tint
+   */
+  tintColor?: string | null;
+  data: any; // TODO: I thought this should be string | React.ReactNode but it doesn't work properly
+}
+
+function SvgImage(props: SvgImageProps) {
+  // tintColor crashes Android, so we're removing this until we properly support it.
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  // const {data, tintColor, ...others} = props;
+  const {data} = props;
+
+  // if (!SvgXml) {
+  //   // eslint-disable-next-line max-len
+  //   console.error(`RNUILib Image "svg" prop requires installing "react-native-svg" and "react-native-svg-transformer" dependencies`);
+  //   return null;
+  // }
+
+  if (isSvgUri(data)) {
+    return <img src={data.uri}/>;
+    // return <SvgCssUri {...others} uri={data.uri}/>;
+  // }
+  //  else if (typeof data === 'string') {
+  //   return <SvgXml xml={data} {...others}/>;
+  } else if (data) {
+    return <img src={data}/>;
+  }
+
+  return null;
+}
+
+SvgImage.displayName = 'IGNORE';
+SvgImage.isSvg = isSvg;
+
+export default SvgImage;

src/optionalDependencies/BlurViewPackage.web.ts

@@ -0,0 +1,3 @@
+console.info('blur is not supported on web');
+const BlurViewPackage = undefined;
+export default BlurViewPackage;

webDemo/.babelrc

@@ -0,0 +1,35 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        "targets": "last 2 chrome versions, last 2 firefox versions"
+      }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-export-namespace-from",
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    [
+      "react-native-web",
+      {
+        "commonjs": true
+      }
+    ],
+    [
+      "module-resolver",
+      {
+        "alias": {
+          "^react-native$": "react-native-web"
+        }
+      }
+    ],
+    "react-native-reanimated/plugin"
+  ]
+}

webDemo/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <title>react-native-ui-lib-web demo app</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

webDemo/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "web-demo-app",
+  "version": "0.1.0",
+  "author": "Ethan Sharabi <ethan.shar@gmail.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wix/react-native-ui-lib.git"
+  },
+  "scripts": {
+    "build": "webpack --config ./webpack.config.js",
+    "start": "webpack-dev-server --config ./webpack.config.js"
+  },
+  "dependencies": {
+    "@react-native-community/datetimepicker": "^3.4.6",
+    "@react-native-community/netinfo": "^9.3.0",
+    "@react-native-community/picker": "^1.8.1",
+    "@react-native-picker/picker": "^2.4.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-native-gesture-handler": "^1.10.3",
+    "react-native-haptic-feedback": "^1.14.0",
+    "react-native-linear-gradient": "^2.6.2",
+    "react-native-reanimated": "2.4.1",
+    "react-native-shimmer-placeholder": "^2.0.8",
+    "react-native-svg": "^12.1.0",
+    "react-native-svg-transformer": "^0.14.3",
+    "react-native-ui-lib": "6.21.2-snapshot.1927",
+    "react-native-web": "^0.18.6",
+    "typescript": "^4.4.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.8",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.14.5",
+    "@types/node": "^16.7.13",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "@types/react-native": "^0.66.4",
+    "@typescript-eslint/eslint-plugin": "4.25.0",
+    "@typescript-eslint/parser": "4.25.0",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-react-native-web": "^0.18.7",
+    "babel-preset-react": "^6.24.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "concat-with-sourcemaps": "^1.1.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-react": "7.24.0",
+    "eslint-plugin-react-hooks": "^4.0.4",
+    "html-webpack-plugin": "^4.0.0",
+    "metro-react-native-babel-preset": "^0.71.3",
+    "process": "^0.11.10",
+    "ts-loader": "^9.3.1",
+    "url-loader": "^4.1.1",
+    "webpack": "^4.35.2",
+    "webpack-cli": "^3.3.5",
+    "webpack-dev-server": "^3.7.2"
+  }
+}