diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..3e775ef --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +auto-install-peers=true diff --git a/README.md b/README.md index 4f70ecb..a12da75 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,34 @@ -# Map +# Place components [![npm @opensystemslab/map](https://img.shields.io/npm/v/@opensystemslab/map?style=flat-square)](http://npm.im/@opensystemslab/map) -An [OpenLayers](https://openlayers.org/)-powered [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) map for tasks related to planning permission in the UK. +A library of [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) for tasks related to addresses and planning permission in the UK built with [Lit](https://lit.dev/), [Vite](https://vitejs.dev/), and [Ordnance Survey APIs](https://developer.ordnancesurvey.co.uk/). -![anim](https://user-images.githubusercontent.com/601961/128994212-11ffa793-5db4-4cac-a616-a2f949fe9360.gif) +***Web map*** -## Demo +`` is an [OpenLayers](https://openlayers.org/)-powered map to support drawing and modifying red-line boundaries. Other supported modes include: highlighting an OS Feature that intersects with a given address point; clicking to select and merge multiple OS Features into a single boundary; and displaying static point or polygon data. Events are dispatched with the calculated area and geojson representation when you change your drawing. -- Interactive docs [oslmap.netlify.app](https://oslmap.netlify.app) +![chrome-capture-2022-7-16-map](https://user-images.githubusercontent.com/5132349/184860750-bf7514db-7cab-4f9c-aa32-791099ecd6cc.gif) + +***Postcode search*** + +`` is a [GOV.UK-styled](https://frontend.design-system.service.gov.uk/) input that validates UK postcodes using these [utility methods](https://www.npmjs.com/package/postcode). When a postcode is validated, an event is dispatched containing the sanitized string. + +***Address autocomplete*** + +`` fetches addresses in a given UK postcode using the [OS Places API](https://developer.ordnancesurvey.co.uk/os-places-api) and displays them using GOV.UK's [accessible-autocomplete](https://github.com/alphagov/accessible-autocomplete) component. An event is dispatched with the OS record when you select an address. + +These web components can be used independently or together following GOV.UK's [Address lookup](https://design-system.service.gov.uk/patterns/addresses/) design pattern. + +![chrome-capture-2022-7-16 (1)](https://user-images.githubusercontent.com/5132349/184858819-133bc7fa-7f48-4a2a-a416-b612febcce58.gif) + +## Documentation & examples + +- Interactive web component docs [oslmap.netlify.app](https://oslmap.netlify.app) - [CodeSandbox](https://codesandbox.io/s/confident-benz-rr0s9?file=/index.html) (note: update the CDN script with a version number for new features) +Find these components in the wild, including what we're learning through public beta user-testing, at [https://www.ripa.digital/](https://www.ripa.digital/). + ## Running locally - Rename `.env.example` to `.env.local` and replace the values - or simply provide your API keys as props @@ -30,7 +48,7 @@ Unit tests are written with [Vitest](https://vitest.dev/), [Happy Dom](https://w We use [Pitsby](https://pitsby.com/) for documenting our web components. It's simple to configure (`pitsby.config.js` plus a `*.doc.js` per component), has good support for vanilla web components, and an interactive playground. - `pnpm run docs` starts Pitsby in watch mode for local development -- `pnpm run docsPublish` builds the site so Netlify can serve it from `./pitsby` +- `pnpm run docsPublish` builds the site so Netlify can serve it from `pitsby/` ## License diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e44dbe0..568dd93 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: 5.3 +lockfileVersion: 5.4 specifiers: '@glorious/pitsby': ^1.30.16 @@ -35,9 +35,9 @@ dependencies: rambda: 7.0.3 devDependencies: - '@glorious/pitsby': 1.30.16 + '@glorious/pitsby': 1.30.16_angular@1.8.3 '@testing-library/dom': 8.17.1 - '@testing-library/user-event': 14.4.3_@testing-library+dom@8.17.1 + '@testing-library/user-event': 14.4.3_wl4iynrlixafokvgqnhzlvigei '@types/node': 18.6.3 '@vitest/ui': 0.8.5 happy-dom: 2.55.0 @@ -47,8 +47,8 @@ devDependencies: rollup-plugin-postcss-lit: 2.0.0 sass: 1.44.0 typescript: 4.3.5 - vite: 3.0.4_sass@1.44.0 - vitest: 0.20.3_3519a119273ba0483981f2a35b20e076 + vite: 3.0.4_sass@1.44.0+stylus@0.58.1 + vitest: 0.20.3_gx7qaiblkd2763nwmafl7jfmva packages: @@ -1224,7 +1224,7 @@ packages: shortid: 2.2.16 dev: true - /@glorious/pitsby/1.30.16: + /@glorious/pitsby/1.30.16_angular@1.8.3: resolution: {integrity: sha512-MITyBmt4v5NrlYEDnTN1lG+Wl9GX9m6YnERT80zynnXrqJ9aOvtQQLfQVTHuhKz6XAlojbQrVh3/NEcOGigvdw==} hasBin: true dependencies: @@ -1232,9 +1232,9 @@ packages: '@babel/preset-env': 7.18.10_@babel+core@7.18.10 '@babel/standalone': 7.18.10 '@glorious/fyzer': 0.1.10 - '@uirouter/angularjs': 1.0.30 + '@uirouter/angularjs': 1.0.30_angular@1.8.3 axios: 0.21.4 - babel-loader: 8.2.5_b8bce14f87162c3885dc6907ec4c380b + babel-loader: 8.2.5_xc6oct4hcywdrbo4ned6ytbybm brace: 0.11.1 chokidar: 3.5.3 copy-webpack-plugin: 11.0.0_webpack@5.74.0 @@ -1252,10 +1252,10 @@ packages: prismjs: 1.28.0 style-loader: 3.3.1_webpack@5.74.0 stylus: 0.58.1 - stylus-loader: 7.0.0_stylus@0.58.1+webpack@5.74.0 + stylus-loader: 7.0.0_opfhcjf5g5texmct6gy27c44rm webpack: 5.74.0_webpack-cli@4.10.0 - webpack-cli: 4.10.0_2ba833df06cf183801f4001aeb6546b3 - webpack-dev-server: 4.9.3_ed7de2690da194b35567e1e94055cb2c + webpack-cli: 4.10.0_webpack@5.74.0 + webpack-dev-server: 4.9.3_5v66e2inugklgvlh4huuavolfq webpack-merge: 5.8.0 transitivePeerDependencies: - '@parcel/css' @@ -1405,7 +1405,7 @@ packages: pretty-format: 27.5.1 dev: true - /@testing-library/user-event/14.4.3_@testing-library+dom@8.17.1: + /@testing-library/user-event/14.4.3_wl4iynrlixafokvgqnhzlvigei: resolution: {integrity: sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==} engines: {node: '>=12', npm: '>=6'} peerDependencies: @@ -1595,13 +1595,14 @@ packages: '@types/node': 18.6.3 dev: true - /@uirouter/angularjs/1.0.30: + /@uirouter/angularjs/1.0.30_angular@1.8.3: resolution: {integrity: sha512-qkc3RFZc91S5K0gc/QVAXc9LGDPXjR04vDgG/11j8+yyZEuQojXxKxdLhKIepiPzqLmGRVqzBmBc27gtqaEeZg==} engines: {node: '>=4.0.0'} peerDependencies: angular: '>=1.2.0' dependencies: '@uirouter/core': 6.0.8 + angular: 1.8.3 dev: true /@uirouter/core/6.0.8: @@ -1721,14 +1722,14 @@ packages: '@xtuc/long': 4.2.2 dev: true - /@webpack-cli/configtest/1.2.0_ed7de2690da194b35567e1e94055cb2c: + /@webpack-cli/configtest/1.2.0_5v66e2inugklgvlh4huuavolfq: resolution: {integrity: sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==} peerDependencies: webpack: 4.x.x || 5.x.x webpack-cli: 4.x.x dependencies: webpack: 5.74.0_webpack-cli@4.10.0 - webpack-cli: 4.10.0_2ba833df06cf183801f4001aeb6546b3 + webpack-cli: 4.10.0_webpack@5.74.0 dev: true /@webpack-cli/info/1.5.0_webpack-cli@4.10.0: @@ -1737,10 +1738,10 @@ packages: webpack-cli: 4.x.x dependencies: envinfo: 7.8.1 - webpack-cli: 4.10.0_2ba833df06cf183801f4001aeb6546b3 + webpack-cli: 4.10.0_webpack@5.74.0 dev: true - /@webpack-cli/serve/1.7.0_4c58ec6b3c7bd9e91c91ce21a56852c0: + /@webpack-cli/serve/1.7.0_webpack-cli@4.10.0: resolution: {integrity: sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==} peerDependencies: webpack-cli: 4.x.x @@ -1749,8 +1750,7 @@ packages: webpack-dev-server: optional: true dependencies: - webpack-cli: 4.10.0_2ba833df06cf183801f4001aeb6546b3 - webpack-dev-server: 4.9.3_ed7de2690da194b35567e1e94055cb2c + webpack-cli: 4.10.0_webpack@5.74.0 dev: true /@xtuc/ieee754/1.2.0: @@ -1860,6 +1860,11 @@ packages: uri-js: 4.4.1 dev: true + /angular/1.8.3: + resolution: {integrity: sha512-5qjkWIQQVsHj4Sb5TcEs4WZWpFeVFHXwxEBHUhrny41D8UrBAd6T/6nPPAsLngJCReIOqi95W3mxdveveutpZw==} + deprecated: For the actively supported Angular, see https://www.npmjs.com/package/@angular/core. AngularJS support has officially ended. For extended AngularJS support options, see https://goo.gle/angularjs-path-forward. + dev: true + /ansi-escapes/4.3.2: resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==} engines: {node: '>=8'} @@ -1969,7 +1974,7 @@ packages: - debug dev: true - /babel-loader/8.2.5_b8bce14f87162c3885dc6907ec4c380b: + /babel-loader/8.2.5_xc6oct4hcywdrbo4ned6ytbybm: resolution: {integrity: sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==} engines: {node: '>= 8.9'} peerDependencies: @@ -5555,7 +5560,7 @@ packages: postcss-selector-parser: 6.0.10 dev: true - /stylus-loader/7.0.0_stylus@0.58.1+webpack@5.74.0: + /stylus-loader/7.0.0_opfhcjf5g5texmct6gy27c44rm: resolution: {integrity: sha512-WTbtLrNfOfLgzTaR9Lj/BPhQroKk/LC1hfTXSUbrxmxgfUo3Y3LpmKRVA2R1XbjvTAvOfaian9vOyfv1z99E+A==} engines: {node: '>= 14.15.0'} peerDependencies: @@ -5885,7 +5890,7 @@ packages: engines: {node: '>= 0.8'} dev: true - /vite/3.0.4_sass@1.44.0: + /vite/3.0.4_sass@1.44.0+stylus@0.58.1: resolution: {integrity: sha512-NU304nqnBeOx2MkQnskBQxVsa0pRAH5FphokTGmyy8M3oxbvw7qAXts2GORxs+h/2vKsD+osMhZ7An6yK6F1dA==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -5909,11 +5914,12 @@ packages: resolve: 1.22.1 rollup: 2.77.2 sass: 1.44.0 + stylus: 0.58.1 optionalDependencies: fsevents: 2.3.2 dev: true - /vitest/0.20.3_3519a119273ba0483981f2a35b20e076: + /vitest/0.20.3_gx7qaiblkd2763nwmafl7jfmva: resolution: {integrity: sha512-cXMjTbZxBBUUuIF3PUzEGPLJWtIMeURBDXVxckSHpk7xss4JxkiiWh5cnIlfGyfJne2Ii3QpbiRuFL5dMJtljw==} engines: {node: '>=v14.16.0'} hasBin: true @@ -5948,7 +5954,7 @@ packages: local-pkg: 0.4.2 tinypool: 0.2.4 tinyspy: 1.0.0 - vite: 3.0.4_sass@1.44.0 + vite: 3.0.4_sass@1.44.0+stylus@0.58.1 transitivePeerDependencies: - less - sass @@ -5984,7 +5990,7 @@ packages: engines: {node: '>=12'} dev: true - /webpack-cli/4.10.0_2ba833df06cf183801f4001aeb6546b3: + /webpack-cli/4.10.0_webpack@5.74.0: resolution: {integrity: sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==} engines: {node: '>=10.13.0'} hasBin: true @@ -6005,9 +6011,9 @@ packages: optional: true dependencies: '@discoveryjs/json-ext': 0.5.7 - '@webpack-cli/configtest': 1.2.0_ed7de2690da194b35567e1e94055cb2c + '@webpack-cli/configtest': 1.2.0_5v66e2inugklgvlh4huuavolfq '@webpack-cli/info': 1.5.0_webpack-cli@4.10.0 - '@webpack-cli/serve': 1.7.0_4c58ec6b3c7bd9e91c91ce21a56852c0 + '@webpack-cli/serve': 1.7.0_webpack-cli@4.10.0 colorette: 2.0.19 commander: 7.2.0 cross-spawn: 7.0.3 @@ -6016,7 +6022,6 @@ packages: interpret: 2.2.0 rechoir: 0.7.1 webpack: 5.74.0_webpack-cli@4.10.0 - webpack-dev-server: 4.9.3_ed7de2690da194b35567e1e94055cb2c webpack-merge: 5.8.0 dev: true @@ -6034,7 +6039,7 @@ packages: webpack: 5.74.0_webpack-cli@4.10.0 dev: true - /webpack-dev-server/4.9.3_ed7de2690da194b35567e1e94055cb2c: + /webpack-dev-server/4.9.3_5v66e2inugklgvlh4huuavolfq: resolution: {integrity: sha512-3qp/eoboZG5/6QgiZ3llN8TUzkSpYg1Ko9khWX1h40MIEUNS2mDoIa8aXsPfskER+GbTvs/IJZ1QTBBhhuetSw==} engines: {node: '>= 12.13.0'} hasBin: true @@ -6073,7 +6078,7 @@ packages: sockjs: 0.3.24 spdy: 4.0.2 webpack: 5.74.0_webpack-cli@4.10.0 - webpack-cli: 4.10.0_2ba833df06cf183801f4001aeb6546b3 + webpack-cli: 4.10.0_webpack@5.74.0 webpack-dev-middleware: 5.3.3_webpack@5.74.0 ws: 8.8.1 transitivePeerDependencies: @@ -6129,7 +6134,7 @@ packages: tapable: 2.2.1 terser-webpack-plugin: 5.3.3_webpack@5.74.0 watchpack: 2.4.0 - webpack-cli: 4.10.0_2ba833df06cf183801f4001aeb6546b3 + webpack-cli: 4.10.0_webpack@5.74.0 webpack-sources: 3.2.3 transitivePeerDependencies: - '@swc/core'