Storybook 的视口插件不显示自定义视口大小（svelte-kit）

Posted 2023-02-19

【中文标题】Storybook 的视口插件不显示自定义视口大小（svelte-kit）

【英文标题】：Storybook's viewport-addon not showing custom viewport sizes (svelte-kit)

【发布时间】：2021-11-02 01:20:27

【问题描述】：

我无法让 Storybook 显示我的一组视口，而是显示 MINIMAL_VIEWPORTS

// .storybook/preview.js
import  INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS  from '@storybook/addon-viewport';

const customViewport = 
    iphone12promax: INITIAL_VIEWPORTS.iphone12promax,
    ipad: INITIAL_VIEWPORTS.ipad,
    desktop: MINIMAL_VIEWPORTS.desktop
;

export const parameters = 
    actions:  argTypesRegex: '^on[A-Z].*' ,
    viewport: 
        viewports:  ...customViewport 
    ,
    controls: 
        matchers: 
            color: /(background|color)$/i,
            date: /Date$/
        
    
;

// .storybook/main.js
module.exports = 
    core: 
        builder: 'storybook-builder-vite'
    ,
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-svelte-csf',
        '@storybook/addon-a11y',
        '@storybook/addon-viewport'
    ],
    svelteOptions: 
        preprocess: import('../svelte.config.js').preprocess
    
;

// .storybook/package.json

    "type": "commonjs"

// package.json -- project level

    "name": "app",
    "version": "0.0.1",
    "scripts": 
        "dev": "svelte-kit dev",
        "build": "svelte-kit build",
        "preview": "svelte-kit preview",
        "check": "svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --ignore-path .gitignore  --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
        "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
        "storybook": "start-storybook -p 6006 --no-manager-cache",
        "build-storybook": "build-storybook"
    ,
    "devDependencies": 
        "@babel/core": "^7.15.4",
        "@poppanator/sveltekit-svg": "^0.1.4",
        "@storybook/addon-a11y": "^6.3.7",
        "@storybook/addon-actions": "^6.3.7",
        "@storybook/addon-essentials": "^6.3.7",
        "@storybook/addon-links": "^6.3.7",
        "@storybook/addon-svelte-csf": "^1.1.0",
        "@storybook/svelte": "^6.3.7",
        "@sveltejs/kit": "next",
        "@typescript-eslint/eslint-plugin": "^4.19.0",
        "@typescript-eslint/parser": "^4.19.0",
        "autoprefixer": "^10.3.1",
        "babel-loader": "^8.2.2",
        "cssnano": "^5.0.6",
        "eslint": "^7.22.0",
        "eslint-config-prettier": "^8.1.0",
        "eslint-plugin-svelte3": "^3.2.0",
        "postcss": "^8.3.5",
        "postcss-load-config": "^3.1.0",
        "prettier": "~2.2.1",
        "prettier-plugin-svelte": "^2.2.0",
        "storybook-builder-vite": "^0.0.12",
        "svelte": "^3.42.4",
        "svelte-check": "^2.0.0",
        "svelte-loader": "^3.1.2",
        "svelte-preprocess": "^4.7.4",
        "tailwindcss": "^2.2.4",
        "tslib": "^2.0.0",
        "typescript": "^4.0.0"
    ,
    "type": "module",
    "dependencies": 
        "dexie": "^3.0.3"
    

Storybook 实际视口列表：

【参考方案1】：

能否请您列出您正在使用的版本。在Github on this 上报告了一个错误... "...调用故事书根路径切换到配置的默认路径（'iphone6'），但在特定组件上重新加载（或输入特定组件的 URL）默认为 '响应'...。 "

另外，从上面的代码中我可以看到您缺少default viewPort。

请尝试配置默认视口，然后，例如来自故事书参考。

---

// MyComponent.stories.js | MyComponent.stories.ts | MyComponent.stories.jsx | MyComponent.stories.tsx

import React from 'react';

import  INITIAL_VIEWPORTS  from '@storybook/addon-viewport';

export default 
  title: 'Stories',
  parameters: 
    //? The viewports object from the Essentials addon
    viewport: 
      //? The viewports you want to use
      viewports: INITIAL_VIEWPORTS,
      //? ***** Please configure your own Default Viewport
      defaultViewport: 'iphone6'
    ,
  ,
;

export const MyStory = () => <div />;
MyStory.parameters = 
  viewport: 
    defaultViewport: 'iphonex'
  ,
;