feat: organize files

src/components/AllStatsOverview/components/WN8Display/index.tsx

@@ -3,7 +3,7 @@ import { Percentile } from '../../../../constants/percentiles';
 import { translator } from '../../../../core/localization/translator';
 import getWN8Percentile from '../../../../core/statistics/getWN8Percentile';
 import { theme } from '../../../../stitches.config';
-import { PERCENTILE_COLORS } from '../../../PercentileIndicator';
+import { PERCENTILE_COLORS } from '../../../PercentileIndicator/constants';
 import { Glow } from './components/Glow';
 
 export interface WN8DisplayProps {

src/components/Armor/components/CoreArmorSceneComponent/index.tsx

@@ -1,12 +1,6 @@
 import { useFrame } from '@react-three/fiber';
 import { useEffect } from 'react';
-import {
-  MeshBasicMaterial,
-  Object3D,
-  ShaderMaterial,
-  Vector2,
-  WebGLRenderTarget,
-} from 'three';
+import { MeshBasicMaterial, Object3D, ShaderMaterial, Vector2 } from 'three';
 import { degToRad } from 'three/src/math/MathUtils';
 import { canSplash } from '../../../../core/blitz/canSplash';
 import { isExplosive } from '../../../../core/blitz/isExplosive';
@@ -21,8 +15,7 @@ import {
 } from '../../../../stores/tankopedia';
 import fragmentShader from './shaders/fragment.glsl';
 import vertexShader from './shaders/vertex.glsl';
-
-export const spacedArmorRenderTarget = new WebGLRenderTarget();
+import { spacedArmorRenderTarget } from './target';
 
 interface CoreArmorSceneComponentProps {
   thickness: number;

src/components/Armor/components/CoreArmorSceneComponent/target.tsx

@@ -0,0 +1,3 @@
+import { WebGLRenderTarget } from 'three';
+
+export const spacedArmorRenderTarget = new WebGLRenderTarget();

src/components/Armor/index.tsx

@@ -2,7 +2,7 @@ import { createPortal, useFrame } from '@react-three/fiber';
 import { memo, useState } from 'react';
 import { DepthTexture, Scene, Vector2 } from 'three';
 import { CoreArmorScene } from './components/CoreArmorScene';
-import { spacedArmorRenderTarget } from './components/CoreArmorSceneComponent';
+import { spacedArmorRenderTarget } from './components/CoreArmorSceneComponent/target';
 import { SpacedArmorScene } from './components/SpacedArmorScene';
 
 export const Armor = memo(() => {

src/components/Breakdown/components/Root.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-export interface RootProps {
+interface RootProps {
   children: ReactNode;
 }
 

src/components/Breakdown/components/Row.tsx

@@ -5,7 +5,8 @@ import {
   GrayColor,
   PALETTES,
 } from '../../../constants/radixColors';
-import { TREE_TYPE_ICONS, TankClass, TreeType } from '../../Tanks';
+import { TankClass, TreeType } from '../../Tanks';
+import { TREE_TYPE_ICONS } from '../../Tanks/components/Item/constants';
 import { RowStat } from './RowStat';
 
 export interface RowStatItem {

src/components/Breakdown/components/RowStat.tsx

@@ -7,7 +7,7 @@ import {
 } from '../../../constants/radixColors';
 import PercentileIndicator from '../../PercentileIndicator';
 
-export interface RowStatProps {
+interface RowStatProps {
   name: string;
   value?: string | number;
   delta?: number;

src/components/GenericAllStats/components/Card.tsx

@@ -2,13 +2,13 @@ import { Percentile } from '../../../constants/percentiles';
 import { theme } from '../../../stitches.config';
 import PercentileIndicator from '../../PercentileIndicator';
 
-export interface CardItem {
+interface CardItem {
   label: string;
   value: string | number | undefined;
   percentile?: Percentile;
 }
 
-export interface CardProps {
+interface CardProps {
   items: CardItem[];
   title: string;
 }

src/components/GenericAllStats/components/Root.tsx

@@ -1,4 +1,4 @@
-export interface RootProps {
+interface RootProps {
   children: React.ReactNode;
 }
 

src/components/GenericAllStats/components/Row.tsx

@@ -1,4 +1,4 @@
-export interface RowProps {
+interface RowProps {
   children: React.ReactNode;
 }
 

src/components/GenericAllStats/index.tsx

@@ -7,7 +7,7 @@ import { Card } from './components/Card';
 import { Root } from './components/Root';
 import { Row } from './components/Row';
 
-export interface GenericAllStatsProps {
+interface GenericAllStatsProps {
   stats: AllStats;
   supplementaryStats?: SupplementaryStats;
   locale: Locale;

src/components/GenericStats/components/GenericStatsColumn.tsx

@@ -1,8 +1,8 @@
-import { Stat } from '..';
+import { GenericStat } from '..';
 import GenericStatsRow from './GenericStatsRow';
 
-export interface GenericStatsColumnProps {
-  stats: Stat[];
+interface GenericStatsColumnProps {
+  stats: GenericStat[];
 }
 
 export default function GenericStatsColumn({ stats }: GenericStatsColumnProps) {

src/components/GenericStats/components/GenericStatsRow.tsx

@@ -1,9 +1,9 @@
-import { Stat } from '..';
+import { GenericStat } from '..';
 import { theme } from '../../../stitches.config';
 import PercentileIndicator from '../../PercentileIndicator';
 
-export interface GenericStatsRowProps {
-  stat: Stat;
+interface GenericStatsRowProps {
+  stat: GenericStat;
 }
 
 export default function GenericStatsRow({ stat }: GenericStatsRowProps) {

src/components/GenericStats/index.tsx

@@ -1,12 +1,12 @@
 import { Percentile } from '../../constants/percentiles';
 import GenericStatsColumn from './components/GenericStatsColumn';
 
-export type Stat =
+export type GenericStat =
   | [string, string | number | undefined]
   | [string, string | number | undefined, Percentile | undefined];
 
 export interface GenericStatsProps {
-  stats: Stat[];
+  stats: GenericStat[];
   columnCount?: number;
 }
 
@@ -16,7 +16,7 @@ export default function GenericStats({
 }: GenericStatsProps) {
   const filteredStats = stats.filter(([, value]) => value !== undefined);
   const itemsPerRow = Math.ceil(filteredStats.length / columnCount);
-  const columns: Stat[][] = [];
+  const columns: GenericStat[][] = [];
 
   filteredStats.forEach((stat, index) => {
     const column = Math.floor(index / itemsPerRow);

src/components/Graph/components/Line/constants.ts

@@ -0,0 +1,11 @@
+export enum LineColor {
+  Red,
+  Green,
+  Blue,
+  White,
+}
+export enum LineStyle {
+  Solid,
+  Dashes,
+  DashesAndDots,
+}

src/components/Graph/components/Line/index.tsx

@@ -1,12 +1,6 @@
 import { blue, green, red, slateDark } from '@radix-ui/colors';
-import { GRAPH_HEIGHT, GRAPH_WIDTH } from './Root';
-
-export enum LineColor {
-  Red,
-  Green,
-  Blue,
-  White,
-}
+import { GRAPH_HEIGHT, GRAPH_WIDTH } from '../Root/constants';
+import { LineColor, LineStyle } from './constants';
 
 const LINE_COLORS = {
   [LineColor.Red]: red.red9,
@@ -15,12 +9,6 @@ const LINE_COLORS = {
   [LineColor.White]: slateDark.slate11,
 };
 
-export enum LineStyle {
-  Solid,
-  Dashes,
-  DashesAndDots,
-}
-
 const LINE_STYLES = {
   [LineStyle.Solid]: undefined,
   [LineStyle.Dashes]: '8, 8',
@@ -28,9 +16,9 @@ const LINE_STYLES = {
 };
 
 export type PlotItem = [number, number];
-export type Plot = PlotItem[];
+type Plot = PlotItem[];
 
-export interface LineProps {
+interface LineProps {
   plot: Plot;
   minY?: number;
   maxY?: number;

src/components/Graph/components/Margin/constants.ts

@@ -0,0 +1,4 @@
+export enum MarginOrientation {
+  Vertical,
+  Horizontal,
+}

src/components/Graph/components/Margin/index.tsx

@@ -1,13 +1,9 @@
 import { times } from 'lodash';
-import { theme } from '../../../stitches.config';
-import { MarginInputProps } from './Root';
+import { theme } from '../../../../stitches.config';
+import { MarginInputProps } from '../Root';
+import { MarginOrientation } from './constants';
 
-export enum MarginOrientation {
-  Vertical,
-  Horizontal,
-}
-
-export interface MarginProps extends MarginInputProps {
+interface MarginProps extends MarginInputProps {
   verticalSeparations: number;
   orientation?: MarginOrientation;
 }

src/components/Graph/components/Root/constants.ts

@@ -0,0 +1,2 @@
+export const GRAPH_WIDTH = 384;
+export const GRAPH_HEIGHT = 320;

src/components/Graph/components/Root/index.tsx

@@ -1,10 +1,9 @@
 import { times } from 'lodash';
 import { ReactNode } from 'react';
-import { theme } from '../../../stitches.config';
-import { Margin, MarginOrientation } from './Margin';
-
-export const GRAPH_WIDTH = 384;
-export const GRAPH_HEIGHT = 320;
+import { theme } from '../../../../stitches.config';
+import { Margin } from '../Margin';
+import { MarginOrientation } from '../Margin/constants';
+import { GRAPH_HEIGHT, GRAPH_WIDTH } from './constants';
 
 export interface MarginInputProps {
   min: number;
@@ -13,7 +12,7 @@ export interface MarginInputProps {
   precision?: number;
 }
 
-export interface RootProps {
+interface RootProps {
   children: ReactNode;
   verticalMargin?: MarginInputProps;
   horizontalMargin?: MarginInputProps;

src/components/Leaderboard/components/Gap.tsx

@@ -1,6 +1,6 @@
 import { theme } from '../../../stitches.config';
 
-export interface GapProps {
+interface GapProps {
   message: string;
 }
 

src/components/Leaderboard/components/Item.tsx

@@ -2,7 +2,7 @@ import { ComponentProps } from 'react';
 import { RatingsReward } from '../../../commands/ratings';
 import { theme } from '../../../stitches.config';
 
-export interface ItemProps extends ComponentProps<'div'> {
+interface ItemProps extends ComponentProps<'div'> {
   position: number;
   deltaPosition?: number;
   score?: number;

src/components/Leaderboard/components/Root.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-export interface RootProps {
+interface RootProps {
   children: ReactNode;
 }
 

src/components/Navbar/index.tsx

@@ -1,8 +1,8 @@
 import { DiscordLogoIcon } from '@radix-ui/react-icons';
 import { Flex, Text, Theme } from '@radix-ui/themes';
 import Link from 'next/link';
-import { theme } from '../../stitches.config';
 import { BlitzkriegWormWide } from '../../icons/BlitzkriegWormWide';
+import { theme } from '../../stitches.config';
 
 export default function Navbar() {
   return (

src/components/NoData/constants.ts

@@ -0,0 +1,5 @@
+export enum NoDataType {
+  BattlesInPeriod,
+  PlayersInPeriod,
+  TanksFound,
+}

src/components/NoData/index.tsx

@@ -1,14 +1,8 @@
 import { Locale } from 'discord.js';
-import { translator } from '../core/localization/translator';
-import { theme } from '../stitches.config';
+import { translator } from '../../core/localization/translator';
+import { theme } from '../../stitches.config';
 
-export enum NoDataType {
-  BattlesInPeriod,
-  PlayersInPeriod,
-  TanksFound,
-}
-
-export interface NoDataProps {
+interface NoDataProps {
   type: 'battles_in_period' | 'players_in_period' | 'tanks_found';
   locale: Locale;
 }

src/components/PercentileIndicator/constants.ts

@@ -10,11 +10,7 @@ import {
   slate,
   teal,
 } from '@radix-ui/colors';
-import { Percentile } from '../constants/percentiles';
-
-export interface PercentileIndicatorProps {
-  percentile: Percentile;
-}
+import { Percentile } from '../../constants/percentiles';
 
 export const PERCENTILE_COLORS = {
   [Percentile.VeryBad]: slate.slate9,
@@ -28,18 +24,3 @@ export const PERCENTILE_COLORS = {
   [Percentile.Unicum]: pink.pink9,
   [Percentile.SuperUnicum]: purple.purple9,
 };
-
-export default function PercentileIndicator({
-  percentile,
-}: PercentileIndicatorProps) {
-  return (
-    <div
-      style={{
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-        backgroundColor: PERCENTILE_COLORS[percentile],
-      }}
-    />
-  );
-}

src/components/PercentileIndicator/index.tsx

@@ -0,0 +1,21 @@
+import { Percentile } from '../../constants/percentiles';
+import { PERCENTILE_COLORS } from './constants';
+
+interface PercentileIndicatorProps {
+  percentile: Percentile;
+}
+
+export default function PercentileIndicator({
+  percentile,
+}: PercentileIndicatorProps) {
+  return (
+    <div
+      style={{
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: PERCENTILE_COLORS[percentile],
+      }}
+    />
+  );
+}

src/components/Tanks/components/Column.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-export interface ColumnProps {
+interface ColumnProps {
   children: ReactNode;
 }
 

src/components/Tanks/components/Item/constants.ts

@@ -0,0 +1,31 @@
+import { TankClass, TreeType } from '.';
+import {
+  TANK_ICONS,
+  TANK_ICONS_COLLECTOR,
+  TANK_ICONS_PREMIUM,
+} from '../../../../core/blitzkrieg/tankDefinitions/constants';
+
+export const TREE_TYPES = ['researchable', 'premium', 'collector'] as const; // BIG TODO: REMOVE THIS AFTER LOCALIZATION
+
+export const TANK_CLASSES = [
+  'lightTank',
+  'mediumTank',
+  'heavyTank',
+  'AT-SPG',
+] as const;
+
+export const TREE_TYPE_NAMES: Record<TreeType, string> = {
+  researchable: 'Tech tree',
+  premium: 'Premium',
+  collector: 'Collector',
+};
+export const TREE_TYPE_IMAGES: Record<TreeType, string> = {
+  researchable: 'https://i.imgur.com/pJxO2XY.png',
+  premium: 'https://i.imgur.com/mZzSwOU.png',
+  collector: 'https://i.imgur.com/7A0RsG5.png',
+};
+export const TREE_TYPE_ICONS: Record<TreeType, Record<TankClass, string>> = {
+  researchable: TANK_ICONS,
+  premium: TANK_ICONS_PREMIUM,
+  collector: TANK_ICONS_COLLECTOR,
+};

src/components/Tanks/components/Item/index.tsx

@@ -1,37 +1,10 @@
-import {
-  TANK_ICONS,
-  TANK_ICONS_COLLECTOR,
-  TANK_ICONS_PREMIUM,
-} from '../../../core/blitzkrieg/tankDefinitions';
-import { theme } from '../../../stitches.config';
-
-export const TANK_CLASSES = [
-  'lightTank',
-  'mediumTank',
-  'heavyTank',
-  'AT-SPG',
-] as const;
-
-export const TREE_TYPES = ['researchable', 'premium', 'collector'] as const;
+import { theme } from '../../../../stitches.config';
+import { TANK_CLASSES, TREE_TYPES, TREE_TYPE_ICONS } from './constants';
 
 export type TankClass = (typeof TANK_CLASSES)[number];
 export type TreeType = (typeof TREE_TYPES)[number];
 
-// BIG TODO: REMOVE THIS AFTER LOCALIZATION
-export const TREE_TYPE_NAMES: Record<TreeType, string> = {
-  researchable: 'Tech tree',
-  premium: 'Premium',
-  collector: 'Collector',
-};
-
-export const TREE_TYPE_IMAGES: Record<TreeType, string> = {
-  researchable: 'https://i.imgur.com/pJxO2XY.png',
-  premium: 'https://i.imgur.com/mZzSwOU.png',
-  collector: 'https://i.imgur.com/7A0RsG5.png',
-};
-
 export interface ItemProps {
-  image?: string;
   tankType?: TankClass;
   name: string;
   treeType: TreeType;
@@ -43,13 +16,7 @@ const TREE_TYPE_COLOR = {
   collector: '_blue',
 } as const;
 
-export const TREE_TYPE_ICONS: Record<TreeType, Record<TankClass, string>> = {
-  researchable: TANK_ICONS,
-  premium: TANK_ICONS_PREMIUM,
-  collector: TANK_ICONS_COLLECTOR,
-};
-
-export function Item({ image, tankType, name, treeType }: ItemProps) {
+export function Item({ tankType, name, treeType }: ItemProps) {
   return (
     <div
       style={{

src/components/Tanks/components/Root.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-export interface RootProps {
+interface RootProps {
   children: ReactNode;
 }
 

src/components/Tanks/components/Row.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-export interface RowProps {
+interface RowProps {
   children: ReactNode;
 }
 

src/components/Tanks/components/Title.tsx

@@ -1,6 +1,6 @@
 import { theme } from '../../../stitches.config';
 
-export interface TitleProps {
+interface TitleProps {
   children: string;
 }
 

src/components/TierWeights.tsx

@@ -3,7 +3,7 @@ import { theme } from '../stitches.config';
 
 export type TierWeightsRecord = Partial<Record<Tier, number>>;
 
-export interface TierWeightsProps {
+interface TierWeightsProps {
   weights: TierWeightsRecord;
 }
 

src/components/TitleBar.tsx

@@ -1,6 +1,6 @@
 import { theme } from '../stitches.config';
 
-export interface TitleBarProps {
+interface TitleBarProps {
   title: string;
   image?: string;
   description?: string;