@rpg-engine/long-bow 0.3.82 → 0.3.83

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