@rpg-engine/long-bow 0.3.49 → 0.3.51

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