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

package/bpk-component-image/src/customPropTypes.js

@@ -1,37 +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 */
-
-// eslint-disable-next-line import/prefer-default-export
-export const widthHeightAspectRatioPropType = (
-  props: Object,
-  propName: string,
-  componentName: string,
-): ?Error => {
-  const usingWidthHeight = props.width && props.height;
-  const usingAspectRatio = !!props.aspectRatio;
-
-  if (!usingWidthHeight && !usingAspectRatio) {
-    return new Error(
-      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. You must either specify "width" and "height" or you must specify "aspectRatio".`,
-    );
-  }
-
-  return null;
-};

package/bpk-component-image/src/withLazyLoading.js

@@ -1,182 +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, { type Node, type ComponentType } from 'react';
-import PropTypes from 'prop-types';
-import throttle from 'lodash/throttle';
-
-import { wrapDisplayName } from '../../bpk-react-utils';
-
-type WithLazyLoadingProps = {
-  className: ?string,
-  style: ?{},
-};
-
-type WithLazyLoadingState = {
-  inView: boolean,
-};
-
-export default function withLazyLoading(
-  Component: ComponentType<any>,
-  documentRef: typeof window,
-): ComponentType<any> {
-  class WithLazyLoading extends React.Component<
-    WithLazyLoadingProps,
-    WithLazyLoadingState,
-  > {
-    checkInView: () => void;
-
-    element: ?HTMLElement;
-
-    isInViewPort: () => boolean;
-
-    placeholderReference: string;
-
-    removeEventListeners: () => void;
-
-    setInView: () => void;
-
-    state: WithLazyLoadingState;
-
-    supportsPassiveEvents: () => boolean;
-
-    static propTypes = {
-      style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-      className: PropTypes.string,
-    };
-
-    static defaultProps = {
-      style: null,
-      className: null,
-    };
-
-    constructor(): void {
-      super();
-
-      this.state = {
-        inView: false,
-      };
-    }
-
-    componentDidMount(): void {
-      documentRef.addEventListener('scroll', this.checkInView, {
-        ...this.getPassiveArgs(),
-      });
-      documentRef.addEventListener('resize', this.checkInView);
-      documentRef.addEventListener('orientationchange', this.checkInView);
-      documentRef.addEventListener('fullscreenchange', this.checkInView);
-      // call checkInView immediately incase the
-      // component is already in view prior to scrolling
-      this.checkInView();
-    }
-
-    componentWillUnmount(): void {
-      this.removeEventListeners();
-    }
-
-    setInView = (): void => {
-      this.setState(() => ({
-        inView: true,
-      }));
-      this.removeEventListeners();
-    };
-
-    getPassiveArgs(): { capture: boolean } {
-      return this.supportsPassiveEvents()
-        ? { capture: true, passive: true }
-        : { capture: true };
-    }
-
-    removeEventListeners = (): void => {
-      documentRef.removeEventListener('scroll', this.checkInView, {
-        ...this.getPassiveArgs(),
-      });
-      documentRef.removeEventListener('resize', this.checkInView);
-      documentRef.removeEventListener('orientationchange', this.checkInView);
-      documentRef.removeEventListener('fullscreenchange', this.checkInView);
-    };
-
-    checkInView = throttle(() => {
-      if (this.isInViewPort()) {
-        this.setInView();
-      }
-    }, 250);
-
-    // This function is taken from modernizr
-    // See https://github.com/modernizr/modernizr
-    supportsPassiveEvents = (): boolean => {
-      let supportsPassiveOption = false;
-      try {
-        const opts = Object.defineProperty({}, 'passive', {
-          get() {
-            supportsPassiveOption = true;
-            return supportsPassiveOption;
-          },
-        });
-        window.addEventListener('test', null, opts);
-        window.removeEventListener('test');
-      } catch (e) {
-        return false;
-      }
-      return supportsPassiveOption;
-    };
-
-    isInViewPort = (): boolean => {
-      if (!this.element) return false;
-      const rect = this.element.getBoundingClientRect();
-
-      const viewPortHeight = Math.max(
-        window.innerHeight,
-        documentRef.documentElement.clientHeight,
-      );
-      const viewPortWidth = Math.max(
-        window.innerWidth,
-        documentRef.documentElement.clientWidth,
-      );
-
-      return (
-        rect.bottom >= 0 &&
-        rect.right >= 0 &&
-        rect.top < viewPortHeight &&
-        rect.left < viewPortWidth
-      );
-    };
-
-    render(): Node {
-      const { className, style, ...rest } = this.props;
-
-      return (
-        <div
-          id={this.placeholderReference}
-          ref={(element) => {
-            this.element = element;
-          }}
-          style={style}
-          className={className}
-        >
-          {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-          <Component inView={this.state.inView} {...rest} />
-        </div>
-      );
-    }
-  }
-  WithLazyLoading.displayName = wrapDisplayName(Component, 'withLazyLoading');
-
-  return WithLazyLoading;
-}

package/bpk-component-image/src/withLoadingBehavior.js

@@ -1,66 +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 */
-
-import React, { type AbstractComponent } from 'react';
-
-import { wrapDisplayName } from '../../bpk-react-utils';
-
-type InjectedProps = {|
-  onLoad: () => mixed,
-  loading: boolean,
-|};
-
-export default function withLoadingBehavior<Config>(
-  Component: AbstractComponent<{| ...Config, ...InjectedProps |}>,
-): AbstractComponent<Config> {
-  class WithLoadingBehavior<C: Config> extends React.Component<
-    C,
-    {| loading: boolean |},
-  > {
-    constructor() {
-      super();
-
-      this.state = {
-        loading: true,
-      };
-    }
-
-    onLoad = () => {
-      this.setState(() => ({
-        loading: false,
-      }));
-    };
-
-    render() {
-      return (
-        <Component
-          onLoad={this.onLoad}
-          loading={this.state.loading}
-          {...this.props}
-        />
-      );
-    }
-  }
-  WithLoadingBehavior.displayName = wrapDisplayName(
-    Component,
-    'withLoadingBehavior',
-  );
-
-  return WithLoadingBehavior;
-}

package/bpk-component-infinite-scroll/README.md

@@ -1,187 +0,0 @@
-# bpk-component-infinite-scroll
-
-> Backpack infinite scroll component.
-
-## Installation
-
-```sh
-npm install bpk-component-infinite-scroll --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import PropTypes from 'prop-types';
-import BpkButton from 'bpk-component-button';
-import BpkSpinner, { SPINNER_TYPES } from 'bpk-component-spinner';
-import withInfiniteScroll, {
-  ArrayDataSource,
-} from 'bpk-component-infinite-scroll';
-
-const SomeList = ({ elements }) => (
-  <div id="list">
-    {elements.map(element => (
-      <div key={element} style={{ height: '50px' }}>
-        {element}
-      </div>
-    ))}
-  </div>
-);
-
-const elementsArray = [
-  'element 1',
-  'element 2',
-  'element 3',
-  'element 4',
-  'element 5',
-  'element 6',
-  'element 7',
-  'element 8',
-  'element 9',
-  'element 10',
-];
-
-const CustomLoading = () => (
-  <div>
-    <BpkSpinner type={SPINNER_TYPES.primary} />
-  </div>
-);
-
-const CustomSeeMore = ({ onSeeMoreClick }) => (
-  <div>
-    <BpkButton onClick={onSeeMoreClick}>See More</BpkButton>
-  </div>
-);
-
-const InfiniteList = withInfiniteScroll(SomeList);
-const dataSource = new ArrayDataSource(elementsArray);
-
-export default () => (
-  <InfiniteList
-    dataSource={dataSource}
-    renderLoadingComponent={CustomLoading}
-    renderSeeMoreComponent={CustomSeeMore}
-    seeMoreAfter={1}
-  />
-);
-```
-
-## Accompanying classes
-
-## DataSource
-
-`DataSource` is a class used by the BpkInfiniteScroll component to fetch items
-and listen for changes in the data and react to it by reloading the current items
-in the list.
-
-### Methods
-
-`fetchItems(index, nElements)`
-
-Called by the `InfiniteScroll` component every time new data is
-requested (by scrolling down) and should return the data starting from `index` plus `nElements` (number of elements). It should return a promise object.
-
-Example:
-
-```js
-fetchItems(0, 5); // should return 5 items starting from position 0
-fetchItems(5, 5); // should return 5 items starting from position 5
-```
-
-_Calling this method directly in the `DataSource` class will result in an error, it should be implemented by the subclass extending `DataSource`._
-
-`onDataChange(cb)`
-
-Adds a new change listener to this `DataSource`, to be called when data is updated. Returns true if added or false otherwise.
-
-`removeListener(cb)`
-
-Removes the callback from the list of change listeners. Returns true if removed or false otherwise.
-
-`triggerListeners(...args)`
-
-Triggers all listeners in response to data changes. This method should be
-used by subclasses to tell the `InfiniteScroll` component it should refresh
-its data.
-
-```js
-import React from 'react';
-import PropTypes from 'prop-types';
-import withInfiniteScroll, { DataSource } from 'bpk-component-infinite-scroll';
-
-const SomeList = ({ elements }) => (
-  <div id="list">
-    {elements.map(element => (
-      <div key={element} style={{ height: '50px' }}>
-        {element}
-      </div>
-    ))}
-  </div>
-);
-
-class RemoteFlightsDataSource extends DataSource {
-  constructor() {
-    super();
-    myWebSocketConnection.on('dataChange', () => {
-      // tell the `InfiniteScroll` component to refresh its data
-      this.triggerListeners();
-    });
-  }
-
-  fetchItems(index, nElements) {
-    return fetch(`https://my-api/flights?start=${index}&count=${nElements}`);
-  }
-}
-
-const InfiniteList = withInfiniteScroll(SomeList);
-
-export default () => (
-  <InfiniteList dataSource={new RemoteFlightsDataSource()} />
-);
-```
-
-## ArrayDataSource
-
-`ArrayDataSource` is a class that extends from `DataSource`. Accepts an array
-as a parameter in the constructor and uses it as source for the infinite scroll.
-
-> See [Usage](#Usage) for an example of this class in use.
-
-### Methods
-
-_refer to the `DataSource` methods section for a list of all methods_
-
-`fetchItems(index, nElements)`
-
-Returns a subset of the array data.
-
-`updateData(newData)`
-
-Updates the internal array and triggers all listeners.
-
-## Props
-
-| Property                | PropType                         | Required | Default Value |
-| ----------------------- | -------------------------------- | -------- | ------------- |
-| dataSource              | instanceOf(DataSource)           | true     | -             |
-| elementsPerScroll       | number                           | false    | 5             |
-| initiallyLoadedElements | number                           | false    | 5             |
-| loaderMinDisplay        | oneOf(['small', 'half', 'full']) | false    | 'full'        |
-| onScroll                | func                             | false    | null          |
-| onScrollFinished        | func                             | false    | null          |
-| renderLoadingComponent  | func                             | false    | null          |
-| renderSeeMoreComponent  | func                             | false    | null          |
-| seeMoreAfter            | number                           | false    | null          |
-
-## `elementsPerScroll`
-
-How many more elements to load every time the user reaches the bottom of the list.
-
-## `initiallyLoadedElements`
-
-How many more elements to load every time the user reaches the bottom of the list.
-
-### `seeMoreAfter`
-
-`seeMoreAfter` is how many scrolls should happen before a 'See more' button is displayed. This only happens once.

package/bpk-component-infinite-scroll/index.js

@@ -1,29 +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 withInfiniteScroll, {
-  type Props as WithInfiniteScrollProps,
-} from './src/withInfiniteScroll';
-
-export { default as DataSource, ArrayDataSource } from './src/DataSource';
-
-export type { WithInfiniteScrollProps };
-
-export default withInfiniteScroll;

package/bpk-component-infinite-scroll/package.json

@@ -1,31 +0,0 @@
-{
-  "name": "bpk-component-infinite-scroll",
-  "version": "4.1.12",
-  "description": "Backpack infinite scroll 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": "5c156b97cb0ba5e75851d3c763334578714c895e",
-  "dependencies": {
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
-    "intersection-observer": "^0.7.0",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "bpk-component-button": "^6.2.7",
-    "bpk-component-list": "^4.0.5",
-    "bpk-component-spinner": "^5.1.12",
-    "bpk-storybook-utils": "^1.1.11"
-  }
-}

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

@@ -1,85 +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 */
-
-class DataSource<T = any> {
-  listeners: Array<() => mixed>;
-
-  triggerListeners: (...args: Array<any>) => void;
-
-  constructor() {
-    this.listeners = [];
-  }
-
-  /* eslint-disable-next-line no-unused-vars, class-methods-use-this */
-  fetchItems(index: number, nElements: number): Promise<Array<T>> {
-    throw new Error('Not implemented');
-  }
-
-  onDataChange(callback: () => mixed): boolean {
-    if (this.listeners.indexOf(callback) === -1) {
-      this.listeners.push(callback);
-      return true;
-    }
-    return false;
-  }
-
-  removeListener(callback: () => mixed): boolean {
-    const index = this.listeners.indexOf(callback);
-    if (index !== -1) {
-      this.listeners.splice(index, 1);
-      return true;
-    }
-    return false;
-  }
-
-  triggerListeners = (...args: Array<any>): void => {
-    this.listeners.forEach((cb) => cb(...args));
-  };
-}
-
-export class ArrayDataSource<T = any> extends DataSource<T> {
-  elements: Array<T>;
-
-  constructor(elementsArray: Array<T>) {
-    super();
-    this.elements = elementsArray;
-  }
-
-  fetchItems(index: number, nElements: number): Promise<Array<T>> {
-    const { elements } = this;
-    return new Promise((resolve) => {
-      const totalElements = elements.length;
-      const n = totalElements - index;
-      if (n <= 0) {
-        return resolve([]);
-      }
-      const start = Math.max(index, 0);
-      const end = Math.max(start, start + nElements);
-      return resolve(elements.slice(start, end));
-    });
-  }
-
-  updateData(newElementsArray: Array<T>) {
-    this.elements = newElementsArray;
-    this.triggerListeners();
-  }
-}
-
-export default DataSource;

package/bpk-component-infinite-scroll/src/intersection-observer.js

@@ -1,27 +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.
- */
-
-if (typeof window === 'undefined') {
-  global.IntersectionObserver = class {
-    observe() {} // eslint-disable-line class-methods-use-this
-
-    unobserve() {} // eslint-disable-line class-methods-use-this
-  };
-} else {
-  require('intersection-observer'); /* eslint-disable-line global-require */
-}