Iconography (#1120)

* feat: new icons for blocks

* feat: add more icons

* refactor: block components and add more icons

* feat: icon for visual blocks

* refactor: children prop instead of SVGComponent prop in DefaultBlock

* feat: show block func name for logic blocks in place of svg

* feat: icon for load blocks

* refactor: block folder tree and added fn generators icon

* feat: hardware icon

* refactor block type component structure and finilize icon replacements

* update sample app and gallery apps

* chore: format code

* show icon in sidebar as well

* update gallery examples and add icon for oscilloscope

* chore: node -> block

* fix tsc error

* Delete src/renderer/providers/ThemeProvider.tsx

* delete Ai-svg.tsx

* readd: ai-svg.tsx

* add themeProvider back

* dynamic block icon importing

* dynamically import block icons

* chore: remove unused file

* visor icons

* scale up/down visor icons

* cache block icons

* chore: themeProvider -> theme-provider text-block -> text-node

* chore: convert getVariantClass to a map object

---------

Co-authored-by: JeffDotPng <zhangjeff2014@gmail.com>

captain/utils/manifest/generate_manifest.py

@@ -25,6 +25,7 @@
     "GAMES": "Games",
     "COMPUTER_VISION": "Computer Vision",
     "default": "Default Blocks",
+    "TYPE_CASTING": "Type Casting",
 }
 
 # Types that are allowed in the manifest, this is for styling in the frontend.
@@ -34,7 +35,6 @@
     "DATA",
     "VISUALIZATION",
     "MATH",
-    "ARITHMETIC",
     "ETL",
     "DSP",
     "IMAGE",
@@ -46,6 +46,19 @@
     "GAMES",
     "DEBUGGING",
     "COMPUTER_VISION",
+    "EXTRACT",
+    "LOAD",
+    "TRANSFORM",
+    "TYPE_CASTING",
+    "FUNCTION_GENERATORS",
+    "ROBOTICS",
+    "MOTORS",
+    "PROTOCOLS",
+    "NATIONAL_INSTRUMENTS",
+    "DAQ_BOARDS",
+    "IMAGING",
+    "MULTIMETERS",
+    "OSCILLOSCOPES",
 ]
 
 # Sort order in sidebar
@@ -59,7 +72,6 @@
     "CONTROL_FLOW",
     "COMPUTER_VISION",
     "HARDWARE",
-    "DSP",
     "NUMPY",
     "SCIPY",
     "DEBUGGING",
@@ -96,9 +108,11 @@ def browse_directories(dir_path: str, cur_type: Optional[str] = None, depth: int
             cur_type = (
                 basename
                 if basename in ALLOWED_TYPES  # give current type precedence
-                else cur_type
-                if cur_type in ALLOWED_TYPES  # otherwise inherit if allowed
-                else "default"  # else use default
+                else (
+                    cur_type
+                    if cur_type in ALLOWED_TYPES  # otherwise inherit if allowed
+                    else "default"
+                )  # else use default
             )
 
             subdir = browse_directories(entry.path, cur_type, depth=depth + 1)

docs/src/components/nodes/ArithmeticNode.tsx

@@ -10,7 +10,7 @@ const operatorMap: Record<string, string> = {
   ABS: "|x|",
 };
 
-const ArithmeticNode = (props: CustomNodeProps) => {
+const ArithmeticNode = (props: BlockProps) => {
   return (
     <DefaultNode width={72} height={72} {...props}>
       <h2 className="m-0 text-center font-sans text-4xl font-semibold tracking-wider text-accent1">

docs/src/components/nodes/ConditionalNode.tsx

@@ -2,7 +2,7 @@ import type { CustomNodeProps } from "./types/nodeProps";
 import { memo } from "react";
 import LogicNode from "./LogicNode";
 
-export const ConditionalNode = (props: CustomNodeProps) => {
+export const ConditionalNode = (props: BlockProps) => {
   const { data } = props;
   const operator = data.ctrls["operator_type"].value as string;
 

electron.vite.config.ts

@@ -1,6 +1,7 @@
 import { resolve } from "path";
 import { defineConfig, externalizeDepsPlugin } from "electron-vite";
 import react from "@vitejs/plugin-react-swc";
+import svgr from "vite-plugin-svgr";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 
 export default defineConfig({
@@ -33,6 +34,6 @@ export default defineConfig({
         "@": resolve(__dirname, "src"),
       },
     },
-    plugins: [nodePolyfills(), react()], // do not switch the order it breaks
+    plugins: [nodePolyfills(), react(), svgr()], // do not switch the order it breaks
   },
 });

package.json

@@ -151,7 +151,8 @@
     "vite-plugin-environment": "^1.1.3",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-istanbul": "^5.0.0",
-    "vite-plugin-node-polyfills": "^0.21.0"
+    "vite-plugin-node-polyfills": "^0.21.0",
+    "vite-plugin-svgr": "^4.2.0"
   },
   "nyc": {
     "extends": "@istanbuljs/nyc-config-typescript",