¡Storybook es el explorador de componentes de la interfaz de usuario más popular! Este es el sitio web para https://storybook.js.org/.
Nota : Este no es los documentos, esos se encuentran aquí.
¡Contribuciones bienvenidas! Si es algo pequeño como la gramática o la puntuación, abra una solicitud de extracción. Si se trata de un cambio más grande o una nueva característica, agregue un problema para la discusión.
Flujo de trabajo
El libro de cuentos para el libro de cuentos contiene cada componente de la interfaz de usuario. La interfaz de usuario se construye siguiendo el desarrollo basado en componentes, un proceso que construye UI a partir de la "abajo", comenzando con componentes y terminando con pantallas. Eso significa que los contribuyentes deben componer UIS en el libro de cuentos antes de la integración con la aplicación Gatsby.
Gatsby se usa para la enrutamiento básico y la generación de sitios estáticos.
yarn start a ejecutar todo el sitio
yarn start:skip-addons para omitir el edificio del catálogo de complementos
yarn start:docs-only para burlarse de la página de inicio y construir las páginas de documentos
El contenido para la sección de documentación se encuentra en los docs/ subdirectorio del libro de cuentos Monorepo: https://github.com/storybookjs/storybook/tree/next/docs.
Para ejecutar esta aplicación mientras edita esos archivos, consulte tanto este repositorio como el Monorepo, luego::
storybook Monorepo: Ejecute el comando yarn task y luego seleccione la opción Synchronize documentation (sync-docs) .
Proporcione el camino al proyecto frontpage .
Con esto, el storybook/docs de las carpetas y frontpage/src/content/docs se sincronizarán, asegurando que cualquier cambio realizado en la documentación en el libro de cuentos Monorepo se reflejará en los documentos del sitio web de Storybook.
frontpage :Para ejecutar la documentación del sitio web, use el siguiente comando:
yarn start:docs-only
El proyecto se visualizará en el navegador en http://localhost:8000
Las notas de la versión se almacenan en el directorio SRC/Content/Lotess como archivos .md . El nombre del archivo corresponde con la versión (Major.Minor) de la versión y se utilizará para completar el enlace a la versión específica de la página de versiones.
Dentro del archivo .md de la versión, Frontmatter se usa para crear un título de página, mientras que el resto del contenido se analiza utilizando gatsby-transformer-remark y diseñado con selectores en src/styles/formatting.js .
Ver documentos detallados
En el desarrollo y con las compilaciones de producción local, las variables de entorno se pueden configurar con archivos .env como se explica aquí. Las variables tienen el prefijo GATSBY_ cuando esa variable debe estar disponible en el código del lado del cliente.
En las vistas previas de implementación y las implementaciones de producción, estas variables se establecen con las variables de compilación de Netlify.
La búsqueda dentro de los documentos funciona con DocSearch. Para que esto funcione, se requiere una variable de entorno:
GATSBY_ALGOLIA_API_KEY
Cómo configurar en su máquina:
GATSBY_ALGOLIA_API_KEY=key al archivo desde el paso 1El sitio se arrastra cada 24 horas, por lo que cualquier actualización se reflejará en esa cantidad de tiempo.
La última publicación de blog se obtiene de Ghost. Deberá agregar para que esto funcione, se requiere una variable de entorno:
GHOST_STORYBOOK_API_KEY
Cómo configurar en su máquina:
GHOST_STORYBOOK_API_KEY=key al archivo desde el paso 1 Este proyecto utiliza estas herramientas para facilitar nuestro trabajo.
Las ramas principales y las sucursales se implementan automáticamente mediante netlify cada confirmación.
Todas las historias en el libro de cuentos se prueban automáticamente en escritorio y dispositivos móviles cada uno. Asegúrese de que todas las líneas de base sean aceptadas antes de fusionarse.
Cada construcción de una suite de prueba funciona. Asegúrese de que no haya errores antes de fusionarse.