Slice-machine-ui 0.1.0-beta.1 doesn't generate stories properly

Developing with Prismic
1

Hello, beautiful people,

I have problem that my model contains two variations. Default and withColumns, but inside .slicemachine index.stories.js i see that only one variation is generated and this doesn't show up in SB.

My slice model looks like this,
model.json

{
  "id": "feature_block_lg",
  "type": "SharedSlice",
  "name": "FeatureBlockLg",
  "fieldset": "Features Block LG",
  "description": "Columns with Small image above, title and description below",
  "display": "list",
  "variations": [
    {
      "id": "default-slice",
      "name": "Default slice",
      "docURL": "...",
      "version": "sktwi1xtmkfgx8626",
      "description": "FeatureBlockLg",
      "primary": {
        "colorVariation": {
          "config": {
            "label": "Color Variation",
            "placeholder": "Light",
            "options": [
              "Light",
              "Grey"
            ],
            "default_value": "Light"
          },
          "type": "Select"
        },
        "title": {
          "type": "Text",
          "config": {
            "label": "Title",
            "id": "title",
            "placeholder": ""
          }
        },
        "disclaimer": {
          "config": {
            "label": "Disclaimer",
            "placeholder": ""
          },
          "type": "Text"
        }
      },
      "items": {
        "Image": {
          "config": {
            "label": "Image",
            "constraint": {
              "width": 64,
              "height": 64
            },
            "thumbnails": []
          },
          "type": "Image"
        },
        "Title": {
          "type": "Text",
          "config": {
            "label": "Title",
            "id": "Title",
            "placeholder": ""
          }
        },
        "Description": {
          "config": {
            "label": "Description",
            "placeholder": "",
            "allowTargetBlank": true,
            "multi": "paragraph, preformatted, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item",
            "labels": [
              "lg-paragraph",
              "sm-paragraph",
              "xs-paragraph",
              "superscript",
              "subscript",
              "centered-text"
            ]
          },
          "type": "StructuredText"
        }
      }
    },
    {
      "id": "withCustomGrid",
      "name": " With Custom Grid",
      "docURL": "...",
      "version": "sktwi1xtmkfgx8626",
      "description": "FeatureBlockLg",
      "primary": {
        "columns": {
          "config": {
            "label": "Columns",
            "placeholder": ""
          },
          "type": "Number"
        },
        "colorVariation": {
          "config": {
            "label": "Color Variation",
            "placeholder": "Light",
            "default_value": "Light",
            "options": [
              "Light",
              "Grey"
            ]
          },
          "type": "Select"
        },
        "title": {
          "type": "Text",
          "config": {
            "label": "Title",
            "id": "title",
            "placeholder": ""
          }
        },
        "disclaimer": {
          "config": {
            "label": "Disclaimer",
            "placeholder": ""
          },
          "type": "Text"
        }
      },
      "items": {
        "Image": {
          "config": {
            "label": "Image",
            "constraint": {
              "width": 64,
              "height": 64
            },
            "thumbnails": []
          },
          "type": "Image"
        },
        "Title": {
          "type": "Text",
          "config": {
            "label": "Title",
            "id": "Title",
            "placeholder": ""
          }
        },
        "Description": {
          "config": {
            "label": "Description",
            "placeholder": "",
            "allowTargetBlank": true,
            "multi": "paragraph, preformatted, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item",
            "labels": [
              "lg-paragraph",
              "sm-paragraph",
              "xs-paragraph",
              "superscript",
              "subscript",
              "centered-text"
            ]
          },
          "type": "StructuredText"
        }
      }
    }
  ]
}

inside .slicemachine folder my slice story is generated like this
index.stories.js

import MyComponent from '../../../../../../packages/@smLib/slices/FeatureBlockLg'

export default {
  title: 'packages/@smLib/slices/FeatureBlockLg'
}

