Merge pull request #47 from MartinP460/v2

[V2] Publish v2

.eslintrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['custom']
+}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,7 +4,6 @@ about: Create a report to help us improve
 title: ''
 labels: bug
 assignees: ''
-
 ---
 
 ### Description
@@ -30,8 +29,8 @@ Steps to reproduce the behavior:
 
 ### Specifications
 
- - Browser: [e.g. chrome, safari]
- - `react-denmark-map` version: [e.g. 22]
+- Browser: [e.g. chrome, safari]
+- `react-denmark-map` version: [e.g. 22]
 
 ### Additional context
 

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Suggest an new feature
 title: ''
 labels: feature request
 assignees: ''
-
 ---
 
 ### Description

.gitignore

@@ -1,2 +1,4 @@
 node_modules
-dist
+dist
+.turbo
+**/.DS_STORE

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint && npm run test

.prettierignore

@@ -0,0 +1,2 @@
+**/.next
+**/dist

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}

CHANGELOG.md

@@ -5,6 +5,39 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0] - 2024-03-07
+
+### Added
+
+- Zoom functionality. Added the ability to zoom in and out of the map. Zoom buttons appear in the top-right hand corner by default.
+- Prop: `customZoomControls`. Pass a functional React component to render your own zoom-in and zoom-out buttons.
+- Prop: `zoomable`. Whether to have the map be zoomable and subsequently if zoom controls should be rendered.
+- Added JSDoc comments to all props.
+- Added English terms for regions.
+- Added accessibility attribute to the tooltip.
+- Added a new logo.
+- Added the demo Next.js project to the same repository as the package.
+- Added a homepage to the demo.
+
+### Changed
+
+- Changed path definitions for each area in all renditions of the map, resulting in a ~30% decrease in the overall SVG size.
+- Changed the definition of the `customTooltip` prop to allow passing a React component by having the first and only parameter by an object (props) containing `area`.
+- Changed the name of fields in the area types as follows:
+  - `en_name` -> `asciiName`
+  - `display_name` -> `displayName`
+  - `en_term` -> `enTerm`
+- Improved typing by providing explicit constant values for fields in each area.
+- Removed several `data-` attributes from the individual path elements and replaced it with a single one called `data-area-id` which is the `id` property on the rendered area object.
+- Updated the documentation to account for the new changes.
+- Updated dev dependencies.
+- Started using Turborepo for seperation of packages and apps.
+
+### Removed
+
+- Removed all `-altPosition` props.
+- Removed the use of React default props.
+
 ## [1.3.1] - 2023-09-21
 
 ### Added

CONTRIBUTING.md

