agrc / kitchen-sink

UGRC spatial react components.

Kitchen Sink

Development

1. Build the packages
   1. npm run build
2. View the stories
   1. npm run storybook

Conventional Commits

Please use conventional commits with the following scopes:

• monorepo
• layer-selector
• sherlock
• utilities
• dart-board
• mouse-trap

NPM Linking

To test these packages in other local projects, first run npm link -workspaces from the root of this project. Then run npm link @ugrc/dart-board @ugrc/sherlock from the root of your test project. Please note that you need to run npm link for all of the packages at the same time or previous ones will be removed.

Then run npm run build:watch --workspace packages/dart-board to automatically build the package any time a file is saved.

kitchen-sink's Issues

Port Web API Helper Code

agrc/helpers#2

Upgrade Chalkdust

upgrade the chalkdust widget and system to react with the cloud

Switch Storybook Stories to Async

This may help with our empty snapshot tests. Need to wait for this issue to be done in storybook 6.1.

Build Tools

Should we be using webpack to build our distributable code that gets published to npm?

I get the following error when running jest tests in a project that uses sherlock (via npm i @agrc/sherlock):

I don't get this error when running the application itself. I assume that it's because Jest is missing regenerator-runtime. In fact, when I add import 'regenerator-runtime'; to the jest setup file, everything works as expected.

I wonder if there's a way to make our packages work without any special config. I started looking through shared component tutorials and most of them use webpack. Maybe we can use webpack to make a more generic output. Or maybe we just need to add some sort of config to babel? Or maybe, this isn't a big deal. :)

lerna publish

I'm having a hard time publishing to npm it looks like. Wondering if you also have this issue. I wonder if we need to do anything with https://github.com/lerna/lerna/tree/main/commands/publish#readme or the package.json files for each package.

> [email protected] release /Users/sgourley/dev/kitchen-sink
> lerna publish --conventional-commits

lerna notice cli v3.22.1
lerna info versioning independent
lerna info Looking for changed packages since @agrc/[email protected]
lerna info ignoring diff in paths matching [ '*.stories.js', '*.test.js', '*.md' ]
lerna info getChangelogConfig Successfully resolved preset "conventional-changelog-angular"

Changes:
 - @agrc/dart-board: 3.2.1 => 3.2.2
 - @agrc/mouse-trap: 1.1.0 => 1.1.1

? Are you sure you want to publish these packages? Yes
lerna info execute Skipping releases
lerna info git Pushing tags...
lerna info publish Publishing packages to npm...
lerna info Verifying npm credentials
lerna http fetch GET 200 https://registry.npmjs.org/-/npm/v1/user 453ms
lerna http fetch GET 200 https://registry.npmjs.org/-/org/steveoh/package?format=cli 144ms
lerna info Checking two-factor auth mode
lerna http fetch GET 200 https://registry.npmjs.org/-/npm/v1/user 142ms
lerna info lifecycle [email protected]~prepare: [email protected]

> [email protected] prepare /Users/sgourley/dev/kitchen-sink
> npm run build


> [email protected] build /Users/sgourley/dev/kitchen-sink
> lerna exec 'babel src --out-dir dist --root-mode upward --delete-dir-on-start --source-maps --ignore "**/*.stories.js","**/*.test.js" --env-name prod && copyfiles --up 1 src/*.svg dist && sass src:dist'

