質問編集履歴

4

編集

2021/04/07 09:23

投稿

kakedashidesu
kakedashidesu

スコア50

test CHANGED
File without changes
test CHANGED
@@ -14,9 +14,9 @@
14
14
 
15
15
  ```
16
16
 
17
- Type '(args: AtomIconButtonProps) => JSX.Element' is not assignable to type 'Story<Args>'.
17
+ Type '(args: IconButtonProps) => JSX.Element' is not assignable to type 'Story<Args>'.
18
-
18
+
19
- Type '(args: AtomIconButtonProps) => JSX.Element' is not assignable to type 'BaseStory<Args, StoryFnReactReturnType>'.
19
+ Type '(args: IconButtonProps) => JSX.Element' is not assignable to type 'BaseStory<Args, StoryFnReactReturnType>'.
20
20
 
21
21
  Types of parameters 'args' and 'args' are incompatible.
22
22
 

3

編集

2021/04/07 09:23

投稿

kakedashidesu
kakedashidesu

スコア50

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  Types of parameters 'args' and 'args' are incompatible.
22
22
 
23
- Type 'Args' is not assignable to type 'AtomIconButtonProps'.
23
+ Type 'Args' is not assignable to type 'IconButtonProps'.
24
24
 
25
25
  Property 'icon' is missing in type 'Args' but required in type '{ icon: IconTypes; }'.ts(2322)
26
26
 

2

編集

2021/04/07 09:23

投稿

kakedashidesu
kakedashidesu

スコア50

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- const Template: Story = (args: AtomIconButtonProps) => <IconButton {...args} />;のTemplateで下記のエラーが発生します。
1
+ const Template: Story = (args: IconButtonProps) => <IconButton {...args} />;のTemplateで下記のエラーが発生します。
2
2
 
3
3
  iconのエラーだと思うのですがどこがおかしいのかがわかりません。
4
4
 

1

編集

2021/04/07 09:23

投稿

kakedashidesu
kakedashidesu

スコア50

test CHANGED
File without changes
test CHANGED
@@ -42,118 +42,118 @@
42
42
 
43
43
  ```
44
44
 
45
+ import React, {FC} from 'react';
46
+
47
+ import { IconButton as ChakraButton, ButtonProps } from '@chakra-ui/react';
48
+
49
+ import { IconTypes } from '.././Icon/iconOption';
50
+
51
+ import { TwitterIcon } from '../Icon/TwitterIcon';
52
+
53
+ import { LinkedInIcon } from '../Icon/LinkedInIcon';
54
+
55
+ import { FacebookIcon } from '../Icon/FacebookIcon';
56
+
57
+
58
+
59
+ export type IconButtonProps = ButtonProps & {
60
+
61
+ icon: IconTypes;
62
+
63
+ };
64
+
65
+
66
+
67
+ type IconObject = {
68
+
69
+ components: JSX.Element;
70
+
71
+ label: string;
72
+
73
+ };
74
+
75
+
76
+
77
+ ChakraButton.defaultProps = {
78
+
79
+ size: 'md',
80
+
81
+ };
82
+
83
+
84
+
85
+ export const IconButton: FC<IconButtonProps> = ({
86
+
87
+ icon,
88
+
89
+ children,
90
+
91
+ ...props
92
+
93
+ }) => {
94
+
95
+ const Icon: Record<IconTypes, IconObject> = {
96
+
97
+ twitter: {
98
+
99
+ components: <TwitterIcon />,
100
+
101
+ label: 'twitter',
102
+
103
+ },
104
+
105
+ linkedIn: {
106
+
107
+ components: <LinkedInIcon />,
108
+
109
+ label: 'linkedIn',
110
+
111
+ },
112
+
113
+ facebook: {
114
+
115
+ components: <FacebookIcon />,
116
+
117
+ label: 'facebook',
118
+
119
+ },
120
+
121
+ };
122
+
123
+ return (
124
+
125
+ <ChakraButton
126
+
127
+ icon={Icon[icon].components}
128
+
129
+ aria-label={Icon[icon].label}
130
+
131
+ {...props}
132
+
133
+ >
134
+
135
+ {children}
136
+
137
+ </ChakraButton>
138
+
139
+ );
140
+
141
+ };
142
+
143
+
144
+
145
+ ```
146
+
147
+
148
+
149
+
150
+
151
+ ```
152
+
153
+ // IconButon.stories.tsx
154
+
45
155
  import React from 'react';
46
156
 
47
- import { IconButton as ChakraButton, ButtonProps } from '@chakra-ui/react';
48
-
49
- import { IconTypes } from '.././Icon/iconOption';
50
-
51
- import { TwitterIcon } from '../Icon/TwitterIcon';
52
-
53
- import { LinkedInIcon } from '../Icon/LinkedInIcon';
54
-
55
- import { FacebookIcon } from '../Icon/FacebookIcon';
56
-
57
-
58
-
59
- export type IconButtonProps = ButtonProps & {
60
-
61
- icon: IconTypes;
62
-
63
- };
64
-
65
-
66
-
67
- type IconObject = {
68
-
69
- components: JSX.Element;
70
-
71
- label: string;
72
-
73
- };
74
-
75
-
76
-
77
- ChakraButton.defaultProps = {
78
-
79
- size: 'md',
80
-
81
- };
82
-
83
-
84
-
85
- export const IconButton: React.FunctionComponent<IconButtonProps> = ({
86
-
87
- icon,
88
-
89
- children,
90
-
91
- ...props
92
-
93
- }) => {
94
-
95
- const Icon: Record<IconTypes, IconObject> = {
96
-
97
- twitter: {
98
-
99
- components: <TwitterIcon />,
100
-
101
- label: 'twitter',
102
-
103
- },
104
-
105
- linkedIn: {
106
-
107
- components: <LinkedInIcon />,
108
-
109
- label: 'linkedIn',
110
-
111
- },
112
-
113
- facebook: {
114
-
115
- components: <FacebookIcon />,
116
-
117
- label: 'facebook',
118
-
119
- },
120
-
121
- };
122
-
123
- return (
124
-
125
- <ChakraButton
126
-
127
- icon={Icon[icon].components}
128
-
129
- aria-label={Icon[icon].label}
130
-
131
- {...props}
132
-
133
- >
134
-
135
- {children}
136
-
137
- </ChakraButton>
138
-
139
- );
140
-
141
- };
142
-
143
-
144
-
145
- ```
146
-
147
-
148
-
149
-
150
-
151
- ```
152
-
153
- // IconButon.stories.tsx
154
-
155
- import React from 'react';
156
-
157
157
  import { Story } from '@storybook/react/types-6-0';
158
158
 
159
159
  import { IconButton, IconButtonProps } from './IconButton';