extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2024-11-07 08:34:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: docs refactor

Browse Source
This commit is contained in:
Anoop M D 2023-10-13 06:46:14 +05:30
parent 625a19e86c
commit d3ab2f28c6
18 changed files with 3018 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2889
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

28
packages/bruno-app/src/components/Documentation/MarkdownBody.js
View File

@ -1,28 +0,0 @@
import StyledMarkdownBodyWrapper from './StyledMarkdownBodyWrapper';
const MarkdownBody = (props) => {
const handleOnDoubleClick = () => {
switch (event.detail) {
case 2: {
props.OnDoubleClick();
break;
}
case 1:
default: {
break;
}
}
};
return (
<StyledMarkdownBodyWrapper theme={props.theme}>
<div
className="markdown-body"
dangerouslySetInnerHTML={{ __html: props.children }}
onClick={handleOnDoubleClick}
/>
</StyledMarkdownBodyWrapper>
);
};
export default MarkdownBody;

24
packages/bruno-app/src/components/Documentation/StyledContentWrapper.js
View File

@ -1,24 +0,0 @@
import styled from 'styled-components';
const StyledContentWrapper = styled.div`
height: calc(100vh - 280px);
margin-right: 5px;
margin-left: 5px;
margin-bottom: -4em;
background-color: ${(props) => props.theme.rightPane.bg};
.text-end {
text-align: end;
}
::-webkit-scrollbar {
width: 0px;
}
::-webkit-scrollbar-button {
display: none;
}
`;
export default StyledContentWrapper;

80
packages/bruno-app/src/components/Documentation/StyledMarkdownBodyWrapper.js
View File

@ -1,80 +0,0 @@
import styled from 'styled-components';
const StyledMarkdownBodyWrapper = styled.div`
height: inherit;
.markdown-body {
overflow-y: auto;
background-color: ${(props) => props.theme.rightPane.bg};
border: 1px solid ${(props) => props.theme.rightPane.border};
color: ${(props) => props.theme.text};
box-sizing: border-box;
height: 100%;
margin: 0 auto;
padding: 1em;
font-size: 0.875rem;
}
.markdown-body h1 {
margin: 0.67em 0;
font-weight: var(--base-text-weight-semibold, 600);
padding-bottom: 0.3em;
font-size: 1.3;
border-bottom: 1px solid var(--color-border-muted);
}
.markdown-body h2 {
font-weight: var(--base-text-weight-semibold, 600);
padding-bottom: 0.3em;
font-size: 1.2;
border-bottom: 1px solid var(--color-border-muted);
}
.markdown-body h3 {
font-weight: var(--base-text-weight-semibold, 600);
font-size: 1.1em;
}
.markdown-body h4 {
font-weight: var(--base-text-weight-semibold, 600);
font-size: 1em;
}
.markdown-body h5 {
font-weight: var(--base-text-weight-semibold, 600);
font-size: 0.95em;
}
.markdown-body h6 {
font-weight: var(--base-text-weight-semibold, 600);
font-size: 0.9em;
color: var(--color-fg-muted);
}
.markdown-body hr {
box-sizing: content-box;
overflow: hidden;
background: transparent;
border-bottom: 1px solid var(--color-border-muted);
height: 1px;
padding: 0;
margin: 24px 0;
background-color: var(--color-border-default);
border: 0;
}
.markdown-body ul {
list-style-type: disc;
}
.markdown-body ol {
list-style-type: decimal;
}
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
`;
export default StyledMarkdownBodyWrapper;

13
packages/bruno-app/src/components/Documentation/StyledWrapper.js
View File

@ -1,7 +1,18 @@
import styled from 'styled-components';
const StyledWrapper = styled.div`
width: inherit;
div.CodeMirror {
/* todo: find a better way */
height: calc(100vh - 240px);
.CodeMirror-scroll {
padding-bottom: 0px;
}
}
.editing-mode {
cursor: pointer;
color: ${(props) => props.theme.colors.text.yellow};
}
`;
export default StyledWrapper;

41
packages/bruno-app/src/components/Documentation/index.js
View File

