@rpg-engine/long-bow 0.3.50 → 0.3.52

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