@rpg-engine/long-bow 0.3.54 → 0.3.57

package/src/stories/ListMenu.stories.tsx

@@ -1,56 +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',
-    },
-  ],
-};
+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

@@ -1,51 +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' },
-  ],
-};
+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

@@ -1,130 +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,
-};
+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/NPCMultiDialog.stories.tsx

@@ -1,71 +1,71 @@
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
-import { RPGUIRoot } from '../../src/components/RPGUIRoot';
-import aliceDefaultThumbnail from '../components/NPCDialog/img/npcDialog/npcThumbnails/alice.png';
-import {
-  ImgSide,
-  INPCMultiDialogProps,
-  NPCMultiDialog,
-  NPCMultiDialogType,
-} from '../components/NPCDialog/NPCMultiDialog';
-
-const meta: Meta = {
-  title: 'NPC MultiDialog',
-  component: NPCMultiDialog,
-  argTypes: {
-    text: {
-      control: {
-        type: 'text',
-      },
-    },
-    // ImgSide: {
-    //   control: {
-    //     type: 'select',
-    //     label: {
-    //       [ImgSide.right]: 'right',
-    //       [ImgSide.left]: 'left',
-    //     },
-    //   },
-    // },
-    imagePath: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-export default meta;
-
-const Template: Story<INPCMultiDialogProps> = args => (
-  <RPGUIRoot>
-    <NPCMultiDialog {...args} />
-  </RPGUIRoot>
-);
-
-export const NPCMultiDialogStore = Template.bind({});
-
-// 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
-
-const textAndTypeArray: NPCMultiDialogType[] = [
-  {
-    text: 'I have lived here all my life',
-    imagePath: aliceDefaultThumbnail,
-    imageSide: ImgSide.right,
-  },
-  {
-    text: 'I have lived here all my life',
-    imagePath: aliceDefaultThumbnail,
-    imageSide: ImgSide.left,
-  },
-  {
-    text: 'I have lived here all my life',
-    imagePath: aliceDefaultThumbnail,
-    imageSide: ImgSide.right,
-  },
-];
-
-NPCMultiDialogStore.args = {
-  textAndTypeArray,
-};
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+import aliceDefaultThumbnail from '../components/NPCDialog/img/npcDialog/npcThumbnails/alice.png';
+import {
+  ImgSide,
+  INPCMultiDialogProps,
+  NPCMultiDialog,
+  NPCMultiDialogType,
+} from '../components/NPCDialog/NPCMultiDialog';
+
+const meta: Meta = {
+  title: 'NPC MultiDialog',
+  component: NPCMultiDialog,
+  argTypes: {
+    text: {
+      control: {
+        type: 'text',
+      },
+    },
+    // ImgSide: {
+    //   control: {
+    //     type: 'select',
+    //     label: {
+    //       [ImgSide.right]: 'right',
+    //       [ImgSide.left]: 'left',
+    //     },
+    //   },
+    // },
+    imagePath: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+export default meta;
+
+const Template: Story<INPCMultiDialogProps> = args => (
+  <RPGUIRoot>
+    <NPCMultiDialog {...args} />
+  </RPGUIRoot>
+);
+
+export const NPCMultiDialogStore = Template.bind({});
+
+// 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
+
+const textAndTypeArray: NPCMultiDialogType[] = [
+  {
+    text: 'I have lived here all my life',
+    imagePath: aliceDefaultThumbnail,
+    imageSide: ImgSide.right,
+  },
+  {
+    text: 'I have lived here all my life',
+    imagePath: aliceDefaultThumbnail,
+    imageSide: ImgSide.left,
+  },
+  {
+    text: 'I have lived here all my life',
+    imagePath: aliceDefaultThumbnail,
+    imageSide: ImgSide.right,
+  },
+];
+
+NPCMultiDialogStore.args = {
+  textAndTypeArray,
+};

package/src/stories/ProgressBar.stories.tsx

@@ -1,23 +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',
-};
+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',
+};