首页>编程相关>三方组件
下载

Story2sketch？

将故事书的故事转换为草图符号。

使用惊人的html-sketchapp 。仅支持Web。

Quickstart

首先，获取草图和NPM。然后将asketch2sketch.sketchplugin安装到草图中：

安装story2sketch ： 

npm i story2sketch -g

运行story2sketch ，指向故事书iframe url。您可以通过单击“新标签中的打开画布”中的故事书中的现有iframe URL：

有关更多选项，或者您有很多故事，请参见配置。 

story2sketch --url https://localhost:9001/iframe.html --output stories.asketch.json

通过Plugins > From *Almost* Sketch to Sketch 。

成功！

故事书3.x

如果您正在使用Storybook 3.3或更高版本（但不使用Storybook 4或以上），则需要完全控制您的Storybook WebPack.config.js，如果您还没有这样做，请补充： 

 module . exports = ( storybookBaseConfig , configType ) => {
  const newConfig = {
    ... storybookBaseConfig
  } ;

  // Add this:
  // Export bundles as libraries so we can access them on page scope.
  newConfig . output . library = "[name]" ;

  return newConfig ;
} ;

手动在./config/storybook/config.js文件中手动导出getStorybook函数： 

 import { getStorybook } from "@storybook/react" ;

...

export { getStorybook }

Run Story2sketch： 

story2sketch --url https://localhost:9001/iframe.html --output stories.asketch.json

为什么？

正如react-sketchapp所述，管理设计系统中的资产很复杂。许多团队构建设计系统或组件库已经生成用于分发设计的草图文件，并使用故事书来原型并呈现开发的组件。与最新组件保持最新设计可能会变得困难，而设计师曾经玩过。 story2sketch通过Storybook从您的组件中生成草图文件，因此您的草图设计始终保持最新状态。

配置

您可以通过CLI使用API配置story2sketch ，配置package.json或添加story2sketch.config.js文件。

CLI

只需将API选项调用story2sketch即可。 

$ story2sketch --stories all --output dist/great-ui.asketch.json

package.json

将以下内容添加到您的软件包。JSON： 

{
  "story2sketch" : {
    "stories" : " all " ,
    "output" : " dist/great-ui.asketch.json "
  }
}

story2sketch.config.js

在项目的根部创建一个名为story2sketch.config.js的文件： 

 module . exports = {
  output : "dist/great-ui.asketch.json" ,
  stories : "all"
} ;

API

范围解释输入类型默认
输出在输出==='KIND'时指定生成的Asketch.json文件或文件夹的文件名。细绳"dist/stories.asketch.json"
输入故事书生成的iframe.html的位置。如果可能的话，请在url上使用它。细绳"dist/iframe.html"
URL故事书iframe URL。将以iframe.html结尾。如果可能的话，更喜欢input 。细绳"http://localhost:9001/iframe.html"
故事从故事书中提取的故事。您可能应该覆盖默认值。对象/字符串"all"
并发无头的镀铬选项卡数量并联运行。默认为计算机上可用的线程数。整数动态的
符号炉排水沟放在素描中的符号之间。整数100
视口视口配置。将通过宽度从左到右安排。尽量避免更改键，因为这用于识别符号。目的移动视口（320px宽）和桌面视口（1920px宽）。请参阅下面的示例。
QuerySelector查询选择器在每个页面上选择您的节点。使用document.querySelectorAll 。细绳"#root"
冗长冗长的记录输出。布尔false
fixpseudo尝试插入真实元素代替伪元素布尔false
PuppeteRoptions可以直接传递给puppeteer.launch选项。请参阅uppeteer文档以获取用法。目的{}
REMOVE PREVIEWMARGIN从iframe主体中删除预览保证金。布尔true
布局草图输出中的组符号由“类型”或“组”键“亲戚” | “团体”无效的
输出通过“ ank”或“组”密钥编写多个草图文件“亲戚” | “团体”无效的

示例配置

基本的

自动检测故事，在单个草图文件中以符号为每个故事输出两个视口。 

 module . exports = {
  output : "dist/great-ui.asketch.json" ,
  input : "dist/iframe.html" , // Same as default
  pageTitle : "great-ui"
} ;

手动故事

手动定义故事，以控制哪些故事的输出。如果您获得空输出，这可能会有所帮助，因为有些故事可能会破坏Story2sketch。 

 module . exports = {
  stories : [
    {
      kind : "Buttons/Button" ,
      stories : [
        {
          name : "Button"
        }
      ]
    } ,
    {
      kind : "Buttons/ButtonGroup" ,
      stories : [
        {
          name : "Default" ,
          displayName : "Horizontal"
        } ,
        {
          name : "Vertical"
        }
      ]
    } ,
    {
      kind : "Table" ,
      stories : [
        {
          name : "Table"
        }
      ]
    }
  ]
} ;

自定义视口

基于自定义视口的输出符号： 

 module . exports = {
  viewports : {
    narrow : {
      width : 320 ,
      height : 1200 ,
      symbolPrefix : "Mobile/"
    } ,
    standard : {
      width : 1920 ,
      height : 1200 ,
      symbolPrefix : "Desktop/"
    }
  }
} ;

根据类型将输出分为多个文件

为每个故事书输出一个文件“类型”。如果管理大型组件库，则可以分发较小的文件。 

 module . exports = {
  output : "dist" , // Define output directory. File names are defined by "kind"
  outputBy : "kind" // Also supports "group", see below.
} ;

基于种类的布局

通过形式渲染草图布局，但将它们保留在一个文件中。 

 module . exports = {
  layoutBy : "kind" // Also supports "group", see below.
} ;

根据自定义组将输出分为多个文件

此示例根据自定义分组输出两个文件： dist/Buttons.asketch.json and dist/Data.asketch.json 。 

 module . exports = {
  output : "dist" ,
  outputBy : "group" ,
  stories : [
    {
      group : "Buttons" ,
      kind : "Buttons/Button" ,
      stories : [
        {
          name : "Button"
        }
      ]
    } ,
    {
      group : "Buttons" ,
      kind : "Buttons/ButtonGroup" ,
      stories : [
        {
          name : "Default" ,
          displayName : "Horizontal"
        } ,
        {
          name : "Vertical"
        }
      ]
    } ,
    {
      group : "Data" ,
      kind : "Table" ,
      stories : [
        {
          name : "Table"
        }
      ]
    }
  ]
} ;

连续整合

如果您希望story2sketch在CI环境中运行，则可能必须将以下配置添加到story2sketch.config.js中的Puppeteer中。 

 module . exports = {
  puppeteerOptions : {
    args : [ '--no-sandbox' , '--disable-setuid-sandbox' ]
  } ,
  ...
} ;

问题

为什么我的东西看起来很糟糕？

如果您的东西看起来很糟糕，则尚未得到html-sketchapp的支持（请参阅此处的支持），或者您需要配置Story2sketch。

您为什么不使用react-sketchapp代替html-sketchapp ？

react-sketchapp仅支持React Antial，或者迫使您使用React Native组件命名约定。 html-sketchapp支持良好的时装html，并且不在乎您使用的是哪种网络框架。

我可以在故事书以外的任何东西上使用它吗？

还没有，但是我们计划增加对多个和自定义适配器的支持。

展开
附加信息
相关应用
为您推荐
相关资讯 全部