@tradejs/app 1.0.0

package/src/app/components/Shared/Filters/Backtest/index.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import _ from 'lodash';
+import { useEffect, useMemo, useState } from 'react';
+import { Select } from '@UI';
+import { useFiltersContext } from '../context';
+
+export const SelectBacktest = () => {
+  const { filters, backtestFiles, onChangeFilters } = useFiltersContext();
+  const STORAGE_KEY = 'backtest-strategy';
+
+  const tests = useMemo(
+    () => backtestFiles.filter((file) => file.value.startsWith(filters.symbol)),
+    [backtestFiles, filters.symbol],
+  );
+
+  const strategyItems = useMemo(() => {
+    const names = new Set<string>();
+    for (const test of tests) {
+      const strategyName = test.data?.strategyName;
+      if (typeof strategyName === 'string' && strategyName) {
+        names.add(strategyName);
+      }
+    }
+
+    return Array.from(names)
+      .sort()
+      .map((strategyName) => ({
+        label: strategyName,
+        value: strategyName,
+      }));
+  }, [tests]);
+
+  const [selectedStrategy, setSelectedStrategy] = useState<string>('');
+
+  useEffect(() => {
+    if (_.isEmpty(strategyItems)) {
+      setSelectedStrategy('');
+      return;
+    }
+
+    if (
+      filters.backtestStrategy &&
+      strategyItems.some((item) => item.value === filters.backtestStrategy) &&
+      selectedStrategy !== filters.backtestStrategy
+    ) {
+      setSelectedStrategy(filters.backtestStrategy);
+      return;
+    }
+
+    if (
+      selectedStrategy &&
+      strategyItems.some((item) => item.value === selectedStrategy)
+    ) {
+      return;
+    }
+
+    const saved =
+      typeof window !== 'undefined'
+        ? window.localStorage.getItem(STORAGE_KEY)
+        : null;
+
+    const defaultStrategy =
+      saved && strategyItems.some((item) => item.value === saved)
+        ? saved
+        : strategyItems[0]?.value || '';
+
+    if (defaultStrategy) {
+      setSelectedStrategy(defaultStrategy);
+    }
+  }, [strategyItems, filters.backtestStrategy, selectedStrategy]);
+
+  useEffect(() => {
+    if (!filters.backtestId) return;
+
+    const selectedTest = tests.find(
+      (test) => test.value === filters.backtestId,
+    );
+    const strategyName = selectedTest?.data?.strategyName;
+
+    if (
+      typeof strategyName === 'string' &&
+      strategyName &&
+      selectedStrategy !== strategyName
+    ) {
+      setSelectedStrategy(strategyName);
+    }
+  }, [filters.backtestId, tests, selectedStrategy]);
+
+  useEffect(() => {
+    if (selectedStrategy && typeof window !== 'undefined') {
+      window.localStorage.setItem(STORAGE_KEY, selectedStrategy);
+    }
+  }, [selectedStrategy]);
+
+  const onChange = (value: string[]) => {
+    onChangeFilters?.({
+      backtestId: value[0] || null,
+    });
+  };
+
+  const onChangeStrategy = (value: string[]) => {
+    const nextStrategy = value[0] || '';
+    setSelectedStrategy(nextStrategy);
+    if (nextStrategy && typeof window !== 'undefined') {
+      window.localStorage.setItem(STORAGE_KEY, nextStrategy);
+    }
+
+    const hasSelectedTest =
+      filters.backtestId &&
+      tests.some(
+        (test) =>
+          test.value === filters.backtestId &&
+          test.data?.strategyName === nextStrategy,
+      );
+
+    if (!hasSelectedTest) {
+      onChangeFilters?.({
+        backtestId: null,
+        backtestStrategy: nextStrategy || null,
+      });
+      return;
+    }
+
+    if (filters.backtestStrategy !== nextStrategy) {
+      onChangeFilters?.({ backtestStrategy: nextStrategy || null });
+    }
+  };
+
+  if (_.isEmpty(tests) || _.isEmpty(strategyItems) || !selectedStrategy) {
+    return null;
+  }
+
+  const strategyTests = tests.filter(
+    (test) => test.data?.strategyName === selectedStrategy,
+  );
+
+  return (
+    <>
+      <Select
+        placeholder="Strategy"
+        defaultValue={[selectedStrategy]}
+        value={[selectedStrategy]}
+        onChange={onChangeStrategy}
+        items={strategyItems}
+        width="220px"
+      />
+      <Select
+        placeholder="Backtest"
+        defaultValue={[filters.backtestId || '']}
+        value={[filters.backtestId || '']}
+        onChange={onChange}
+        items={[
+          {
+            label: 'Not selected',
+            value: '',
+          },
+          ...strategyTests,
+        ]}
+        width="240px"
+      />
+    </>
+  );
+};

