Feat/documentation (#279)

* Add script to generate documentation
Remove 'NodeTypes` in favor of direct values for the node types
Change input/output nodes to not clear and instead diff values
Fixed some issues with flexbox of the node wrapper
Add in an array indicator
Fixed subgraph to be reactive to additional outputs
Fix find menu

packages/documentation/docs/nodes/accessibility/baseFontSize.mdx

@@ -0,0 +1,104 @@
+---
+title: BaseFontSize
+---
+import { Editor, PanelGroup, DropPanelStore, PanelItem } from '@tokens-studio/graph-editor';
+import {InitialLayout} from '@site/src/components/editor/layout';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+# baseFontSize
+
+Node Type ID: `'studio.tokens.accessibility.baseFontSize'`
+
+## Package 
+
+This is a core package available at [Graph Engine](https://www.npmjs.com/package/@tokens-studio/graph-engine)
+
+To install 
+
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
+```bash
+npm install @tokens-studio/graph-engine
+```
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+```bash
+yarn add @tokens-studio/graph-engine
+```
+  </TabItem>
+</Tabs>
+
+
+
+## Description
+Base Font node allows you to calculate the base font size with DIN 1450.
+
+## Inputs
+
+
+#### correctionFactor
+
+The correct factor
+
+
+
+
+#### distance
+
+*No description*
+
+
+
+
+#### lightingCondition
+
+*No description*
+
+
+
+
+#### pixelDensity
+
+*No description*
+
+
+
+
+#### ppi
+
+*No description*
+
+
+
+
+#### visualAcuity
+
+*No description*
+
+
+
+
+#### xHeightRatio
+
+*No description*
+
+
+
+
+## Outputs
+
+
+#### value
+
+*No description*
+
+
+
+
+
+## Example
+
+*No examples*
+

packages/documentation/docs/nodes/accessibility/colorBlindness.mdx

@@ -0,0 +1,69 @@
+---
+title: ColorBlindness
+---
+import { Editor, PanelGroup, DropPanelStore, PanelItem } from '@tokens-studio/graph-editor';
+import {InitialLayout} from '@site/src/components/editor/layout';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+# colorBlindness
+
+Node Type ID: `'studio.tokens.accessibility.colorBlindness'`
+
+## Package 
+
+This is a core package available at [Graph Engine](https://www.npmjs.com/package/@tokens-studio/graph-engine)
+
+To install 
+
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
+```bash
+npm install @tokens-studio/graph-engine
+```
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+```bash
+yarn add @tokens-studio/graph-engine
+```
+  </TabItem>
+</Tabs>
+
+
+
+## Description
+Converts provided colors to the colors as perceived by the specified color blindness type.
+
+## Inputs
+
+
+#### color
+
+*No description*
+
+
+
+
+#### type
+
+*No description*
+
+
+
+
+## Outputs
+
+
+#### value
+
+*No description*
+
+
+
+
+
+## Example
+
+*No examples*
+

packages/documentation/docs/nodes/accessibility/contrast.mdx

@@ -0,0 +1,50 @@
+---
+title: Contrast
+---
+import { Editor, PanelGroup, DropPanelStore, PanelItem } from '@tokens-studio/graph-editor';
+import {InitialLayout} from '@site/src/components/editor/layout';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+# contrast
+
+Node Type ID: `"studio.tokens.accessibility.contrast"`
+
+## Package 
+
+This is a core package available at [Graph Engine](https://www.npmjs.com/package/@tokens-studio/graph-engine)
+
+To install 
+
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
+```bash
+npm install @tokens-studio/graph-engine
+```
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+```bash
+yarn add @tokens-studio/graph-engine
+```
+  </TabItem>
+</Tabs>
+
+
+
+## Description
+Calculates the contrast between two colors
+
+## Inputs
+
+*No inputs*
+
+## Outputs
+
+*No outputs*
+
+
+## Example
+
+*No examples*
+

packages/documentation/docs/nodes/array/arraySubgraph.mdx

@@ -0,0 +1,62 @@
+---
+title: ArraySubgraph
+---
+import { Editor, PanelGroup, DropPanelStore, PanelItem } from '@tokens-studio/graph-editor';
+import {InitialLayout} from '@site/src/components/editor/layout';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+# arraySubgraph
+
+Node Type ID: `'tokens.studio.array.map'`
+
+## Package 
+
+This is a core package available at [Graph Engine](https://www.npmjs.com/package/@tokens-studio/graph-engine)
+
+To install 
+
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
+```bash
+npm install @tokens-studio/graph-engine
+```
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+```bash
+yarn add @tokens-studio/graph-engine
+```
+  </TabItem>
+</Tabs>
+
+
+
+## Description
+Allows you to map an array of items
+
+## Inputs
+
+
+#### array
+
+*No description*
+
+
+
+
+## Outputs
+
+
+#### value
+
+*No description*
+
+
+
+
+
+## Example
+
+*No examples*
+

packages/documentation/docs/nodes/array/arrify.mdx

@@ -0,0 +1,62 @@
+---
+title: Arrify
+---
+import { Editor, PanelGroup, DropPanelStore, PanelItem } from '@tokens-studio/graph-editor';
+import {InitialLayout} from '@site/src/components/editor/layout';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+# arrify
+
+Node Type ID: `"studio.tokens.array.arrify"`
+
+## Package 
+
+This is a core package available at [Graph Engine](https://www.npmjs.com/package/@tokens-studio/graph-engine)
+
+To install 
+
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
+```bash
+npm install @tokens-studio/graph-engine
+```
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+```bash
+yarn add @tokens-studio/graph-engine
+```
+  </TabItem>
+</Tabs>
+
+
+
+## Description
+Dynamically generates an array
+
+## Inputs
+
+
+#### items
+
+*No description*
+
+
+
+
+## Outputs
+
+
+#### value
+
+*No description*
+
+
+
+
+
+## Example
+
+*No examples*
+