Storybook: Возможность скрыть вкладку холста

Мы делаем это довольно жестко, как часть addon-docs . @ndelangen Интересно, стоит ли нам сделать это более настраиваемым.

Мы могли бы «спрятать» его, но он должен присутствовать, чтобы сборник рассказов работал прямо сейчас, по крайней мере, до # 4169.

Можно было бы скрыть это с помощью какой-либо опции.

Всем привет! Похоже, что в последнее время в этом вопросе не так много происходило. Если остались вопросы, комментарии или ошибки, пожалуйста, продолжайте обсуждение. К сожалению, у нас нет времени разбираться в каждой проблеме. Мы всегда открыты для внесения вклада, поэтому, если вы хотите помочь, отправьте нам запрос на включение. Неактивные вопросы будут закрыты через 30 дней. Спасибо!

В настоящее время я столкнулся с той же проблемой. В идеале у нас могла бы быть возможность переупорядочить вкладки по своему желанию, чтобы, например, в моем случае сначала были заметки, а потом - холст.

@eduina @ B3Kay К вашему сведению, в настоящее время вы можете скрыть все вкладки, не относящиеся к документации, с помощью флагов --docs , например yarn storybook --docs или yarn build-storybook --docs

Есть ли возможность изменить порядок и / или выбор по умолчанию? Мы хотели бы использовать Storybook в первую очередь для работы с документами, но по-прежнему иметь возможность просматривать холст. Однако с Canvas в первой позиции и выбранным по умолчанию новые пользователи иногда пропускают фактическую документацию, включенную в файлы MDX.

@bmayen Я бы сказал, что это относится к тому же

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

Мое текущее исправление - просто не иметь никаких тегов «История» в документации, однако затем я теряю возможность кнопки «Показать код». Есть ли способ получить превью + код без истории? Спасибо

@sanchez см. https://github.com/storybookjs/storybook/pull/7966

Всем привет! Похоже, что в последнее время в этом вопросе не так много происходило. Если остались вопросы, комментарии или ошибки, пожалуйста, продолжайте обсуждение. К сожалению, у нас нет времени разбираться в каждой проблеме. Мы всегда открыты для внесения вклада, поэтому, если вы хотите помочь, отправьте нам запрос на включение. Неактивные вопросы будут закрыты через 30 дней. Спасибо!

Нет, я хочу этого!

24 октября 2019 г., в 3:44 устаревший [бот] [email protected] написал:

Всем привет! Похоже, в этом выпуске не так много всего происходило
недавно. Если остались вопросы, комментарии или ошибки, пожалуйста, не стесняйтесь.
чтобы продолжить обсуждение. К сожалению, у нас нет времени, чтобы добраться до
каждая проблема. Мы всегда открыты для пожертвований, поэтому пришлите нам заявку
просьба, если вы хотите помочь. Неактивные выпуски будут закрыты после 30
дней. Спасибо!

-
Вы получаете это, потому что подписаны на эту ветку.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/storybookjs/storybook/issues/7066?email_source=notifications&email_token=AANLY2QVSW7PDJJVUFLOR2DQQFG5BA5CNFSM4HXKFNS2YY3PNVWWK3TULXWORL7GWMVWWK3TULXGWM8CBMXWWGWMXW03DWMW03DVMW03DBWWMXW3DVMW08C05BXWMXWMXVMWB
или отказаться от подписки
https://github.com/notifications/unsubscribe-auth/AANLY2VIMIOVBIAWI6SL4WLQQFG5BANCNFSM4HXKFNSQ
.

В моей компании сборник рассказов используется двумя основными способами.

1. Документирование нашей дизайн-системы - этот вариант использования ориентирован на отделы дизайна и продукта.
2. Документирование наших веб-компонентов - этот вариант использования ориентирован на инженерный отдел

В первом случае мы предпочли бы демонстрировать только «реальные примеры» с типичным содержанием и свойствами для наших компонентов. Однако в последнем случае мы предпочли бы исчерпывающе задокументировать все свойства компонентов с сохранением значений по умолчанию, используя минимальное содержимое заполнителя.

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

Тем не менее, мы все согласны с тем, что для нашего «наилучшего продвижения вперед» режим красивой документации должен отображаться более заметно.

С этой целью мы хотели бы иметь возможность настроить сборник рассказов так, чтобы вкладка «Документы» отображалась слева, а «Холст» - справа.

Об этом много запросов как здесь, так и в чате. Вероятно, это общая проблема пользовательского интерфейса SB, а не конкретная проблема с документами, но мы так или иначе найдем решение. cc @ndelangen

