Add stories

- Generate typings on watch mode
- Separate out MapShapeEditor component

lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@togglecorp/re-map",
-    "version": "0.2.0-beta-5",
+    "version": "0.3.0",
     "description": "Maplibre wrapper for React",
     "files": [
         "/build"
@@ -11,8 +11,8 @@
     "typings": "build/esm/index.d.ts",
     "scripts": {
         "prepare": "install-peers",
-        "build": "rm -rf ./build && rollup -c && tsc --project tsconfig-typings.json",
-        "watch": "rollup -c -w",
+        "build": "rm -rf ./build && tsc --project tsconfig-typings.json && rollup -c",
+        "watch": "tsc --project tsconfig-typings.json && rollup -c -w",
         "prepack": "yarn build",
         "typecheck": "tsc",
         "lint": "eslint ./src --report-unused-disable-directives --ignore-pattern '**/*.test.ts'"

lib/rollup.config.js

@@ -6,7 +6,7 @@ import filesize from 'rollup-plugin-filesize';
 
 import pkg from './package.json' assert { type: 'json' };
 
-const INPUT_FILE_PATH = 'src/index.tsx';
+const INPUT_FILE_PATH = ['src/index.tsx', 'src/MapShapeEditor.tsx'];
 
 const PLUGINS = [
     eslint({

lib/src/MapPopup.tsx

@@ -4,7 +4,6 @@ import React, {
     useRef,
     useState,
     useMemo,
-    ReactPortal,
 } from 'react';
 import { createPortal } from 'react-dom';
 import {
@@ -28,7 +27,7 @@ interface Props {
     trackPointer: boolean;
 }
 
-function MapPopup(props: Props): ReactPortal {
+function MapPopup(props: Props) {
     const { map } = useContext(MapChildContext);
     const {
         children,
@@ -115,7 +114,11 @@ function MapPopup(props: Props): ReactPortal {
         [map, onHide],
     );
 
-    return createPortal(children, div);
+    return (
+        <>
+            {createPortal(children, div)}
+        </>
+    );
 }
 
 export default MapPopup;

lib/src/MapSource/MapLayer.tsx

@@ -35,7 +35,7 @@ function removeUndefined<T extends object>(obj: T) {
 
 interface Props {
     layerKey: string;
-    layerOptions: Omit<Exclude<LayerSpecification, BackgroundLayerSpecification>, 'id'>;
+    layerOptions: Omit<Exclude<LayerSpecification, BackgroundLayerSpecification>, 'id' | 'source'>;
     hoverable?: boolean;
     onClick?: (
         feature: GeoJSONFeature,

lib/src/MapSource/index.tsx

@@ -8,20 +8,21 @@ import React, {
 } from 'react';
 import {
     type SourceSpecification,
-    type Source,
-    type GeoJSONSource,
+    type GeoJSONSourceSpecification,
     type LngLatLike,
     Marker,
 } from 'maplibre-gl';
 import { Obj } from '@togglecorp/fujs';
 
-import { getLayerName } from '../utils';
+import { getLayerName, isGeoJSONSourceSpecification, isGeoJSONSource } from '../utils';
 import { MapChildContext, SourceChildContext } from '../context';
 import { Layer } from '../type';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {};
 
+type ModifiedSourceSpecification = Exclude<SourceSpecification, GeoJSONSourceSpecification> | Omit<GeoJSONSourceSpecification, 'data'>;
+
 function useCounter(initialValue = 0): [() => void, number] {
     const [value, updateValue] = useState(initialValue);
     const increaseValue = useCallback(() => {
@@ -40,7 +41,7 @@ type Props = {
     geoJson?: undefined;
 } | {
     managed?: true;
-    sourceOptions: SourceSpecification;
+    sourceOptions: ModifiedSourceSpecification;
     // FIXME: do we need a separate geojson field?
     geoJson?: GeoJSON.Feature<GeoJSON.Geometry>
     | GeoJSON.FeatureCollection<GeoJSON.Geometry>
@@ -87,7 +88,7 @@ function MapSource(props: Props) {
             }
 
             if (initialManaged && initialSourceOptions) {
-                const options = initialSourceOptions.type === 'geojson'
+                const options = isGeoJSONSourceSpecification(initialSourceOptions)
                     ? { ...initialSourceOptions, data: initialGeoJson }
                     : initialSourceOptions;
 
@@ -144,11 +145,6 @@ function MapSource(props: Props) {
             }
             const source = map.getSource(sourceKey);
 
-            function isGeoJSONSource(
-                s: Source,
-            ): s is GeoJSONSource {
-                return !!s && s.type === 'geojson';
-            }
             if (source && isGeoJSONSource(source)) {
                 if (initialDebug) {
                     // eslint-disable-next-line no-console

lib/src/index.tsx

@@ -14,4 +14,4 @@ export { default as MapBounds } from './MapBounds';
 export { default as MapCenter } from './MapCenter';
 export { default as MapPopup } from './MapPopup';
 export { default as MapImage } from './MapImage';
-export { default as MapShapeEditor } from './MapShapeEditor';
+// export { default as MapShapeEditor } from './MapShapeEditor';

lib/src/utils.ts

@@ -1,7 +1,27 @@
-// eslint-disable-next-line import/prefer-default-export
+import {
+    type SourceSpecification,
+    type GeoJSONSourceSpecification,
+    type Source,
+    type GeoJSONSource,
+} from 'maplibre-gl';
+
 export function getLayerName(sourceKey: string, layerKey: string, managed: boolean) {
     if (!managed) {
         return layerKey;
     }
     return `${sourceKey}›${layerKey}`;
 }
+
+type ModifiedSourceSpecification = Exclude<SourceSpecification, GeoJSONSourceSpecification> | Omit<GeoJSONSourceSpecification, 'data'>;
+
+export function isGeoJSONSourceSpecification(
+    s: ModifiedSourceSpecification,
+): s is Omit<GeoJSONSourceSpecification, 'data'> {
+    return !!s && s.type === 'geojson';
+}
+
+export function isGeoJSONSource(
+    s: Source,
+): s is GeoJSONSource {
+    return !!s && s.type === 'geojson';
+}

lib/tsconfig.json

@@ -30,5 +30,5 @@
         "sourceMap": true,
         "baseUrl": "."
     },
-    "include": ["./src/index.tsx", "./src/declarations"]
+    "include": ["./src/index.tsx", "./src/declarations", "./src/MapShapeEditor.tsx"]
 }

storybook/.eslintrc.js

@@ -0,0 +1,65 @@
+module.exports = {
+    extends: [
+        'airbnb',
+        'airbnb/hooks',
+        'plugin:@typescript-eslint/recommended',
+    ],
+    env: {
+        browser: true,
+        jest: true,
+    },
+    plugins: [
+        '@typescript-eslint',
+    ],
+    settings: {
+        'import/resolver': {
+            node: {
+                extensions: ['.js', '.jsx', '.ts', '.tsx'],
+            },
+        },
+        react: {
+            version: 'detect',
+        },
+    },
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaVersion: 2018,
+        ecmaFeatures: {
+            jsx: true,
+        },
+        sourceType: 'module',
+        allowImportExportEverywhere: true,
+    },
+    rules: {
+        strict: 1,
+        indent: ['error', 4, { SwitchCase: 1 }],
+
+        'no-unused-vars': 0,
+        '@typescript-eslint/no-unused-vars': 1,
+
+        'no-use-before-define': 0,
+        '@typescript-eslint/no-use-before-define': 1,
+
+        // note you must disable the base rule as it can report incorrect errors
+        'no-shadow': 'off',
+        '@typescript-eslint/no-shadow': ['error'],
+
+        'import/no-unresolved': ['error'],
+        'import/extensions': ['off', 'never'],
+        'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+
+        'react/prop-types': 0,
+        'react/require-default-props': ['warn', {
+            ignoreFunctionalComponents: true,
+        }],
+
+        'react/jsx-indent': [2, 4],
+        'react/jsx-indent-props': [2, 4],
+        'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
+
+        'import/no-relative-packages': 0,
+
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': 'warn',
+    },
+};

storybook/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

storybook/.storybook/main.js

@@ -0,0 +1,29 @@
+const { mergeConfig } = require('vite');
+
+module.exports = {
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      css: {
+        modules: {
+          localsConvention: 'camelCase',
+        },
+      },
+    });
+  },
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "@storybook/builder-vite"
+  },
+  "features": {
+    "storyStoreV7": true
+  }
+}

storybook/.storybook/preview-head.html

@@ -0,0 +1,12 @@
+<script>
+  window.global = window;
+</script>
+<style>
+    * {
+        box-sizing: border-box;
+    }
+</style>
+
+<!--
+<link href="https://fonts.googleapis.com/css?family=Oxygen+Mono|Source+Sans+Pro:400,600" rel="stylesheet">
+-->

storybook/.storybook/preview.js

@@ -0,0 +1,11 @@
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

storybook/.stylelintrc.json

@@ -0,0 +1,16 @@
+{
+    "plugins": [],
+    "extends": [
+        "stylelint-config-recommended",
+        "stylelint-config-concentric"
+    ],
+    "rules": {
+        "indentation": 4,
+        "selector-pseudo-class-no-unknown": [
+            true,
+            {
+                "ignorePseudoClasses": ["global"]
+            }
+        ]
+    }
+}

storybook/.unimportedrc.json

@@ -0,0 +1,6 @@
+{
+    "entry": ["./stories/**/*.stories.tsx"],
+    "ignorePatterns": ["node_modules/**", "build/**"],
+    "ignoreUnimported": ["**/*.d.ts"],
+    "extensions": [".ts", ".js", ".tsx", ".jsx"]
+}

storybook/declarations/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+    const content: {[className: string]: string};
+    export default content;
+}

storybook/package.json

@@ -0,0 +1,55 @@
+{
+    "name": "@togglecorp/re-map-storybook",
+    "version": "1.0.0",
+    "description": "",
+    "main": "index.js",
+    "scripts": {
+        "typecheck": "tsc",
+        "lint": "eslint ./stories --report-unused-disable-directives",
+        "check-unused": "unimported",
+        "storybook": "start-storybook -p 6006 --no-open",
+        "build-storybook": "build-storybook"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+        "@mapbox/mapbox-gl-draw": "^1.4.3",
+        "@togglecorp/fujs": "^2.0.0",
+        "@togglecorp/re-map": "^0.3.0",
+        "immer": "^10.0.3",
+        "maplibre-gl": "^3.5.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.22.8",
+        "@storybook/addon-actions": "^6.5.12",
+        "@storybook/addon-essentials": "^6.5.12",
+        "@storybook/addon-interactions": "^6.5.12",
+        "@storybook/addon-links": "^6.5.12",
+        "@storybook/builder-vite": "^0.2.3",
+        "@storybook/react": "^6.5.12",
+        "@storybook/testing-library": "^0.0.13",
+        "@types/react": "^18.2.14",
+        "@types/react-dom": "^18.2.6",
+        "@typescript-eslint/eslint-plugin": "^5.61.0",
+        "@typescript-eslint/parser": "^5.61.0",
+        "babel-loader": "^8.2.5",
+        "eslint": "^8.44.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-plugin-import": "^2.27.5",
+        "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-react": "^7.32.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "postcss-nested": "^6.0.0",
+        "postcss-normalize": "^10.0.1",
+        "postcss-preset-env": "^7.8.2",
+        "stylelint": "^14.13.0",
+        "stylelint-config-concentric": "^2.0.2",
+        "stylelint-config-recommended": "^9.0.0",
+        "typescript": "^5.1.6",
+        "unimported": "^1.22.0",
+        "vite": "^3.1.6"
+    }
+}

storybook/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: [
+        require('postcss-nested'),
+        require('postcss-normalize'),
+        require('postcss-preset-env'),
+    ],
+};