@rpg-engine/long-bow 0.3.46 → 0.3.47

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 (139) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +181 -181
  3. package/dist/long-bow.cjs.development.js +705 -709
  4. package/dist/long-bow.cjs.development.js.map +1 -1
  5. package/dist/long-bow.cjs.production.min.js +1 -1
  6. package/dist/long-bow.cjs.production.min.js.map +1 -1
  7. package/dist/long-bow.esm.js +708 -712
  8. package/dist/long-bow.esm.js.map +1 -1
  9. package/package.json +100 -101
  10. package/src/components/Abstractions/SlotsContainer.tsx +45 -45
  11. package/src/components/Arrow/SelectArrow.tsx +65 -65
  12. package/src/components/Arrow/img/arrow01-left-clicked.png +0 -0
  13. package/src/components/Arrow/img/arrow01-left.png +0 -0
  14. package/src/components/Arrow/img/arrow01-right-clicked.png +0 -0
  15. package/src/components/Arrow/img/arrow01-right.png +0 -0
  16. package/src/components/Arrow/img/arrow02-left-clicked.png +0 -0
  17. package/src/components/Arrow/img/arrow02-left.png +0 -0
  18. package/src/components/Arrow/img/arrow02-right-clicked.png +0 -0
  19. package/src/components/Arrow/img/arrow02-right.png +0 -0
  20. package/src/components/Button.tsx +41 -41
  21. package/src/components/Character/CharacterSelection.tsx +96 -96
  22. package/src/components/Chat/Chat.tsx +194 -194
  23. package/src/components/Chatdeprecated/ChatDeprecated.tsx +200 -200
  24. package/src/components/CheckButton.tsx +65 -65
  25. package/src/components/CircularController/CircularController.tsx +162 -162
  26. package/src/components/CraftBook/CraftBook.tsx +230 -230
  27. package/src/components/CraftBook/MockItems.ts +46 -46
  28. package/src/components/DraggableContainer.tsx +154 -154
  29. package/src/components/Dropdown.tsx +96 -96
  30. package/src/components/DropdownSelectorContainer.tsx +42 -42
  31. package/src/components/Equipment/EquipmentSet.tsx +190 -190
  32. package/src/components/HistoryDialog.tsx +104 -104
  33. package/src/components/Input.tsx +15 -15
  34. package/src/components/Item/Cards/ItemTooltip.tsx +33 -33
  35. package/src/components/Item/Inventory/ErrorBoundary.tsx +42 -42
  36. package/src/components/Item/Inventory/ItemContainer.tsx +175 -175
  37. package/src/components/Item/Inventory/ItemContainerTypes.ts +6 -6
  38. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +142 -142
  39. package/src/components/Item/Inventory/ItemSlot.tsx +465 -466
  40. package/src/components/Item/Inventory/itemContainerHelper.ts +156 -156
  41. package/src/components/ListMenu.tsx +63 -63
  42. package/src/components/Multitab/Tab.tsx +57 -57
  43. package/src/components/Multitab/TabBody.tsx +13 -13
  44. package/src/components/Multitab/TabsContainer.tsx +97 -97
  45. package/src/components/NPCDialog/NPCDialog.tsx +121 -121
  46. package/src/components/NPCDialog/NPCDialogText.tsx +113 -113
  47. package/src/components/NPCDialog/NPCMultiDialog.tsx +159 -159
  48. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +237 -237
  49. package/src/components/ProgressBar.tsx +92 -92
  50. package/src/components/PropertySelect/PropertySelect.tsx +114 -114
  51. package/src/components/QuestInfo/QuestInfo.tsx +232 -232
  52. package/src/components/QuestList.tsx +129 -129
  53. package/src/components/RPGUIContainer.tsx +47 -47
  54. package/src/components/RPGUIForceRenderStart.tsx +45 -45
  55. package/src/components/RPGUIRoot.tsx +14 -14
  56. package/src/components/RadioButton.tsx +53 -53
  57. package/src/components/RadioInput/RadioButton.tsx +98 -98
  58. package/src/components/RadioInput/RadioInput.tsx +98 -98
  59. package/src/components/RadioInput/instruments.ts +15 -15
  60. package/src/components/RangeSlider.tsx +78 -78
  61. package/src/components/RelativeListMenu.tsx +83 -83
  62. package/src/components/ScrollList.tsx +79 -79
  63. package/src/components/SimpleProgressBar.tsx +62 -62
  64. package/src/components/SkillProgressBar.tsx +133 -133
  65. package/src/components/SkillsContainer.tsx +167 -167
  66. package/src/components/Spellbook/QuickSpells.tsx +120 -120
  67. package/src/components/Spellbook/Spell.tsx +201 -201
  68. package/src/components/Spellbook/Spellbook.tsx +144 -144
  69. package/src/components/Spellbook/SpellbookShortcuts.tsx +77 -77
  70. package/src/components/Spellbook/constants.ts +12 -12
  71. package/src/components/Spellbook/mockSpells.ts +60 -60
  72. package/src/components/StaticBook/StaticBook.tsx +105 -105
  73. package/src/components/TextArea.tsx +11 -11
  74. package/src/components/TimeWidget/DayNightPeriod/DayNightPeriod.tsx +35 -35
  75. package/src/components/TimeWidget/TimeWidget.tsx +63 -63
  76. package/src/components/TradingMenu/TradingItemRow.tsx +197 -197
  77. package/src/components/TradingMenu/TradingMenu.tsx +203 -203
  78. package/src/components/TradingMenu/items.mock.ts +36 -36
  79. package/src/components/Truncate.tsx +25 -25
  80. package/src/components/itemSelector/ItemSelector.tsx +136 -136
  81. package/src/components/shared/Column.tsx +16 -16
  82. package/src/components/shared/Ellipsis.tsx +65 -65
  83. package/src/components/shared/SpriteFromAtlas.tsx +102 -102
  84. package/src/components/typography/DynamicText.tsx +49 -49
  85. package/src/constants/uiColors.ts +20 -20
  86. package/src/constants/uiDevices.ts +3 -5
  87. package/src/constants/uiFonts.ts +12 -12
  88. package/src/hooks/useEventListener.ts +21 -21
  89. package/src/hooks/useOutsideAlerter.ts +25 -25
  90. package/src/index.tsx +40 -40
  91. package/src/libs/StringHelpers.ts +3 -3
  92. package/src/mocks/atlas/entities/entities.json +20215 -20215
  93. package/src/mocks/atlas/icons/icons.json +735 -735
  94. package/src/mocks/atlas/items/items.json +12086 -12086
  95. package/src/mocks/equipmentSet.mocks.ts +393 -393
  96. package/src/mocks/itemContainer.mocks.ts +560 -560
  97. package/src/mocks/skills.mocks.ts +128 -128
  98. package/src/stories/Arrow.stories.tsx +26 -26
  99. package/src/stories/Button.stories.tsx +36 -36
  100. package/src/stories/CharacterSelection.stories.tsx +45 -45
  101. package/src/stories/Chat.stories.tsx +187 -187
  102. package/src/stories/ChatDeprecated.stories.tsx +170 -170
  103. package/src/stories/CheckButton.stories.tsx +48 -48
  104. package/src/stories/CircullarController.stories.tsx +33 -33
  105. package/src/stories/CraftBook.stories.tsx +40 -40
  106. package/src/stories/DayNightPeriod.stories.tsx +27 -27
  107. package/src/stories/DraggableContainer.stories.tsx +28 -28
  108. package/src/stories/Dropdown.stories.tsx +46 -46
  109. package/src/stories/DropdownSelectorContainer.stories.tsx +41 -41
  110. package/src/stories/EquipmentSet.stories.tsx +65 -65
  111. package/src/stories/HistoryDialog.stories.tsx +61 -61
  112. package/src/stories/ItemContainer.stories.tsx +124 -124
  113. package/src/stories/ItemQuantitySelector.stories.tsx +26 -26
  114. package/src/stories/ItemSelector.stories.tsx +77 -77
  115. package/src/stories/ItemTradingComponent.stories.tsx +35 -35
  116. package/src/stories/ListMenu.stories.tsx +56 -56
  117. package/src/stories/Multitab.stories.tsx +51 -51
  118. package/src/stories/NPCDialog.stories.tsx +130 -130
  119. package/src/stories/NPCMultiDialog.stories.tsx +71 -71
  120. package/src/stories/ProgressBar.stories.tsx +23 -23
  121. package/src/stories/PropertySelect.stories.tsx +40 -40
  122. package/src/stories/QuestInfo.stories.tsx +107 -107
  123. package/src/stories/QuestList.stories.tsx +82 -82
  124. package/src/stories/QuickSpells.stories.tsx +38 -38
  125. package/src/stories/RPGUIContainers.stories.tsx +42 -42
  126. package/src/stories/RadioButton.stories.tsx +49 -49
  127. package/src/stories/RadioInput.stories.tsx +34 -34
  128. package/src/stories/RangeSlider.stories.tsx +64 -64
  129. package/src/stories/ScrollList.stories.tsx +85 -85
  130. package/src/stories/SimpleProgressBar.stories.tsx +22 -22
  131. package/src/stories/SkillProgressBar.stories.tsx +34 -34
  132. package/src/stories/SkillsContainer.stories.tsx +35 -35
  133. package/src/stories/Spellbook.stories.tsx +107 -107
  134. package/src/stories/StaticBook.stories.tsx +32 -32
  135. package/src/stories/Text.stories.tsx +42 -42
  136. package/src/stories/TimeWidget.stories.tsx +27 -27
  137. package/src/stories/TradingMenu.stories.tsx +45 -45
  138. package/src/types/eventTypes.ts +4 -4
  139. package/src/types/index.d.ts +2 -2
