@rpg-engine/long-bow 0.3.54 → 0.3.57

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.
Files changed (162) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +181 -181
  3. package/dist/components/Arrow/SelectArrow.d.ts +1 -1
  4. package/dist/components/Button.d.ts +2 -2
  5. package/dist/components/CircularController/CircularController.d.ts +4 -7
  6. package/dist/components/Item/Inventory/ItemContainer.d.ts +1 -4
  7. package/dist/components/Item/Inventory/ItemSlot.d.ts +1 -2
  8. package/dist/components/Multitab/Tab.d.ts +1 -1
  9. package/dist/components/Spellbook/QuickSpells.d.ts +10 -0
  10. package/dist/components/Spellbook/Spell.d.ts +1 -1
  11. package/dist/components/Spellbook/Spellbook.d.ts +3 -5
  12. package/dist/components/Spellbook/SpellbookShortcuts.d.ts +10 -0
  13. package/dist/components/Spellbook/constants.d.ts +3 -3
  14. package/dist/components/shared/SpriteFromAtlas.d.ts +1 -1
  15. package/dist/index.d.ts +1 -1
  16. package/dist/long-bow.cjs.development.js +732 -911
  17. package/dist/long-bow.cjs.development.js.map +1 -1
  18. package/dist/long-bow.cjs.production.min.js +1 -1
  19. package/dist/long-bow.cjs.production.min.js.map +1 -1
  20. package/dist/long-bow.esm.js +734 -914
  21. package/dist/long-bow.esm.js.map +1 -1
  22. package/dist/stories/{Shortcuts.stories.d.ts → QuickSpells.stories.d.ts} +2 -2
  23. package/package.json +100 -100
  24. package/src/components/Abstractions/SlotsContainer.tsx +45 -45
  25. package/src/components/Arrow/SelectArrow.tsx +69 -65
  26. package/src/components/Arrow/img/arrow01-left-clicked.png +0 -0
  27. package/src/components/Arrow/img/arrow01-left.png +0 -0
  28. package/src/components/Arrow/img/arrow01-right-clicked.png +0 -0
  29. package/src/components/Arrow/img/arrow01-right.png +0 -0
  30. package/src/components/Arrow/img/arrow02-left-clicked.png +0 -0
  31. package/src/components/Arrow/img/arrow02-left.png +0 -0
  32. package/src/components/Arrow/img/arrow02-right-clicked.png +0 -0
  33. package/src/components/Arrow/img/arrow02-right.png +0 -0
  34. package/src/components/Button.tsx +40 -41
  35. package/src/components/Character/CharacterSelection.tsx +96 -96
  36. package/src/components/CharacterStatus/CharacterStatus.tsx +120 -120
  37. package/src/components/Chat/Chat.tsx +195 -195
  38. package/src/components/Chatdeprecated/ChatDeprecated.tsx +198 -200
  39. package/src/components/CheckButton.tsx +65 -65
  40. package/src/components/CircularController/CircularController.tsx +162 -245
  41. package/src/components/CraftBook/CraftBook.tsx +224 -235
  42. package/src/components/CraftBook/MockItems.ts +46 -46
  43. package/src/components/DraggableContainer.tsx +153 -154
  44. package/src/components/Dropdown.tsx +90 -96
  45. package/src/components/DropdownSelectorContainer.tsx +42 -42
  46. package/src/components/Equipment/EquipmentSet.tsx +190 -190
  47. package/src/components/HistoryDialog.tsx +104 -104
  48. package/src/components/Input.tsx +15 -15
  49. package/src/components/Item/Cards/ItemTooltip.tsx +33 -33
  50. package/src/components/Item/Inventory/ErrorBoundary.tsx +42 -42
  51. package/src/components/Item/Inventory/ItemContainer.tsx +175 -210
  52. package/src/components/Item/Inventory/ItemContainerTypes.ts +6 -6
  53. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +138 -142
  54. package/src/components/Item/Inventory/ItemSlot.tsx +467 -501
  55. package/src/components/Item/Inventory/itemContainerHelper.ts +156 -156
  56. package/src/components/ListMenu.tsx +63 -63
  57. package/src/components/Multitab/Tab.tsx +66 -57
  58. package/src/components/Multitab/TabBody.tsx +13 -13
  59. package/src/components/Multitab/TabsContainer.tsx +97 -97
  60. package/src/components/NPCDialog/NPCDialog.tsx +121 -121
  61. package/src/components/NPCDialog/NPCDialogText.tsx +113 -113
  62. package/src/components/NPCDialog/NPCMultiDialog.tsx +159 -159
  63. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +237 -237
  64. package/src/components/ProgressBar.tsx +92 -92
  65. package/src/components/PropertySelect/PropertySelect.tsx +106 -114
  66. package/src/components/QuestInfo/QuestInfo.tsx +230 -232
  67. package/src/components/QuestList.tsx +129 -129
  68. package/src/components/RPGUIContainer.tsx +47 -47
  69. package/src/components/RPGUIForceRenderStart.tsx +45 -45
  70. package/src/components/RPGUIRoot.tsx +14 -14
  71. package/src/components/RadioButton.tsx +53 -53
  72. package/src/components/RadioInput/RadioButton.tsx +96 -98
  73. package/src/components/RadioInput/RadioInput.tsx +102 -99
  74. package/src/components/RadioInput/instruments.ts +15 -15
  75. package/src/components/RangeSlider.tsx +78 -78
  76. package/src/components/RelativeListMenu.tsx +83 -83
  77. package/src/components/ScrollList.tsx +79 -79
  78. package/src/components/SimpleProgressBar.tsx +62 -62
  79. package/src/components/SkillProgressBar.tsx +133 -133
  80. package/src/components/SkillsContainer.tsx +198 -200
  81. package/src/components/Spellbook/QuickSpells.tsx +120 -0
  82. package/src/components/Spellbook/Spell.tsx +201 -201
  83. package/src/components/Spellbook/Spellbook.tsx +144 -150
  84. package/src/components/Spellbook/SpellbookShortcuts.tsx +77 -0
  85. package/src/components/Spellbook/constants.ts +12 -8
  86. package/src/components/Spellbook/mockSpells.ts +60 -60
  87. package/src/components/StaticBook/StaticBook.tsx +103 -105
  88. package/src/components/TextArea.tsx +11 -11
  89. package/src/components/TimeWidget/DayNightPeriod/DayNightPeriod.tsx +35 -35
  90. package/src/components/TimeWidget/TimeWidget.tsx +63 -63
  91. package/src/components/TradingMenu/TradingItemRow.tsx +193 -197
  92. package/src/components/TradingMenu/TradingMenu.tsx +203 -203
  93. package/src/components/TradingMenu/items.mock.ts +96 -96
  94. package/src/components/Truncate.tsx +25 -25
  95. package/src/components/itemSelector/ItemSelector.tsx +136 -136
  96. package/src/components/shared/Column.tsx +16 -16
  97. package/src/components/shared/Ellipsis.tsx +65 -65
  98. package/src/components/shared/SpriteFromAtlas.tsx +102 -102
  99. package/src/components/typography/DynamicText.tsx +49 -49
  100. package/src/constants/uiColors.ts +20 -20
  101. package/src/constants/uiDevices.ts +3 -3
  102. package/src/constants/uiFonts.ts +12 -12
  103. package/src/hooks/useEventListener.ts +21 -21
  104. package/src/hooks/useOutsideAlerter.ts +25 -25
  105. package/src/index.tsx +40 -40
  106. package/src/libs/StringHelpers.ts +3 -3
  107. package/src/mocks/atlas/entities/entities.json +20215 -20215
  108. package/src/mocks/atlas/icons/icons.json +735 -735
  109. package/src/mocks/atlas/items/items.json +12086 -12086
  110. package/src/mocks/equipmentSet.mocks.ts +393 -393
  111. package/src/mocks/itemContainer.mocks.ts +560 -562
  112. package/src/mocks/skills.mocks.ts +128 -128
  113. package/src/stories/Arrow.stories.tsx +26 -26
  114. package/src/stories/Button.stories.tsx +36 -36
  115. package/src/stories/CharacterSelection.stories.tsx +45 -45
  116. package/src/stories/CharacterStatus.stories.tsx +29 -29
  117. package/src/stories/Chat.stories.tsx +187 -187
  118. package/src/stories/ChatDeprecated.stories.tsx +170 -170
  119. package/src/stories/CheckButton.stories.tsx +48 -48
  120. package/src/stories/CircullarController.stories.tsx +33 -37
  121. package/src/stories/CraftBook.stories.tsx +40 -40
  122. package/src/stories/DayNightPeriod.stories.tsx +27 -27
  123. package/src/stories/DraggableContainer.stories.tsx +28 -28
  124. package/src/stories/Dropdown.stories.tsx +46 -46
  125. package/src/stories/DropdownSelectorContainer.stories.tsx +41 -41
  126. package/src/stories/EquipmentSet.stories.tsx +65 -65
  127. package/src/stories/HistoryDialog.stories.tsx +61 -61
  128. package/src/stories/ItemContainer.stories.tsx +124 -198
  129. package/src/stories/ItemQuantitySelector.stories.tsx +26 -26
  130. package/src/stories/ItemSelector.stories.tsx +77 -77
  131. package/src/stories/ItemTradingComponent.stories.tsx +35 -35
  132. package/src/stories/ListMenu.stories.tsx +56 -56
  133. package/src/stories/Multitab.stories.tsx +51 -51
  134. package/src/stories/NPCDialog.stories.tsx +130 -130
  135. package/src/stories/NPCMultiDialog.stories.tsx +71 -71
  136. package/src/stories/ProgressBar.stories.tsx +23 -23
  137. package/src/stories/PropertySelect.stories.tsx +40 -40
  138. package/src/stories/QuestInfo.stories.tsx +107 -107
  139. package/src/stories/QuestList.stories.tsx +82 -82
  140. package/src/stories/QuickSpells.stories.tsx +38 -0
  141. package/src/stories/RPGUIContainers.stories.tsx +42 -42
  142. package/src/stories/RadioButton.stories.tsx +49 -49
  143. package/src/stories/RadioInput.stories.tsx +34 -34
  144. package/src/stories/RangeSlider.stories.tsx +64 -64
  145. package/src/stories/ScrollList.stories.tsx +85 -85
  146. package/src/stories/SimpleProgressBar.stories.tsx +22 -22
  147. package/src/stories/SkillProgressBar.stories.tsx +34 -34
  148. package/src/stories/SkillsContainer.stories.tsx +35 -35
  149. package/src/stories/Spellbook.stories.tsx +107 -104
  150. package/src/stories/StaticBook.stories.tsx +32 -32
  151. package/src/stories/Text.stories.tsx +42 -42
  152. package/src/stories/TimeWidget.stories.tsx +27 -27
  153. package/src/stories/TradingMenu.stories.tsx +45 -45
  154. package/src/types/eventTypes.ts +4 -4
  155. package/src/types/index.d.ts +2 -2
  156. package/dist/components/Shortcuts/Shortcuts.d.ts +0 -12
  157. package/dist/components/Shortcuts/ShortcutsSetter.d.ts +0 -12
  158. package/dist/components/Shortcuts/SingleShortcut.d.ts +0 -1
  159. package/src/components/Shortcuts/Shortcuts.tsx +0 -129
  160. package/src/components/Shortcuts/ShortcutsSetter.tsx +0 -132
  161. package/src/components/Shortcuts/SingleShortcut.ts +0 -61
  162. package/src/stories/Shortcuts.stories.tsx +0 -39
