Storybook: Posibilidad de ocultar la pestaña del lienzo

Hacemos esto de una manera bastante codificada como parte de addon-docs . @ndelangen Me pregunto si deberíamos hacer esto más configurable.

Podríamos 'esconderlo', pero debe estar presente para que el libro de cuentos funcione ahora mismo, al menos hasta el # 4169.

Ocultarlo a través de alguna opción sería una posibilidad.

¡Hola a todos! Parece que últimamente no ha habido mucho en este tema. Si todavía hay preguntas, comentarios o errores, no dude en continuar con la discusión. Desafortunadamente, no tenemos tiempo para abordar todos los problemas. Siempre estamos abiertos a contribuciones, así que envíenos una solicitud de extracción si desea ayudar. Los problemas inactivos se cerrarán después de 30 días. ¡Gracias!

Actualmente me enfrento al mismo problema. Idealmente, podríamos tener la opción de reordenar las pestañas como queramos para que, por ejemplo, en mi caso, las notas puedan ir primero y el lienzo después.

@eduina @ B3Kay FYI Actualmente puede ocultar todas las pestañas que no son de documentos con las banderas --docs , por ejemplo, yarn storybook --docs o yarn build-storybook --docs

¿Existe una opción para cambiar el orden y / o la selección predeterminada? Nos gustaría usar Storybook principalmente para la funcionalidad de Documentos, pero aún tenemos la capacidad de ver el lienzo. Sin embargo, con Canvas en la primera posición y seleccionado de forma predeterminada, los usuarios más nuevos a veces pierden la documentación real incluida en los archivos MDX.

@bmayen Yo diría que entra en el mismo grupo de funciones que ocultar la pestaña del lienzo.

Me encantaría ver la capacidad de ocultar la pestaña de lienzo para historias particulares, así como poder ocultar historias para que tenga la pestaña de documentos de alto nivel para un componente y eso es todo.

Mi solución actual para esto es simplemente no tener ninguna etiqueta de "Historia" en la documentación, sin embargo, luego pierdo la capacidad del botón "Mostrar código". ¿Hay alguna forma de tener una vista previa + código sin una historia? Gracias

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

¡Hola a todos! Parece que últimamente no ha habido mucho en este tema. Si todavía hay preguntas, comentarios o errores, no dude en continuar con la discusión. Desafortunadamente, no tenemos tiempo para abordar todos los problemas. Siempre estamos abiertos a contribuciones, así que envíenos una solicitud de extracción si desea ayudar. Los problemas inactivos se cerrarán después de 30 días. ¡Gracias!

¡No, quiero esto!

El jueves 24 de octubre de 2019 a las 3:44 a. M. Obsoleto [bot] [email protected] escribió:

¡Hola a todos! Parece que no ha sucedido mucho en este tema.
últimamente. Si todavía hay preguntas, comentarios o errores, no dude en
para continuar la discusión. Desafortunadamente, no tenemos tiempo para llegar a
cada tema. Siempre estamos abiertos a contribuciones, por favor envíenos un tirón.
Solicite si desea ayudar. Los problemas inactivos se cerrarán después del 30
dias. ¡Gracias!

-
Estás recibiendo esto porque estás suscrito a este hilo.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/storybookjs/storybook/issues/7066?email_source=notifications&email_token=AANLY2QVSW7PDJJVUFLOR2DQQFG5BA5CNFSM4HXKFNS2YY3PNVWWK3TUL52HS4DFVDVREXWG43V2
o darse de baja
https://github.com/notifications/unsubscribe-auth/AANLY2VIMIOVBIAWI6SL4WLQQFG5BANCNFSM4HXKFNSQ
.

En mi empresa, tenemos dos usos principales para el libro de cuentos.

1. Documentar nuestro sistema de diseño : este caso de uso está orientado a los departamentos de diseño y producto.
2. Documentar nuestros componentes web : este caso de uso está orientado al departamento de ingeniería.

En el primer caso, preferiríamos mostrar solo 'ejemplos del mundo real' con contenido y propiedades típicos para nuestros componentes. Sin embargo, en el último caso, preferiríamos documentar exhaustivamente todas las propiedades de los componentes, conservando los valores predeterminados, utilizando un contenido mínimo de marcador de posición.

