O Storybook é o mais popular Explorer de componentes da interface do usuário! Este é o site para https://storybook.js.org/.
NOTA : Este não são os documentos, esses estão localizados aqui.
Contribuições Bem -vindo! Se for algo pequeno como gramática ou pontuação, abra uma solicitação de tração. Se for uma mudança maior ou um novo recurso, adicione um problema para discussão.
Fluxo de trabalho
O livro de histórias do livro de histórias contém todos os componentes da interface do usuário. A interface do usuário é construída seguindo o desenvolvimento orientado ao componente, um processo que constrói as UIs a partir do "de baixo para cima", começando com componentes e terminando com as telas. Isso significa que os colaboradores devem compor as UIs no Storybook antes da integração com o aplicativo Gatsby.
Gatsby é usado para roteamento básico e geração estática do local.
yarn start a executar o site inteiro
yarn start:skip-addons para pular a construção do catálogo Addon
yarn start:docs-only para zombar da página inicial e construir as páginas do documento
O conteúdo da seção de documentação está no docs/ subdiretório do livro de histórias Monorepo: https://github.com/storybookjs/storybook/tree/next/docs.
Para executar este aplicativo ao editar esses arquivos, consulte este repositório e o monorepo, então:
storybook Monorepo: Execute o comando yarn task e selecione a opção Synchronize documentation (sync-docs) .
Forneça o caminho para o projeto frontpage .
Com isso, o storybook/docs e frontpage/src/content/docs serão sincronizados, garantindo que quaisquer alterações feitas na documentação no livro de histórias Monorepo se refletirão nos documentos do site do livro de histórias.
frontpage :Para executar a documentação do site, use o seguinte comando:
yarn start:docs-only
O projeto será visualizado no navegador em http://localhost:8000
As notas de versão são armazenadas no diretório SRC/Content/Liberações como arquivos .md . O nome do arquivo corresponde à versão (major.Minor) da versão e será usada para preencher o link para a versão específica da página Releases.
Dentro do arquivo .md da versão, o FrontMatter é usado para criar um título de página, enquanto o restante do conteúdo é analisado usando gatsby-transformer-remark e estilizado com seletores em src/styles/formatting.js .
Veja documentos detalhados
No desenvolvimento e nas construções de produção local, as variáveis ambientais podem ser configuradas com arquivos .env , conforme explicado aqui. As variáveis são prefixadas com GATSBY_ quando essa variável precisa estar disponível no código do lado do cliente.
Em visualizações e implantação de implantação, essas variáveis são definidas com as variáveis de compilação do Netlify.
A pesquisa nos documentos é alimentada pelo DocSearch. Para que isso funcione, é necessária uma variável de ambiente:
GATSBY_ALGOLIA_API_KEY
Como configurar sua máquina:
GATSBY_ALGOLIA_API_KEY=key para o arquivo da etapa 1O site está rastreado a cada 24 horas, para que todas as atualizações sejam refletidas nessa quantidade de tempo.
A última postagem do blog é buscada do Ghost. Você precisará adicionar para que isso funcione, é necessária uma variável de ambiente:
GHOST_STORYBOOK_API_KEY
Como configurar sua máquina:
GHOST_STORYBOOK_API_KEY=key para o arquivo da Etapa 1 Este projeto usa essas ferramentas para facilitar nosso trabalho.
As principais e as filiais são implantadas automaticamente por netlify todos os compromissos.
Todas as histórias no livro de histórias são automaticamente testadas visuadas em desktop e móveis, cada uma delas. Verifique se todas as linhas de base são aceitas antes da fusão.
Cada suíte de construção de um teste é executado. Certifique -se de que não haja erros antes de se fundir.