package/src/app/components/Shared/Filters/FavoriteIndicator/index.tsx

@@ -0,0 +1,18 @@
+import { useFiltersContext } from '../context';
+import { FavoriteButton } from '@shared/FavoriteButton';
+import { useTickers } from '@store';
+
+export const FavoriteIndicator = () => {
+  const {
+    filters: { symbol, provider },
+  } = useFiltersContext();
+  const { checkIsFavorite, toggleFavorite } = useTickers(provider || 'bybit');
+  const isFavorite = checkIsFavorite(symbol);
+
+  return (
+    <FavoriteButton
+      isFavorite={isFavorite}
+      onChangeFavorite={() => toggleFavorite(symbol)}
+    />
+  );
+};

package/src/app/components/Shared/Filters/Indicators/index.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import _ from 'lodash';
+import { useIndicators } from '@store';
+import { Select } from '@UI';
+
+export const SelectIndicator = () => {
+  const { selectedIndicators, indicatorsItems, setEnabledIndicators } =
+    useIndicators();
+
+  return (
+    <Select
+      defaultValue={selectedIndicators}
+      onChange={setEnabledIndicators}
+      placeholder="Indicators"
+      items={indicatorsItems}
+      multiple={true}
+      width="240px"
+    />
+  );
+};

package/src/app/components/Shared/Filters/Interval/index.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { Segment } from '@UI';
+import { Interval } from '@tradejs/types';
+import { intervals } from './intervals';
+import { useFiltersContext } from '../context';
+
+export const SelectInterval = () => {
+  const { filters, onChangeFilters } = useFiltersContext();
+
+  const onChange = (value: string | null) => {
+    if (!value) {
+      return;
+    }
+
+    const newFilters = {
+      ...filters,
+      interval: value as Interval,
+    };
+
+    onChangeFilters?.(newFilters);
+  };
+
+  return (
+    <Segment
+      defaultValue={filters.interval}
+      onChange={onChange}
+      items={intervals}
+    />
+  );
+};

package/src/app/components/Shared/Filters/Interval/intervals.ts

@@ -0,0 +1,6 @@
+export const intervals = [
+  { label: '15m', value: '15' },
+  { label: '1h', value: '60' },
+  { label: '4h', value: '240' },
+  { label: '12h', value: '720' },
+];

package/src/app/components/Shared/Filters/Provider/index.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { Select } from '@UI';
+import { useFiltersContext } from '../context';
+
+const items = [
+  { value: 'bybit', label: 'ByBit' },
+  { value: 'binance', label: 'Binance' },
+  { value: 'coinbase', label: 'Coinbase' },
+];
+
+export const SelectProvider = () => {
+  const { filters, onChangeFilters } = useFiltersContext();
+
+  const onChange = (value: string[]) => {
+    if (!value[0]) return;
+    onChangeFilters?.({
+      provider: value[0] as 'bybit' | 'binance' | 'coinbase',
+      backtestId: null,
+      backtestStrategy: null,
+    });
+  };
+
+  return (
+    <Select
+      defaultValue={[filters.provider || 'bybit']}
+      onChange={onChange}
+      items={items}
+      width="140px"
+    />
+  );
+};

package/src/app/components/Shared/Filters/Root/index.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+import { FiltersContext } from '../context';
+import { UIFilters, Items, OnChangeFilters } from '@tradejs/types';
+
+interface RootProps {
+  tickers: Items;
+  backtestFiles: Items;
+  filters: UIFilters;
+  onChangeFilters?: OnChangeFilters;
+}
+
+export const Root = ({
+  filters,
+  tickers,
+  backtestFiles,
+  onChangeFilters,
+  children,
+}: PropsWithChildren<RootProps>) => {
+  return (
+    <FiltersContext.Provider
+      value={{ filters, tickers, backtestFiles, onChangeFilters }}
+    >
+      {children}
+    </FiltersContext.Provider>
+  );
+};

