@tradejs/app 1.0.0

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

@@ -0,0 +1,81 @@
+'use client';
+
+import { useMemo } from 'react';
+import {
+  Portal,
+  Stack,
+  Span,
+  Select as UISelect,
+  createListCollection,
+} from '@chakra-ui/react';
+import { Items } from '@tradejs/types';
+
+interface SelectProps {
+  defaultValue: string[];
+  value?: string[];
+  items: Items;
+  placeholder?: string;
+  width?: string | number;
+  multiple?: boolean;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  onChange?: (value: string[]) => void;
+}
+
+export const Select = ({
+  defaultValue,
+  value,
+  items,
+  multiple = false,
+  placeholder = 'Select',
+  width = '320px',
+  size = 'sm',
+  onChange,
+}: SelectProps) => {
+  const collection = useMemo(
+    () =>
+      createListCollection({
+        items,
+      }),
+    [items],
+  );
+
+  return (
+    <UISelect.Root
+      collection={collection}
+      {...(value ? { value } : { defaultValue })}
+      onValueChange={(details) => onChange?.(details.value)}
+      size={size}
+      multiple={multiple}
+      width={width}
+    >
+      <UISelect.HiddenSelect />
+      <UISelect.Control>
+        <UISelect.Trigger>
+          <UISelect.ValueText placeholder={placeholder} />
+        </UISelect.Trigger>
+        <UISelect.IndicatorGroup>
+          <UISelect.Indicator />
+        </UISelect.IndicatorGroup>
+      </UISelect.Control>
+      <Portal>
+        <UISelect.Positioner>
+          <UISelect.Content>
+            {collection.items.map((item) => (
+              <UISelect.Item item={item} key={item.value}>
+                <Stack gap="0">
+                  <UISelect.ItemText>{item.label}</UISelect.ItemText>
+                  {item.description && (
+                    <Span color="fg.muted" textStyle="xs">
+                      {item.description}
+                    </Span>
+                  )}
+                </Stack>
+                <UISelect.ItemIndicator />
+              </UISelect.Item>
+            ))}
+          </UISelect.Content>
+        </UISelect.Positioner>
+      </Portal>
+    </UISelect.Root>
+  );
+};

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

@@ -0,0 +1,104 @@
+'use client';
+
+import _ from 'lodash';
+import { useEffect, useState } from 'react';
+import {
+  Portal,
+  Stack,
+  HStack,
+  Span,
+  Combobox,
+  useFilter,
+  useListCollection,
+} from '@chakra-ui/react';
+import { Items } from '@tradejs/types';
+
+interface SelectWithSearchProps {
+  defaultValue: string[];
+  defaultInputValue?: string;
+  items: Items;
+  placeholder?: string;
+  emptyState?: string;
+  width?: string | number;
+  multiple?: boolean;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  onChange?: (value: string[]) => void;
+}
+
+export const SelectWithSearch = ({
+  defaultValue,
+  defaultInputValue,
+  items,
+  multiple = false,
+  placeholder = 'Select',
+  emptyState = 'No items found',
+  width = '320px',
+  size = 'sm',
+  onChange,
+}: SelectWithSearchProps) => {
+  const { contains } = useFilter({ sensitivity: 'base' });
+  const [inputValue, setInputValue] = useState(
+    defaultInputValue ?? defaultValue?.[0],
+  );
+
+  const { collection, filter, set } = useListCollection({
+    initialItems: items,
+    filter: contains,
+  });
+
+  useEffect(() => {
+    set(items);
+  }, [items, set]);
+
+  return (
+    <Combobox.Root
+      collection={collection}
+      defaultValue={defaultValue}
+      inputValue={inputValue}
+      onValueChange={(details) => onChange?.(details.value)}
+      onInputValueChange={(e) => {
+        filter(e.inputValue);
+        setInputValue(e.inputValue);
+      }}
+      onOpenChange={(details) => {
+        if (details.open) {
+          filter('');
+          setInputValue('');
+        }
+      }}
+      width={width}
+      multiple={multiple}
+      size={size}
+      openOnClick
+    >
+      <Combobox.Control>
+        <Combobox.Input placeholder={placeholder} />
+        <Combobox.IndicatorGroup>
+          <Combobox.Trigger />
+        </Combobox.IndicatorGroup>
+      </Combobox.Control>
+      <Portal>
+        <Combobox.Positioner>
+          <Combobox.Content>
+            <Combobox.Empty>{emptyState}</Combobox.Empty>
+            {collection.items.map((item) => (
+              <Combobox.Item item={item} key={item.value}>
+                <HStack gap={2}>
+                  <Stack gap="0">
+                    {item.label}
+                    {item.description && (
+                      <Span color="fg.muted" textStyle="xs">
+                        {item.description}
+                      </Span>
+                    )}
+                  </Stack>
+                  <Combobox.ItemIndicator />
+                </HStack>
+              </Combobox.Item>
+            ))}
+          </Combobox.Content>
+        </Combobox.Positioner>
+      </Portal>
+    </Combobox.Root>
+  );
+};

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

