@rpg-engine/long-bow 0.3.82 → 0.3.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (155) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +181 -181
  3. package/dist/components/Abstractions/SlotsContainer.d.ts +2 -0
  4. package/dist/components/DraggableContainer.d.ts +2 -0
  5. package/dist/components/Equipment/EquipmentSet.d.ts +2 -0
  6. package/dist/components/Item/Inventory/ItemContainer.d.ts +3 -0
  7. package/dist/components/Item/Inventory/ItemSlot.d.ts +1 -0
  8. package/dist/components/Item/Inventory/itemContainerHelper.d.ts +1 -1
  9. package/dist/components/RelativeListMenu.d.ts +4 -0
  10. package/dist/long-bow.cjs.development.js +944 -858
  11. package/dist/long-bow.cjs.development.js.map +1 -1
  12. package/dist/long-bow.cjs.production.min.js +1 -1
  13. package/dist/long-bow.cjs.production.min.js.map +1 -1
  14. package/dist/long-bow.esm.js +830 -744
  15. package/dist/long-bow.esm.js.map +1 -1
  16. package/package.json +100 -100
  17. package/src/components/Abstractions/ModalPortal.tsx +22 -22
  18. package/src/components/Abstractions/SlotsContainer.tsx +62 -48
  19. package/src/components/Arrow/SelectArrow.tsx +69 -69
  20. package/src/components/Arrow/img/arrow01-left-clicked.png +0 -0
  21. package/src/components/Arrow/img/arrow01-left.png +0 -0
  22. package/src/components/Arrow/img/arrow01-right-clicked.png +0 -0
  23. package/src/components/Arrow/img/arrow01-right.png +0 -0
  24. package/src/components/Arrow/img/arrow02-left-clicked.png +0 -0
  25. package/src/components/Arrow/img/arrow02-left.png +0 -0
  26. package/src/components/Arrow/img/arrow02-right-clicked.png +0 -0
  27. package/src/components/Arrow/img/arrow02-right.png +0 -0
  28. package/src/components/Button.tsx +40 -40
  29. package/src/components/Character/CharacterSelection.tsx +96 -96
  30. package/src/components/CharacterStatus/CharacterStatus.tsx +120 -120
  31. package/src/components/Chat/Chat.tsx +196 -196
  32. package/src/components/Chatdeprecated/ChatDeprecated.tsx +198 -198
  33. package/src/components/CheckButton.tsx +65 -65
  34. package/src/components/CircularController/CircularController.tsx +248 -248
  35. package/src/components/CraftBook/CraftBook.tsx +241 -241
  36. package/src/components/CraftBook/MockItems.ts +77 -77
  37. package/src/components/DraggableContainer.tsx +176 -156
  38. package/src/components/Dropdown.tsx +90 -90
  39. package/src/components/DropdownSelectorContainer.tsx +42 -42
  40. package/src/components/Equipment/EquipmentSet.tsx +199 -191
  41. package/src/components/HistoryDialog.tsx +104 -104
  42. package/src/components/Input.tsx +15 -15
  43. package/src/components/Item/Cards/ItemInfo.tsx +252 -252
  44. package/src/components/Item/Cards/ItemInfoDisplay.tsx +128 -128
  45. package/src/components/Item/Cards/ItemInfoWrapper.tsx +62 -62
  46. package/src/components/Item/Cards/ItemTooltip.tsx +83 -83
  47. package/src/components/Item/Cards/MobileItemTooltip.tsx +149 -149
  48. package/src/components/Item/Inventory/ErrorBoundary.tsx +42 -42
  49. package/src/components/Item/Inventory/ItemContainer.tsx +227 -218
  50. package/src/components/Item/Inventory/ItemContainerTypes.ts +6 -6
  51. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +138 -138
  52. package/src/components/Item/Inventory/ItemSlot.tsx +564 -546
  53. package/src/components/Item/Inventory/itemContainerHelper.ts +172 -156
  54. package/src/components/ListMenu.tsx +63 -63
  55. package/src/components/Multitab/Tab.tsx +66 -66
  56. package/src/components/Multitab/TabBody.tsx +13 -13
  57. package/src/components/Multitab/TabsContainer.tsx +97 -97
  58. package/src/components/NPCDialog/NPCDialog.tsx +121 -121
  59. package/src/components/NPCDialog/NPCDialogText.tsx +113 -113
  60. package/src/components/NPCDialog/NPCMultiDialog.tsx +159 -159
  61. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +237 -237
  62. package/src/components/ProgressBar.tsx +92 -92
  63. package/src/components/PropertySelect/PropertySelect.tsx +106 -106
  64. package/src/components/QuestInfo/QuestInfo.tsx +233 -233
  65. package/src/components/QuestList.tsx +135 -135
  66. package/src/components/RPGUIContainer.tsx +47 -47
  67. package/src/components/RPGUIForceRenderStart.tsx +45 -45
  68. package/src/components/RPGUIRoot.tsx +14 -14
  69. package/src/components/RadioButton.tsx +53 -53
  70. package/src/components/RadioInput/RadioButton.tsx +96 -96
  71. package/src/components/RadioInput/RadioInput.tsx +102 -102
  72. package/src/components/RadioInput/instruments.ts +15 -15
  73. package/src/components/RangeSlider.tsx +78 -78
  74. package/src/components/RelativeListMenu.tsx +90 -83
  75. package/src/components/ScrollList.tsx +79 -79
  76. package/src/components/Shortcuts/Shortcuts.tsx +151 -151
  77. package/src/components/Shortcuts/ShortcutsSetter.tsx +132 -132
  78. package/src/components/Shortcuts/SingleShortcut.ts +62 -62
  79. package/src/components/SimpleProgressBar.tsx +62 -62
  80. package/src/components/SkillProgressBar.tsx +133 -133
  81. package/src/components/SkillsContainer.tsx +206 -206
  82. package/src/components/Spellbook/Spell.tsx +201 -201
  83. package/src/components/Spellbook/Spellbook.tsx +153 -153
  84. package/src/components/Spellbook/constants.ts +8 -8
  85. package/src/components/Spellbook/mockSpells.ts +60 -60
  86. package/src/components/StaticBook/StaticBook.tsx +103 -103
  87. package/src/components/TextArea.tsx +11 -11
  88. package/src/components/TimeWidget/DayNightPeriod/DayNightPeriod.tsx +35 -35
  89. package/src/components/TimeWidget/TimeWidget.tsx +65 -65
  90. package/src/components/TradingMenu/TradingItemRow.tsx +198 -198
  91. package/src/components/TradingMenu/TradingMenu.tsx +216 -216
  92. package/src/components/TradingMenu/items.mock.ts +48 -48
  93. package/src/components/Truncate.tsx +25 -25
  94. package/src/components/itemSelector/ItemSelector.tsx +136 -136
  95. package/src/components/shared/Column.tsx +16 -16
  96. package/src/components/shared/Ellipsis.tsx +65 -65
  97. package/src/components/shared/SpriteFromAtlas.tsx +104 -104
  98. package/src/components/typography/DynamicText.tsx +49 -49
  99. package/src/constants/uiColors.ts +20 -20
  100. package/src/constants/uiDevices.ts +3 -3
  101. package/src/constants/uiFonts.ts +12 -12
  102. package/src/hooks/useEventListener.ts +21 -21
  103. package/src/hooks/useOutsideAlerter.ts +25 -25
  104. package/src/index.tsx +40 -40
  105. package/src/libs/StringHelpers.ts +3 -3
  106. package/src/mocks/atlas/entities/entities.json +20215 -20215
  107. package/src/mocks/atlas/icons/icons.json +735 -735
  108. package/src/mocks/atlas/items/items.json +12086 -12086
  109. package/src/mocks/equipmentSet.mocks.ts +391 -391
  110. package/src/mocks/itemContainer.mocks.ts +563 -563
  111. package/src/mocks/skills.mocks.ts +128 -128
  112. package/src/stories/Arrow.stories.tsx +26 -26
  113. package/src/stories/Button.stories.tsx +36 -36
  114. package/src/stories/CharacterSelection.stories.tsx +45 -45
  115. package/src/stories/CharacterStatus.stories.tsx +29 -29
  116. package/src/stories/Chat.stories.tsx +187 -187
  117. package/src/stories/ChatDeprecated.stories.tsx +170 -170
  118. package/src/stories/CheckButton.stories.tsx +48 -48
  119. package/src/stories/CircullarController.stories.tsx +37 -37
  120. package/src/stories/CraftBook.stories.tsx +42 -42
  121. package/src/stories/DayNightPeriod.stories.tsx +27 -27
  122. package/src/stories/DraggableContainer.stories.tsx +28 -28
  123. package/src/stories/Dropdown.stories.tsx +46 -46
  124. package/src/stories/DropdownSelectorContainer.stories.tsx +41 -41
  125. package/src/stories/EquipmentSet.stories.tsx +65 -65
  126. package/src/stories/HistoryDialog.stories.tsx +61 -61
  127. package/src/stories/ItemContainer.stories.tsx +201 -200
  128. package/src/stories/ItemInfoDisplay.stories.tsx +33 -33
  129. package/src/stories/ItemQuantitySelector.stories.tsx +26 -26
  130. package/src/stories/ItemSelector.stories.tsx +77 -77
  131. package/src/stories/ItemTradingComponent.stories.tsx +35 -35
  132. package/src/stories/ListMenu.stories.tsx +56 -56
  133. package/src/stories/Multitab.stories.tsx +51 -51
  134. package/src/stories/NPCDialog.stories.tsx +130 -130
  135. package/src/stories/NPCMultiDialog.stories.tsx +71 -71
  136. package/src/stories/ProgressBar.stories.tsx +23 -23
  137. package/src/stories/PropertySelect.stories.tsx +40 -40
  138. package/src/stories/QuestInfo.stories.tsx +107 -107
  139. package/src/stories/QuestList.stories.tsx +82 -82
  140. package/src/stories/RPGUIContainers.stories.tsx +42 -42
  141. package/src/stories/RadioButton.stories.tsx +49 -49
  142. package/src/stories/RadioInput.stories.tsx +34 -34
  143. package/src/stories/RangeSlider.stories.tsx +64 -64
  144. package/src/stories/ScrollList.stories.tsx +85 -85
  145. package/src/stories/Shortcuts.stories.tsx +39 -39
  146. package/src/stories/SimpleProgressBar.stories.tsx +22 -22
  147. package/src/stories/SkillProgressBar.stories.tsx +34 -34
  148. package/src/stories/SkillsContainer.stories.tsx +35 -35
  149. package/src/stories/Spellbook.stories.tsx +104 -104
  150. package/src/stories/StaticBook.stories.tsx +32 -32
  151. package/src/stories/Text.stories.tsx +42 -42
  152. package/src/stories/TimeWidget.stories.tsx +27 -27
  153. package/src/stories/TradingMenu.stories.tsx +47 -47
  154. package/src/types/eventTypes.ts +4 -4
  155. package/src/types/index.d.ts +2 -2
