Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 9b84598

Browse files
bryphe-coderbryphe-coder
committed
Add CodeExample component
1 parent 501327a commit 9b84598

File tree

8 files changed

+97
-11
lines changed

8 files changed

+97
-11
lines changed

‎site/components/Button/CopyButton.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,24 @@ import { FileCopy } from "../Icons"
77
interface CopyButtonProps {
88
text: string
99
className?: string
10-
onFailure: () => void
11-
onSuccess: () => void
1210
}
1311

1412
/**
1513
* Copy button used inside the CodeBlock component internally
1614
*/
17-
export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text, onSuccess, onFailure }) => {
15+
export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text }) => {
1816
const styles = useStyles()
1917

2018

2119
const copyToClipboard = async (): Promise<void> => {
2220
try {
2321
await window.navigator.clipboard.writeText(text)
24-
onSuccess()
2522
} catch (err) {
2623
const wrappedErr = new Error("copyToClipboard: failed to copy text to clipboard")
2724
if (err instanceof Error) {
2825
wrappedErr.stack = err.stack
2926
}
3027
console.error(wrappedErr)
31-
32-
onFailure()
3328
}
3429
}
3530

‎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/index.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 "./index"
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/index.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 "./index"
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/index.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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+
export const CodeExample: React.FC<CodeExampleProps> = ({ code }) => {
12+
const styles = useStyles()
13+
14+
return (
15+
<div className={styles.root}>
16+
<code>{code}</code>
17+
<CopyButton text={code} />
18+
</div>
19+
)
20+
}
21+
22+
const useStyles = makeStyles((theme) => ({
23+
root: {
24+
display: "flex",
25+
flexDirection: "row",
26+
justifyContent: "flex-start",
27+
background: theme.palette.background.default,
28+
color: theme.palette.codeBlock.contrastText,
29+
fontFamily: MONOSPACE_FONT_FAMILY,
30+
fontSize: 13,
31+
padding: theme.spacing(2),
32+
borderRadius: theme.shape.borderRadius,
33+
},
34+
}))

‎site/pages/projects/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
1414

1515
import { Organization, Project } from "./../../api"
1616
import useSWR from "swr"
17-
import { CodeBlock } from "../../components/CodeBlock"
17+
import { CodeExample } from "../../components/CodeExample"
1818

1919
const ProjectsPage: React.FC = () => {
2020
const styles = useStyles()
@@ -60,7 +60,7 @@ const ProjectsPage: React.FC = () => {
6060

6161
const description = <div>
6262
<div>Run the following command to get started:</div>
63-
<CodeBlock lines={["coder project create"]} />
63+
<CodeExample code="coder project create" />
6464
</div>
6565

6666
const emptyState = <EmptyState

‎site/theme/palettes.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,14 @@ declare module "@material-ui/core/styles/createPalette" {
99
contrastText: string
1010
// Background color for codeblocks
1111
main: string
12+
button: {
13+
// Background for buttons inside a codeblock
14+
main: string
15+
// Hover background color for buttons inside a codeblock
16+
hover: string
17+
// Text color for buttons inside a codeblock
18+
contrastText: string
19+
}
1220
}
1321
navbar: {
1422
main: string
@@ -26,6 +34,11 @@ declare module "@material-ui/core/styles/createPalette" {
2634
codeBlock: {
2735
contrastText: string
2836
main: string
37+
button: {
38+
main: string
39+
hover: string
40+
contrastText: string
41+
}
2942
}
3043
navbar: {
3144
main: string
@@ -71,6 +84,11 @@ export const lightPalette: CustomPalette = {
7184
codeBlock: {
7285
main: "#F3F3F3",
7386
contrastText: "rgba(0, 0, 0, 0.9)",
87+
button: {
88+
main: "#E6ECE6",
89+
hover: "#DAEBDA",
90+
contrastText: "#000",
91+
},
7492
},
7593
primary: {
7694
main: "#519A54",
@@ -135,6 +153,11 @@ export const darkPalette: CustomPalette = {
135153
codeBlock: {
136154
main: "rgb(24, 26, 27)",
137155
contrastText: "rgba(255, 255, 255, 0.8)",
156+
button: {
157+
main: "rgba(255, 255, 255, 0.1)",
158+
hover: "rgba(255, 255, 255, 0.25)",
159+
contrastText: "#FFF",
160+
},
138161
},
139162
hero: {
140163
main: "#141414",

0 commit comments

Comments
 (0)