package/src/app/components/Shared/Filters/Symbol/index.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import _ from 'lodash';
+import { SelectWithSearch } from '@UI';
+import { SkeletonText, Stack, Show } from '@chakra-ui/react';
+import { useFiltersContext } from '../context';
+
+interface SelectSymbolProps {}
+
+export const SelectSymbol = ({}: SelectSymbolProps) => {
+  const { filters, tickers, onChangeFilters } = useFiltersContext();
+  const loading = _.isEmpty(tickers);
+  const defaultInputValue =
+    tickers.find(({ value }) => value === filters.symbol)?.label ||
+    filters.symbol;
+
+  const onChange = (value: string[]) => {
+    if (_.isEmpty(value)) {
+      return;
+    }
+
+    const newFilters = {
+      symbol: value[0],
+      backtestId: null,
+      backtestStrategy: null,
+    };
+
+    onChangeFilters?.(newFilters);
+  };
+
+  return (
+    <Show
+      when={!loading}
+      fallback={
+        <Stack width="240px">
+          <SkeletonText height={8} noOfLines={1} />
+        </Stack>
+      }
+    >
+      <SelectWithSearch
+        defaultValue={[filters.symbol]}
+        defaultInputValue={defaultInputValue}
+        onChange={onChange}
+        items={tickers}
+        width="240px"
+      />
+    </Show>
+  );
+};

package/src/app/components/Shared/Filters/context.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+import { UIFilters, Items, OnChangeFilters } from '@tradejs/types';
+
+interface FiltersContextProps {
+  filters: UIFilters;
+  tickers: Items;
+  backtestFiles: Items;
+  onChangeFilters?: OnChangeFilters;
+}
+
+export const FiltersContext = createContext<FiltersContextProps>(
+  {} as FiltersContextProps,
+);
+
+export const useFiltersContext = () => {
+  return useContext(FiltersContext);
+};

package/src/app/components/Shared/Filters/index.ts

@@ -0,0 +1,17 @@
+import { Root } from './Root';
+import { SelectInterval } from './Interval';
+import { SelectProvider } from './Provider';
+import { SelectSymbol } from './Symbol';
+import { SelectBacktest } from './Backtest';
+import { SelectIndicator } from './Indicators';
+import { FavoriteIndicator } from './FavoriteIndicator';
+
+export const Filters = {
+  Root,
+  SelectProvider,
+  SelectInterval,
+  SelectSymbol,
+  SelectBacktest,
+  SelectIndicator,
+  FavoriteIndicator,
+};

package/src/app/components/Shared/Sidebar/index.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { Box, Flex, IconButton, VStack } from '@chakra-ui/react';
+import { useRouter, usePathname } from 'next/navigation';
+import { signOut } from 'next-auth/react';
+import { FiActivity, FiBarChart2, FiLogOut, FiPlay } from 'react-icons/fi';
+
+export const Sidebar = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const navItems = [
+    {
+      icon: FiBarChart2,
+      label: 'Dashboard',
+      path: '/routes/dashboard',
+    },
+    {
+      icon: FiPlay,
+      label: 'Backtest',
+      path: '/routes/backtest',
+    },
+    {
+      icon: FiActivity,
+      label: 'Derivatives',
+      path: '/routes/derivatives',
+    },
+  ];
+
+  return (
+    <Box
+      position="fixed"
+      top={0}
+      left={0}
+      h="100vh"
+      w="60px"
+      bg="gray.800"
+      color="white"
+      py={4}
+      px={3}
+      zIndex={1000}
+    >
+      <Flex direction="column" h="100%" justify="space-between">
+        <VStack>
+          {navItems.map(({ icon: Icon, label, path }) => (
+            <IconButton
+              key={path}
+              mb={2}
+              aria-label={label}
+              size="md"
+              colorPalette="teal"
+              variant={pathname.includes(path) ? 'solid' : 'outline'}
+              onClick={() => router.push(path)}
+            >
+              <Icon />
+            </IconButton>
+          ))}
+        </VStack>
+
+        <IconButton
+          aria-label="Sign out"
+          size="md"
+          colorPalette="teal"
+          variant="outline"
+          onClick={() => signOut({ callbackUrl: '/routes/signin' })}
+        >
+          <FiLogOut />
+        </IconButton>
+      </Flex>
+    </Box>
+  );
+};

