1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
import CommentComponent from './comment';
const saveComment = async () => {
/** Do nothing. */
};
/**
* Comment - Storybook Meta
*/
export default {
title: 'Organisms/Layout',
component: CommentComponent,
args: {
canReply: true,
saveComment,
},
argTypes: {
author: {
description: 'The author data.',
type: {
name: 'object',
required: true,
value: {},
},
},
canReply: {
control: {
type: 'boolean',
},
description: 'Enable or disable the reply button.',
table: {
category: 'Options',
defaultValue: { summary: true },
},
type: {
name: 'boolean',
required: false,
},
},
content: {
control: {
type: 'text',
},
description: 'The comment body.',
type: {
name: 'string',
required: true,
},
},
id: {
control: {
type: 'number',
},
description: 'The comment id.',
type: {
name: 'number',
required: true,
},
},
Notice: {
control: {
type: null,
},
description: 'A component to display a success or error message.',
table: {
category: 'Options',
},
type: {
name: 'function',
required: false,
},
},
parentId: {
control: {
type: null,
},
description: 'The parent id if it is a reply.',
type: {
name: 'number',
required: false,
},
},
publication: {
description: 'The publication date.',
type: {
name: 'object',
required: true,
value: {},
},
},
saveComment: {
control: {
type: null,
},
description: 'A callback function to save the comment form data.',
table: {
category: 'Events',
},
type: {
name: 'function',
required: true,
},
},
},
} as ComponentMeta<typeof CommentComponent>;
const Template: ComponentStory<typeof CommentComponent> = (args) => (
<CommentComponent {...args} />
);
/**
* Layout Stories - Comment
*/
export const Comment = Template.bind({});
Comment.args = {
author: {
avatar: 'http://placeimg.com/640/480',
name: 'Armand',
url: 'https://www.armandphilippot.com/',
},
content:
'Harum aut cumque iure fugit neque sequi cupiditate repudiandae laudantium. Ratione aut assumenda qui illum voluptas accusamus quis officiis exercitationem. Consectetur est harum eius perspiciatis officiis nihil. Aut corporis minima debitis adipisci possimus debitis et.',
id: 2,
publication: '2021-04-03 23:04:24',
};
|
