kayak / bandit-pouch

Common React components and utilities

bandit-pouch

Common React components and utilities

Installing

Using npm:

$ npm install bandit-pouch

Documentation

Documentation is available here: https://kayak.github.io/bandit-pouch/

License

Copyright 2016 KAYAK Germany, GmbH

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Crafted with ♥ in Berlin.

bandit-pouch's Issues

Set classNamePrefix prop for Select component so that we can style it with SASS/CSS

Right now it's hard to style pouch's select with SASS/CSS, given class names generated by CSS in JS are quite random. We can leverage on classNamePrefix prop to be able to style it in CSS/SASS. If you provide the classNamePrefix prop to react-select, all inner elements will be given a className based on the one you have provided.

For example, given classNamePrefix="react-select", the DOM would roughly look like this:

div class="react-select">
div class="react-select__control">
div class="react-select__value-container">...
div class="react-select__indicators">...
/div>
div class="react-select__menu">
div class="react-select__menu-list">
div class="react-select__option">...
/div>
/div>
/div>

Documentation on https://react-select.com/upgrade-guide#new-styles-api.

POST, PUT and PATCH Requests do not send body

Month picker value parsing is invalid

Set hide: true in popperConfig modifiers in ui/Tooltip.js

https://popper.js.org/docs/v1/#modifiers..hide

Without hide: true, we see a lot of errors in the console:

preventOverflow modifier is required by hide modifier in order to work, be sure to include it before hide!

Add vertical margin between section field array elements

Could also not use rounded corners.

Improve ErrorPage and LoadingWrapper component API

Add status code and message parameters to ErrorPage and add styles.
LoadingWrapper component should accept error parameter as an object or a string in order to conform with the new ErrorPage API.

Bump react-select to v2

Bump react-select to v2.

Add DatePicker component

Ensure code can be inspected in an IDE

When using bandit-pouch functions/components in PyCharm (or another IDE), it would be good to see the non-transpiled version of the code, otherwise it is very hard to read and understand.

Form field proptypes should also include object as a valid type to pass as in as the help prop

The Redux Form field proptypes should also include object as a valid type to pass as in as the help prop, as passing in an object (e.g. a JSX component) is valid.

Date picker month and year formatting

Looking through the examples I found that the month/year wrapper in the opened date picker shows values different from the actually selected date/s.

Example: https://kayak.github.io/bandit-pouch/?path=/story/forms-daterangepickerfield--with-max-date-as-tomorrow

Investigate whether we can minimise propType redefines when wrapping components

We currently redefine propTypes for components we wrap (e.g. react-select), but in most cases that's not as complete as the wrapped objects' propTypes. Also it's cumbersome to maintain those up to date. Ideally we should be able to destructure all wrapped propTypes on wrappers' propTypes, in order to not redefine them. In some cases, like the fields, we even might have to undefine a few propTypes, such as value and callbacks related to the input interface that redux-form/react-final-form expects. I'm not sure if React supports that well though, so we should give it a try and check whether propType warnings are still being raised when we destructure propTypes into another.

Functions in requests.js do not support passing axiosOptions

The axios requests library supports a wide array of options which are often needed. The request functions right now only let you pass custom headers, but these should accept an axiosOptions object and use these in the requests.

Bump react-boostrap to v4

Bump react-boostrap to v4.

Upgrade font-awesome library

Replace mocha with Jest

Replace mocha with Jest. There are only a few tests so that should be easy.

Add custom Button components

Add the following buttons:

• Add button
• Remove button

Add margin within key value field array elements

Could also not use rounded corners.

Add automatic changelog generation

Right now we have no way of reporting to users what changed between releases. And, although we follow semantic versioning, that's not enough per se. After some research, it seems we can rely on https://github.com/commitizen/cz-cli and https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/standard-changelog projects for automating changelog generation. They adhere to the angular changelog format, which is quite nice. See https://github.com/angular/angular/blob/master/CHANGELOG.md for instance.

There are other tools that try to automate github release creation and what not, but overall that’s the best changelog format I’ve seen. With different sections for breaking changes, bug fixes, features, etc.

Add error states to the form example

RangeField methods not bound

The methods onChange and onBlur in the RangeField component are not bound. This causes the referenced to this.props to raise an exception.

Error messages for validators don't match the type

I've used a min validator like so min(2) and got the following error message displayed:

Remove prop remapping in select component

When we migrated to react-select v2 a remapping of some props was put in place in order to minimise the scope of changes in another projects. It's part of the team consensus that this is causing confusion though. Therefore we should get rid of multi, clearable, creatable and disabled props and favour isMulti, isClearable, isCreatable and isDisabled props instead.

Replace Gatsby with React Storybook

Gatsby is broken and difficult to debug. We are using react/storybook now which is a much better form of docs. Please remove Gatsby and make storybook the default.

Add react-storybook support

React-storybook has become one of the defacto standards for helping documenting available react UI components. It's not not meant to be a replacement for traditional documentation. Instead it offers a playground to explore available UI components and their variations, which is not the nicest experience in our current Gatsby docs.

See some examples on: https://storybook.js.org/examples/

Library improvements

• Add a way to set a default value for CheckboxField
• Change prop types for Tooltip to accept a React component or an element
• Accept custom Error component as a parameter in LoadingWrapper
• ErrorPage component should accept children

Make classname props consistent across components

Most of our components have no standard classnames set, which makes it harder to style them when necessary. Also not all of them allow custom classnames. Ideally all components would define its classname prop as:

className={classnames('some-standard-component-name', className)}