Add storybook

bryphe-coder · bryphe-coder · commit 79ae3486af2d · 2022-02-04T19:22:36.000Z
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 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<CodeBlockProps> = (args) => <CodeBlock {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  lines: sampleLines,
+}
diff --git 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<Props> = ({ lines }) => {
+export const CodeBlock: React.FC<CodeBlockProps> = ({ lines }) => {
   const styles = useStyles()
 
   return (
