@rpg-engine/long-bow 0.1.794 → 0.2.2

package/src/stories/ListMenu.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { IListMenuProps, ListMenu } from '../../src/components/ListMenu';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List Menu',
+  component: ListMenu,
+  argTypes: {},
+};
+
+export default meta;
+
+//👇 We create a “template” of how args map to rendering "Blacksmith","Merchant","City Guard","Explorer"
+const Template: Story<IListMenuProps> = args => (
+  <RPGUIRoot>
+    <ListMenu {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  // x: 100,
+  // y: 100,
+  options: [
+    {
+      id: 'blacksmith',
+      text: 'Huge option added here',
+    },
+    {
+      text: 'Merchant',
+      id: 'merchant',
+    },
+    {
+      text: 'City Guard',
+      id: 'city-guard',
+    },
+    {
+      text: 'Explorer',
+      id: 'explorer',
+    },
+    {
+      text: 'Royalty',
+      id: 'royalty',
+    },
+    {
+      text: 'Gladiator',
+      id: 'gladiator',
+    },
+  ],
+};

package/src/stories/Multitab.stories.tsx

@@ -0,0 +1,51 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { TabBody } from '../../src/components/Multitab/TabBody';
+import {
+  ITabsContainer,
+  MultitabType,
+  TabsContainer,
+} from '../../src/components/Multitab/TabsContainer';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+
+const meta: Meta = {
+  title: 'MultiTabs',
+  component: TabsContainer,
+};
+
+export default meta;
+
+const Template: Story<ITabsContainer> = args => (
+  <RPGUIRoot>
+    <TabsContainer {...args}>
+      <TabBody id="animal">
+        <p>Animals content here</p>
+      </TabBody>
+      <TabBody id="plant">
+        <p>Plant content here</p>
+      </TabBody>
+    </TabsContainer>
+  </RPGUIRoot>
+);
+
+export const Brown = Template.bind({});
+
+Brown.args = {
+  type: MultitabType.Brown,
+  onCloseButton: () => console.log('close tab'),
+  tabs: [
+    { label: 'Animal', id: 'animal' },
+    { label: 'Plant', id: 'plant' },
+  ],
+};
+
+export const Gray = Template.bind({});
+
+Gray.args = {
+  type: MultitabType.Gray,
+  onCloseButton: () => console.log('close tab'),
+  tabs: [
+    { label: 'Animal', id: 'animal' },
+    { label: 'Plant', id: 'plant' },
+  ],
+};

package/src/stories/NPCDialog.stories.tsx

@@ -0,0 +1,130 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import {
+  INPCDialogProps,
+  NPCDialog,
+  NPCDialogType,
+} from '../../src/components/NPCDialog/NPCDialog';
+import {
+  IQuestionDialog,
+  IQuestionDialogAnswer,
+} from '../../src/components/NPCDialog/QuestionDialog/QuestionDialog';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+
+const meta: Meta = {
+  title: 'NPC Dialog',
+  component: NPCDialog,
+  argTypes: {
+    text: {
+      control: {
+        type: 'text',
+      },
+    },
+
+    type: {
+      control: {
+        type: 'select',
+        labels: {
+          [NPCDialogType.TextOnly]: 'Text Only',
+          [NPCDialogType.TextAndThumbnail]: 'Text and Thumbnail',
+        },
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<INPCDialogProps> = args => (
+  <RPGUIRoot>
+    <NPCDialog {...args} />
+  </RPGUIRoot>
+);
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const TextAndThumbnail = Template.bind({});
+
+TextAndThumbnail.args = {
+  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.`,
+  type: NPCDialogType.TextAndThumbnail,
+};
+
+export const TextOnly = Template.bind({});
+
+TextOnly.args = {
+  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.`,
+  type: NPCDialogType.TextOnly,
+};
+
+export const Question = Template.bind({});
+
+const answers: IQuestionDialogAnswer[] = [
+  {
+    id: 1,
+    text: 'I have lived here all my life',
+    nextQuestionId: 2,
+  },
+  {
+    id: 2,
+    text: 'I came here from Newton',
+    nextQuestionId: 3,
+  },
+  {
+    id: 3,
+    text: 'Oops! I mean, SpringVille!',
+    nextQuestionId: 2,
+  },
+  {
+    id: 4,
+    text: 'I havent heard about any trouble',
+    nextQuestionId: 4,
+  },
+  {
+    id: 5,
+    text: 'Who came here to die',
+    nextQuestionId: 4,
+  },
+  {
+    id: 6,
+    text: 'Who came here to live',
+    nextQuestionId: 4,
+  },
+];
+
+const questions: IQuestionDialog[] = [
+  {
+    id: 1,
+    text: `You dont Look Like from around here. Aren't you?`,
+    answerIds: [1, 2],
+  },
+  {
+    id: 2,
+    text: 'Oh really!! then You must know my Bowler!',
+    answerIds: [5, 6],
+  },
+  {
+    id: 3,
+    text: 'Newton!! I heard there is trouble brewing down here!!',
+    answerIds: [3, 4],
+  },
+  {
+    id: 4,
+    text:
+      'Dont you worry about it, say thats you have something to eat. Im starving',
+  },
+  {
+    id: 5,
+    text: 'You are a liar! there aint mr Browler! I made it',
+  },
+];
+
+Question.args = {
+  type: NPCDialogType.TextAndThumbnail,
+  questions,
+  answers,
+  isQuestionDialog: true,
+};

package/src/stories/ProgressBar.stories.tsx

@@ -0,0 +1,23 @@
+import { Story } from '@storybook/react';
+import React from 'react';
+import { IBarProps, ProgressBar } from '../../src/components/ProgressBar';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+
+export default {
+  title: 'Progress Bar',
+  component: ProgressBar,
+};
+
+const Template: Story<IBarProps> = args => (
+  <RPGUIRoot>
+    <ProgressBar {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  max: 100,
+  value: 30,
+  color: 'blue',
+};

package/src/stories/PropertySelect.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import PropertySelect, {
+  IPropertySelectProps,
+} from '../components/PropertySelect/PropertySelect';
+
+const meta: Meta = {
+  title: 'Property Select',
+  component: PropertySelect,
+};
+
+export default meta;
+
+const Template: Story<IPropertySelectProps> = args => (
+  <RPGUIRoot>
+    <PropertySelect {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+const propertiesMock = [
+  {
+    id: '2b716274-b19c-451d-9561-16bca8c6a12d',
+    name: 'Vegetables',
+  },
+  {
+    id: '536789bd-38fb-48f9-8903-dad86f276d47',
+    name: 'Counseling',
+  },
+  {
+    id: '80f07029-b907-4fae-872e-4f2b569f81c9',
+    name: 'Through',
+  },
+];
+
+Default.args = {
+  availableProperties: propertiesMock,
+  selectedProperty: {},
+};

package/src/stories/QuestInfo.stories.tsx

@@ -0,0 +1,76 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import {
+  IQuestInfoProps,
+  QuestInfo,
+} from '../../src/components/QuestInfo/QuestInfo';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+
+const meta: Meta = {
+  title: 'Quest Info',
+  component: QuestInfo,
+};
+
+export default meta;
+
+const Template: Story<IQuestInfoProps> = args => (
+  <RPGUIRoot>
+    <QuestInfo {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+const buttonMock = [
+  {
+    disabled: false,
+    title: 'Accept',
+    onClick: () => console.log('button 1 clicked'),
+  },
+  {
+    disabled: true,
+    title: 'Share',
+    onClick: () => console.log('button 2 clicked'),
+  },
+  {
+    disabled: false,
+    title: 'Reject',
+    onClick: () => console.log('button 3 clicked'),
+  },
+];
+
+Default.args = {
+  title: 'Quest Info',
+  onClose: () => console.log('closing'),
+  button: buttonMock,
+  children: (
+    <>
+      <h1>HTML Ipsum Presents</h1>
+      <p>
+        <strong>Pellentesque habitant morbi tristique</strong> senectus et netus
+        et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
+        vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
+        quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
+        placerat eleifend leo. Quisque sit amet est et sapien ullamcorper
+        pharetra. Vestibulum erat wisi, condimentum sed,{' '}
+        <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum,
+        elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
+        lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut
+        felis.
+      </p>
+      <h1>HTML Ipsum Presents</h1>
+      <p>
+        <strong>Pellentesque habitant morbi tristique</strong> senectus et netus
+        et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
+        vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
+        quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
+        placerat eleifend leo. Quisque sit amet est et sapien ullamcorper
+        pharetra. Vestibulum erat wisi, condimentum sed,{' '}
+        <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum,
+        elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
+        lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut
+        felis.
+      </p>
+    </>
+  ),
+};

package/src/stories/RPGUIContainers.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import {
+  IRPGUIContainerProps,
+  RPGUIContainer,
+  RPGUIContainerTypes,
+} from '../../src/components/RPGUIContainer';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+
+const meta: Meta = {
+  title: 'RPGUI Container',
+  component: RPGUIContainer,
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        labels: {
+          [RPGUIContainerTypes.Framed]: 'framed',
+          [RPGUIContainerTypes.FramedGold]: 'framed-gold',
+          [RPGUIContainerTypes.FramedGold2]: 'framed-gold-2',
+          [RPGUIContainerTypes.FramedGrey]: 'framed-grey',
+        },
+      },
+    },
+    children: {},
+  },
+};
+
+export default meta;
+
+const Template: Story<IRPGUIContainerProps> = args => (
+  <RPGUIRoot>
+    <RPGUIContainer {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  type: RPGUIContainerTypes.Framed,
+  children: <p>This is a container test</p>,
+};

package/src/stories/RadioButton.stories.tsx

@@ -0,0 +1,49 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import {
+  InputRadio,
+  IRadioItems,
+  IRadioProps,
+} from '../../src/components/RadioButton';
+import {
+  RPGUIContainer,
+  RPGUIContainerTypes,
+} from '../../src/components/RPGUIContainer';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+
+const meta: Meta = {
+  title: 'Radio Input',
+  component: InputRadio,
+};
+
+export default meta;
+
+const Template: Story<IRadioProps> = args => (
+  <RPGUIRoot>
+    <RPGUIContainer type={RPGUIContainerTypes.Framed}>
+      <InputRadio {...args} />
+    </RPGUIContainer>
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+const items: IRadioItems[] = [
+  {
+    label: 'label1',
+    value: 'value1',
+  },
+  {
+    label: 'label2',
+    value: 'value2',
+  },
+  {
+    label: 'label3',
+    value: 'value3',
+  },
+];
+
+Default.args = {
+  items,
+  name: 'teste',
+};

package/src/stories/RangeSlider.stories.tsx

@@ -0,0 +1,60 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import {
+  IRangeSliderProps,
+  RangeSlider,
+  RangeSliderType,
+} from '../../src/components/RangeSlider';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+
+const meta: Meta = {
+  title: 'Slider',
+  component: RangeSlider,
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        labels: {
+          [RangeSliderType.Slider]: 'slider',
+          [RangeSliderType.GoldSlider]: 'golden-slider',
+        },
+      },
+    },
+    valueMin: {
+      control: {
+        type: 'number',
+      },
+    },
+    valueMax: {
+      control: {
+        type: 'number',
+      },
+    },
+    value: {
+      control: {
+        type: 'number',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<IRangeSliderProps> = args => (
+  <RPGUIRoot>
+    <RangeSlider {...args} />
+  </RPGUIRoot>
+);
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+
+Default.args = {
+  type: RangeSliderType.Slider,
+  valueMin: 0,
+  valueMax: 100,
+};

package/src/stories/ScrollList.stories.tsx

@@ -0,0 +1,85 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+import { IListMenuProps, ListMenu } from '../../src/components/ScrollList';
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Scroll List',
+  component: ListMenu,
+  argTypes: {},
+};
+
+export default meta;
+
+//👇 We create a “template” of how args map to rendering "Blacksmith","Merchant","City Guard","Explorer"
+const Template: Story<IListMenuProps> = args => (
+  <RPGUIRoot>
+    <ListMenu {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  title: 'Scroll List',
+  // x: 100,
+  // y: 100,
+  options: [
+    {
+      id: 'blacksmith',
+      text: 'Huge option added here',
+    },
+    {
+      text: 'Merchant',
+      id: 'merchant',
+    },
+    {
+      text: 'City Guard',
+      id: 'city-guard',
+    },
+    {
+      text: 'Explorer',
+      id: 'explorer',
+    },
+    {
+      text: 'Royalty',
+      id: 'royalty',
+    },
+    {
+      text: 'Gladiator',
+      id: 'gladiator',
+    },
+    {
+      id: 'blacksmith',
+      text: 'Huge option added here',
+    },
+    {
+      text: 'Merchant',
+      id: 'merchant',
+    },
+    {
+      text: 'City Guard',
+      id: 'city-guard',
+    },
+    {
+      text: 'Explorer',
+      id: 'explorer',
+    },
+    {
+      text: 'Royalty',
+      id: 'royalty',
+    },
+    {
+      text: 'Gladiator',
+      id: 'gladiator',
+    },
+    {
+      text: 'Gladiator',
+      id: 'gladiator',
+    },
+  ],
+};

package/src/stories/SimpleProgressBar.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+import {
+  ISimpleProgressBarProps,
+  SimpleProgressBar,
+} from '../../src/components/SimpleProgressBar';
+
+const meta: Meta = {
+  title: 'Simple Progress Bar',
+  component: SimpleProgressBar,
+};
+
+export default meta;
+
+const Template: Story<ISimpleProgressBarProps> = args => (
+  <RPGUIRoot>
+    <SimpleProgressBar {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});

package/src/stories/SkillProgressBar.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+import {
+  ISkillProgressBarProps,
+  SkillProgressBar,
+} from '../../src/components/SkillProgressBar';
+
+const meta: Meta = {
+  title: 'Skill Progress Bar',
+  component: SkillProgressBar,
+};
+
+export default meta;
+
+const Template: Story<ISkillProgressBarProps> = args => (
+  <RPGUIRoot>
+    <SkillProgressBar {...args} />
+  </RPGUIRoot>
+);
+export const Default = Template.bind([]);
+
+Default.args = {
+  skillName: 'Sword skill',
+  bgColor: '#ff0000',
+  level: 2,
+  skillPoints: 10,
+  skillPointsToNextLevel: 100,
+  texturePath: 'swords/broad-sword.png',
+};

package/src/stories/SkillsContainer.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+import {
+  ISkillContainerProps,
+  SkillsContainer,
+} from '../../src/components/SkillsContainer';
+import { skillMock } from '../../src/mocks/skills.mocks';
+
+const meta: Meta = {
+  title: 'Skills Container',
+  component: SkillsContainer,
+};
+
+export default meta;
+
+const Template: Story<ISkillContainerProps> = args => (
+  <RPGUIRoot>
+    <SkillsContainer
+      {...args}
+      skill={skillMock}
+      onCloseButton={() => console.log('close skill container')}
+    />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind([]);
+
+Default.args = {
+  skill: skillMock,
+};