Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit9b84598

Browse files
committed
Add CodeExample component
1 parent501327a commit9b84598

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
interfaceCopyButtonProps{
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-
exportconstCopyButton:React.FC<CopyButtonProps>=({ className="", text, onSuccess, onFailure})=>{
15+
exportconstCopyButton:React.FC<CopyButtonProps>=({ className="", text})=>{
1816
conststyles=useStyles()
1917

2018

2119
constcopyToClipboard=async():Promise<void>=>{
2220
try{
2321
awaitwindow.navigator.clipboard.writeText(text)
24-
onSuccess()
2522
}catch(err){
2623
constwrappedErr=newError("copyToClipboard: failed to copy text to clipboard")
2724
if(errinstanceofError){
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
importReactfrom"react"
3+
import{MONOSPACE_FONT_FAMILY}from"../../theme/constants"
34

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

2423
constuseStyles=makeStyles((theme)=>({
2524
root:{
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+
importReactfrom"react"
3+
import{CodeExample,CodeExampleProps}from"./index"
4+
5+
constsampleCode=`echo "Hello, world"`
6+
7+
exportdefault{
8+
title:"CodeExample",
9+
component:CodeExample,
10+
argTypes:{
11+
code:{control:"string",defaultValue:sampleCode},
12+
},
13+
}
14+
15+
constTemplate:Story<CodeExampleProps>=(args:CodeExampleProps)=><CodeExample{...args}/>
16+
17+
exportconstExample=Template.bind({})
18+
Example.args={
19+
code:sampleCode,
20+
}
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+
importReactfrom"react"
4+
import{CodeExample}from"./index"
5+
6+
describe("CodeExample",()=>{
7+
it("renders code",async()=>{
8+
// When
9+
render(<CodeExamplecode="echo hello"/>)
10+
11+
// Then
12+
// Both lines should be rendered
13+
awaitscreen.findByText("echo hello")
14+
})
15+
})
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+
importReactfrom"react"
3+
import{MONOSPACE_FONT_FAMILY}from"../../theme/constants"
4+
5+
import{CopyButton}from"./../Button"
6+
7+
exportinterfaceCodeExampleProps{
8+
code:string
9+
}
10+
11+
exportconstCodeExample:React.FC<CodeExampleProps>=({ code})=>{
12+
conststyles=useStyles()
13+
14+
return(
15+
<divclassName={styles.root}>
16+
<code>{code}</code>
17+
<CopyButtontext={code}/>
18+
</div>
19+
)
20+
}
21+
22+
constuseStyles=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
importuseSWRfrom"swr"
17-
import{CodeBlock}from"../../components/CodeBlock"
17+
import{CodeExample}from"../../components/CodeExample"
1818

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

6161
constdescription=<div>
6262
<div>Run the following command to get started:</div>
63-
<CodeBlocklines={["coder project create"]}/>
63+
<CodeExamplecode="coder project create"/>
6464
</div>
6565

6666
constemptyState=<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)
[8]ページ先頭
©2009-2025 Movatter.jp