feat: added force node

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

@@ -13,7 +13,7 @@ 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 { Ldr, Potentiometer } from '../render/components/react-flow/nodes/Sensor';
+import { Force, 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';
@@ -30,6 +30,7 @@ export const NODE_TYPES: Record<string, (props: any) => JSX.Element> = {
 	Counter: Counter,
 	Delay: Delay,
 	Figma: Figma,
+	Force: Force,
 	Gate: Gate,
 	Interval: Interval,
 	Ldr: Ldr,

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

@@ -1,5 +1,5 @@
 import type { SensorData, SensorValueType } from '@microflow/components';
-import { Icons, Progress } from '@microflow/ui';
+import { cva, Icons, Progress } from '@microflow/ui';
 import { Position } from '@xyflow/react';
 import { useEffect, useMemo } from 'react';
 import { MODES } from '../../../../common/types';
@@ -27,14 +27,17 @@ function Value() {
 
 	switch (data.subType) {
 		case 'ldr':
+			if (progress <= 33) return <Icons.SunDim className={`text-yellow-500/30`} size={48} />;
+			if (progress <= 66) return <Icons.SunMedium className={`text-yellow-500/60`} size={48} />;
+			if (progress > 66) return <Icons.Sun className={`text-yellow-500`} size={48} />;
+			break;
+		case 'force':
 			return (
-				<section className="flex flex-col text-center gap-2">
-					{progress <= 33 && <Icons.SunDim className={`text-yellow-500/30`} size={48} />}
-					{progress > 33 && progress <= 66 && (
-						<Icons.SunMedium className={`text-yellow-500/60`} size={48} />
-					)}
-					{progress > 66 && <Icons.Sun className={`text-yellow-500`} size={48} />}
-				</section>
+				<Icons.BicepsFlexed
+					size={48}
+					className="transition-all"
+					style={{ transform: `scale(${1 + progress / 100})` }}
+				/>
 			);
 		default:
 			return (
@@ -100,3 +103,13 @@ Potentiometer.defaultProps = {
 		baseType: 'Sensor',
 	} satisfies Props['data'],
 };
+
+export const Force = (props: Props) => <Sensor {...props} />;
+Force.defaultProps = {
+	data: {
+		...Sensor.defaultProps.data,
+		label: 'Force',
+		subType: 'force',
+		baseType: 'Sensor',
+	} satisfies Props['data'],
+};

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

@@ -0,0 +1,16 @@
+---
+title: Force
+---
+
+{% tags %}
+{% tag title="Analog" /%}
+{% tag title="Input" /%}
+{% /tags %}
+
+The force sensor is a simple sensor that can detect the amount of force applied to it.
+
+{% iframe src="https://www.tinkercad.com/embed/9qwUKhzjZus" /%}
+
+## Resources
+
+- [Johnny-Five](https://johnny-five.io/api/sensor/)

apps/nextjs-app/lib/navigation.ts

@@ -33,6 +33,11 @@ export const navigation = [
 				href: '/docs/microflow-studio/nodes/figma',
 				parent: '/docs/microflow-studio/nodes',
 			},
+			{
+				title: 'Force',
+				href: '/docs/microflow-studio/nodes/force',
+				parent: '/docs/microflow-studio/nodes',
+			},
 			{
 				title: 'Gate',
 				href: '/docs/microflow-studio/nodes/gate',

apps/nextjs-app/markdoc/tags.js

@@ -83,9 +83,9 @@ const tags = {
 					src={src}
 					width={width ?? 725}
 					height={height ?? 453}
-					frameborder="0"
-					marginwidth="0"
-					marginheight="0"
+					frameBorder="0"
+					marginWidth="0"
+					marginHeight="0"
 					scrolling="no"
 				/>
 			);