tgui-core 1.0.2 → 1.0.4

package/stories/ByondUi.stories.tsx

@@ -0,0 +1,45 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { useState } from 'react';
+
+import { Button, ByondUi, Section, TextArea } from '../components';
+
+export const meta = {
+  title: 'ByondUi',
+  render: () => <Story />,
+};
+
+const Story = (props) => {
+  const [code, setCode] = useState(
+    `Byond.winset('${Byond.windowId}', {\n  'is-visible': true,\n})`
+  );
+  return (
+    <>
+      <Section title="Button">
+        <ByondUi
+          params={{
+            type: 'button',
+            text: 'Button',
+          }}
+        />
+      </Section>
+      <Section
+        title="Make BYOND calls"
+        buttons={<Button icon="chevron-right">Evaluate</Button>}
+      >
+        <TextArea
+          as="textarea"
+          width="100%"
+          height="10em"
+          onChange={(e, value) => setCode(value)}
+        >
+          {code}
+        </TextArea>
+      </Section>
+    </>
+  );
+};

package/stories/Collapsible.stories.tsx

@@ -0,0 +1,23 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { Button, Collapsible, Section } from '../components';
+import { BoxWithSampleText } from './common';
+
+export const meta = {
+  title: 'Collapsible',
+  render: () => <Story />,
+};
+
+const Story = (props) => {
+  return (
+    <Section>
+      <Collapsible title="Collapsible Demo" buttons={<Button icon="cog" />}>
+        <BoxWithSampleText />
+      </Collapsible>
+    </Section>
+  );
+};

package/stories/Flex.stories.tsx

@@ -0,0 +1,68 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { useState } from 'react';
+
+import { Button, Flex, Section } from '../components';
+
+export const meta = {
+  title: 'Flex & Sections',
+  render: () => <Story />,
+};
+
+const Story = (props) => {
+  const [grow, setGrow] = useState(1);
+  const [direction, setDirection] = useState('column');
+  const [fill, setFill] = useState(true);
+  const [hasTitle, setHasTitle] = useState(true);
+  return (
+    <Flex height="100%" direction="column">
+      <Flex.Item mb={1}>
+        <Section>
+          <Button
+            fluid
+            onClick={() =>
+              setDirection(direction === 'column' ? 'row' : 'column')
+            }
+          >
+            {`Flex direction="${direction}"`}
+          </Button>
+          <Button fluid onClick={() => setGrow(Number(!grow))}>
+            {`Flex.Item grow={${grow}}`}
+          </Button>
+          <Button fluid onClick={() => setFill(!fill)}>
+            {`Section fill={${String(fill)}}`}
+          </Button>
+          <Button
+            fluid
+            selected={hasTitle}
+            onClick={() => setHasTitle(!hasTitle)}
+          >
+            {`Section title`}
+          </Button>
+        </Section>
+      </Flex.Item>
+      <Flex.Item grow={1}>
+        <Flex height="100%" direction={direction}>
+          <Flex.Item
+            mr={direction === 'row' && 1}
+            mb={direction === 'column' && 1}
+            grow={grow}
+          >
+            <Section title={hasTitle && 'Section 1'} fill={fill}>
+              Content
+            </Section>
+          </Flex.Item>
+          <Flex.Item grow={grow}>
+            <Section title={hasTitle && 'Section 2'} fill={fill}>
+              Content
+            </Section>
+          </Flex.Item>
+        </Flex>
+      </Flex.Item>
+    </Flex>
+  );
+};

package/stories/Input.stories.tsx

