@skyscanner/backpack-web 6.1.0 → 7.0.0-alpha.1

package/bpk-component-infinite-scroll/src/withInfiniteScroll-test.flow.js

@@ -1,102 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * 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.
- */
-
-/* @flow strict */
-
-import React, { Component } from 'react';
-
-import withInfiniteScroll from './withInfiniteScroll';
-import { ArrayDataSource } from './DataSource';
-
-const elementsArray = [];
-
-for (let i = 0; i < 5; i += 1) {
-  elementsArray.push(`Element ${i}`);
-}
-
-type ListProps = {
-  elements: Array<any>,
-  'aria-label': string,
-  onClick?: ?() => void,
-};
-
-// We have to turn this into a function as the HOC ignores the props of a function
-// another approach could be to put these props in the HOC as they aren't passed through.
-/* eslint-disable react/prefer-stateless-function */
-class List extends Component<ListProps> {
-  static defaultProps: {
-    onClick: null,
-  };
-
-  render() {
-    const { elements, ...rest } = this.props;
-    return (
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      <div id="list" {...rest}>
-        {elements.forEach((element) => (
-          <div key={element}>{element}</div>
-        ))}
-      </div>
-    );
-  }
-}
-/* eslint-enable react/prefer-stateless-function */
-
-List.defaultProps = {
-  onClick: null,
-};
-
-const InfiniteList = withInfiniteScroll(List);
-
-(() => (
-  <React.Fragment>
-    {/* $FlowExpectedError[prop-missing] */}
-    <InfiniteList dataSource={new ArrayDataSource([])} />
-
-    {/* $FlowExpectedError[prop-missing] */}
-    <InfiniteList aria-label="infinite list" />
-
-    {/* $FlowExpectedError[incompatible-type] */}
-    <InfiniteList dataSource={new ArrayDataSource([])} aria-label={null} />
-
-    {/* Test default props */}
-    <InfiniteList
-      dataSource={new ArrayDataSource([])}
-      aria-label="infinite list"
-    />
-
-    {/* Test all props */}
-    <InfiniteList
-      dataSource={new ArrayDataSource([])}
-      aria-label="infinite list"
-      onClick={() => {}}
-      elementsPerScroll={5}
-      initiallyLoadedElements={1}
-      loaderIntersectionTrigger="small"
-      onScroll={(evt) => {}} // eslint-disable-line no-unused-vars
-      onScrollFinished={(evt) => {}} // eslint-disable-line no-unused-vars
-      renderLoadingComponent={() => <div />}
-      renderSeeMoreComponent={(onClick) => (
-        <button type="button" onClick={onClick}>
-          Button
-        </button>
-      )}
-      seeMoreAfter={5}
-    />
-  </React.Fragment>
-))();

package/bpk-component-infinite-scroll/src/withInfiniteScroll.js

