Fix: initial workspace element positions and updated docs

Author: Akalanka47000

.storybook/preview.tsx

@@ -26,7 +26,7 @@ const preview: Preview = {
     reactRouter: {},
     options: {
       storySort: {
-        order: ["Introduction", "Installation", "Customization"],
+        order: ["Introduction", "Installation", "Customization", "Modifying State", "External Shapes"]
       },
     }
   },

CHANGELOG.md

@@ -1,5 +1,16 @@
 Changelog
 
+# v3.0.0 [2024-08-27]
+
+## Major Release
+
+### Features 
+- Complete UI overhaul with a new design system
+- Adds support for element rotation
+- Adds support for passing external shapes into the toolkit
+
+---
+
 # v2.1.1 [2024-08-07]
 
 ## Patch Release

src/store/reducers/editor/seats.ts

@@ -6,37 +6,37 @@ const gap = 50;
 export default () => [
   ...[...Array(10).keys()].map((p) => ({
     id: uuidV4(),
-    x: getWorkspaceCenterX() - gap * (p + 1),
+    x: getWorkspaceCenterX() - gap * (p + 1.5),
     y: getWorkspaceHeight() * 0.48,
     label: p + 1
   })),
   ...[...Array(10).keys()].map((p) => ({
     id: uuidV4(),
-    x: getWorkspaceCenterX() + gap * (p + 1),
+    x: getWorkspaceCenterX() + gap * (p + 0.5),
     y: getWorkspaceHeight() * 0.48,
     label: p + 1
   })),
   ...[...Array(7).keys()].map((p) => ({
     id: uuidV4(),
-    x: getWorkspaceCenterX() - gap * (p + 1),
+    x: getWorkspaceCenterX() - gap * (p + 1.5),
     y: getWorkspaceHeight() * 0.58,
     label: p + 1
   })),
   ...[...Array(7).keys()].map((p) => ({
     id: uuidV4(),
-    x: getWorkspaceCenterX() + gap * (p + 1),
+    x: getWorkspaceCenterX() + gap * (p + 0.5),
     y: getWorkspaceHeight() * 0.58,
     label: p + 1
   })),
   ...[...Array(5).keys()].map((p) => ({
     id: uuidV4(),
-    x: getWorkspaceCenterX() - gap * (p + 1),
+    x: getWorkspaceCenterX() - gap * (p + 1.5),
     y: getWorkspaceHeight() * 0.68,
     label: p + 1
   })),
   ...[...Array(5).keys()].map((p) => ({
     id: uuidV4(),
-    x: getWorkspaceCenterX() + gap * (p + 1),
+    x: getWorkspaceCenterX() + gap * (p + 0.5),
     y: getWorkspaceHeight() * 0.68,
     label: p + 1
   }))

src/store/reducers/editor/shapes.ts

@@ -4,9 +4,9 @@ import { getWorkspaceCenterX, getWorkspaceHeight } from "@/utils";
 export default () => [
   {
     id: uuidV4(),
-    x: getWorkspaceCenterX() - 550,
+    x: getWorkspaceCenterX() - 600,
     y: getWorkspaceHeight() * 0.18,
-    width: 1100,
+    width: 1150,
     height: 100,
     rx: 10,
     name: "RectangleHorizontal"

src/store/reducers/editor/text.ts

@@ -4,7 +4,7 @@ import { getWorkspaceCenterX, getWorkspaceHeight } from "@/utils";
 export default () => [
   {
     id: uuidV4(),
-    x: getWorkspaceCenterX() - 58,
+    x: getWorkspaceCenterX() - 78,
     y: getWorkspaceHeight() * 0.27,
     label: "STAGE",
     fontSize: 35,

src/stories/external-shapes.mdx

@@ -0,0 +1,36 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="External Shapes" />
+
+<h1>External Shapes</h1>
+
+<h4>You can control the shapes available to you within the toolkit by passing in an array of shapes in options as follows:</h4>
+
+```tsx
+import { SeatToolkit } from "@mezh-hq/react-seat-toolkit";
+import { FireExtinguisher } from "lucide-react";
+
+return <SeatToolkit 
+  mode="designer"
+  options={{
+    shapes: {
+        icons: [
+            FireExtinguisher
+        ],
+        overrideDefaultIconset: false
+    }
+  }}
+/>
+```
+
+<h4>Here, we are passing in an array of shapes with a single shape, FireExtinguisher, which will be added to the default shapes available in the toolkit.</h4>
+
+<h4>If you need to completely override the default shapes available in the toolkit, you can set the overrideDefaultIconset property to true. This will remove all default shapes and keep only the shapes you pass </h4>
+
+<br/>
+
+---
+
+<br/>
+
+<h5> NOTE: The shapes you pass in should be React components that render an SVG and must contain a `displayName` property. If the `displayName` property is not present, the toolkit will not be able to render the shape. </h5>