File Saver, Local Storage

Author: kirill-konshin

packages/utils/package.json

@@ -24,6 +24,7 @@
     "expo-file-system": "^18.0.7",
     "expo-sharing": "^13.0.1",
     "expo-updates": "^0.26.13",
+    "file-saver": "^2.0.5",
     "many-keys-map": "^2.0.1",
     "psd": "^3.4.0",
     "react-hook-form": "^7.54.2",
@@ -43,6 +44,7 @@
     "@storybook/react": "^8.5.2",
     "@storybook/react-vite": "^8.5.2",
     "@storybook/test": "^8.5.2",
+    "@types/file-saver": "^2",
     "@types/psd": "^3.4.3",
     "@vitest/coverage-v8": "^3.0.4",
     "@vitest/web-worker": "^3.0.5",

packages/utils/src/core/files.ts

@@ -0,0 +1,24 @@
+import { saveAs } from 'file-saver';
+
+export const downloadFile = async (filename, text, type = 'application/json') => {
+    //FIXME https://github.com/eligrey/FileSaver.js/issues/731
+    saveAs(new Blob([text], { type }), filename);
+};
+
+export const openFile = (): Promise<string> =>
+    new Promise((res, rej) => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.addEventListener('change', function readFile(e) {
+            input.removeEventListener('change', readFile);
+            // @ts-expect-error file is always there
+            const [file] = e.target.files;
+            if (!file) return;
+            const reader = new FileReader();
+            reader.onload = (e) => res(e.target?.result as string);
+            reader.onerror = rej;
+            reader.onabort = rej;
+            reader.readAsText(file);
+        });
+        input.click();
+    });

packages/utils/src/core/index.ts

@@ -1,5 +1,7 @@
 export * from './cache';
 export * from './errors';
+export * from './files';
+export * from './ls';
 export * from './measure';
 export * from './mutex';
 export * from './worker';

packages/utils/src/core/ls.ts

@@ -0,0 +1,11 @@
+export function getStorage(pref: string) {
+    const prefix = (key) => `${pref}-${key}`;
+
+    const ls = (typeof window !== 'undefined' ? localStorage : null) as Storage;
+
+    const read = (key: string) => JSON.parse(ls?.getItem(prefix(key)) || 'null');
+    const write = (key: string, value: any) => ls?.setItem(prefix(key), JSON.stringify(value));
+    const remove = (key: string) => ls?.removeItem(prefix(key));
+
+    return { read, write, remove };
+}

yarn.lock

@@ -3732,6 +3732,7 @@ __metadata:
     "@storybook/react": "npm:^8.5.2"
     "@storybook/react-vite": "npm:^8.5.2"
     "@storybook/test": "npm:^8.5.2"
+    "@types/file-saver": "npm:^2"
     "@types/psd": "npm:^3.4.3"
     "@vitest/coverage-v8": "npm:^3.0.4"
     "@vitest/web-worker": "npm:^3.0.5"
@@ -3748,6 +3749,7 @@ __metadata:
     expo-file-system: "npm:^18.0.7"
     expo-sharing: "npm:^13.0.1"
     expo-updates: "npm:^0.26.13"
+    file-saver: "npm:^2.0.5"
     glob: "npm:^11.0.1"
     many-keys-map: "npm:^2.0.1"
     next: "npm:^15.1.6"
@@ -5680,6 +5682,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/file-saver@npm:^2":
+  version: 2.0.7
+  resolution: "@types/file-saver@npm:2.0.7"
+  checksum: 10c0/c6b88a1aea8eec58469da2a90828fef6e9d5d590c7094fb959783d7c32878af80d39439734f3d41b78355dadb507f606e3d04a29a160c85411c65251e58df847
+  languageName: node
+  linkType: hard
+
 "@types/fs-extra@npm:9.0.13, @types/fs-extra@npm:^9.0.11":
   version: 9.0.13
   resolution: "@types/fs-extra@npm:9.0.13"
@@ -11186,6 +11195,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"file-saver@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "file-saver@npm:2.0.5"
+  checksum: 10c0/0a361f683786c34b2574aea53744cb70d0a6feb0fa5e3af00f2fcb6c9d40d3049cc1470e38c6c75df24219f247f6fb3076f86943958f580e62ee2ffe897af8b1
+  languageName: node
+  linkType: hard
+
 "filelist@npm:^1.0.4":
   version: 1.0.4
   resolution: "filelist@npm:1.0.4"