Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs - add content component tooltip #3458

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Docs - add content component tooltip #3458

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
73843bf
Docs - ContentItem component - add tooltip with code snippet
Inbal-Tish Dec 11, 2024
fb340a7
Add copy to clipboard
Inbal-Tish Dec 12, 2024
c45edf2
Merge branch 'master' of github.com:wix/react-native-ui-lib into feat…
Inbal-Tish Dec 12, 2024
79cfce1
Add copy icon
Inbal-Tish Dec 12, 2024
5a6a9ab
remove console
Inbal-Tish Dec 12, 2024
66c1360
replace hover with button and fix copy
Inbal-Tish Dec 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 70 additions & 5 deletions docuilib/src/components/pageComponents/ContentItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 = '';
Expand All @@ -37,14 +37,66 @@ 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 copy = () => {
let copyText = document.getElementById('component_code').innerHTML;
copyText = copyText.replace(new RegExp('&lt;', 'g'), '<');
copyText = copyText.replace(new RegExp(' /&gt;', 'g'), '/>');
navigator.clipboard.writeText(copyText);
};

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);
return (
<div style={{position: 'absolute', left: '66%', cursor: 'pointer'}} onClick={copy}>
<span
style={{
display: 'flex',
flexDirection: 'row',
position: 'absolute',
bottom: '125%',
left: '50%',
marginLeft: '-60px',
textAlign: 'start',
justifyContent: 'space-between',
zIndex: 1,
minWidth: '250px',
padding: '16px',
backgroundColor: '#555',
color: '#fff',
borderRadius: '6px'
}}
>
<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
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;
Expand All @@ -55,6 +107,12 @@ type ContentItemProps = {
componentName: string;
};
export const ContentItem = ({item, componentName}: ContentItemProps) => {
const [show, setShow] = useState(false);

const toggleCodeTooltip = () => {
setShow(!show);
};

const getFigmaEmbed = item => {
const value = item.value;
const height = item.height || 450;
Expand All @@ -71,9 +129,16 @@ 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 <ComponentItem componentName={name} props={item.props}/>;
return (
<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) {
return <div style={{color: 'red'}}>Component Not Supported</div>;
}
Expand Down