Merge branch 'master' into release

Author: nitzanyiz

.eslintrc.js

@@ -8,6 +8,13 @@ module.exports = {
     'no-undef': 'off',
     /* Other Rules */
     'no-unused-expressions': 'off',
+    'no-restricted-syntax': [
+      'error',
+      {
+        selector: `CallExpression[callee.object.name='console'][callee.property.name='error']`,
+        message: 'Using console.error is not allowed as it is sent to Sentry, please use LogService.error instead'
+      }
+    ],
     'arrow-parens': 'off',
     // TODO: remove after migration of legacy lifecycle methods
     camelcase: 'off',

demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap

@@ -3555,6 +3555,14 @@ exports[`TextField Screen renders screen 1`] = `
           accessible={true}
           collapsable={false}
           focusable={true}
+          hitSlop={
+            {
+              "bottom": 15,
+              "left": 0,
+              "right": 0,
+              "top": 15,
+            }
+          }
           onClick={[Function]}
           onLayout={[Function]}
           onResponderGrant={[Function]}
@@ -4613,6 +4621,14 @@ exports[`TextField Screen renders screen 1`] = `
             accessible={true}
             collapsable={false}
             focusable={true}
+            hitSlop={
+              {
+                "bottom": 7.5,
+                "left": 10,
+                "right": 10,
+                "top": 7.5,
+              }
+            }
             onClick={[Function]}
             onLayout={[Function]}
             onResponderGrant={[Function]}

demo/src/screens/componentScreens/CheckboxScreen.tsx

@@ -89,7 +89,7 @@ export default class CheckboxScreen extends Component {
             disabled
             value={this.state.value5}
             onValueChange={value5 => this.setState({value5})}
-            style={{marginRight: 10}}
+            style={{marginRight: 20}}
           />
           <Checkbox
             disabled

demo/src/screens/componentScreens/RadioButtonScreen.js

@@ -69,7 +69,7 @@ export default class RadioButtonScreen extends Component {
             Radio Buttons
           </Text>
 
-          <RadioGroup initialValue={this.state.color || null} onValueChange={value => this.setState({color: value})}>
+          <RadioGroup gap-s4 initialValue={this.state.color || null} onValueChange={value => this.setState({color: value})}>
             <Text marginB-20 text60 $textDefault>
               Select a color{'\n'}
               (enum with default value)
@@ -82,6 +82,7 @@ export default class RadioButtonScreen extends Component {
           </RadioGroup>
 
           <RadioGroup
+            gap-s4
             marginT-30
             initialValue={this.state.textSide}
             onValueChange={value => this.setState({textSide: value})}
@@ -96,7 +97,7 @@ export default class RadioButtonScreen extends Component {
             <Text marginT-10>You chose: {this.state.textSide}</Text>
           </RadioGroup>
 
-          <RadioGroup marginT-30 initialValue={this.state.value} onValueChange={value => this.setState({value})}>
+          <RadioGroup gap-s4 marginT-30 initialValue={this.state.value} onValueChange={value => this.setState({value})}>
             <Text marginB-20 text60 $textDefault>
               Yes or No?
             </Text>
@@ -112,6 +113,7 @@ export default class RadioButtonScreen extends Component {
           </Text>
           <View row centerV marginB-10>
             <RadioButton
+              gap-s4
               selected={this.state.individualValue2}
               onPress={() => this.setState({individualValue2: !this.state.individualValue2})}
               label="Individual Radio Button (with style)"

docuilib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-docs",
-  "version": "3.3.5",
+  "version": "3.7.0",
   "main": "./src/index.ts",
   "scripts": {
     "docusaurus": "docusaurus",
@@ -30,6 +30,7 @@
     "clsx": "^1.1.1",
     "docusaurus-plugin-sass": "^0.2.1",
     "file-loader": "^6.2.0",
+    "prettier": "2.8.8",
     "prism-react-renderer": "^2.1.0",
     "react-html-parser": "^2.0.2",
     "react-native-web": "^0.19.12",

docuilib/src/assets/icons/code.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const CodeIcon = (props: React.ComponentProps<'svg'>) => {
+  return (
+    <svg {...props} viewBox="0 0 18 18" fill="currentColor" width="18" height="18">
+      <path d="M10,6.00254473 L11,6.00254473 L8,13 L7,13 L10,6.00254473 Z M6,12 L5.74819324,12 L1.99934428,9.78978657 L2.00158404,9.20893357 L5.74819324,7 L6.00018511,7 L6.00018511,8 L3.50778222,9.5 L6,11 L6,12 Z M11.9995294,12 L11.9995294,11 L14.4917472,9.5 L11.9993443,8 L11.9993443,7 L12.2513362,7 L15.9979454,9.20893357 L16.0001851,9.78978657 L12.2513362,12 L11.9995294,12 Z"/>
+    </svg>
+  );
+};
+
+export default CodeIcon;

docuilib/src/assets/icons/copy.png

@@ -0,0 +1,9 @@
+.codeBlock {
+  margin: 0;
+  text-align: 'left';
+  height: 100%;
+}
+
+.codeBlockContainer {
+  height: 100%;
+}

docuilib/src/assets/icons/copy@1.5x.png

@@ -0,0 +1,43 @@
+import React, {useMemo, ComponentProps} from 'react';
+import {default as ThemeCodeBlock, Props} from '@theme/CodeBlock';
+import styles from './CodeBlock.module.scss';
+import useFormattedCode from '../hooks/useFormattedCode';
+
+type CodeBlockProps = {
+  snippet: string;
+  printWidth?: number;
+  fontSize?: number;
+} & Omit<Props, 'children'>;
+
+const CodeBlock: React.FC<CodeBlockProps> = ({
+  snippet,
+  language,
+  printWidth = 35,
+  fontSize = 14,
+  showLineNumbers,
+  ...others
+}) => {
+  const {code} = useFormattedCode(snippet, {printWidth});
+
+  const containerStyle = useMemo<ComponentProps<'div'>['style']>(() => {
+    return {
+      fontSize,
+      maxWidth: printWidth * fontSize
+    };
+  }, [fontSize, printWidth]);
+
+  return (
+    <div style={containerStyle} className={styles.codeBlockContainer}>
+      <ThemeCodeBlock
+        className={styles.codeBlock}
+        language={language ?? 'jsx'}
+        showLineNumbers={showLineNumbers ?? true}
+        {...others}
+      >
+        {code}
+      </ThemeCodeBlock>
+    </div>
+  );
+};
+
+export default CodeBlock;

docuilib/src/assets/icons/copy@2x.png

@@ -60,10 +60,12 @@ export default function ComponentPage({component}) {
 
   const buildTabs = () => {
     const tabs = component.docs?.tabs;
-
+    const api = component.props;
+    const tabsArray = api ? [...tabs, devTab] : tabs;
+    
     // TODO: align Tabs bottom border with TabItem's selected indication line
     if (tabs) {
-      return <Tabs className="main-tabs">{getTabItems([...tabs, devTab])}</Tabs>;
+      return <Tabs className="main-tabs">{getTabItems(tabsArray)}</Tabs>;
     }
   };
 

docuilib/src/assets/icons/copy@3x.png

@@ -40,7 +40,7 @@ export default () => {
         </div>
 
         <div className={styles.buttons}>
-          <Link to={`docs/${docsMainEntry}`}>
+          <Link to={`docs/${location.hostname === 'localhost' ? 'next/' : ''}${docsMainEntry}`}>
             <button className={'button dark'}>View Docs</button>
           </Link>
 

docuilib/src/assets/icons/copy@4x.png

@@ -5,15 +5,20 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import {View, Colors} from 'react-native-ui-lib/core';
 import ReactLiveScope from '../theme/ReactLiveScope';
+import CodeBlock from '@theme/CodeBlock';
 
 export const IFRAME_MESSAGE_TYPE = 'LIVE_PREVIEW_CODE_UPDATE_MESSAGE';
 
-export default function UILivePreview({code: codeProp}) {
+export default function UILivePreview({code: codeProp, componentName = undefined, liveScopeSupport = false}) {
   const [code, setCode] = useState(codeProp);
   const [iframeLoaded, setIframeLoaded] = useState(false);
   const {siteConfig} = useDocusaurusContext();
   const iframeRef = useRef(null);
 
+  const supportedComponentNames = Object.keys(ReactLiveScope);
+  const componentLivePlaygroundSupport =
+    liveScopeSupport || (componentName && supportedComponentNames.includes(componentName));
+
   useEffect(() => {
     if (iframeLoaded) {
       sendMessageToIframe(code);
@@ -29,6 +34,10 @@ export default function UILivePreview({code: codeProp}) {
     return {overflowY: 'scroll', scrollbarWidth: 'none'};
   }, []);
 
+  if (!componentLivePlaygroundSupport) {
+    return <CodeBlock language="jsx">{code}</CodeBlock>;
+  }
+
   return (
     <BrowserOnly>
       {() => {

docuilib/src/components/CodeBlock.module.scss

@@ -89,6 +89,10 @@ export const Banner = ({section, component}) => {
   const _title = title || getTitle(type);
   const _description = description || getDescription(type);
 
+  if (!_description) {
+    return null;
+  }
+  
   return (
     <div
       className="row"

docuilib/src/components/CodeBlock.tsx

@@ -0,0 +1,33 @@
+.showCodeButton {
+  position: absolute;
+  border: 0;
+  background: none;
+  color: rgb(56, 153, 236);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  right: 0px;
+  top: 0px;
+}
+
+.componentExample {
+  display: flex;
+  justify-content: space-between;
+}
+
+.componentItemContainer {
+  position: relative;
+  height: 100%;
+}
+
+.componentSpotlightStyle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}