El estuche orientado al diseño es perfecto para el modo de documentos, mientras que aún nos gustaría retener el lienzo para que los ingenieros jueguen con él según sea necesario.

Sin embargo, todos estamos de acuerdo en que para dar nuestro 'mejor paso adelante', el modo de documentos bonitos debería mostrarse de manera más prominente.

Con ese fin, nos gustaría poder configurar el libro de cuentos para que muestre la pestaña "Documentos" en el extremo izquierdo, con "Lienzo" a la derecha.

Muchas solicitudes para esto, tanto aquí como en el chat. Probablemente sea un problema general de la interfaz de usuario de SB y no una cosa específica de los documentos, pero encontraremos una solución de una forma u otra. cc @ndelangen

@eduina @ B3Kay FYI Actualmente puede ocultar todas las pestañas que no son de documentos con las banderas --docs , por ejemplo, yarn storybook --docs o yarn build-storybook --docs

Si hacemos que los complementos desaparezcan, ¿hay alguna forma de mostrar los complementos?

@matiasmenker Actualmente no https://github.com/storybookjs/storybook/issues/6700

Me encontré con esto yo también. ¿Algún consejo en el que se pueda empezar a trabajar en un PR?

Lars no es muy fácil. la forma en que funciona preview.js : https://github.com/storybookjs/storybook/blob/a007de8dfd3ea7db08f88970b410a62615c5546f/lib/ui/src/components/preview/preview.js#L267 -L300

La pestaña se inyecta allí.

Tendríamos que separar la adición de la pestaña de la representación del iframe.

No podemos NO inyectar el iframe, porque el iframe también muestra documentos y en realidad le dice al administrador qué historias mostrar en el explorador.

@LarsDenBakker - está realmente implementado y esperando # apruebe para acelerar el proceso de revisión y fusión :)

Ermahgerd !! Acabo de publicar https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.2 que contiene PR # 9095 que hace referencia a este problema. ¡Actualice hoy para probarlo!

Puede encontrar esta versión preliminar en la etiqueta @next NPM.

Cerrando este tema. Vuelva a abrir si cree que aún hay más por hacer.

PR # 9005 es bueno, pero todavía me falta la función para establecer una pestaña predeterminada: incluso si, por ejemplo, la pestaña Documentos se coloca en la primera posición, la pestaña del lienzo está activa al abrir una historia.

@eduina @ B3Kay FYI Actualmente puede ocultar todas las pestañas que no son de documentos con las banderas --docs , por ejemplo, yarn storybook --docs o yarn build-storybook --docs

@shilman
Verificado en 5.3.7 y 5.3.14 que no funciona. La pestaña de lienzo aún está visible

Esperando desesperadamente este lanzamiento ahora. Casi he terminado con la actualización después de mantener esta actualización durante mucho tiempo. @shilman podría conocer mi historial de errores planteados con addon-info . Fuera va de mi proyecto.
Actualizado exitosamente. Hermoso uso de CSF y docspage . ¡Me encantó!

Acelera este lanzamiento si es posible. Depende de él.

Y gracias por todo su apoyo en los problemas de GitHub o en el artículo mediano. Muy apreciado.

Puede rastrear el estado del lanzamiento aquí https://github.com/storybookjs/storybook/issues/9311

@ B3Kay tengo el mismo problema. Puede reemplazar en la URL del libro de cuentos /?path=/story/ con /?path=/docs/ para que se seleccionen los documentos cada vez que se abra el libro de cuentos.

Para ocultar el botón (no es la solución ideal en absoluto), solo estoy agregando el siguiente CSS a una extensión del navegador que inyecta CSS (por supuesto, esto solo funciona para usted, los otros miembros de su compañía aún lo verán):

#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;   
}

No es ideal, pero quizás eso sea útil para alguien.

Si alguien está interesado, tengo una solución que me está funcionando bien.

Creé un complemento súper simple con esto. Es register.js es esto:

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);
});

En mi manager-head.html

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

En mis páginas docsOnly , configuro viewMode: 'docs' para asegurarme de que la navegación funcione correctamente.