@map-colonies/react-components 3.8.1 → 3.10.2

package/package.json

@@ -1,100 +1,103 @@
-{
-  "name": "@map-colonies/react-components",
-  "version": "3.8.1",
-  "module": "dist/index.js",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "bugs": {
-    "url": "https://github.com/MapColonies/shared-components/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/MapColonies/shared-components.git"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "dependencies": {
-    "@date-io/date-fns": "^1.3.13",
-    "@here/quantized-mesh-decoder": "^1.2.8",
-    "@map-colonies/react-core": "^3.3.1",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/pickers": "^3.2.10",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@turf/bbox": "^6.0.1",
-    "@turf/bbox-polygon": "^6.0.1",
-    "@turf/boolean-point-in-polygon": "^6.5.0",
-    "@turf/helpers": "^6.1.4",
-    "@turf/rewind": "^5.1.5",
-    "@types/geojson": "^7946.0.7",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/ol": "^6.3.1",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/textarea-caret": "^3.0.1",
-    "cesium": "1.84.0",
-    "copy-webpack-plugin": "^6.3.1",
-    "copyfiles": "2.3.0",
-    "cross-env": "7.0.2",
-    "date-fns": "^2.14.0",
-    "get-input-selection": "^1.1.4",
-    "lodash": "^4.17.20",
-    "ol": "^6.4.3",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1",
-    "resium": "^1.13.1",
-    "rimraf": "3.0.2",
-    "textarea-caret": "^3.1.0",
-    "typescript": "~3.7.2"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "npx rimraf dist && tsc --project tsbuildconfig.json && yarn run copyassets:components",
-    "test": "react-scripts test",
-    "test:nowatch": "react-scripts test --coverage --watchAll=false --reporters='default' --reporters='jest-html-reporters'",
-    "eject": "react-scripts eject",
-    "postbuild": "copyfiles -u 2 -e \"**/*.ts\" -e \"**/*.tsx\" \"src/lib/**/*\" dist",
-    "copyassets:all": "yarn run copyassets:cesium",
-    "copyassets:cesium": "copyfiles -u 5 \"../../node_modules/cesium/Build/Cesium/**/*\" \"storybook-static\"",
-    "copyassets:components": "copyfiles -u 1 \"./public/assets/**/*\" \"dist\"",
-    "storybook": "yarn run copyassets:all && start-storybook -p 9010 -s public,\"storybook-static\"",
-    "storybook-https": "yarn run copyassets:all && start-storybook --ssl-cert ~/example.crt --ssl-key ~/example.key --https -p 9010 -s public,\"storybook-static\"",
-    "build-storybook": "build-storybook -s public",
-    "eslint-check": "npx eslint . --ext .ts,.tsx"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@types/enzyme": "^3.10.5",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/lodash": "^4.14.165",
-    "@types/react-test-renderer": "^16.9.2",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "jest-enzyme": "^7.1.2",
-    "react-test-renderer": "^16.13.1"
-  },
-  "gitHead": "3e15e1e543de64636187a5482827f6f2ba1de4bb",
-  "jest": {
-    "coverageReporters": [
-      "text",
-      "html"
-    ]
-  }
-}
+{
+  "name": "@map-colonies/react-components",
+  "version": "3.10.2",
+  "module": "dist/index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "bugs": {
+    "url": "https://github.com/MapColonies/shared-components/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MapColonies/shared-components.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@date-io/date-fns": "^1.3.13",
+    "@here/quantized-mesh-decoder": "^1.2.8",
+    "@map-colonies/react-core": "^3.3.2",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/pickers": "^3.2.10",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@turf/bbox": "^6.0.1",
+    "@turf/bbox-polygon": "^6.0.1",
+    "@turf/boolean-point-in-polygon": "^6.5.0",
+    "@turf/helpers": "^6.1.4",
+    "@turf/rewind": "^5.1.5",
+    "@types/geojson": "^7946.0.7",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/ol": "^6.3.1",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "@types/textarea-caret": "^3.0.1",
+    "babel-loader": "8.0.4",
+    "cesium": "1.84.0",
+    "chonky": "^2.3.2",
+    "chonky-icon-fontawesome": "^2.3.2",
+    "copy-webpack-plugin": "^6.3.1",
+    "copyfiles": "2.3.0",
+    "cross-env": "7.0.2",
+    "date-fns": "^2.14.0",
+    "get-input-selection": "^1.1.4",
+    "lodash": "^4.17.20",
+    "ol": "^6.4.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^4.0.1",
+    "resium": "^1.13.1",
+    "rimraf": "3.0.2",
+    "textarea-caret": "^3.1.0",
+    "typescript": "4.2.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "npx rimraf dist && tsc --project tsbuildconfig.json && yarn run copyassets:components",
+    "test": "react-scripts test",
+    "test:nowatch": "react-scripts test --coverage --watchAll=false --reporters='default' --reporters='jest-html-reporters'",
+    "eject": "react-scripts eject",
+    "postbuild": "copyfiles -u 2 -e \"**/*.ts\" -e \"**/*.tsx\" \"src/lib/**/*\" dist",
+    "copyassets:all": "yarn run copyassets:cesium",
+    "copyassets:cesium": "copyfiles -u 5 \"../../node_modules/cesium/Build/Cesium/**/*\" \"storybook-static\"",
+    "copyassets:components": "copyfiles -u 1 \"./public/assets/**/*\" \"dist\"",
+    "storybook": "yarn run copyassets:all && start-storybook -p 9010 -s public,\"storybook-static\"",
+    "storybook-https": "yarn run copyassets:all && start-storybook --ssl-cert ~/example.crt --ssl-key ~/example.key --https -p 9010 -s public,\"storybook-static\"",
+    "build-storybook": "build-storybook -s public",
+    "eslint-check": "npx eslint . --ext .ts,.tsx"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/enzyme": "^3.10.5",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/lodash": "^4.14.165",
+    "@types/react-test-renderer": "^16.9.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "jest-enzyme": "^7.1.2",
+    "react-test-renderer": "^16.13.1"
+  },
+  "gitHead": "0b46e28cd15388a779c576920493e2f748cdc2ef",
+  "jest": {
+    "coverageReporters": [
+      "text",
+      "html"
+    ]
+  }
+}

