@map-colonies/react-components 3.15.1 → 4.0.2

package/src/lib/ol-map/source/stories/wmts.stories.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import { CSFStory } from '../../../utils/story';
-import { Map } from '../../map';
-import { TileLayer } from '../../layers/tile-layer';
-import { getWMTSOptions, TileWMTS } from '../wmts';
-import { TileOsm } from '../osm';
-
-const wmtsOptions = getWMTSOptions({
-  attributions: 'Tiles © ArcGIS',
-  url:
-    'https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/',
-  layer: '0',
-  projection: 'EPSG:3857',
-  format: 'image/png',
-  style: 'default',
-  matrixSet: 'EPSG:3857',
-  heightWidthRatio: 1,
-  requestEncoding: 'KVP',
-});
-
-const wmtsOptions1 = getWMTSOptions({
-  url:
-    'http://10.28.11.95:8080/wmts/{Layer}/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}.png',
-  layer: 'combined_layers',
-  matrixSet: 'gridname',
-  format: 'png',
-  projection: 'EPSG:4326',
-  style: 'default',
-});
-
-const mapDivStyle = {
-  height: '95%',
-  width: '95%',
-  position: 'absolute' as const,
-};
-
-export default {
-  title: 'Map/Map Tiles/WMTS',
-  component: TileWMTS,
-};
-
-export const Basic: CSFStory<JSX.Element> = () => (
-  <div style={mapDivStyle}>
-    <Map allowFullScreen={true} showMousePosition={true}>
-      <TileLayer>
-        <TileOsm />
-      </TileLayer>
-      <TileLayer>
-        <TileWMTS options={wmtsOptions} />
-      </TileLayer>
-      <TileLayer options={{ opacity: 0.4 }}>
-        <TileWMTS options={wmtsOptions1} />
-      </TileLayer>
-    </Map>
-  </div>
-);
-
-Basic.argTypes = {
-  options: {
-    description: `{ Options } from 'ol/source/WMTS'`,
-    table: {
-      type: {
-        summary: 'OpenLayers type',
-        detail:
-          'Go to "https://openlayers.org/en/latest/apidoc/module-ol_source_WMTS-WMTS.html"',
-      },
-    },
-    control: {
-      type: null,
-    },
-  },
-};

package/src/lib/ol-map/source/stories/xyz.stories.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { Proj } from '../../../utils/projections';
-import { CSFStory } from '../../../utils/story';
-import { Map } from '../../map';
-import { TileLayer } from '../../layers/tile-layer';
-import { getXYZOptions, TileXYZ } from '../xyz';
-
-const xyzOptions = getXYZOptions({
-  url:
-    'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
-    '?apikey=0e6fc415256d4fbb9b5166a718591d71',
-});
-
-const mapDivStyle = {
-  height: '95%',
-  width: '95%',
-  position: 'absolute' as const,
-};
-
-export default {
-  title: 'Map/Map Tiles/XYZ',
-  component: TileXYZ,
-};
-
-export const Basic: CSFStory<JSX.Element> = () => (
-  <div style={mapDivStyle}>
-    <Map
-      allowFullScreen={true}
-      showMousePosition={true}
-      projection={Proj.WEB_MERCATOR}
-    >
-      <TileLayer>
-        <TileXYZ options={xyzOptions} />
-      </TileLayer>
-    </Map>
-  </div>
-);
-
-Basic.argTypes = {
-  options: {
-    description: `{ Options } from 'ol/source/XYZ'`,
-    table: {
-      type: {
-        summary: 'OpenLayers type',
-        detail:
-          'Go to "https://openlayers.org/en/latest/apidoc/module-ol_source_XYZ-XYZ.html"',
-      },
-    },
-    control: {
-      type: null,
-    },
-  },
-};

package/src/lib/ol-map/source/vector-source.tsx

@@ -1,30 +0,0 @@
-import React, { useEffect, useState, createContext, useContext } from 'react';
-
-import { Vector } from 'ol/source';
-import { useVectorLayer } from '../layers/vector-layer';
-
-const vectorSourceContext = createContext<Vector | null>(null);
-const VectorSourceProvider = vectorSourceContext.Provider;
-
-export const useVectorSource = (): Vector => {
-  const source = useContext(vectorSourceContext);
-
-  if (source === null) {
-    throw new Error('vector source context is null, please check the provider');
-  }
-
-  return source;
-};
-
-export const VectorSource: React.FC = ({ children }) => {
-  const vectorLayer = useVectorLayer();
-  const [vectorSource] = useState(new Vector());
-
-  useEffect((): void => {
-    vectorLayer.setSource(vectorSource);
-  }, [vectorSource, vectorLayer]);
-
-  return (
-    <VectorSourceProvider value={vectorSource}>{children}</VectorSourceProvider>
-  );
-};

