justeattakeaway / fozzie-components Goto Github PK
View Code? Open in Web Editor NEWPublic monorepo of tools, services and atomic UI components within the fozzie ecosystem
Home Page: https://vue.pie.design
License: Other
Public monorepo of tools, services and atomic UI components within the fozzie ecosystem
Home Page: https://vue.pie.design
License: Other
I recently updated to version 2.6.0 and noticed that when logged in my details were not displayed in the header. Something about the way we are writing the user object into the data property after the AJAX request to the user details endpoint in the Navigation.vue
component is broken.
As a work-around, in my project, as I am already calling the user details endpoint, I am passing the result of the AJAX request into the userInfoProp
prop which for some reason forces the header to update and display the correct UI.
As part of the proper fix, we should ideally be able to write a unit test which fails under the current conditions so that we can have confidence that we have fixed the issue.
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@axe-core/webdriverio
, @babel/cli
, @babel/core
, @babel/eslint-parser
, @babel/plugin-proposal-class-properties
, @babel/plugin-proposal-optional-chaining
, @babel/plugin-transform-runtime
, @babel/preset-env
, @babel/register
, @braze/web-sdk
, @faker-js/faker
, @justeat/eslint-config-fozzie
, @justeat/f-icons
, @justeat/pie-design-tokens
, @justeat/stylelint-config-fozzie
, @justeattakeaway/cc-braze-adapter
, @percy/cli
, @percy/webdriverio
, @storybook/addon-a11y
, @storybook/addon-essentials
, @storybook/addon-links
, @storybook/storybook-deployer
, @storybook/theming
, @storybook/vue
, @vercel/ncc
, @vue/babel-preset-app
, @vue/cli-plugin-babel
, @vue/cli-plugin-unit-jest
, @vue/cli-service
, @vue/test-utils
, @wdio/allure-reporter
, @wdio/cli
, @wdio/local-runner
, @wdio/mocha-framework
, @wdio/spec-reporter
, allure-commandline
, autoprefixer
, axe-core
, axios
, axios-mock-adapter
, babel-jest
, babel-loader
, body-scroll-lock
, bundlewatch
, caniuse-lite
, color
, concurrently
, cookie-universal
, copy-to-clipboard
, core-js
, cross-env
, crypto-js
, cssnano
, danger
, date-fns
, eslint
, eslint-plugin-json-schema-validator
, eslint-plugin-jsonc
, eslint-plugin-vuejs-accessibility
, eyeglass
, fs-extra
, gulp-rename
, gulp-replace
, http-server
, include-media
, jest
, jest-environment-jsdom
, jest-mock-axios
, miragejs
, mockdate
, postcss
, postcss-cli
, prerender-spa-plugin
, prismjs
, sass
, sass-loader
, stylelint
, stylelint-scss
, turbo
, update-notifier
, url-loader
, v-click-outside
, vite
, vite-plugin-vue2
, vue
, vue-cli-plugin-storybook
, vue-demi
, vue-i18n
, vue-router
, vue-template-compiler
, vuelidate
, vuex
, wdio-video-reporter
, webdriverio
, yeoman-generator
).github/workflows/build.yml
actions/checkout v3
actions/setup-node v3
actions/cache v2
actions/checkout v3
actions/setup-node v3
actions/cache v2
actions/checkout v3
dorny/paths-filter v2
actions/setup-node v3
actions/cache v2
actions/cache v2
actions/cache v2
actions/checkout v3
dorny/paths-filter v2
actions/setup-node v3
actions/cache v2
actions/cache v2
technote-space/workflow-conclusion-action v3
actions/checkout v3
dorny/paths-filter v2
actions/setup-node v3
actions/cache v2
actions/cache v2
actions/cache v2
actions/upload-artifact v3
actions/checkout v3
actions/setup-node v3
actions/cache v2
actions/cache v2
actions/cache v2
actions/checkout v3
actions/setup-node v3
actions/cache v2
actions/cache v2
.github/workflows/labeler.yml
actions/checkout v2
actions/labeler v3
package.json
deepmerge 4.2.2
@babel/cli 7.14.8
@babel/core 7.14.8
@babel/eslint-parser 7.16.5
@babel/plugin-proposal-class-properties 7.14.5
@babel/plugin-proposal-optional-chaining 7.14.5
@babel/plugin-transform-runtime 7.14.5
@babel/preset-env 7.14.9
@babel/register 7.14.5
@faker-js/faker 7.5.0
flush-promises 1.0.2
@justeat/browserslist-config-fozzie 1.2.0
@justeat/eslint-config-fozzie 5.4.0
@justeat/pie-design-tokens 3.0.0
@justeat/stylelint-config-fozzie 2.2.0
@percy/cli 1.0.5
@percy/webdriverio 2.0.1
@vercel/ncc 0.31.1
@vue/babel-preset-app 4.5.16
@vue/cli-plugin-babel 4.5.16
@vue/cli-plugin-unit-jest 4.5.16
@vue/cli-service 4.5.16
@vue/eslint-config-standard 4.0.0
@vue/test-utils 1.3.0
@wdio/allure-reporter 7.19.7
@wdio/cli 7.19.7
@wdio/local-runner 7.19.7
@wdio/mocha-framework 7.19.7
@wdio/spec-reporter 7.19.7
allure-commandline 2.17.2
axe-core 4.3.5
axe-reports 1.1.11
axios 0.21.4
axios-mock-adapter 1.19.0
babel-core 7.0.0-bridge.0
babel-jest 26.1.0
babel-loader 8.1.0
bundlewatch 0.3.1
core-js 3.26.1
cross-env 7.0.2
css-loader 1.0.1
danger 11.1.4
eslint 8.26.0
eslint-plugin-jsonc 1.3.1
eslint-plugin-json-schema-validator 1.0.48
eslint-import-resolver-webpack 0.13.2
eslint-plugin-vue 8.7.1
eslint-plugin-vuejs-accessibility 1.1.1
eslint-plugin-webdriverio 1.0.1
eyeglass 3.0.2
husky 6.0.0
include-media 1.4.9
jest-extended 0.11.5
js-cookie 2.2.1
lerna 3.22.1
miragejs 0.1.42
mocha-each 2.0.1
mocha-tags 1.0.1
npm-run-all 4.1.5
peer-deps-externals-webpack-plugin 1.0.4
postcss-loader 3.0.0
sass 1.53.0
sass-loader 10.1.0
stylelint 13.7.2
stylelint-scss 3.18.0
turbo 1.6.0
vite 2.9.13
vue 2.6.10
vue-router 3.5.2
vue-svg-loader 0.16.0
vue-template-compiler 2.6.10
vuex 3.5.1
wdio-chromedriver-service 7.3.2
wdio-video-reporter 3.2.1
webdriverio 7.19.7
node ^12 || ^14 || ^16
webpack 4.46.0
packages/components/atoms/f-button/package.json
@justeattakeaway/pie-icons-vue 2.0.0-beta.1
@justeat/browserslist-config-fozzie >=1.1.1
vue 2.x
vue-router >=3.4.8
node ^12 || ^14 || ^16
packages/components/atoms/f-card/package.json
@justeat/browserslist-config-fozzie >=1.1.1
node ^12 || ^14 || ^16
packages/components/atoms/f-error-boundary/package.json
vite-plugin-vue2 1.9.0
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/atoms/f-error-message/package.json
@justeattakeaway/pie-icons-vue 2.0.0-beta.1
@justeat/browserslist-config-fozzie >=1.1.1
node ^12 || ^14 || ^16
packages/components/atoms/f-filter-pill/package.json
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/atoms/f-form-field/package.json
@justeattakeaway/pie-icons-vue 2.0.0-beta.1
uuid 9.0.0
postcss-assets 5.0.0
@vue/cli-plugin-babel 4.5.16
@justeat/browserslist-config-fozzie >=1.1.1
node ^12 || ^14 || ^16
packages/components/atoms/f-image-tile/package.json
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/atoms/f-link/package.json
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/atoms/f-popover/package.json
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/atoms/f-spinner/package.json
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/molecules/f-alert/package.json
@justeattakeaway/pie-icons-vue 2.0.0-beta.1
@justeat/browserslist-config-fozzie >=1.1.1
node ^12 || ^14 || ^16
packages/components/molecules/f-breadcrumbs/package.json
@justeat/browserslist-config-fozzie >=1.1.1
node ^12 || ^14 || ^16
packages/components/molecules/f-card-with-content/package.json
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/molecules/f-media-element/package.json
@vue/cli-plugin-babel 4.5.16
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/molecules/f-mega-modal/package.json
@justeattakeaway/pie-icons-vue 2.0.0-beta.1
@vue/cli-plugin-babel 4.5.16
body-scroll-lock 3.0.3
@justeat/browserslist-config-fozzie >=1.1.1
body-scroll-lock 3.x
node ^12 || ^14 || ^16
packages/components/molecules/f-navigation-links/package.json
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/molecules/f-promotions-showcase/package.json
@vue/cli-plugin-babel 4.5.16
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/molecules/f-rating/package.json
@justeattakeaway/pie-icons-vue 2.0.0-beta.1
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/molecules/f-restaurant-card/package.json
@vue/cli-plugin-babel 4.5.16
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/molecules/f-searchbox/package.json
axios 0.21.2
lodash.debounce 4.0.8
url-loader 4.1.0
@justeat/browserslist-config-fozzie >=1.1.1
vue 2.x
vuex 3.5.1
node ^12 || ^14 || ^16
packages/components/molecules/f-skeleton-loader/package.json
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/molecules/f-tabs/package.json
@justeat/browserslist-config-fozzie >=1.1.1
node ^12 || ^14 || ^16
packages/components/molecules/f-user-message/package.json
@justeattakeaway/pie-icons-vue 2.0.0-beta.1
axios 0.21.2
lodash-es 4.17.21
@justeat/eslint-config-fozzie >=3.3.1
@justeat/f-trak >=0.6.0
node ^12 || ^14 || ^16
packages/components/organisms/f-content-cards/package.json
@babel/plugin-proposal-class-properties 7.12.13
@justeattakeaway/cc-braze-adapter 0.2.0
@justeattakeaway/cc-stampcards-adapter 0.5.1
@justeattakeaway/cc-filters 0.1.0
@justeattakeaway/cc-utils 0.1.0
core-js 3.6.5
@braze/web-sdk ^4.2.1
@faker-js/faker ^7.5.0
@vue/cli-plugin-babel 4.5.16
color 3.1.3
copy-to-clipboard 3.3.1
crypto-js 4.0.0
date-fns ^2.17.0
http-request-mock ^1.8.2
jsdom-testing-mocks ^1.6.0
vue 2.6.10
xhr-mock 2.5.1
@braze/web-sdk >=3.3.0
@justeat/browserslist-config-fozzie >=1.1.1
date-fns >=2.17.0
vue 2.x
node ^12 || ^14 || ^16
packages/components/organisms/f-cookie-banner/package.json
@vue/cli-plugin-babel 4.5.16
del 4.1.1
fancy-log 1.3.3
gulp 4.0.2
gulp-concat 2.6.1
gulp-rename 2.0.0
gulp-replace 1.1.3
prerender-spa-plugin 3.2.1
vue-cli-plugin-prerender-spa 1.1.6
vue-template-compiler 2.6.10
@justeat/browserslist-config-fozzie >=1.1.1
js-cookie 2.2.1
node ^12 || ^14 || ^16
packages/components/organisms/f-footer/package.json
@justeattakeaway/pie-icons-vue 2.0.0-beta.1
v-click-outside 3.1.2
@justeat/f-trak >=0.6.0
node ^12 || ^14 || ^16
packages/components/organisms/f-header/package.json
@justeattakeaway/pie-icons-vue 2.0.0-beta.1
@justeat/browserslist-config-fozzie >=1.1.1
@justeat/f-trak >=0.6.0
node ^12 || ^14 || ^16
packages/components/organisms/f-status-banner/package.json
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/pages/f-account-info/package.json
vuelidate 0.7.6
@vue/cli-plugin-babel 4.5.15
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/pages/f-checkout/package.json
axios 0.21.2
jwt-decode 3.1.2
vue-scrollto 2.20.0
vuelidate 0.7.6
@vue/cli-plugin-babel 4.5.16
@vue/test-utils 1.0.3
@justeat/browserslist-config-fozzie >=1.1.1
vuex 3.5.1
node ^12 || ^14 || ^16
packages/components/pages/f-contact-preferences/package.json
@vue/cli-plugin-babel 4.5.16
@justeat/browserslist-config-fozzie >=1.2.0
vuex >=3.5.1
node ^12 || ^14 || ^16
packages/components/pages/f-loyalty/package.json
jwt-decode 3.1.2
@braze/web-sdk 3.3.0
@justeat/f-trak 0.x
@vue/cli-plugin-babel 4.5.16
faker 5.5.3
@justeat/browserslist-config-fozzie >=1.2.0
@justeat/f-trak 0.x
@braze/web-sdk 3.3.0
node ^12 || ^14 || ^16
packages/components/pages/f-mfa/package.json
@vue/cli-plugin-babel 4.5.15
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/pages/f-offers/package.json
axios 0.21.2
jwt-decode 3.1.2
@justeat/f-trak 0.x
@vue/cli-plugin-babel 4.5.16
@justeat/browserslist-config-fozzie >=1.2.0
@justeat/f-trak 0.x
@braze/web-sdk 3.3.0
js-cookie 2.2.1
vuex >=3.5.1
node ^12 || ^14 || ^16
packages/components/pages/f-registration/package.json
vuelidate 0.7.6
@vue/cli-plugin-babel 4.5.8
@justeat/browserslist-config-fozzie >=1.1.1
node ^12 || ^14 || ^16
packages/components/pages/f-takeawaypay-activation/package.json
axios 0.21.2
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/components/templates/f-template-subnav/package.json
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/services/f-analytics/package.json
crypto-js 4.0.0
jwt-decode ^3.1.2
universal-cookie ^4.0.4
jest-when ^3.3.1
node ^12 || ^14 || ^16
packages/services/f-braze-adapter/package.json
date-fns 2.16.1
lodash.findindex 4.6.0
lodash.orderby 4.6.0
lodash.startswith 4.2.1
lodash.uniq 4.5.0
mockdate 3.0.2
js-cookie >=2.2.1
@braze/web-sdk >=3.3.0
node ^12 || ^14 || ^16
packages/services/f-compatibility/package.json
bowser 2.11.0
node ^12 || ^14 || ^16
packages/services/f-consumer-oidc/package.json
jest 25.4.0
js-cookie >=2.2.1
node ^12 || ^14 || ^16
packages/services/f-feature-management-vue/package.json
vue-demi 0.11.4
jest 25.4.0
vue ^3.0.0
node ^12 || ^14 || ^16
packages/services/f-feature-management/package.json
@justeat/feature-management ^1.0.0
crypto-js 4.1.1
jest 25.4.0
jest-mock-axios 4.4.1
node ^12 || ^14 || ^16
packages/services/f-globalisation/package.json
vue-i18n 8.0.0
node ^12 || ^14 || ^16
packages/services/f-http/package.json
axios 0.21.2
axios-mock-adapter 1.19.0
node ^12 || ^14 || ^16
packages/services/f-performance/package.json
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/services/f-services/package.json
lodash-es 4.17.21
window-or-global 1.0.1
jest 26.6.3
axios >=0.21.1
node ^12 || ^14 || ^16
packages/services/f-statistics/package.json
node ^12 || ^14 || ^16
packages/services/f-test-data-creator/package.json
@justeat/browserslist-config-fozzie >=1.2.0
node ^12 || ^14 || ^16
packages/services/f-wdio-utils/package.json
@axe-core/webdriverio 4.4.3
node ^12 || ^14 || ^16
packages/storybook/package.json
http-server 0.12.3
vue 2.6.10
vue-i18n 8.22.1
vue-router 3.5.2
@kazupon/vue-i18n-loader 0.5.0
@storybook/addon-a11y 6.4.9
@storybook/addon-essentials 6.4.9
@storybook/addon-knobs 6.4.0
@storybook/addon-links 6.4.9
@storybook/storybook-deployer 2.8.12
@storybook/theming 6.4.9
@storybook/vue 6.4.9
cookie-universal 2.1.4
npm-run-all 4.1.5
path 0.12.7
postcss-assets 5.0.0
storybook-vue-router 1.0.7
vue-cli-plugin-storybook 2.0.0
node ^12 || ^14 || ^16
packages/tools/f-vue-icons/package.json
babel-helper-vue-jsx-merge-props 2.0.3
@justeat/f-icons 4.11.0
bili 3.4.2
fs-extra 9.0.1
lodash.kebabcase 4.1.1
marked 1.2.5
pascal-case 3.1.2
poi 12.10.3
prismjs 1.27.0
node ^12 || ^14 || ^16
packages/tools/fozzie/package.json
@justeat/pie-design-tokens 3.2.0
@babel/cli 7.18.10
@babel/core 7.19.1
@babel/eslint-parser 7.19.1
@babel/preset-env 7.19.1
@justeat/browserslist-config-fozzie 2.0.0
@justeat/eslint-config-fozzie 5.1.0
@justeat/f-dom 1.1.0
@justeat/f-logger 0.8.1
@justeat/js-test-buddy 0.4.1
@justeat/stylelint-config-fozzie 3.2.0
autoprefixer 10.4.12
caniuse-lite 1.0.30001425
concurrently 7.5.0
coveralls 3.1.1
cssnano 5.1.13
eslint 8.26.0
eslint-plugin-import 2.26.0
fontfaceobserver 2.3.0
glob 8.0.3
jest 29.2.2
jest-environment-jsdom 29.2.2
postcss 8.4.18
postcss-cli 10.0.0
sass 1.55.0
sass-true 6.1.0
stylelint 14.14.0
stylelint-config-standard-scss 5.0.0
node ^12 || ^14 || ^16
babel-core 7.0.0-bridge.0
packages/tools/generator-component/package.json
gulp-rename 1.2.2
lodash 4.17.21
update-notifier 5.0.1
yeoman-generator 4.12.0
@justeat/browserslist-config-fozzie >=1.1.1
node ^12 || ^14 || ^16
Hi all, I've noticed that this rule within f-button
is causing issues because it has a higher specificity than most four other rules, you can see an example of this in our storybook docs in the mega-modal where we're using f-button but the icon style overrides the width and height.
I'm not sure how best to fix this as the SVG which the CSS is targeting isn't actually in f-button
but rather it's provided via a slot. Normally I'd create a new class and apply it to the SVG.
Any help on this would be appreciated.
It looks like f-header was published using the previous version of f-vue-icons
resulting in GiftIcon
returning undefined. I'll look at getting a new version published and adding yarn
as a prepublish step to ensure the latest packages are available when building.
Following the recent project restructure, the homepage
field in package.json
files needs to be updated to include the new paths.
I noticed the issue when running yarn upgrade-interactive --latest
in a project and saw that the listed URLs for fozzie-components packages are now out of date.
When importing the f-footer css into a project classes they can override any existing styles, such as the c-icon--chevron class in the LinkList.vue
component, which overrides the style set within Fozzie and causes all chevron icons to become 16x9px.
Could we look at using CSS modules in our shared components in order to prevent styles from affecting others around them? CSS modules can be enabled by adding the module
attribute to the style
tag (<style module>
).
I think we've briefly discussed scoped CSS vs CSS modules in the past and were leaning more towards CSS modules as the styles don't allow styles to leak down to child components.
This blog post describes the two approaches really well.
I can put together a PR to test with if that's OK?
Storybook has an implementation of vue.config.js
that looks up a relative path for common.scss
(Used to pull in the appropriate fozzie SASS component):
config.module
.rule('scss-importer')
.test(/\.scss$/)
.use('importer')
.loader('sass-loader')
.options({
importer: magicImporter(),
data: '@import "../assets/scss/common.scss";' // ๐
});
As this path is relative, any components nested beyond one level in src fails to compile as common.scss
cannot be found.
For example:
This issue is compounded by the fact that the Node process does not change directory whilst compiling so __dirname
and process.cwd()
always reflect the storybook component folder.
So far I've attempted the following fixes:
path.resolve
__dirname
and the relative path. Failed as __dirname
resolves to the storybook directorypath.resolve
process.cwd()
and the relative path. Failed as process.cwd()
resolves to the storybook directory@
to the relative path and add a webpack alias to map to src
. Fails as src
is looked up in the current directory (e.g. components).common.scss
.Just making this list as a checklist for releasing the v1 branch (currently in beta here).
Just testing the f-cookie-banner out in a plain Vue.js project and I'm seeing this error when pressing the accept buttons:
It appears to be caused by the fact we're assuming that this.$cookies
is available in the consuming application.
I think this might be a convention in our Nuxt project, but it isn't in place in some of our other non-nuxt projects?
In our other npm packages, such as OIDC, we are using the js-cookie
npm package. Should we be using that instead? Or providing some sort of fallback?
We recently encountered while updating the Fozzie components that when updating F-Button to v5.0.0, the F-Mega-Modal still has a Dev Dependency on F-Button 4.5.0 causing errors for conflict or inconsistency in the package versions specified in the project's dependencies
.
As a work around we have manually overridden the version of the DevDependency in package.json
for F-Button as follows:
"dependencies": {
"@justeat/f-mega-modal": "7.4.1",
"@justeat/f-button": "5.0.0"
},
"overrides": {
"@justeat/f-mega-modal": {
"@justeat/f-button": "5.0.0"
}
}
Just wanted to bring to notice so it can be updated. Meanwhile, other teams can apply this overrides
as mentioned above
Dependencies which are not needed in order to use the component should be moved to dev dependencies
Observation:
f-user-message build reports bundle size: 278.83 KB minified, 70kb gzipped.
That seems excessive considering it is a single vue component and does not contain images or content.
Task:
Optimise bundle size.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.