package/src/lib/cesium-map/map.tsx

@@ -22,11 +22,12 @@ import {
 import { isNumber, isArray } from 'lodash';
 import { getAltitude, toDegrees } from '../utils/map';
 import { Box } from '../box';
+import { Proj } from '../utils/projections';
 import { CoordinatesTrackerTool } from './tools/coordinates-tracker.tool';
 import { ScaleTrackerTool } from './tools/scale-tracker.tool';
 import { CesiumSettings, IBaseMap, IBaseMaps } from './settings/settings';
 import LayerManager from './layers-manager';
-import { CesiumSceneMode, CesiumSceneModeEnum, Proj } from '.';
+import { CesiumSceneMode, CesiumSceneModeEnum } from './map.types';
 
 import './map.css';
 
@@ -224,6 +225,16 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
           height: 0,
         };
       }
+
+      const getCameraPositionCartographic = (): ICameraPosition => {
+        const camPos = mapViewRef.camera.positionCartographic;
+        return {
+          longitude: toDegrees(camPos.longitude),
+          latitude: toDegrees(camPos.latitude),
+          height: camPos.height,
+        };
+      };
+
       // https://stackoverflow.com/questions/33348761/get-center-in-cesium-map
       if (mapViewRef.scene.mode === SceneMode.SCENE3D) {
         const windowPosition = new Cartesian2(
@@ -240,18 +251,17 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
         const pickPositionCartographic = mapViewRef.scene.globe.ellipsoid.cartesianToCartographic(
           pickPosition as Cartesian3
         );
-        return {
-          longitude: toDegrees(pickPositionCartographic.longitude),
-          latitude: toDegrees(pickPositionCartographic.latitude),
-          height: mapViewRef.scene.camera.positionCartographic.height,
-        };
+
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        return pickPositionCartographic !== undefined
+          ? {
+              longitude: toDegrees(pickPositionCartographic.longitude),
+              latitude: toDegrees(pickPositionCartographic.latitude),
+              height: mapViewRef.scene.camera.positionCartographic.height,
+            }
+          : getCameraPositionCartographic();
       } else {
-        const camPos = mapViewRef.camera.positionCartographic;
-        return {
-          longitude: toDegrees(camPos.longitude),
-          latitude: toDegrees(camPos.latitude),
-          height: camPos.height,
-        };
+        return getCameraPositionCartographic();
       }
     };
 

