feat: File Browser Update (urls, examples, etc)

.vscode/settings.json

@@ -3,6 +3,7 @@
     "cSpell.words": [
         "dgraph",
         "Fuzzysort",
+        "pixi",
         "pixiapp",
         "subquadrant",
         "subquadrants"

package.json

@@ -28,6 +28,7 @@
     "@types/react": "^17.0.33",
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^17.0.10",
+    "@types/uuid": "^9.0.1",
     "ace-builds": "^1.4.13",
     "axios": "^0.24.0",
     "color": "^4.2.3",
@@ -50,7 +51,9 @@
     "recoil": "^0.6.0",
     "sass": "^1.56.2",
     "typescript": "^4.4.4",
-    "web-vitals": "^1.0.1"
+    "uuid": "^9.0.0",
+    "web-vitals": "^1.0.1",
+    "zod": "^3.21.4"
   },
   "main": "public/electron.js",
   "scripts": {

src/App.tsx

@@ -1,14 +1,11 @@
 import * as React from 'react';
-
 import './styles.css';
-
-import { LoadingProvider } from './contexts/LoadingContext';
-
 import { QuadraticAuth } from './quadratic/QuadraticAuth';
 import { isWASMSupported } from './utils/isWASMSupported';
 import { isWebGLSupported } from '@pixi/utils';
 import { BrowserNotSupported } from './ui/overlays/BrowserNotSupported';
 import * as Sentry from '@sentry/browser';
+import { RecoilRoot } from 'recoil';
 
 export default function App() {
   // Check if browser supports WebGL and WASM
@@ -22,9 +19,8 @@ export default function App() {
   }
 
   return (
-    <LoadingProvider>
-      {/* Provider of QuadraticApp */}
-      <QuadraticAuth></QuadraticAuth>
-    </LoadingProvider>
+    <RecoilRoot>
+      <QuadraticAuth />
+    </RecoilRoot>
   );
 }

src/atoms/editorInteractionStateAtom.ts

@@ -7,6 +7,7 @@ export interface EditorInteractionState {
   showCodeEditor: boolean;
   showCommandPalette: boolean;
   showGoToMenu: boolean;
+  showFileMenu: boolean;
   selectedCell: Coordinate;
   mode: CellTypes;
 }
@@ -16,6 +17,7 @@ export const editorInteractionStateDefault: EditorInteractionState = {
   showCodeEditor: false,
   showCommandPalette: false,
   showGoToMenu: false,
+  showFileMenu: false,
   selectedCell: { x: 0, y: 0 },
   mode: 'TEXT',
 };

src/constants/app.ts

@@ -1,3 +1,34 @@
 import { isMobile } from 'react-device-detect';
 
 export const IS_READONLY_MODE = isMobile;
+export const DEFAULT_FILE_NAME = 'Untitled';
+export const EXAMPLE_FILES = [
+  {
+    name: 'Default (example)',
+    description: 'Quick overview of basic usage of the app.',
+    file: 'default.grid',
+  },
+  {
+    name: 'Python (example)',
+    file: 'python.grid',
+    description: 'Advanced examples of how to use Python in the app.',
+  },
+  // Leaving this one out, as it has nothing useful for users
+  // { name: 'Airports large (example)', file: 'airports_large.grid', description: 'Lorem ipsum santa dolor.' },
+  {
+    name: 'Airports distance (example)',
+    file: 'airports_distance.grid',
+    description: 'Example of filtering data and calculating values in the app.',
+  },
+  { name: 'Expenses (example)', file: 'expenses.grid', description: 'Example of spreadsheet-style budgeting.' },
+  {
+    name: 'Monte Carlo simulation (example)',
+    file: 'monte_carlo_simulation.grid',
+    description: 'Example of working with large sets of data.',
+  },
+  {
+    name: 'Startup portfolio (example)',
+    file: 'startup_portfolio.grid',
+    description: 'Example with calculations from formulas and Python.',
+  },
+];

src/constants/urls.ts

@@ -2,4 +2,5 @@ export const API_URL = 'http://localhost:8000';
 export const DOCUMENTATION_URL = 'https://docs.quadratichq.com';
 export const DOCUMENTATION_PYTHON_URL = `${DOCUMENTATION_URL}/python`;
 export const DOCUMENTATION_FORMULAS_URL = `${DOCUMENTATION_URL}/formulas`;
+export const DOCUMENTATION_FILES_URL = `${DOCUMENTATION_URL}/files`;
 export const BUG_REPORT_URL = 'https://github.com/quadratichq/quadratic/issues';