@@ -1,51 +1,51 @@
1
- import { Meta, Story } from '@storybook/react';
2
- import React from 'react';
3
- import { TabBody } from '../../src/components/Multitab/TabBody';
4
- import {
5
- ITabsContainer,
6
- MultitabType,
7
- TabsContainer,
8
- } from '../../src/components/Multitab/TabsContainer';
9
- import { RPGUIRoot } from '../../src/components/RPGUIRoot';
10
-
11
- const meta: Meta = {
12
- title: 'MultiTabs',
13
- component: TabsContainer,
14
- };
15
-
16
- export default meta;
17
-
18
- const Template: Story<ITabsContainer> = args => (
19
- <RPGUIRoot>
20
- <TabsContainer {...args}>
21
- <TabBody id="animal">
22
- <p>Animals content here</p>
23
- </TabBody>
24
- <TabBody id="plant">
25
- <p>Plant content here</p>
26
- </TabBody>
27
- </TabsContainer>
28
- </RPGUIRoot>
29
- );
30
-
31
- export const Brown = Template.bind({});
32
-
33
- Brown.args = {
34
- type: MultitabType.Brown,
35
- onCloseButton: () => console.log('close tab'),
36
- tabs: [
37
- { label: 'Animal', id: 'animal' },
38
- { label: 'Plant', id: 'plant' },
39
- ],
40
- };
41
-
42
- export const Gray = Template.bind({});
43
-
44
- Gray.args = {
45
- type: MultitabType.Gray,
46
- onCloseButton: () => console.log('close tab'),
47
- tabs: [
48
- { label: 'Animal', id: 'animal' },
49
- { label: 'Plant', id: 'plant' },
50
- ],
51
- };
1
+ import { Meta, Story } from '@storybook/react';
2
+ import React from 'react';
3
+ import { TabBody } from '../../src/components/Multitab/TabBody';
4
+ import {
5
+ ITabsContainer,
6
+ MultitabType,
7
+ TabsContainer,
8
+ } from '../../src/components/Multitab/TabsContainer';
9
+ import { RPGUIRoot } from '../../src/components/RPGUIRoot';
10
+
11
+ const meta: Meta = {
12
+ title: 'MultiTabs',
13
+ component: TabsContainer,
14
+ };
15
+
16
+ export default meta;
17
+
18
+ const Template: Story<ITabsContainer> = args => (
19
+ <RPGUIRoot>
20
+ <TabsContainer {...args}>
21
+ <TabBody id="animal">
22
+ <p>Animals content here</p>
23
+ </TabBody>
24
+ <TabBody id="plant">
25
+ <p>Plant content here</p>
26
+ </TabBody>
27
+ </TabsContainer>
28
+ </RPGUIRoot>
29
+ );
30
+
31
+ export const Brown = Template.bind({});
32
+
33
+ Brown.args = {
34
+ type: MultitabType.Brown,
35
+ onCloseButton: () => console.log('close tab'),
36
+ tabs: [
37
+ { label: 'Animal', id: 'animal' },
38
+ { label: 'Plant', id: 'plant' },
39
+ ],
40
+ };
41
+
42
+ export const Gray = Template.bind({});
43
+
44
+ Gray.args = {
45
+ type: MultitabType.Gray,
46
+ onCloseButton: () => console.log('close tab'),
47
+ tabs: [
48
+ { label: 'Animal', id: 'animal' },
49
+ { label: 'Plant', id: 'plant' },
50
+ ],
51
+ };
@@ -1,130 +1,130 @@
1
- import { Meta, Story } from '@storybook/react';
2
- import React from 'react';
3
- import {
4
- INPCDialogProps,
5
- NPCDialog,
6
- NPCDialogType,
7
- } from '../../src/components/NPCDialog/NPCDialog';
8
- import {
9
- IQuestionDialog,
10
- IQuestionDialogAnswer,
11
- } from '../../src/components/NPCDialog/QuestionDialog/QuestionDialog';
12
- import { RPGUIRoot } from '../../src/components/RPGUIRoot';
13
-
14
- const meta: Meta = {
15
- title: 'NPC Dialog',
16
- component: NPCDialog,
17
- argTypes: {
18
- text: {
19
- control: {
20
- type: 'text',
21
- },
22
- },
23
-
24
- type: {
25
- control: {
26
- type: 'select',
27
- labels: {
28
- [NPCDialogType.TextOnly]: 'Text Only',
29
- [NPCDialogType.TextAndThumbnail]: 'Text and Thumbnail',
30
- },
31
- },
32
- },
33
- },
34
- parameters: {
35
- controls: { expanded: true },
36
- },
37
- };
38
-
39
- export default meta;
40
-
41
- const Template: Story<INPCDialogProps> = args => (
42
- <RPGUIRoot>
43
- <NPCDialog {...args} />
44
- </RPGUIRoot>
45
- );
46
-
47
- // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
48
- // https://storybook.js.org/docs/react/workflows/unit-testing
49
- export const TextAndThumbnail = Template.bind({});
50
-
51
- TextAndThumbnail.args = {
52
- text: `This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player.`,
53
- type: NPCDialogType.TextAndThumbnail,
54
- };
55
-
56
- export const TextOnly = Template.bind({});
57
-
58
- TextOnly.args = {
59
- text: `This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player.`,
60
- type: NPCDialogType.TextOnly,
61
- };
62
-
63
- export const Question = Template.bind({});
64
-
65
- const answers: IQuestionDialogAnswer[] = [
66
- {
67
- id: 1,
68
- text: 'I have lived here all my life',
69
- nextQuestionId: 2,
70
- },
71
- {
72
- id: 2,
73
- text: 'I came here from Newton',
74
- nextQuestionId: 3,
75
- },
76
- {
77
- id: 3,
78
- text: 'Oops! I mean, SpringVille!',
79
- nextQuestionId: 2,
80
- },
81
- {
82
- id: 4,
83
- text: 'I havent heard about any trouble',
84
- nextQuestionId: 4,
85
- },
86
- {
87
- id: 5,
88
- text: 'Who came here to die',
89
- nextQuestionId: 4,
90
- },
91
- {
92
- id: 6,
93
- text: 'Who came here to live',
94
- nextQuestionId: 4,
95
- },
96
- ];
97
-
98
- const questions: IQuestionDialog[] = [
99
- {
100
- id: 1,
101
- text: `You dont Look Like from around here. Aren't you?`,
102
- answerIds: [1, 2],
103
- },
104
- {
105
- id: 2,
106
- text: 'Oh really!! then You must know my Bowler!',
107
- answerIds: [5, 6],
108
- },
109
- {
110
- id: 3,
111
- text: 'Newton!! I heard there is trouble brewing down here!!',
112
- answerIds: [3, 4],
113
- },
114
- {
115
- id: 4,
116
- text:
117
- 'Dont you worry about it, say thats you have something to eat. Im starving',
118
- },
119
- {
120
- id: 5,
121
- text: 'You are a liar! there aint mr Browler! I made it',
122
- },
123
- ];
124
-
125
- Question.args = {
126
- type: NPCDialogType.TextAndThumbnail,
127
- questions,
128
- answers,
129
- isQuestionDialog: true,
130
- };
1
+ import { Meta, Story } from '@storybook/react';
2
+ import React from 'react';
3
+ import {
4
+ INPCDialogProps,
5
+ NPCDialog,
6
+ NPCDialogType,
7
+ } from '../../src/components/NPCDialog/NPCDialog';
8
+ import {
9
+ IQuestionDialog,
10
+ IQuestionDialogAnswer,
11
+ } from '../../src/components/NPCDialog/QuestionDialog/QuestionDialog';
12
+ import { RPGUIRoot } from '../../src/components/RPGUIRoot';
13
+
14
+ const meta: Meta = {
15
+ title: 'NPC Dialog',
16
+ component: NPCDialog,
17
+ argTypes: {
18
+ text: {
19
+ control: {
20
+ type: 'text',
21
+ },
22
+ },
23
+
24
+ type: {
25
+ control: {
26
+ type: 'select',
27
+ labels: {
28
+ [NPCDialogType.TextOnly]: 'Text Only',
29
+ [NPCDialogType.TextAndThumbnail]: 'Text and Thumbnail',
30
+ },
31
+ },
32
+ },
33
+ },
34
+ parameters: {
35
+ controls: { expanded: true },
36
+ },
37
+ };
38
+
39
+ export default meta;
40
+
41
+ const Template: Story<INPCDialogProps> = args => (
42
+ <RPGUIRoot>
43
+ <NPCDialog {...args} />
44
+ </RPGUIRoot>
45
+ );
46
+
47
+ // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
48
+ // https://storybook.js.org/docs/react/workflows/unit-testing
49
+ export const TextAndThumbnail = Template.bind({});
50
+
51
+ TextAndThumbnail.args = {
52
+ text: `This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player.`,
53
+ type: NPCDialogType.TextAndThumbnail,
54
+ };
55
+
56
+ export const TextOnly = Template.bind({});
57
+
58
+ TextOnly.args = {
59
+ text: `This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player.`,
60
+ type: NPCDialogType.TextOnly,
61
+ };
62
+
63
+ export const Question = Template.bind({});
64
+
65
+ const answers: IQuestionDialogAnswer[] = [
66
+ {
67
+ id: 1,
68
+ text: 'I have lived here all my life',
69
+ nextQuestionId: 2,
70
+ },
71
+ {
72
+ id: 2,
73
+ text: 'I came here from Newton',
74
+ nextQuestionId: 3,
75
+ },
76
+ {
77
+ id: 3,
78
+ text: 'Oops! I mean, SpringVille!',
79
+ nextQuestionId: 2,
80
+ },
81
+ {
82
+ id: 4,
83
+ text: 'I havent heard about any trouble',
84
+ nextQuestionId: 4,
85
+ },
86
+ {
87
+ id: 5,
88
+ text: 'Who came here to die',
89
+ nextQuestionId: 4,
90
+ },
91
+ {
92
+ id: 6,
93
+ text: 'Who came here to live',
94
+ nextQuestionId: 4,
95
+ },
96
+ ];
97
+
98
+ const questions: IQuestionDialog[] = [
99
+ {
100
+ id: 1,
101
+ text: `You dont Look Like from around here. Aren't you?`,
102
+ answerIds: [1, 2],
103
+ },
104
+ {
105
+ id: 2,
106
+ text: 'Oh really!! then You must know my Bowler!',
107
+ answerIds: [5, 6],
108
+ },
109
+ {
110
+ id: 3,
111
+ text: 'Newton!! I heard there is trouble brewing down here!!',
112
+ answerIds: [3, 4],
113
+ },
114
+ {
115
+ id: 4,
116
+ text:
117
+ 'Dont you worry about it, say thats you have something to eat. Im starving',
118
+ },
119
+ {
120
+ id: 5,
121
+ text: 'You are a liar! there aint mr Browler! I made it',
122
+ },
123
+ ];
124
+
125
+ Question.args = {
126
+ type: NPCDialogType.TextAndThumbnail,
127
+ questions,
128
+ answers,
129
+ isQuestionDialog: true,
130
+ };
@@ -1,71 +1,71 @@
1
- import { Meta, Story } from '@storybook/react';
2
- import React from 'react';
3
- import { RPGUIRoot } from '../../src/components/RPGUIRoot';
4
- import aliceDefaultThumbnail from '../components/NPCDialog/img/npcDialog/npcThumbnails/alice.png';
5
- import {
6
- ImgSide,
7
- INPCMultiDialogProps,
8
- NPCMultiDialog,
9
- NPCMultiDialogType,
10
- } from '../components/NPCDialog/NPCMultiDialog';
11
-
12
- const meta: Meta = {
13
- title: 'NPC MultiDialog',
14
- component: NPCMultiDialog,
15
- argTypes: {
16
- text: {
17
- control: {
18
- type: 'text',
19
- },
20
- },
21
- // ImgSide: {
22
- // control: {
23
- // type: 'select',
24
- // label: {
25
- // [ImgSide.right]: 'right',
26
- // [ImgSide.left]: 'left',
27
- // },
28
- // },
29
- // },
30
- imagePath: {
31
- control: {
32
- type: 'text',
33
- },
34
- },
35
- },
36
- };
37
-
38
- export default meta;
39
-
40
- const Template: Story<INPCMultiDialogProps> = args => (
41
- <RPGUIRoot>
42
- <NPCMultiDialog {...args} />
43
- </RPGUIRoot>
44
- );
45
-
46
- export const NPCMultiDialogStore = Template.bind({});
47
-
48
- // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
49
- // https://storybook.js.org/docs/react/workflows/unit-testing
50
-
51
- const textAndTypeArray: NPCMultiDialogType[] = [
52
- {
53
- text: 'I have lived here all my life',
54
- imagePath: aliceDefaultThumbnail,
55
- imageSide: ImgSide.right,
56
- },
57
- {
58
- text: 'I have lived here all my life',
59
- imagePath: aliceDefaultThumbnail,
60
- imageSide: ImgSide.left,
61
- },
62
- {
63
- text: 'I have lived here all my life',
64
- imagePath: aliceDefaultThumbnail,
65
- imageSide: ImgSide.right,
66
- },
67
- ];
68
-
69
- NPCMultiDialogStore.args = {
70
- textAndTypeArray,
71
- };
1
+ import { Meta, Story } from '@storybook/react';
2
+ import React from 'react';
3
+ import { RPGUIRoot } from '../../src/components/RPGUIRoot';
4
+ import aliceDefaultThumbnail from '../components/NPCDialog/img/npcDialog/npcThumbnails/alice.png';
5
+ import {
6
+ ImgSide,
7
+ INPCMultiDialogProps,
8
+ NPCMultiDialog,
9
+ NPCMultiDialogType,
10
+ } from '../components/NPCDialog/NPCMultiDialog';
11
+
12
+ const meta: Meta = {
13
+ title: 'NPC MultiDialog',
14
+ component: NPCMultiDialog,
15
+ argTypes: {
16
+ text: {
17
+ control: {
18
+ type: 'text',
19
+ },
20
+ },
21
+ // ImgSide: {
22
+ // control: {
23
+ // type: 'select',
24
+ // label: {
25
+ // [ImgSide.right]: 'right',
26
+ // [ImgSide.left]: 'left',
27
+ // },
28
+ // },
29
+ // },
30
+ imagePath: {
31
+ control: {
32
+ type: 'text',
33
+ },
34
+ },
35
+ },
36
+ };
37
+
38
+ export default meta;
39
+
40
+ const Template: Story<INPCMultiDialogProps> = args => (
41
+ <RPGUIRoot>
42
+ <NPCMultiDialog {...args} />
43
+ </RPGUIRoot>
44
+ );
45
+
46
+ export const NPCMultiDialogStore = Template.bind({});
47
+
48
+ // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
49
+ // https://storybook.js.org/docs/react/workflows/unit-testing
50
+
51
+ const textAndTypeArray: NPCMultiDialogType[] = [
52
+ {
53
+ text: 'I have lived here all my life',
54
+ imagePath: aliceDefaultThumbnail,
55
+ imageSide: ImgSide.right,
56
+ },
57
+ {
58
+ text: 'I have lived here all my life',
59
+ imagePath: aliceDefaultThumbnail,
60
+ imageSide: ImgSide.left,
61
+ },
62
+ {
63
+ text: 'I have lived here all my life',
64
+ imagePath: aliceDefaultThumbnail,
65
+ imageSide: ImgSide.right,
66
+ },
67
+ ];
68
+
69
+ NPCMultiDialogStore.args = {
70
+ textAndTypeArray,
71
+ };
@@ -1,23 +1,23 @@
1
- import { Story } from '@storybook/react';
2
- import React from 'react';
3
- import { IBarProps, ProgressBar } from '../../src/components/ProgressBar';
4
- import { RPGUIRoot } from '../../src/components/RPGUIRoot';
5
-
6
- export default {
7
- title: 'Progress Bar',
8
- component: ProgressBar,
9
- };
10
-
11
- const Template: Story<IBarProps> = args => (
12
- <RPGUIRoot>
13
- <ProgressBar {...args} />
14
- </RPGUIRoot>
15
- );
16
-
17
- export const Default = Template.bind({});
18
-
19
- Default.args = {
20
- max: 100,
21
- value: 30,
22
- color: 'blue',
23
- };
1
+ import { Story } from '@storybook/react';
2
+ import React from 'react';
3
+ import { IBarProps, ProgressBar } from '../../src/components/ProgressBar';
4
+ import { RPGUIRoot } from '../../src/components/RPGUIRoot';
5
+
6
+ export default {
7
+ title: 'Progress Bar',
8
+ component: ProgressBar,
9
+ };
10
+
11
+ const Template: Story<IBarProps> = args => (
12
+ <RPGUIRoot>
13
+ <ProgressBar {...args} />
14
+ </RPGUIRoot>
15
+ );
16
+
17
+ export const Default = Template.bind({});
18
+
19
+ Default.args = {
20
+ max: 100,
21
+ value: 30,
22
+ color: 'blue',
23
+ };
@@ -1,40 +1,40 @@
1
- import { Meta, Story } from '@storybook/react';
2
- import React from 'react';
3
- import { RPGUIRoot } from '..';
4
- import PropertySelect, {
5
- IPropertySelectProps,
6
- } from '../components/PropertySelect/PropertySelect';
7
-
8
- const meta: Meta = {
9
- title: 'Property Select',
10
- component: PropertySelect,
11
- };
12
-
13
- export default meta;
14
-
15
- const Template: Story<IPropertySelectProps> = args => (
16
- <RPGUIRoot>
17
- <PropertySelect {...args} />
18
- </RPGUIRoot>
19
- );
20
-
21
- export const Default = Template.bind({});
22
-
23
- const propertiesMock = [
24
- {
25
- id: '2b716274-b19c-451d-9561-16bca8c6a12d',
26
- name: 'Vegetables',
27
- },
28
- {
29
- id: '536789bd-38fb-48f9-8903-dad86f276d47',
30
- name: 'Counseling',
31
- },
32
- {
33
- id: '80f07029-b907-4fae-872e-4f2b569f81c9',
34
- name: 'Through',
35
- },
36
- ];
37
-
38
- Default.args = {
39
- availableProperties: propertiesMock,
40
- };
1
+ import { Meta, Story } from '@storybook/react';
2
+ import React from 'react';
3
+ import { RPGUIRoot } from '..';
4
+ import PropertySelect, {
5
+ IPropertySelectProps,
6
+ } from '../components/PropertySelect/PropertySelect';
7
+
8
+ const meta: Meta = {
9
+ title: 'Property Select',
10
+ component: PropertySelect,
11
+ };
12
+
13
+ export default meta;
14
+
15
+ const Template: Story<IPropertySelectProps> = args => (
16
+ <RPGUIRoot>
17
+ <PropertySelect {...args} />
18
+ </RPGUIRoot>
19
+ );
20
+
21
+ export const Default = Template.bind({});
22
+
23
+ const propertiesMock = [
24
+ {
25
+ id: '2b716274-b19c-451d-9561-16bca8c6a12d',
26
+ name: 'Vegetables',
27
+ },
28
+ {
29
+ id: '536789bd-38fb-48f9-8903-dad86f276d47',
30
+ name: 'Counseling',
31
+ },
32
+ {
33
+ id: '80f07029-b907-4fae-872e-4f2b569f81c9',
34
+ name: 'Through',
35
+ },
36
+ ];
37
+
38
+ Default.args = {
39
+ availableProperties: propertiesMock,
40
+ };