feat: isolate radix utils

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

@@ -4,9 +4,11 @@ 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 {
+  configurations,
+  extractEmbedConfigDefaults,
+} from '../../../../../constants/embeds';
 import * as EmbedState from '../../../../../stores/embedState';
-import { extractEmbedConfigDefaults } from '../../utilities';
 
 export interface EmbedPreviewControllerProps {
   configKey: string;

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

@@ -1,7 +1,9 @@
 import { useMemo } from 'react';
-import { configurations } from '../../../../constants/embeds';
+import {
+  configurations,
+  extractEmbedConfigDefaults,
+} from '../../../../constants/embeds';
 import * as EmbedState from '../../../../stores/embedState';
-import { extractEmbedConfigDefaults } from '../utilities';
 
 export function generateStaticParams() {
   return Object.keys(configurations).map((embed) => ({ embed }));

packages/website/src/app/tools/embed/utilities.ts

@@ -1,26 +0,0 @@
-import {
-  EmbedConfig,
-  ExtractEmbedConfigTypes,
-  RadixColorCompound,
-  RadixRadius,
-} from '../../../stores/embedState';
-
-export function extractEmbedConfigDefaults<Config extends EmbedConfig>(
-  config: Config,
-) {
-  return Object.fromEntries(
-    Object.entries(config).map(([key, value]) => [key, value.default]),
-  ) as ExtractEmbedConfigTypes<Config>;
-}
-
-export function toWidthVar(state: number) {
-  return `${state}px`;
-}
-
-export function toRadiusVar(state: RadixRadius) {
-  return `var(--radius-${state})`;
-}
-
-export function toColorVar(state: RadixColorCompound) {
-  return `var(--${state.base}-${state.variant})`;
-}

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 { toRadiusVar } from '../app/tools/embed/utilities';
 import { breakdownConfig } from '../constants/embeds';
+import { toRadiusVar } from '../core/radix/utils';
 import { useEmbedStateCurry } from '../stores/embedState/utilities';
 import { ClassHeavy } from './ClassIcon/components/ClassHeavy';
 import { ClassLight } from './ClassIcon/components/ClassLight';

packages/website/src/constants/embeds.ts

@@ -5,7 +5,7 @@ import {
   BreakdownPreview,
   compositeStatsKeysOptions,
 } from '../app/tools/embed/configurations/breakdown';
-import { EmbedConfig } from '../stores/embedState';
+import { EmbedConfig, ExtractEmbedConfigTypes } from '../stores/embedState';
 import { EmbedItemType } from '../stores/embedState/constants';
 
 export const breakdownConfig = {
@@ -89,3 +89,10 @@ export const configurations = {
 export const previews = {
   breakdown: BreakdownPreview,
 } satisfies Record<string, () => ReactNode>;
+export function extractEmbedConfigDefaults<Config extends EmbedConfig>(
+  config: Config,
+) {
+  return Object.fromEntries(
+    Object.entries(config).map(([key, value]) => [key, value.default]),
+  ) as ExtractEmbedConfigTypes<Config>;
+}

packages/website/src/core/radix/utils.ts

@@ -0,0 +1,11 @@
+import { RadixColorCompound, RadixRadius } from '../../stores/embedState';
+
+export function toWidthVar(state: number) {
+  return `${state}px`;
+}
+export function toRadiusVar(state: RadixRadius) {
+  return `var(--radius-${state})`;
+}
+export function toColorVar(state: RadixColorCompound) {
+  return `var(--${state.base}-${state.variant})`;
+}