@ -1,20 +1,17 @@
import TextareaEditor from 'components/TextareaEditor/index';
import 'github-markdown-css/github-markdown.css';
import get from 'lodash/get';
import MarkdownIt from 'markdown-it';
import { updateRequestDocs } from 'providers/ReduxStore/slices/collections';
import { useTheme } from 'providers/Theme/index';
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import MarkdownBody from './MarkdownBody';
import StyledContentWrapper from './StyledContentWrapper';
import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
import Markdown from 'components/MarkDown';
import CodeEditor from 'components/CodeEditor';
import StyledWrapper from './StyledWrapper';
const md = new MarkdownIt();
const Documentation = ({ item, collection }) => {
const dispatch = useDispatch();
const themeContext = useTheme();
const { storedTheme } = useTheme();
const [isEditing, setIsEditing] = useState(false);
const docs = item.draft ? get(item, 'draft.request.docs') : get(item, 'request.docs');
@ -22,42 +19,40 @@ const Documentation = ({ item, collection }) => {
setIsEditing((prev) => !prev);
};
const handleChange = (e) => {
const onEdit = (value) => {
dispatch(
updateRequestDocs({
itemUid: item.uid,
collectionUid: collection.uid,
docs: e.target.value
docs: value
})
);
};
const htmlFromMarkdown = md.render(docs);
const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
if (!item) {
return null;
}
return (
<StyledWrapper theme={themeContext.theme}>
<div
className="inline-block m-1 mb-0"
style={{ backgroundColor: themeContext.theme.rightPane.bg, width: '-webkit-fill-available' }}
>
<button className="text-end float-right mr-6 text-blue-400" onClick={toggleViewMode}>
<StyledWrapper className="mt-1 h-full w-full relative">
<div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
{isEditing ? 'Preview' : 'Edit'}
</button>
</div>
<StyledContentWrapper theme={themeContext.theme}>
{isEditing ? (
<TextareaEditor className="w-full h-full" onChange={handleChange} value={docs || ''} />
<CodeEditor
collection={collection}
theme={storedTheme}
value={docs || ''}
onEdit={onEdit}
onSave={onSave}
mode="application/text"
/>
) : (
<MarkdownBody OnDoubleClick={toggleViewMode} theme={themeContext.theme}>
{htmlFromMarkdown}
</MarkdownBody>
<Markdown onDoubleClick={toggleViewMode} content={docs} />
)}
</StyledContentWrapper>
</StyledWrapper>
);
};

83
packages/bruno-app/src/components/MarkDown/StyledWrapper.js Normal file
View File

@ -0,0 +1,83 @@
import styled from 'styled-components';
const StyledMarkdownBodyWrapper = styled.div`
background: transparent;
height: inherit;
.markdown-body {
background: transparent;
overflow-y: auto;
color: ${(props) => props.theme.text};
box-sizing: border-box;
height: 100%;
margin: 0 auto;
padding-top: 0.5rem;
font-size: 0.875rem;
h1 {
margin: 0.67em 0;
font-weight: var(--base-text-weight-semibold, 600);
padding-bottom: 0.3em;
font-size: 1.3;
border-bottom: 1px solid var(--color-border-muted);
}
h2 {
font-weight: var(--base-text-weight-semibold, 600);
padding-bottom: 0.3em;
font-size: 1.2;
border-bottom: 1px solid var(--color-border-muted);
}
h3 {
font-weight: var(--base-text-weight-semibold, 600);
font-size: 1.1em;
}
h4 {
font-weight: var(--base-text-weight-semibold, 600);
font-size: 1em;
}
h5 {
font-weight: var(--base-text-weight-semibold, 600);
font-size: 0.95em;
}
h6 {
font-weight: var(--base-text-weight-semibold, 600);
font-size: 0.9em;
color: var(--color-fg-muted);
}
hr {
box-sizing: content-box;
overflow: hidden;
border-bottom: 1px solid var(--color-border-muted);
height: 1px;
padding: 0;
margin: 24px 0;
background-color: var(--color-border-default);
border: 0;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
pre {
background: ${(props) => props.theme.sidebar.bg};
}
}
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
`;
export default StyledMarkdownBodyWrapper;

32
packages/bruno-app/src/components/MarkDown/index.js Normal file
View File

@ -0,0 +1,32 @@
import MarkdownIt from 'markdown-it';
import StyledWrapper from './StyledWrapper';
const md = new MarkdownIt();
const Markdown = ({ onDoubleClick, content }) => {
const handleOnDoubleClick = (event) => {
switch (event.detail) {
case 2: {
onDoubleClick();
break;
}
case 1:
default: {
break;
}
}
};
const htmlFromMarkdown = md.render(content || '');
return (
<StyledWrapper>
<div
className="markdown-body"
dangerouslySetInnerHTML={{ __html: htmlFromMarkdown }}
onClick={handleOnDoubleClick}
/>
</StyledWrapper>
);
};
export default Markdown;

4
packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
View File

@ -117,7 +117,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
) : null}
</div>
<section
className={`flex w-full ${['script', 'vars', 'auth'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'}`}
className={`flex w-full ${
['script', 'vars', 'auth', 'docs'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'
}`}
>
{getTabPanel(focusedTab.requestPaneTab)}
</section>

