feat(default-extent): introduce new component

closes #46

README.md

@@ -12,6 +12,7 @@ Please use [conventional commits](https://www.conventionalcommits.org) with the
 - `utilities`
 - `dart-board`
 - `mouse-trap`
+- `default-extent`
 
 ### NPM Linking
 

package.json

@@ -14,7 +14,8 @@
  "packages/dart-board",
  "packages/layer-selector",
  "packages/mouse-trap",
- "packages/sherlock"
+ "packages/sherlock",
+ "packages/default-extent"
  ],
  "scripts": {
  "build-storybook": "build-storybook",

packages/default-extent/README.md

@@ -0,0 +1,30 @@
+# @ugrc/default-extent
+
+[![NPM version](https://badgen.net/npm/v/@ugrc/default-extent)](https://www.npmjs.com/package/@ugrc/default-extent)
+
+A React component for zooming to a default extent in a map.
+
+Install with [npm](https://www.npmjs.com/)
+
+```bash
+npm install @ugrc/default-extent
+```
+
+## Example
+
+```js
+import HomeButton from '@ugrc/default-extent';
+import Extent from '@arcgis/core/geometry/Extent';
+
+const defaultExtent = new Extent({
+ xmax: -12612006,
+ xmin: -12246370,
+ ymax: 5125456,
+ ymin: 4473357,
+ spatialReference: 3857,
+});
+
+return (
+ <HomeButton view={view.current} position="top-left" extent={defaultExtent} />
+);
+```

packages/default-extent/package.json

@@ -0,0 +1,52 @@
+{
+ "name": "@ugrc/default-extent",
+ "version": "1.0.0",
+ "private": false,
+ "description": "A react component that creates and places a button in an esri map to set the default map view",
+ "keywords": [
+ "ugrc",
+ "component",
+ "arcgis",
+ "esri",
+ "react",
+ "map",
+ "extent",
+ "home"
+ ],
+ "homepage": "https://github.com/agrc/kitchen-sink/tree/main/packages/default-extent",
+ "bugs": {
+ "url": "https://github.com/agrc/kitchen-sink/issues"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/agrc/kitchen-sink.git"
+ },
+ "license": "MIT",
+ "author": "ugrc developers",
+ "maintainers": [
+ {
+ "name": "Steve Gourley",
+ "email": "[email protected]"
+ },
+ {
+ "name": "Scott Davis",
+ "email": "[email protected]"
+ }
+ ],
+ "type": "module",
+ "exports": {
+ ".": "./src/index"
+ },
+ "scripts": {
+ "test": "vitest --config ../../vite.config.js"
+ },
+ "dependencies": {
+ "@ugrc/utilities": "^2.1.1"
+ },
+ "peerDependencies": {
+ "@arcgis/core": "^4.20.0",
+ "prop-types": "^15.8.1",
+ "react": ">=16.8.0",
+ "react-dom": ">=16.8.0"
+ }
+}

packages/default-extent/src/DefaultExtent.stories.jsx

@@ -0,0 +1,20 @@
+import HomeButton from './';
+
+/* eslint import/no-anonymous-default-export: [2, {"allowObject": true}] */
+export default {
+ title: 'DefaultExtent',
+ component: HomeButton,
+ decorators: [
+ (Story) => <div className="esri-ui-top-left esri-ui-corner">{Story()}</div>,
+ ],
+ argTypes: {
+ goTo: { action: 'goTo' },
+ },
+};
+
+export const Normal = (args) => (
+ <HomeButton
+ view={{ goTo: args.goTo, ui: { add: () => {} } }}
+ extent={{}}
+ ></HomeButton>
+);

packages/default-extent/src/index.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import { faGlobeAmericas } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useViewUiPosition } from '@ugrc/utilities/hooks';
+
+const goHome = (view, extent) => {
+ return view.goTo(extent);
+};
+
+export default function DefaultExtent({ view, position, extent }) {
+ const me = useViewUiPosition(view, position);
+
+ return (
+ <button
+ ref={me}
+ className="esri-home esri-widget--button esri-widget"
+ aria-label="Default map view"
+ title="Default map view"
+ onClick={() => goHome(view, extent)}
+ >
+ <FontAwesomeIcon
+ icon={faGlobeAmericas}
+ className="esri-icon esri-icon-home"
+ />
+ </button>
+ );
+}
+
+DefaultExtent.propTypes = {
+ view: PropTypes.object.isRequired,
+ position: PropTypes.oneOf([
+ 'bottom-leading',
+ 'bottom-left',
+ 'bottom-right',
+ 'bottom-trailing',
+ 'top-leading',
+ 'top-left',
+ 'top-right',
+ 'top-trailing',
+ 'manual',
+ ]).isRequired,
+ extent: PropTypes.object.isRequired,
+};