PR preview + mock library loader (#366)

Author: adidahiya

.github/workflows/preview.yml

@@ -0,0 +1,26 @@
+name: Deploy PR Preview
+on:
+  pull_request:
+    types: [opened, synchronize, closed]
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "22"
+      - name: Enable Corepack
+        run: corepack enable
+      - name: Use Yarn 4.7.0
+        run: corepack prepare [email protected] --activate
+      - run: yarn
+      - run: yarn build:web
+      - uses: rossjrw/[email protected]
+        with:
+          source-dir: ./packages/raga-web-app/dist

package.json

@@ -7,6 +7,7 @@
   ],
   "scripts": {
     "build": "nx run-many -t build",
+    "build:web": "yarn workspace @adahiya/raga-lib build && yarn workspace @adahiya/raga-web-app build",
     "check-format": "prettier --check \"./**/*.{js,json,md,scss,ts,tsx,yaml,yml}\"",
     "check-lint": "nx run-many -t check-lint",
     "check-types": "nx run-many -t check-types",

packages/raga-web-app/src/components/library/libraryLoader.tsx

@@ -5,12 +5,13 @@ import { useTaskEffect } from "../../hooks";
 import { appStore } from "../../store/appStore";
 import EmptyState from "../common/emptyState";
 import styles from "./libraryLoader.module.scss";
-import LoadLibraryForm from "./loadLibraryForm";
+import LoadLibraryForm, { LoadMockLibraryForm } from "./loadLibraryForm";
 
 export default function LibraryLoader(props: { children: React.ReactNode }) {
   const libraryInputFilepath = appStore.use.libraryInputFilepath();
   const libraryState = appStore.use.libraryLoadingState();
   const loadLibrary = appStore.use.loadSwinsianLibrary();
+  const useMockData = appStore.use.useMockData();
 
   useTaskEffect(
     function* () {
@@ -29,7 +30,7 @@ export default function LibraryLoader(props: { children: React.ReactNode }) {
           title="Select a Swinsian library"
           icon={<IoMusicalNotes size={48} />}
         >
-          <LoadLibraryForm />
+          {useMockData ? <LoadMockLibraryForm /> : <LoadLibraryForm />}
         </EmptyState>
       ) : libraryState === "loading" ? (
         <EmptyState

packages/raga-web-app/src/components/library/loadLibraryForm.tsx

@@ -118,3 +118,17 @@ function MaybeRecentlyUsedLibrariesSection({ formWidth }: { formWidth: number })
     </>
   );
 }
+
+export function LoadMockLibraryForm() {
+  const setLibraryInputFilepath = appStore.use.setLibraryInputFilepath();
+
+  const handleClick = useCallback(() => {
+    setLibraryInputFilepath("/mock/library.xml");
+  }, [setLibraryInputFilepath]);
+
+  return (
+    <Stack gap="xs">
+      <Button onClick={handleClick}>Load Mock Library</Button>
+    </Stack>
+  );
+}