@@ -0,0 +1,124 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { useState } from 'react';
+
+import {
+  Box,
+  DraggableControl,
+  Icon,
+  Input,
+  Knob,
+  LabeledList,
+  NumberInput,
+  Section,
+  Slider,
+} from '../components';
+
+export const meta = {
+  title: 'Input',
+  render: () => <Story />,
+};
+
+const Story = (props) => {
+  const [number, setNumber] = useState(0);
+  const [text, setText] = useState('Sample text');
+  return (
+    <Section>
+      <LabeledList>
+        <LabeledList.Item label="Input (onChange)">
+          <Input value={text} onChange={(e, value) => setText(value)} />
+        </LabeledList.Item>
+        <LabeledList.Item label="Input (onInput)">
+          <Input value={text} onInput={(e, value) => setText(value)} />
+        </LabeledList.Item>
+        <LabeledList.Item label="NumberInput (onChange)">
+          <NumberInput
+            animated
+            width="40px"
+            step={1}
+            stepPixelSize={5}
+            value={number}
+            minValue={-100}
+            maxValue={100}
+            onChange={(value) => setNumber(value)}
+          />
+        </LabeledList.Item>
+        <LabeledList.Item label="NumberInput (onDrag)">
+          <NumberInput
+            animated
+            width="40px"
+            step={1}
+            stepPixelSize={5}
+            value={number}
+            minValue={-100}
+            maxValue={100}
+            onDrag={(value) => setNumber(value)}
+          />
+        </LabeledList.Item>
+        <LabeledList.Item label="Slider (onDrag)">
+          <Slider
+            step={1}
+            stepPixelSize={5}
+            value={number}
+            minValue={-100}
+            maxValue={100}
+            onDrag={(e, value) => setNumber(value)}
+          />
+        </LabeledList.Item>
+        <LabeledList.Item label="Knob (onDrag)">
+          <Knob
+            inline
+            size={1}
+            step={1}
+            stepPixelSize={2}
+            value={number}
+            minValue={-100}
+            maxValue={100}
+            onDrag={(e, value) => setNumber(value)}
+          />
+          <Knob
+            ml={1}
+            inline
+            bipolar
+            size={1}
+            step={1}
+            stepPixelSize={2}
+            value={number}
+            minValue={-100}
+            maxValue={100}
+            onDrag={(e, value) => setNumber(value)}
+          />
+        </LabeledList.Item>
+        <LabeledList.Item label="Rotating Icon">
+          <Box inline position="relative">
+            <DraggableControl
+              value={number}
+              minValue={-100}
+              maxValue={100}
+              dragMatrix={[0, -1]}
+              step={1}
+              stepPixelSize={5}
+              onDrag={(e, value) => setNumber(value)}
+            >
+              {(control) => (
+                <Box onMouseDown={control.handleDragStart}>
+                  <Icon
+                    size={4}
+                    color="yellow"
+                    name="times"
+                    rotation={control.displayValue * 4}
+                  />
+                  {control.inputElement}
+                </Box>
+              )}
+            </DraggableControl>
+          </Box>
+        </LabeledList.Item>
+      </LabeledList>
+    </Section>
+  );
+};

package/stories/LabeledList.stories.tsx

@@ -0,0 +1,73 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { Button, LabeledList } from '../components';
+
+export const meta = {
+  title: 'LabeledList',
+  render: () => <Story />,
+};
+
+const Story = (props) => {
+  return (
+    <>
+      <LabeledList>
+        <LabeledList.Item label="Label 1">Entry 1</LabeledList.Item>
+        <LabeledList.Item label={<Button>Nodes as labels:</Button>}>
+          Entry 2
+        </LabeledList.Item>
+        <LabeledList.Item labelColor="green" label="labelColor=green">
+          Entry 3
+        </LabeledList.Item>
+        <LabeledList.Item color="green" label="color=green">
+          Entry 4
+        </LabeledList.Item>
+        <LabeledList.Item buttons={<Button>Test</Button>} label="Buttons prop">
+          Entry 5
+        </LabeledList.Item>
+        <LabeledList.Divider />
+        <LabeledList.Item label="LabeledList.Divider right above us">
+          Entry 6
+        </LabeledList.Item>
+        <LabeledList.Item
+          labelWrap
+          label="Very very very very very very very very very very very very very long label with labelWrap"
+        >
+          Entry 7
+        </LabeledList.Item>
+        <LabeledList.Item
+          labelWrap
+          verticalAlign="middle"
+          label="Very very very very very very very very very very very very very long label with labelWrap and verticalAlign"
+        >
+          Entry 8
+        </LabeledList.Item>
+      </LabeledList>
+      <br />
+      <br />
+      <br />
+      <LabeledList>
+        <LabeledList.Item labelWrap label="List with all labelWrap=true">
+          Entry 1
+        </LabeledList.Item>
+        <LabeledList.Item labelWrap label="List with all labelWrap=true">
+          Entry 2
+        </LabeledList.Item>
+        <LabeledList.Item labelWrap label="List with all labelWrap=true">
+          Entry 3
+        </LabeledList.Item>
+      </LabeledList>
+      <br />
+      <br />
+      <br />
+      <LabeledList>
+        <LabeledList.Item label="Very very very very very very very very very very very very very long label without labelWrap">
+          Entry 1
+        </LabeledList.Item>
+      </LabeledList>
+    </>
+  );
+};

package/stories/Popper.stories.tsx

@@ -0,0 +1,58 @@
+import { Box, Popper } from '../components';
+
+export const meta = {
+  title: 'Popper',
+  render: () => <Story />,
+};
+
+const Story = () => {
+  return (
+    <>
+      <Popper
+        isOpen
+        content={
+          <Box
+            style={{
+              background: 'white',
+              border: '2px solid blue',
+            }}
+          >
+            Loogatme!
+          </Box>
+        }
+        placement="bottom"
+      >
+        <Box
+          style={{
+            border: '5px solid white',
+            height: '300px',
+            width: '200px',
+          }}
+        />
+      </Popper>
+
+      <Popper
+        isOpen
+        content={
+          <Box
+            style={{
+              background: 'white',
+              border: '2px solid blue',
+            }}
+          >
+            I am on the right!
+          </Box>
+        }
+        placement="right"
+      >
+        <Box
+          style={{
+            border: '5px solid white',
+            height: '500px',
+            width: '100px',
+          }}
+        />
+      </Popper>
+    </>
+  );
+};

package/stories/ProgressBar.stories.tsx

@@ -0,0 +1,58 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { useState } from 'react';
+import {
+  Box,
+  Button,
+  Input,
+  LabeledList,
+  ProgressBar,
+  Section,
+} from '../components';
+
+export const meta = {
+  title: 'ProgressBar',
+  render: () => <Story />,
+};
+
+const Story = (props) => {
+  const [progress, setProgress] = useState(0.5);
+  const [color, setColor] = useState('');
+
+  return (
+    <Section>
+      <ProgressBar
+        value={progress}
+        color={color}
+        ranges={{
+          good: [0.5, Infinity],
+          bad: [-Infinity, 0.1],
+          average: [0, 0.5],
+        }}
+      >
+        Value: {Number(progress).toFixed(1)}
+      </ProgressBar>
+      <Box mt={1}>
+        <LabeledList>
+          <LabeledList.Item label="Adjust value">
+            <Button
+              content="-0.1"
+              onClick={() => setProgress(progress - 0.1)}
+            />
+            <Button
+              content="+0.1"
+              onClick={() => setProgress(progress + 0.1)}
+            />
+          </LabeledList.Item>
+          <LabeledList.Item label="Override color">
+            <Input value={color} onChange={(e, value) => setColor(value)} />
+          </LabeledList.Item>
+        </LabeledList>
+      </Box>
+    </Section>
+  );
+};

package/stories/Stack.stories.tsx

@@ -0,0 +1,55 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { Box, Section, Stack } from '../components';
+
+export const meta = {
+  title: 'Stack',
+  render: () => <Story />,
+};
+
+const Filler = () => (
+  <Box inline width={1} height={1}>
+    A
+  </Box>
+);
+
+const SmallStackItems = () => (
+  <>
+    <Stack.Item>
+      <Filler />
+    </Stack.Item>
+    <Stack.Divider />
+    <Stack.Item>
+      <Filler />
+    </Stack.Item>
+  </>
+);
+
+const Story = (props) => {
+  return (
+    <Section fill>
+      <Stack fill className="debug-layout">
+        <SmallStackItems />
+        <Stack.Item grow={1}>
+          <Stack fill vertical zebra>
+            <SmallStackItems />
+            <Stack.Item>
+              <Stack fill>
+                <SmallStackItems />
+                <Stack.Item grow={1} />
+                <SmallStackItems />
+                <SmallStackItems />
+              </Stack>
+            </Stack.Item>
+            <Stack.Item grow={1} />
+            <SmallStackItems />
+          </Stack>
+        </Stack.Item>
+      </Stack>
+    </Section>
+  );
+};