@@ -1,298 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * 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.
- */
-
-/* @flow strict */
-
-import React, {
-  Component,
-  type Element,
-  type Config,
-  type AbstractComponent,
-} from 'react';
-import PropTypes from 'prop-types';
-import omit from 'lodash/omit';
-import extend from 'lodash/extend';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import './intersection-observer';
-import DataSource from './DataSource';
-import STYLES from './withInfiniteScroll.module.scss';
-
-const getClassNames = cssModules(STYLES);
-
-type ScrollEvent = {
-  currentIndex: number,
-};
-
-type ScrollFinishedEvent = {
-  totalNumberElements: number,
-};
-
-export type Props = {
-  dataSource: DataSource<any>,
-  elementsPerScroll: number,
-  initiallyLoadedElements: number,
-  loaderIntersectionTrigger: ?('small' | 'half' | 'full'),
-  onScroll: ?(o: ScrollEvent) => void,
-  onScrollFinished: ?(o: ScrollFinishedEvent) => void,
-  renderLoadingComponent: ?() => Element<any>,
-  renderSeeMoreComponent: ?({
-    onSeeMoreClick: (event: SyntheticEvent<any>) => mixed,
-  }) => Element<any>,
-  seeMoreAfter: ?number,
-};
-
-export type State = {
-  index: number,
-  elementsToRender: Array<any>,
-  isListFinished: boolean,
-  showSeeMore: boolean,
-};
-
-type ExtendedProps = {
-  elements: Array<any>,
-};
-
-const propTypes = {
-  initiallyLoadedElements: PropTypes.number,
-  elementsPerScroll: PropTypes.number,
-  dataSource: PropTypes.instanceOf(DataSource).isRequired,
-  loaderIntersectionTrigger: PropTypes.oneOf(['small', 'half', 'full']),
-  onScroll: PropTypes.func,
-  onScrollFinished: PropTypes.func,
-  renderLoadingComponent: PropTypes.func,
-  renderSeeMoreComponent: PropTypes.func,
-  seeMoreAfter: PropTypes.number,
-};
-
-const defaultProps = {
-  initiallyLoadedElements: 5,
-  elementsPerScroll: 5,
-  loaderIntersectionTrigger: 'full',
-  onScroll: null,
-  onScrollFinished: null,
-  renderLoadingComponent: null,
-  renderSeeMoreComponent: null,
-  seeMoreAfter: null,
-};
-
-type PropsWithDefault = Config<Props, typeof defaultProps>;
-
-const withInfiniteScroll = <T: ExtendedProps>(
-  ComponentToExtend: AbstractComponent<T>,
-): AbstractComponent<PropsWithDefault & $Diff<T, ExtendedProps>> =>
-  class WithInfiniteScroll extends Component<Props, State> {
-    handleIntersection: IntersectionObserverCallback;
-
-    handleKeyPress: (e: SyntheticKeyboardEvent<HTMLButtonElement>) => void;
-
-    handleSeeMoreClick: (e: SyntheticEvent<HTMLButtonElement>) => void;
-
-    observer: IntersectionObserver;
-
-    sentinel: ?HTMLElement;
-
-    static propTypes = { ...propTypes };
-
-    static defaultProps = { ...defaultProps };
-
-    constructor(props: Props) {
-      super(props);
-
-      this.state = {
-        index: 0,
-        elementsToRender: [],
-        isListFinished: false,
-        showSeeMore: false,
-      };
-
-      this.props.dataSource.onDataChange(this.updateData);
-
-      const thresholds = {
-        small: 0.01,
-        half: 0.5,
-        full: 0.99, // using 0.99 instead of 1 to avoid problems with float precision in IE11
-      };
-      const displaySize = this.props.loaderIntersectionTrigger || 'full';
-      this.observer = new IntersectionObserver(this.handleIntersection, {
-        threshold: thresholds[displaySize] || thresholds.full,
-      });
-    }
-
-    componentDidMount() {
-      this.fetchItems({
-        elementsPerScroll: this.props.initiallyLoadedElements,
-      }).then((newState) => {
-        this.setState(newState);
-      });
-    }
-
-    componentDidUpdate(prevProps) {
-      if (this.sentinel && this.state.index > 0) {
-        this.observer.observe(this.sentinel);
-      }
-
-      if (this.props.dataSource !== prevProps.dataSource) {
-        prevProps.dataSource.removeListener(this.updateData);
-        this.props.dataSource.onDataChange(this.updateData);
-        this.fetchItems({
-          index: 0,
-          elementsPerScroll: this.props.elementsPerScroll,
-          elementsToRender: [],
-        }).then((newState) => this.setStateAfterDsUpdate(newState));
-      }
-    }
-
-    componentWillUnmount() {
-      this.props.dataSource.removeListener(this.updateData);
-      if (this.sentinel) {
-        this.observer.unobserve(this.sentinel);
-      }
-    }
-
-    setStateAfterDsUpdate(newState: State) {
-      // After a data source update (calling updateData in the data source or changing the dataSource prop)
-      // all visible data is fetched again (from 0 to current index) to update the list with the new data.
-      // If after this call there is no elementsToRender or index present in state
-      // it means the new data source has no items and we need to
-      // reset the list, which we do by setting `elementsToRender` to `[]` and `index` to `0`
-      const { elementsToRender, index } = newState;
-      this.setState({
-        ...newState,
-        elementsToRender: elementsToRender || [],
-        index: index || 0,
-      });
-    }
-
-    updateData = () => {
-      const { index } = this.state;
-      // This means updateData was called before any data was loaded, e.g.
-      // An ArrayDataSource initialized empty and then changed latter on via `updateData`
-      // In this case we want to load new data and not just replace the old one.
-      // "See More After" should also be computed again in this case.
-      const isFirstLoad = index < this.props.elementsPerScroll;
-      this.fetchItems({
-        index: 0,
-        elementsPerScroll: isFirstLoad ? this.props.elementsPerScroll : index,
-        elementsToRender: [],
-        computeShowSeeMore: isFirstLoad,
-      }).then((newState) => this.setStateAfterDsUpdate(newState));
-    };
-
-    fetchItems(config): Promise<$Shape<State>> {
-      const { onScrollFinished, seeMoreAfter } = this.props;
-      const { computeShowSeeMore, elementsPerScroll, elementsToRender, index } =
-        extend(
-          {
-            index: this.state.index,
-            elementsPerScroll: this.props.elementsPerScroll,
-            elementsToRender: this.state.elementsToRender,
-            computeShowSeeMore: true,
-          },
-          config,
-        );
-
-      return this.props.dataSource
-        .fetchItems(index, elementsPerScroll)
-        .then((nextElements) => {
-          let result = {
-            isListFinished: true,
-          };
-          if (nextElements && nextElements.length > 0) {
-            const nextIndex = index + elementsPerScroll;
-            result = {
-              index: nextIndex,
-              elementsToRender: (elementsToRender || []).concat(nextElements),
-              showSeeMore: computeShowSeeMore
-                ? seeMoreAfter === index / elementsPerScroll
-                : this.state.showSeeMore,
-              isListFinished: nextElements.length < elementsPerScroll,
-            };
-          }
-          if (onScrollFinished && result.isListFinished) {
-            onScrollFinished({
-              totalNumberElements: elementsToRender.length,
-            });
-          }
-          return result;
-        });
-    }
-
-    handleIntersection = (entries: Array<IntersectionObserverEntry>) => {
-      const { onScroll } = this.props;
-      const entry = entries[0];
-      if (entry.isIntersecting) {
-        if (this.sentinel) {
-          this.observer.unobserve(this.sentinel);
-        }
-        if (onScroll) {
-          onScroll({ currentIndex: this.state.index });
-        }
-        return this.fetchItems().then((newState) => {
-          this.setState(newState);
-        });
-      }
-      return Promise.resolve();
-    };
-
-    handleSeeMoreClick = () => {
-      this.fetchItems().then((newState) => {
-        this.setState(newState);
-      });
-    };
-
-    render() {
-      const { elementsToRender, isListFinished, showSeeMore } = this.state;
-      const { renderLoadingComponent, renderSeeMoreComponent } = this.props;
-
-      const rest = omit(this.props, Object.keys(propTypes));
-
-      let loadingOrButton = null;
-
-      if (!isListFinished) {
-        if (showSeeMore && renderSeeMoreComponent) {
-          loadingOrButton = renderSeeMoreComponent({
-            onSeeMoreClick: this.handleSeeMoreClick,
-          });
-        } else {
-          loadingOrButton = (
-            <div
-              ref={(spinner) => {
-                this.sentinel = spinner;
-              }}
-              className={
-                renderLoadingComponent ? null : getClassNames('bpk-sentinel')
-              }
-            >
-              {renderLoadingComponent && renderLoadingComponent()}
-            </div>
-          );
-        }
-      }
-
-      return (
-        <div>
-          <ComponentToExtend {...rest} elements={elementsToRender} />
-          {loadingOrButton}
-        </div>
-      );
-    }
-  };
-
-export default withInfiniteScroll;