@eduina @ B3Kay К вашему сведению, в настоящее время вы можете скрыть все вкладки, не относящиеся к документации, с помощью флагов --docs , например yarn storybook --docs или yarn build-storybook --docs

Если мы это сделаем, аддоны исчезнут, есть ли способ показать аддоны?

@matiasmenker В настоящее время нет https://github.com/storybookjs/storybook/issues/6700

Я тоже сталкиваюсь с этим. Есть указатели, с которых можно было бы начать работу над пиаром?

Ларс, это непросто. как работает preview.js : https://github.com/storybookjs/storybook/blob/a007de8dfd3ea7db08f88970b410a62615c5546f/lib/ui/src/components/preview/preview.js#L267 -L300

Вкладка туда вводится.

Нам пришлось бы отделить добавление вкладки от рендеринга iframe.

Мы не можем НЕ внедрить iframe, потому что iframe также отображает документы и фактически сообщает менеджеру, какие истории отображать в проводнике.

@LarsDenBakker - он фактически реализован и ждет # 9095, поднимите палец вверх, чтобы ускорить процесс обзора и слияния :)

Эрмахерд !! Я только что выпустил https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.2, содержащий PR № 9095, который ссылается на эту проблему. Обновите сегодня, чтобы попробовать!

Вы можете найти этот предварительный выпуск в теге @next NPM.

Закрытие этого вопроса. Пожалуйста, откройте снова, если считаете, что еще нужно сделать.

PR # 9005 хорош, но мне все еще не хватает функции установки вкладки по умолчанию: даже если, например, вкладка «Документы» находится в первой позиции, вкладка холста активна при открытии истории.

@eduina @ B3Kay К вашему сведению, в настоящее время вы можете скрыть все вкладки, не относящиеся к документации, с помощью флагов --docs , например yarn storybook --docs или yarn build-storybook --docs

@shilman
Проверено на 5.3.7 и 5.3.14 не работает. Вкладка Canvas все еще видна

Сейчас отчаянно жду этого релиза. Я почти закончил с обновлением после того, как долго держал это обновление. @shilman может знать мою историю ошибок, поднятых с помощью addon-info . Он уходит из моего проекта.
Успешно обновлено. Красивое использование CSF и docspage . Очень понравилось!

Пожалуйста, ускорите выпуск этого выпуска, если это возможно. Зависит от этого.

И спасибо за всю вашу поддержку по вопросам, связанным с GitHub, или за среднюю статью. Очень признателен.

Вы можете отслеживать статус выпуска здесь https://github.com/storybookjs/storybook/issues/9311

@ B3Kay У меня такая же проблема. Вы можете заменить в URL сборника рассказов /?path=/story/ на /?path=/docs/ чтобы документы выбирались при каждом открытии сборника рассказов.

Чтобы скрыть кнопку (это не идеальное решение), я просто добавляю следующий CSS в расширение браузера, которое внедряет CSS (конечно, это работает только для вас, другие члены вашей компании все равно будут видеть его):

#root > div > div.css-sqdry3 > div > div.css-sqdry3 > div:nth-child(1) > div > div.simplebar-wrapper > div.simplebar-mask > div > div > div > div > div.css-11sh1n2 > div.css-1tgscux > a:nth-child(1) > button {
    display: none;   
}

Не идеально, но, может быть, это кому-то пригодится.

Если кому-то интересно, у меня есть решение, которое мне подходит.

Я создал супер простой плагин с этим. Это register.js это:

import { addons } from '@storybook/addons';
import { STORY_RENDERED, DOCS_RENDERED } from '@storybook/core-events';

const ADDON_ID = 'YOUR_PLUGIN_ID';

addons.register(ADDON_ID, api => {

    // Check whether we are on a docsOnly page and add a corresponding body class for styling
    const setBodyClass = () => {

        // Needs animation frame to make sure story component has been mounted
        window.requestAnimationFrame(() => {

            // You can change the logic of when to hide the canvas button of course.
            // you have full access to the storybook API, so you can also configure it per-story etc.
            const isDocsOnly = api.getCurrentStoryData().parameters.docsOnly === true;

            if (isDocsOnly) {
                document.body.classList.add('is-docs-only');
            } else {
                document.body.classList.remove('is-docs-only');
            }
        });
    };

    api.on(STORY_RENDERED, setBodyClass);
    api.on(DOCS_RENDERED, setBodyClass);
});

В моем manager-head.html

.is-docs-only .os-content a:not([id])[href*="?path=/story"] {
    display: none !important;
}

На моих страницах docsOnly я установил viewMode: 'docs' чтобы убедиться, что навигация работает нормально.