feat: isloate embed config

packages/website/src/app/tools/embed/[embed]/components/PreviewWrapper/index.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@radix-ui/themes';
 import { useEffect, useRef } from 'react';
+import { previews } from '../../../../../../constants/embeds';
 import { useEmbedStateCurry } from '../../../../../../stores/embedState/utilities';
-import { previews } from '../../../configurations';
 import * as styles from './index.css';
 
 interface PreviewWrapperProps {

packages/website/src/app/tools/embed/[embed]/host/page.tsx

@@ -4,8 +4,8 @@ import { Code, Heading } from '@radix-ui/themes';
 import { useSearchParams } from 'next/navigation';
 import { useMemo } from 'react';
 import { PageWrapper } from '../../../../../components/PageWrapper';
+import { configurations } from '../../../../../constants/embeds';
 import * as EmbedState from '../../../../../stores/embedState';
-import { configurations } from '../../configurations';
 import { extractEmbedConfigDefaults } from '../../utilities';
 
 export interface EmbedPreviewControllerProps {

packages/website/src/app/tools/embed/[embed]/layout.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
+import { configurations } from '../../../../constants/embeds';
 import * as EmbedState from '../../../../stores/embedState';
-import { configurations } from '../configurations';
 import { extractEmbedConfigDefaults } from '../utilities';
 
 export function generateStaticParams() {

packages/website/src/app/tools/embed/[embed]/page.tsx

@@ -16,11 +16,11 @@ import { ReactNode, useEffect, useRef, useState } from 'react';
 import { stringify } from 'urlon';
 import { CopyButton } from '../../../../components/CopyButton';
 import { PageWrapper } from '../../../../components/PageWrapper';
+import { configurations } from '../../../../constants/embeds';
 import * as App from '../../../../stores/app';
 import * as EmbedState from '../../../../stores/embedState';
 import { EmbedConfig } from '../../../../stores/embedState';
 import { EmbedItemType } from '../../../../stores/embedState/constants';
-import { configurations } from '../configurations';
 import { Boolean } from './components/Boolean';
 import { Color } from './components/Color';
 import { Enum } from './components/Enum';

packages/website/src/app/tools/embed/configurations/breakdown.tsx

@@ -1,98 +1,18 @@
-import {
+import { compositeStatsKeys, tankDefinitionsArray } from '@blitzkit/core';
-  CompositeStatsKey,
-  compositeStatsKeys,
-  tankDefinitionsArray,
-} from '@blitzkit/core';
 import strings from '@blitzkit/core/lang/en-US.json';
-import { grayA, grayDark, grayDarkA } from '@radix-ui/colors';
 import { use } from 'react';
 import {
   BreakdownEmbedCard,
   BreakdownEmbedWrapper,
 } from '../../../../components/TanksEmbed';
-import { EmbedConfig } from '../../../../stores/embedState';
+import { breakdownConfig } from '../../../../constants/embeds';
-import { EmbedItemType } from '../../../../stores/embedState/constants';
 import { useEmbedStateCurry } from '../../../../stores/embedState/utilities';
 
-const compositeStatsKeysOptions = compositeStatsKeys.map((value) => ({
+export const compositeStatsKeysOptions = compositeStatsKeys.map((value) => ({
   label: strings.common.composite_stats[value],
   value,
 }));
 
-export const breakdownConfig = {
-  width: { type: EmbedItemType.Slider, default: 320, min: 128, max: 640 },
-  height: { type: EmbedItemType.Slider, default: 492, min: 128, max: 1024 },
-
-  showTotal: { type: EmbedItemType.Boolean, default: true, pad: true },
-
-  listGap: { type: EmbedItemType.Size, default: '2' },
-  listMaxTanks: {
-    type: EmbedItemType.Slider,
-    default: 4,
-    min: 0,
-    max: 8,
-    pad: true,
-  },
-
-  cardRadius: { type: EmbedItemType.Radius, default: '2' },
-  cardHeaderBackgroundColor: {
-    type: EmbedItemType.Color,
-    default: grayDarkA.grayA3,
-  },
-  cardHeaderPadding: { type: EmbedItemType.Size, default: '1' },
-  cardTitle: {
-    type: EmbedItemType.RichText,
-    default: { color: grayDark.gray12, weight: 'bold', size: '3' },
-  },
-  cardTitleTypeColor: { type: EmbedItemType.Boolean, default: true },
-  cardTitleClassIcon: { type: EmbedItemType.Boolean, default: true },
-  cardBodyBackgroundColor: {
-    type: EmbedItemType.Color,
-    default: grayA.grayA11,
-  },
-  cardBodyPadding: {
-    type: EmbedItemType.Size,
-    default: '2',
-    pad: true,
-  },
-
-  columnGap: { type: EmbedItemType.Size, default: '0' },
-  columnValue: {
-    type: EmbedItemType.RichText,
-    default: { color: grayDark.gray12, size: '3', weight: 'regular' },
-  },
-  columnLabel: {
-    type: EmbedItemType.RichText,
-    default: { color: grayDark.gray11, size: '2', weight: 'regular' },
-    pad: true,
-  },
-
-  column1: {
-    type: EmbedItemType.Enum,
-    default: 'cumulative_battles' satisfies CompositeStatsKey,
-    options: compositeStatsKeysOptions,
-  },
-  column2: {
-    type: EmbedItemType.Enum,
-    default: 'normalized_wins' satisfies CompositeStatsKey,
-    options: compositeStatsKeysOptions,
-  },
-  column3: {
-    type: EmbedItemType.Enum,
-    default: 'cumulative_wn8' satisfies CompositeStatsKey,
-    options: compositeStatsKeysOptions,
-  },
-  column4: {
-    type: EmbedItemType.Enum,
-    default: 'normalized_damage_dealt' satisfies CompositeStatsKey,
-    options: compositeStatsKeysOptions,
-  },
-  column1CustomLabel: { type: EmbedItemType.String, default: '' },
-  column2CustomLabel: { type: EmbedItemType.String, default: '' },
-  column3CustomLabel: { type: EmbedItemType.String, default: '' },
-  column4CustomLabel: { type: EmbedItemType.String, default: '' },
-} satisfies EmbedConfig;
-
 export function BreakdownPreview() {
   const tanks = use(tankDefinitionsArray);
   const { useState } = useEmbedStateCurry<typeof breakdownConfig>();

packages/website/src/app/tools/embed/configurations/index.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from 'react';
-import { EmbedConfig } from '../../../../stores/embedState';
-import { BreakdownPreview, breakdownConfig } from './breakdown';
-
-export const configurations = {
-  breakdown: breakdownConfig,
-} satisfies Record<string, EmbedConfig>;
-
-export const previews = {
-  breakdown: BreakdownPreview,
-} satisfies Record<string, () => ReactNode>;

packages/website/src/components/TanksEmbed.tsx

@@ -8,8 +8,8 @@ import { amberDark, blueDark } from '@radix-ui/colors';
 import { Flex, Text } from '@radix-ui/themes';
 import { times } from 'lodash';
 import { ReactNode } from 'react';
-import { breakdownConfig } from '../app/tools/embed/configurations/breakdown';
 import { toRadiusVar } from '../app/tools/embed/utilities';
+import { breakdownConfig } from '../constants/embeds';
 import { useEmbedStateCurry } from '../stores/embedState/utilities';
 import { ClassHeavy } from './ClassIcon/components/ClassHeavy';
 import { ClassLight } from './ClassIcon/components/ClassLight';
@@ -64,14 +64,14 @@ export function BreakdownEmbedCard({ tank }: BreakdownEmbedCardProps) {
               tank === null
                 ? undefined
                 : tank.treeType === 'researchable' ||
-                  !useState('cardTitleTypeColor')
+                    !useState('cardTitleTypeColor')
-                ? undefined
+                  ? undefined
-                : {
+                  : {
-                    color:
+                      color:
-                      tank.treeType === 'premium'
+                        tank.treeType === 'premium'
-                        ? amberDark.amber11
+                          ? amberDark.amber11
-                        : blueDark.blue11,
+                          : blueDark.blue11,
-                  },
+                    },
           }}
         >
           <Flex align="center" gap="1">

packages/website/src/constants/embeds.ts

@@ -0,0 +1,91 @@
+import { CompositeStatsKey } from '@blitzkit/core';
+import { grayA, grayDark, grayDarkA } from '@radix-ui/colors';
+import { ReactNode } from 'react';
+import {
+  BreakdownPreview,
+  compositeStatsKeysOptions,
+} from '../app/tools/embed/configurations/breakdown';
+import { EmbedConfig } from '../stores/embedState';
+import { EmbedItemType } from '../stores/embedState/constants';
+
+export const breakdownConfig = {
+  width: { type: EmbedItemType.Slider, default: 320, min: 128, max: 640 },
+  height: { type: EmbedItemType.Slider, default: 492, min: 128, max: 1024 },
+
+  showTotal: { type: EmbedItemType.Boolean, default: true, pad: true },
+
+  listGap: { type: EmbedItemType.Size, default: '2' },
+  listMaxTanks: {
+    type: EmbedItemType.Slider,
+    default: 4,
+    min: 0,
+    max: 8,
+    pad: true,
+  },
+
+  cardRadius: { type: EmbedItemType.Radius, default: '2' },
+  cardHeaderBackgroundColor: {
+    type: EmbedItemType.Color,
+    default: grayDarkA.grayA3,
+  },
+  cardHeaderPadding: { type: EmbedItemType.Size, default: '1' },
+  cardTitle: {
+    type: EmbedItemType.RichText,
+    default: { color: grayDark.gray12, weight: 'bold', size: '3' },
+  },
+  cardTitleTypeColor: { type: EmbedItemType.Boolean, default: true },
+  cardTitleClassIcon: { type: EmbedItemType.Boolean, default: true },
+  cardBodyBackgroundColor: {
+    type: EmbedItemType.Color,
+    default: grayA.grayA11,
+  },
+  cardBodyPadding: {
+    type: EmbedItemType.Size,
+    default: '2',
+    pad: true,
+  },
+
+  columnGap: { type: EmbedItemType.Size, default: '0' },
+  columnValue: {
+    type: EmbedItemType.RichText,
+    default: { color: grayDark.gray12, size: '3', weight: 'regular' },
+  },
+  columnLabel: {
+    type: EmbedItemType.RichText,
+    default: { color: grayDark.gray11, size: '2', weight: 'regular' },
+    pad: true,
+  },
+
+  column1: {
+    type: EmbedItemType.Enum,
+    default: 'cumulative_battles' satisfies CompositeStatsKey,
+    options: compositeStatsKeysOptions,
+  },
+  column2: {
+    type: EmbedItemType.Enum,
+    default: 'normalized_wins' satisfies CompositeStatsKey,
+    options: compositeStatsKeysOptions,
+  },
+  column3: {
+    type: EmbedItemType.Enum,
+    default: 'cumulative_wn8' satisfies CompositeStatsKey,
+    options: compositeStatsKeysOptions,
+  },
+  column4: {
+    type: EmbedItemType.Enum,
+    default: 'normalized_damage_dealt' satisfies CompositeStatsKey,
+    options: compositeStatsKeysOptions,
+  },
+  column1CustomLabel: { type: EmbedItemType.String, default: '' },
+  column2CustomLabel: { type: EmbedItemType.String, default: '' },
+  column3CustomLabel: { type: EmbedItemType.String, default: '' },
+  column4CustomLabel: { type: EmbedItemType.String, default: '' },
+} satisfies EmbedConfig;
+
+export const configurations = {
+  breakdown: breakdownConfig,
+} satisfies Record<string, EmbedConfig>;
+
+export const previews = {
+  breakdown: BreakdownPreview,
+} satisfies Record<string, () => ReactNode>;