story2sketch

Story2Sketch؟

تحويل قصص القصص إلى رموز رسم.

يستخدم html-sketchapp مذهلة. يدعم الويب فقط.

Quickstart

أولا ، الحصول على رسم و NPM. ثم قم بتثبيت asketch2sketch.sketchplugin في Sketch:

تثبيت story2sketch :

npm i story2sketch -g

قم بتشغيل story2sketch ، مشيرًا إلى عنوان URL لإطارات Iframe. يمكنك العثور على عنوان URL IFRAME موجود في Storybook من خلال النقر فوق "فتح قماش في علامة تبويب جديدة":

انظر التكوين لمزيد من الخيارات ، أو إذا كان لديك الكثير من القصص.

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

استيراد الملف الذي تم إنشاؤه إلى Sketch عبر Plugins > From *Almost* Sketch to Sketch في شريط قائمة 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 ;
} ;

قم بتصدير وظيفة 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 ، من المعقد إدارة الأصول في نظام التصميم. العديد من الفرق تقوم ببناء أنظمة تصميم أو مكتبات مكونات تنتج بالفعل ملفات رسم لتوزيع التصميمات واستخدام القصص القصيرة للنموذج الأولي وتقديم المكونات المتقدمة. قد يصبح من الصعب الحفاظ على تصميمات محدثة مع أحدث المكونات ، حيث يلعب المصممون اللحاق بالركب. تقوم story2sketch بإنشاء ملف رسم من مكوناتك عبر Storybook ، لذلك تظل تصاميم الرسم الخاصة بك دائمًا محدثة.

إعدادات

يمكنك تكوين story2sketch باستخدام API عبر CLI ، أو تكوين package.json أو إضافة ملف story2sketch.config.js .

CLI

ما عليك سوى استدعاء 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

المعلمة	توضيح	نوع الإدخال	تقصير
الإخراج	يحدد اسم الملف لملف Asketch.json الذي تم إنشاؤه أو المجلد عند OutputBy === 'Kind'.	خيط	"dist/stories.asketch.json"
مدخل	موقع القصة التي تم إنشاؤها iframe.html. استخدم هذا عبر url إذا كان ذلك ممكنًا للأداء.	خيط	"dist/iframe.html"
عنوان URL	قصص IFRAME URL. سينتهي في iframe.html . تفضل input الأداء إن أمكن.	خيط	"http://localhost:9001/iframe.html"
قصص	قصص لاستخراج من القصص القصيرة. ربما يجب عليك تجاوز الافتراضي.	كائن/سلسلة	"all"
التزامن	عدد علامات تبويب الكروم مقطوعة الرأس لتشغيلها بالتوازي. الإعدادات الافتراضية لعدد المواضيع المتوفرة على جهازك.	عدد صحيح	متحرك
الرمز	الحضيض لوضع بين الرموز في رسم.	عدد صحيح	100
عرض المناطق	عرض تكوين المنفذ. سيتم ترتيبها من اليسار إلى اليمين حسب العرض. حاول تجنب تغيير المفتاح ، حيث يتم استخدام هذا لتحديد الرمز.	هدف	إطار عرض الهاتف المحمول (عرض 320 بكسل) وملف عرض سطح المكتب (1920 بكسل). انظر المثال أدناه.
QuerySelector	استعلام محدد لتحديد العقدة الخاصة بك في كل صفحة. يستخدم document.querySelectorAll .	خيط	"#root"
مطول	إخراج قطع التسجيل.	منطقية	false
Fixpseudo	محاولة إدراج عناصر حقيقية بدلاً من العناصر الزائفة	منطقية	false
puppeteeroptions	خيارات يتم نقلها مباشرة إلى puppeteer.launch . انظر Docs Puppeteer للاستخدام.	هدف	{}
removePreviewMargin	إزالة هامش المعاينة من الجسم iframe.	منطقية	true
Layoutby	رموز المجموعة في إخراج الرسم بواسطة مفتاح "النوع" أو "المجموعة"	"نوع" | "مجموعة"	باطل
الإخراج	اكتب ملفات رسم متعددة بواسطة "Kind" أو مفتاح "Group"	"نوع" | "مجموعة"	باطل

مثال تكوينات

أساسي

اكتشف القصص تلقائيًا ، وإخراج اثنين من المنافذ لكل قصة في ملف رسم واحد كرموز.

 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 و 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 ، أو يجبرك على استخدام اتفاقيات Navoning Component React. يدعم html-sketchapp HTML جيدًا ، ولا يهتم بالإطار الذي تستخدمه.

هل يمكنني استخدام هذا على أي شيء آخر غير القصص؟

ليس بعد ، ولكن لدينا خطط لإضافة دعم للمحولات المتعددة والمخصصة.