fix(#419): Fix errors in storybook (#421)

* fix(#419): update entity storybook template * fix(#419): prevent storybook errors * chore(#419): add changeset * chore(#419): updated options controls
druxt · Jan 14, 2022 · d7e92b2 · d7e92b2
1 parent 933e02f
commit d7e92b2
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 11 deletions.
diff --git a/.changeset/slow-keys-provide.md b/.changeset/slow-keys-provide.md
@@ -0,0 +1,8 @@
+---
+"druxt-blocks": patch
+"druxt": patch
+"druxt-entity": patch
+"druxt-views": patch
+---
+
+Fixed errors in storybook
diff --git a/packages/blocks/src/components/DruxtBlock.vue b/packages/blocks/src/components/DruxtBlock.vue
@@ -91,6 +91,8 @@ export default {
      * @returns {ComponentOptions}
      */
     componentOptions: ({ block }) => {
+      if (!block) return []
+
       // Get Plugin and Plugin ID data.
       let plugin = block.attributes.plugin || ''
       let pluginId = null

diff --git a/packages/druxt/src/components/DruxtModule.vue b/packages/druxt/src/components/DruxtModule.vue
@@ -225,7 +225,7 @@ export default {
       let components = []
       for (const set of options.filter(set => Array.isArray(set))) {
         const variants = []
-        components = [...components, ...set.map(item => {
+        components = [...components, ...set.filter((o) => o).map(item => {
           // Build array of name parts.
           const parts = variants.length ? [...variants[0].parts] : []
           parts.push(pascalCase(splitByCase(item)))

diff --git a/packages/entity/src/components/DruxtEntity.vue b/packages/entity/src/components/DruxtEntity.vue
@@ -257,7 +257,7 @@ export default {
 
       // DruxtEntity[EntityType][ViewMode][SchemaType]
       [
-        ((schema || {}).resourceType || type).split('--').shift(),
+        (((schema || {}).resourceType || type) || '').split('--').shift(),
         ((schema || {}).config || {}).mode || mode,
         ((schema || {}).config || {}).schemaType || schemaType || 'view'
       ],

diff --git a/packages/entity/templates/druxt-entity-form.stories.js b/packages/entity/templates/druxt-entity-form.stories.js
@@ -17,22 +17,22 @@ export default {
       action: 'reset',
     },
     mode: {
+      options: [<%= (options.displays || []).map((s) => `'${s}'`).join(', ') %>],
       control: {
         type: 'select',
-        options: [<%= (options.displays || []).map((s) => `'${s}'`).join(', ') %>],
       },
     },
     schemaType: {
+      options: ['view', 'form'],
       control: {
         type: 'select',
-        options: ['view', 'form'],
       },
     },
     type: {},
     uuid: {
+      options: [<%= (options.entities || []).map((o) => `'${o.id}'`).join(', ') %>],
       control: {
         type: 'select',
-        options: [<%= (options.entities || []).map((o) => `'${o.id}'`).join(', ') %>],
       },
     },
     value: {

diff --git a/packages/entity/templates/druxt-entity.stories.js b/packages/entity/templates/druxt-entity.stories.js
@@ -8,22 +8,27 @@ export default {
       action: 'input',
     },
     mode: {
+      options: [<%= (options.displays || []).map((s) => `'${s}'`).join(', ') %>],
       control: {
         type: 'select',
-        options: [<%= (options.displays || []).map((s) => `'${s}'`).join(', ') %>],
+      },
+    },
+    settings: {
+      control: {
+        type: 'object',
       },
     },
     schemaType: {
+      options: ['view', 'form'],
       control: {
         type: 'select',
-        options: ['view', 'form'],
       },
     },
     type: {},
     uuid: {
+      options: [<%= (options.entities || []).map((o) => `'${o.id}'`).join(', ') %>],
       control: {
         type: 'select',
-        options: [<%= (options.entities || []).map((o) => `'${o.id}'`).join(', ') %>],
       },
     },
     value: {
@@ -44,9 +49,9 @@ export default {
   },
 }
 
-const Template = (args, { argTypes }) => {
+const Template = (args) => {
   return {
-    props: Object.keys(argTypes),
+    props: Object.keys(args),
     template: '<DruxtEntity v-bind="$props" v-on="$props" />',
   }
 }

diff --git a/packages/views/templates/druxt-views.stories.js b/packages/views/templates/druxt-views.stories.js
@@ -5,9 +5,9 @@ export default {
   component: DruxtView,
   argTypes: {
     displayId: {
+      options: [<%= options.displays.map(({ id }) => `'${id}'`).join(', ') %>],
       control: {
         type: 'select',
-        options: [<%= options.displays.map(({ id }) => `'${id}'`).join(', ') %>]
       },
     },
   },