Este é um mono-repro . Ele contém vários pacotes, todos controlados a partir de um nível superior packages.json .
Cada projeto possui seu próprio arquivo package.json contendo configuração específica do pacote, no entanto, não execute yarn install a partir de um projeto de pacote; Em vez disso, execute -o do nível superior.
Se você executar yarn install de um pacote, poderá obter um erro inútil como este:
Error: ENOENT: no such file or directory, symlink '…fozzie-componentspackages…' -> '…fozzie-componentsnode_modules@justeat…'
Se isso acontecer, exclua todas as pastas node_modules por toda parte e, em seguida, execute yarn install no diretório raiz novamente.
Em alguns casos raros, os módulos especificados no arquivo package.json de componentes às vezes podem deixar de resolver / instalar corretamente. Isso pode levar a erros como: Exemplo de erro: o módulo a seguir não foi encontrado, execute yarn add @moduleName para instalá -lo.
Há duas soluções que você pode tentar da raiz do projeto que pode consertar isso:
O Turborepo é um sistema de construção inteligente otimizado para JavaScript e TypeScript CodeBases. Usamos o Turborepo para facilitar a execução de todos os nossos scripts de construção dentro do Monorepo.
Para acelerar os fluxos de trabalho de desenvolvimento local / IC, usamos a funcionalidade de cache remota do Turborepo para publicar artefatos de construção no AWS S3. Isso garante que apenas pacotes modificados tenham suas tarefas de construção executadas.
Para aproveitar essa funcionalidade, você deve definir a variável de ambiente TURBO_TOKEN em sua máquina local. Entre em contato com a equipe do sistema de design para obter o valor deste token.
Depois de ativado, você verá 'Cache remoto ativado' ao executar uma tarefa de nó de pacotes.
Recomenda -se executar as seguintes tarefas na raiz do monorepo para garantir que as tarefas sejam executadas para os componentes necessários:
build lint test
Para outras tarefas de teste, você pode executar de várias maneiras:
# Run Component tests for all components
# Note: Ensure Storybook is not running when running the following commands
cd ./fozzie-components
yarn storybook:build
yarn storybook:serve-static
yarn test-component:chromeOU
# Run Component tests for individual f-* package
# Note: Ensure Storybook is not running when running the following commands
cd ./fozzie-components
yarn storybook:build
yarn storybook:serve-static
# And in another window
yarn test-component:chrome --filter=@justeat/f-user-messageCriamos vários ajudantes opcionais de mixin em Fozzie. Aqui está um exemplo de como usá -lo:
Nota: Importar o mixin opcional e usar @include no arquivo common.scss do seu componente não funciona se você tiver module ativado no seu SFC.
< style lang="scss" module>
@include pageBanner () ;
</ style > Você pode adicionar estilos reutilizáveis ao arquivo common.scss . Isso pode ser útil para componentes que usam subcomponentes e que desejam compartilhar mixins, funções e variáveis.
Cada componente vem com um arquivo vue.config.js que disponibiliza o arquivo common.scss no espaço de nome common :
`@use "../assets/scss/common.scss";`
Para acessar qualquer coisa do arquivo comum, basta prefixar o valor como assim:
// Fake values used for demonstration
.someClass {
color: common.$fontColor;
line-height: common.line-height();
@include common.truncate();
}
Você pode remover a necessidade de espaço para nome usando algo como @use "../assets/scss/common.scss" as * no entanto, a utilização do espaço para nome torna muito mais fácil entender de onde vem um valor.
Para executar o Storybook primeiro, você deve executar o seguinte no nível superior
yarn build para construir os pacotes requisitos para o livro de histórias correr.
Em seguida, execute yarn storybook:serve para iniciar o Storybook, que será aberto no localhost:8080 .
Como alternativa, você pode executar yarn build:changed e yarn storybook:serve-changed para ver apenas o componente em que você está trabalhando, bem como qualquer uma de suas dependências / dependentes.
Se você deseja visualizar um único componente no Storybook durante o desenvolvimento, pode fazer isso abrindo os componentes *.stories.js Arquivo no seu IDE e executando o Storybook - Run Currently Open Story File , que pode ser encontrada na guia Depuração à esquerda. (Isso funciona apenas com o código VS).
Isso é particularmente útil, pois impede um bug em que o Storybook puxa em outras folhas de estilo de componentes (veja aqui).
Usamos a Husky para gerenciar nossos ganchos git.
Quando você se compromete, os seguintes scripts funcionam como parte do nosso gancho de pré-compromisso.
Se você deseja pular este gancho Husky, basta adicionar o argumento --no-verify ao fazer sua confirmação.
Por exemplo: git commit -m "Refactor f-button" --no-verify .
Mais informações sobre como contribuir para este repositório podem ser encontradas em nossa seção de documentação do livro de histórias
Os componentes Fozzie foram originalmente de autoria no Vue 2. Para garantir que eles trabalhem em um aplicativo Vue 3, execute o Vue 3 no modo Compat.
