[docbuilder] fix broken docbuilder stories (#231)

Co-authored-by: Rohan Bansal <[email protected]>

common/changes/@stonecrop/desktop/fix-docbuilder-issue-1_2025-01-02-09-06.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/desktop",
+      "comment": "fix broken docbuilder stories",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/desktop"
+}

common/reviews/api/desktop.api.md

@@ -11,12 +11,38 @@ import { Plugin as Plugin_2 } from 'vue';
 import Records from './components/Records.vue';
 import SheetNav from './components/SheetNav.vue';
 
+// @public
+export type ActionElements = ButtonElement | DropdownElement;
+
 export { ActionSet }
 
+// @public
+export type BaseElement = {
+    label: string;
+    show?: boolean;
+};
+
+// @public
+export type ButtonElement = BaseElement & ElementAction & {
+    type: 'button';
+};
+
 export { CommandPalette }
 
 export { Doctype }
 
+// @public
+export type DropdownElement = BaseElement & {
+    type: 'dropdown';
+    actions: ElementAction[];
+};
+
+// @public
+export type ElementAction = BaseElement & {
+    link?: string;
+    action?: () => void;
+};
+
 export { Records }
 
 export { SheetNav }

desktop/src/components/ActionSet.vue

@@ -39,8 +39,8 @@
 		</div>
 		<div style="margin-right: 30px"></div>
 		<div class="action-element" v-for="(el, index) in _elements" :key="el.label">
-			<button v-if="el.elementType == 'button'" :onclick="el.action" class="button-default">{{ el.label }}</button>
-			<div v-if="el.elementType == 'dropdown'">
+			<button v-if="el.type == 'button'" :onclick="el.action" class="button-default">{{ el.label }}</button>
+			<div v-if="el.type == 'dropdown'">
 				<button class="button-default" @click="toggleDropdown(index)">{{ el.label }}</button>
 				<div class="dropdown-container" v-show="el.show">
 					<div class="dropdown">
@@ -60,22 +60,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 
-type SetAction = {
-	label: string
-	link?: string
-	action?: () => void
-}
-
-type SetElement = {
-	elementType: string
-	label: string
-	link?: string
-	show?: boolean
-	action?: () => void
-	actions?: SetAction[]
-}
+import type { ActionElements } from '../types'
 
-const { elements } = defineProps<{ elements?: SetElement[] }>()
+const { elements } = defineProps<{ elements?: ActionElements[] }>()
 
 const _elements = ref(elements)
 const isOpen = ref(false)
@@ -89,7 +76,7 @@ onMounted(() => {
 
 const closeDropdowns = () => {
 	for (const element of _elements.value) {
-		if (element.elementType === 'dropdown') {
+		if (element.type === 'dropdown') {
 			element.show = false
 		}
 	}

desktop/src/index.ts

@@ -4,5 +4,6 @@ import Doctype from './components/Doctype.vue'
 import Records from './components/Records.vue'
 import SheetNav from './components/SheetNav.vue'
 import StonecropDesktop from './plugins'
+export type { ActionElements, BaseElement, ButtonElement, DropdownElement, ElementAction } from './types'
 
 export { ActionSet, CommandPalette, Doctype, Records, SheetNav, StonecropDesktop }

desktop/src/plugins/index.ts

@@ -7,8 +7,7 @@ import Records from '../components/Records.vue'
 import SheetNav from '../components/SheetNav.vue'
 
 /**
- * This is the main plugin file that will be used to register all the components
- * that we want to use in our application.
+ * This is the main plugin that will be used to register all the desktop components.
  * @public
  */
 const plugin: Plugin = {

desktop/src/types/index.ts

@@ -0,0 +1,41 @@
+/**
+ * Base type for elements in the Action Set
+ * @public
+ */
+export type BaseElement = {
+	label: string
+	show?: boolean
+}
+
+/**
+ * Element actions
+ * @public
+ */
+export type ElementAction = BaseElement & {
+	link?: string
+	action?: () => void
+}
+
+/**
+ * Button elements
+ * @public
+ */
+export type ButtonElement = BaseElement &
+	ElementAction & {
+		type: 'button'
+	}
+
+/**
+ * Dropdown elements
+ * @public
+ */
+export type DropdownElement = BaseElement & {
+	type: 'dropdown'
+	actions: ElementAction[]
+}
+
+/**
+ * Superset of all element types in the Action Set
+ * @public
+ */
+export type ActionElements = ButtonElement | DropdownElement

docs/desktop/desktop.actionelements.md

@@ -0,0 +1,15 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/desktop](./desktop.md) &gt; [ActionElements](./desktop.actionelements.md)
+
+## ActionElements type
+
+Superset of all element types in the Action Set
+
+**Signature:**
+
+```typescript
+export type ActionElements = ButtonElement | DropdownElement;
+```
+**References:** [ButtonElement](./desktop.buttonelement.md)<!-- -->, [DropdownElement](./desktop.dropdownelement.md)
+

docs/desktop/desktop.baseelement.md

@@ -0,0 +1,16 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/desktop](./desktop.md) &gt; [BaseElement](./desktop.baseelement.md)
+
+## BaseElement type
+
+Base type for elements in the Action Set
+
+**Signature:**
+
+```typescript
+export type BaseElement = {
+    label: string;
+    show?: boolean;
+};
+```

docs/desktop/desktop.buttonelement.md

@@ -0,0 +1,17 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/desktop](./desktop.md) &gt; [ButtonElement](./desktop.buttonelement.md)
+
+## ButtonElement type
+
+Button elements
+
+**Signature:**
+
+```typescript
+export type ButtonElement = BaseElement & ElementAction & {
+    type: 'button';
+};
+```
+**References:** [BaseElement](./desktop.baseelement.md)<!-- -->, [ElementAction](./desktop.elementaction.md)
+

docs/desktop/desktop.dropdownelement.md

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/desktop](./desktop.md) &gt; [DropdownElement](./desktop.dropdownelement.md)
+
+## DropdownElement type
+
+Dropdown elements
+
+**Signature:**
+
+```typescript
+export type DropdownElement = BaseElement & {
+    type: 'dropdown';
+    actions: ElementAction[];
+};
+```
+**References:** [BaseElement](./desktop.baseelement.md)<!-- -->, [ElementAction](./desktop.elementaction.md)
+

docs/desktop/desktop.elementaction.md

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/desktop](./desktop.md) &gt; [ElementAction](./desktop.elementaction.md)
+
+## ElementAction type
+
+Element actions
+
+**Signature:**
+
+```typescript
+export type ElementAction = BaseElement & {
+    link?: string;
+    action?: () => void;
+};
+```
+**References:** [BaseElement](./desktop.baseelement.md)
+

