feat: added Switch node (#57)

apps/electron-app/src/common/nodes.ts

@@ -22,6 +22,7 @@ import { Delay } from '../render/components/react-flow/nodes/Delay';
 import { Calculate } from '../render/components/react-flow/nodes/Calculate';
 import { Constant } from '../render/components/react-flow/nodes/Constant';
 import { Relay } from '../render/components/react-flow/nodes/Relay';
+import { Switch } from '../render/components/react-flow/nodes/Switch';
 
 export const NODE_TYPES: Record<string, (props: any) => JSX.Element> = {
 	Button: Button,
@@ -49,6 +50,7 @@ export const NODE_TYPES: Record<string, (props: any) => JSX.Element> = {
 	Rgb: Rgb,
 	Servo: Servo,
 	Smooth: Smooth,
+	Switch: Switch,
 	Trigger: Trigger,
 	Vibration: Vibration,
 } as const;

apps/electron-app/src/render/components/react-flow/nodes/Switch.tsx

@@ -0,0 +1,72 @@
+import { SwitchData, SwitchValueType } from '@microflow/components';
+import { BaseNode, NodeContainer, useNodeSettings } from './Node';
+import { Handle } from './Handle';
+import { Position } from '@xyflow/react';
+import { useNodeValue } from '../../../stores/node-data';
+import { Switch as UiSwitch } from '@ui/index';
+import { useEffect } from 'react';
+import { usePins } from '../../../stores/board';
+import { MODES } from '../../../../common/types';
+import { mapPinToPaneOption } from '../../../../utils/pin';
+
+export function Switch(props: Props) {
+	return (
+		<NodeContainer {...props}>
+			<Value />
+			<Settings />
+			<Handle type="source" position={Position.Right} id="open" offset={-1} />
+			<Handle type="source" position={Position.Right} id="close" />
+			<Handle type="source" position={Position.Right} id="change" offset={1} />
+		</NodeContainer>
+	);
+}
+
+function Value() {
+	const value = useNodeValue<SwitchValueType>(false);
+
+	return <UiSwitch checked={value} className="scale-150" />;
+}
+
+function Settings() {
+	const { pane, settings } = useNodeSettings<SwitchData>();
+	const pins = usePins();
+
+	useEffect(() => {
+		if (!pane) return;
+
+		const pinBinding = pane.addBinding(settings, 'pin', {
+			view: 'list',
+			disabled: !pins.length,
+			label: 'pin',
+			index: 0,
+			options: pins.filter(pin => pin.supportedModes.includes(MODES.INPUT)).map(mapPinToPaneOption),
+		});
+
+		const typeBinding = pane.addBinding(settings, 'type', {
+			view: 'list',
+			label: 'type',
+			index: 1,
+			options: [
+				{ value: 'NC', text: 'normally closed' },
+				{ value: 'NO', text: 'normally open' },
+			],
+		});
+
+		return () => {
+			pinBinding.dispose();
+			typeBinding.dispose();
+		};
+	}, [pins, pane, settings]);
+	return null;
+}
+
+type Props = BaseNode<SwitchData>;
+Switch.defaultProps = {
+	data: {
+		pin: 2,
+		group: 'hardware',
+		label: 'Switch',
+		tags: ['digital', 'input'],
+		type: 'NC',
+	} satisfies Props['data'],
+};

apps/nextjs-app/app/docs/microflow-studio/nodes/hardware/switch/page.md

@@ -0,0 +1,48 @@
+---
+title: Switch
+---
+
+{% tags %}
+{% tag title="Digital" /%}
+{% tag title="Input" /%}
+{% /tags %}
+
+Similar to a [`Button`](/docs/microflow-studio/nodes/hardware/button), a switch is a simple input device that can be either open or closed.
+
+In comparison, a switch will hold its state until it is changed, while a button will only be active while it is being pressed.
+
+{% iframe src="https://www.tinkercad.com/embed/dxxCQPOmd5e" /%}
+
+## Types of switches
+
+Switches come in many shapes and sizes. Below are a few examples and how to wire them up.
+
+{% callout type="note" title="Wiring" %}
+The wiring examples are for illustrative purposes, it might not work with your particular switch.
+{% /callout %}
+
+**Is my button active table**
+| Switch Type | Switch State | Input Pin State |
+|-------------|--------------|-----------------|
+| Normally Open (NO) | On | HIGH (1) |
+| Normally Open (NO) | Off | LOW (0) |
+| Normally Closed (NC) | On | LOW (0) |
+| Normally Closed (NC) | Off | HIGH (1) |
+
+### 2 pin on-off switch
+
+A 2 pin switch requires a _resistor_ to work properly.
+
+![2 pin on-off switch](/images/2-pin-on-off-switch.svg)
+
+### 3 pin on-off switch
+
+A 3 pin switch is similar to a 2 pin switch, it does not require a _resistor_ but it has an additional pin that is connected to the input pin.
+
+The input pin is usually connected to the middle pin, while the other two pins are connected to the ground and power.
+
+![3 pin switch](/images/3-pin-on-off-switch.svg)
+
+## Resources
+
+[Johnny-Five](https://johnny-five.io/api/switch/)

apps/nextjs-app/lib/navigation.ts

@@ -59,6 +59,11 @@ export const navigation = [
 				href: '/docs/microflow-studio/nodes/hardware/servo',
 				parent: '/docs/microflow-studio/nodes/hardware',
 			},
+			{
+				title: 'Switch',
+				href: '/docs/microflow-studio/nodes/hardware/switch',
+				parent: '/docs/microflow-studio/nodes/hardware',
+			},
 			{
 				title: 'Vibration',
 				href: '/docs/microflow-studio/nodes/hardware/vibration',