codeblock & description group

2024-11-23 14:07:20 +03:00 · 2021-03-24 21:28:14 -07:00 · 2021-03-24 21:28:14 -07:00 · 81d2ef8c0f
commit 81d2ef8c0f
parent c370971af3
6 changed files with 225 additions and 70 deletions
--- a/components/api/get-slate.js
+++ b/components/api/get-slate.js
@ -100,24 +100,25 @@ const DocPage = (props) => {
    return (
      <React.Fragment>
        <System.DescriptionGroup
-          style={{ marginTop: 48 }}
+          style={{ marginTop: 64 }}
          label="Get slate by ID"
-          description="This API request will return a specific slate. If you don't provide an ID argument the response will contain the most recently modified slate."
+          description="This API request will return a specific slate. If you don't provide an ID argument the response will contain the most recently modified slate. Save the response locally because you can send this JSON back to our API server using the route /api/v1/update-slate to update your slate."
        />
        <CodeBlock
          children={EXAMPLE_CODE_JS(key, slateId)}
          style={{ maxWidth: "840px" }}
          language={language}
+          topBar="true"
+          title="Get slate by ID"
        />
-        <System.DescriptionGroup
-          style={{ marginTop: 48, marginBottom: 16 }}
-          label="Get slate by ID: Response"
-          description="This is the shape of the response. Save it locally because you can send this JSON back to our API server using the route /api/v1/update-slate to update your slate."
-        />
+        <br />
        <CodeBlock
          children={EXAMPLE_RESPONSE(key, slateId)}
          style={{ maxWidth: "840px" }}
          language="jsx"
+          topBar="true"
+          response="true"
+          title="Get slate by ID response"
        />
      </React.Fragment>
    );
@ -126,20 +127,15 @@ const DocPage = (props) => {
    return (
      <React.Fragment>
        <System.DescriptionGroup
-          style={{ marginTop: 48 }}
+          style={{ marginTop: 64 }}
          label="Get slate by ID"
-          description="This API request will return a specific slate. If you don't provide an ID argument the response will contain the most recently modified slate."
+          description="This API request will return a specific slate. If you don't provide an ID argument the response will contain the most recently modified slate. Save the response locally because you can send this JSON back to our API server using the route /api/v1/update-slate to update your slate."
        />
        <CodeBlock
          children={EXAMPLE_CODE_PY(key, slateId)}
          style={{ maxWidth: "840px" }}
          language={language}
        />
-        <System.DescriptionGroup
-          style={{ marginTop: 48, marginBottom: 16 }}
-          label="Get slate by ID: Response"
-          description="This is the shape of the response. Save it locally because you can send this JSON back to our API server using the route /api/v1/update-slate to update your slate."
-        />
        <CodeBlock
          children={EXAMPLE_RESPONSE(key, slateId)}
          style={{ maxWidth: "840px" }}
--- a/components/api/get.js
+++ b/components/api/get.js
@ -40,14 +40,16 @@ const DocPage = (props) => {
    return (
      <React.Fragment>
        <System.DescriptionGroup
-          style={{ marginTop: 48 }}
+          style={{ marginTop: 64 }}
          label="Get all slates"
          description="This API request returns all of your public slates"
        />
        <CodeBlock
          children={EXAMPLE_CODE_JS(APIKey)}
          language={language}
-          style={{ maxWidth: 768 }}
+          style={{ maxWidth: "840px" }}
+          topBar="true"
+          title="Get all slates"
        />
      </React.Fragment>
    );
@ -57,14 +59,14 @@ const DocPage = (props) => {
    return (
      <React.Fragment>
        <System.DescriptionGroup
-          style={{ marginTop: 48 }}
+          style={{ marginTop: 64 }}
          label="Get all slates"
          description="This API request returns all of your public slates"
        />
        <CodeBlock
          children={EXAMPLE_CODE_PY(APIKey)}
          language={language}
-          style={{ maxWidth: 768 }}
+          style={{ maxWidth: "840px" }}
        />
      </React.Fragment>
    );
--- a/components/api/update-slate.js
+++ b/components/api/update-slate.js
@ -5,7 +5,8 @@ import CodeBlock from "~/components/system/CodeBlock";

 import { css } from "@emotion/react";

-const EXAMPLE_CODE_JS = (key, slateId) => { return `
+const EXAMPLE_CODE_JS = (key, slateId) => {
+  return `
 const SLATE_ID = "${slateId}"

 const slateResponseData = getSlateById(SLATE_ID);
@ -37,14 +38,16 @@ const DocPage = (props) => {
    return (
      <React.Fragment>
        <System.DescriptionGroup
-          style={{ marginTop: 48 }}
+          style={{ marginTop: 64 }}
          label="Update slate by ID"
          description="This API endpoint will allow you to update a slate by sending your current locally modified version. This API endpoint allows for full customization so be careful."
        />
        <CodeBlock
          children={EXAMPLE_CODE_JS(key, slateId)}
-          style={{ maxWidth: "768px" }}
+          style={{ maxWidth: "840px" }}
          language={language}
+          topBar="true"
+          title="Update slate by ID"
        />
      </React.Fragment>
    );
@ -53,13 +56,13 @@ const DocPage = (props) => {
    return (
      <React.Fragment>
        <System.DescriptionGroup
-          style={{ marginTop: 48 }}
+          style={{ marginTop: 64 }}
          label="Update slate by ID"
          description="This API endpoint will allow you to update a slate by sending your current locally modified version. This API endpoint allows for full customization so be careful."
        />
        <CodeBlock
          children={EXAMPLE_CODE_PY(key, slateId)}
-          style={{ maxWidth: "768px" }}
+          style={{ maxWidth: "840px" }}
          language={language}
        />
      </React.Fragment>
--- a/components/api/upload.js
+++ b/components/api/upload.js
@ -45,14 +45,16 @@ const DocPage = (props) => {
    return (
      <React.Fragment>
        <System.DescriptionGroup
-          style={{ marginTop: 48 }}
+          style={{ marginTop: 64 }}
          label="Upload to slate by Id"
          description="This API endpoint will add a file object to your slate."
        />
        <CodeBlock
          children={EXAMPLE_CODE_JS(key, slateId)}
-          style={{ maxWidth: "768px" }}
+          style={{ maxWidth: "840px" }}
          language={language}
+          topBar="true"
+          title="Upload to slate by Id"
        />
      </React.Fragment>
    );
@ -61,13 +63,13 @@ const DocPage = (props) => {
    return (
      <React.Fragment>
        <System.DescriptionGroup
-          style={{ marginTop: 48 }}
+          style={{ marginTop: 64 }}
          label="Upload to slate by Id"
          description="This API endpoint will add a file object to your slate."
        />
        <CodeBlock
          children={EXAMPLE_CODE_PY(key, slateId)}
-          style={{ maxWidth: "768px" }}
+          style={{ maxWidth: "840px" }}
          language={language}
        />
      </React.Fragment>
--- a/components/system/CodeBlock.js
+++ b/components/system/CodeBlock.js
@ -1,5 +1,6 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
+import * as SVG from "~/common/svg";
 import Highlight, { defaultProps } from "prism-react-renderer";

 import { css } from "@emotion/react";
@ -79,12 +80,7 @@ const customTheme = {
      },
    },
    {
-      types: [
-        "boolean",
-        "string",
-        "url",
-        "regex",
-      ],
+      types: ["boolean", "string", "url", "regex"],
      style: {
        color: "#b5ffff",
      },
@ -131,7 +127,7 @@ const STYLES_CODE_BLOCK = css`
  font-size: 12px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 4px;
-  padding: 24px;
+  padding: 20px 24px;

  * {
    white-space: pre-wrap;
@ -144,15 +140,29 @@ const STYLES_CODE_BLOCK = css`
  }
 `;

-const STYLES_LINE = css`
+const STYLES_CODE_BLOCK_RESPONSE = css`
  box-sizing: border-box;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
+  font-family: ${Constants.font.code};
+  background-color: ${Constants.system.foreground};
+  color: ${Constants.system.black};
+  border-color: ${Constants.system.yellow};
+  font-size: 12px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  padding: 20px 24px;
+
+  * {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+      width: 0;
+      height: 0;
+    }
+  }
 `;

-const STYLES_PRE = css`
-  box-sizing: border-box;
+const STYLES_CODE_BODY = css`
  color: #666;
  font-family: ${Constants.font.code};
  flex-shrink: 0;
@ -166,37 +176,177 @@ const STYLES_CODE = css`
  font-family: ${Constants.font.code};
  color: ${Constants.system.gray};
  width: 100%;
-  padding-left: 16px;
+  flex-grow: 1;
+  overflow-x: auto;
+`;
+
+const STYLES_LINE_NUMBER = css`
+  text-align: right;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 32px;
+  padding-right: 16px;
+`;
+
+const STYLES_LINE = css`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const STYLES_TOPBAR = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 12px 20px 16px 20px;
+  background: ${Constants.system.black};
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+  margin-bottom: -4px;
+  box-sizing: border-box;
+`;
+
+const STYLES_TOPBAR_RESPONSE = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 12px 20px 16px 20px;
+  background: ${Constants.system.green};
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+  margin-bottom: -4px;
+  box-sizing: border-box;
+`;
+
+const STYLES_TOPBAR_TITLE = css`
+  text-transform: uppercase;
+  color: ${Constants.system.textGray};
+  font-size: ${Constants.typescale.lvlN1};
+  font-family: ${Constants.font.medium};
+  user-select: none;
+  pointer-events: none;
+`;
+
+const STYLES_LANGSWITCHER = css`
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: ${Constants.system.textGray};
+  font-size: ${Constants.typescale.lvlN1};
+  margin-right: 12px;
+  border: 1px solid ${Constants.system.gray80};
+  border-radius: 4px;
+  cursor: pointer;
+`;
+
+const STYLES_LANG = css`
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: ${Constants.system.textGray};
+  border-radius: 3px;
+  padding: 4px 8px;
+`;
+
+const STYLES_LANG_SELECTED = css`
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: ${Constants.system.white};
+  background: ${Constants.system.gray80};
+  border-radius: 3px;
+  padding: 4px 8px;
+`;
+
+const STYLES_COPY_BUTTON = css`
+  display: flex;
+  align-items: center;
+  color: ${Constants.system.textGray};
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+
+  :hover {
+    background: ${Constants.system.gray80};
+    color: ${Constants.system.white};
+  }
+`;
+
+const STYLES_HIDDEN = css`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
 `;

 class CodeBlock extends React.Component {
+  _ref = null;
+
+  state = {
+    copyValue: "",
+  };
+
+  _handleCopy = (value) => {
+    this.setState({ copyValue: value }, () => {
+      this._ref.select();
+      document.execCommand("copy");
+    });
+  };
  //defaults to js
-  language = this.props.language ? this.props.language : "javascript";
+  language = this.props.language ? this.props.language : "Javascript";
  render() {
+    let styleTopBar = this.props.response ? STYLES_TOPBAR_RESPONSE : STYLES_TOPBAR;
+    let styleCodeBlock = this.props.response ? STYLES_CODE_BLOCK_RESPONSE : STYLES_CODE_BLOCK;
+    let langswitcher = this.language && !this.props.response;
    return (
-      <div css={STYLES_CODE_BLOCK} style={this.props.style}>
-        <Highlight
-          {...defaultProps}
-          theme={customTheme}
-          code={this.props.children}
-          language={this.language}
-        >
-          {({ className, style, tokens, getLineProps, getTokenProps }) => (
-            <pre className={className} css={STYLES_PRE}>
-              {tokens.map((line, i) => (
-                <div key={i} {...getLineProps({ line, key: i })}>
-                  <span>{i + 1}</span>
-                  <span css={STYLES_CODE}>
-                    {line.map((token, key) => (
-                      <span key={key} {...getTokenProps({ token, key })} />
-                    ))}
-                  </span>
-                </div>
-              ))}
-            </pre>
-          )}
-        </Highlight>
-      </div>
+      <React.Fragment>
+        {this.props.topBar && (
+          <div css={STYLES_TOPBAR} style={this.props.style}>
+            <div css={STYLES_TOPBAR_TITLE}>{this.props.title}</div>
+            {langswitcher && (
+              <div css={STYLES_LANGSWITCHER}>
+                <div css={STYLES_LANG}>Python</div>
+                <div css={STYLES_LANG_SELECTED}>Javascript</div>
+              </div>
+            )}
+            <div css={STYLES_COPY_BUTTON}>
+              <SVG.CopyAndPaste height="16px" />
+            </div>
+            {/* <input
+              css={STYLES_HIDDEN}
+              ref={(c) => {
+                this._ref = c;
+              }}
+              readOnly
+              value={this.state.copyValue}
+            /> */}
+          </div>
+        )}
+        <div css={STYLES_CODE_BLOCK} style={this.props.style}>
+          <Highlight
+            {...defaultProps}
+            theme={customTheme}
+            code={this.props.children}
+            language={this.language}
+          >
+            {({ className, style, tokens, getLineProps, getTokenProps }) => (
+              <pre className={className} css={STYLES_CODE_BODY}>
+                {tokens.map((line, i) => (
+                  <div css={STYLES_LINE} key={i} {...getLineProps({ line, key: i })}>
+                    <div css={STYLES_LINE_NUMBER}>{i + 1}</div>
+                    <div css={STYLES_CODE}>
+                      {line.map((token, key) => (
+                        <span key={key} {...getTokenProps({ token, key })} />
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </pre>
+            )}
+          </Highlight>
+        </div>
+      </React.Fragment>
    );
  }
 }
--- a/components/system/components/fragments/DescriptionGroup.js
+++ b/components/system/components/fragments/DescriptionGroup.js
@ -8,10 +8,11 @@ import { TooltipAnchor } from "~/components/system/components/fragments/TooltipA

 const STYLES_DESCRIPTION_GROUP_LABEL = css`
  box-sizing: border-box;
-  font-family: ${Constants.font.semiBold};
-  font-size: 14px;
+  font-family: ${Constants.font.medium};
+  font-size: ${Constants.typescale.lvl1};
+  color: ${Constants.system.black};
  padding: 0;
-  margin-bottom: 8px;
+  margin: 16px 0 8px 0;
  display: block;
  width: 100%;
  white-space: pre-wrap;
@ -21,8 +22,9 @@ const STYLES_DESCRIPTION_GROUP_LABEL = css`
 const STYLES_DESCRIPTION_GROUP_DESCRIPTION = css`
  box-sizing: border-box;
  font-family: ${Constants.font.text};
-  font-size: 14px;
-  margin-bottom: 12px;
+  font-size: ${Constants.typescale.lvl0};
+  color: ${Constants.system.textGray};
+  margin-bottom: 16px;
  line-height: 1.5;
  display: block;
  width: 100%;