skyscanner / backpack Goto Github PK

I'm using create-react-app latest, default.

I'm trying to use basic Icon component but I have this:

Failed to compile.

./node_modules/bpk-component-icon/sm/chevron-down.js
Module parse failed: Unexpected token (10:9)
You may need an appropriate loader to handle this file type.
|       props = _objectWithoutProperties(_ref, ["styles"]);
|
|   return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
|     width: "1.125rem",
|     height: "1.125rem"

Just joined a project which uses backpack and it takes an extremely long time to build; around 3~4 minutes. Also, live reloading isn't working. Would like to debug/optimize the build, but am clueless as to how I should go about doing this.

The devDependency lerna was updated from 3.4.1 to 3.4.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

lerna is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The dependency react-native-bpk-component-icon was updated from 1.10.20 to 1.10.21.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-component-icon is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

I have just realised after running the 'create react app', the executables of our dependencies aren't linked (eslint, styling, jest ...).

The issue is that the folder ./node_modules/.bin only has the react-scripts bin.

When we should have:
eslint, jest, jsonlint, uglifyjs ... all of the binaries for our npm packages.

To be able to fix it I have to run npm install after the installation.

For example:
This is the official backpack implementation. In backpack, the package.json for scss linting, I have a script with the following command:

lint:scss": "stylelint 'src/**/*.scss' --syntax scss",

This command won't work until we run npm install again or add the full path:

lint:scss": "node_modules/stylelint/bin/stylelint 'src/**/*.scss' --syntax scss",

Are you aware about this issue or do you have a work around?

The devDependency react-native-bpk-component-alert was updated from 2.0.10 to 2.0.11.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-component-alert is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Really like your implementation, but perhaps you could remove sass? Pass the json values through custom-properties on CSSNext plugin of PostCSS?

The devDependency react-native-bpk-component-panel was updated from 1.0.34 to 1.0.35.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-component-panel is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency semver was updated from 5.5.1 to 5.6.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

semver is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Context:
Backpack modal does not close by single click on outside modal's box. This is intermittent

Repro steps:

• go to http://backpack.prod.aws.skyscnr.com/components/web/modals/
• Open modal
• Quickly click outside of modal box

Note: Reproduced in chrome and firefox

The dependency date-fns was updated from 1.29.0 to 1.30.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

date-fns is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

The dependency react-native-bpk-theming was updated from 1.0.86 to 1.0.87.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-theming is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

The devDependency copy-webpack-plugin was updated from 4.5.2 to 4.5.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

copy-webpack-plugin is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Importing .css files has been deprecated in newer versions of Node LibSass.

Renaming the .css files with .scss should fix this, and remove the deprecation warning without any side effects.

Running

npm install -g create-react-app

create-react-app my-app --scripts-version=backpack-react-scripts
cd my-app
npm start

returns the following error

Failed to compile.

./~/bpk-react-utils/src/withDefaultProps.js
Module not found: Can't resolve 'recompose/wrapDisplayName' in '~/my-app/node_modules/bpk-react-utils/src'

This is happening after today's new release, previous release worked just fine.

Steps to reproduce

1. Go to https://backpack.github.io/components/web/badge/
2. Click on 'Visually centered' anchor link

Actual

Document location includes the anchor but the document does not scroll. Clicking a second time on the same anchor link will scroll to the anchor.

Expected

First click scrolls to the anchor. (And document location still includes the anchor)

Notes

I suspect the router to interfere and do something like e.preventDefault(). I've only looked at it with minified code so haven't done a real debugging session.

The dependency react-virtualized was updated from 9.20.1 to 9.21.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-virtualized is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

The dependency react-native-bpk-styles was updated from 1.1.26 to 1.1.27.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-styles is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

The devDependency react-native-bpk-component-badge was updated from 2.1.2 to 2.1.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-component-badge is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency react-native-bpk-component-chip was updated from 3.1.8 to 3.1.9.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-component-chip is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency react-native-bpk-component-carousel was updated from 1.0.43 to 1.0.44.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-component-carousel is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency husky was updated from 1.1.1 to 1.1.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

husky is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

This is a question instead of reporting a bug. Since there is less resource I can seek for help, so I put my question here.

Note: If you are looking to integrate Backpack components into an existing project, be aware that components are published uncompiled which means you'll need to accommodate for this in your webpack config.

I'm trying to integrate backpage into an existing project. But it fails

I think I miss some important step as what it mentions in note. Can anyone advise me how to accommodate for this in my webpack config?

There's a few bugs with the calendar (and possibly other components) if users are using custom colours. I don't know how much you want to make these work for various accessibility needs, but you can generally get to a point where text doesn't disappear without much work. The point isn't generally to make the interface perfect, but to avoid entire elements disappearing.

