From 73843bf273a6bd723987235dcfc5aec39f41d426 Mon Sep 17 00:00:00 2001
From: Inbal Tish <inbalti@wix.com>
Date: Wed, 11 Dec 2024 15:54:31 +0200
Subject: [PATCH 1/5] Docs - ContentItem component - add tooltip with code
 snippet

---
 .../components/pageComponents/ContentItem.tsx | 62 +++++++++++++++++--
 1 file changed, 58 insertions(+), 4 deletions(-)

diff --git a/docuilib/src/components/pageComponents/ContentItem.tsx b/docuilib/src/components/pageComponents/ContentItem.tsx
index ea49ad32dd..feda84d869 100644
--- a/docuilib/src/components/pageComponents/ContentItem.tsx
+++ b/docuilib/src/components/pageComponents/ContentItem.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import '../ComponentPage.module.scss';
 import {LiveProvider, LivePreview} from 'react-live';
 import ReactLiveScope from '../../theme/ReactLiveScope';
@@ -26,7 +26,7 @@ function generateComponentCodeSnippet(componentName, componentProps) {
   return `<${componentName} ${propString} />`;
 }
 
-const ComponentItem = (props: ComponentItemProps) => {
+function getCode(props) {
   const {componentName, props: componentProps} = props;
 
   let code = '';
@@ -37,14 +37,53 @@ const ComponentItem = (props: ComponentItemProps) => {
   } else {
     code = generateComponentCodeSnippet(componentName, componentProps);
   }
+  return code;
+}
 
+const ComponentItem = (props: ComponentItemProps) => {
   return (
-    <LiveProvider code={`<View center gap-s1>${code} </View>`} scope={ReactLiveScope}>
+    <LiveProvider code={`<div center gap-s1>${getCode(props)}</div>`} scope={ReactLiveScope}>
       <LivePreview/>
     </LiveProvider>
   );
 };
 
+const Tooltip = (props: ComponentItemProps) => {
+  const code = getCode(props);
+  return (
+    <div style={{position: 'relative', display: 'inline-block'}}>
+      <span 
+        style={{
+          width: '400px',
+          backgroundColor: '#555',
+          color: '#fff',
+          // textAlign: 'center',
+          padding: '5px',
+          borderRadius: '6px',
+          position: 'absolute',
+          zIndex: 1,
+          bottom: '125%',
+          left: '50%',
+          marginLeft: '-60px'
+        }}
+      >
+        {code}
+      </span>
+      <div 
+        style={{
+          position: 'absolute', 
+          top: '100%',
+          left: '50%',
+          marginLeft: '-5px',
+          borderWidth: '5px',
+          borderStyle: 'solid',
+          borderColor: '#555 transparent transparent transparent'
+        }}
+      />
+    </div>
+  );
+};
+
 type Item = {
   component?: string;
   props?: any;
@@ -55,6 +94,16 @@ type ContentItemProps = {
   componentName: string;
 };
 export const ContentItem = ({item, componentName}: ContentItemProps) => {
+  const [show, setShow] = useState(false);
+
+  const onHover = () => {
+    setShow(true);
+  };
+
+  const onLeave = () => {
+    setShow(false);
+  };
+
   const getFigmaEmbed = item => {
     const value = item.value;
     const height = item.height || 450;
@@ -73,7 +122,12 @@ export const ContentItem = ({item, componentName}: ContentItemProps) => {
     const isComponentExists = !!ReactLiveScope[name];
     
     if (isComponentExists) {
-      return <ComponentItem componentName={name} props={item.props}/>;
+      return (
+        <div onMouseOver={onHover} onMouseLeave={onLeave} style={{position: 'relative'}}>
+          {show && <Tooltip componentName={name} props={item.props}/>}
+          <ComponentItem componentName={name} props={item.props}/>
+        </div>
+      );
     } else if (!value) {
       return <div style={{color: 'red'}}>Component Not Supported</div>;
     }

From fb340a782724c27531c1997e8ab595a6800daeab Mon Sep 17 00:00:00 2001
From: Inbal Tish <inbalti@wix.com>
Date: Thu, 12 Dec 2024 09:16:21 +0200
Subject: [PATCH 2/5] Add copy to clipboard

---
 .../components/pageComponents/ContentItem.tsx | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/docuilib/src/components/pageComponents/ContentItem.tsx b/docuilib/src/components/pageComponents/ContentItem.tsx
index feda84d869..f84c47ac8e 100644
--- a/docuilib/src/components/pageComponents/ContentItem.tsx
+++ b/docuilib/src/components/pageComponents/ContentItem.tsx
@@ -48,17 +48,30 @@ const ComponentItem = (props: ComponentItemProps) => {
   );
 };
 
+const copy = () => {
+  let copyText = document.getElementById('component_code').innerHTML;
+  copyText = copyText.replace('&lt;', '<');
+  copyText = copyText.replace(' /&gt;', '/>');
+  navigator.clipboard.writeText(copyText);
+  console.log('copied: ', copyText); 
+};
+
+// const copyIcon = 'https://github.com/wix/react-native-ui-lib/blob/2155a91386f884db816c4d45d97e47bed6024d98/docuilib/src/assets/icons/copy.png?raw=true';
+const copyIcon = require('../../assets/icons/copy.png');
+
 const Tooltip = (props: ComponentItemProps) => {
   const code = getCode(props);
   return (
-    <div style={{position: 'relative', display: 'inline-block'}}>
+    <div style={{position: 'relative', display: 'inline-block', cursor: 'pointer'}} onClick={copy}>
       <span 
         style={{
-          width: '400px',
+          display: 'flex',
+          flexDirection: 'row',
+          width: '250px',
           backgroundColor: '#555',
           color: '#fff',
-          // textAlign: 'center',
-          padding: '5px',
+          textAlign: 'start',
+          padding: '12px',
           borderRadius: '6px',
           position: 'absolute',
           zIndex: 1,
@@ -67,7 +80,8 @@ const Tooltip = (props: ComponentItemProps) => {
           marginLeft: '-60px'
         }}
       >
-        {code}
+        <div id={'component_code'}>{code}</div>
+        <img src={copyIcon} style={{width: 24, height: 24, alignSelf: 'flex-start', color: '#fff'}}/>
       </span>
       <div 
         style={{

From 79cfce1d62ac04e090616ccdebfedd2f11e4d3d6 Mon Sep 17 00:00:00 2001
From: Inbal Tish <inbalti@wix.com>
Date: Thu, 12 Dec 2024 09:56:41 +0200
Subject: [PATCH 3/5] Add copy icon

---
 docuilib/src/components/pageComponents/ContentItem.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/docuilib/src/components/pageComponents/ContentItem.tsx b/docuilib/src/components/pageComponents/ContentItem.tsx
index f84c47ac8e..fa2b8dde56 100644
--- a/docuilib/src/components/pageComponents/ContentItem.tsx
+++ b/docuilib/src/components/pageComponents/ContentItem.tsx
@@ -56,8 +56,7 @@ const copy = () => {
   console.log('copied: ', copyText); 
 };
 
-// const copyIcon = 'https://github.com/wix/react-native-ui-lib/blob/2155a91386f884db816c4d45d97e47bed6024d98/docuilib/src/assets/icons/copy.png?raw=true';
-const copyIcon = require('../../assets/icons/copy.png');
+const copyIcon = 'https://github.com/wix/react-native-ui-lib/blob/master/docuilib/src/assets/icons/copy.png?raw=true';
 
 const Tooltip = (props: ComponentItemProps) => {
   const code = getCode(props);
@@ -81,7 +80,7 @@ const Tooltip = (props: ComponentItemProps) => {
         }}
       >
         <div id={'component_code'}>{code}</div>
-        <img src={copyIcon} style={{width: 24, height: 24, alignSelf: 'flex-start', color: '#fff'}}/>
+        <img src={copyIcon} style={{width: 24, height: 24, alignSelf: 'flex-start', filter: 'invert(70%)'}}/>
       </span>
       <div 
         style={{

From 5a6a9ab5980e6d26aba937b83fc24306b158c6b1 Mon Sep 17 00:00:00 2001
From: Inbal Tish <inbalti@wix.com>
Date: Thu, 12 Dec 2024 09:58:21 +0200
Subject: [PATCH 4/5] remove console

---
 docuilib/src/components/pageComponents/ContentItem.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docuilib/src/components/pageComponents/ContentItem.tsx b/docuilib/src/components/pageComponents/ContentItem.tsx
index fa2b8dde56..9e8a4aeaa5 100644
--- a/docuilib/src/components/pageComponents/ContentItem.tsx
+++ b/docuilib/src/components/pageComponents/ContentItem.tsx
@@ -53,7 +53,6 @@ const copy = () => {
   copyText = copyText.replace('&lt;', '<');
   copyText = copyText.replace(' /&gt;', '/>');
   navigator.clipboard.writeText(copyText);
-  console.log('copied: ', copyText); 
 };
 
 const copyIcon = 'https://github.com/wix/react-native-ui-lib/blob/master/docuilib/src/assets/icons/copy.png?raw=true';

From 66c13606d795dcf978c83b449aa63bd621de3680 Mon Sep 17 00:00:00 2001
From: Inbal Tish <inbalti@wix.com>
Date: Tue, 31 Dec 2024 10:21:40 +0200
Subject: [PATCH 5/5] replace hover with button and fix copy

---
 .../components/pageComponents/ContentItem.tsx | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/docuilib/src/components/pageComponents/ContentItem.tsx b/docuilib/src/components/pageComponents/ContentItem.tsx
index 9e8a4aeaa5..670d09f837 100644
--- a/docuilib/src/components/pageComponents/ContentItem.tsx
+++ b/docuilib/src/components/pageComponents/ContentItem.tsx
@@ -50,8 +50,8 @@ const ComponentItem = (props: ComponentItemProps) => {
 
 const copy = () => {
   let copyText = document.getElementById('component_code').innerHTML;
-  copyText = copyText.replace('&lt;', '<');
-  copyText = copyText.replace(' /&gt;', '/>');
+  copyText = copyText.replace(new RegExp('&lt;', 'g'), '<');
+  copyText = copyText.replace(new RegExp(' /&gt;', 'g'), '/>');
   navigator.clipboard.writeText(copyText);
 };
 
@@ -60,25 +60,26 @@ const copyIcon = 'https://github.com/wix/react-native-ui-lib/blob/master/docuili
 const Tooltip = (props: ComponentItemProps) => {
   const code = getCode(props);
   return (
-    <div style={{position: 'relative', display: 'inline-block', cursor: 'pointer'}} onClick={copy}>
+    <div style={{position: 'absolute', left: '66%', cursor: 'pointer'}} onClick={copy}>
       <span 
         style={{
           display: 'flex',
           flexDirection: 'row',
-          width: '250px',
-          backgroundColor: '#555',
-          color: '#fff',
-          textAlign: 'start',
-          padding: '12px',
-          borderRadius: '6px',
           position: 'absolute',
-          zIndex: 1,
           bottom: '125%',
           left: '50%',
-          marginLeft: '-60px'
+          marginLeft: '-60px',
+          textAlign: 'start',
+          justifyContent: 'space-between',
+          zIndex: 1,
+          minWidth: '250px',
+          padding: '16px',
+          backgroundColor: '#555',
+          color: '#fff',
+          borderRadius: '6px'
         }}
       >
-        <div id={'component_code'}>{code}</div>
+        <div id={'component_code'} style={{width: '95%', fontSize: 14}}>{code}</div>
         <img src={copyIcon} style={{width: 24, height: 24, alignSelf: 'flex-start', filter: 'invert(70%)'}}/>
       </span>
       <div 
@@ -108,12 +109,8 @@ type ContentItemProps = {
 export const ContentItem = ({item, componentName}: ContentItemProps) => {
   const [show, setShow] = useState(false);
 
-  const onHover = () => {
-    setShow(true);
-  };
-
-  const onLeave = () => {
-    setShow(false);
+  const toggleCodeTooltip = () => {
+    setShow(!show);
   };
 
   const getFigmaEmbed = item => {
@@ -132,12 +129,14 @@ export const ContentItem = ({item, componentName}: ContentItemProps) => {
   if (item.props) {
     const name = item.component ?? componentName;
     const isComponentExists = !!ReactLiveScope[name];
-    
+    const buttonLabel = show ? 'Hide code' : 'Show code';
+
     if (isComponentExists) {
       return (
-        <div onMouseOver={onHover} onMouseLeave={onLeave} style={{position: 'relative'}}>
-          {show && <Tooltip componentName={name} props={item.props}/>}
+        <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
           <ComponentItem componentName={name} props={item.props}/>
+          <div onClick={toggleCodeTooltip} style={{fontSize: 12, color: '#3899ec', cursor: 'pointer'}}>{buttonLabel}</div>
+          {show && <Tooltip componentName={name} props={item.props}/>}
         </div>
       );
     } else if (!value) {