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

Commitdf13fef

Browse files
authored
fix: Remove 'Create Project' button, replace with CLI prompt (#245)
For black-triangle and alpha builds, we won't be able to create projects in the UI, because they require collecting and tar'ing a set of assets associated with the project - so the CLI is going to be our entry point for creating projects.This shifts the UI to remove the 'Create Project' button, and adds a prompt to copy a command to run.__Before:__<img width="1134" alt="image" src="https://user-images.githubusercontent.com/88213859/153534269-58dc95bd-0417-4bed-8e62-e2b6f479da61.png">__After:__![2022-02-10 19 38 01](https://user-images.githubusercontent.com/88213859/153534227-d22bd786-8c43-4858-bda6-3d9d1d614711.gif)
1 parentc0d547b commitdf13fef

File tree

13 files changed

+193
-27
lines changed

13 files changed

+193
-27
lines changed

‎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"
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+
importButtonfrom"@material-ui/core/Button"
3+
importTooltipfrom"@material-ui/core/Tooltip"
4+
importCheckfrom"@material-ui/icons/Check"
5+
importReact,{useState}from"react"
6+
import{FileCopy}from"../Icons"
7+
8+
interfaceCopyButtonProps{
9+
text:string
10+
className?:string
11+
}
12+
13+
/**
14+
* Copy button used inside the CodeBlock component internally
15+
*/
16+
exportconstCopyButton:React.FC<CopyButtonProps>=({ className="", text})=>{
17+
conststyles=useStyles()
18+
const[isCopied,setIsCopied]=useState<boolean>(false)
19+
20+
constcopyToClipboard=async():Promise<void>=>{
21+
try{
22+
awaitwindow.navigator.clipboard.writeText(text)
23+
setIsCopied(true)
24+
25+
window.setTimeout(()=>{
26+
setIsCopied(false)
27+
},1000)
28+
}catch(err){
29+
constwrappedErr=newError("copyToClipboard: failed to copy text to clipboard")
30+
if(errinstanceofError){
31+
wrappedErr.stack=err.stack
32+
}
33+
console.error(wrappedErr)
34+
}
35+
}
36+
37+
return(
38+
<Tooltiptitle="Copy to Clipboard"placement="top">
39+
<divclassName={`${styles.copyButtonWrapper}${className}`}>
40+
<ButtonclassName={styles.copyButton}onClick={copyToClipboard}size="small">
41+
{isCopied ?<CheckclassName={styles.fileCopyIcon}/> :<FileCopyclassName={styles.fileCopyIcon}/>}
42+
</Button>
43+
</div>
44+
</Tooltip>
45+
)
46+
}
47+
48+
constuseStyles=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
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"./CodeExample"
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"./CodeExample"
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: 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+
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+
/**
12+
* Component to show single-line code examples, with a copy button
13+
*/
14+
exportconstCodeExample:React.FC<CodeExampleProps>=({ code})=>{
15+
conststyles=useStyles()
16+
17+
return(
18+
<divclassName={styles.root}>
19+
<code>{code}</code>
20+
<CopyButtontext={code}/>
21+
</div>
22+
)
23+
}
24+
25+
constuseStyles=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+
}))
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export*from"./CodeExample"

‎site/components/Icons/FileCopy.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
importSvgIconfrom"@material-ui/core/SvgIcon"
2+
importReactfrom"react"
3+
4+
exportconstFileCopy:typeofSvgIcon=(props)=>(
5+
<SvgIcon{...props}viewBox="0 0 20 20">
6+
<path
7+
d="M12.7412 2.2807H4.32014C3.5447 2.2807 2.91663 2.90877 2.91663 3.68421V13.5088H4.32014V3.68421H12.7412V2.2807ZM14.8465 5.08772H7.12716C6.35172 5.08772 5.72365 5.71579 5.72365 6.49123V16.3158C5.72365 17.0912 6.35172 17.7193 7.12716 17.7193H14.8465C15.6219 17.7193 16.25 17.0912 16.25 16.3158V6.49123C16.25 5.71579 15.6219 5.08772 14.8465 5.08772ZM14.8465 16.3158H7.12716V6.49123H14.8465V16.3158Z"
8+
fill="currentColor"
9+
/>
10+
</SvgIcon>
11+
)

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp