@tradejs/app 2.0.21 → 3.0.0

package/src/app/routes/backtest/BacktestRunForm.tsx

@@ -0,0 +1,502 @@
+'use client';
+
+import React from 'react';
+import {
+  Badge,
+  Box,
+  Button,
+  Checkbox,
+  Field,
+  Flex,
+  Grid,
+  Input,
+  Stack,
+  Text,
+} from '@chakra-ui/react';
+import { FiPlay, FiX } from 'react-icons/fi';
+import { Segment, Select, SelectWithSearch } from '#ui';
+import { useBacktestRunsController } from './useBacktestRunsController';
+
+type BacktestRunsController = ReturnType<typeof useBacktestRunsController>;
+
+const PERIOD_ITEMS = [
+  { label: 'Days', value: 'days' },
+  { label: 'Date range', value: 'range' },
+];
+const INTERVAL_ITEMS = [
+  { label: '5m', value: '5' },
+  { label: '15m', value: '15' },
+  { label: '30m', value: '30' },
+  { label: '1h', value: '60' },
+  { label: '4h', value: '240' },
+];
+const CONNECTOR_ITEMS = [
+  { label: 'Bybit', value: 'bybit' },
+  { label: 'Binance', value: 'binance' },
+  { label: 'Coinbase', value: 'coinbase' },
+];
+
+const controlSurface = 'rgba(255, 255, 255, 0.035)';
+const controlSurfaceHover = 'rgba(255, 255, 255, 0.05)';
+
+const inputControlProps = {
+  bg: controlSurface,
+  borderColor: 'gray.700',
+  color: 'gray.100',
+  _placeholder: { color: 'gray.500' },
+  _hover: {
+    bg: controlSurfaceHover,
+    borderColor: 'gray.600',
+  },
+  _focusVisible: {
+    borderColor: 'gray.500',
+    boxShadow: '0 0 0 1px var(--chakra-colors-gray-500)',
+  },
+};
+
+const SelectControl = ({ children }: { children: React.ReactNode }) => (
+  <Box
+    w="full"
+    minW={0}
+    css={{
+      '& [data-part="control"]': {
+        width: '100%',
+      },
+      '& [data-part="trigger"], & [data-part="input"]': {
+        background: controlSurface,
+        borderColor: 'var(--chakra-colors-gray-700)',
+        color: 'var(--chakra-colors-gray-100)',
+        minWidth: '0',
+        width: '100%',
+      },
+      '& [data-part="trigger"]': {
+        flex: '1',
+        minHeight: '40px',
+      },
+      '& [data-part="input"]': {
+        flex: '1',
+        minHeight: '40px',
+      },
+      '& [data-part="indicator-group"]': {
+        flexShrink: '0',
+      },
+      '& [data-part="trigger"]:is(:hover, [data-hover]), & [data-part="input"]:is(:hover, [data-hover])':
+        {
+          background: controlSurfaceHover,
+          borderColor: 'var(--chakra-colors-gray-600)',
+        },
+      '& [data-part="trigger"]:is(:focus-visible, [data-focus-visible]), & [data-part="input"]:is(:focus-visible, [data-focus-visible])':
+        {
+          borderColor: 'var(--chakra-colors-gray-500)',
+          boxShadow: '0 0 0 1px var(--chakra-colors-gray-500)',
+        },
+      '& [data-part="control"]:is(:hover, [data-hover]) [data-part="input"]': {
+        background: controlSurfaceHover,
+        borderColor: 'var(--chakra-colors-gray-600)',
+      },
+    }}
+  >
+    {children}
+  </Box>
+);
+
+interface FormSectionProps {
+  title: string;
+  columns: string;
+  children: React.ReactNode;
+}
+
+const FormSection = ({ title, columns, children }: FormSectionProps) => (
+  <Stack gap={3} minW={0}>
+    <Text
+      color="gray.400"
+      fontSize="xs"
+      fontWeight="700"
+      letterSpacing="0"
+      textTransform="uppercase"
+    >
+      {title}
+    </Text>
+    <Grid templateColumns={columns} gap={3} alignItems="end">
+      {children}
+    </Grid>
+  </Stack>
+);
+
+export const BacktestRunForm = ({
+  controller,
+}: {
+  controller: BacktestRunsController;
+}) => {
+  const {
+    state,
+    strategyItems,
+    configItems,
+    selectedConfig,
+    tickerItems,
+    ensureTickersLoaded,
+    updateForm,
+    setSelectedTickers,
+    start,
+  } = controller;
+  const { configs, starting, onboardingMode, form } = state;
+  const {
+    selectedStrategy,
+    selectedConfigId,
+    periodMode,
+    days,
+    startDate,
+    endDate,
+    ai,
+    fast,
+    interval,
+    connector,
+    selectedTickers,
+    tickersLimit,
+    testsLimit,
+    parallel,
+  } = form;
+  const hasConfigs = configs.length > 0;
+
+  const handleStart = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    void start();
+  };
+
+  return (
+    <Box maxW="1200px" w="full">
+      <Box
+        borderWidth="1px"
+        borderColor="gray.700"
+        bg="gray.800"
+        p={4}
+        borderRadius="md"
+      >
+        <form onSubmit={handleStart}>
+          <Stack gap={5}>
+            <Flex alignItems="center" justifyContent="space-between" gap={4}>
+              <Flex alignItems="center" gap={3} minW={0}>
+                <Text fontWeight="700" flexShrink={0}>
+                  New run
+                </Text>
+                {onboardingMode ? (
+                  <Badge colorPalette="teal">First backtest preset</Badge>
+                ) : null}
+                {selectedConfig ? (
+                  <Flex gap={2} wrap="wrap">
+                    <Badge colorPalette="teal">
+                      {selectedConfig.combinationCount} combos
+                    </Badge>
+                    <Badge colorPalette="gray">
+                      {selectedConfig.paramCount} params
+                    </Badge>
+                  </Flex>
+                ) : null}
+              </Flex>
+            </Flex>
+
+            <FormSection title="Strategy" columns="repeat(2, minmax(0, 1fr))">
+              <Field.Root>
+                <Field.Label>Strategy</Field.Label>
+                <SelectControl>
+                  <Select
+                    placeholder="Strategy"
+                    value={selectedStrategy ? [selectedStrategy] : []}
+                    defaultValue={selectedStrategy ? [selectedStrategy] : []}
+                    onChange={(value) =>
+                      updateForm({ selectedStrategy: value[0] || '' })
+                    }
+                    items={strategyItems}
+                    emptyState="No backtest configs"
+                    width="100%"
+                    disabled={!hasConfigs}
+                  />
+                </SelectControl>
+              </Field.Root>
+
+              <Field.Root>
+                <Field.Label>Config</Field.Label>
+                <SelectControl>
+                  <Select
+                    placeholder="Config"
+                    value={selectedConfigId ? [selectedConfigId] : []}
+                    defaultValue={selectedConfigId ? [selectedConfigId] : []}
+                    onChange={(value) =>
+                      updateForm({ selectedConfigId: value[0] || '' })
+                    }
+                    items={configItems}
+                    emptyState="No configs for strategy"
+                    width="100%"
+                    disabled={!selectedStrategy}
+                  />
+                </SelectControl>
+              </Field.Root>
+            </FormSection>
+
+            <Grid
+              templateColumns="minmax(0, 1fr) 260px"
+              gap={5}
+              alignItems="start"
+            >
+              <FormSection
+                title="Date window"
+                columns={
+                  periodMode === 'days'
+                    ? '280px minmax(0, 1fr)'
+                    : '280px repeat(2, minmax(0, 1fr))'
+                }
+              >
+                <Field.Root>
+                  <Field.Label>Mode</Field.Label>
+                  <Segment
+                    defaultValue="days"
+                    value={periodMode}
+                    items={PERIOD_ITEMS}
+                    onChange={(value) =>
+                      updateForm({
+                        periodMode: value === 'range' ? 'range' : 'days',
+                      })
+                    }
+                  />
+                </Field.Root>
+
+                {periodMode === 'days' ? (
+                  <Field.Root>
+                    <Field.Label>Days</Field.Label>
+                    <Input
+                      value={days}
+                      type="number"
+                      min={1}
+                      step={1}
+                      {...inputControlProps}
+                      onChange={(event) =>
+                        updateForm({ days: event.target.value })
+                      }
+                    />
+                  </Field.Root>
+                ) : (
+                  <>
+                    <Field.Root>
+                      <Field.Label>Start</Field.Label>
+                      <Input
+                        value={startDate}
+                        type="date"
+                        {...inputControlProps}
+                        onChange={(event) =>
+                          updateForm({ startDate: event.target.value })
+                        }
+                      />
+                    </Field.Root>
+                    <Field.Root>
+                      <Field.Label>End</Field.Label>
+                      <Input
+                        value={endDate}
+                        type="date"
+                        {...inputControlProps}
+                        onChange={(event) =>
+                          updateForm({ endDate: event.target.value })
+                        }
+                      />
+                    </Field.Root>
+                  </>
+                )}
+              </FormSection>
+
+              <FormSection title="Options" columns="1fr">
+                <Flex gap={4} alignItems="center" minH="40px">
+                  <Checkbox.Root
+                    colorPalette="teal"
+                    checked={ai}
+                    onCheckedChange={(details) =>
+                      updateForm({ ai: details.checked === true })
+                    }
+                  >
+                    <Checkbox.HiddenInput />
+                    <Checkbox.Control
+                      bg={controlSurface}
+                      borderColor="gray.600"
+                    />
+                    <Checkbox.Label>AI</Checkbox.Label>
+                  </Checkbox.Root>
+                  <Checkbox.Root
+                    colorPalette="teal"
+                    checked={fast}
+                    onCheckedChange={(details) =>
+                      updateForm({ fast: details.checked === true })
+                    }
+                  >
+                    <Checkbox.HiddenInput />
+                    <Checkbox.Control
+                      bg={controlSurface}
+                      borderColor="gray.600"
+                    />
+                    <Checkbox.Label>Fast</Checkbox.Label>
+                  </Checkbox.Root>
+                </Flex>
+              </FormSection>
+            </Grid>
+
+            <FormSection title="Runtime" columns="220px 260px minmax(0, 1fr)">
+              <Field.Root>
+                <Field.Label>Interval</Field.Label>
+                <SelectControl>
+                  <Select
+                    placeholder="Interval"
+                    value={[interval]}
+                    defaultValue={[interval]}
+                    onChange={(value) =>
+                      updateForm({ interval: value[0] || '15' })
+                    }
+                    items={INTERVAL_ITEMS}
+                    width="100%"
+                  />
+                </SelectControl>
+              </Field.Root>
+
+              <Field.Root>
+                <Field.Label>Connector</Field.Label>
+                <SelectControl>
+                  <Select
+                    placeholder="Connector"
+                    value={[connector]}
+                    defaultValue={[connector]}
+                    onChange={(value) => {
+                      updateForm({
+                        connector: value[0] || 'binance',
+                        selectedTickers: [],
+                      });
+                    }}
+                    items={CONNECTOR_ITEMS}
+                    width="100%"
+                  />
+                </SelectControl>
+              </Field.Root>
+
+              <Field.Root>
+                <Field.Label>Tickers</Field.Label>
+                <Stack gap={2} w="full" minW={0}>
+                  <SelectControl>
+                    <SelectWithSearch
+                      key={connector}
+                      multiple
+                      placeholder="All tickers"
+                      emptyState="No tickers"
+                      defaultValue={[]}
+                      value={selectedTickers}
+                      items={tickerItems}
+                      width="100%"
+                      onChange={setSelectedTickers}
+                      onOpenChange={(open) => {
+                        if (open) {
+                          void ensureTickersLoaded().catch(() => undefined);
+                        }
+                      }}
+                    />
+                  </SelectControl>
+                  {selectedTickers.length ? (
+                    <Flex gap={2} wrap="wrap">
+                      {selectedTickers.map((ticker) => (
+                        <Badge
+                          key={ticker}
+                          colorPalette="teal"
+                          display="inline-flex"
+                          alignItems="center"
+                          gap={1}
+                          py="1"
+                        >
+                          {ticker}
+                          <Box
+                            as="span"
+                            role="button"
+                            tabIndex={0}
+                            aria-label={`Remove ${ticker}`}
+                            color="gray.300"
+                            cursor="pointer"
+                            _hover={{ color: 'white' }}
+                            onKeyDown={(event) => {
+                              if (event.key === 'Enter' || event.key === ' ') {
+                                event.preventDefault();
+                                setSelectedTickers((currentTickers) =>
+                                  currentTickers.filter(
+                                    (currentTicker) => currentTicker !== ticker,
+                                  ),
+                                );
+                              }
+                            }}
+                            onClick={() =>
+                              setSelectedTickers((currentTickers) =>
+                                currentTickers.filter(
+                                  (currentTicker) => currentTicker !== ticker,
+                                ),
+                              )
+                            }
+                          >
+                            <FiX size={12} />
+                          </Box>
+                        </Badge>
+                      ))}
+                    </Flex>
+                  ) : null}
+                </Stack>
+              </Field.Root>
+            </FormSection>
+
+            <FormSection title="Limits" columns="repeat(3, 1fr)">
+              <Field.Root>
+                <Field.Label>Tickers limit</Field.Label>
+                <Input
+                  value={tickersLimit}
+                  type="number"
+                  min={1}
+                  {...inputControlProps}
+                  onChange={(event) =>
+                    updateForm({ tickersLimit: event.target.value })
+                  }
+                />
+              </Field.Root>
+
+              <Field.Root>
+                <Field.Label>Tests limit</Field.Label>
+                <Input
+                  value={testsLimit}
+                  type="number"
+                  min={1}
+                  {...inputControlProps}
+                  onChange={(event) =>
+                    updateForm({ testsLimit: event.target.value })
+                  }
+                />
+              </Field.Root>
+
+              <Field.Root>
+                <Field.Label>Parallel</Field.Label>
+                <Input
+                  value={parallel}
+                  type="number"
+                  min={1}
+                  {...inputControlProps}
+                  onChange={(event) =>
+                    updateForm({ parallel: event.target.value })
+                  }
+                />
+              </Field.Root>
+            </FormSection>
+
+            <Flex justifyContent="flex-end" pt={1}>
+              <Button
+                type="submit"
+                colorPalette="teal"
+                disabled={!selectedConfigId || starting}
+                loading={starting}
+                minW="160px"
+              >
+                <FiPlay />
+                Start
+              </Button>
+            </Flex>
+          </Stack>
+        </form>
+      </Box>
+    </Box>
+  );
+};