@@ -1,28 +1,28 @@
1
- import { Meta, Story } from '@storybook/react';
2
- import React from 'react';
3
- import {
4
- DraggableContainer,
5
- IDraggableContainerProps,
6
- } from '../../src/components/DraggableContainer';
7
- import { RPGUIRoot } from '../../src/components/RPGUIRoot';
8
-
9
- const meta: Meta = {
10
- title: 'Draggable Container',
11
- component: DraggableContainer,
12
- };
13
-
14
- export default meta;
15
-
16
- const Template: Story<IDraggableContainerProps> = args => (
17
- <RPGUIRoot>
18
- <DraggableContainer {...args} />
19
- </RPGUIRoot>
20
- );
21
-
22
- export const Default = Template.bind({});
23
-
24
- Default.args = {
25
- title: 'Example',
26
- onCloseButton: () => console.log('closing'),
27
- children: <p>This is a draggable container!</p>,
28
- };
1
+ import { Meta, Story } from '@storybook/react';
2
+ import React from 'react';
3
+ import {
4
+ DraggableContainer,
5
+ IDraggableContainerProps,
6
+ } from '../../src/components/DraggableContainer';
7
+ import { RPGUIRoot } from '../../src/components/RPGUIRoot';
8
+
9
+ const meta: Meta = {
10
+ title: 'Draggable Container',
11
+ component: DraggableContainer,
12
+ };
13
+
14
+ export default meta;
15
+
16
+ const Template: Story<IDraggableContainerProps> = args => (
17
+ <RPGUIRoot>
18
+ <DraggableContainer {...args} />
19
+ </RPGUIRoot>
20
+ );
21
+
22
+ export const Default = Template.bind({});
23
+
24
+ Default.args = {
25
+ title: 'Example',
26
+ onCloseButton: () => console.log('closing'),
27
+ children: <p>This is a draggable container!</p>,
28
+ };
@@ -1,46 +1,46 @@
1
- import { Meta, Story } from '@storybook/react';
2
- import React from 'react';
3
- import { RPGUIRoot } from '../../src';
4
- import {
5
- Dropdown,
6
- IDropdownProps,
7
- IOptionsProps,
8
- } from '../../src/components/Dropdown';
9
-
10
- const meta: Meta = {
11
- title: 'Dropdown',
12
- component: Dropdown,
13
- };
14
-
15
- export default meta;
16
-
17
- const Template: Story<IDropdownProps> = args => (
18
- <RPGUIRoot>
19
- <Dropdown {...args} />
20
- </RPGUIRoot>
21
- );
22
-
23
- export const Default = Template.bind({});
24
-
25
- const options: IOptionsProps[] = [
26
- {
27
- id: 1,
28
- value: 'Human',
29
- option: 'Human',
30
- },
31
- {
32
- id: 2,
33
- value: 'Elfo',
34
- option: 'Elfo',
35
- },
36
- {
37
- id: 3,
38
- value: 'Dragão',
39
- option: 'Dragão',
40
- },
41
- ];
42
-
43
- Default.args = {
44
- options,
45
- width: '100%',
46
- };
1
+ import { Meta, Story } from '@storybook/react';
2
+ import React from 'react';
3
+ import { RPGUIRoot } from '../../src';
4
+ import {
5
+ Dropdown,
6
+ IDropdownProps,
7
+ IOptionsProps,
8
+ } from '../../src/components/Dropdown';
9
+
10
+ const meta: Meta = {
11
+ title: 'Dropdown',
12
+ component: Dropdown,
13
+ };
14
+
15
+ export default meta;
16
+
17
+ const Template: Story<IDropdownProps> = args => (
18
+ <RPGUIRoot>
19
+ <Dropdown {...args} />
20
+ </RPGUIRoot>
21
+ );
22
+
23
+ export const Default = Template.bind({});
24
+
25
+ const options: IOptionsProps[] = [
26
+ {
27
+ id: 1,
28
+ value: 'Human',
29
+ option: 'Human',
30
+ },
31
+ {
32
+ id: 2,
33
+ value: 'Elfo',
34
+ option: 'Elfo',
35
+ },
36
+ {
37
+ id: 3,
38
+ value: 'Dragão',
39
+ option: 'Dragão',
40
+ },
41
+ ];
42
+
43
+ Default.args = {
44
+ options,
45
+ width: '100%',
46
+ };
@@ -1,41 +1,41 @@
1
- import { Meta, Story } from '@storybook/react';
2
- import React from 'react';
3
- import { RPGUIRoot } from '..';
4
- import {
5
- DropdownSelectorContainer,
6
- IDropdownSelectorContainer,
7
- } from '../components/DropdownSelectorContainer';
8
-
9
- const meta: Meta = {
10
- title: 'DropdownSelectorContainer',
11
- component: DropdownSelectorContainer,
12
- };
13
-
14
- export default meta;
15
-
16
- const Template: Story<IDropdownSelectorContainer> = args => (
17
- <RPGUIRoot>
18
- <DropdownSelectorContainer {...args} details="There are server details" />
19
- </RPGUIRoot>
20
- );
21
-
22
- export const Default = Template.bind({});
23
-
24
- Default.args = {
25
- title: 'Choose a server',
26
- onChange: () => {},
27
- options: [
28
- {
29
- id: 'europe-germany',
30
- name: 'Europe (Germany)',
31
- },
32
- {
33
- id: 'europe-uk',
34
- name: 'Europe (UK)',
35
- },
36
- {
37
- id: 'america-us',
38
- name: 'America',
39
- },
40
- ],
41
- };
1
+ import { Meta, Story } from '@storybook/react';
2
+ import React from 'react';
3
+ import { RPGUIRoot } from '..';
4
+ import {
5
+ DropdownSelectorContainer,
6
+ IDropdownSelectorContainer,
7
+ } from '../components/DropdownSelectorContainer';
8
+
9
+ const meta: Meta = {
10
+ title: 'DropdownSelectorContainer',
11
+ component: DropdownSelectorContainer,
12
+ };
13
+
14
+ export default meta;
15
+
16
+ const Template: Story<IDropdownSelectorContainer> = args => (
17
+ <RPGUIRoot>
18
+ <DropdownSelectorContainer {...args} details="There are server details" />
19
+ </RPGUIRoot>
20
+ );
21
+
22
+ export const Default = Template.bind({});
23
+
24
+ Default.args = {
25
+ title: 'Choose a server',
26
+ onChange: () => {},
27
+ options: [
28
+ {
29
+ id: 'europe-germany',
30
+ name: 'Europe (Germany)',
31
+ },
32
+ {
33
+ id: 'europe-uk',
34
+ name: 'Europe (UK)',
35
+ },
36
+ {
37
+ id: 'america-us',
38
+ name: 'America',
39
+ },
40
+ ],
41
+ };
@@ -1,65 +1,65 @@
1
- import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
2
- import { Meta, Story } from '@storybook/react';
3
- import React from 'react';
4
- import {
5
- EquipmentSet,
6
- IEquipmentSetProps,
7
- } from '../../src/components/Equipment/EquipmentSet';
8
- import { RPGUIRoot } from '../../src/components/RPGUIRoot';
9
- import { equipmentSetMock } from '../../src/mocks/equipmentSet.mocks';
10
- import atlasJSON from '../mocks/atlas/items/items.json';
11
- import atlasIMG from '../mocks/atlas/items/items.png';
12
- import { IPosition } from '../types/eventTypes';
13
-
14
- const meta: Meta = {
15
- title: 'Equipment Set',
16
- component: EquipmentSet,
17
- };
18
-
19
- export default meta;
20
-
21
- const onMouseOver = (event: any, slotIndex: number, item: IItem | null) => {
22
- if (!item) {
23
- console.log(`Free at ${slotIndex},${event}`);
24
- return;
25
- }
26
- };
27
-
28
- const onItemClick = (
29
- ItemType: ItemType,
30
- item: IItem,
31
- itemContainerType: ItemContainerType | null
32
- ) => {
33
- console.log(item, ItemType, itemContainerType, 'was clicked!');
34
- };
35
-
36
- const onSelected = (payload: string) => {
37
- console.log('dispatch', payload);
38
- };
39
-
40
- const onItemOutsideDrop = (item: IItem, position: IPosition) => {
41
- console.log('dropped outside', item, position);
42
- };
43
-
44
- const Template: Story<IEquipmentSetProps> = args => (
45
- <RPGUIRoot>
46
- <EquipmentSet
47
- {...args}
48
- equipmentSet={equipmentSetMock}
49
- onClose={() => console.log('closing Equipment Set Container')}
50
- onMouseOver={onMouseOver}
51
- onSelected={onSelected}
52
- onItemClick={onItemClick}
53
- onItemDragEnd={_quantity => {}}
54
- onItemDragStart={item => console.log('drag start: ', item._id)}
55
- onItemPlaceDrop={item => console.log('dropped to: ', item?._id)}
56
- checkIfItemCanBeMoved={() => false}
57
- type={ItemContainerType.Equipment}
58
- atlasIMG={atlasIMG}
59
- atlasJSON={atlasJSON}
60
- onItemOutsideDrop={onItemOutsideDrop}
61
- />
62
- </RPGUIRoot>
63
- );
64
-
65
- export const Default = Template.bind({});
1
+ import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
2
+ import { Meta, Story } from '@storybook/react';
3
+ import React from 'react';
4
+ import {
5
+ EquipmentSet,
6
+ IEquipmentSetProps,
7
+ } from '../../src/components/Equipment/EquipmentSet';
8
+ import { RPGUIRoot } from '../../src/components/RPGUIRoot';
9
+ import { equipmentSetMock } from '../../src/mocks/equipmentSet.mocks';
10
+ import atlasJSON from '../mocks/atlas/items/items.json';
11
+ import atlasIMG from '../mocks/atlas/items/items.png';
12
+ import { IPosition } from '../types/eventTypes';
13
+
14
+ const meta: Meta = {
15
+ title: 'Equipment Set',
16
+ component: EquipmentSet,
17
+ };
18
+
19
+ export default meta;
20
+
21
+ const onMouseOver = (event: any, slotIndex: number, item: IItem | null) => {
22
+ if (!item) {
23
+ console.log(`Free at ${slotIndex},${event}`);
24
+ return;
25
+ }
26
+ };
27
+
28
+ const onItemClick = (
29
+ ItemType: ItemType,
30
+ item: IItem,
31
+ itemContainerType: ItemContainerType | null
32
+ ) => {
33
+ console.log(item, ItemType, itemContainerType, 'was clicked!');
34
+ };
35
+
36
+ const onSelected = (payload: string) => {
37
+ console.log('dispatch', payload);
38
+ };
39
+
40
+ const onItemOutsideDrop = (item: IItem, position: IPosition) => {
41
+ console.log('dropped outside', item, position);
42
+ };
43
+
44
+ const Template: Story<IEquipmentSetProps> = args => (
45
+ <RPGUIRoot>
46
+ <EquipmentSet
47
+ {...args}
48
+ equipmentSet={equipmentSetMock}
49
+ onClose={() => console.log('closing Equipment Set Container')}
50
+ onMouseOver={onMouseOver}
51
+ onSelected={onSelected}
52
+ onItemClick={onItemClick}
53
+ onItemDragEnd={_quantity => {}}
54
+ onItemDragStart={item => console.log('drag start: ', item._id)}
55
+ onItemPlaceDrop={item => console.log('dropped to: ', item?._id)}
56
+ checkIfItemCanBeMoved={() => false}
57
+ type={ItemContainerType.Equipment}
58
+ atlasIMG={atlasIMG}
59
+ atlasJSON={atlasJSON}
60
+ onItemOutsideDrop={onItemOutsideDrop}
61
+ />
62
+ </RPGUIRoot>
63
+ );
64
+
65
+ export const Default = Template.bind({});
@@ -1,61 +1,61 @@
1
- import { Meta, Story } from '@storybook/react';
2
- import React from 'react';
3
- import { RPGUIRoot } from '../components/RPGUIRoot';
4
- import aliceDefaultThumbnail from '../components/NPCDialog/img/npcDialog/npcThumbnails/alice.png';
5
- import ImgBackground01 from '../components/NPCDialog/img/background01.png';
6
- import ImgBackground02 from '../components/NPCDialog/img/background02.png';
7
- import ImgBackground03 from '../components/NPCDialog/img/background03.png';
8
- import {
9
- HistoryDialog,
10
- IHistoryDialogProps,
11
- } from '../components/HistoryDialog';
12
- import {
13
- ImgSide,
14
- NPCMultiDialogType,
15
- } from '../components/NPCDialog/NPCMultiDialog';
16
-
17
- const meta: Meta = {
18
- title: 'NPC History Dialog',
19
- component: HistoryDialog,
20
- argTypes: {
21
- text: {
22
- control: {
23
- type: 'text',
24
- },
25
- },
26
- },
27
- };
28
-
29
- export default meta;
30
-
31
- const Template: Story<IHistoryDialogProps> = args => (
32
- <RPGUIRoot>
33
- <HistoryDialog {...args} />
34
- </RPGUIRoot>
35
- );
36
-
37
- export const HistoryDialogStore = Template.bind({});
38
-
39
- const textAndTypeArray: NPCMultiDialogType[] = [
40
- {
41
- text: 'I have lived here all my life',
42
- imagePath: aliceDefaultThumbnail,
43
- imageSide: ImgSide.right,
44
- },
45
- {
46
- text: 'I have lived here all my life',
47
- imagePath: aliceDefaultThumbnail,
48
- imageSide: ImgSide.left,
49
- },
50
- {
51
- text: 'I have lived here all my life',
52
- imagePath: aliceDefaultThumbnail,
53
- imageSide: ImgSide.right,
54
- },
55
- ];
56
-
57
- HistoryDialogStore.args = {
58
- textAndTypeArray,
59
- fullCoverBackground: true,
60
- backgroundImgPath: [ImgBackground01, ImgBackground02, ImgBackground03],
61
- };
1
+ import { Meta, Story } from '@storybook/react';
2
+ import React from 'react';
3
+ import { RPGUIRoot } from '../components/RPGUIRoot';
4
+ import aliceDefaultThumbnail from '../components/NPCDialog/img/npcDialog/npcThumbnails/alice.png';
5
+ import ImgBackground01 from '../components/NPCDialog/img/background01.png';
6
+ import ImgBackground02 from '../components/NPCDialog/img/background02.png';
7
+ import ImgBackground03 from '../components/NPCDialog/img/background03.png';
8
+ import {
9
+ HistoryDialog,
10
+ IHistoryDialogProps,
11
+ } from '../components/HistoryDialog';
12
+ import {
13
+ ImgSide,
14
+ NPCMultiDialogType,
15
+ } from '../components/NPCDialog/NPCMultiDialog';
16
+
17
+ const meta: Meta = {
18
+ title: 'NPC History Dialog',
19
+ component: HistoryDialog,
20
+ argTypes: {
21
+ text: {
22
+ control: {
23
+ type: 'text',
24
+ },
25
+ },
26
+ },
27
+ };
28
+
29
+ export default meta;
30
+
31
+ const Template: Story<IHistoryDialogProps> = args => (
32
+ <RPGUIRoot>
33
+ <HistoryDialog {...args} />
34
+ </RPGUIRoot>
35
+ );
36
+
37
+ export const HistoryDialogStore = Template.bind({});
38
+
39
+ const textAndTypeArray: NPCMultiDialogType[] = [
40
+ {
41
+ text: 'I have lived here all my life',
42
+ imagePath: aliceDefaultThumbnail,
43
+ imageSide: ImgSide.right,
44
+ },
45
+ {
46
+ text: 'I have lived here all my life',
47
+ imagePath: aliceDefaultThumbnail,
48
+ imageSide: ImgSide.left,
49
+ },
50
+ {
51
+ text: 'I have lived here all my life',
52
+ imagePath: aliceDefaultThumbnail,
53
+ imageSide: ImgSide.right,
54
+ },
55
+ ];
56
+
57
+ HistoryDialogStore.args = {
58
+ textAndTypeArray,
59
+ fullCoverBackground: true,
60
+ backgroundImgPath: [ImgBackground01, ImgBackground02, ImgBackground03],
61
+ };