export const _DefaultSlice = () => (
  <MyComponent
    slice={{
      id: '_DefaultSlice',
      name: 'Default slice',
      docURL: '...',
      version: 'sktwi1xtmkfgx8626',
      description: 'FeatureBlockLg',
      primary: {
        colorVariation: 'Grey',
        title: 'syndicate enterprise eyeballs',
        disclaimer: 'drive world-class interfaces'
      },
      items: [
        {
          Image: {
            dimensions: { width: 64, height: 64 },
            alt: 'Placeholder image',
            copyright: null,
            url:
              'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=64&h=64&fit=crop'
          },
          Title: 'facilitate ubiquitous bandwidth',
          Description: [
            {
              type: 'paragraph',
              text: 'Esse duis cupidatat sit esse ipsum magna qui.',
              spans: []
            }
          ]
        },
        {
          Image: {
            dimensions: { width: 64, height: 64 },
            alt: 'Placeholder image',
            copyright: null,
            url:
              'https://images.unsplash.com/photo-1607582278043-57198ac8da43?w=64&h=64&fit=crop'
          },
          Title: 'reinvent real-time architectures',
          Description: [
            {
              type: 'paragraph',
              text:
                'Occaecat non veniam qui consectetur magna ad commodo nulla incididunt voluptate aliquip in voluptate nisi consectetur.',
              spans: []
            }
          ]
        },
        {
          Image: {
            dimensions: { width: 64, height: 64 },
            alt: 'Placeholder image',
            copyright: null,
            url:
              'https://images.unsplash.com/photo-1607582278038-6bebbd4d7b72?w=64&h=64&fit=crop'
          },
          Title: 'unleash turn-key web services',
          Description: [
            {
              type: 'paragraph',
              text:
                'In esse adipisicing anim duis do minim cupidatat veniam tempor ut sunt.',
              spans: []
            }
          ]
        }
      ],
      slice_type: 'feature_block_lg'
    }}
  />
)
_DefaultSlice.storyName = 'Default slice'

After updating model i get this message in terminal

[slice-machine]
[slice/push]: purging images folder

[slice-machine] [slice/push]: uploading variation preview

[slice-machine] --- Unable to find a screenshot for slice FeatureBlockLg | variation withCustomGrid

[slice-machine] [slice/push]: pushing slice model to Prismic

[slice-machine] [slice/push] done!

just for reference
sm.json

{
  "libraries": [
    "@/packages/@smLib/slices"
  ],
  "apiEndpoint": "https://oxylabs-sm.cdn.prismic.io/api/v2",
  "storybook": "http://localhost:8888",
  "_latest": "0.1.0"
}

storybook .main

module.exports = {
  stories: [...getStoriesPaths()],
  ...
}
3

Hey Arnas,

This is a strange bug, I can't seem to recreate it. Although your .storybook/main.js file should look like this:

const { getStoriesPaths } = require('slice-machine-ui/helpers/storybook')
module.exports = {
  stories: [...getStoriesPaths(), "../styles/globals.css"]
}
4

Hello, Phil,

I will try reproduce this bug on new repository and if I succeeded I will share repo.

My .storybook/main.js looks like this

const path = require('path');
const { getStoriesPaths } = require('slice-machine-ui/helpers/storybook')

module.exports = {
  stories: [...getStoriesPaths()],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  typescript: {
    reactDocgen: "react-docgen",
  },
  webpackFinal: async (config, { configType }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@components': path.resolve(__dirname, '../packages/@components/src'),
      '@typings': path.resolve(__dirname, '../packages/@types/src'),
      '@slices': path.resolve(__dirname, '../packages/@slices/src'),
      'components': path.resolve(__dirname, '../src/components'),
      'utils': path.resolve(__dirname, '../src/utils'),
      'globalUtils': path.resolve(__dirname, '../src/globalUtils'),
      'prismic': path.resolve(__dirname, '../prismic')
    }

    const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'));
    fileLoaderRule.exclude = /\.svg$/;

    config.module.rules.push({
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      issuer: {
        test: /\.(js|ts)x?$/
      },
      use: ['file-loader']
    })

    config.module.rules.unshift({
      test: /\.svg$/,
      enforce: 'pre',
      loader: require.resolve('@svgr/webpack')
    })

    return config;
  },
}
5

OK, great thanks.

If you can recreate it I'll get the Slice Machine devs involved, but in the future for bugs like this it's best to bring them up on the Slice Machine Github as the team as quite reactive there and you will reach their eyes quicker.

8

This thread has been closed due to inactivity. Flag to reopen.