package/bpk-component-infinite-scroll/src/withInfiniteScroll.module.css

@@ -1,18 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- * 
- * Copyright 2016 Skyscanner Ltd
- * 
- * 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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-sentinel{width:100%;height:1.5rem}

package/bpk-component-infinite-scroll/src/withInfiniteScroll.module.scss

@@ -1,25 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * 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.
- */
-
-@import '~bpk-mixins/index';
-
-.bpk-sentinel {
-  // this is necessary for when the user doesn't define a custom loading component
-  width: 100%;
-  height: $bpk-spacing-base;
-}

package/bpk-component-input/README.md

@@ -1,121 +0,0 @@
-# bpk-component-input
-
-> Backpack input component.
-
-## Installation
-
-```sh
-npm install bpk-component-input --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import BpkInput, { INPUT_TYPES, CLEAR_BUTTON_MODES } from 'bpk-component-input';
-
-export default () => (
-  <BpkInput
-    id="origin"
-    type={INPUT_TYPES.text}
-    name="origin"
-    value="Edinburgh"
-    onChange={() => console.log('input changed!')}
-    placeholder="Country, city or airport"
-    clearButtonMode={CLEAR_BUTTON_MODES.whileEditing}
-    clearButtonLabel="Clear"
-    onClear={() => console.log('input cleared!')}
-  />
-);
-```
-
-## Props
-
-| Property         | PropType             | Required                  | Default Value            |
-| ---------------- | -------------------------- | ------------------- | ------------------------ |
-| id               | string                     | true                | -                        |
-| name             | string                     | true                | -                        |
-| type             | INPUT_TYPES (one of)       | false               | INPUT_TYPES.text         |
-| value            | string                     | true                | -                        |
-| clearButtonMode  | CLEAR_BUTTON_MODES (one of)| false               | CLEAR_BUTTON_MODES.never |
-| clearButtonLabel | string                     | if clearable={true} | null                     |
-| dockedFirst      | bool                       | false               | false                    |
-| dockedLast       | bool                       | false               | false                    |
-| dockedMiddle     | bool                       | false               | false                    |
-| inputRef         | func                       | false               | null                     |
-| large            | bool                       | false               | false                    |
-| onClear          | func                       | if clearable={true} | null                     |
-| valid            | bool                       | false               | null                     |
-
-Additionally, all native `<input />` attributes such as `placeholder` and `onChange` are supported.
-
-**Note:** When `clearButtonMode` is set to `always`, validity icons will not appear.
-
-### withOpenEvents
-
-The `withOpenEvents` higher-order component encapsulates input event handlers for opening popovers or modals.
-
-The `onOpen` callback is called on the following events:
-
-* click
-* focus
-* touchend
-* keydown (Enter key)
-* keyup (Space key)
-
-You can still attach custom handlers for these events as they will still be called. All other key events are prevented.
-
-> It is important you pass the `isOpen` prop, as it is necessary to work around an IE bug.
-
-| Property        | PropType             | Required  | Default Value       |
-| --------------- | -------------------- | --------- | ------------------- |
-| isOpen          | bool                 | false     | false               |
-| onOpen          | func                 | false     | null                |
-| hasTouchSupport | bool                 | false     | (feature detection) |
-
-```js
-import React from 'react';
-import BpkInput, { withOpenEvents } from 'bpk-component-input';
-import BpkPopover from 'bpk-component-popover';
-
-const EnhancedInput = withOpenEvents(BpkInput);
-
-export default () => {
-  constructor() {
-    super();
-
-    this.state = { isOpen: false };
-  }
-
-  onOpen = () => {
-    this.setState({ isOpen: true });
-  }
-
-  onClose = () => {
-    this.setState({ isOpen: false });
-  }
-
-  render() {
-    return (
-      <BpkPopover
-        id="popover"
-        target={
-          <EnhancedInput
-            id="input"
-            value="An input?"
-            isOpen={this.state.isOpen}
-            onOpen={this.onOpen}
-            onChange={() => null}
-          />
-        }
-        onClose={this.onClose}
-        isOpen={this.state.isOpen}
-        label="Popover"
-        closeButtonText="Close"
-      >
-        A popover!
-      </BpkPopover>
-    );
-  }
-}
-```

