refactor: Move yaml data into workspace package

.eslintrc.json

@@ -15,7 +15,7 @@
     "prettier"
   ],
   "parser": "@typescript-eslint/parser",
-  "ignorePatterns": ["/plugins/*", "src/assets/typevalidation/output", "wasm_module/"],
+  "ignorePatterns": ["/plugins/*", "packages/data/typevalidation/output", "wasm_module/"],
   "settings": {
     "import/parsers": {
       "@typescript-eslint/parser": [".ts", ".tsx"]

.gitignore

@@ -149,4 +149,4 @@ install.bat
 .mf/
 
 wasm_module/target/
-/src/assets/typevalidation/output
+/packages/data/typevalidation/output

package.json

@@ -33,8 +33,8 @@
     "checkStaged": "concurrently -g -c auto pnpm:testData pnpm:validateDataTypes pnpm:lint-staged",
     "checkAll": "concurrently -g -c auto pnpm:testData pnpm:validateDataTypes pnpm:eslint pnpm:prettierCheck pnpm:typeCheck",
     "updateMappings": "node updateMappings.js",
-    "testData": "tsx ./src/assets/testData.js",
-    "validateDataTypes": "typia generate --input ./src/assets/typevalidation/ --output ./src/assets/typevalidation/output && tsx ./src/assets/typevalidation/output",
+    "testData": "tsx ./packages/data/testData.js",
+    "validateDataTypes": "typia generate --input ./packages/data/typevalidation/ --output ./packages/data/typevalidation/output && tsx ./packages/data/typevalidation/output",
     "extractLocale": "babel --config-file ./babel-extract.config.js 'src/**/*.{js,jsx,ts,tsx}' > /dev/null",
     "extractLocaleEn": "babel --config-file ./babel-extract-en.config.js 'src/**/*.{js,jsx,ts,tsx}' > /dev/null && node cleanupLocale.js",
     "extractLocaleCMD": "babel --config-file ./babel-extract.config.js \"src/**/*.{js,jsx,ts,tsx}\" > NUL",
@@ -60,6 +60,7 @@
     "@reduxjs/toolkit": "^2.5.0",
     "axios": "^1.7.9",
     "comlink": "^4.4.2",
+    "data": "workspace:./packages/data",
     "i18next": "^24.2.0",
     "js-yaml": "^4.1.0",
     "json-url": "^3.1.0",

src/assets/modifierdata/index.ts → packages/data/modifierdata/index.ts

@@ -15,6 +15,8 @@ import Thief from './thief.yaml';
 import utility from './utility.yaml';
 import Warrior from './warrior.yaml';
 
+export * from './metadata';
+
 // combines items in all sections into one object
 const byId = (sections: Section[]) => {
   const sectionsFlat = sections.flatMap(({ section, items }) =>

src/assets/modifierdata/yaml.d.ts → packages/data/modifierdata/yaml.d.ts

@@ -2,3 +2,5 @@ declare module './*.yaml' {
   const data: import('./metadata').ModifierData;
   export default data;
 }
+
+// export {};

packages/data/package.json

@@ -0,0 +1,15 @@
+{
+  "type": "module",
+  "exports": {
+    ".": "./index.ts",
+    "./modifierdata": "./modifierdata/index.ts",
+    "./presetdata": "./presetdata/index.ts",
+    "./presetdata/templateTransform": "./presetdata/templateTransform.ts"
+  },
+  "dependencies": {
+    "js-yaml": "^4.1.0"
+  },
+  "devDependencies": {
+    "typia": "^7.5.1"
+  }
+}

packages/data/presetdata/index.ts

@@ -0,0 +1,43 @@
+import creditData from './credit.yaml';
+import presetAffixes from './preset-affixes.yaml';
+import presetBuffs from './preset-buffs.yaml';
+import presetDistribution from './preset-distribution.yaml';
+import presetExtras from './preset-extras.yaml';
+import presetInfusions from './preset-infusions.yaml';
+import presetTraits from './preset-traits.yaml';
+import templates from './templates.yaml';
+
+export * from './metadata';
+
+// export interface PresetData {
+//   templates: Templates;
+//   presetBuffs: PresetBuffs;
+//   presetAffixes: PresetAffixes;
+//   presetDistribution: PresetDistribution;
+//   presetExtras: PresetExtras;
+//   presetInfusions: PresetInfusions;
+//   presetTraits: PresetTraits;
+//   creditData: CreditData;
+// }
+
+export {
+  templates,
+  presetBuffs,
+  presetAffixes,
+  presetDistribution,
+  presetExtras,
+  presetInfusions,
+  presetTraits,
+  creditData,
+};
+
+export default {
+  templates,
+  presetBuffs,
+  presetAffixes,
+  presetDistribution,
+  presetExtras,
+  presetInfusions,
+  presetTraits,
+  creditData,
+};

src/assets/presetdata/metadata.ts → packages/data/presetdata/metadata.ts

@@ -1,15 +1,15 @@
-import type { BuffsSlice } from '../../state/slices/buffs';
-import type { Distribution } from '../../state/slices/distribution';
-import type { ExtrasSlice } from '../../state/slices/extras';
-import type { PrioritiesSlice } from '../../state/slices/priorities';
-import type { SkillsSlice } from '../../state/slices/skills';
-import type { TraitsSlice } from '../../state/slices/traits';
+import type { BuffsSlice } from '../../../src/state/slices/buffs';
+import type { Distribution } from '../../../src/state/slices/distribution';
+import type { ExtrasSlice } from '../../../src/state/slices/extras';
+import type { PrioritiesSlice } from '../../../src/state/slices/priorities';
+import type { SkillsSlice } from '../../../src/state/slices/skills';
+import type { TraitsSlice } from '../../../src/state/slices/traits';
 import type {
   InfusionName,
   ProfessionName,
   ProfessionOrSpecializationName,
   WeaponHandednessType,
-} from '../../utils/gw2-data';
+} from '../../../src/utils/gw2-data';
 
 interface TemplateEntryBase {
   name: string;

src/assets/presetdata/templateTransform.ts → packages/data/presetdata/templateTransform.ts

@@ -1,5 +1,5 @@
-import type { PresetData } from '../../utils/data';
-import type { ProfessionName } from '../../utils/gw2-data';
+import type data from 'data/presetdata';
+import type { ProfessionName } from '../../../src/utils/gw2-data';
 import type { TemplateEntry } from './metadata';
 
 const defaultBoonTemplates = {
@@ -28,7 +28,7 @@ interface getBuildTemplateDataProps {
   selectedTemplate: string;
   isFractals: boolean;
   profession: ProfessionName | '';
-  data: PresetData;
+  data: typeof data;
 }
 
 export function getBuildTemplateData({

packages/data/presetdata/yaml.d.ts

@@ -0,0 +1,34 @@
+declare module './templates.yaml' {
+  const data: import('./metadata').Templates;
+  export default data;
+}
+declare module './preset-buffs.yaml' {
+  const data: import('./metadata').PresetBuffs;
+  export default data;
+}
+declare module './preset-affixes.yaml' {
+  const data: import('./metadata').PresetAffixes;
+  export default data;
+}
+declare module './preset-distribution.yaml' {
+  const data: import('./metadata').PresetDistribution;
+  export default data;
+}
+declare module './preset-extras.yaml' {
+  const data: import('./metadata').PresetExtras;
+  export default data;
+}
+declare module './preset-infusions.yaml' {
+  const data: import('./metadata').PresetInfusions;
+  export default data;
+}
+declare module './preset-traits.yaml' {
+  const data: import('./metadata').PresetTraits;
+  export default data;
+}
+declare module './credit.yaml' {
+  const data: import('./metadata').CreditData;
+  export default data;
+}
+
+export {};

src/assets/testData.js → packages/data/testData.js

@@ -14,7 +14,7 @@ import {
   relicsDict,
   runesDict,
   sigilDict,
-} from '../components/url-state/schema/SchemaDicts';
+} from '../../src/components/url-state/schema/SchemaDicts';
 
 // import specializationData from '../utils/mapping/specializations.json' assert { type: 'json' };
 import {
@@ -55,7 +55,7 @@ const schemaKeys = {
   'buffs.yaml': buffsDict,
 };
 
-const modifierDirectory = './src/assets/modifierdata/';
+const modifierDirectory = './packages/data/modifierdata/';
 
 const allTraitIds = new Set();
 const allExtrasIds = new Set();
@@ -487,7 +487,7 @@ function parseNumber(value, key, id) {
  * test presets
  */
 
-const presetDirectory = './src/assets/presetdata/';
+const presetDirectory = './packages/data/presetdata/';
 
 // const types = {
 //   name

src/assets/typevalidation/index.ts → packages/data/typevalidation/index.ts

@@ -26,8 +26,8 @@ const gentleAssert = (condition: boolean, message: string) => {
   }
 };
 
-const modifierDirectory = './src/assets/modifierdata/';
-const presetDirectory = './src/assets/presetdata/';
+const modifierDirectory = './packages/data/modifierdata/';
+const presetDirectory = './packages/data/presetdata/';
 
 const testModifiers = async () => {
   const files = (await fs.readdir(modifierDirectory)).filter(

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+- 'packages/*'

src/components/BuildPage.tsx

@@ -4,8 +4,8 @@ import { Box, Paper, Typography } from '@mui/material';
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
-import { buffModifiers, classModifiers } from '../assets/modifierdata';
-import type { ModifierItem } from '../assets/modifierdata/metadata';
+import { buffModifiers, classModifiers } from '../../packages/data/modifierdata';
+import type { ModifierItem } from '../../packages/data/modifierdata/metadata';
 import { importStateCharacter } from '../state/async/buildPageThunks';
 import { useAppDispatch } from '../state/redux-hooks';
 import {

src/components/TemplateInfo.tsx

@@ -1,12 +1,12 @@
 import { Profession } from '@discretize/gw2-ui-new';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { Link } from '@mui/material';
+import type { Credit, PresetDistributionEntry } from 'data/presetdata';
+import { creditData, presetDistribution } from 'data/presetdata';
 import { Fragment } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import type { Credit, PresetDistributionEntry } from '../assets/presetdata/metadata';
 import { getSelectedDistribution } from '../state/slices/distribution';
-import data from '../utils/data';
 import Info from './baseComponents/Info';
 
 const TemplateLabel = ({ preset }: { preset: PresetDistributionEntry }) => {
@@ -23,7 +23,7 @@ const TemplateLabel = ({ preset }: { preset: PresetDistributionEntry }) => {
 };
 
 const Author = ({ name }: { name: string }) => {
-  const url = data.creditData[name]?.authorUrl;
+  const url = creditData[name]?.authorUrl;
   return url ? (
     <Link href={url} target="_blank" rel="noopener">
       {name}
@@ -45,7 +45,7 @@ const EndingLinks = ({ credit }: { credit: Credit[] }) =>
 export default function TemplateInfo() {
   const selectedDistribution = useSelector(getSelectedDistribution);
 
-  const distributionData = data.presetDistribution.list.find(
+  const distributionData = presetDistribution.list.find(
     (entry) => entry.name === selectedDistribution,
   );
   const credit = distributionData?.credit;
@@ -66,7 +66,7 @@ export default function TemplateInfo() {
         </Trans>
       )}
       {credit
-        .filter((entry) => data.creditData[entry.author]?.authorUrl && entry.url)
+        .filter((entry) => creditData[entry.author]?.authorUrl && entry.url)
         .map((entry) => (
           <Fragment key={`${entry.url}`}>
             {' '}

src/components/baseComponents/Presets.tsx

@@ -3,7 +3,7 @@ import { Box, Chip, TextField, Typography } from '@mui/material';
 import Autocomplete from '@mui/material/Autocomplete';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import type { PresetEntry } from '../../assets/presetdata/metadata';
+import type { PresetEntry } from 'data/presetdata';
 import { getProfession, getSelectedTemplate } from '../../state/slices/controlsSlice';
 
 // this many chips are allowed before they will be put into a dropdown select

src/components/nav/NavAccordion.tsx

@@ -3,10 +3,10 @@ import { Box, Chip } from '@mui/material';
 import MuiAccordion from '@mui/material/Accordion';
 import MuiAccordionDetails from '@mui/material/AccordionDetails';
 import MuiAccordionSummary from '@mui/material/AccordionSummary';
+import { templates } from 'data/presetdata';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
-import data from '../../utils/data';
 import type { ProfessionName } from '../../utils/gw2-data';
 
 const useStyles = makeStyles()((theme) => ({
@@ -57,7 +57,7 @@ export default function NavAccordion({ handleTemplateSelect }: NavAccordionProps
     setExpanded(newExpanded ? panel : '');
   };
 
-  return data.templates.list.map((prof) => (
+  return templates.list.map((prof) => (
     <MuiAccordion
       classes={{ root: classes.accordionRoot }}
       square

src/components/nav/NavBar.tsx

@@ -12,6 +12,8 @@ import {
   Typography,
   useMediaQuery,
 } from '@mui/material';
+import data, { templates } from 'data/presetdata';
+import { getBuildTemplateData } from 'data/presetdata/templateTransform';
 import Menu from 'material-ui-popup-state/HoverMenu';
 import type { PopupState } from 'material-ui-popup-state/hooks';
 import { bindHover, bindMenu, usePopupState } from 'material-ui-popup-state/hooks';
@@ -22,7 +24,6 @@ import { makeStyles } from 'tss-react/mui';
 import fractalImg from '../../assets/images/icons/fractals.png';
 import raidImg from '../../assets/images/icons/raids.png';
 import wvwImg from '../../assets/images/icons/wvw.png';
-import { getBuildTemplateData } from '../../assets/presetdata/templateTransform';
 import { stopCalc } from '../../state/async/calculationThunks';
 import { useAppDispatch } from '../../state/redux-hooks';
 import {
@@ -33,7 +34,6 @@ import {
   setBuildTemplate,
 } from '../../state/slices/controlsSlice';
 import { changeGameMode, getExpertMode, getGameMode } from '../../state/slices/userSettings';
-import data from '../../utils/data';
 import type { ProfessionName } from '../../utils/gw2-data';
 import { PROFESSIONS } from '../../utils/gw2-data';
 import NavAccordion from './NavAccordion';
@@ -57,7 +57,7 @@ const Navbar = () => {
   const selectedSpecialization = useSelector(getSelectedSpecialization);
   const selectedTemplateName = useSelector(getSelectedTemplate);
 
-  const selectedTemplate = data.templates.list
+  const selectedTemplate = templates.list
     .find((elem) => elem.class === profession)
     ?.builds?.find((elem) => elem.name === selectedTemplateName);
 

src/components/nav/ReapplyTemplateDialog.tsx

@@ -6,16 +6,16 @@ import {
   DialogContentText,
   DialogTitle,
 } from '@mui/material';
+import data from 'data/presetdata';
+import { getBuildTemplateData } from 'data/presetdata/templateTransform';
 import { Trans } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { getBuildTemplateData } from '../../assets/presetdata/templateTransform';
 import {
   getProfession,
   getSelectedTemplate,
   setBuildTemplate,
 } from '../../state/slices/controlsSlice';
 import { getGameMode } from '../../state/slices/userSettings';
-import data from '../../utils/data';
 
 interface ReapplyTemplateDialogProps {
   open: boolean;