@@ -3,9 +3,9 @@
 Thank you for considering contributing! 🙌 `react-denmark-map` was created as a small project with the main goal of helping myself learn React. Therefore, `react-denmark-map` is not just a library but also a learning space! If you are a beginner in React or in contributing to open-source, you are welcome (and encouraged) to contribute. Below you can find an outline on how and what to contribute to `react-denmark-map`.
 
 1. [What to contribute](#what-to-contribute)
-2. [Workflow](#workflow)
-3. [Running locally](#running-locally)
-4. [Folder structure](#folder-structure)
+2. [Running locally](#running-locally)
+3. [Folder structure](#folder-structure)
+4. [Workflow](#workflow)
 
 ## What to contribute
 
@@ -15,6 +15,35 @@ There are three ways you can contribute:
 2. **Solving tasks from "Issues"**. Issues are opened in the ["Issues" tab](https://github.com/MartinP460/react-denmark-map/issues) on Github. Other than actual issues, the "Issues" page is also used for suggesting enhancements to the library. Tasks won't always be available so feel free to come up with your own improvements. If you find a task you would like to work on, add a new comment to say that you will start working on it (that is if someone else hasn't already!). After that, you can begin working on the task.
 3. **Adding your own enhancement**. If you think you can enhance `react-denmark-map` in any way, you are free to fork the repo, add the changes locally and open a new PR. But please create an issue before working on it.
 
+## Running locally
+
+[Open an issue](https://github.com/MartinP460/react-denmark-map/issues/new) if you encounter problems getting it running.
+
+The repo consists of the core package, an ESLint configuration package and the demo app. The core directory is `packages/core`. There are two ways to run scripts - by running them from the root directory and by `cd`-ing into the package and running them from there. Instructions for running scripts are under the `README.md` in each package. The root scripts are:
+
+```zsh
+npm run format                              /* Formats files using ESLint. */
+npm run lint                                /* Checks formatting of files using ESLint. */
+npm run storybook                           /* Runs storybook (for visual testing of the package). */
+npm run test                                /* Runs all tests. */
+```
+
+There are Git hooks set up that run tests before you push.
+
+## Folder structure
+
+Below is a very top-level view of the repository.
+
+```zsh
+apps/
+└── demo                                    /* Demo Next.js app. */
+packages/
+├── eslint-config-custom                    /* Shared ESLint configuration. */
+└── core                                    /* The core react-denmark-map components. */
+```
+
+To be clear, the components contained in the actual NPM package are in the `packages/core`.
+
 ## Workflow
 
 ### Branches
@@ -27,7 +56,9 @@ There is no formal convention on commits but try to keep your commits small and
 
 ### Testing
 
-When making changes, you should make sure that the change works visually (if it's a visual change). You can use Storybook to do this.
+In terms of testing, the core components in `packages/core` are the ones that need testing (visually and with unit tests). There's no need to write tests for the demo app.
+
+When making changes in that package, you should make sure that the change works visually (if it's a visual change). You can use Storybook to do this (see [Running locally](#running-locally)).
 
 Unit tests are written for the `Map` component. If you're adding a new prop or modifying an existing, make sure to add test(s) to verify that it works as intended.
 
@@ -47,44 +78,3 @@ Once your changes are ready, [submit your branch as a pull request](https://docs
 3. How to test your changes
 
 And that's it for now! 👏 Your changes will be reviewed within (hopefully!) a few days and then merged.
-
-## Running locally
-
-[Open an issue](https://github.com/MartinP460/react-denmark-map/issues/new) if you encounter problems getting it running.
-
-The repo consists of a `src` project which is the core package. There are two main scripts in the root directory:
-
-```zsh
-npm run storybook
-
-npm run test
-```
-
-Use the `storybook` command to run Storybook to test changes visually. Use the `test` command to run unit tests on watch mode.
-
-## Folder structure
-
-The tree below should give you an idea of the folder structure.
-
-```
-src/
-└── components/
-    ├── areas/
-    │   ├── municipalities/
-    │   │   ├── Municipalities.stories.tsx   /* Storybook component for a particular map display. */
-    │   │   ├── Constituencies.tsx           /* Primary component rendering the map display. */
-    │   │   ├── data.ts                      /* The SVG data for rendering the particular map. */
-    │   │   └── index.ts                     /* Default export of the component. */
-    │   ├── denmark/
-    │   ├── islands/
-    │   ├── constituencies/
-    │   └── regions/
-    └── map/
-        ├── Map.test.tsx                     /* Unit tests for the `Map` component. */
-        ├── Map.tsx                          /* The underlying map component rendered by each map display. */
-        └── Tooltip.tsx                      /* The tooltip for the `Map`` component. */
-```
-
-The directories in `areas` contain similar files and are used to render each display/version of the map of Denmark.
-
-You should be able to get a good idea of the code by just exploring it.

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Martin Polley
+Copyright (c) 2022 - 2024 Martin Polley
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

MIGRATION.md

@@ -0,0 +1,42 @@
+# Migration guide
+
+This is a migration guide to walk you through the process of upgrading to react-denmark-map 2.0 from version 1.
+
+### New features
+
+1. **Zooming**. Zoom controls now appear in the top-right hand corner of every rendition of the map which allows users to zoom in and out. You can disable this zooming or choose to customize it by passing a component as a prop.
+2. **Memoization**. All map renditions are now memoized, meaning that you may be able to get a slight performance boost if your parent component rerenders frequently and you memoize props.
+3. **Better intellisense**. The fields in the type of areas in each rendition of the map are now explicit constants. For example, the `name` property on the `MunicipalityType` has the type `'norddjurs' | 'syddjurs' | 'koebenhavn' ...` instead of just `string`. Moreover, new JSDoc strings have been added for each prop.
+
+Finally, all map SVG's are now ~30% smaller which should improve load times and rendering performance 🏎️
+
+### Breaking changes
+
+1. **Tooltip type**. Changed the type of `customTooltip` to be a React component instead of a regular function to allow for greater abstraction. Below is an example of how it's used now.
+
+   ```jsx
+   import { Municipalities } from 'react-denmark-map'
+
+   const CustomTooltip = ({ area }) => {
+     return (
+       <div className="tooltip">
+         <p>Name: {area.displayName}</p>
+         <p>Municipality code: {area.code}</p>
+       </div>
+     )
+   }
+
+   const App = () => <Municipalities customTooltip={CustomTooltip} />
+   ```
+
+   You can otherwise just destructure the first parameter, `area`, if you want to avoid the slight hassle of converting it to a React component.
+
+2. **Renamed area fields**. Some keys in the area object have been renamed. These are specifically:
+   - `en_name` -> `asciiName`
+   - `display_name` -> `displayName`
+   - `en_term` -> `enTerm`
+3. **Positioning**. If you used the `className` or `style` properties to adjust the position of the map, you should instead wrap `<Map />` in a seperate element and position that. This was always the recommended approach but the ability to zoom breaks positioning using this method.
+4. **Viewbox**. All maps now have the same SVG viewbox dimensions of 1000 x 1215 so you should use these dimensions to customize the viewbox.
+5. **Alt positions**. Removed all `altPosition-` props. These props rendered some islands closer to the mainland.
+
+You can find more information about the changes by reading the updated documentation. Thank you for using react-denmark-map! 🇩🇰