refactor: Add <CodeBlock /> component (#168)

bryphe-coder · web-flow · commit e3089e99d9cc · 2022-02-07T09:17:01.000-08:00
This ports over a component from v1 that is needed for the v2 workspace page, and adds theme colors for it: <img width="772" alt="Screen Shot 2022-02-05 at 10 39 28 AM" src="https://user-images.githubusercontent.com/88213859/152654601-bab5acca-2e4a-4d53-890f-067a3b864040.png"> Component in storybook: ![image](https://user-images.githubusercontent.com/88213859/152654750-35565e5e-1f49-4b29-a140-cda757fb19aa.png) By bringing in these components ahead of time - it'll make the workspaces page PR smaller.
diff --git a/site/components/CodeBlock/index.stories.tsx b/site/components/CodeBlock/index.stories.tsx
@@ -0,0 +1,24 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { CodeBlock, CodeBlockProps } from "./index"
+
+const sampleLines = `Successfully assigned coder/image-jcws7 to cluster-1
+Container image "gcr.io/coder-dogfood/master/coder-dev-ubuntu@sha256" already present on machine
+Created container user
+Started container user
+Using user 'coder' with shell '/bin/bash'`.split("\n")
+
+export default {
+  title: "CodeBlock",
+  component: CodeBlock,
+  argTypes: {
+    lines: { control: "object", defaultValue: sampleLines },
+  },
+}
+
+const Template: Story<CodeBlockProps> = (args: CodeBlockProps) => <CodeBlock {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  lines: sampleLines,
+}
diff --git a/site/components/CodeBlock/index.test.tsx b/site/components/CodeBlock/index.test.tsx
@@ -0,0 +1,16 @@
+import { screen } from "@testing-library/react"
+import { render } from "../../test_helpers"
+import React from "react"
+import { CodeBlock } from "./index"
+
+describe("CodeBlock", () => {
+  it("renders lines)", async () => {
+    // When
+    render(<CodeBlock lines={["line1", "line2"]} />)
+
+    // Then
+    // Both lines should be rendered
+    await screen.findByText("line1")
+    await screen.findByText("line2")
+  })
+})
diff --git a/site/components/CodeBlock/index.tsx b/site/components/CodeBlock/index.tsx
@@ -0,0 +1,38 @@
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+
+export interface CodeBlockProps {
+  lines: string[]
+}
+
+export const CodeBlock: React.FC<CodeBlockProps> = ({ lines }) => {
+  const styles = useStyles()
+
+  return (
+    <div className={styles.root}>
+      {lines.map((line, idx) => (
+        <div className={styles.line} key={idx}>
+          {line}
+        </div>
+      ))}
+    </div>
+  )
+}
+const MONOSPACE_FONT_FAMILY =
+  "'Fira Code', 'Lucida Console', 'Lucida Sans Typewriter', 'Liberation Mono', 'Monaco', 'Courier New', Courier, monospace"
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    minHeight: 156,
+    background: theme.palette.background.default,
+    color: theme.palette.codeBlock.contrastText,
+    fontFamily: MONOSPACE_FONT_FAMILY,
+    fontSize: 13,
+    wordBreak: "break-all",
+    padding: theme.spacing(2),
+    borderRadius: theme.shape.borderRadius,
+  },
+  line: {
+    whiteSpace: "pre-wrap",
+  },
+}))
diff --git a/site/theme/palettes.ts b/site/theme/palettes.ts
@@ -4,6 +4,12 @@ import { Palette } from "@material-ui/core/styles/createPalette"
  */
 declare module "@material-ui/core/styles/createPalette" {
   interface Palette {
+    codeBlock: {
+      // Text color for codeblocks
+      contrastText: string
+      // Background color for codeblocks
+      main: string
+    }
     navbar: {
       main: string
     }
@@ -17,6 +23,10 @@ declare module "@material-ui/core/styles/createPalette" {
   }
 
   interface PaletteOptions {
+    codeBlock: {
+      contrastText: string
+      main: string
+    }
     navbar: {
       main: string
     }
@@ -32,7 +42,18 @@ declare module "@material-ui/core/styles/createPalette" {
  */
 export type CustomPalette = Pick<
   Palette,
-  "action" | "background" | "divider" | "error" | "hero" | "info" | "navbar" | "primary" | "secondary" | "text" | "type"
+  | "action"
+  | "background"
+  | "codeBlock"
+  | "divider"
+  | "error"
+  | "hero"
+  | "info"
+  | "navbar"
+  | "primary"
+  | "secondary"
+  | "text"
+  | "type"
 >
 
 /**
@@ -47,7 +68,10 @@ export const lightPalette: CustomPalette = {
     default: "#F3F3F3",
     paper: "#FFF",
   },
-
+  codeBlock: {
+    main: "#F3F3F3",
+    contrastText: "rgba(0, 0, 0, 0.9)",
+  },
   primary: {
     main: "#519A54",
     light: "#A2E0A5",
@@ -108,6 +132,10 @@ export const darkPalette: CustomPalette = {
   secondary: lightPalette.secondary,
   info: lightPalette.info,
   error: lightPalette.error,
+  codeBlock: {
+    main: "rgb(24, 26, 27)",
+    contrastText: "rgba(255, 255, 255, 0.8)",
+  },
   hero: {
     main: "#141414",
     button: "#333333",