@@ -0,0 +1,24 @@
+'use client';
+
+import { Switch } from '@chakra-ui/react';
+
+interface SwitcherProps {
+  defaultValue: boolean;
+  label: string;
+  onChange?: (value: boolean) => void;
+}
+
+export const Switcher = ({ defaultValue, label, onChange }: SwitcherProps) => {
+  return (
+    <Switch.Root
+      checked={defaultValue}
+      onCheckedChange={(e) => onChange?.(e.checked)}
+    >
+      <Switch.HiddenInput />
+      <Switch.Control>
+        <Switch.Thumb />
+      </Switch.Control>
+      <Switch.Label>{label}</Switch.Label>
+    </Switch.Root>
+  );
+};

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

@@ -0,0 +1,45 @@
+'use client';
+
+import { Portal, Toast, Toaster, createToaster } from '@chakra-ui/react';
+
+export const toaster = createToaster({
+  placement: 'bottom-end',
+  offsets: '1rem',
+  pauseOnPageIdle: true,
+});
+
+export const AppToaster = () => {
+  return (
+    <Portal>
+      <Toaster toaster={toaster}>
+        {(toast) => (
+          <Toast.Root
+            width={{ base: 'calc(100vw - 2rem)', md: 'sm' }}
+            maxW="calc(100vw - 2rem)"
+            bg="gray.700"
+            color="gray.100"
+            borderWidth="1px"
+            borderColor="gray.600"
+          >
+            <Toast.Indicator
+              color={
+                toast.type === 'success'
+                  ? 'green.400'
+                  : toast.type === 'error'
+                    ? 'red.400'
+                    : toast.type === 'warning'
+                      ? 'orange.300'
+                      : 'gray.300'
+              }
+            />
+            <Toast.Title>{toast.title}</Toast.Title>
+            {toast.description ? (
+              <Toast.Description>{toast.description}</Toast.Description>
+            ) : null}
+            <Toast.CloseTrigger />
+          </Toast.Root>
+        )}
+      </Toaster>
+    </Portal>
+  );
+};

package/src/app/components/UI/index.ts

@@ -0,0 +1,8 @@
+export { Select } from './Select';
+export { SelectWithSearch } from './SelectWithSearch';
+export { Segment } from './Segment';
+export { Switcher } from './Switcher';
+export { ColorModeProvider } from './ColorMode';
+export { OverlaySpinner } from './OverlaySpinner';
+export { EmptyState } from './EmptyState';
+export { AppToaster, toaster } from './Toaster';

package/src/app/globals.css

@@ -0,0 +1,5 @@
+/* [data-nextjs-devtools-button],
+[data-nextjs-devtools-bubble],
+[data-nextjs-devtools] {
+  left: 76px !important;
+} */

package/src/app/layout.tsx

@@ -0,0 +1,31 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import { ClientOnly } from '@chakra-ui/react';
+import { AppShell } from '@shared/AppShell';
+import Provider from './provider';
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'TradeJS App',
+  description: 'Trading Strategies Framework',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <ClientOnly>
+          <Provider>
+            <AppShell>{children}</AppShell>
+          </Provider>
+        </ClientOnly>
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function Home() {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.replace('/routes/dashboard');
+  }, [router]);
+
+  return <main></main>;
+}

package/src/app/provider.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import {
+  ChakraProvider,
+  createSystem,
+  defaultConfig,
+  defineConfig,
+} from '@chakra-ui/react';
+import { SessionProvider } from 'next-auth/react';
+import { AppToaster, ColorModeProvider } from '@UI';
+
+const config = defineConfig({
+  theme: {
+    tokens: {
+      cursor: {
+        button: { value: 'pointer' },
+      },
+    },
+  },
+});
+
+const system = createSystem(defaultConfig, config);
+
+export default function Provider({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <ChakraProvider value={system}>
+      <ColorModeProvider forcedTheme="dark">
+        <SessionProvider>
+          {children}
+          <AppToaster />
+        </SessionProvider>
+      </ColorModeProvider>
+    </ChakraProvider>
+  );
+}

package/src/app/routes/backtest/[test]/page.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+import { Box, ClientOnly } from '@chakra-ui/react';
+import { useParams } from 'next/navigation';
+import { TestCard } from '@components/Backtest/TestCard';
+
+const BacktestReport = () => {
+  const { test: testName } = useParams();
+
+  if (typeof testName !== 'string') {
+    return null;
+  }
+
+  return (
+    <ClientOnly>
+      <Box minH="100vh" bg="gray.900">
+        <Box minW="1200px" pl={4} pt={4}>
+          <TestCard.Root testName={testName} noWrapper={true}>
+            <TestCard.Title>
+              <TestCard.FavoriteIndicator />
+              <TestCard.ConfigDrawer />
+            </TestCard.Title>
+            <TestCard.Chart height="500px" />
+            <TestCard.StatTable />
+          </TestCard.Root>
+        </Box>
+      </Box>
+    </ClientOnly>
+  );
+};
+
+export default BacktestReport;