package/stories/Storage.stories.tsx

@@ -0,0 +1,46 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { storage } from '../common/storage';
+
+import { Button, LabeledList, NoticeBox, Section } from '../components';
+import { formatSiUnit } from '../src/format';
+
+export const meta = {
+  title: 'Storage',
+  render: () => <Story />,
+};
+
+const Story = (props) => {
+  if (!window.localStorage) {
+    return <NoticeBox>Local storage is not available.</NoticeBox>;
+  }
+  return (
+    <Section
+      title="Local Storage"
+      buttons={
+        <Button
+          icon="recycle"
+          onClick={() => {
+            localStorage.clear();
+            storage.clear();
+          }}
+        >
+          Clear
+        </Button>
+      }
+    >
+      <LabeledList>
+        <LabeledList.Item label="Keys in use">
+          {localStorage.length}
+        </LabeledList.Item>
+        <LabeledList.Item label="Remaining space">
+          {formatSiUnit(localStorage.remainingSpace, 0, 'B')}
+        </LabeledList.Item>
+      </LabeledList>
+    </Section>
+  );
+};

package/stories/Themes.stories.tsx

@@ -0,0 +1,30 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { Input, LabeledList, Section } from '../components';
+import { useState } from 'react';
+
+export const meta = {
+  title: 'Themes',
+  render: () => <Story />,
+};
+
+const Story = (props) => {
+  const [theme, setTheme] = useState('');
+  return (
+    <Section>
+      <LabeledList>
+        <LabeledList.Item label="Use theme">
+          <Input
+            placeholder="theme_name"
+            value={theme}
+            onInput={(e, value) => setTheme(value)}
+          />
+        </LabeledList.Item>
+      </LabeledList>
+    </Section>
+  );
+};

package/stories/Tooltip.stories.tsx

@@ -0,0 +1,48 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { Placement } from '@popperjs/core';
+import { Box, Button, Section, Tooltip } from '../components';
+
+export const meta = {
+  title: 'Tooltip',
+  render: () => <Story />,
+};
+
+const Story = () => {
+  const positions: Placement[] = [
+    'top',
+    'left',
+    'right',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+  ];
+
+  return (
+    <Section>
+      <Box>
+        <Tooltip content="Tooltip text.">
+          <Box inline position="relative" mr={1}>
+            Box (hover me).
+          </Box>
+        </Tooltip>
+        <Button tooltip="Tooltip text." content="Button" />
+      </Box>
+      <Box mt={1}>
+        {positions.map((position) => (
+          <Button
+            key={position}
+            color="transparent"
+            tooltip="Tooltip text."
+            tooltipPosition={position}
+            content={position}
+          />
+        ))}
+      </Box>
+    </Section>
+  );
+};

package/stories/common.tsx

@@ -0,0 +1,19 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { Box } from '../components';
+
+export const BoxWithSampleText = (props) => {
+  return (
+    <Box {...props}>
+      <Box italic>Jackdaws love my big sphinx of quartz.</Box>
+      <Box mt={1} bold>
+        The wide electrification of the southern provinces will give a powerful
+        impetus to the growth of agriculture.
+      </Box>
+    </Box>
+  );
+};

package/tsconfig.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
-    "baseUrl": ".",
     "checkJs": false,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
@@ -17,26 +16,6 @@
     "module": "ESNext",
     "moduleResolution": "Node",
     "noEmit": true,
-    "paths": {
-      "components/*": [
-        "src/components/*"
-      ],
-      "common/*": [
-        "src/common/*"
-      ],
-      "debug/*": [
-        "src/debug/*"
-      ],
-      "layouts/*": [
-        "src/layouts/*"
-      ],
-      "interfaces/*": [
-        "src/interfaces/*"
-      ],
-      "styles/*": [
-        "src/styles/*"
-      ]
-    },
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": false,