@rpg-engine/long-bow 0.3.70 → 0.3.71

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 (158) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +181 -181
  3. package/dist/components/CraftBook/CraftBook.d.ts +2 -1
  4. package/dist/components/Item/Cards/ItemInfo.d.ts +10 -0
  5. package/dist/components/Item/Cards/ItemInfoDisplay.d.ts +9 -0
  6. package/dist/components/Item/Cards/ItemInfoWrapper.d.ts +11 -0
  7. package/dist/components/Item/Cards/ItemTooltip.d.ts +7 -4
  8. package/dist/components/Item/Inventory/ItemContainer.d.ts +2 -1
  9. package/dist/components/Item/Inventory/ItemSlot.d.ts +4 -1
  10. package/dist/components/TradingMenu/TradingItemRow.d.ts +2 -1
  11. package/dist/components/TradingMenu/TradingMenu.d.ts +4 -3
  12. package/dist/components/shared/SpriteFromAtlas.d.ts +1 -0
  13. package/dist/long-bow.cjs.development.js +1220 -951
  14. package/dist/long-bow.cjs.development.js.map +1 -1
  15. package/dist/long-bow.cjs.production.min.js +1 -1
  16. package/dist/long-bow.cjs.production.min.js.map +1 -1
  17. package/dist/long-bow.esm.js +1222 -955
  18. package/dist/long-bow.esm.js.map +1 -1
  19. package/dist/stories/ItemInfoDisplay.stories.d.ts +8 -0
  20. package/dist/stories/TradingMenu.stories.d.ts +2 -2
  21. package/package.json +100 -100
  22. package/src/components/Abstractions/SlotsContainer.tsx +45 -45
  23. package/src/components/Arrow/SelectArrow.tsx +69 -69
  24. package/src/components/Arrow/img/arrow01-left-clicked.png +0 -0
  25. package/src/components/Arrow/img/arrow01-left.png +0 -0
  26. package/src/components/Arrow/img/arrow01-right-clicked.png +0 -0
  27. package/src/components/Arrow/img/arrow01-right.png +0 -0
  28. package/src/components/Arrow/img/arrow02-left-clicked.png +0 -0
  29. package/src/components/Arrow/img/arrow02-left.png +0 -0
  30. package/src/components/Arrow/img/arrow02-right-clicked.png +0 -0
  31. package/src/components/Arrow/img/arrow02-right.png +0 -0
  32. package/src/components/Button.tsx +40 -40
  33. package/src/components/Character/CharacterSelection.tsx +96 -96
  34. package/src/components/CharacterStatus/CharacterStatus.tsx +120 -120
  35. package/src/components/Chat/Chat.tsx +195 -195
  36. package/src/components/Chatdeprecated/ChatDeprecated.tsx +198 -198
  37. package/src/components/CheckButton.tsx +65 -65
  38. package/src/components/CircularController/CircularController.tsx +248 -248
  39. package/src/components/CraftBook/CraftBook.tsx +237 -227
  40. package/src/components/CraftBook/MockItems.ts +41 -46
  41. package/src/components/DraggableContainer.tsx +153 -153
  42. package/src/components/Dropdown.tsx +90 -90
  43. package/src/components/DropdownSelectorContainer.tsx +42 -42
  44. package/src/components/Equipment/EquipmentSet.tsx +190 -190
  45. package/src/components/HistoryDialog.tsx +104 -104
  46. package/src/components/Input.tsx +15 -15
  47. package/src/components/Item/Cards/ItemInfo.tsx +248 -0
  48. package/src/components/Item/Cards/ItemInfoDisplay.tsx +120 -0
  49. package/src/components/Item/Cards/ItemInfoWrapper.tsx +39 -0
  50. package/src/components/Item/Cards/ItemTooltip.tsx +85 -33
  51. package/src/components/Item/Inventory/ErrorBoundary.tsx +42 -42
  52. package/src/components/Item/Inventory/ItemContainer.tsx +214 -210
  53. package/src/components/Item/Inventory/ItemContainerTypes.ts +6 -6
  54. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +138 -138
  55. package/src/components/Item/Inventory/ItemSlot.tsx +512 -501
  56. package/src/components/Item/Inventory/itemContainerHelper.ts +156 -156
  57. package/src/components/ListMenu.tsx +63 -63
  58. package/src/components/Multitab/Tab.tsx +66 -66
  59. package/src/components/Multitab/TabBody.tsx +13 -13
  60. package/src/components/Multitab/TabsContainer.tsx +97 -97
  61. package/src/components/NPCDialog/NPCDialog.tsx +121 -121
  62. package/src/components/NPCDialog/NPCDialogText.tsx +113 -113
  63. package/src/components/NPCDialog/NPCMultiDialog.tsx +159 -159
  64. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +237 -237
  65. package/src/components/ProgressBar.tsx +92 -92
  66. package/src/components/PropertySelect/PropertySelect.tsx +106 -106
  67. package/src/components/QuestInfo/QuestInfo.tsx +230 -230
  68. package/src/components/QuestList.tsx +129 -129
  69. package/src/components/RPGUIContainer.tsx +47 -47
  70. package/src/components/RPGUIForceRenderStart.tsx +45 -45
  71. package/src/components/RPGUIRoot.tsx +14 -14
  72. package/src/components/RadioButton.tsx +53 -53
  73. package/src/components/RadioInput/RadioButton.tsx +96 -96
  74. package/src/components/RadioInput/RadioInput.tsx +102 -102
  75. package/src/components/RadioInput/instruments.ts +15 -15
  76. package/src/components/RangeSlider.tsx +78 -78
  77. package/src/components/RelativeListMenu.tsx +83 -83
  78. package/src/components/ScrollList.tsx +79 -79
  79. package/src/components/Shortcuts/Shortcuts.tsx +151 -151
  80. package/src/components/Shortcuts/ShortcutsSetter.tsx +132 -132
  81. package/src/components/Shortcuts/SingleShortcut.ts +62 -62
  82. package/src/components/SimpleProgressBar.tsx +62 -62
  83. package/src/components/SkillProgressBar.tsx +133 -133
  84. package/src/components/SkillsContainer.tsx +198 -200
  85. package/src/components/Spellbook/Spell.tsx +201 -201
  86. package/src/components/Spellbook/Spellbook.tsx +150 -150
  87. package/src/components/Spellbook/constants.ts +8 -8
  88. package/src/components/Spellbook/mockSpells.ts +60 -60
  89. package/src/components/StaticBook/StaticBook.tsx +103 -103
  90. package/src/components/TextArea.tsx +11 -11
  91. package/src/components/TimeWidget/DayNightPeriod/DayNightPeriod.tsx +35 -35
  92. package/src/components/TimeWidget/TimeWidget.tsx +63 -63
  93. package/src/components/TradingMenu/TradingItemRow.tsx +195 -181
  94. package/src/components/TradingMenu/TradingMenu.tsx +211 -203
  95. package/src/components/TradingMenu/items.mock.ts +48 -96
  96. package/src/components/Truncate.tsx +25 -25
  97. package/src/components/itemSelector/ItemSelector.tsx +136 -136
  98. package/src/components/shared/Column.tsx +16 -16
  99. package/src/components/shared/Ellipsis.tsx +65 -65
  100. package/src/components/shared/SpriteFromAtlas.tsx +104 -102
  101. package/src/components/typography/DynamicText.tsx +49 -49
  102. package/src/constants/uiColors.ts +20 -20
  103. package/src/constants/uiDevices.ts +3 -3
  104. package/src/constants/uiFonts.ts +12 -12
  105. package/src/hooks/useEventListener.ts +21 -21
  106. package/src/hooks/useOutsideAlerter.ts +25 -25
  107. package/src/index.tsx +40 -40
  108. package/src/libs/StringHelpers.ts +3 -3
  109. package/src/mocks/atlas/entities/entities.json +20215 -20215
  110. package/src/mocks/atlas/icons/icons.json +735 -735
  111. package/src/mocks/atlas/items/items.json +12086 -12086
  112. package/src/mocks/equipmentSet.mocks.ts +391 -393
  113. package/src/mocks/itemContainer.mocks.ts +563 -562
  114. package/src/mocks/skills.mocks.ts +128 -128
  115. package/src/stories/Arrow.stories.tsx +26 -26
  116. package/src/stories/Button.stories.tsx +36 -36
  117. package/src/stories/CharacterSelection.stories.tsx +45 -45
  118. package/src/stories/CharacterStatus.stories.tsx +29 -29
  119. package/src/stories/Chat.stories.tsx +187 -187
  120. package/src/stories/ChatDeprecated.stories.tsx +170 -170
  121. package/src/stories/CheckButton.stories.tsx +48 -48
  122. package/src/stories/CircullarController.stories.tsx +37 -37
  123. package/src/stories/CraftBook.stories.tsx +42 -40
  124. package/src/stories/DayNightPeriod.stories.tsx +27 -27
  125. package/src/stories/DraggableContainer.stories.tsx +28 -28
  126. package/src/stories/Dropdown.stories.tsx +46 -46
  127. package/src/stories/DropdownSelectorContainer.stories.tsx +41 -41
  128. package/src/stories/EquipmentSet.stories.tsx +65 -65
  129. package/src/stories/HistoryDialog.stories.tsx +61 -61
  130. package/src/stories/ItemContainer.stories.tsx +200 -198
  131. package/src/stories/ItemInfoDisplay.stories.tsx +33 -0
  132. package/src/stories/ItemQuantitySelector.stories.tsx +26 -26
  133. package/src/stories/ItemSelector.stories.tsx +77 -77
  134. package/src/stories/ItemTradingComponent.stories.tsx +35 -35
  135. package/src/stories/ListMenu.stories.tsx +56 -56
  136. package/src/stories/Multitab.stories.tsx +51 -51
  137. package/src/stories/NPCDialog.stories.tsx +130 -130
  138. package/src/stories/NPCMultiDialog.stories.tsx +71 -71
  139. package/src/stories/ProgressBar.stories.tsx +23 -23
  140. package/src/stories/PropertySelect.stories.tsx +40 -40
  141. package/src/stories/QuestInfo.stories.tsx +107 -107
  142. package/src/stories/QuestList.stories.tsx +82 -82
  143. package/src/stories/RPGUIContainers.stories.tsx +42 -42
  144. package/src/stories/RadioButton.stories.tsx +49 -49
  145. package/src/stories/RadioInput.stories.tsx +34 -34
  146. package/src/stories/RangeSlider.stories.tsx +64 -64
  147. package/src/stories/ScrollList.stories.tsx +85 -85
  148. package/src/stories/Shortcuts.stories.tsx +39 -39
  149. package/src/stories/SimpleProgressBar.stories.tsx +22 -22
  150. package/src/stories/SkillProgressBar.stories.tsx +34 -34
  151. package/src/stories/SkillsContainer.stories.tsx +35 -35
  152. package/src/stories/Spellbook.stories.tsx +104 -104
  153. package/src/stories/StaticBook.stories.tsx +32 -32
  154. package/src/stories/Text.stories.tsx +42 -42
  155. package/src/stories/TimeWidget.stories.tsx +27 -27
  156. package/src/stories/TradingMenu.stories.tsx +47 -45
  157. package/src/types/eventTypes.ts +4 -4
  158. package/src/types/index.d.ts +2 -2
@@ -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
+ };