Different issues occur depending on if you're using a dark or light background. Examples of each:

Light background:

In this screenshot, the 25th is the selected month - this isn't clear as only the bolding is shown, not the solid dot.

Dark background:

In this screenshot, none of the text or selected months are visible.

If you'd like more information on using custom colours, we wrote a blog about how we fixed our buttons when used with custom colours.

You might also find Marian Foley's blog on how she uses custom colours interesting.

Let me know if you'd like any more information.

The dependency react-native-bpk-component-carousel-indicator was updated from 1.0.43 to 1.0.44.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-component-carousel-indicator is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

It seems like the component packages are not being transpiled into ES5, and I can't seem to ignore them either, which renders me unable to do any unit testing on any components.

Could this be something that I'm doing wrong or backpack's issue?

I have tried testing with different starterkit

create-react-app my-app --scripts-version=backpack-react-scripts
create-react-app

I'm getting error message of

"Syntax Error: 'import' ....'

The dependency react-native-bpk-component-touchable-overlay was updated from 1.1.2 to 1.1.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-component-touchable-overlay is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

There have been updates to the enzyme monorepo:

• • The devDependency enzyme was updated from 3.5.1 to 3.6.0.

• The devDependency enzyme-adapter-react-16 was updated from 1.4.0 to 1.5.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency lerna was updated from 3.4.0 to 3.4.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

lerna is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

The dependency react-native-bpk-component-animate-height was updated from 2.0.55 to 2.0.56.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-component-animate-height is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

The dependency react-native-bpk-component-touchable-native-feedback was updated from 1.1.39 to 1.1.40.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-component-touchable-native-feedback is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

It's possible to get in to an edge case where the calendar component thinks the focus / active date is in a different position to where it actually is.

See video:

Steps to reproduce:

• Select / focus a date.
• Use mouse to focus another date, click dragging off it so that it doesn't select.
• Confirm visual focus is on a new date
• Use arrow keys to move to a new date - it will move from where the first date was, not where the current focus is.

Tested on Chrome 60.0.3112 on OSX

I've noticed with your implementation that whenever e.g. you create a new component, it creates a new version for all of your other packages. Are you aware this is an issue or are you happy for it to do that?

The devDependency react-native-bpk-component-card was updated from 1.3.2 to 1.3.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-component-card is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The dependency react-native-bpk-component-button-link was updated from 4.0.9 to 4.0.10.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-component-button-link is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

Hi, I'm having trouble using bpk-component-popover because it ships with flowtypes in the .js files.

It would've been simple to strip them with a babel loader I guess, but in a TS project we do not have the option of using loaders. Is there any way you can bundle pure js files and move flow definitions to a separate file?

Hello!

We're experiencing an issue with bpk-component-modal on iOS devices. When the modal is open, tapping on its background causes it to flicker (see zipped video). The modals in https://backpack.github.io/components/web/modals also exhibit this problem on iOS.

Modal tap Flicker.mov.zip

The dependency react-native-bpk-component-text was updated from 4.0.2 to 4.0.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-component-text is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

The country flag doesn't change after submitting a country / currency change in the flights result page.

PS: Don't know if this repo is the correct one, please forward it to the correct one if this is not correct.

Hi, according to https://backpack.github.io/components/web/modals, id in props is a required field, however, in the usage section of the doc, it doesn't pass id to the component.

Besides, may I ask how id works on modal component? looks like it is only used in aria-labelledby?

The focus outline for individual dates is partially obscured. It's also clipping by about 1px on the left and right hand side.

Screenshot:

Tested on Chrome 60.0.31 on OSx

The dependency react-native-bpk-component-button was updated from 8.0.10 to 8.0.11.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-component-button is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

BpkTextInput won't allow typing anything. Anything typed in will be overridden by blank.

react: 16.5.0
react-native: sdk 31

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Replaced the old Node.js version in your .nvmrc with the new one
• The engines config in 1 of your package.json files was updated to the new Node.js version

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

The devDependency husky was updated from 1.0.1 to 1.1.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

husky is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency react-native-bpk-component-map was updated from 1.0.19 to 1.0.20.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-component-map is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The dependency react-native-bpk-component-flat-list was updated from 3.0.8 to 3.0.9.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-native-bpk-component-flat-list is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

Hello!

All my BpkImages are displaying off centre when I have text align: center on the main element.

You can reproduce this bug from this commit: https://github.com/Divailo/dragonsglenclient/commit/abac575189b6e6f74bbe7da54ecd60f0122e0a43

I think this might be a bug in the component as when I remove text align: center from .App, the images display as expected

Cheers!