Skip to content

Commit 9c7746f

Browse files
kylecarbskylecarbs
authored
Merge branch 'main' into createproject
2 parents a8d00d8 + df13fef commit 9c7746f

File tree

17 files changed

+216
-32
lines changed

17 files changed

+216
-32
lines changed

‎Makefile

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
INSTALL_DIR=$(shell go env GOPATH)/bin
2+
13
bin/coder:
24
mkdir -p bin
35
go build -o bin/coder cmd/coder/main.go
@@ -51,6 +53,12 @@ fmt: fmt/prettier fmt/sql
5153
gen: database/generate peerbroker/proto provisionersdk/proto provisionerd/proto
5254
.PHONY: gen
5355

56+
install:
57+
@echo "--- Copying from bin to $(INSTALL_DIR)"
58+
cp -r ./bin $(INSTALL_DIR)
59+
@echo "-- CLI available at $(shell ls $(INSTALL_DIR)/coder*)"
60+
.PHONY: install
61+
5462
peerbroker/proto: peerbroker/proto/peerbroker.proto
5563
protoc \
5664
--go_out=. \

‎README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,13 @@ This repository contains source code for Coder V2. Additional documentation:
1515

1616
## Development
1717

18+
### Pre-requisites
19+
20+
- `git`
21+
- `go` version 1.17, with the `GOPATH` environment variable set
22+
- `node`
23+
- `yarn`
24+
1825
### Cloning
1926

2027
- `git clone https://github.com/coder/coder`
@@ -23,6 +30,9 @@ This repository contains source code for Coder V2. Additional documentation:
2330
### Building
2431

2532
- `make build`
33+
- `make install`
34+
35+
The `coder` CLI binary will now be available at `$GOPATH/bin/coder`
2636

2737
### Development
2838

‎site/.eslintrc.yaml

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,6 @@ rules:
9292
message:
9393
"Use path imports to avoid pulling in unused modules. See:
9494
https://material-ui.com/guides/minimizing-bundle-size/"
95-
- name: "@material-ui/core/Tooltip"
96-
message: "Use the custom Tooltip on componens/Tooltip"
9795
no-storage/no-browser-storage: error
9896
no-unused-vars: "off"
9997
"object-curly-spacing": "off"

‎site/components/Button/CopyButton.tsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { makeStyles } from "@material-ui/core/styles"
2+
import Button from "@material-ui/core/Button"
3+
import Tooltip from "@material-ui/core/Tooltip"
4+
import Check from "@material-ui/icons/Check"
5+
import React, { useState } from "react"
6+
import { FileCopy } from "../Icons"
7+
8+
interface CopyButtonProps {
9+
text: string
10+
className?: string
11+
}
12+
13+
/**
14+
* Copy button used inside the CodeBlock component internally
15+
*/
16+
export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text }) => {
17+
const styles = useStyles()
18+
const [isCopied, setIsCopied] = useState<boolean>(false)
19+
20+
const copyToClipboard = async (): Promise<void> => {
21+
try {
22+
await window.navigator.clipboard.writeText(text)
23+
setIsCopied(true)
24+
25+
window.setTimeout(() => {
26+
setIsCopied(false)
27+
}, 1000)
28+
} catch (err) {
29+
const wrappedErr = new Error("copyToClipboard: failed to copy text to clipboard")
30+
if (err instanceof Error) {
31+
wrappedErr.stack = err.stack
32+
}
33+
console.error(wrappedErr)
34+
}
35+
}
36+
37+
return (
38+
<Tooltip title="Copy to Clipboard" placement="top">
39+
<div className={`${styles.copyButtonWrapper} ${className}`}>
40+
<Button className={styles.copyButton} onClick={copyToClipboard} size="small">
41+
{isCopied ? <Check className={styles.fileCopyIcon} /> : <FileCopy className={styles.fileCopyIcon} />}
42+
</Button>
43+
</div>
44+
</Tooltip>
45+
)
46+
}
47+
48+
const useStyles = makeStyles((theme) => ({
49+
copyButtonWrapper: {
50+
display: "flex",
51+
marginLeft: theme.spacing(1),
52+
},
53+
copyButton: {
54+
borderRadius: 7,
55+
background: theme.palette.codeBlock.button.main,
56+
color: theme.palette.codeBlock.button.contrastText,
57+
padding: theme.spacing(0.85),
58+
minWidth: 32,
59+
60+
"&:hover": {
61+
background: theme.palette.codeBlock.button.hover,
62+
},
63+
},
64+
fileCopyIcon: {
65+
width: 20,
66+
height: 20,
67+
},
68+
}))

