FSA Response Area (Re-opened)

README.md

@@ -2,6 +2,10 @@
 
 Develop local TypeScript code to create custom response area types, and see them previewed live in the main application. When they're ready, provide your code to the Lambda Feedback team, who will consider including it in the main application after (human) review.
 
+## FSA Response Section
+
+please refer to [FSA.md](./FSA.md)
+
 ## Overview
 
 To create a new response area type, you'll need to:

externals/styles/fonts.tsx

@@ -1,80 +1,102 @@
-import { Fira_Sans, Fira_Mono, Lato, Roboto } from 'next/font/google'
+// import { Fira_Sans, Fira_Mono, Lato, Roboto } from 'next/font/google'
 
-export const roboto = Roboto({
-  subsets: ['latin'],
-  weight: ['400', '700'],
-  style: ['normal', 'italic'],
-  fallback: [
-    '-apple-system',
-    'BlinkMacSystemFont',
-    'Segoe UI',
-    'Roboto',
-    'Helvetica Neue',
-    'Arial',
-    'sans-serif',
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-  ],
-  variable: '--font-roboto',
-  preload: false,
-})
+// export const roboto = Roboto({
+//   subsets: ['latin'],
+//   weight: ['400', '700'],
+//   style: ['normal', 'italic'],
+//   fallback: [
+//     '-apple-system',
+//     'BlinkMacSystemFont',
+//     'Segoe UI',
+//     'Roboto',
+//     'Helvetica Neue',
+//     'Arial',
+//     'sans-serif',
+//     'Apple Color Emoji',
+//     'Segoe UI Emoji',
+//     'Segoe UI Symbol',
+//   ],
+//   variable: '--font-roboto',
+//   preload: false,
+// })
 
-export const firaSans = Fira_Sans({
-  subsets: ['latin'],
-  weight: ['300', '400', '500', '600', '700'],
-  style: ['normal', 'italic'],
-  fallback: [
-    '-apple-system',
-    'BlinkMacSystemFont',
-    'Segoe UI',
-    'Roboto',
-    'Helvetica Neue',
-    'Arial',
-    'sans-serif',
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-  ],
-  variable: '--font-fira-sans',
-  preload: false,
-})
+// export const firaSans = Fira_Sans({
+//   subsets: ['latin'],
+//   weight: ['300', '400', '500', '600', '700'],
+//   style: ['normal', 'italic'],
+//   fallback: [
+//     '-apple-system',
+//     'BlinkMacSystemFont',
+//     'Segoe UI',
+//     'Roboto',
+//     'Helvetica Neue',
+//     'Arial',
+//     'sans-serif',
+//     'Apple Color Emoji',
+//     'Segoe UI Emoji',
+//     'Segoe UI Symbol',
+//   ],
+//   variable: '--font-fira-sans',
+//   preload: false,
+// })
 
-export const firaMono = Fira_Mono({
-  subsets: ['latin'],
-  weight: ['400'],
-  fallback: [
-    '-apple-system',
-    'BlinkMacSystemFont',
-    'Segoe UI',
-    'Roboto',
-    'Helvetica Neue',
-    'Arial',
-    'sans-serif',
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-  ],
-  variable: '--font-fira-mono',
-  preload: false,
-})
+// export const firaMono = Fira_Mono({
+//   subsets: ['latin'],
+//   weight: ['400'],
+//   fallback: [
+//     '-apple-system',
+//     'BlinkMacSystemFont',
+//     'Segoe UI',
+//     'Roboto',
+//     'Helvetica Neue',
+//     'Arial',
+//     'sans-serif',
+//     'Apple Color Emoji',
+//     'Segoe UI Emoji',
+//     'Segoe UI Symbol',
+//   ],
+//   variable: '--font-fira-mono',
+//   preload: false,
+// })
 
-export const lato = Lato({
-  subsets: ['latin'],
-  weight: ['400'],
-  style: ['normal', 'italic'],
-  fallback: [
-    '-apple-system',
-    'BlinkMacSystemFont',
-    'Segoe UI',
-    'Roboto',
-    'Helvetica Neue',
-    'Arial',
-    'sans-serif',
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-  ],
-  variable: '--font-lato',
-  preload: false,
-})
+// export const lato = Lato({
+//   subsets: ['latin'],
+//   weight: ['400'],
+//   style: ['normal', 'italic'],
+//   fallback: [
+//     '-apple-system',
+//     'BlinkMacSystemFont',
+//     'Segoe UI',
+//     'Roboto',
+//     'Helvetica Neue',
+//     'Arial',
+//     'sans-serif',
+//     'Apple Color Emoji',
+//     'Segoe UI Emoji',
+//     'Segoe UI Symbol',
+//   ],
+//   variable: '--font-lato',
+//   preload: false,
+// })
+
+// please see the sandbox issue #2 for this
+
+export const firaSans = {
+  className: 'font-fira-sans',
+  style: { fontFamily: 'Fira Sans, sans-serif' },
+}
+
+export const firaMono = {
+  className: 'font-fira-mono',
+  style: { fontFamily: 'Fira Mono, monospace' },
+}
+
+export const lato = {
+  className: 'font-lato',
+  style: { fontFamily: 'Lato, sans-serif' },
+}
+
+export const roboto = {
+  className: 'font-roboto',
+  style: { fontFamily: 'Roboto, sans-serif' },
+}

package.json

@@ -14,7 +14,8 @@
     "ci": "run-p format lint typecheck",
     "fix": "run-s format:fix lint:fix",
     "preview": "vite preview",
-    "dev": "run-p build:watch preview"
+    "dev": "run-p build:watch preview",
+    "dev:fsa": "vite"
   },
   "dependencies": {
     "@date-io/date-fns": "^2.13.2",
@@ -35,6 +36,7 @@
     "@nivo/core": "^0.88.0",
     "@nivo/line": "^0.88.0",
     "@nivo/pie": "^0.88.0",
+    "cytoscape": "^3.33.1",
     "axios": "^1.7.2",
     "date-fns": "^2.28.0",
     "firebase": "^11.0.1",
@@ -49,6 +51,7 @@
     "notistack": "^2.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "reactflow": "^11.11.4",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.31.2",
     "react-image-crop": "^11.0.10",

src/sandbox-component.tsx

@@ -1,12 +1,14 @@
 import { ThemeProvider } from '@styles/minimal/theme-provider'
+
+import { FSAResponseAreaTub } from './types/FSA'
 import { SandboxResponseAreaTub } from './types/Sandbox/index'
 
 function ResponseAreaInputWrapper({ children }: { children: React.ReactNode }) {
   return <ThemeProvider>{children}</ThemeProvider>
 }
 
 // wrap the components with the necessary providers; only in the sandbox
-class WrappedSandboxResponseAreaTub extends SandboxResponseAreaTub {
+class WrappedSandboxResponseAreaTub extends FSAResponseAreaTub {
   constructor() {
     super()