story2sketch

Story2Sketch?

แปลงเรื่องราวเรื่องราวเป็นสัญลักษณ์ร่าง

ใช้ html-sketchapp ที่น่าทึ่ง รองรับเว็บเท่านั้น

เร็ว

ประการแรกรับร่างและ NPM จากนั้นติดตั้ง asketch2sketch.sketchplugin ลงในร่าง:

ติดตั้ง story2sketch :

npm i story2sketch -g

เรียกใช้ story2sketch ชี้ไปที่หนังสือนิทาน iframe url คุณสามารถค้นหา url iframe ที่มีอยู่ในนิทานได้โดยคลิก 'เปิดผืนผ้าใบในแท็บใหม่':

ดูการกำหนดค่าสำหรับตัวเลือกเพิ่มเติมหรือหากคุณมีเรื่องราวมากมาย

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

นำเข้าไฟล์ที่สร้างลงในร่างผ่าน Plugins > From *Almost* Sketch to Sketch ในแถบเมนูร่าง

ความสำเร็จ!

หนังสือนิทาน 3.x

หากคุณใช้ Storybook 3.3 หรือสูงกว่า (แต่ไม่ใช่ Storybook 4 หรือสูงกว่า) คุณจะต้องควบคุม 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 ;
} ;

ส่งออกฟังก์ชั่น getStorybook ด้วยตนเองในไฟล์ ./config/storybook/config.js ของคุณ:

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

...

export { getStorybook }

เรียกใช้ Story2Sketch:

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

ทำไม

ตามที่ระบุไว้โดย react-sketchapp มันซับซ้อนในการจัดการสินทรัพย์ในระบบการออกแบบ หลายทีมสร้างระบบการออกแบบหรือไลบรารีส่วนประกอบได้สร้างไฟล์ร่างเพื่อแจกจ่ายการออกแบบและใช้นิทานเพื่อต้นแบบและนำเสนอส่วนประกอบที่พัฒนาแล้ว มันอาจกลายเป็นเรื่องยากที่จะปรับปรุงการออกแบบให้ทันสมัยด้วยส่วนประกอบล่าสุดโดยนักออกแบบเคยเล่น catchup story2sketch สร้างไฟล์ร่างจากส่วนประกอบของคุณผ่านนิทานดังนั้นการออกแบบร่างของคุณจะอยู่เสมอ

การกำหนดค่า

คุณสามารถกำหนดค่า story2sketch โดยใช้ API ผ่าน CLI กำหนดค่า package.json ของคุณหรือเพิ่มไฟล์ story2sketch.config.js

CLI

เพียงแค่เรียก story2sketch พร้อมตัวเลือกจาก API

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

package.json

เพิ่มสิ่งต่อไปนี้ใน package.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

พารามิเตอร์	คำอธิบาย	ประเภทอินพุต	ค่าเริ่มต้น
เอาท์พุท	ระบุชื่อไฟล์สำหรับไฟล์ asketch.json ที่สร้างขึ้นหรือโฟลเดอร์เมื่อ outputby === 'ชนิด'	สาย	"dist/stories.asketch.json"
ป้อนข้อมูล	ที่ตั้งของหนังสือนิทานที่สร้างขึ้น iframe.html ใช้สิ่งนี้ผ่าน url ถ้าเป็นไปได้สำหรับประสิทธิภาพ	สาย	"dist/iframe.html"
url	หนังสือนิทาน iframe url จะสิ้นสุดใน iframe.html ชอบ input สำหรับประสิทธิภาพถ้าเป็นไปได้	สาย	"http://localhost:9001/iframe.html"
เรื่องราว	เรื่องราวที่จะสกัดจากหนังสือนิทาน คุณควรแทนที่ค่าเริ่มต้น	วัตถุ/สตริง	"all"
การพร้อมกัน	จำนวนแท็บโครเมี่ยมหัวหัวที่จะทำงานแบบขนาน ค่าเริ่มต้นถึงจำนวนเธรดที่มีอยู่ในเครื่องของคุณ	จำนวนเต็ม	พลวัต
สัญลักษณ์	รางน้ำที่จะวางระหว่างสัญลักษณ์ในร่าง	จำนวนเต็ม	100
ผู้ชม	การกำหนดค่าวิวพอร์ต จะถูกจัดเรียงจากซ้ายไปขวาโดยความกว้าง พยายามหลีกเลี่ยงการเปลี่ยนคีย์เนื่องจากใช้เพื่อระบุสัญลักษณ์	วัตถุ	Mobile Viewport (กว้าง 320px) และ Desktop Viewport (กว้าง 1920px) ดูตัวอย่างด้านล่าง
QuerySelector	ตัวเลือกแบบสอบถามเพื่อเลือกโหนดของคุณในแต่ละหน้า ใช้ document.querySelectorAll	สาย	"#root"
verbose	เอาต์พุตการบันทึก verbose	บูลีน	false
fixpseudo	พยายามแทรกองค์ประกอบที่แท้จริงแทนองค์ประกอบหลอก	บูลีน	false
PuppeteerOptions	ตัวเลือกที่จะส่งโดยตรงไปยัง puppeteer.launch ดูเอกสาร Puppeteer สำหรับการใช้งาน	วัตถุ	{}
removePreviewMargin	ลบอัตรากำไรขั้นต้นจากร่างกาย iframe	บูลีน	true
เค้าโครง	สัญลักษณ์กลุ่มในเอาท์พุทร่างโดยปุ่ม "ชนิด" หรือ "กลุ่ม"	"ใจดี" | "กลุ่ม"	โมฆะ
outputby	เขียนหลายไฟล์ร่างโดย "kind" หรือปุ่ม "กลุ่ม"	"ใจดี" | "กลุ่ม"	โมฆะ

ตัวอย่างการกำหนดค่า

ขั้นพื้นฐาน

ตรวจจับเรื่องราวโดยอัตโนมัติส่งภาพวิวพอร์ตสองเรื่องสำหรับแต่ละเรื่องในไฟล์ร่างเดียวเป็นสัญลักษณ์

 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"
        }
      ]
    }
  ]
} ;

Viewports ที่กำหนดเอง

สัญลักษณ์เอาท์พุทตามมุมมองที่กำหนดเอง:

 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 และ 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 คุณอาจต้องเพิ่มการกำหนดค่าต่อไปนี้ให้กับ Puppeteer ใน story2sketch.config.js ของคุณ

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

คำถาม

ทำไมสิ่งของของฉันถึงดูไม่ดี?

หากสิ่งของของคุณดูไม่ดีไม่ว่าจะเป็น html-sketchapp แต่ยังไม่รองรับ (ดูการสนับสนุนที่นี่) หรือคุณจำเป็นต้องกำหนดค่า Story2Sketch

ทำไมคุณไม่ใช้ react-sketchapp แทน html-sketchapp ?

react-sketchapp สนับสนุน React Native เท่านั้นหรือบังคับให้คุณใช้การประชุมการตั้งชื่อองค์ประกอบของ React Native html-sketchapp รองรับ HTML ที่ดีและไม่สนใจว่าคุณใช้เฟรมเวิร์กเว็บอะไร

ฉันสามารถใช้สิ่งนี้กับสิ่งอื่นที่ไม่ใช่นิทานได้หรือไม่?

ยังไม่ได้ แต่เรามีแผนที่จะเพิ่มการสนับสนุนสำหรับอะแดปเตอร์หลายตัวและแบบกำหนดเอง