@rpg-engine/long-bow 0.1.82 → 0.1.85

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,
+};

package/src/stories/Text.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../src';
+import {
+  IInputProps,
+  Input as InputComponent,
+} from '../../src/components/Input';
+import {
+  ITextArea,
+  TextArea as TextAreaComponent,
+} from '../../src/components/TextArea';
+
+const meta: Meta = {
+  title: 'Text',
+  component: InputComponent,
+};
+
+export default meta;
+
+const InputTemplate: Story<IInputProps> = args => (
+  <RPGUIRoot>
+    <InputComponent {...args} />
+  </RPGUIRoot>
+);
+
+export const Input = InputTemplate.bind({});
+
+Input.args = {
+  placeholder: 'Test placeholder',
+};
+
+const TextAreaTemplate: Story<ITextArea> = args => (
+  <RPGUIRoot>
+    <TextAreaComponent {...args} />
+  </RPGUIRoot>
+);
+
+export const TextArea = TextAreaTemplate.bind({});
+
+TextArea.args = {
+  placeholder: 'Test placeholder',
+};

package/dist/components/Item/Cards/ItemCard.d.ts

@@ -1,9 +0,0 @@
-import { IItem } from '@rpg-engine/shared';
-import React from 'react';
-interface IProps {
-    item: IItem | null;
-    x: number;
-    y: number;
-}
-export declare const ItemCard: React.FC<IProps>;
-export {};

package/dist/components/store/UI.store.d.ts

@@ -1,34 +0,0 @@
-import { IItem, ItemSocketEvents, ItemType } from '@rpg-engine/shared';
-import { IContextMenuItem } from '../Item/Inventory/itemContainerHelper';
-import { SlotContainerType } from '../Item/Inventory/ItemSlot';
-interface IContextMenu {
-    visible: boolean;
-    posX: number;
-    posY: number;
-    slotItem: IItem | null;
-    slotIndex?: number | null;
-    contextActions: IContextMenuItem[];
-}
-interface IHoverDetail {
-    visible: boolean;
-    posX: number;
-    posY: number;
-    item: IItem | null;
-}
-interface ISetContextMenu extends Omit<IContextMenu, 'contextActions'> {
-}
-declare class UIStore {
-    contextMenu: IContextMenu | null;
-    onHoverDetail: IHoverDetail | null;
-    constructor();
-    setContextMenu(contextMenu: ISetContextMenu, itemType: ItemType): void;
-    setEquipContextMenu(contextMenu: ISetContextMenu, itemType: ItemType, isItemContainer: boolean | undefined): void;
-    clearContextMenu(): void;
-    setItemHoverDetail(hoverDetail: IHoverDetail): void;
-    clearItemHoverDetail(): void;
-    handleOnItemClick: (item: IItem, posX: number, posY: number, slotContainerType: SlotContainerType | null) => void;
-    handleOnMouseHover: (event: any, slotIndex: number, item: IItem | null, posX: number, posY: number, onMouseOver: any) => void;
-    onSelected(selectedActionId: ItemSocketEvents | string, onActionSelected: any): void;
-}
-export declare const uiStore: UIStore;
-export {};

package/src/components/Item/Cards/ItemCard.tsx

@@ -1,36 +0,0 @@
-import { IItem } from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-
-interface IProps {
-  item: IItem | null;
-  x: number;
-  y: number;
-}
-
-export const ItemCard: React.FC<IProps> = ({ item, x, y }) => {
-  return (
-    <Container x={x} y={y}>
-      {item?.name}
-    </Container>
-  );
-};
-
-interface IContainerProps {
-  x?: number;
-  y?: number;
-  fontSize?: number;
-}
-const Container = styled.div<IContainerProps>`
-  position: absolute;
-  top: ${props => props.y || 0}px;
-  left: ${props => props.x || 0}px;
-  font-size: 0.5rem;
-  color: white;
-  background-color: black;
-  border-radius: 5px;
-  padding: 0.5rem;
-  min-width: 20px;
-
-  opacity: 0.5;
-`;