package/src/lib/ol-map/source/wms.tsx

@@ -1,40 +0,0 @@
-import React, { useEffect } from 'react';
-import OlTileWMS, { Options } from 'ol/source/TileWMS';
-import { useTileLayer } from '../layers/tile-layer';
-
-interface TileWMSProps {
-  options: Options;
-}
-
-export interface WMSOptionParams {
-  attributions?: string;
-  url: string;
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  params: { [key: string]: any };
-  serverType: 'carmentaserver' | 'geoserver' | 'mapserver' | 'qgis';
-  transition: number;
-}
-
-export const getWMSOptions = (optionParams: WMSOptionParams): Options => {
-  const { attributions, url, params, serverType, transition } = optionParams;
-
-  const wmsOptions: Options = {
-    attributions,
-    url,
-    params,
-    serverType,
-    transition,
-  };
-
-  return wmsOptions;
-};
-export const TileWMS: React.FC<TileWMSProps> = (props) => {
-  const tileLayer = useTileLayer();
-  const { options } = props;
-
-  useEffect(() => {
-    tileLayer.setSource(new OlTileWMS(options));
-  }, [tileLayer, options]);
-
-  return null;
-};

package/src/lib/ol-map/source/wmts.tsx

@@ -1,82 +0,0 @@
-import React, { useEffect } from 'react';
-import { WMTS } from 'ol/source';
-import { Options } from 'ol/source/WMTS';
-import WMTSRequestEncoding from 'ol/source/WMTSRequestEncoding';
-import { get as getProjection } from 'ol/proj';
-import WMTSTileGrid from 'ol/tilegrid/WMTS';
-import { getTopLeft, getWidth } from 'ol/extent';
-import { useTileLayer } from '../layers/tile-layer';
-
-const RESOLUTIONS = 20,
-  TILE_GRANULARITY = 256,
-  WMTS_RESOLUTION_BASIS = 2,
-  LAYER_HEIGHT_WIDHT_RATIO = 2,
-  REQUEST_ENCODING = 'REST';
-
-interface TileWMTSProps {
-  options: Options;
-}
-
-export interface WMTSOptionParams {
-  attributions?: string;
-  url: string;
-  layer: string;
-  projection: string;
-  format: string;
-  style: string;
-  matrixSet: string;
-  wrapX?: boolean;
-  heightWidthRatio?: number;
-  requestEncoding?: WMTSRequestEncoding | string;
-}
-
-export const getWMTSOptions = (params: WMTSOptionParams): Options => {
-  const projection = getProjection(params.projection);
-  const projectionExtent = projection.getExtent();
-  const resolutions = new Array<number>(RESOLUTIONS);
-  const matrixIds = new Array<string>(RESOLUTIONS);
-  const size = getWidth(projectionExtent) / TILE_GRANULARITY;
-  const heightWidthRatio =
-    params.heightWidthRatio !== undefined
-      ? params.heightWidthRatio
-      : LAYER_HEIGHT_WIDHT_RATIO;
-  const requestEncoding =
-    params.requestEncoding !== undefined
-      ? params.requestEncoding
-      : REQUEST_ENCODING;
-  for (let z = 0; z < RESOLUTIONS; ++z) {
-    // generate resolutions and matrixIds arrays for this WMTS
-    resolutions[z] =
-      size / Math.pow(WMTS_RESOLUTION_BASIS, z) / heightWidthRatio;
-    matrixIds[z] = z.toString();
-  }
-
-  const wmtsOptions = {
-    attributions: params.attributions,
-    url: params.url,
-    layer: params.layer,
-    matrixSet: params.matrixSet,
-    format: params.format,
-    projection: projection,
-    tileGrid: new WMTSTileGrid({
-      origin: getTopLeft(projectionExtent),
-      resolutions: resolutions,
-      matrixIds: matrixIds,
-    }),
-    style: params.style,
-    requestEncoding: requestEncoding,
-    wrapX: params.wrapX !== undefined ? params.wrapX : true,
-  };
-
-  return wmtsOptions;
-};
-export const TileWMTS: React.FC<TileWMTSProps> = (props) => {
-  const tileLayer = useTileLayer();
-  const { options } = props;
-
-  useEffect(() => {
-    tileLayer.setSource(new WMTS(options));
-  }, [tileLayer, options]);
-
-  return null;
-};

package/src/lib/ol-map/source/xyz.tsx