docs/desktop/desktop.md

@@ -24,7 +24,77 @@ Description
 
 </td><td>
 
-This is the main plugin file that will be used to register all the components that we want to use in our application.
+This is the main plugin that will be used to register all the desktop components.
+
+
+</td></tr>
+</tbody></table>
+
+## Type Aliases
+
+<table><thead><tr><th>
+
+Type Alias
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[ActionElements](./desktop.actionelements.md)
+
+
+</td><td>
+
+Superset of all element types in the Action Set
+
+
+</td></tr>
+<tr><td>
+
+[BaseElement](./desktop.baseelement.md)
+
+
+</td><td>
+
+Base type for elements in the Action Set
+
+
+</td></tr>
+<tr><td>
+
+[ButtonElement](./desktop.buttonelement.md)
+
+
+</td><td>
+
+Button elements
+
+
+</td></tr>
+<tr><td>
+
+[DropdownElement](./desktop.dropdownelement.md)
+
+
+</td><td>
+
+Dropdown elements
+
+
+</td></tr>
+<tr><td>
+
+[ElementAction](./desktop.elementaction.md)
+
+
+</td><td>
+
+Element actions
 
 
 </td></tr>

docs/desktop/desktop.stonecropdesktop.md

@@ -4,7 +4,7 @@
 
 ## StonecropDesktop variable
 
-This is the main plugin file that will be used to register all the components that we want to use in our application.
+This is the main plugin that will be used to register all the desktop components.
 
 **Signature:**
 

examples/desktop/App.vue

@@ -11,12 +11,12 @@
 <script setup lang="ts">
 const elements = [
 	{
-		elementType: 'button',
+		type: 'button',
 		label: 'Show Alert',
 		action: buttonClicked,
 	},
 	{
-		elementType: 'dropdown',
+		type: 'dropdown',
 		label: 'Action Menu',
 		actions: [
 			{
@@ -38,7 +38,7 @@ const elements = [
 		],
 	},
 	{
-		elementType: 'dropdown',
+		type: 'dropdown',
 		label: 'Link Menu',
 		actions: [
 			{

examples/docbuilder/assets/doctype_schema.json

@@ -23,14 +23,14 @@
 						"fieldtype": "Data",
 						"align": "left",
 						"edit": false,
-						"width": "35ch"
+						"width": "25ch"
 					},
 					{
 						"label": "Fieldtype",
 						"name": "fieldtype",
 						"fieldtype": "Select",
 						"align": "left",
-						"width": "20ch",
+						"width": "25ch",
 						"edit": true
 					},
 					{
@@ -47,15 +47,15 @@
 						"component": "<input type=\"radio\"/>",
 						"align": "left",
 						"edit": true,
-						"width": "5ch"
+						"width": "10ch"
 					},
 					{
 						"label": "Read Only",
 						"name": "read_only",
 						"component": "<input type=\"radio\"/>",
 						"align": "left",
 						"edit": true,
-						"width": "5ch"
+						"width": "10ch"
 					}
 				],
 				"config": { "view": "list", "fullWidth": true },
@@ -87,7 +87,7 @@
 						"fieldtype": "Data",
 						"align": "left",
 						"edit": true,
-						"width": "40ch",
+						"width": "50ch",
 						"cellComponent": "textarea",
 						"cellComponentProps": {
 							"rows": 8,