2
packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
View File

@ -115,7 +115,7 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
}, [tab, collection, storedTheme, onRun, value, mode]);
return (
<StyledWrapper className="px-3 w-full h-full" style={{ maxWidth: width }}>
<StyledWrapper className="w-full h-full" style={{ maxWidth: width }}>
<div className="flex justify-end gap-2 text-xs" role="tablist">
{getTabs()}
</div>

2
packages/bruno-app/src/components/ResponsePane/ResponseHeaders/index.js
View File

@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
const ResponseHeaders = ({ headers }) => {
return (
<StyledWrapper className="px-3 pb-4 w-full">
<StyledWrapper className="pb-4 w-full">
<table>
<thead>
<tr>

2
packages/bruno-app/src/components/ResponsePane/TestResults/index.js
View File

@ -15,7 +15,7 @@ const TestResults = ({ results, assertionResults }) => {
const failedAssertions = assertionResults.filter((result) => result.status === 'fail');
return (
<StyledWrapper className="flex flex-col px-3">
<StyledWrapper className="flex flex-col">
<div className="pb-2 font-medium test-summary">
Tests ({results.length}/{results.length}), Passed: {passedTests.length}, Failed: {failedTests.length}
</div>

2
packages/bruno-app/src/components/ResponsePane/Timeline/index.js
View File

@ -20,7 +20,7 @@ const Timeline = ({ request, response }) => {
let requestData = safeStringifyJSON(request.data);
return (
<StyledWrapper className="px-3 pb-4 w-full">
<StyledWrapper className="pb-4 w-full">
<div>
<pre className="line request font-bold">
<span className="arrow">{'>'}</span> {request.method} {request.url}

6
packages/bruno-app/src/components/ResponsePane/index.js
View File

@ -94,7 +94,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
return (
<StyledWrapper className="flex flex-col h-full relative">
<div className="flex flex-wrap items-center px-3 tabs" role="tablist">
<div className="flex flex-wrap items-center pl-3 pr-4 tabs" role="tablist">
<div className={getTabClassname('response')} role="tab" onClick={() => selectTab('response')}>
Response
</div>
@ -115,7 +115,9 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
</div>
) : null}
</div>
<section className={`flex flex-grow relative ${focusedTab.responsePaneTab === 'response' ? '' : 'mt-4'}`}>
<section
className={`flex flex-grow relative pl-3 pr-4 ${focusedTab.responsePaneTab === 'response' ? '' : 'mt-4'}`}
>
{isLoading ? <Overlay item={item} collection={collection} /> : null}
{getTabPanel(focusedTab.responsePaneTab)}
</section>

21
packages/bruno-app/src/components/TextareaEditor/StyledTextarea.js
View File

@ -1,21 +0,0 @@
import styled from 'styled-components';
const StyledTextarea = styled.textarea`
height: inherit;
background: ${(props) => props.theme.bg};
color: ${(props) => props.theme.text};
border: solid 1px ${(props) => props.theme.modal.input.border};
padding: 1em;
resize: none;
&:focus,
&:active,
&:focus-within,
&:focus-visible,
&:target {
border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
outline: ${(props) => props.theme.modal.input.focusBorder} !important;
}
`;
export default StyledTextarea;

7
packages/bruno-app/src/components/TextareaEditor/index.js
View File

@ -1,7 +0,0 @@
import StyledTextarea from './StyledTextarea';
const TextareaEditor = (props) => {
return <StyledTextarea {...props} />;
};
export default TextareaEditor;

5
packages/bruno-app/src/themes/dark.js
View File

@ -233,11 +233,6 @@ const darkTheme = {
plainGrid: {
hoverBg: '#3D3D3D'
},
rightPane: {
bg: '#1e1e1e',
border: '#4f4f4f'
}
};

5
packages/bruno-app/src/themes/light.js
View File

@ -237,11 +237,6 @@ const lightTheme = {
plainGrid: {
hoverBg: '#f4f4f4'
},
rightPane: {
bg: '#fff',
border: '#e1e1e1'
}
};