‎site/components/Button/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from "./SplitButton"
22
export * from "./LoadingButton"
3+
export * from "./CopyButton"

‎site/components/CodeBlock/index.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default {
1212
title: "CodeBlock",
1313
component: CodeBlock,
1414
argTypes: {
15-
lines: { control: "object", defaultValue: sampleLines },
15+
lines: { control: "text", defaultValue: sampleLines },
1616
},
1717
}
1818

‎site/components/CodeBlock/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import React from "react"
3+
import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
34

45
export interface CodeBlockProps {
56
lines: string[]
@@ -18,8 +19,6 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ lines }) => {
1819
</div>
1920
)
2021
}
21-
const MONOSPACE_FONT_FAMILY =
22-
"'Fira Code', 'Lucida Console', 'Lucida Sans Typewriter', 'Liberation Mono', 'Monaco', 'Courier New', Courier, monospace"
2322

2423
const useStyles = makeStyles((theme) => ({
2524
root: {

‎site/components/CodeExample/CodeExample.stories.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Story } from "@storybook/react"
2+
import React from "react"
3+
import { CodeExample, CodeExampleProps } from "./CodeExample"
4+
5+
const sampleCode = `echo "Hello, world"`
6+
7+
export default {
8+
title: "CodeExample",
9+
component: CodeExample,
10+
argTypes: {
11+
code: { control: "string", defaultValue: sampleCode },
12+
},
13+
}
14+
15+
const Template: Story<CodeExampleProps> = (args: CodeExampleProps) => <CodeExample {...args} />
16+
17+
export const Example = Template.bind({})
18+
Example.args = {
19+
code: sampleCode,
20+
}

‎site/components/CodeExample/CodeExample.test.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { screen } from "@testing-library/react"
2+
import { render } from "../../test_helpers"
3+
import React from "react"
4+
import { CodeExample } from "./CodeExample"
5+
6+
describe("CodeExample", () => {
7+
it("renders code", async () => {
8+
// When
9+
render(<CodeExample code="echo hello" />)
10+
11+
// Then
12+
// Both lines should be rendered
13+
await screen.findByText("echo hello")
14+
})
15+
})

‎site/components/CodeExample/CodeExample.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { makeStyles } from "@material-ui/core/styles"
2+
import React from "react"
3+
import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
4+
5+
import { CopyButton } from "../Button"
6+
7+
export interface CodeExampleProps {
8+
code: string
9+
}
10+
11+
/**
12+
* Component to show single-line code examples, with a copy button
13+
*/
14+
export const CodeExample: React.FC<CodeExampleProps> = ({ code }) => {
15+
const styles = useStyles()
16+
17+
return (
18+
<div className={styles.root}>
19+
<code>{code}</code>
20+
<CopyButton text={code} />
21+
</div>
22+
)
23+
}
24+
25+
const useStyles = makeStyles((theme) => ({
26+
root: {
27+
display: "flex",
28+
flexDirection: "row",
29+
justifyContent: "space-between",
30+
alignItems: "center",
31+
background: theme.palette.background.default,
32+
color: theme.palette.codeBlock.contrastText,
33+
fontFamily: MONOSPACE_FONT_FAMILY,
34+
fontSize: 13,
35+
padding: theme.spacing(2),
36+
borderRadius: theme.shape.borderRadius,
37+
},
38+
}))

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy