Rename some things

lib/components/NodeContainer.tsx

@@ -4,7 +4,7 @@ import { NodeHeader } from './NodeHeader'
 import {
   GraphConfig,
   NodeConfig,
-  NodeGroupConfig,
+  NodeThemeConfig,
   NodeInputConfig,
   NodeOutputConfig,
 } from '../config'
@@ -27,15 +27,15 @@ export function NodeContainer({
 }: NodeContainerProps) {
   const config = useGraphStore((store) => store.config)
   const nodeConfig = config.getNodeConfig(node.type!)!
-  const nodeGroupConfig = config.getNodeGroupConfig(nodeConfig.group)
+  const nodeThemeConfig = config.getNodeThemeConfig(nodeConfig.theme)
   const [collapsed, toggleCollapsed] = useNodeCollapsed()
 
   if (collapsed) {
     return (
       <CollapsedNodeContainer
         node={node}
         nodeConfig={nodeConfig}
-        nodeGroupConfig={nodeGroupConfig}
+        nodeThemeConfig={nodeThemeConfig}
         toggleCollapsed={toggleCollapsed}
       />
     )
@@ -54,7 +54,7 @@ export function NodeContainer({
       >
         <NodeHeader
           defaultTitle={nodeConfig.name}
-          color={nodeGroupConfig.color}
+          color={nodeThemeConfig.color}
           collapsed={false}
           toggleCollapsed={toggleCollapsed}
         />
@@ -67,14 +67,14 @@ export function NodeContainer({
 type CollapsedNodeContainerProps = {
   node: Node
   nodeConfig: NodeConfig
-  nodeGroupConfig: NodeGroupConfig
+  nodeThemeConfig: NodeThemeConfig
   toggleCollapsed?: () => void
 }
 
 function CollapsedNodeContainer({
   node,
   nodeConfig,
-  nodeGroupConfig,
+  nodeThemeConfig,
   toggleCollapsed,
 }: CollapsedNodeContainerProps) {
   const config = useGraphStore((store) => store.config)
@@ -100,7 +100,7 @@ function CollapsedNodeContainer({
     >
       <NodeHeader
         defaultTitle={nodeConfig.name}
-        color={nodeGroupConfig.color}
+        color={nodeThemeConfig.color}
         collapsed={true}
         toggleCollapsed={toggleCollapsed}
       />

lib/config.ts

@@ -19,15 +19,15 @@ export interface IGraphConfig {
   valueTypes: ValueTypes
 
   /**
-   * Groups of nodes that can be used to organize the node palette. Also allows styling
+   * Groups of nodes that can be used to organize the node palette, allowing styling
    * and configuring the colors of the nodes as a group.
    */
-  nodeGroups: NodeGroupTypes
+  nodeThemes: NodeThemeTypes
 
   /**
    * The nodes types that are registered and can be created in the graph
    */
-  nodes: NodeTypes
+  nodeTypes: NodeTypes
 }
 
 export type KeyBindings = {
@@ -41,8 +41,8 @@ export type ValueTypes = {
   [key: string]: ValueTypeConfig
 }
 
-export type NodeGroupTypes = {
-  [key: string]: NodeGroupConfig
+export type NodeThemeTypes = {
+  [name: string]: NodeThemeConfig
 }
 
 export type NodeTypes = {
@@ -102,13 +102,13 @@ export interface Option {
   value: string
 }
 
-export interface NodeGroupConfig {
+export interface NodeThemeConfig {
   name: string
   color: string
 }
 
 export interface NodeConfig {
-  group: keyof IGraphConfig['nodeGroups']
+  theme: keyof IGraphConfig['nodeThemes']
   name: string
   inputs?: NodeInputConfig[]
   outputs?: NodeOutputConfig[]
@@ -136,7 +136,7 @@ export interface NodeInputConfig {
    * any other inputs with this group name will be rendered under a collapsable
    * accordion.
    */
-  group?: string
+  inputGroup?: string
 }
 
 export interface NodeOutputConfig {
@@ -173,10 +173,10 @@ export type InputProps = BaseInputProps & NodeInputConfig & ValueTypeConfig
 export class GraphConfig {
   readonly valueTypes: ValueTypes = {}
   readonly keybindings: KeyBindings
-  readonly nodeGroups: {
-    [key: string]: NodeGroupConfig
+  readonly nodeThemes: {
+    [key: string]: NodeThemeConfig
   } = {}
-  private readonly nodes: {
+  private readonly nodeTypes: {
     [key: string]: NodeConfig
   } = {}
   private customNodes: {
@@ -200,22 +200,16 @@ export class GraphConfig {
       color: '#a1a1a1',
       inputType: null,
     }
-    this.nodeGroups = props?.nodeGroups ?? this.nodeGroups
-    this.nodes = props?.nodes ?? this.nodes
+    this.nodeThemes = props?.nodeThemes ?? this.nodeThemes
+    this.nodeTypes = props?.nodeTypes ?? this.nodeTypes
     for (const [key, value] of Object.entries(getBuiltinInputs())) {
       this.inputs[key] = value
     }
   }
 
   validate(): GraphConfig {
     const errors: string[] = []
-    Object.values(this.nodes).forEach((node) => {
-      const groups = Object.keys(this.nodeGroups)
-      if (!this.nodeGroups[node.group]) {
-        errors.push(
-          `Node '${node.name}' belongs to a node group that does not exist: '${node.group}'. Available groups: ${groups.join(', ')}`,
-        )
-      }
+    Object.values(this.nodeTypes).forEach((node) => {
       if (node.inputs) {
         node.inputs.forEach((input) => {
           if (!this.valueTypes[input.valueType]) {
@@ -244,14 +238,14 @@ export class GraphConfig {
   registerCustomNode<T>(
     name: string,
     type: string,
-    group: string,
+    theme: string,
     node: JSXElementConstructor<T>,
     inputs: NodeInputConfig[],
     outputs: NodeOutputConfig[],
   ) {
     this.customNodes[type] = node
-    this.nodes[type] = {
-      group,
+    this.nodeTypes[type] = {
+      theme: theme,
       name,
       inputs: inputs,
       outputs: outputs,
@@ -291,44 +285,44 @@ export class GraphConfig {
   }
 
   nodeConfigs(): WithType<NodeConfig, string>[] {
-    return Object.entries(this.nodes).map(([type, value]) => ({
+    return Object.entries(this.nodeTypes).map(([type, value]) => ({
       ...value,
       type,
     }))
   }
 
-  getNodeConfig(type: string): NodeConfig | null {
-    return this.nodes[type]
+  getNodeConfig(type: string): NodeConfig {
+    return this.nodeTypes[type]
   }
 
-  nodeConfigsByGroup(group: string): WithType<NodeConfig, string>[] {
-    return Object.entries(this.nodes)
+  nodeConfigsByTheme(theme: string): WithType<NodeConfig, string>[] {
+    return Object.entries(this.nodeTypes)
       .map(([type, n]) => ({ type, ...n }))
-      .filter((n) => n.group === group)
+      .filter((n) => n.theme === theme)
   }
 
-  nodeGroupConfigs(): WithType<NodeGroupConfig, string>[] {
-    return Object.entries(this.nodeGroups).map(([type, value]) => ({
+  nodeThemeConfigs(): WithType<NodeThemeConfig, string>[] {
+    return Object.entries(this.nodeThemes).map(([type, value]) => ({
       ...value,
       type,
     }))
   }
 
   getRegisteredNodeTypes() {
-    return Object.entries(this.nodeGroups).map(([type, group]) => ({
+    return Object.entries(this.nodeThemes).map(([type, theme]) => ({
       type,
-      name: group.name,
-      nodes: this.nodeConfigsByGroup(type).map((node) => ({
+      name: theme.name,
+      nodes: this.nodeConfigsByTheme(type).map((node) => ({
         type: node.type,
         name: node.name,
       })),
     }))
   }
 
-  getNodeGroupConfig<T extends keyof this['nodeGroups']>(
+  getNodeThemeConfig<T extends keyof this['nodeThemes']>(
     nodeType: T,
-  ): NodeGroupConfig {
-    return this.nodeGroups[nodeType as keyof NodeGroupTypes]
+  ): NodeThemeConfig {
+    return this.nodeThemes[nodeType as keyof NodeThemeTypes]
   }
 
   valueType<T extends keyof this['valueTypes']>(type: T): ValueTypeConfig {
@@ -370,7 +364,7 @@ export class GraphConfig {
       node: NodeConfig,
     ) => JSXElementConstructor<any>,
   ): Record<string, JSXElementConstructor<any>> {
-    return Object.entries(this.nodes)
+    return Object.entries(this.nodeTypes)
       .map(([type, node]): [string, JSXElementConstructor<any>] => {
         if (node.custom) {
           return [type, this.customNode(type)]

lib/hooks/node.ts

@@ -18,13 +18,13 @@ const INPUT_GROUPS_FIELD = '__inputGroupsExpanded'
  * A drop-in replacement for the useState hook that stores whether an input group is expanded
  * or not in the node's data object. It shares the same underlying array of expanded groups
  * with other hooks that use the same node ID.
- * @param group
+ * @param inputGroup
  */
 export function useNodeInputGroupState(
-  group: string,
+  inputGroup: string,
 ): [boolean, (newState: boolean) => void] {
   const nodeId = useNodeId()
-  return useToggleNodeArrayProperty(nodeId!, INPUT_GROUPS_FIELD, group)
+  return useToggleNodeArrayProperty(nodeId!, INPUT_GROUPS_FIELD, inputGroup)
 }
 
 /**
@@ -56,7 +56,7 @@ function useToggleNodeArrayProperty(
     data![INPUT_GROUPS_FIELD]?.includes(key) ?? false,
   )
   const toggleProperty = useCallback(
-    (newState) => {
+    (newState: React.SetStateAction<boolean>) => {
       setIsEnabled(newState)
 
       updateNodeData(nodeId, (node) => {

lib/node-types.tsx

@@ -70,7 +70,7 @@ export function buildNode(
     // Construct memoized input and output components based on the node config
     const inputs = useMemo(() => {
       return getInputElements(
-        inputConfigs.filter((input) => !input.group),
+        inputConfigs.filter((input) => !input.inputGroup),
         edges,
       )
     }, [inputConfigs, config, node, edgeIds])
@@ -84,18 +84,18 @@ export function buildNode(
     // Input groups are those inputs that should be rendered under a collapsable accordion
     const inputGroups = useMemo(() => {
       const grouped: Record<string, NodeInputConfig[]> = inputConfigs
-        .filter((input) => input.group)
+        .filter((input) => input.inputGroup)
         .reduce((acc: Record<string, NodeInputConfig[]>, input) => {
-          const group = input.group!
-          if (!acc[group]) acc[group] = []
-          acc[group].push(input)
+          const inputGroup = input.inputGroup!
+          if (!acc[inputGroup]) acc[inputGroup] = []
+          acc[inputGroup].push(input)
           return acc
         }, {})
 
-      return Object.entries(grouped).map(([group, inputs]) => (
+      return Object.entries(grouped).map(([inputGroup, inputs]) => (
         <InputGroup
-          label={group}
-          key={group}
+          label={inputGroup}
+          key={inputGroup}
           handles={getHandlesForInputs(inputs)}
         >
           {getInputElements(inputs, edges)}