@@ -1,33 +0,0 @@
-import React, { useEffect } from 'react';
-import OlXYZ, { Options } from 'ol/source/XYZ';
-import { useTileLayer } from '../layers/tile-layer';
-
-interface TileXYZProps {
-  options: Options;
-}
-
-export interface XYZOptionParams {
-  attributions?: string;
-  url: string;
-}
-
-export const getXYZOptions = (optionParams: XYZOptionParams): Options => {
-  const { attributions, url } = optionParams;
-
-  const xyzOptions = {
-    attributions,
-    url,
-  };
-
-  return xyzOptions;
-};
-export const TileXYZ: React.FC<TileXYZProps> = (props) => {
-  const tileLayer = useTileLayer();
-  const { options } = props;
-
-  useEffect(() => {
-    tileLayer.setSource(new OlXYZ(options));
-  }, [tileLayer, options]);
-
-  return null;
-};

package/src/lib/ol-map/stories/map.stories.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { Map } from '../map';
-import { TileOsm } from '../source';
-import { TileLayer } from '../layers';
-import { Proj } from '../../utils/projections';
-
-export default {
-  title: 'Map',
-  component: Map,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta;
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-export const BaseMap: Story = (args: unknown) => (
-  <div style={mapDivStyle}>
-    <Map {...args}>
-      <TileLayer>
-        <TileOsm />
-      </TileLayer>
-    </Map>
-  </div>
-);
-
-BaseMap.argTypes = {
-  projection: {
-    defaultValue: Proj.WGS84,
-    control: {
-      type: 'radio',
-      options: [Proj.WEB_MERCATOR, Proj.WGS84],
-    },
-  },
-  zoom: {
-    defaultValue: 3,
-    control: {
-      type: 'range',
-      min: 0,
-      max: 20,
-    },
-  },
-};
-
-export const ConfiguredMap: Story = () => (
-  <div style={mapDivStyle}>
-    <Map zoom={3} center={[0, 0]}>
-      <TileLayer>
-        <TileOsm />
-      </TileLayer>
-    </Map>
-  </div>
-);
-
-ConfiguredMap.storyName = 'with zoom and center';

package/src/lib/ol-map/style.ts

@@ -1,24 +0,0 @@
-import { Fill, Stroke, Circle, Style } from 'ol/style';
-import { StyleFunction } from 'ol/style/Style';
-
-const fill = new Fill({
-  color: 'rgba(255,255,255,0.4)',
-});
-const stroke = new Stroke({
-  color: '#3399CC',
-  width: 1.25,
-});
-
-export type MapStyle = Style | Style[] | StyleFunction;
-
-export const defaultStyle = [
-  new Style({
-    image: new Circle({
-      fill: fill,
-      stroke: stroke,
-      radius: 5,
-    }),
-    fill: fill,
-    stroke: stroke,
-  }),
-];

package/src/lib/popover/index.ts

@@ -1 +0,0 @@
-export { McPopover as Popover } from './popover';

package/src/lib/popover/popover.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-import { Popover, PopoverProps } from '@material-ui/core';
-
-export const McPopover: React.FC<PopoverProps> = (props) => {
-  const { children, ...rest } = props;
-  return <Popover {...rest}>{children}</Popover>;
-};

package/src/lib/smart-table/__mock-data__/smartTableMocks.ts

@@ -1,22 +0,0 @@
-import { CellMetadata } from '../smart-table-types';
-
-export interface Item {
-  first: string;
-  second: number;
-}
-
-export const headCells: CellMetadata<Item>[] = [
-  {
-    disablePadding: true,
-    id: 'first',
-    label: 'first',
-    numeric: false,
-    transform: jest.fn().mockReturnValue('42'),
-  },
-  { disablePadding: false, id: 'second', label: 'second', numeric: true },
-];
-
-export const items: Item[] = [
-  { first: 'a', second: 1 },
-  { first: 'b', second: 2 },
-];

package/src/lib/smart-table/index.ts

@@ -1,2 +0,0 @@
-export * from './smart-table';
-export * from './smart-table-types';

package/src/lib/smart-table/smart-table-head.spec.tsx

@@ -1,116 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { TableCell, TableSortLabel } from '@material-ui/core';
-import { SmartEnhancedTableHead } from './smart-table-head';
-import { headCells } from './__mock-data__/smartTableMocks';
-
-it('generates the correct number of table cells', () => {
-  const wrapper = shallow(
-    <SmartEnhancedTableHead
-      headCells={headCells}
-      isCollapseable={false}
-      onRequestSort={() => {
-        // do nothing for eslint
-      }}
-      order="asc"
-      orderBy={''}
-    />
-  );
-
-  expect(wrapper.find(TableCell)).toHaveLength(headCells.length);
-
-  wrapper.setProps({ isCollapseable: true });
-
-  expect(wrapper.find(TableCell)).toHaveLength(headCells.length + 1);
-});
-
-it('sets the correct values for the table cell properties', () => {
-  const wrapper = shallow(
-    <SmartEnhancedTableHead
-      headCells={headCells}
-      isCollapseable={false}
-      onRequestSort={() => {
-        // do nothing for eslint
-      }}
-      order="asc"
-      orderBy={'first'}
-    />
-  );
-
-  /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-  const firstTableCellProps = wrapper
-    .findWhere((n) => n.type() === TableCell && n.key() === headCells[0].id)
-    .props();
-  /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-  const secondTableCellProps = wrapper
-    .findWhere((n) => n.type() === TableCell && n.key() === headCells[1].id)
-    .props();
-
-  expect(firstTableCellProps).toHaveProperty('align', 'left');
-  expect(secondTableCellProps).toHaveProperty('align', 'right');
-
-  expect(firstTableCellProps).toHaveProperty('padding', 'none');
-  expect(secondTableCellProps).toHaveProperty('padding', 'default');
-
-  expect(firstTableCellProps).toHaveProperty('sortDirection', 'asc');
-  expect(secondTableCellProps).toHaveProperty('sortDirection', false);
-});
-
-it('sets the correct values for the sort label properties', () => {
-  const wrapper = shallow(
-    <SmartEnhancedTableHead
-      headCells={headCells}
-      isCollapseable={false}
-      onRequestSort={() => {
-        // do nothing for eslint
-      }}
-      order="desc"
-      orderBy={'first'}
-    />
-  );
-
-  const firstSortLabelProps = wrapper
-    .findWhere(
-      (n) =>
-        n.type() === TableSortLabel && n.prop('children') === headCells[0].label
-    )
-    .props();
-  const secondSortLabelProps = wrapper
-    .findWhere(
-      (n) =>
-        n.type() === TableSortLabel && n.prop('children') === headCells[1].label
-    )
-    .props();
-
-  expect(firstSortLabelProps).toHaveProperty('active', true);
-  expect(secondSortLabelProps).toHaveProperty('active', false);
-
-  expect(firstSortLabelProps).toHaveProperty('direction', 'desc');
-  expect(secondSortLabelProps).toHaveProperty('direction', 'asc');
-});
-
-it('calls onRequestSort with the correct params', () => {
-  const handleRequestSort = jest.fn();
-
-  const wrapper = shallow(
-    <SmartEnhancedTableHead
-      headCells={headCells}
-      isCollapseable={false}
-      onRequestSort={handleRequestSort}
-      order="desc"
-      orderBy={'first'}
-    />
-  );
-
-  wrapper
-    .findWhere(
-      (n) =>
-        n.type() === TableSortLabel && n.prop('children') === headCells[0].label
-    )
-    .simulate('click', {});
-
-  expect(handleRequestSort).toHaveBeenCalledWith(
-    expect.anything(),
-    headCells[0].id
-  );
-});

package/src/lib/smart-table/smart-table-head.tsx

@@ -1,47 +0,0 @@
-/* eslint-disable */
-
-import React from 'react';
-import TableHead from '@material-ui/core/TableHead';
-import { CellMetadata, Order } from './smart-table-types';
-import { TableRow, TableCell, TableSortLabel } from '@material-ui/core';
-
-interface SmartTableHeadProps<T> {
-  headCells: CellMetadata<T>[];
-  onRequestSort: (event: React.MouseEvent<unknown>, property: keyof T) => void;
-  order: Order;
-  orderBy: keyof T | '';
-  isCollapseable: boolean;
-}
-
-export function SmartEnhancedTableHead<T>(props: SmartTableHeadProps<T>) {
-  const { headCells, order, orderBy, onRequestSort, isCollapseable } = props;
-  const createSortHandler = (property: keyof T) => (
-    event: React.MouseEvent<unknown>
-  ) => {
-    onRequestSort(event, property);
-  };
-
-  return (
-    <TableHead>
-      <TableRow>
-        {isCollapseable && <TableCell />}
-        {headCells.map((headCell) => (
-          <TableCell
-            key={headCell.id as string}
-            align={headCell.numeric ? 'right' : 'left'}
-            padding={headCell.disablePadding ? 'none' : 'default'}
-            sortDirection={orderBy === headCell.id ? order : false}
-          >
-            <TableSortLabel
-              active={orderBy === headCell.id}
-              direction={orderBy === headCell.id ? order : 'asc'}
-              onClick={createSortHandler(headCell.id)}
-            >
-              {headCell.label}
-            </TableSortLabel>
-          </TableCell>
-        ))}
-      </TableRow>
-    </TableHead>
-  );
-}