feat: added Hall effect node (#58)

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

@@ -13,7 +13,12 @@ import { Oscillator } from '../render/components/react-flow/nodes/Oscillator';
 import { Piezo } from '../render/components/react-flow/nodes/piezo/Piezo';
 import { RangeMap } from '../render/components/react-flow/nodes/RangeMap';
 import { Rgb } from '../render/components/react-flow/nodes/RGB';
-import { Force, Ldr, Potentiometer } from '../render/components/react-flow/nodes/Sensor';
+import {
+	Force,
+	HallEffect,
+	Ldr,
+	Potentiometer,
+} from '../render/components/react-flow/nodes/Sensor';
 import { Servo } from '../render/components/react-flow/nodes/Servo';
 import { Smooth } from '../render/components/react-flow/nodes/Smooth';
 import { Trigger } from '../render/components/react-flow/nodes/Trigger';
@@ -34,6 +39,7 @@ export const NODE_TYPES: Record<string, (props: any) => JSX.Element> = {
 	Figma: Figma,
 	Force: Force,
 	Gate: Gate,
+	HallEffect: HallEffect,
 	Interval: Interval,
 	Ldr: Ldr,
 	Led: Led,

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

@@ -1,5 +1,5 @@
 import type { SensorData, SensorValueType } from '@microflow/components';
-import { cva, Icons, Progress } from '@microflow/ui';
+import { cva, Icons, Progress, VariantProps } from '@microflow/ui';
 import { Position } from '@xyflow/react';
 import { useEffect, useMemo } from 'react';
 import { MODES } from '../../../../common/types';
@@ -39,13 +39,47 @@ function Value() {
 					style={{ transform: `scale(${1 + progress / 100})` }}
 				/>
 			);
+		case 'hall-effect':
+			return (
+				<>
+					<Icons.Magnet
+						size={48}
+						className={hallEffect({
+							polarity: (Math.round(progress / 10) * 10) as HallEffectProps['polarity'],
+						})}
+						style={{
+							transform: `rotate(${progress * (360 / 100 / 2) + 135}deg)`,
+						}}
+					/>
+					<span className="text-xs">{progress}%</span>
+				</>
+			);
 		default:
 			return (
 				<Progress max={1023} value={progress} className="border border-muted-foreground mx-4" />
 			);
 	}
 }
 
+type HallEffectProps = VariantProps<typeof hallEffect>;
+const hallEffect = cva('transition-all', {
+	variants: {
+		polarity: {
+			0: 'text-red-600',
+			10: 'text-red-500',
+			20: 'text-red-400',
+			30: 'text-red-300',
+			40: 'text-red-200',
+			50: 'text-gray-200',
+			60: 'text-blue-200',
+			70: 'text-blue-300',
+			80: 'text-blue-400',
+			90: 'text-blue-500',
+			100: 'text-blue-600',
+		},
+	},
+});
+
 function Settings() {
 	const { pane, settings } = useNodeSettings<SensorData>();
 	const pins = usePins();
@@ -113,3 +147,13 @@ Force.defaultProps = {
 		baseType: 'Sensor',
 	} satisfies Props['data'],
 };
+
+export const HallEffect = (props: Props) => <Sensor {...props} />;
+HallEffect.defaultProps = {
+	data: {
+		...Sensor.defaultProps.data,
+		label: 'Hall Effect',
+		subType: 'hall-effect',
+		baseType: 'Sensor',
+	} satisfies Props['data'],
+};

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

@@ -0,0 +1,33 @@
+---
+title: Hall effect
+---
+
+{% tags %}
+{% tag title="Analog" /%}
+{% tag title="Input" /%}
+{% /tags %}
+
+A hall effect sensor is a sensor that detects the presence of a magnetic field. It will detect both the north and south pole of a magnet. The sensor will output a voltage that is proportional to the strength of the magnetic field. `Microflow` **only** supports analog hall effect sensors.
+
+North pole {% .text-red-500 .font-bold %}
+
+When recognizing a north pole, the output voltage will _decrease_.
+
+South pole {% .text-blue-500 .font-bold %}
+
+When recognizing a south pole, the output voltage will _increase_.
+
+
+
+## Wiring
+Not every hall effect sensor is the same, but most of them have three pins: 5V, GND, and SIG.
+
+Depending on the sensor the wiring may differ.
+
+### 503
+
+![hall 503](/images/hall-503.svg) {%  .w-40  %}
+
+## Resources
+
+- [Johnny-Five](https://johnny-five.io/api/sensor/)

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

@@ -33,15 +33,15 @@ The wiring examples are for illustrative purposes, it might not work with your p
 
 A 2 pin switch requires a _resistor_ to work properly.
 
-![2 pin on-off switch](/images/2-pin-on-off-switch.svg)
+![2 pin on-off switch](/images/2-pin-on-off-switch.svg) {%  .w-60  %}
 
 ### 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)
+![3 pin switch](/images/3-pin-on-off-switch.svg) {%  .w-52  %}
 
 ## Resources
 

apps/nextjs-app/lib/navigation.ts

@@ -24,6 +24,11 @@ export const navigation = [
 				href: '/docs/microflow-studio/nodes/hardware/force',
 				parent: '/docs/microflow-studio/nodes/hardware',
 			},
+			{
+				title: 'Hall effect',
+				href: '/docs/microflow-studio/nodes/hardware/hall-effect',
+				parent: '/docs/microflow-studio/nodes/hardware',
+			},
 			{
 				title: 'LDR',
 				href: '/docs/microflow-studio/nodes/hardware/ldr',