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

package/bpk-component-datatable/README.md

@@ -1,141 +0,0 @@
-# bpk-component-datatable
-
-> Backpack datatable component.
-
-## Installation
-
-```sh
-npm install bpk-component-datatable --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import { BpkDataTable, BpkDataTableColumn } from 'bpk-component-datatable';
-
-const rows = [
-  { name: 'Jose', description: 'Software Engineer' },
-  { name: 'Rolf', description: 'Manager' }
-]
-
-const onRowClick = row => alert(JSON.stringify(row));
-
-export default () => (
-  <BpkDataTable rows={rows} height={200} onRowClick={onRowClick}>
-    <BpkDataTableColumn
-      label={'Name'}
-      dataKey={'name'}
-      width={100}
-    />
-    <BpkDataTableColumn
-      label={'Description'}
-      dataKey={'description'}
-      width={100}
-      flexGrow={1}
-    />
-  </BpkDataTable>
-);
-```
-
-By default `BpkDataTable` sorts the column using the value of `dataKey`. For use cases where the data might more complex and requires custom sorting you can pass a `sort` function along with `sortBy` and `sortDirection` and they will be handled as explained in react-virtualized's [docs] (https://github.com/bvaughn/react-virtualized/blob/main/docs/Table.md#prop-types)
-
-```js
-import React from 'react';
-import { BpkDataTable, BpkDataTableColumn } from 'bpk-component-datatable';
-import _sortBy from 'lodash/sortBy';
-
-const complexRows = [
-    {
-      name: 'Jose',
-      description: 'Software Engineer',
-      seat: { office: 'London', desk: 10 },
-    },
-    {
-      name: 'Rolf',
-      description: 'Manager',
-      seat: { office: 'Barcelona', desk: 12 },
-    },
-    {
-      name: 'John',
-      description: 'Software Engineer',
-      seat: { office: 'Barcelona', desk: 15 },
-    },
-];
-
-let sortByValue = 'seat';
-let sortDirectionValue = 'DESC';
-const sortFunction = ({ sortBy, sortDirection }) => {
-  if (sortBy === 'seat') {
-    complexRows = _sortBy(complexRows, [
-      row => row.seat.office,
-      row => row.seat.desk,
-    ]);
-  } else {
-    complexRows = _sortBy(complexRows, sortBy);
-  }
-  if (sortDirection === 'DESC') {
-    complexRows.reverse();
-  }
-  sortByValue = sortBy;
-  sortDirectionValue = sortDirection;
-};
-
-export default () => (
-  <BpkDataTable
-    rows={complexRows}
-    height={200}
-    sort={sortFunction}
-    sortBy={sortByValue}
-    sortDirection={sortDirectionValue}
-  >
-    <BpkDataTableColumn
-      label="Name"
-      dataKey="name"
-      width={100}
-    />
-    <BpkDataTableColumn
-      label="Description"
-      dataKey="description"
-      width={100}
-    />
-    <BpkDataTableColumn
-      label="Seat"
-      dataKey="seat"
-      width={100}
-      flexGrow={1}
-      cellRenderer={({ cellData }) => (
-        <React.Fragment>
-          {cellData.office} - {cellData.desk}
-        </React.Fragment>
-      )}
-    />
-  </BpkDataTable>
-);
-```
-
-## Props
-
-### BpkDataTable
-
-Supports all properties defined in [`Table`](https://github.com/bvaughn/react-virtualized/blob/main/docs/Table.md) (from `react-virtualized`),
-in addition to the following:
-
-
-| Property               | PropType                    | Required | Default Value        |
-| ---------------------- | --------------------------- | -------- | -------------------- |
-| rows                   | arrayOf(Object)             | true     | -                    |
-| children               | arrayOf(BpkDataTableColumn) | true     | -                    |
-| height                 | number                      | true     | -                    |
-| width                  | number                      | false    | full width of parent |
-| headerHeight           | number                      | false    | 60                   |
-| rowHeight              | number                      | false    | 60                   |
-| defaultColumnSortIndex | number                      | false    | 0                    |
-| sort                   | func                        | false    | null                 |
-| sortBy                 | string                      | false    | null                 |
-| sortDirection          | oneOf('ASC', 'DESC')        | false    | null                 |
-
-
-### BpkDataTableColumn
-
-Supports all properties defined in [`Column`](https://github.com/bvaughn/react-virtualized/blob/master/docs/Column.md) (from `react-virtualized`)

package/bpk-component-datatable/index.js

@@ -1,21 +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 BpkDataTable from './src/BpkDataTable';
-import BpkDataTableColumn from './src/BpkDataTableColumn';
-
-export { BpkDataTable, BpkDataTableColumn };

package/bpk-component-datatable/package.json

@@ -1,30 +0,0 @@
-{
-  "name": "bpk-component-datatable",
-  "version": "4.1.13",
-  "description": "Backpack datatable 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": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
-  "dependencies": {
-    "bpk-component-icon": "^9.2.13",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
-    "lodash": "^4.17.20",
-    "prop-types": "^15.7.2",
-    "react-virtualized": "^9.22.3"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0"
-  }
-}

package/bpk-component-datatable/src/BpkDataTable.js

@@ -1,197 +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 PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { Table, AutoSizer } from 'react-virtualized';
-import _omit from 'lodash/omit';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkDataTable.module.scss';
-import BpkDataTableColumn from './BpkDataTableColumn';
-import hasChildrenOfType from './hasChildrenOfType';
-import makeSorter, { type Sorter } from './sorter';
-import type { Props } from './common-types';
-
-const getClassName = cssModules(STYLES);
-const omittedTableProps = ['rowGetter', 'rowCount', 'onHeaderClick'];
-
-type State<Row> = {
-  sorter: Sorter<Row>,
-  rowSelected: ?number,
-};
-
-class BpkDataTable<Row> extends Component<Props<Row>, State<Row>> {
-  static defaultProps = {
-    ...Table.defaultProps,
-    width: null,
-    headerHeight: 60,
-    rowHeight: 60,
-    gridStyle: { direction: undefined }, // This is required for rows to automatically respect rtl
-    defaultColumnSortIndex: 0,
-    sort: null,
-    sortBy: null,
-    sortDirection: null,
-  };
-
-  constructor(props: Props<Row>) {
-    super();
-
-    this.state = {
-      sorter: makeSorter(props),
-      rowSelected: undefined,
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: Props<Row>) {
-    if (nextProps.rows !== this.props.rows) {
-      this.state.sorter.propsChange(nextProps);
-    }
-  }
-
-  onRowClicked = ({ index }: { index: number }) => {
-    if (this.state.rowSelected === index) {
-      this.setState({ rowSelected: undefined });
-    } else {
-      this.setState({ rowSelected: index });
-    }
-    if (this.props.onRowClick !== undefined) {
-      this.props.onRowClick(this.state.sorter.getRow(index));
-    }
-  };
-
-  onHeaderClick = ({
-    dataKey: sortBy,
-    event,
-  }: {
-    dataKey: string,
-    event: SyntheticEvent<HTMLDivElement>,
-  }) => {
-    const column = React.Children.toArray(this.props.children).find(
-      (child) => child.props.dataKey === sortBy,
-    );
-
-    if (!column) {
-      return;
-    }
-
-    if (column.props.disableSort === true) {
-      return;
-    }
-
-    // See: https://reactjs.org/docs/legacy-event-pooling.html
-    const eventTarget = event.target;
-    if (eventTarget instanceof Element) {
-      this.setState((prevState) => ({
-        sorter: prevState.sorter.onHeaderClick(sortBy, eventTarget, column),
-      }));
-    }
-  };
-
-  rowClassName = (
-    consumerClassName: ?string | ?(({ index: number }) => string),
-    { index }: { index: number },
-  ) => {
-    const classNames = [getClassName('bpk-data-table__row')];
-    if (this.state.rowSelected === index) {
-      classNames.push(getClassName('bpk-data-table__row--selected'));
-    }
-    if (this.props.onRowClick !== undefined) {
-      classNames.push(getClassName('bpk-data-table__row--clickable'));
-    }
-    if (index === -1) {
-      classNames.push(getClassName('bpk-data-table__header-row'));
-    }
-    if (consumerClassName) {
-      if (typeof consumerClassName === 'function') {
-        classNames.push(consumerClassName({ index }));
-      } else {
-        classNames.push(consumerClassName);
-      }
-    }
-    return classNames;
-  };
-
-  renderTable(width: ?number) {
-    const {
-      children,
-      className,
-      headerClassName,
-      rowClassName,
-      sort,
-      ...restOfProps
-    } = this.props;
-
-    const classNames = [getClassName('bpk-data-table')];
-    if (className) {
-      classNames.push(className);
-    }
-
-    const headerClassNames = [getClassName('bpk-data-table__header-column')];
-    if (headerClassName) {
-      headerClassNames.push(headerClassName);
-    }
-
-    return (
-      // $FlowFixMe[cannot-spread-inexact]
-      <Table
-        {...restOfProps}
-        className={classNames.join(' ')}
-        width={width}
-        rowCount={this.state.sorter.rowCount}
-        rowGetter={({ index }) => this.state.sorter.getRow(index)}
-        headerClassName={headerClassNames.join(' ')}
-        rowClassName={(row) => this.rowClassName(rowClassName, row)}
-        onRowClick={this.onRowClicked}
-        onHeaderClick={this.onHeaderClick}
-        {...this.state.sorter.sortProps}
-      >
-        {React.Children.map(children, BpkDataTableColumn.toColumn)}
-      </Table>
-    );
-  }
-
-  render() {
-    if (this.props.width !== null) {
-      return this.renderTable(this.props.width);
-    }
-
-    return (
-      <AutoSizer disableHeight>
-        {({ width }) => this.renderTable(width)}
-      </AutoSizer>
-    );
-  }
-}
-
-BpkDataTable.propTypes = {
-  ..._omit(Table.propTypes, omittedTableProps),
-  rows: PropTypes.arrayOf(Object).isRequired,
-  children: hasChildrenOfType(BpkDataTableColumn),
-  width: PropTypes.number,
-  headerHeight: PropTypes.number,
-  className: PropTypes.string,
-  defaultColumnSortIndex: PropTypes.number,
-  sort: PropTypes.func,
-  sortBy: PropTypes.string,
-  sortDirection: PropTypes.oneOf(['ASC', 'DESC']),
-};
-
-export default BpkDataTable;

package/bpk-component-datatable/src/BpkDataTable.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-data-table{width:100%}.bpk-data-table__header-column{display:flex;height:100%;margin:1rem;flex-direction:row;align-items:center;outline-offset:-.25rem}.bpk-data-table__header-column:hover{cursor:pointer}.bpk-data-table__row{display:flex;flex-direction:row;align-items:center;border:1px solid #f1f2f8;border-bottom:none;outline-offset:-.25rem;color:#444560;font-weight:normal}.bpk-data-table__row:last-child{border-bottom:1px solid #f1f2f8}.bpk-data-table__row--clickable:not(.bpk-data-table__header-row):hover{background-color:#f1f2f8;cursor:pointer;box-shadow:6px 0 0 0 #0770e3 inset}html[dir='rtl'] .bpk-data-table__row--clickable:not(.bpk-data-table__header-row):hover{box-shadow:-6px 0 0 0 #0770e3 inset}.bpk-data-table__row--selected{background-color:#dddde5;box-shadow:6px 0 0 0 #0770e3 inset}html[dir='rtl'] .bpk-data-table__row--selected{box-shadow:-6px 0 0 0 #0770e3 inset}

package/bpk-component-datatable/src/BpkDataTable.module.scss

@@ -1,92 +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';
-
-$bpk-spacing-v2: true;
-
-$bpk-border-size-datatable: $bpk-border-size-xl * 2;
-
-@mixin bpk-datatable-border-left() {
-  @include _bpk-border-left(
-    $bpk-border-size-datatable,
-    $bpk-color-sky-blue,
-    inset
-  );
-}
-
-@mixin bpk-datatable-border-right() {
-  @include _bpk-border-right(
-    $bpk-border-size-datatable,
-    $bpk-color-sky-blue,
-    inset
-  );
-}
-
-.bpk-data-table {
-  width: 100%;
-
-  &__header-column {
-    display: flex;
-    height: 100%;
-    margin: bpk-spacing-base();
-    flex-direction: row;
-    align-items: center;
-    outline-offset: -(4 * $bpk-one-pixel-rem);
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  &__row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    border: $bpk-border-size-sm solid $bpk-color-sky-gray-tint-07;
-    border-bottom: none;
-    outline-offset: -(4 * $bpk-one-pixel-rem);
-    color: $bpk-color-sky-gray-tint-01;
-    font-weight: normal;
-
-    &:last-child {
-      border-bottom: $bpk-border-size-sm solid $bpk-color-sky-gray-tint-07;
-    }
-
-    &--clickable:not(.bpk-data-table__header-row):hover {
-      background-color: $bpk-color-sky-gray-tint-07;
-      cursor: pointer;
-
-      @include bpk-datatable-border-left;
-
-      @include bpk-rtl {
-        @include bpk-datatable-border-right;
-      }
-    }
-
-    &--selected {
-      background-color: $bpk-color-sky-gray-tint-06;
-
-      @include bpk-datatable-border-left;
-
-      @include bpk-rtl {
-        @include bpk-datatable-border-right;
-      }
-    }
-  }
-}

package/bpk-component-datatable/src/BpkDataTableColumn.js

@@ -1,64 +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 Element } from 'react';
-import { Column } from 'react-virtualized';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import bpkHeaderRenderer from './bpkHeaderRenderer';
-import STYLES from './BpkDataTableColumn.module.scss';
-import { type SortDirectionType } from './sort-types';
-
-export type BpkDataTableColumnProps = {
-  className: ?string,
-  dataKey: string,
-  disableSort: boolean,
-  defaultSortDirection: SortDirectionType,
-};
-
-const getClassName = cssModules(STYLES);
-
-// BpkDataTableColumn is just a props wrapper since Table only accepts Column children
-// BpkDataTable uses BpkDataTableColumn.toColumn to convert BpkDataTableColumn to Columns
-// eslint-disable-next-line no-unused-vars
-const BpkDataTableColumn = (props: BpkDataTableColumnProps) => null;
-
-BpkDataTableColumn.toColumn = (
-  bpkDataTableColumn: Element<typeof BpkDataTableColumn>,
-  key,
-) => {
-  const { className, ...rest } = bpkDataTableColumn.props;
-  const classNames = [getClassName('bpk-data-table-column')];
-
-  if (className) {
-    classNames.push(className);
-  }
-
-  // $FlowFixMe[cannot-spread-inexact]
-  return <Column className={classNames.join(' ')} key={key} {...rest} />;
-};
-
-BpkDataTableColumn.propTypes = { ...Column.propTypes };
-BpkDataTableColumn.defaultProps = {
-  ...Column.defaultProps,
-  headerRenderer: bpkHeaderRenderer,
-};
-
-export default BpkDataTableColumn;

package/bpk-component-datatable/src/BpkDataTableColumn.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-data-table-column{margin:1rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.bpk-data-table-column__header{display:inline-block;max-width:100%;text-overflow:ellipsis;overflow:hidden}.bpk-data-table-column__sort-icons{margin:0 0 0 .75rem}html[dir='rtl'] .bpk-data-table-column__sort-icons{margin:0 .75rem 0 0}.bpk-data-table-column__sort-icon{display:block;fill:#b2b2bf}.bpk-data-table-column__sort-icon:hover{fill:#68697f}.bpk-data-table-column__sort-icon--selected,.bpk-data-table-column__sort-icon--selected:hover{fill:#084eb2}.bpk-data-table-column__sort-icon--up{margin-bottom:-0.25rem}

package/bpk-component-datatable/src/BpkDataTableColumn.module.scss

@@ -1,65 +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-spacing-v2: true;
-
-$bpk-margin-size-sort-icons: bpk-spacing-sm() + bpk-spacing-md();
-
-.bpk-data-table-column {
-  margin: bpk-spacing-base();
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.bpk-data-table-column__header {
-  display: inline-block;
-  max-width: 100%;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.bpk-data-table-column__sort-icons {
-  margin: 0 0 0 $bpk-margin-size-sort-icons;
-
-  @include bpk-rtl {
-    margin: 0 $bpk-margin-size-sort-icons 0 0;
-  }
-}
-
-.bpk-data-table-column__sort-icon {
-  display: block;
-  fill: $bpk-color-sky-gray-tint-04;
-
-  &:hover {
-    fill: $bpk-color-sky-gray-tint-02;
-  }
-
-  &--selected {
-    &,
-    &:hover {
-      fill: $bpk-color-sky-blue-shade-01;
-    }
-  }
-}
-
-.bpk-data-table-column__sort-icon--up {
-  margin-bottom: -(bpk-spacing-sm());
-}