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

Commit97bd74b

Browse files
authored
chore: add additional stories to storybook (#11524)
add stories for ActiveUserChart, CopyableValue, and CopyButton
1 parent8a48485 commit97bd74b

File tree

5 files changed

+83
-16
lines changed

5 files changed

+83
-16
lines changed
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
importtype{Meta,StoryObj}from"@storybook/react";
2+
import{ActiveUserChart}from"./ActiveUserChart";
3+
4+
constmeta:Meta<typeofActiveUserChart>={
5+
title:"components/ActiveUserChart",
6+
component:ActiveUserChart,
7+
args:{
8+
data:[
9+
{date:"1/1/2024",amount:5},
10+
{date:"1/2/2024",amount:6},
11+
{date:"1/3/2024",amount:7},
12+
{date:"1/4/2024",amount:8},
13+
{date:"1/5/2024",amount:9},
14+
{date:"1/6/2024",amount:10},
15+
{date:"1/7/2024",amount:11},
16+
],
17+
interval:"day",
18+
},
19+
};
20+
21+
exportdefaultmeta;
22+
typeStory=StoryObj<typeofActiveUserChart>;
23+
24+
exportconstExample:Story={};
25+
26+
exportconstUserLimit:Story={
27+
args:{
28+
userLimit:10,
29+
},
30+
};
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
importtype{Meta,StoryObj}from"@storybook/react";
2+
import{CopyButton}from"./CopyButton";
3+
4+
constmeta:Meta<typeofCopyButton>={
5+
title:"components/CopyButton",
6+
component:CopyButton,
7+
args:{
8+
children:"Get secret",
9+
text:"cool secret",
10+
},
11+
};
12+
13+
exportdefaultmeta;
14+
typeStory=StoryObj<typeofCopyButton>;
15+
16+
constExample:Story={};
17+
18+
export{ExampleasCopyButton};

‎site/src/components/CopyButton/CopyButton.tsx

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,18 +36,7 @@ export const CopyButton: FC<CopyButtonProps> = ({
3636
<Tooltiptitle={tooltipTitle}placement="top">
3737
<divcss={[{display:"flex"},wrapperStyles]}>
3838
<IconButton
39-
css={[
40-
(theme)=>css`
41-
border-radius:8px;
42-
padding:8px;
43-
min-width:32px;
44-
45-
&:hover {
46-
background:${theme.palette.background.paper};
47-
}
48-
`,
49-
buttonStyles,
50-
]}
39+
css={[styles.button,buttonStyles]}
5140
onClick={copyToClipboard}
5241
size="small"
5342
aria-label={Language.ariaLabel}
@@ -66,6 +55,15 @@ export const CopyButton: FC<CopyButtonProps> = ({
6655
};
6756

6857
conststyles={
58+
button:(theme)=>css`
59+
border-radius:8px;
60+
padding:8px;
61+
min-width:32px;
62+
63+
&:hover {
64+
background:${theme.palette.background.paper};
65+
}
66+
`,
6967
copyIcon:css`
7068
width:20px;
7169
height:20px;
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
importtype{Meta,StoryObj}from"@storybook/react";
2+
import{CopyableValue}from"./CopyableValue";
3+
4+
constmeta:Meta<typeofCopyableValue>={
5+
title:"components/CopyableValue",
6+
component:CopyableValue,
7+
args:{
8+
children:<button>Get secret</button>,
9+
value:"cool secret",
10+
},
11+
};
12+
13+
exportdefaultmeta;
14+
typeStory=StoryObj<typeofCopyableValue>;
15+
16+
constExample:Story={};
17+
18+
export{ExampleasCopyableValue};

‎site/src/components/CopyableValue/CopyableValue.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
importTooltip,{typeTooltipProps}from"@mui/material/Tooltip";
2+
import{typeFC,typeHTMLAttributes}from"react";
23
import{useClickable}from"hooks/useClickable";
34
import{useClipboard}from"hooks/useClipboard";
4-
import{typeFC,typeHTMLProps}from"react";
55

6-
interfaceCopyableValuePropsextendsHTMLProps<HTMLDivElement>{
6+
interfaceCopyableValuePropsextendsHTMLAttributes<HTMLSpanElement>{
77
value:string;
88
placement?:TooltipProps["placement"];
99
PopperProps?:TooltipProps["PopperProps"];
@@ -13,7 +13,8 @@ export const CopyableValue: FC<CopyableValueProps> = ({
1313
value,
1414
placement="bottom-start",
1515
PopperProps,
16-
...props
16+
children,
17+
...attrs
1718
})=>{
1819
const{ isCopied, copy}=useClipboard(value);
1920
constclickableProps=useClickable<HTMLSpanElement>(copy);
@@ -24,7 +25,9 @@ export const CopyableValue: FC<CopyableValueProps> = ({
2425
placement={placement}
2526
PopperProps={PopperProps}
2627
>
27-
<span{...props}{...clickableProps}css={{cursor:"pointer"}}/>
28+
<span{...attrs}{...clickableProps}css={{cursor:"pointer"}}>
29+
{children}
30+
</span>
2831
</Tooltip>
2932
);
3033
};

0 commit comments

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