@rpg-engine/long-bow 0.1.91 → 0.1.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +20 -20
- package/README.md +181 -181
- package/dist/components/Item/Inventory/itemContainerHelper.d.ts +2 -2
- package/dist/long-bow.cjs.development.js +49 -2
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +49 -2
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +98 -98
- package/src/components/Abstractions/SlotsContainer.tsx +42 -42
- package/src/components/Button.tsx +30 -30
- package/src/components/Chat/Chat.tsx +193 -193
- package/src/components/CheckButton.tsx +65 -65
- package/src/components/DraggableContainer.tsx +150 -150
- package/src/components/Dropdown.tsx +57 -57
- package/src/components/Equipment/EquipmentSet.tsx +134 -134
- package/src/components/Input.tsx +11 -11
- package/src/components/Item/Cards/ItemTooltip.tsx +32 -32
- package/src/components/Item/Inventory/ItemContainer.tsx +65 -65
- package/src/components/Item/Inventory/ItemContainerTypes.ts +4 -4
- package/src/components/Item/Inventory/ItemSlot.tsx +199 -199
- package/src/components/Item/Inventory/itemContainerHelper.ts +94 -81
- package/src/components/ListMenu.tsx +65 -65
- package/src/components/Multitab/Tab.tsx +57 -57
- package/src/components/Multitab/TabBody.tsx +13 -13
- package/src/components/Multitab/TabsContainer.tsx +97 -97
- package/src/components/NPCDialog/NPCDialog.tsx +145 -145
- package/src/components/NPCDialog/NPCDialogText.tsx +53 -53
- package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +239 -239
- package/src/components/ProgressBar.tsx +91 -91
- package/src/components/PropertySelect/PropertySelect.tsx +101 -101
- package/src/components/PropertySelect/img/ui-arrows/arrow01-left-clicked.png +0 -0
- package/src/components/PropertySelect/img/ui-arrows/arrow01-left.png +0 -0
- package/src/components/PropertySelect/img/ui-arrows/arrow01-right-clicked.png +0 -0
- package/src/components/PropertySelect/img/ui-arrows/arrow01-right.png +0 -0
- package/src/components/PropertySelect/img/ui-arrows/arrow02-left-clicked.png +0 -0
- package/src/components/PropertySelect/img/ui-arrows/arrow02-left.png +0 -0
- package/src/components/PropertySelect/img/ui-arrows/arrow02-right-clicked.png +0 -0
- package/src/components/PropertySelect/img/ui-arrows/arrow02-right.png +0 -0
- package/src/components/QuestInfo/QuestInfo.tsx +143 -143
- package/src/components/RPGUIContainer.tsx +47 -47
- package/src/components/RPGUIRoot.tsx +14 -14
- package/src/components/RadioButton.tsx +53 -53
- package/src/components/RangeSlider.tsx +68 -68
- package/src/components/RelativeListMenu.tsx +83 -83
- package/src/components/ScrollList.tsx +77 -77
- package/src/components/SimpleProgressBar.tsx +62 -62
- package/src/components/SkillProgressBar.tsx +123 -123
- package/src/components/SkillsContainer.tsx +196 -196
- package/src/components/TextArea.tsx +11 -11
- package/src/components/Truncate.tsx +25 -25
- package/src/components/shared/Column.tsx +16 -16
- package/src/components/shared/SpriteFromAtlas.tsx +99 -99
- package/src/components/typography/DynamicText.tsx +49 -49
- package/src/constants/uiColors.ts +10 -10
- package/src/hooks/useEventListener.ts +21 -21
- package/src/hooks/useOutsideAlerter.ts +25 -25
- package/src/index.tsx +25 -25
- package/src/libs/StringHelpers.ts +3 -3
- package/src/mocks/atlas/icons/icons.json +735 -735
- package/src/mocks/atlas/items/items.json +5215 -5215
- package/src/mocks/equipmentSet.mocks.ts +347 -347
- package/src/mocks/itemContainer.mocks.ts +249 -249
- package/src/mocks/skills.mocks.ts +122 -122
- package/src/stories/Button.stories.tsx +36 -36
- package/src/stories/Chat.stories.tsx +170 -170
- package/src/stories/CheckButton.stories.tsx +48 -48
- package/src/stories/DraggableContainer.stories.tsx +28 -28
- package/src/stories/Dropdown.stories.tsx +46 -46
- package/src/stories/EquipmentSet.stories.tsx +50 -50
- package/src/stories/ItemContainer.stories.tsx +50 -50
- package/src/stories/ListMenu.stories.tsx +56 -56
- package/src/stories/Multitab.stories.tsx +51 -51
- package/src/stories/NPCDialog.stories.tsx +130 -130
- package/src/stories/ProgressBar.stories.tsx +23 -23
- package/src/stories/PropertySelect.stories.tsx +41 -41
- package/src/stories/QuestInfo.stories.tsx +76 -76
- package/src/stories/RPGUIContainers.stories.tsx +42 -42
- package/src/stories/RadioButton.stories.tsx +49 -49
- package/src/stories/RangeSlider.stories.tsx +60 -60
- package/src/stories/ScrollList.stories.tsx +85 -85
- package/src/stories/SimpleProgressBar.stories.tsx +22 -22
- package/src/stories/SkillProgressBar.stories.tsx +30 -30
- package/src/stories/SkillsContainer.stories.tsx +31 -31
- package/src/stories/Text.stories.tsx +42 -42
- package/src/types/eventTypes.ts +4 -4
- package/src/types/index.d.ts +2 -2
|
@@ -1,130 +1,130 @@
|
|
|
1
|
-
import { Meta, Story } from '@storybook/react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import {
|
|
4
|
-
INPCDialogProps,
|
|
5
|
-
NPCDialog,
|
|
6
|
-
NPCDialogType,
|
|
7
|
-
} from '../../src/components/NPCDialog/NPCDialog';
|
|
8
|
-
import {
|
|
9
|
-
IQuestionDialog,
|
|
10
|
-
IQuestionDialogAnswer,
|
|
11
|
-
} from '../../src/components/NPCDialog/QuestionDialog/QuestionDialog';
|
|
12
|
-
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
13
|
-
|
|
14
|
-
const meta: Meta = {
|
|
15
|
-
title: 'NPC Dialog',
|
|
16
|
-
component: NPCDialog,
|
|
17
|
-
argTypes: {
|
|
18
|
-
text: {
|
|
19
|
-
control: {
|
|
20
|
-
type: 'text',
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
|
|
24
|
-
type: {
|
|
25
|
-
control: {
|
|
26
|
-
type: 'select',
|
|
27
|
-
labels: {
|
|
28
|
-
[NPCDialogType.TextOnly]: 'Text Only',
|
|
29
|
-
[NPCDialogType.TextAndThumbnail]: 'Text and Thumbnail',
|
|
30
|
-
},
|
|
31
|
-
},
|
|
32
|
-
},
|
|
33
|
-
},
|
|
34
|
-
parameters: {
|
|
35
|
-
controls: { expanded: true },
|
|
36
|
-
},
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
export default meta;
|
|
40
|
-
|
|
41
|
-
const Template: Story<INPCDialogProps> = args => (
|
|
42
|
-
<RPGUIRoot>
|
|
43
|
-
<NPCDialog {...args} />
|
|
44
|
-
</RPGUIRoot>
|
|
45
|
-
);
|
|
46
|
-
|
|
47
|
-
// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
|
|
48
|
-
// https://storybook.js.org/docs/react/workflows/unit-testing
|
|
49
|
-
export const TextAndThumbnail = Template.bind({});
|
|
50
|
-
|
|
51
|
-
TextAndThumbnail.args = {
|
|
52
|
-
text: `This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player.`,
|
|
53
|
-
type: NPCDialogType.TextAndThumbnail,
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
export const TextOnly = Template.bind({});
|
|
57
|
-
|
|
58
|
-
TextOnly.args = {
|
|
59
|
-
text: `This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player.`,
|
|
60
|
-
type: NPCDialogType.TextOnly,
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
export const Question = Template.bind({});
|
|
64
|
-
|
|
65
|
-
const answers: IQuestionDialogAnswer[] = [
|
|
66
|
-
{
|
|
67
|
-
id: 1,
|
|
68
|
-
text: 'I have lived here all my life',
|
|
69
|
-
nextQuestionId: 2,
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
id: 2,
|
|
73
|
-
text: 'I came here from Newton',
|
|
74
|
-
nextQuestionId: 3,
|
|
75
|
-
},
|
|
76
|
-
{
|
|
77
|
-
id: 3,
|
|
78
|
-
text: 'Oops! I mean, SpringVille!',
|
|
79
|
-
nextQuestionId: 2,
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
id: 4,
|
|
83
|
-
text: 'I havent heard about any trouble',
|
|
84
|
-
nextQuestionId: 4,
|
|
85
|
-
},
|
|
86
|
-
{
|
|
87
|
-
id: 5,
|
|
88
|
-
text: 'Who came here to die',
|
|
89
|
-
nextQuestionId: 4,
|
|
90
|
-
},
|
|
91
|
-
{
|
|
92
|
-
id: 6,
|
|
93
|
-
text: 'Who came here to live',
|
|
94
|
-
nextQuestionId: 4,
|
|
95
|
-
},
|
|
96
|
-
];
|
|
97
|
-
|
|
98
|
-
const questions: IQuestionDialog[] = [
|
|
99
|
-
{
|
|
100
|
-
id: 1,
|
|
101
|
-
text: `You dont Look Like from around here. Aren't you?`,
|
|
102
|
-
answerIds: [1, 2],
|
|
103
|
-
},
|
|
104
|
-
{
|
|
105
|
-
id: 2,
|
|
106
|
-
text: 'Oh really!! then You must know my Bowler!',
|
|
107
|
-
answerIds: [5, 6],
|
|
108
|
-
},
|
|
109
|
-
{
|
|
110
|
-
id: 3,
|
|
111
|
-
text: 'Newton!! I heard there is trouble brewing down here!!',
|
|
112
|
-
answerIds: [3, 4],
|
|
113
|
-
},
|
|
114
|
-
{
|
|
115
|
-
id: 4,
|
|
116
|
-
text:
|
|
117
|
-
'Dont you worry about it, say thats you have something to eat. Im starving',
|
|
118
|
-
},
|
|
119
|
-
{
|
|
120
|
-
id: 5,
|
|
121
|
-
text: 'You are a liar! there aint mr Browler! I made it',
|
|
122
|
-
},
|
|
123
|
-
];
|
|
124
|
-
|
|
125
|
-
Question.args = {
|
|
126
|
-
type: NPCDialogType.TextAndThumbnail,
|
|
127
|
-
questions,
|
|
128
|
-
answers,
|
|
129
|
-
isQuestionDialog: true,
|
|
130
|
-
};
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import {
|
|
4
|
+
INPCDialogProps,
|
|
5
|
+
NPCDialog,
|
|
6
|
+
NPCDialogType,
|
|
7
|
+
} from '../../src/components/NPCDialog/NPCDialog';
|
|
8
|
+
import {
|
|
9
|
+
IQuestionDialog,
|
|
10
|
+
IQuestionDialogAnswer,
|
|
11
|
+
} from '../../src/components/NPCDialog/QuestionDialog/QuestionDialog';
|
|
12
|
+
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
13
|
+
|
|
14
|
+
const meta: Meta = {
|
|
15
|
+
title: 'NPC Dialog',
|
|
16
|
+
component: NPCDialog,
|
|
17
|
+
argTypes: {
|
|
18
|
+
text: {
|
|
19
|
+
control: {
|
|
20
|
+
type: 'text',
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
|
|
24
|
+
type: {
|
|
25
|
+
control: {
|
|
26
|
+
type: 'select',
|
|
27
|
+
labels: {
|
|
28
|
+
[NPCDialogType.TextOnly]: 'Text Only',
|
|
29
|
+
[NPCDialogType.TextAndThumbnail]: 'Text and Thumbnail',
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
parameters: {
|
|
35
|
+
controls: { expanded: true },
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export default meta;
|
|
40
|
+
|
|
41
|
+
const Template: Story<INPCDialogProps> = args => (
|
|
42
|
+
<RPGUIRoot>
|
|
43
|
+
<NPCDialog {...args} />
|
|
44
|
+
</RPGUIRoot>
|
|
45
|
+
);
|
|
46
|
+
|
|
47
|
+
// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
|
|
48
|
+
// https://storybook.js.org/docs/react/workflows/unit-testing
|
|
49
|
+
export const TextAndThumbnail = Template.bind({});
|
|
50
|
+
|
|
51
|
+
TextAndThumbnail.args = {
|
|
52
|
+
text: `This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player.`,
|
|
53
|
+
type: NPCDialogType.TextAndThumbnail,
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
export const TextOnly = Template.bind({});
|
|
57
|
+
|
|
58
|
+
TextOnly.args = {
|
|
59
|
+
text: `This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player.`,
|
|
60
|
+
type: NPCDialogType.TextOnly,
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
export const Question = Template.bind({});
|
|
64
|
+
|
|
65
|
+
const answers: IQuestionDialogAnswer[] = [
|
|
66
|
+
{
|
|
67
|
+
id: 1,
|
|
68
|
+
text: 'I have lived here all my life',
|
|
69
|
+
nextQuestionId: 2,
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
id: 2,
|
|
73
|
+
text: 'I came here from Newton',
|
|
74
|
+
nextQuestionId: 3,
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
id: 3,
|
|
78
|
+
text: 'Oops! I mean, SpringVille!',
|
|
79
|
+
nextQuestionId: 2,
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
id: 4,
|
|
83
|
+
text: 'I havent heard about any trouble',
|
|
84
|
+
nextQuestionId: 4,
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
id: 5,
|
|
88
|
+
text: 'Who came here to die',
|
|
89
|
+
nextQuestionId: 4,
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
id: 6,
|
|
93
|
+
text: 'Who came here to live',
|
|
94
|
+
nextQuestionId: 4,
|
|
95
|
+
},
|
|
96
|
+
];
|
|
97
|
+
|
|
98
|
+
const questions: IQuestionDialog[] = [
|
|
99
|
+
{
|
|
100
|
+
id: 1,
|
|
101
|
+
text: `You dont Look Like from around here. Aren't you?`,
|
|
102
|
+
answerIds: [1, 2],
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
id: 2,
|
|
106
|
+
text: 'Oh really!! then You must know my Bowler!',
|
|
107
|
+
answerIds: [5, 6],
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
id: 3,
|
|
111
|
+
text: 'Newton!! I heard there is trouble brewing down here!!',
|
|
112
|
+
answerIds: [3, 4],
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
id: 4,
|
|
116
|
+
text:
|
|
117
|
+
'Dont you worry about it, say thats you have something to eat. Im starving',
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
id: 5,
|
|
121
|
+
text: 'You are a liar! there aint mr Browler! I made it',
|
|
122
|
+
},
|
|
123
|
+
];
|
|
124
|
+
|
|
125
|
+
Question.args = {
|
|
126
|
+
type: NPCDialogType.TextAndThumbnail,
|
|
127
|
+
questions,
|
|
128
|
+
answers,
|
|
129
|
+
isQuestionDialog: true,
|
|
130
|
+
};
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { Story } from '@storybook/react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { IBarProps, ProgressBar } from '../../src/components/ProgressBar';
|
|
4
|
-
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
title: 'Progress Bar',
|
|
8
|
-
component: ProgressBar,
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
const Template: Story<IBarProps> = args => (
|
|
12
|
-
<RPGUIRoot>
|
|
13
|
-
<ProgressBar {...args} />
|
|
14
|
-
</RPGUIRoot>
|
|
15
|
-
);
|
|
16
|
-
|
|
17
|
-
export const Default = Template.bind({});
|
|
18
|
-
|
|
19
|
-
Default.args = {
|
|
20
|
-
max: 100,
|
|
21
|
-
value: 30,
|
|
22
|
-
color: 'blue',
|
|
23
|
-
};
|
|
1
|
+
import { Story } from '@storybook/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { IBarProps, ProgressBar } from '../../src/components/ProgressBar';
|
|
4
|
+
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: 'Progress Bar',
|
|
8
|
+
component: ProgressBar,
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
const Template: Story<IBarProps> = args => (
|
|
12
|
+
<RPGUIRoot>
|
|
13
|
+
<ProgressBar {...args} />
|
|
14
|
+
</RPGUIRoot>
|
|
15
|
+
);
|
|
16
|
+
|
|
17
|
+
export const Default = Template.bind({});
|
|
18
|
+
|
|
19
|
+
Default.args = {
|
|
20
|
+
max: 100,
|
|
21
|
+
value: 30,
|
|
22
|
+
color: 'blue',
|
|
23
|
+
};
|
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
import { Meta, Story } from '@storybook/react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { RPGUIRoot } from '..';
|
|
4
|
-
import PropertySelect, {
|
|
5
|
-
IPropertySelectProps,
|
|
6
|
-
} from '../components/PropertySelect/PropertySelect';
|
|
7
|
-
|
|
8
|
-
const meta: Meta = {
|
|
9
|
-
title: 'Property Select',
|
|
10
|
-
component: PropertySelect,
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export default meta;
|
|
14
|
-
|
|
15
|
-
const Template: Story<IPropertySelectProps> = args => (
|
|
16
|
-
<RPGUIRoot>
|
|
17
|
-
<PropertySelect {...args} />
|
|
18
|
-
</RPGUIRoot>
|
|
19
|
-
);
|
|
20
|
-
|
|
21
|
-
export const Default = Template.bind({});
|
|
22
|
-
|
|
23
|
-
const propertiesMock = [
|
|
24
|
-
{
|
|
25
|
-
id: '2b716274-b19c-451d-9561-16bca8c6a12d',
|
|
26
|
-
name: 'Vegetables',
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
id: '536789bd-38fb-48f9-8903-dad86f276d47',
|
|
30
|
-
name: 'Counseling',
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
id: '80f07029-b907-4fae-872e-4f2b569f81c9',
|
|
34
|
-
name: 'Through',
|
|
35
|
-
},
|
|
36
|
-
];
|
|
37
|
-
|
|
38
|
-
Default.args = {
|
|
39
|
-
availableProperties: propertiesMock,
|
|
40
|
-
selectedProperty: {},
|
|
41
|
-
};
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { RPGUIRoot } from '..';
|
|
4
|
+
import PropertySelect, {
|
|
5
|
+
IPropertySelectProps,
|
|
6
|
+
} from '../components/PropertySelect/PropertySelect';
|
|
7
|
+
|
|
8
|
+
const meta: Meta = {
|
|
9
|
+
title: 'Property Select',
|
|
10
|
+
component: PropertySelect,
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export default meta;
|
|
14
|
+
|
|
15
|
+
const Template: Story<IPropertySelectProps> = args => (
|
|
16
|
+
<RPGUIRoot>
|
|
17
|
+
<PropertySelect {...args} />
|
|
18
|
+
</RPGUIRoot>
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
export const Default = Template.bind({});
|
|
22
|
+
|
|
23
|
+
const propertiesMock = [
|
|
24
|
+
{
|
|
25
|
+
id: '2b716274-b19c-451d-9561-16bca8c6a12d',
|
|
26
|
+
name: 'Vegetables',
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
id: '536789bd-38fb-48f9-8903-dad86f276d47',
|
|
30
|
+
name: 'Counseling',
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
id: '80f07029-b907-4fae-872e-4f2b569f81c9',
|
|
34
|
+
name: 'Through',
|
|
35
|
+
},
|
|
36
|
+
];
|
|
37
|
+
|
|
38
|
+
Default.args = {
|
|
39
|
+
availableProperties: propertiesMock,
|
|
40
|
+
selectedProperty: {},
|
|
41
|
+
};
|
|
@@ -1,76 +1,76 @@
|
|
|
1
|
-
import { Meta, Story } from '@storybook/react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import {
|
|
4
|
-
IQuestInfoProps,
|
|
5
|
-
QuestInfo,
|
|
6
|
-
} from '../../src/components/QuestInfo/QuestInfo';
|
|
7
|
-
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
8
|
-
|
|
9
|
-
const meta: Meta = {
|
|
10
|
-
title: 'Quest Info',
|
|
11
|
-
component: QuestInfo,
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
export default meta;
|
|
15
|
-
|
|
16
|
-
const Template: Story<IQuestInfoProps> = args => (
|
|
17
|
-
<RPGUIRoot>
|
|
18
|
-
<QuestInfo {...args} />
|
|
19
|
-
</RPGUIRoot>
|
|
20
|
-
);
|
|
21
|
-
|
|
22
|
-
export const Default = Template.bind({});
|
|
23
|
-
|
|
24
|
-
const buttonMock = [
|
|
25
|
-
{
|
|
26
|
-
disabled: false,
|
|
27
|
-
title: 'Accept',
|
|
28
|
-
onClick: () => console.log('button 1 clicked'),
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
disabled: true,
|
|
32
|
-
title: 'Share',
|
|
33
|
-
onClick: () => console.log('button 2 clicked'),
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
disabled: false,
|
|
37
|
-
title: 'Reject',
|
|
38
|
-
onClick: () => console.log('button 3 clicked'),
|
|
39
|
-
},
|
|
40
|
-
];
|
|
41
|
-
|
|
42
|
-
Default.args = {
|
|
43
|
-
title: 'Quest Info',
|
|
44
|
-
onClose: () => console.log('closing'),
|
|
45
|
-
button: buttonMock,
|
|
46
|
-
children: (
|
|
47
|
-
<>
|
|
48
|
-
<h1>HTML Ipsum Presents</h1>
|
|
49
|
-
<p>
|
|
50
|
-
<strong>Pellentesque habitant morbi tristique</strong> senectus et netus
|
|
51
|
-
et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
|
|
52
|
-
vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
|
|
53
|
-
quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
|
|
54
|
-
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper
|
|
55
|
-
pharetra. Vestibulum erat wisi, condimentum sed,{' '}
|
|
56
|
-
<code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum,
|
|
57
|
-
elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
|
|
58
|
-
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut
|
|
59
|
-
felis.
|
|
60
|
-
</p>
|
|
61
|
-
<h1>HTML Ipsum Presents</h1>
|
|
62
|
-
<p>
|
|
63
|
-
<strong>Pellentesque habitant morbi tristique</strong> senectus et netus
|
|
64
|
-
et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
|
|
65
|
-
vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
|
|
66
|
-
quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
|
|
67
|
-
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper
|
|
68
|
-
pharetra. Vestibulum erat wisi, condimentum sed,{' '}
|
|
69
|
-
<code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum,
|
|
70
|
-
elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
|
|
71
|
-
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut
|
|
72
|
-
felis.
|
|
73
|
-
</p>
|
|
74
|
-
</>
|
|
75
|
-
),
|
|
76
|
-
};
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import {
|
|
4
|
+
IQuestInfoProps,
|
|
5
|
+
QuestInfo,
|
|
6
|
+
} from '../../src/components/QuestInfo/QuestInfo';
|
|
7
|
+
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
8
|
+
|
|
9
|
+
const meta: Meta = {
|
|
10
|
+
title: 'Quest Info',
|
|
11
|
+
component: QuestInfo,
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export default meta;
|
|
15
|
+
|
|
16
|
+
const Template: Story<IQuestInfoProps> = args => (
|
|
17
|
+
<RPGUIRoot>
|
|
18
|
+
<QuestInfo {...args} />
|
|
19
|
+
</RPGUIRoot>
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
export const Default = Template.bind({});
|
|
23
|
+
|
|
24
|
+
const buttonMock = [
|
|
25
|
+
{
|
|
26
|
+
disabled: false,
|
|
27
|
+
title: 'Accept',
|
|
28
|
+
onClick: () => console.log('button 1 clicked'),
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
disabled: true,
|
|
32
|
+
title: 'Share',
|
|
33
|
+
onClick: () => console.log('button 2 clicked'),
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
disabled: false,
|
|
37
|
+
title: 'Reject',
|
|
38
|
+
onClick: () => console.log('button 3 clicked'),
|
|
39
|
+
},
|
|
40
|
+
];
|
|
41
|
+
|
|
42
|
+
Default.args = {
|
|
43
|
+
title: 'Quest Info',
|
|
44
|
+
onClose: () => console.log('closing'),
|
|
45
|
+
button: buttonMock,
|
|
46
|
+
children: (
|
|
47
|
+
<>
|
|
48
|
+
<h1>HTML Ipsum Presents</h1>
|
|
49
|
+
<p>
|
|
50
|
+
<strong>Pellentesque habitant morbi tristique</strong> senectus et netus
|
|
51
|
+
et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
|
|
52
|
+
vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
|
|
53
|
+
quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
|
|
54
|
+
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper
|
|
55
|
+
pharetra. Vestibulum erat wisi, condimentum sed,{' '}
|
|
56
|
+
<code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum,
|
|
57
|
+
elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
|
|
58
|
+
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut
|
|
59
|
+
felis.
|
|
60
|
+
</p>
|
|
61
|
+
<h1>HTML Ipsum Presents</h1>
|
|
62
|
+
<p>
|
|
63
|
+
<strong>Pellentesque habitant morbi tristique</strong> senectus et netus
|
|
64
|
+
et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
|
|
65
|
+
vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
|
|
66
|
+
quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
|
|
67
|
+
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper
|
|
68
|
+
pharetra. Vestibulum erat wisi, condimentum sed,{' '}
|
|
69
|
+
<code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum,
|
|
70
|
+
elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
|
|
71
|
+
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut
|
|
72
|
+
felis.
|
|
73
|
+
</p>
|
|
74
|
+
</>
|
|
75
|
+
),
|
|
76
|
+
};
|
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
import { Meta, Story } from '@storybook/react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import {
|
|
4
|
-
IRPGUIContainerProps,
|
|
5
|
-
RPGUIContainer,
|
|
6
|
-
RPGUIContainerTypes,
|
|
7
|
-
} from '../../src/components/RPGUIContainer';
|
|
8
|
-
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
9
|
-
|
|
10
|
-
const meta: Meta = {
|
|
11
|
-
title: 'RPGUI Container',
|
|
12
|
-
component: RPGUIContainer,
|
|
13
|
-
argTypes: {
|
|
14
|
-
type: {
|
|
15
|
-
control: {
|
|
16
|
-
type: 'select',
|
|
17
|
-
labels: {
|
|
18
|
-
[RPGUIContainerTypes.Framed]: 'framed',
|
|
19
|
-
[RPGUIContainerTypes.FramedGold]: 'framed-gold',
|
|
20
|
-
[RPGUIContainerTypes.FramedGold2]: 'framed-gold-2',
|
|
21
|
-
[RPGUIContainerTypes.FramedGrey]: 'framed-grey',
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
children: {},
|
|
26
|
-
},
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
export default meta;
|
|
30
|
-
|
|
31
|
-
const Template: Story<IRPGUIContainerProps> = args => (
|
|
32
|
-
<RPGUIRoot>
|
|
33
|
-
<RPGUIContainer {...args} />
|
|
34
|
-
</RPGUIRoot>
|
|
35
|
-
);
|
|
36
|
-
|
|
37
|
-
export const Default = Template.bind({});
|
|
38
|
-
|
|
39
|
-
Default.args = {
|
|
40
|
-
type: RPGUIContainerTypes.Framed,
|
|
41
|
-
children: <p>This is a container test</p>,
|
|
42
|
-
};
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import {
|
|
4
|
+
IRPGUIContainerProps,
|
|
5
|
+
RPGUIContainer,
|
|
6
|
+
RPGUIContainerTypes,
|
|
7
|
+
} from '../../src/components/RPGUIContainer';
|
|
8
|
+
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
9
|
+
|
|
10
|
+
const meta: Meta = {
|
|
11
|
+
title: 'RPGUI Container',
|
|
12
|
+
component: RPGUIContainer,
|
|
13
|
+
argTypes: {
|
|
14
|
+
type: {
|
|
15
|
+
control: {
|
|
16
|
+
type: 'select',
|
|
17
|
+
labels: {
|
|
18
|
+
[RPGUIContainerTypes.Framed]: 'framed',
|
|
19
|
+
[RPGUIContainerTypes.FramedGold]: 'framed-gold',
|
|
20
|
+
[RPGUIContainerTypes.FramedGold2]: 'framed-gold-2',
|
|
21
|
+
[RPGUIContainerTypes.FramedGrey]: 'framed-grey',
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
children: {},
|
|
26
|
+
},
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export default meta;
|
|
30
|
+
|
|
31
|
+
const Template: Story<IRPGUIContainerProps> = args => (
|
|
32
|
+
<RPGUIRoot>
|
|
33
|
+
<RPGUIContainer {...args} />
|
|
34
|
+
</RPGUIRoot>
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
export const Default = Template.bind({});
|
|
38
|
+
|
|
39
|
+
Default.args = {
|
|
40
|
+
type: RPGUIContainerTypes.Framed,
|
|
41
|
+
children: <p>This is a container test</p>,
|
|
42
|
+
};
|