package/src/app/components/UI/ColorMode/index.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import {
+  ClientOnly,
+  IconButton,
+  Skeleton,
+  Span,
+  type IconButtonProps,
+  type SpanProps,
+} from '@chakra-ui/react';
+import { ThemeProvider, useTheme, type ThemeProviderProps } from 'next-themes';
+import * as React from 'react';
+import { LuMoon, LuSun } from 'react-icons/lu';
+
+export interface ColorModeProviderProps extends ThemeProviderProps {}
+
+export function ColorModeProvider(props: ColorModeProviderProps) {
+  return (
+    <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
+  );
+}
+
+export type ColorMode = 'light' | 'dark';
+
+export interface UseColorModeReturn {
+  colorMode: ColorMode;
+  setColorMode: (colorMode: ColorMode) => void;
+  toggleColorMode: () => void;
+}
+
+export function useColorMode(): UseColorModeReturn {
+  const { resolvedTheme, setTheme } = useTheme();
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+  };
+  return {
+    colorMode: resolvedTheme as ColorMode,
+    setColorMode: setTheme,
+    toggleColorMode,
+  };
+}
+
+export function useColorModeValue<T>(light: T, dark: T) {
+  const { colorMode } = useColorMode();
+  return colorMode === 'dark' ? dark : light;
+}
+
+export function ColorModeIcon() {
+  const { colorMode } = useColorMode();
+  return colorMode === 'dark' ? <LuMoon /> : <LuSun />;
+}
+
+interface ColorModeButtonProps extends Omit<IconButtonProps, 'aria-label'> {}
+
+export const ColorModeButton = React.forwardRef<
+  HTMLButtonElement,
+  ColorModeButtonProps
+>(function ColorModeButton(props, ref) {
+  const { toggleColorMode } = useColorMode();
+  return (
+    <ClientOnly fallback={<Skeleton boxSize="8" />}>
+      <IconButton
+        onClick={toggleColorMode}
+        variant="ghost"
+        aria-label="Toggle color mode"
+        size="sm"
+        ref={ref}
+        {...props}
+        css={{
+          _icon: {
+            width: '5',
+            height: '5',
+          },
+        }}
+      >
+        <ColorModeIcon />
+      </IconButton>
+    </ClientOnly>
+  );
+});
+
+export const LightMode = React.forwardRef<HTMLSpanElement, SpanProps>(
+  function LightMode(props, ref) {
+    return (
+      <Span
+        color="fg"
+        display="contents"
+        className="chakra-theme light"
+        colorPalette="gray"
+        colorScheme="light"
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+export const DarkMode = React.forwardRef<HTMLSpanElement, SpanProps>(
+  function DarkMode(props, ref) {
+    return (
+      <Span
+        color="fg"
+        display="contents"
+        className="chakra-theme dark"
+        colorPalette="gray"
+        colorScheme="dark"
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);

package/src/app/components/UI/EmptyState/index.tsx

@@ -0,0 +1,28 @@
+import { EmptyState as EmptyStateUI, VStack } from '@chakra-ui/react';
+import { IconType } from 'react-icons';
+
+interface EmptyStateProps {
+  title: string;
+  description: React.ReactNode;
+  icon: IconType;
+}
+
+export const EmptyState = ({
+  icon: Icon,
+  title,
+  description,
+}: EmptyStateProps) => {
+  return (
+    <EmptyStateUI.Root>
+      <EmptyStateUI.Content>
+        <EmptyStateUI.Indicator>
+          <Icon />
+        </EmptyStateUI.Indicator>
+        <VStack textAlign="center">
+          <EmptyStateUI.Title>{title}</EmptyStateUI.Title>
+          <EmptyStateUI.Description>{description}</EmptyStateUI.Description>
+        </VStack>
+      </EmptyStateUI.Content>
+    </EmptyStateUI.Root>
+  );
+};

package/src/app/components/UI/OverlaySpinner/index.tsx

@@ -0,0 +1,23 @@
+import { Box, Center, VStack, Spinner, Text } from '@chakra-ui/react';
+
+export const OverlaySpinner = () => {
+  return (
+    <>
+      <Box
+        pos="absolute"
+        inset="0"
+        bg="gray.900"
+        opacity="0.5"
+        zIndex={'overlay'}
+      />
+      <Box pos="absolute" inset="0" zIndex={'modal'}>
+        <Center h="full">
+          <VStack colorPalette="teal">
+            <Spinner color="colorPalette.500" size="lg" />
+            <Text color="colorPalette.500">Loading...</Text>
+          </VStack>
+        </Center>
+      </Box>
+    </>
+  );
+};

package/src/app/components/UI/Segment/index.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { SegmentGroup } from '@chakra-ui/react';
+import { Items } from '@tradejs/types';
+
+interface SegmentProps {
+  defaultValue: string;
+  items: Items;
+  onChange?: (value: string | null) => void;
+}
+
+export const Segment = ({ defaultValue, items, onChange }: SegmentProps) => {
+  return (
+    <SegmentGroup.Root
+      size="md"
+      defaultValue={defaultValue}
+      onValueChange={(e) => onChange?.(e.value)}
+    >
+      <SegmentGroup.Indicator />
+      <SegmentGroup.Items items={items} />
+    </SegmentGroup.Root>
+  );
+};