From 6430217fcca6260e019507a31edd6c052ad342b9 Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Fri, 4 Feb 2022 18:26:09 +0000 Subject: [PATCH 1/7] Add terminal output component --- site/components/TerminalOutput/index.tsx | 38 ++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 site/components/TerminalOutput/index.tsx diff --git a/site/components/TerminalOutput/index.tsx b/site/components/TerminalOutput/index.tsx new file mode 100644 index 0000000000000..708cc81299f6c --- /dev/null +++ b/site/components/TerminalOutput/index.tsx @@ -0,0 +1,38 @@ +import { makeStyles } from "@material-ui/core/styles" +import React from "react" + +interface Props { + output: string[] +} + +export const TerminalOutput: React.FC = ({ className, output }) => { + const styles = useStyles() + + return ( +
+ {output.map((line, idx) => ( +
+ {line} +
+ ))} +
+ ) +} +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", + }, +})) From 843da47e606087adce02523aad88cf43e654d5fc Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Fri, 4 Feb 2022 19:00:36 +0000 Subject: [PATCH 2/7] Add codeBlock palette color --- site/theme/palettes.ts | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/site/theme/palettes.ts b/site/theme/palettes.ts index 93f1418f887b1..82132d93f5b6b 100644 --- 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", From eb9aee36301fe028df04de9f5edc68c8975df2b8 Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Fri, 4 Feb 2022 19:01:28 +0000 Subject: [PATCH 3/7] Add CodeBlock, use theme colors --- site/components/{TerminalOutput => CodeBlock}/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) rename site/components/{TerminalOutput => CodeBlock}/index.tsx (81%) diff --git a/site/components/TerminalOutput/index.tsx b/site/components/CodeBlock/index.tsx similarity index 81% rename from site/components/TerminalOutput/index.tsx rename to site/components/CodeBlock/index.tsx index 708cc81299f6c..e749fafeda12f 100644 --- a/site/components/TerminalOutput/index.tsx +++ b/site/components/CodeBlock/index.tsx @@ -2,15 +2,15 @@ import { makeStyles } from "@material-ui/core/styles" import React from "react" interface Props { - output: string[] + lines: string[] } -export const TerminalOutput: React.FC = ({ className, output }) => { +export const CodeBlock: React.FC = ({ lines }) => { const styles = useStyles() return (
- {output.map((line, idx) => ( + {lines.map((line, idx) => (
{line}
@@ -25,7 +25,7 @@ const useStyles = makeStyles((theme) => ({ root: { minHeight: 156, background: theme.palette.background.default, - //color: theme.palette.codeBlock.contrastText, + color: theme.palette.codeBlock.contrastText, fontFamily: MONOSPACE_FONT_FAMILY, fontSize: 13, wordBreak: "break-all", From 79ae3486af2d367901a27003216ec0f2c7dfb260 Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Fri, 4 Feb 2022 19:22:36 +0000 Subject: [PATCH 4/7] Add storybook --- site/components/CodeBlock/index.stories.tsx | 24 +++++++++++++++++++++ site/components/CodeBlock/index.tsx | 4 ++-- 2 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 site/components/CodeBlock/index.stories.tsx diff --git a/site/components/CodeBlock/index.stories.tsx b/site/components/CodeBlock/index.stories.tsx new file mode 100644 index 0000000000000..2878d5dbff891 --- /dev/null +++ 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 gke-master-workspaces-1-ef039342-cybd +Container image "gcr.io/coder-dogfood/master/coder-dev-ubuntu@sha256:80604e432c039daf558edfd7c01b9ea1f62f9c4b0f30aeab954efe11c404f8ee" already present on machine +Created container user +Started container user +Using user 'coder' with shell '/bin/bash'`.split('\n') + +export default { + title: "CodeBlock", + component: CodeBlockProps, + argTypes: { + lines: { control: "object", defaultValue: sampleLines }, + }, +} + +const Template: Story = (args) => + +export const Example = Template.bind({}) +Example.args = { + lines: sampleLines, +} diff --git a/site/components/CodeBlock/index.tsx b/site/components/CodeBlock/index.tsx index e749fafeda12f..ecb564ba38141 100644 --- a/site/components/CodeBlock/index.tsx +++ b/site/components/CodeBlock/index.tsx @@ -1,11 +1,11 @@ import { makeStyles } from "@material-ui/core/styles" import React from "react" -interface Props { +interface CodeBlockProps { lines: string[] } -export const CodeBlock: React.FC = ({ lines }) => { +export const CodeBlock: React.FC = ({ lines }) => { const styles = useStyles() return ( From 67aad7e60b0cc1545ba13982486302989750a089 Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Sat, 5 Feb 2022 18:27:23 +0000 Subject: [PATCH 5/7] Tweak output --- site/components/CodeBlock/index.stories.tsx | 8 ++++---- site/components/CodeBlock/index.test.tsx | 16 ++++++++++++++++ 2 files changed, 20 insertions(+), 4 deletions(-) create mode 100644 site/components/CodeBlock/index.test.tsx diff --git a/site/components/CodeBlock/index.stories.tsx b/site/components/CodeBlock/index.stories.tsx index 2878d5dbff891..620fc87650364 100644 --- a/site/components/CodeBlock/index.stories.tsx +++ b/site/components/CodeBlock/index.stories.tsx @@ -2,11 +2,11 @@ import { Story } from "@storybook/react" import React from "react" import { CodeBlock, CodeBlockProps } from "./index" -const sampleLines = `Successfully assigned coder/image-jcws7 to gke-master-workspaces-1-ef039342-cybd -Container image "gcr.io/coder-dogfood/master/coder-dev-ubuntu@sha256:80604e432c039daf558edfd7c01b9ea1f62f9c4b0f30aeab954efe11c404f8ee" already present on machine +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') +Using user 'coder' with shell '/bin/bash'`.split("\n") export default { title: "CodeBlock", @@ -16,7 +16,7 @@ export default { }, } -const Template: Story = (args) => +const Template: Story = (args: CodeBlockProps) => export const Example = Template.bind({}) Example.args = { diff --git a/site/components/CodeBlock/index.test.tsx b/site/components/CodeBlock/index.test.tsx new file mode 100644 index 0000000000000..05316e5443553 --- /dev/null +++ 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() + + // Then + // Both lines should be rendered + await screen.findByText("line1") + await screen.findByText("line2") + }) +}) From 0940920657de2a2df8d659d222dda0e6f48ee14c Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Sat, 5 Feb 2022 18:52:27 +0000 Subject: [PATCH 6/7] Fix missed export --- site/components/CodeBlock/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/components/CodeBlock/index.tsx b/site/components/CodeBlock/index.tsx index ecb564ba38141..6b8b1afd336a1 100644 --- a/site/components/CodeBlock/index.tsx +++ b/site/components/CodeBlock/index.tsx @@ -1,7 +1,7 @@ import { makeStyles } from "@material-ui/core/styles" import React from "react" -interface CodeBlockProps { +export interface CodeBlockProps { lines: string[] } From 23ac3758b45b0b878b47fbe9999b7d464f532b3d Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Sat, 5 Feb 2022 18:59:52 +0000 Subject: [PATCH 7/7] Fix accidental rename --- site/components/CodeBlock/index.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/components/CodeBlock/index.stories.tsx b/site/components/CodeBlock/index.stories.tsx index 620fc87650364..b31d450e21246 100644 --- a/site/components/CodeBlock/index.stories.tsx +++ b/site/components/CodeBlock/index.stories.tsx @@ -10,7 +10,7 @@ Using user 'coder' with shell '/bin/bash'`.split("\n") export default { title: "CodeBlock", - component: CodeBlockProps, + component: CodeBlock, argTypes: { lines: { control: "object", defaultValue: sampleLines }, },