Este es un mono-repo . Contiene varios paquetes, todos controlados desde un packages.json de nivel superior. JSON.
Cada proyecto tiene su propio archivo package.json que contiene la configuración específica del paquete, sin embargo, no ejecute yarn install desde un proyecto de paquete; En su lugar, ejecutarlo desde el nivel superior.
Si ejecuta yarn install desde un paquete, entonces puede obtener un error inútil como este:
Error: ENOENT: no such file or directory, symlink '…fozzie-componentspackages…' -> '…fozzie-componentsnode_modules@justeat…'
Si esto sucede, elimine todas las carpetas node_modules en todo momento y luego ejecute yarn install desde el directorio raíz nuevamente.
En algunos casos raros, los módulos especificados en los componentes propios package.json El archivo json a veces puede no resolver / instalar correctamente. Esto puede conducir a errores como: Error de ejemplo: no se pudo encontrar el siguiente módulo, ejecute yarn add @moduleName para instalarlo.
Hay dos soluciones que podría probar desde la raíz del proyecto que puede solucionar esto:
Turborepo es un sistema de compilación inteligente optimizado para bases de código JavaScript y TypeScript. Utilizamos turborepo para facilitar la ejecución de todos nuestros scripts de compilación dentro del monorreo de pastel.
Para acelerar los flujos de trabajo de desarrollo / IC local, utilizamos la funcionalidad de almacenamiento de almacenamiento remoto de Turborepo para publicar artefactos de compilación a AWS S3. Esto asegura que solo los paquetes modificados tengan sus tareas de compilación ejecutadas.
Para aprovechar esta funcionalidad, debe establecer la variable de entorno TURBO_TOKEN en su máquina local. Comuníquese con el equipo del sistema de diseño para obtener el valor de este token.
Una vez habilitado, verá 'caché remoto habilitado' al ejecutar una tarea de nodo de paquetes.
Se recomienda ejecutar las siguientes tareas en la raíz del monoreso para garantizar que las tareas se ejecuten para los componentes requeridos:
lint test build
Para otras tareas de prueba, puede ejecutar de varias maneras:
# 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:chromeO
# 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-messageHemos creado varios ayudantes de mezcla opcionales en Fozzie. Aquí hay un ejemplo de cómo usarlo:
Nota: Importar la mezcla opcional y usar @include en el archivo common.scss de su componente no funciona si tiene module habilitado en su SFC.
< style lang="scss" module>
@include pageBanner () ;
</ style > Puede agregar estilos reutilizables al archivo common.scss . Esto puede ser útil para componentes que usan subcomponentes y pueden desear compartir mezclas, funciones y variables.
Cada componente viene con un archivo vue.config.js que hace que el archivo common.scss esté disponible en el espacio de nombres common como así:
`@use "../assets/scss/common.scss";`
Para acceder a cualquier cosa desde el archivo común, simplemente prefijo el valor como así:
// Fake values used for demonstration
.someClass {
color: common.$fontColor;
line-height: common.line-height();
@include common.truncate();
}
Puede eliminar la necesidad de la compensación de nombres usando algo como @use "../assets/scss/common.scss" as * Sin embargo, utilizar el espacio de nombres hace que sea mucho más fácil entender de dónde proviene un valor.
Para ejecutar el libro de cuentos primero debes ejecutar lo siguiente en el nivel superior
yarn build para construir los paquetes requeridos para el libro de cuentos.
Luego ejecute yarn storybook:serve para comenzar el libro de cuentos, que se abrirá en localhost:8080 .
Alternativamente, puede ejecutar el libro de cuentos yarn build:changed y yarn storybook:serve-changed para ver solo el componente en el que está trabajando, así como cualquiera de sus dependencias / dependientes.
Si desea ver un solo componente en el libro de cuentos durante el desarrollo, puede hacerlo abriendo el archivo de componentes *.stories.js en su IDE y ejecutando el Storybook - Run Currently Open Story File que se puede encontrar en la pestaña de depuración a la izquierda. (Esto solo funciona con el código VS).
Esto es particularmente útil, ya que evita un error en el que el libro de cuentos atrae a otros componentes hojas de estilo (ver aquí).
Usamos Husky para administrar nuestros gits Git.
Cuando hace una compromiso, los siguientes scripts se ejecutarán como parte de nuestro gancho previo al Comité.
Si desea omitir este gancho Husky, simplemente agregue el argumento --no-verify al hacer su compromiso.
Por ejemplo: git commit -m "Refactor f-button" --no-verify .
Se puede encontrar más información sobre cómo contribuir a este repositorio en nuestra sección de documentación del libro de cuentos
Los componentes de Fozzie se escribieron originalmente en Vue 2. Para asegurarse de que funcionen en una aplicación Vue 3, ejecute Vue 3 en modo compats.