lerna notice cli v3.22.1
lerna info versioning independent
lerna info Executing command in 5 packages: "babel src --out-dir dist --root-mode upward --delete-dir-on-start --source-maps --ignore \"**/*.stories.js\",\"**/*.test.js\" --env-name prod && copyfiles --up 1 src/*.svg dist && sass src:dist"
Successfully compiled 4 files with Babel (2951ms).
Successfully compiled 3 files with Babel (3174ms).
Successfully compiled 2 files with Babel (3066ms).
Successfully compiled 2 files with Babel (3326ms).
Successfully compiled 1 file with Babel (3545ms).
lerna success exec Executed command in 5 packages: "babel src --out-dir dist --root-mode upward --delete-dir-on-start --source-maps --ignore \"**/*.stories.js\",\"**/*.test.js\" --env-name prod && copyfiles --up 1 src/*.svg dist && sass src:dist"
lerna ERR! 
lerna ERR! lerna ENOENT: no such file or directory, open '/Users/sgourley/dev/kitchen-sink/packages/dartboard/dist/package.json'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] release: `lerna publish --conventional-commits`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] release script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sgourley/.npm/_logs/2020-12-01T18_56_34_682Z-debug.log```

Import useViewUiPosition hook

this is a useful hook and i think we should pull it into kitchen-sink

update layer-selector and possibly other widgets to use this

Port Tests

Bring over old jasmine tests from:

• sherlock
• layer-selector

Layer Change Event

Is your feature request related to a problem? Please describe.
There's no way to know when the base map has changed from outside of this widget.

Describe the solution you'd like
I'd like an event that I could subscribe to that allows me to know when layer visibility has been changed.

Limit results in Sherlock

Seems like sherlock is not putting any limit on the returned results. This should be parameterized and given a reasonable default.

refactor release

agrc/firebase-auth-arcgis-server-proxy@58e0075

this would DRY out some of our action

use conventional commits

url

• build: Changes that affect the build system or external dependencies (example scopes: grunt, dojo, npm)
• ci: Changes to our CI configuration files and scripts (example scopes: Travis)
• docs: Documentation only changes
• feat: A new feature
• fix: A bug fix
• refactor: A code change that neither fixes a bug nor adds a feature
• style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
• test: Adding missing tests or correcting existing tests
• BREAKING CHANGE:

SPEC

1. Commits MUST be prefixed with a type, which consists of a noun, feat, fix, etc., followed by a colon and a space.
2. The type feat MUST be used when a commit adds a new feature to your application or library.
3. The type fix MUST be used when a commit represents a bug fix for your application.
4. An optional scope MAY be provided after a type. A scope is a phrase describing a section of the codebase enclosed in parenthesis, e.g., fix(parser):
5. A description MUST immediately follow the type/scope prefix. The description is a short description of the code changes, e.g., fix: array parsing issue when multiple spaces were contained in string.
6. A longer commit body MAY be provided after the short description, providing additional contextual information about the code changes. The body MUST begin one blank line after the description.
7. A footer MAY be provided one blank line after the body (or after the description if body is missing). The footer SHOULD contain additional issue references about the code changes (such as the issues it fixes, e.g.,Fixes #13).
8. Breaking changes MUST be indicated at the very beginning of the footer or body section of a commit. A breaking change MUST consist of the uppercase text BREAKING CHANGE, followed by a colon and a space.
9. A description MUST be provided after the BREAKING CHANGE: , describing what has changed about the API, e.g., BREAKING CHANGE: environment variables now take precedence over config files.
10. The footer MUST only contain BREAKING CHANGE, external links, issue references, and other meta-information.
11. Types other than feat and fix MAY be used in your commit messages.

Layer selector shows blank base map

The layer selector should reset the map to a scale that has tiles.

When you are zoomed in very far on a layer like imagery and then switch to topo which is not cached at the same level, the selector should trigger the map to zoom to the next available level.

This used to work and may be an issue with react state or something?

.npmignore

I wonder if there's a way that we can hoist the .npmignore file and keep only package-specific entries in the packages.

npm linking layer-selector to another local project causes errors

When I use npm link to load the layer-selector into another local project on my machine, I get strange error messages in the console like this:

Accessor#set Assigning an instance of 'esri.Basemap' which is not a subclass of 'esri.Basemap'

When attempting to step through the code, I noticed two Basemap.js files; one from my local project and one from the kitchen sink project. I'm wondering if this is the cause of the issue. I'm not sure how to tell the browser (or maybe it's Vite?) to load only the arcgis module from my local project.

When I npm install the layer selector package, I don't have the issue.

Making this change fixes the issue but causes other issues in the unit tests:

Automated change log and version number management

It would be nice to automate a changelog and version bump via standard release or something like that. I'm guessing that we would need to standardize our conventional commit scopes.

Import DefaultExtent widget

common component we can import from parole.

A Downshift depedency causes an import error when running in Vite

Installing a @ugrc/sherlock into a freshly bootstrapped vite app causes the dev build to fail with the following message in the console...

Uncaught SyntaxError: The requested module '/node_modules/prop-types/index.js?v=e115d97d' does not provide an export named 'default' (at index.es.js?v=e115d97d:2:8)

This older issue in the Downshift repo appears to be a similar problem but the suggested fix is a deprecated option in the associated @rollup/plugin-commonjs package. I tried adding this plugin to the project and vite config but it didn't seem to have any effect.

sandwich workflow

We need to allow users to sandwich their data in between the base and overlay layers.

One way to do it would be to accept a new construction parameter (sandwich or cheese) that would accept a reference to the layer that the user wants to sandwich. The user would then be responsible to control visibility of the layer independent of the layer-selector widget.

npm install vs npm link

npm install @agrc/layer-seletor@canary functions properly when npm link @agrc/layer-selector causes a violation of hooks...

the npm link creates a link to the layer-selector folder which contains the dist folder which is the same behavior as when npm installing.

npm ls react and react-dom both return the same version, 16.12.0. I'm hearing that maybe the link command is bundling the same version twice because of bundling weirdness causing the error?

4.12 esri js replacement changes

Describe the bug

Using esri 4.12 js api, requests to discover contain dollar signs $.

Expected behavior

url should not contain $.

Additional context

The replacing function was reimplemented for intl. Dojo was probably handling the ${var} replacement but esri only expects {var} now.

Update the layer selector to use the backward compatible {var} style.

Initial Extent is not working correctly

It's zoomed out way too much. For some reason the zoom prop that we are setting on the view is not being honored. Maybe coming up with a scale value might be best. Or passing the extent as a bounding box might be better.

ci: npm publishing

Every package is tried to be published only if a few releases are created. This causes publishing to exit early. I found this guy doing something different that might work?

from https://github.com/shaka-project/generic-webdriver-server/blob/41e8035f997bce0a1628b3aee7855f4d9fbd0104/.github/workflows/release-please.yaml#L13

- name: Publish all changed packages
        if: steps.release.outputs.releases_created
        run: |
          npm ci
          npm --prefix base ci
          for i in base backends/*; do
            PACKAGE=$(jq -r .name < "$i"/package.json)
            PRIVATE=$(jq -r .private < "$i"/package.json)
            if [[ "$PRIVATE" == "true" ]]; then
              echo "Skipping $i ($PACKAGE is private)"
              continue
            fi
            SOURCE_VERSION=$(jq -r .version < "$i"/package.json)
            LAST_PUBLISHED=$(npm view "$PACKAGE" version 2>/dev/null)
            if [[ "$LAST_PUBLISHED" == "$SOURCE_VERSION" ]]; then
              echo "Skipping $i ($PACKAGE $SOURCE_VERSION is up-to-date)"
              continue
            fi
            echo "Publishing $i ($PACKAGE $SOURCE_VERSION replacing $LAST_PUBLISHED)"
            # NOTE: Using npm --prefix _DOES NOT_ seem to work with publish
            # here.  So we use pushd/popd instead.
            set -e
            pushd "$i"
            npm ci
            npm publish
            popd
            set +e
          done

create analytics tracking behavior

on basemap layer switching

Preserve overlay layer order

Right now the layers are ordered by the sequence of when they are turned on. This can be undesirable if you have point and polygons as overlays (you likely want the points on top of the polygons always).

It would be better to guarantee the order of the overlays based on how they are passed into the widget.