Storybook: 캔버스 탭을 숨기는 기능

addon-docs 일부로 상당히 하드코딩된 방식으로 이 작업을 수행합니다. @ndelangen 이것을 더 구성 가능하게 만들어야 하는지 궁금합니다.

'숨길' 수는 있지만 스토리북이 지금 당장 작동하려면 최소한 #4169까지는 존재해야 합니다.

일부 옵션을 통해 숨기는 것이 가능합니다.

안녕하세요 여러분! 최근에 이 문제에 대해 많은 일이 일어나지 않은 것 같습니다. 여전히 질문, 의견 또는 버그가 있으면 자유롭게 토론을 계속하십시오. 불행히도 모든 문제를 다룰 시간이 없습니다. 우리는 항상 기여에 열려 있으므로 도움이 필요하면 풀 리퀘스트를 보내주십시오. 비활성 문제는 30일 후에 닫힙니다. 감사 해요!

나는 현재 같은 문제에 직면하고 있습니다. 이상적으로는 탭을 원하는 대로 재정렬할 수 있는 옵션이 있을 수 있으므로 예를 들어 제 경우에는 메모가 먼저 표시되고 캔버스가 나중에 표시될 수 있습니다.

@eduina @B3Kay 참고로 현재 --docs 플래그를 사용하여 문서가 아닌 탭을 모두 숨길 수 있습니다(예: yarn storybook --docs 또는 yarn build-storybook --docs

순서 및/또는 기본 선택을 변경하는 옵션이 있습니까? 우리는 주로 문서 기능을 위해 Storybook을 사용하고 싶지만 여전히 캔버스를 볼 수 있습니다. 그러나 Canvas가 첫 번째 위치에 있고 기본적으로 선택되어 있으므로 새로운 사용자는 MDX 파일에 포함된 실제 문서를 놓치는 경우가 있습니다.

@bmayen 나는 그것이 캔버스 탭을 숨기는 것과 동일한 기능 버킷에

특정 스토리에 대한 캔버스 탭을 숨기는 기능과 스토리를 숨길 수 있는 기능을 보고 싶습니다. 그래서 구성 요소에 대한 상위 수준 문서 탭이 있고 그게 전부입니다.

이에 대한 현재 수정 사항은 문서에 "Story" 태그가 없는 것이지만 "Show Code" 버튼에 대한 기능이 없어집니다. 스토리 없이 미리보기+코드를 가질 수 있는 방법이 있습니까? 감사 해요

@sanchez 참조 https://github.com/storybookjs/storybook/pull/7966

안녕하세요 여러분! 최근에 이 문제에 대해 많은 일이 일어나지 않은 것 같습니다. 여전히 질문, 의견 또는 버그가 있으면 자유롭게 토론을 계속하십시오. 불행히도 모든 문제를 다룰 시간이 없습니다. 우리는 항상 기여에 열려 있으므로 도움이 필요하면 풀 리퀘스트를 보내주십시오. 비활성 문제는 30일 후에 닫힙니다. 감사 해요!

아니 이걸 원해!

2019년 10월 24일 목요일 오전 3시 44분 stale[bot] [email protected]에서 다음과 같이 작성했습니다.

안녕하세요 여러분! 이 문제에 대해 많은 일이 진행되지 않은 것 같습니다.
최근에. 여전히 질문, 의견 또는 버그가 있으면 언제든지
토론을 계속합니다. 불행히도, 우리는 도착할 시간이 없습니다
모든 문제. 우리는 항상 기여에 열려 있으므로 우리에게 pull을 보내주십시오
도움을 원하시면 요청하세요. 비활성 문제는 30 후에 닫힙니다.
날. 감사 해요!

—
이 스레드에 가입했기 때문에 이 메시지를 받고 있습니다.
이 이메일에 직접 답장하고 GitHub에서 확인
https://github.com/storybookjs/storybook/issues/7066?email_source=notifications&email_token=AANLY2QVSW7PDJJVUFLOR2DQQFG5BA5CNFSM4HXKFNS2YY3PNVWWK3TUL52HS4DFVEXG43VMVBWJ3
또는 구독 취소
https://github.com/notifications/unsubscribe-auth/AANLY2VIMIOVBIAWI6SL4WLQQFG5BANCNFSM4HXKFNSQ
.

우리 회사에서는 스토리북을 크게 두 가지 용도로 사용합니다.

1. 설계 시스템 문서화 - 이 사용 사례는 설계 및 제품 부서를 대상으로 합니다.
2. 웹 구성 요소 문서화 - 이 사용 사례는 엔지니어링 부서를 대상으로 합니다.

전자의 경우 구성 요소에 대한 일반적인 콘텐츠 및 속성이 포함된 '실제 예제'만 표시하는 것을 선호합니다. 그러나 후자의 경우 최소한의 자리 표시자 콘텐츠를 사용하여 기본값을 유지하면서 모든 구성 요소 속성을 철저하게 문서화하는 것을 선호합니다.

디자인 지향적인 케이스는 문서 모드에 적합하지만 엔지니어가 필요에 따라 사용할 수 있도록 캔버스를 유지하고 싶습니다.

그러나 우리 모두는 '최선을 다하기 위해' 예쁜 문서 모드가 더 눈에 띄게 표시되어야 한다는 데 동의합니다.

이를 위해 가장 왼쪽에 "문서" 탭을 표시하고 오른쪽에 "캔버스"를 표시하도록 스토리북을 구성할 수 있기를 바랍니다.

여기와 채팅에서 많은 요청이 있습니다. 문서 관련 문제가 아니라 일반적인 SB UI 문제일 수 있지만 어떤 식으로든 해결 방법을 알아낼 것입니다. cc @ndelangen

@eduina @B3Kay 참고로 현재 --docs 플래그를 사용하여 문서가 아닌 탭을 모두 숨길 수 있습니다(예: yarn storybook --docs 또는 yarn build-storybook --docs

애드온이 사라지면 애드온을 표시하는 방법이 있습니까?

@matiasmenker 현재 https://github.com/storybookjs/storybook/issues/6700 아닙니다.

나 자신도 이것을 실행합니다. PR 작업을 시작할 수 있는 포인터가 있습니까?

라스 아주 쉬운 일이 아닙니다. preview.js 작동 방식: https://github.com/storybookjs/storybook/blob/a007de8dfd3ea7db08f88970b410a62615c5546f/lib/ui/src/components/preview/preview.js#L267 -L300

탭이 거기에 주입됩니다.

iframe의 렌더링에서 탭 추가를 분리해야 합니다.

iframe은 또한 문서를 렌더링하고 실제로 관리자에게 탐색기에 표시할 스토리를 알려 주기 때문에 iframe을 삽입할 수 없습니다.

@LarsDenBakker - 실제로 구현되어 대기 중입니다. #9095, 검토 및 병합 프로세스의 속도를 높이려면 엄지손가락을 치켜주세요. :)

에르마게르트!! 이 문제를 참조하는 PR #9095가 포함된 https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.2 를 방금 출시했습니다. 지금 업그레이드하여 사용해 보세요!

이 시험판은 @next NPM 태그에서 찾을 수 있습니다.

이 문제를 닫습니다. 아직 할 일이 더 있다고 생각되면 다시 열어주세요.

PR #9005도 좋지만 기본 탭을 설정하는 기능이 아직 부족합니다. 예를 들어 문서 탭이 첫 번째 위치에 배치되더라도 스토리를 열 때 캔버스 탭이 활성화됩니다.

@eduina @B3Kay 참고로 현재 --docs 플래그를 사용하여 문서가 아닌 탭을 모두 숨길 수 있습니다(예: yarn storybook --docs 또는 yarn build-storybook --docs

@shilman
5.3.7 및 5.3.14에서 작동하지 않는 것으로 확인되었습니다. 캔버스 탭이 계속 표시됩니다.

지금 이 릴리스를 간절히 기다리고 있습니다. 이 업데이트를 오랫동안 유지한 후 업그레이드가 거의 완료되었습니다. @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' 를 설정했습니다.