Add CodeExample component

coder · bryphe-coder · Feb 11, 2022 · Feb 10, 2022 · Feb 11, 2022 · Feb 11, 2022
commit 9b84598f23180a328110498e89c64ec361991ef1
diff --git a/site/components/Button/CopyButton.tsx b/site/components/Button/CopyButton.tsx
@@ -7,29 +7,24 @@ import { FileCopy } from "../Icons"
 interface CopyButtonProps {
   text: string
   className?: string
-  onFailure: () => void
-  onSuccess: () => void
 }
 
 /**
  * Copy button used inside the CodeBlock component internally
  */
-export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text, onSuccess, onFailure }) => {
+export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text }) => {
   const styles = useStyles()
 
 
   const copyToClipboard = async (): Promise<void> => {
     try {
       await window.navigator.clipboard.writeText(text)
-      onSuccess()
     } catch (err) {
       const wrappedErr = new Error("copyToClipboard: failed to copy text to clipboard")
       if (err instanceof Error) {
         wrappedErr.stack = err.stack
       }
       console.error(wrappedErr)
-
-      onFailure()
     }
   }
 

diff --git a/site/components/CodeBlock/index.stories.tsx b/site/components/CodeBlock/index.stories.tsx
@@ -12,7 +12,7 @@ export default {
   title: "CodeBlock",
   component: CodeBlock,
   argTypes: {
-    lines: { control: "object", defaultValue: sampleLines },
+    lines: { control: "text", defaultValue: sampleLines },
   },
 }
 

diff --git a/site/components/CodeBlock/index.tsx b/site/components/CodeBlock/index.tsx
@@ -1,5 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
+import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 
 export interface CodeBlockProps {
   lines: string[]
@@ -18,8 +19,6 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ lines }) => {
     </div>
   )
 }
-const MONOSPACE_FONT_FAMILY =
-  "'Fira Code', 'Lucida Console', 'Lucida Sans Typewriter', 'Liberation Mono', 'Monaco', 'Courier New', Courier, monospace"
 
 const useStyles = makeStyles((theme) => ({
   root: {

diff --git a/site/components/CodeExample/index.stories.tsx b/site/components/CodeExample/index.stories.tsx
@@ -0,0 +1,20 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { CodeExample, CodeExampleProps } from "./index"
+
+const sampleCode = `echo "Hello, world"`
+
+export default {
+  title: "CodeExample",
+  component: CodeExample,
+  argTypes: {
+    code: { control: "string", defaultValue: sampleCode },
+  },
+}
+
+const Template: Story<CodeExampleProps> = (args: CodeExampleProps) => <CodeExample {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  code: sampleCode,
+}
diff --git a/site/components/CodeExample/index.test.tsx b/site/components/CodeExample/index.test.tsx
@@ -0,0 +1,15 @@
+import { screen } from "@testing-library/react"
+import { render } from "../../test_helpers"
+import React from "react"
+import { CodeExample } from "./index"
+
+describe("CodeExample", () => {
+  it("renders code", async () => {
+    // When
+    render(<CodeExample code="echo hello" />)
+
+    // Then
+    // Both lines should be rendered
+    await screen.findByText("echo hello")
+  })
+})
diff --git a/site/components/CodeExample/index.tsx b/site/components/CodeExample/index.tsx
@@ -0,0 +1,34 @@
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
+
+import { CopyButton } from "./../Button"
+
+export interface CodeExampleProps {
+  code: string
+}
+
+export const CodeExample: React.FC<CodeExampleProps> = ({ code }) => {
+  const styles = useStyles()
+
+  return (
+    <div className={styles.root}>
+      <code>{code}</code>
+      <CopyButton text={code} />
+    </div>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    background: theme.palette.background.default,
+    color: theme.palette.codeBlock.contrastText,
+    fontFamily: MONOSPACE_FONT_FAMILY,
+    fontSize: 13,
+    padding: theme.spacing(2),
+    borderRadius: theme.shape.borderRadius,
+  },
+}))
diff --git a/site/pages/projects/index.tsx b/site/pages/projects/index.tsx
@@ -14,7 +14,7 @@ import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
 
 import { Organization, Project } from "./../../api"
 import useSWR from "swr"
-import { CodeBlock } from "../../components/CodeBlock"
+import { CodeExample } from "../../components/CodeExample"
 
 const ProjectsPage: React.FC = () => {
   const styles = useStyles()
@@ -60,7 +60,7 @@ const ProjectsPage: React.FC = () => {
 
   const description = <div>
     <div>Run the following command to get started:</div>
-    <CodeBlock lines={["coder project create"]} />
+    <CodeExample code="coder project create" />
   </div>
 
   const emptyState = <EmptyState

diff --git a/site/theme/palettes.ts b/site/theme/palettes.ts
@@ -9,6 +9,14 @@ declare module "@material-ui/core/styles/createPalette" {
       contrastText: string
       // Background color for codeblocks
       main: string
+      button: {
+        // Background for buttons inside a codeblock
+        main: string
+        // Hover background color for buttons inside a codeblock
+        hover: string
+        // Text color for buttons inside a codeblock
+        contrastText: string
+      }
     }
     navbar: {
       main: string
@@ -26,6 +34,11 @@ declare module "@material-ui/core/styles/createPalette" {
     codeBlock: {
       contrastText: string
       main: string
+      button: {
+        main: string
+        hover: string
+        contrastText: string
+      }
     }
     navbar: {
       main: string
@@ -71,6 +84,11 @@ export const lightPalette: CustomPalette = {
   codeBlock: {
     main: "#F3F3F3",
     contrastText: "rgba(0, 0, 0, 0.9)",
+    button: {
+      main: "#E6ECE6",
+      hover: "#DAEBDA",
+      contrastText: "#000",
+    },
   },
   primary: {
     main: "#519A54",
@@ -135,6 +153,11 @@ export const darkPalette: CustomPalette = {
   codeBlock: {
     main: "rgb(24, 26, 27)",
     contrastText: "rgba(255, 255, 255, 0.8)",
+    button: {
+      main: "rgba(255, 255, 255, 0.1)",
+      hover: "rgba(255, 255, 255, 0.25)",
+      contrastText: "#FFF",
+    },
   },
   hero: {
     main: "#141414",