@rpg-engine/long-bow 0.3.80 → 0.3.82

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