@rpg-engine/long-bow 0.3.53 → 0.3.55

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