story2sketch

Story2sketch?

Преобразовать рассказы Сказку в символы эскиза.

Использует удивительный html-sketchapp . Только поддерживает веб -сайт.

QuickStart

Во -первых, получите эскиз и NPM. Затем установите asketch2sketch.sketchplugin в эскиз:

Установить story2sketch :

npm i story2sketch -g

Запустите story2sketch , указывая на URL -образный сборник рассказов. Вы можете найти существующий URL Iframe в сборнике рассказов, нажав «Открыть Canvas in New Tab»:

См. Конфигурацию для получения дополнительных вариантов или, если у вас много историй.

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

Импортируйте сгенерированный файл в эскиз через Plugins > From *Almost* Sketch to Sketch в строке меню Sketch.

Успех!

Сборник рассказов 3.x

Если вы используете Storybook 3.3 или выше (но не в книге рассказов 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 , сложно управлять активами в системе проектирования. Многие команды строительных систем проектирования или библиотеки компонентов уже производят эскизы для распределения проектов и используют сборник рассказов для прототипа и представления разработанных компонентов. Может стать трудно поддерживать дизайн с последними компонентами, когда дизайнеры когда -либо играют в догоняет. story2sketch генерирует файл эскиза из ваших компонентов через сборник рассказов, поэтому ваши дизайны эскизов всегда остаются в курсе.

Конфигурация

Вы можете настроить story2sketch , используя API через CLI, story2sketch.config.js свой package.json .

Кли

Просто позвоните 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 или папки, когда выход By === 'kind'.	нить	"dist/stories.asketch.json"
вход	Расположение сгенерированной книги рассказов Iframe.html. Используйте это по url если это возможно для производительности.	нить	"dist/iframe.html"
URL	Сборник рассказов iframe url. Закончится в iframe.html . Предпочитаю input для производительности, если это возможно.	нить	"http://localhost:9001/iframe.html"
истории	Истории для извлечения из сборника рассказов. Вы, вероятно, должны переопределить по умолчанию.	объект/строка	"all"
параллелизм	Количество безголочных хромовых вкладок для запуска параллельно. По умолчанию количество потоков, доступных на вашей машине.	целое число	динамика
Симболгатер	Желоб, чтобы поместить между символами в эскизе.	целое число	100
ViewPorts	Конфигурация Viewport. Будет расположены слева направо по ширине. Старайтесь избегать изменения ключа, так как это используется для идентификации символа.	объект	Мобильный просмотр (шириной 320px) и настольный просмотр (ширина 1920px). См. Пример ниже.
Queryselector	Селектор запросов, чтобы выбрать ваш узел на каждой странице. Использует document.querySelectorAll .	нить	"#root"
многословный	ВЫХОДА РАЗОНА.	логический	false
fixpseudo	Попытка вставить реальные элементы вместо псевдо-элеентов	логический	false
Puppeteeroptions	Параметры, которые должны быть переданы непосредственно в puppeteer.launch . Смотрите док -кукловоды для использования.	объект	{}
Удалить ppreviewmargin	Удалить запас предварительного просмотра из тела iframe.	логический	true
LayOutby	Групповые символы в выводе эскиза с помощью ключа «Вид» или «Группа»	"добрый" | "группа"	нулевой
вывод	Напишите несколько файлов эскиза по "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"
        }
      ]
    }
  ]
} ;

Пользовательские видовые точки

Выходные символы на основе пользовательских портов просмотра:

 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, вам, возможно, придется добавить следующую конфигурацию в кукловорот в вашей story2sketch.config.js .

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

Вопросы

Почему мои вещи выглядят плохо?

Если ваши вещи выглядят плохо, то это еще не поддерживается html-sketchapp (см. Поддержку здесь), либо вам нужно настроить Story2sketch.

Почему бы вам не использовать react-sketchapp вместо html-sketchapp ?

react-sketchapp только поддерживает React Native или заставляет вас использовать соглашения о именовании нативных компонентов React. html-sketchapp поддерживает хороший старый HTML и не заботится о том, какие веб-структуры вы используете.

Могу ли я использовать это на чем -то, кроме сборника рассказов?

Пока нет, но мы планируем добавить поддержку для нескольких и пользовательских адаптеров.