fix storybook and tsc

farirpgs · Sep 12, 2023 · fed12b0 · fed12b0
1 parent 1f126d1
commit fed12b0
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 73 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/lib/routes/Character/components/CharacterDialog/CharacterV3Dialog.tsx b/lib/routes/Character/components/CharacterDialog/CharacterV3Dialog.tsx
@@ -131,8 +131,8 @@ export const CharacterV3Dialog: React.FC<{
 
   const theme = useTheme();
   const query = useQuery<"card" | "advanced">();
-  const showCharacterCard = query.get("card") === "true";
-  const defaultAdvanced = query.get("advanced") === "true";
+  const showCharacterCard = query?.get("card") === "true";
+  const defaultAdvanced = query?.get("advanced") === "true";
   const logger = useLogger();
   const autoSaveTimeout = useRef<any>(null);
   const characterManager = useCharacter(props.character, () => {

diff --git a/lib/routes/Character/hooks/useCharacter.tsx b/lib/routes/Character/hooks/useCharacter.tsx
@@ -46,7 +46,7 @@ export function useCharacter(
   }, [characterFromProps]);
 
   async function loadTemplate(template: ICharacterTemplate) {
-    const defaultCharacter = await CharacterFactory.make(template);
+    const defaultCharacter = await CharacterFactory.make({ template });
 
     setCharacter(
       produce((draft: ICharacter | undefined) => {

diff --git a/lib/routes/NewCharacter/NewCharacterRoute.tsx b/lib/routes/NewCharacter/NewCharacterRoute.tsx
@@ -57,7 +57,7 @@ export function NewCharacterRoute() {
         return categoryMatch && nameMatch;
       });
       if (template) {
-        const fake = await CharacterFactory.make(template);
+        const fake = await CharacterFactory.make({ template });
         setFakeCharacter(fake);
         setTemplate(template);
         setStatus("success");
@@ -68,9 +68,9 @@ export function NewCharacterRoute() {
   }, [params.category, params.name]);
   async function handleLoadTemplate() {
     setLoadingTemplate(true);
-    const newCharacter = await charactersManager.actions.add(
-      template as ICharacterTemplate,
-    );
+    const newCharacter = await charactersManager.actions.add({
+      template: template as ICharacterTemplate,
+    });
     router.push(`/characters/${newCharacter.id}`);
   }
   const [fakeCharacter, setFakeCharacter] = useState<ICharacter>();

diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "@tldraw/tldraw": "^1.29.2",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/node": "^20.4.8",
+    "@vitejs/plugin-legacy": "^4.1.1",
     "@vitejs/plugin-react": "^4.0.4",
     "canvas-confetti": "^1.6.0",
     "dayjs": "^1.11.9",

diff --git a/stories/CharacterCard.stories.tsx b/stories/CharacterCard.stories.tsx
@@ -3,12 +3,14 @@ import { action } from "@storybook/addon-actions";
 import { Meta, Story } from "@storybook/react";
 import { CharacterCard } from "../lib/components/Scene/components/PlayerRow/CharacterCard/CharacterCard";
 import { Toolbox } from "../lib/components/Toolbox/Toolbox";
+import { CharacterTemplatesProvider } from "../lib/contexts/CharacterTemplatesContext/CharacterTemplatesContext";
 import { CharacterFactory } from "../lib/domains/character/CharacterFactory";
+import { ICharacter } from "../lib/domains/character/types";
+import { dayJS } from "../lib/domains/dayjs/getDayJS";
 import {
   MiniThemeContext,
   useMiniTheme,
 } from "../lib/routes/Character/components/CharacterDialog/MiniThemeContext";
-import { ICharacterTemplate } from "../lib/services/character-templates/CharacterTemplateService";
 import { StoryProvider } from "./StoryProvider";
 
 function StorybookCharacterCard(
@@ -24,21 +26,27 @@ function StorybookCharacterCard(
 
   return (
     <>
-      <Toolbox
-        diceFabProps={{
-          onRoll: () => {},
+      <CharacterTemplatesProvider
+        value={{
+          templates: [],
         }}
-        hideDefaultRightActions={true}
-      />
-      <MiniThemeContext.Provider value={miniTheme}>
-        <CharacterCard
-          readonly={props.readonly}
-          characterSheet={props.characterSheet}
-          onCharacterDialogOpen={action("onCharacterDialogOpen") as any}
-          onRoll={() => {}}
+      >
+        <Toolbox
+          diceFabProps={{
+            onRoll: () => {},
+          }}
+          hideDefaultRightActions={true}
         />
-      </MiniThemeContext.Provider>
-      <Box mt="6rem" />
+        <MiniThemeContext.Provider value={miniTheme}>
+          <CharacterCard
+            readonly={props.readonly}
+            characterSheet={props.characterSheet}
+            onCharacterDialogOpen={action("onCharacterDialogOpen") as any}
+            onRoll={() => {}}
+          />
+        </MiniThemeContext.Provider>
+        <Box mt="6rem" />
+      </CharacterTemplatesProvider>
     </>
   );
 }
@@ -74,33 +82,33 @@ const Template: Story<IProps> = (args, context) => {
   );
 };
 
-export const FateCondensed = Template.bind({});
-(FateCondensed as any).loaders = [
-  async () => {
-    const template: ICharacterTemplate = {
-      name: "",
-      publisher: "",
-      fetchPath:
-        "/public/character-templates/Fate Condensed/Fate Condensed.json",
-    };
+export const FateCondensed = makeCharacterSheetStory({
+  importPath:
+    "../public/character-templates/Fate Condensed/Fate Condensed.json",
+});
 
-    const character = await CharacterFactory.make(template);
+export const Charge = makeCharacterSheetStory({
+  importPath: "../public/character-templates/Fari RPGs/Charge RPG.json",
+});
 
-    return { character };
-  },
-];
+function makeCharacterSheetStory({ importPath }: { importPath: string }) {
+  const story = Template.bind({});
+  (story as any).loaders = [
+    async () => {
+      const file = await import(importPath);
+      const character = await CharacterFactory.make({ json: file.default });
+      return { character: overrideCharacterDateForStorybook(character) };
+    },
+  ];
+  return story;
 
-export const Charge = Template.bind({});
-(Charge as any).loaders = [
-  async () => {
-    const template: ICharacterTemplate = {
-      name: "",
-      publisher: "",
-      fetchPath: "/public/character-templates/Fari RPGs/Charge RPG.json",
+  function overrideCharacterDateForStorybook(
+    character: ICharacter,
+  ): ICharacter {
+    return {
+      ...character,
+      id: "50fa2",
+      lastUpdated: dayJS("2021-01-01").unix(),
     };
-
-    const character = await CharacterFactory.make(template);
-
-    return { character };
-  },
-];
+  }
+}
diff --git a/stories/CharacterSheet.stories.tsx b/stories/CharacterSheet.stories.tsx
@@ -2,11 +2,11 @@ import { Box } from "@mui/material";
 import { action } from "@storybook/addon-actions";
 import { Meta, Story } from "@storybook/react";
 import { Toolbox } from "../lib/components/Toolbox/Toolbox";
+import { CharacterTemplatesProvider } from "../lib/contexts/CharacterTemplatesContext/CharacterTemplatesContext";
 import { CharacterFactory } from "../lib/domains/character/CharacterFactory";
 import { ICharacter } from "../lib/domains/character/types";
 import { dayJS } from "../lib/domains/dayjs/getDayJS";
 import { CharacterV3Dialog } from "../lib/routes/Character/components/CharacterDialog/CharacterV3Dialog";
-import { ICharacterTemplate } from "../lib/services/character-templates/CharacterTemplateService";
 import { StoryProvider } from "./StoryProvider";
 
 function StorybookCharacterSheet(
@@ -17,23 +17,31 @@ function StorybookCharacterSheet(
 ) {
   return (
     <>
-      <Toolbox
-        diceFabProps={{
-          onRoll: () => {},
+      <CharacterTemplatesProvider
+        value={{
+          templates: [],
         }}
-        hideDefaultRightActions={true}
-      />
-      <CharacterV3Dialog
-        dialog={props.dialog}
-        open={true}
-        character={props.character}
-        readonly={props.readonly}
-        synced={false}
-        onClose={action("onClose")}
-        onSave={action("onSave")}
-        onToggleSync={action("onToggleSync")}
-      />
-      <Box mt="6rem" />
+      >
+        <Toolbox
+          diceFabProps={{
+            onRoll: () => {},
+          }}
+          hideDefaultRightActions={true}
+        />
+
+        <CharacterV3Dialog
+          dialog={props.dialog}
+          open={true}
+          character={props.character}
+          readonly={props.readonly}
+          synced={false}
+          onClose={action("onClose")}
+          onSave={action("onSave")}
+          onToggleSync={action("onToggleSync")}
+        />
+
+        <Box mt="6rem" />
+      </CharacterTemplatesProvider>
     </>
   );
 }
@@ -66,22 +74,20 @@ const Template: Story<IProps> = (args, context) => {
 };
 
 export const FateCondensed = makeCharacterSheetStory({
-  name: "",
-  publisher: "",
-  fetchPath: "/public/character-templates/Fate Condensed/Fate Condensed.json",
+  importPath:
+    "../public/character-templates/Fate Condensed/Fate Condensed.json",
 });
 
 export const Charge = makeCharacterSheetStory({
-  name: "",
-  publisher: "",
-  fetchPath: "/public/character-templates/Fari RPGs/Charge RPG.json",
+  importPath: "../public/character-templates/Fari RPGs/Charge RPG.json",
 });
 
-function makeCharacterSheetStory(template: ICharacterTemplate) {
+function makeCharacterSheetStory({ importPath }: { importPath: string }) {
   const story = Template.bind({});
   (story as any).loaders = [
     async () => {
-      const character = await CharacterFactory.make(template);
+      const file = await import(importPath);
+      const character = await CharacterFactory.make({ json: file.default });
       return { character: overrideCharacterDateForStorybook(character) };
     },
   ];

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,3 +1,4 @@
+import legacy from "@vitejs/plugin-legacy";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vitest/config";
 
@@ -9,7 +10,12 @@ export default defineConfig({
     ),
     "process.env.JEST_WORKER_ID": JSON.stringify(false),
   },
-  plugins: [react()],
+  plugins: [
+    react(),
+    legacy({
+      targets: ["defaults", "not IE 11"],
+    }),
+  ],
   server: {
     port: 1234,
     proxy: {