@@ -1,42 +1,42 @@
1
- import { Meta, Story } from '@storybook/react';
2
- import React from 'react';
3
- import {
4
- IRPGUIContainerProps,
5
- RPGUIContainer,
6
- RPGUIContainerTypes,
7
- } from '../../src/components/RPGUIContainer';
8
- import { RPGUIRoot } from '../../src/components/RPGUIRoot';
9
-
10
- const meta: Meta = {
11
- title: 'RPGUI Container',
12
- component: RPGUIContainer,
13
- argTypes: {
14
- type: {
15
- control: {
16
- type: 'select',
17
- labels: {
18
- [RPGUIContainerTypes.Framed]: 'framed',
19
- [RPGUIContainerTypes.FramedGold]: 'framed-gold',
20
- [RPGUIContainerTypes.FramedGold2]: 'framed-gold-2',
21
- [RPGUIContainerTypes.FramedGrey]: 'framed-grey',
22
- },
23
- },
24
- },
25
- children: {},
26
- },
27
- };
28
-
29
- export default meta;
30
-
31
- const Template: Story<IRPGUIContainerProps> = args => (
32
- <RPGUIRoot>
33
- <RPGUIContainer {...args} />
34
- </RPGUIRoot>
35
- );
36
-
37
- export const Default = Template.bind({});
38
-
39
- Default.args = {
40
- type: RPGUIContainerTypes.Framed,
41
- children: <p>This is a container test</p>,
42
- };
1
+ import { Meta, Story } from '@storybook/react';
2
+ import React from 'react';
3
+ import {
4
+ IRPGUIContainerProps,
5
+ RPGUIContainer,
6
+ RPGUIContainerTypes,
7
+ } from '../../src/components/RPGUIContainer';
8
+ import { RPGUIRoot } from '../../src/components/RPGUIRoot';
9
+
10
+ const meta: Meta = {
11
+ title: 'RPGUI Container',
12
+ component: RPGUIContainer,
13
+ argTypes: {
14
+ type: {
15
+ control: {
16
+ type: 'select',
17
+ labels: {
18
+ [RPGUIContainerTypes.Framed]: 'framed',
19
+ [RPGUIContainerTypes.FramedGold]: 'framed-gold',
20
+ [RPGUIContainerTypes.FramedGold2]: 'framed-gold-2',
21
+ [RPGUIContainerTypes.FramedGrey]: 'framed-grey',
22
+ },
23
+ },
24
+ },
25
+ children: {},
26
+ },
27
+ };
28
+
29
+ export default meta;
30
+
31
+ const Template: Story<IRPGUIContainerProps> = args => (
32
+ <RPGUIRoot>
33
+ <RPGUIContainer {...args} />
34
+ </RPGUIRoot>
35
+ );
36
+
37
+ export const Default = Template.bind({});
38
+
39
+ Default.args = {
40
+ type: RPGUIContainerTypes.Framed,
41
+ children: <p>This is a container test</p>,
42
+ };
@@ -1,49 +1,49 @@
1
- import { Meta, Story } from '@storybook/react';
2
- import React from 'react';
3
- import {
4
- InputRadio,
5
- IRadioItems,
6
- IRadioProps,
7
- } from '../../src/components/RadioButton';
8
- import {
9
- RPGUIContainer,
10
- RPGUIContainerTypes,
11
- } from '../../src/components/RPGUIContainer';
12
- import { RPGUIRoot } from '../../src/components/RPGUIRoot';
13
-
14
- const meta: Meta = {
15
- title: 'Radio Input',
16
- component: InputRadio,
17
- };
18
-
19
- export default meta;
20
-
21
- const Template: Story<IRadioProps> = args => (
22
- <RPGUIRoot>
23
- <RPGUIContainer type={RPGUIContainerTypes.Framed}>
24
- <InputRadio {...args} />
25
- </RPGUIContainer>
26
- </RPGUIRoot>
27
- );
28
-
29
- export const Default = Template.bind({});
30
-
31
- const items: IRadioItems[] = [
32
- {
33
- label: 'label1',
34
- value: 'value1',
35
- },
36
- {
37
- label: 'label2',
38
- value: 'value2',
39
- },
40
- {
41
- label: 'label3',
42
- value: 'value3',
43
- },
44
- ];
45
-
46
- Default.args = {
47
- items,
48
- name: 'teste',
49
- };
1
+ import { Meta, Story } from '@storybook/react';
2
+ import React from 'react';
3
+ import {
4
+ InputRadio,
5
+ IRadioItems,
6
+ IRadioProps,
7
+ } from '../../src/components/RadioButton';
8
+ import {
9
+ RPGUIContainer,
10
+ RPGUIContainerTypes,
11
+ } from '../../src/components/RPGUIContainer';
12
+ import { RPGUIRoot } from '../../src/components/RPGUIRoot';
13
+
14
+ const meta: Meta = {
15
+ title: 'Radio Input',
16
+ component: InputRadio,
17
+ };
18
+
19
+ export default meta;
20
+
21
+ const Template: Story<IRadioProps> = args => (
22
+ <RPGUIRoot>
23
+ <RPGUIContainer type={RPGUIContainerTypes.Framed}>
24
+ <InputRadio {...args} />
25
+ </RPGUIContainer>
26
+ </RPGUIRoot>
27
+ );
28
+
29
+ export const Default = Template.bind({});
30
+
31
+ const items: IRadioItems[] = [
32
+ {
33
+ label: 'label1',
34
+ value: 'value1',
35
+ },
36
+ {
37
+ label: 'label2',
38
+ value: 'value2',
39
+ },
40
+ {
41
+ label: 'label3',
42
+ value: 'value3',
43
+ },
44
+ ];
45
+
46
+ Default.args = {
47
+ items,
48
+ name: 'teste',
49
+ };
@@ -1,35 +1,35 @@
1
- import React from 'react';
2
- import { Meta, Story } from '@storybook/react';
3
- import { RadioInput ,IRadioInput} from '../components/RadioInput/RadioInput';
4
- import { RPGUIRoot } from '../components/RPGUIRoot';
5
- import { Itools } from '../components/RadioInput/instruments';
6
-
7
- const meta: Meta = {
8
- component: RadioInput,
9
- };
10
-
11
- export default meta;
12
- const Template: Story<IRadioInput> = args => (
13
- <RPGUIRoot>
14
- <RadioInput {...args} />
15
- </RPGUIRoot>
16
- );
17
-
18
- export const RadioInputElement = Template.bind({});
19
-
20
- const onSelectIt = (value:string):void => {
21
- console.log('Story package', value);
22
- };
23
-
24
- const onClose = () => {
25
- console.log('close');
26
- };
27
-
28
- RadioInputElement.args={
29
- title:"Harvesting instruments",
30
- subtitle:'Use the tool, you need it',
31
- onSelect:onSelectIt,
32
- onCancel:onClose,
33
- items:Itools
34
-
1
+ import React from 'react';
2
+ import { Meta, Story } from '@storybook/react';
3
+ import { RadioInput ,IRadioInput} from '../components/RadioInput/RadioInput';
4
+ import { RPGUIRoot } from '../components/RPGUIRoot';
5
+ import { Itools } from '../components/RadioInput/instruments';
6
+
7
+ const meta: Meta = {
8
+ component: RadioInput,
9
+ };
10
+
11
+ export default meta;
12
+ const Template: Story<IRadioInput> = args => (
13
+ <RPGUIRoot>
14
+ <RadioInput {...args} />
15
+ </RPGUIRoot>
16
+ );
17
+
18
+ export const RadioInputElement = Template.bind({});
19
+
20
+ const onSelectIt = (value:string):void => {
21
+ console.log('Story package', value);
22
+ };
23
+
24
+ const onClose = () => {
25
+ console.log('close');
26
+ };
27
+
28
+ RadioInputElement.args={
29
+ title:"Harvesting instruments",
30
+ subtitle:'Use the tool, you need it',
31
+ onSelect:onSelectIt,
32
+ onCancel:onClose,
33
+ items:Itools
34
+
35
35
  }
@@ -1,64 +1,64 @@
1
- import { Meta, Story } from '@storybook/react';
2
- import React, { useState } from 'react';
3
- import {
4
- IRangeSliderProps,
5
- RangeSlider,
6
- RangeSliderType,
7
- } from '../../src/components/RangeSlider';
8
- import { RPGUIRoot } from '../../src/components/RPGUIRoot';
9
-
10
- const meta: Meta = {
11
- title: 'Slider',
12
- component: RangeSlider,
13
- argTypes: {
14
- type: {
15
- control: {
16
- type: 'select',
17
- labels: {
18
- [RangeSliderType.Slider]: 'slider',
19
- [RangeSliderType.GoldSlider]: 'golden-slider',
20
- },
21
- },
22
- },
23
- valueMin: {
24
- control: {
25
- type: 'number',
26
- },
27
- },
28
- valueMax: {
29
- control: {
30
- type: 'number',
31
- },
32
- },
33
- value: {
34
- control: {
35
- type: 'number',
36
- },
37
- },
38
- },
39
- parameters: {
40
- controls: { expanded: true },
41
- },
42
- };
43
-
44
- export default meta;
45
-
46
- const Template: Story<IRangeSliderProps> = args => {
47
- const [value, setValue] = useState(50);
48
-
49
- return (
50
- <RPGUIRoot>
51
- <RangeSlider {...args} value={value} onChange={setValue} />
52
- </RPGUIRoot>
53
- );
54
- };
55
-
56
- // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
57
- // https://storybook.js.org/docs/react/workflows/unit-testing
58
- export const Default = Template.bind({});
59
-
60
- Default.args = {
61
- type: RangeSliderType.Slider,
62
- valueMin: 0,
63
- valueMax: 100,
64
- };
1
+ import { Meta, Story } from '@storybook/react';
2
+ import React, { useState } from 'react';
3
+ import {
4
+ IRangeSliderProps,
5
+ RangeSlider,
6
+ RangeSliderType,
7
+ } from '../../src/components/RangeSlider';
8
+ import { RPGUIRoot } from '../../src/components/RPGUIRoot';
9
+
10
+ const meta: Meta = {
11
+ title: 'Slider',
12
+ component: RangeSlider,
13
+ argTypes: {
14
+ type: {
15
+ control: {
16
+ type: 'select',
17
+ labels: {
18
+ [RangeSliderType.Slider]: 'slider',
19
+ [RangeSliderType.GoldSlider]: 'golden-slider',
20
+ },
21
+ },
22
+ },
23
+ valueMin: {
24
+ control: {
25
+ type: 'number',
26
+ },
27
+ },
28
+ valueMax: {
29
+ control: {
30
+ type: 'number',
31
+ },
32
+ },
33
+ value: {
34
+ control: {
35
+ type: 'number',
36
+ },
37
+ },
38
+ },
39
+ parameters: {
40
+ controls: { expanded: true },
41
+ },
42
+ };
43
+
44
+ export default meta;
45
+
46
+ const Template: Story<IRangeSliderProps> = args => {
47
+ const [value, setValue] = useState(50);
48
+
49
+ return (
50
+ <RPGUIRoot>
51
+ <RangeSlider {...args} value={value} onChange={setValue} />
52
+ </RPGUIRoot>
53
+ );
54
+ };
55
+
56
+ // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
57
+ // https://storybook.js.org/docs/react/workflows/unit-testing
58
+ export const Default = Template.bind({});
59
+
60
+ Default.args = {
61
+ type: RangeSliderType.Slider,
62
+ valueMin: 0,
63
+ valueMax: 100,
64
+ };
@@ -1,85 +1,85 @@
1
- import { Meta, Story } from '@storybook/react';
2
- import React from 'react';
3
- import { RPGUIRoot } from '../../src/components/RPGUIRoot';
4
- import { IListMenuProps, ListMenu } from '../../src/components/ScrollList';
5
-
6
- const meta: Meta = {
7
- /* 👇 The title prop is optional.
8
- * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
9
- * to learn how to generate automatic titles
10
- */
11
- title: 'Scroll List',
12
- component: ListMenu,
13
- argTypes: {},
14
- };
15
-
16
- export default meta;
17
-
18
- //👇 We create a “template” of how args map to rendering "Blacksmith","Merchant","City Guard","Explorer"
19
- const Template: Story<IListMenuProps> = args => (
20
- <RPGUIRoot>
21
- <ListMenu {...args} />
22
- </RPGUIRoot>
23
- );
24
-
25
- export const Default = Template.bind({});
26
-
27
- Default.args = {
28
- title: 'Scroll List',
29
- // x: 100,
30
- // y: 100,
31
- options: [
32
- {
33
- id: 'blacksmith',
34
- text: 'Huge option added here',
35
- },
36
- {
37
- text: 'Merchant',
38
- id: 'merchant',
39
- },
40
- {
41
- text: 'City Guard',
42
- id: 'city-guard',
43
- },
44
- {
45
- text: 'Explorer',
46
- id: 'explorer',
47
- },
48
- {
49
- text: 'Royalty',
50
- id: 'royalty',
51
- },
52
- {
53
- text: 'Gladiator',
54
- id: 'gladiator',
55
- },
56
- {
57
- id: 'blacksmith',
58
- text: 'Huge option added here',
59
- },
60
- {
61
- text: 'Merchant',
62
- id: 'merchant',
63
- },
64
- {
65
- text: 'City Guard',
66
- id: 'city-guard',
67
- },
68
- {
69
- text: 'Explorer',
70
- id: 'explorer',
71
- },
72
- {
73
- text: 'Royalty',
74
- id: 'royalty',
75
- },
76
- {
77
- text: 'Gladiator',
78
- id: 'gladiator',
79
- },
80
- {
81
- text: 'Gladiator',
82
- id: 'gladiator',
83
- },
84
- ],
85
- };
1
+ import { Meta, Story } from '@storybook/react';
2
+ import React from 'react';
3
+ import { RPGUIRoot } from '../../src/components/RPGUIRoot';
4
+ import { IListMenuProps, ListMenu } from '../../src/components/ScrollList';
5
+
6
+ const meta: Meta = {
7
+ /* 👇 The title prop is optional.
8
+ * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
9
+ * to learn how to generate automatic titles
10
+ */
11
+ title: 'Scroll List',
12
+ component: ListMenu,
13
+ argTypes: {},
14
+ };
15
+
16
+ export default meta;
17
+
18
+ //👇 We create a “template” of how args map to rendering "Blacksmith","Merchant","City Guard","Explorer"
19
+ const Template: Story<IListMenuProps> = args => (
20
+ <RPGUIRoot>
21
+ <ListMenu {...args} />
22
+ </RPGUIRoot>
23
+ );
24
+
25
+ export const Default = Template.bind({});
26
+
27
+ Default.args = {
28
+ title: 'Scroll List',
29
+ // x: 100,
30
+ // y: 100,
31
+ options: [
32
+ {
33
+ id: 'blacksmith',
34
+ text: 'Huge option added here',
35
+ },
36
+ {
37
+ text: 'Merchant',
38
+ id: 'merchant',
39
+ },
40
+ {
41
+ text: 'City Guard',
42
+ id: 'city-guard',
43
+ },
44
+ {
45
+ text: 'Explorer',
46
+ id: 'explorer',
47
+ },
48
+ {
49
+ text: 'Royalty',
50
+ id: 'royalty',
51
+ },
52
+ {
53
+ text: 'Gladiator',
54
+ id: 'gladiator',
55
+ },
56
+ {
57
+ id: 'blacksmith',
58
+ text: 'Huge option added here',
59
+ },
60
+ {
61
+ text: 'Merchant',
62
+ id: 'merchant',
63
+ },
64
+ {
65
+ text: 'City Guard',
66
+ id: 'city-guard',
67
+ },
68
+ {
69
+ text: 'Explorer',
70
+ id: 'explorer',
71
+ },
72
+ {
73
+ text: 'Royalty',
74
+ id: 'royalty',
75
+ },
76
+ {
77
+ text: 'Gladiator',
78
+ id: 'gladiator',
79
+ },
80
+ {
81
+ text: 'Gladiator',
82
+ id: 'gladiator',
83
+ },
84
+ ],
85
+ };
@@ -1,39 +1,39 @@
1
- import { Meta, Story } from '@storybook/react';
2
- import React from 'react';
3
- import { RPGUIRoot } from '../components/RPGUIRoot';
4
- import { Shortcuts, ShortcutsProps } from '../components/Shortcuts/Shortcuts';
5
- import { SHORTCUTS_STORAGE_KEY } from '../components/Spellbook/constants';
6
- import atlasJSON from '../mocks/atlas/items/items.json';
7
- import atlasIMG from '../mocks/atlas/items/items.png';
8
- import { itemContainerMock } from '../mocks/itemContainer.mocks';
9
-
10
- const meta: Meta = {
11
- title: 'Shortcuts',
12
- component: Shortcuts,
13
- };
14
-
15
- export default meta;
16
-
17
- const Template: Story<ShortcutsProps> = args => {
18
- return (
19
- <RPGUIRoot>
20
- <div
21
- style={{
22
- width: '100%',
23
- }}
24
- >
25
- <Shortcuts {...args} />
26
- </div>
27
- </RPGUIRoot>
28
- );
29
- };
30
-
31
- export const Default = Template.bind({});
32
- Default.args = {
33
- onShortcutCast: spellKey => console.log(spellKey),
34
- shortcuts: JSON.parse(localStorage.getItem(SHORTCUTS_STORAGE_KEY) as string),
35
- mana: 100,
36
- atlasIMG,
37
- atlasJSON,
38
- inventory: itemContainerMock,
39
- };
1
+ import { Meta, Story } from '@storybook/react';
2
+ import React from 'react';
3
+ import { RPGUIRoot } from '../components/RPGUIRoot';
4
+ import { Shortcuts, ShortcutsProps } from '../components/Shortcuts/Shortcuts';
5
+ import { SHORTCUTS_STORAGE_KEY } from '../components/Spellbook/constants';
6
+ import atlasJSON from '../mocks/atlas/items/items.json';
7
+ import atlasIMG from '../mocks/atlas/items/items.png';
8
+ import { itemContainerMock } from '../mocks/itemContainer.mocks';
9
+
10
+ const meta: Meta = {
11
+ title: 'Shortcuts',
12
+ component: Shortcuts,
13
+ };
14
+
15
+ export default meta;
16
+
17
+ const Template: Story<ShortcutsProps> = args => {
18
+ return (
19
+ <RPGUIRoot>
20
+ <div
21
+ style={{
22
+ width: '100%',
23
+ }}
24
+ >
25
+ <Shortcuts {...args} />
26
+ </div>
27
+ </RPGUIRoot>
28
+ );
29
+ };
30
+
31
+ export const Default = Template.bind({});
32
+ Default.args = {
33
+ onShortcutCast: spellKey => console.log(spellKey),
34
+ shortcuts: JSON.parse(localStorage.getItem(SHORTCUTS_STORAGE_KEY) as string),
35
+ mana: 100,
36
+ atlasIMG,
37
+ atlasJSON,
38
+ inventory: itemContainerMock,
39
+ };
@@ -1,22 +1,22 @@
1
- import { Meta, Story } from '@storybook/react';
2
- import React from 'react';
3
- import { RPGUIRoot } from '../../src/components/RPGUIRoot';
4
- import {
5
- ISimpleProgressBarProps,
6
- SimpleProgressBar,
7
- } from '../../src/components/SimpleProgressBar';
8
-
9
- const meta: Meta = {
10
- title: 'Simple Progress Bar',
11
- component: SimpleProgressBar,
12
- };
13
-
14
- export default meta;
15
-
16
- const Template: Story<ISimpleProgressBarProps> = args => (
17
- <RPGUIRoot>
18
- <SimpleProgressBar {...args} />
19
- </RPGUIRoot>
20
- );
21
-
22
- export const Default = Template.bind({});
1
+ import { Meta, Story } from '@storybook/react';
2
+ import React from 'react';
3
+ import { RPGUIRoot } from '../../src/components/RPGUIRoot';
4
+ import {
5
+ ISimpleProgressBarProps,
6
+ SimpleProgressBar,
7
+ } from '../../src/components/SimpleProgressBar';
8
+
9
+ const meta: Meta = {
10
+ title: 'Simple Progress Bar',
11
+ component: SimpleProgressBar,
12
+ };
13
+
14
+ export default meta;
15
+
16
+ const Template: Story<ISimpleProgressBarProps> = args => (
17
+ <RPGUIRoot>
18
+ <SimpleProgressBar {...args} />
19
+ </RPGUIRoot>
20
+ );
21
+
22
+ export const Default = Template.bind({});