@rpg-engine/long-bow 0.3.83 → 0.3.85

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