package/bpk-component-input/index.js

@@ -1,50 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * 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.
- */
-/* @flow strict */
-
-import BpkInput from './src/BpkInput';
-import withOpenEvents from './src/withOpenEvents';
-import {
-  propTypes,
-  defaultProps,
-  CLEAR_BUTTON_MODES,
-  INPUT_TYPES as TYPES,
-  type Props,
-} from './src/common-types';
-import themeAttributes from './src/themeAttributes';
-
-export default BpkInput;
-
-// TODO: Remove these in the next major
-const DEPRECATED_INPUT_TYPES = {
-  TEXT: 'text',
-  EMAIL: 'email',
-  NUMBER: 'number',
-  PASSWORD: 'password',
-  TEL: 'tel',
-};
-
-export type BpkInputProps = Props;
-export const INPUT_TYPES = { ...DEPRECATED_INPUT_TYPES, ...TYPES };
-export {
-  propTypes,
-  defaultProps,
-  withOpenEvents,
-  CLEAR_BUTTON_MODES,
-  themeAttributes,
-};

package/bpk-component-input/package.json

@@ -1,30 +0,0 @@
-{
-  "name": "bpk-component-input",
-  "version": "6.1.17",
-  "description": "Backpack input component.",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:Skyscanner/backpack.git"
-  },
-  "author": "Backpack Design System <backpack@skyscanner.net>",
-  "main": "index.js",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
-  "dependencies": {
-    "bpk-component-icon": "^9.2.13",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "bpk-component-banner-alert": "^6.1.17",
-    "bpk-component-label": "^5.1.12",
-    "bpk-storybook-utils": "^1.1.11"
-  }
-}