package/src/lib/cesium-map/terrain-providers/terrain-provider-heights-tool.stories.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import {
+  ArcGISTiledElevationTerrainProvider,
+  EllipsoidTerrainProvider,
+  TerrainProvider,
+  CesiumTerrainProvider,
+  Resource,
+} from 'cesium';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { CesiumMap, useCesiumMap } from '../map';
+import { CesiumSceneMode } from '../map.types';
+import { Cesium3DTileset } from '../layers';
+import { InspectorTool } from '../tools/inspector.tool';
+import { TerrainianHeightTool } from '../tools/terranian-height.tool';
+import { LayerType } from '../layers-manager';
+
+export default {
+  title: 'Cesium Map/QuantizedMesh',
+  component: CesiumMap,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const mapDivStyle = {
+  height: '90%',
+  width: '100%',
+  position: 'absolute' as const,
+};
+
+const BASE_MAPS = {
+  maps: [
+    {
+      id: '1st',
+      title: '1st Map Title',
+      isCurrent: true,
+      thumbnail:
+        'https://nsw.digitaltwin.terria.io/build/efa2f6c408eb790753a9b5fb2f3dc678.png',
+      baseRasteLayers: [
+        {
+          id: 'GOOGLE_TERRAIN',
+          type: 'XYZ_LAYER' as LayerType,
+          opacity: 1,
+          zIndex: 0,
+          options: {
+            url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+            layers: '',
+            credit: 'GOOGLE',
+          },
+        },
+      ],
+      baseVectorLayers: [],
+    },
+  ],
+};
+
+const EllipsoidProvider = new EllipsoidTerrainProvider({});
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const MCCesiumProviderMercator = new CesiumTerrainProvider({
+  url: new Resource({
+    url: 'http://localhost:3000/terrain_mercator_crop',
+  }),
+});
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const MCCesiumProviderW84 = new CesiumTerrainProvider({
+  url: new Resource({
+    url: 'http://localhost:3000/terrain_w84_geo_crop',
+  }),
+});
+
+const ArcGisProvider = new ArcGISTiledElevationTerrainProvider({
+  url:
+    'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
+});
+
+const terrainProviderListQmesh = [
+  {
+    id: 'NONE',
+    value: EllipsoidProvider,
+  },
+  {
+    id: 'MC Mercator - Cesium Terrain Provider',
+    value: MCCesiumProviderMercator,
+  },
+  {
+    id: 'MC W84 - Cesium Terrain Provider',
+    value: MCCesiumProviderW84,
+  },
+  {
+    id: 'Arc Gis Terrain Provider',
+    value: ArcGisProvider,
+  },
+];
+
+interface ITerrainProviderItem {
+  id: string;
+  value: TerrainProvider | undefined;
+}
+
+interface ITerrainProviderSelectorProps {
+  terrainProviderList: ITerrainProviderItem[];
+}
+
+const TerrainProviderSelector: React.FC<ITerrainProviderSelectorProps> = ({
+  terrainProviderList,
+}) => {
+  const mapViewer = useCesiumMap();
+
+  return (
+    <>
+      <select
+        defaultValue={terrainProviderList[0].id}
+        onChange={(evt): void => {
+          const selected = terrainProviderList.find(
+            (item) => item.id === evt.target.value
+          );
+          mapViewer.terrainProvider = (selected as ITerrainProviderItem)
+            .value as TerrainProvider;
+        }}
+      >
+        {terrainProviderList.map((provider) => {
+          return <option key={provider.id}>{provider.id}</option>;
+        })}
+      </select>
+    </>
+  );
+};
+
+export const QuantizedMeshHeightsTool: Story = () => {
+  const [center] = useState<[number, number]>([-122, 43]);
+  return (
+    <div style={mapDivStyle}>
+      <CesiumMap
+        center={center}
+        zoom={5}
+        imageryProvider={false}
+        sceneModes={[CesiumSceneMode.SCENE3D, CesiumSceneMode.COLUMBUS_VIEW]}
+        baseMaps={BASE_MAPS}
+      >
+        <Cesium3DTileset
+          isZoomTo={true}
+          url="https://3d.ofek-air.com/3d/Jeru_Old_City_Cesium/ACT/Jeru_Old_City_Cesium_ACT.json"
+        />
+        <TerrainProviderSelector
+          terrainProviderList={terrainProviderListQmesh}
+        />
+        <TerrainianHeightTool />
+        <InspectorTool />
+      </CesiumMap>
+    </div>
+  );
+};
+QuantizedMeshHeightsTool.storyName = 'Heights Tool';

package/src/lib/cesium-map/terrain-providers/terrain-provider.stories.tsx

@@ -13,10 +13,11 @@ import { Story, Meta } from '@storybook/react/types-6-0';
 import { CesiumMap, useCesiumMap } from '../map';
 import { CesiumSceneMode } from '../map.types';
 import { Cesium3DTileset } from '../layers';
+import { LayerType } from '../layers-manager';
 import QuantizedMeshTerrainProvider from './custom/quantized-mesh-terrain-provider';
 
 export default {
-  title: 'Cesium Map',
+  title: 'Cesium Map/QuantizedMesh',
   component: CesiumMap,
   parameters: {
     layout: 'fullscreen',
@@ -40,7 +41,7 @@ const BASE_MAPS = {
       baseRasteLayers: [
         {
           id: 'GOOGLE_TERRAIN',
-          type: 'XYZ_LAYER',
+          type: 'XYZ_LAYER' as LayerType,
           opacity: 1,
           zIndex: 0,
           options: {
@@ -159,7 +160,7 @@ const TerrainProviderSelector: React.FC<ITerrainProviderSelectorProps> = ({
   );
 };
 
-export const QuantizedMesh: Story = () => {
+export const QuantizedMeshProviders: Story = () => {
   // const [center] = useState<[number, number]>([24, -200]);
   const [center] = useState<[number, number]>([-122, 43]);
   return (
@@ -181,3 +182,4 @@ export const QuantizedMesh: Story = () => {
     </div>
   );
 };
+QuantizedMeshProviders.storyName = 'Providers';

package/src/lib/cesium-map/tools/coordinates-tracker.tool.tsx

@@ -7,7 +7,7 @@ import {
   Proj,
   COORDINATES_WGS_FRACTION_DIGITS,
   COORDINATES_MERCATOR_FRACTION_DIGITS,
-} from '..';
+} from '../../utils/projections';
 
 export interface RCoordinatesTrackerToolProps {
   projection?: Proj;

package/src/lib/cesium-map/tools/inspector.tool.tsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react';
+import { viewerCesiumInspectorMixin } from 'cesium';
+import { CesiumViewer, useCesiumMap } from '../map';
+
+export interface InspectorProps {}
+
+export const InspectorTool: React.FC<InspectorProps> = (props) => {
+  const mapViewer: CesiumViewer = useCesiumMap();
+
+  useEffect(() => {
+    mapViewer.extend(viewerCesiumInspectorMixin);
+  }, [mapViewer]);
+
+  return <></>;
+};

package/src/lib/cesium-map/tools/terranian-height.tool.tsx

@@ -0,0 +1,167 @@
+import React, { ChangeEvent } from 'react';
+import {
+  Cartesian2,
+  Ellipsoid,
+  Color as CesiumColor,
+  LabelStyle as CesiumLabelStyle,
+  VerticalOrigin as CesiumVerticalOrigin,
+  Cartographic,
+  sampleTerrainMostDetailed,
+} from 'cesium';
+import { CesiumViewer, useCesiumMap } from '../map';
+
+interface IParsedData {
+  cartographic: Cartographic;
+  cartesian: Cartesian2;
+}
+
+const LABEL_PIXEL_OFFSET = -25;
+const FIRST_DATA_ROW_IDX = 2;
+
+export interface TerrainianHeightProps {}
+
+export const TerrainianHeightTool: React.FC<TerrainianHeightProps> = (
+  props
+) => {
+  const mapViewer: CesiumViewer = useCesiumMap();
+
+  const csvToArray = (str: string, delimiter = ','): IParsedData[] => {
+    // const headers = str.slice(0, str.indexOf('\n')).split(delimiter);
+    const rows = str.slice(str.indexOf('\n') + 1).split('\n');
+
+    const arr = rows.map((row) => {
+      const values = row.split(delimiter);
+      const el = Cartographic.fromDegrees(
+        parseFloat(values[0]),
+        parseFloat(values[1])
+      );
+      // const el = headers.reduce((object: Record<string, number>, header, index) => {
+      //   const trimmedHeader = header.trim();
+      //   object[trimmedHeader] = parseFloat(values[index]);
+      //   return object;
+      // }, {});
+
+      //return el;
+      return {
+        cartographic: el,
+        cartesian: new Cartesian2(parseFloat(values[0]), parseFloat(values[1])),
+      };
+    });
+
+    return arr;
+  };
+
+  const loadCSV = (evt: ChangeEvent<HTMLInputElement>): void => {
+    evt.preventDefault();
+    evt.persist();
+    const reader = new FileReader();
+
+    reader.onload = (e: ProgressEvent<FileReader>): any => {
+      const text = e.target?.result;
+      const parsed = csvToArray(text as string);
+      const ellipsoid = Ellipsoid.WGS84;
+
+      console.log('Loaded CSV content:\n', text);
+
+      void sampleTerrainMostDetailed(
+        mapViewer.terrainProvider,
+        parsed.map((item) => item.cartographic)
+      ).then(
+        (updatedPositions) => {
+          console.log(updatedPositions);
+
+          mapViewer.scene.globe.depthTestAgainstTerrain = true;
+          mapViewer.entities.suspendEvents();
+          mapViewer.entities.removeAll();
+
+          updatedPositions.forEach((position, idx) => {
+            mapViewer.entities.add({
+              name: (idx + FIRST_DATA_ROW_IDX).toString(),
+              position: ellipsoid.cartographicToCartesian(position),
+              billboard: {
+                verticalOrigin: CesiumVerticalOrigin.BOTTOM,
+                scale: 0.7,
+                image: 'assets/img/map-marker.gif',
+              },
+              label: {
+                text: (idx + FIRST_DATA_ROW_IDX).toString(),
+                font: '14pt monospace',
+                fillColor: CesiumColor.BLACK,
+                style: CesiumLabelStyle.FILL_AND_OUTLINE,
+                outlineWidth: 4,
+                outlineColor: CesiumColor.BLACK,
+                verticalOrigin: CesiumVerticalOrigin.BOTTOM,
+                pixelOffset: new Cartesian2(0, LABEL_PIXEL_OFFSET),
+              },
+              description: `
+                Long: ${parsed[idx].cartesian.x} </br>
+                Lat: ${parsed[idx].cartesian.y} </br>
+                Height(m): <span style="font-weight: 500">${position.height}</span>
+              `,
+            });
+          });
+
+          mapViewer.entities.resumeEvents();
+
+          if (evt.target.files !== null) {
+            exportToCsv(
+              `terranian_heights_${evt.target.files[0].name}`,
+              parsed
+            );
+            evt.target.value = '';
+          }
+
+          console.log(
+            'Pinned point count is ',
+            mapViewer.entities.values.length
+          );
+        },
+        (err) => {
+          console.error('ERROR while sampleTerrainMostDetailed:', err);
+        }
+      );
+    };
+
+    if (evt.target.files?.[0]) {
+      reader.readAsText(evt.target.files[0]);
+    }
+  };
+
+  const exportToCsv = (filename: string, rows: IParsedData[]): void => {
+    const processRow = (row: IParsedData): string => {
+      let finalVal = '';
+      finalVal += row.cartesian.x.toString() + ',';
+      finalVal += row.cartesian.y.toString() + ',';
+      finalVal += row.cartographic.height.toString();
+      return finalVal + '\n';
+    };
+
+    let csvFile = 'long,lat,height\n';
+    rows.forEach((row) => {
+      csvFile += processRow(row);
+    });
+
+    const blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', filename);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <>
+      <input
+        type="file"
+        id="csvFile"
+        accept=".csv"
+        onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+          loadCSV(e);
+        }}
+      />
+    </>
+  );
+};

package/src/lib/date-range-picker/{stories/DateRangePicker.stories.tsx → date-range-picker.stories.tsx}

@@ -1,13 +1,13 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { Story } from '@storybook/react/types-6-0';
-import { CSFStory } from '../../utils/story';
-import { SupportedLocales } from '../../models/enums';
-import { DateTimeRangePicker } from '../date-range-picker';
-import { DateTimeRangePickerFormControl } from '../date-range-picker.form-control';
+import { CSFStory } from '../utils/story';
+import { SupportedLocales } from '../models/enums';
+import { DateTimeRangePicker } from './date-range-picker';
+import { DateTimeRangePickerFormControl } from './date-range-picker.form-control';
 
 export default {
-  title: 'Picker',
+  title: 'Date Range Picker',
   component: DateTimeRangePicker,
 };