Vite + TypeScript (#836)

Resolves #803

This is an initial commit to allow migrating to typescript bit by bit.
It introduces vite.
It removes all the webpack configuration (which I have no clue what all
the profiling are needed for, and couldn't find anything in the readme).
It also changes a single file from javascript to typescript:
`urlopen.js` -> `urlopen.ts`
Which was done manually, later on I'll see if I can automate most of the
migration.
For now, everything seems to work as expected.
I also upgrades storybook to use vite and renames the stories to jsx (I
honestly don't know why this complexity is needed here, but I'll keep it
for now).

cc: @damianstasik

stories/FieldArray.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldArray from '../src/components/FieldArray';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldArray',
   component: FieldArray,
-  decorators: [withA11y],
 };
 
 

stories/FieldAutocomplete.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldAutocomplete from '../src/components/FieldAutocomplete';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldAutocomplete',
   component: FieldAutocomplete,
-  decorators: [withA11y],
 };
 
 

stories/FieldCheckbox.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldCheckbox from '../src/components/FieldCheckbox';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldCheckbox',
   component: FieldCheckbox,
-  decorators: [withA11y],
 };
 
 

stories/FieldColor.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldColor from '../src/components/FieldColor';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldColor',
   component: FieldColor,
-  decorators: [withA11y],
 };
 
 

stories/FieldDynamicArray.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldDynamicArray from '../src/components/FieldDynamicArray';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldDynamicArray',
   component: FieldDynamicArray,
-  decorators: [withA11y],
 };
 
 

stories/FieldEnum.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldEnum from '../src/components/FieldEnum';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldEnum',
   component: FieldEnum,
-  decorators: [withA11y],
 };
 
 

stories/FieldFunction.stories.jsx

@@ -1,15 +1,11 @@
 import React from 'react';
 import FieldFunction from '../src/components/FieldFunction';
-import {action} from '@storybook/addon-actions';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 import {latest} from '@maplibre/maplibre-gl-style-spec'
 
 
 export default {
   title: 'FieldFunction',
   component: FieldFunction,
-  decorators: [withA11y],
 };
 
 export const Basic = () => {

stories/FieldMultiInput.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldMultiInput from '../src/components/FieldMultiInput';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldMultiInput',
   component: FieldMultiInput,
-  decorators: [withA11y],
 };
 
 

stories/FieldNumber.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldNumber from '../src/components/FieldNumber';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldNumber',
   component: FieldNumber,
-  decorators: [withA11y],
 };
 
 export const Basic = () => {

stories/FieldSelect.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldSelect from '../src/components/FieldSelect';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldSelect',
   component: FieldSelect,
-  decorators: [withA11y],
 };
 
 

stories/FieldString.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldString from '../src/components/FieldString';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldString',
   component: FieldString,
-  decorators: [withA11y],
 };
 
 

stories/FieldUrl.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldUrl from '../src/components/FieldUrl';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldUrl',
   component: FieldUrl,
-  decorators: [withA11y],
 };
 
 

stories/IconLayer.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import IconLayer from '../src/components/IconLayer';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'IconLayer',
   component: IconLayer,
-  decorators: [withA11y],
 };
 
 export const IconList = () => {

stories/InputArray.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputArray from '../src/components/InputArray';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputArray',
   component: InputArray,
-  decorators: [withA11y],
 };
 
 

stories/InputAutocomplete.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputAutocomplete from '../src/components/InputAutocomplete';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputAutocomplete',
   component: InputAutocomplete,
-  decorators: [withA11y],
 };
 
 

stories/InputButton.stories.jsx

@@ -2,13 +2,10 @@ import React from 'react';
 import InputButton from '../src/components/InputButton';
 import {action} from '@storybook/addon-actions';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
 
 export default {
   title: 'InputButton',
   component: InputButton,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/InputCheckbox.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputCheckbox from '../src/components/InputCheckbox';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputCheckbox',
   component: InputCheckbox,
-  decorators: [withA11y],
 };
 
 

stories/InputColor.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputColor from '../src/components/InputColor';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputColor',
   component: InputColor,
-  decorators: [withA11y],
 };
 
 

stories/InputDynamicArray.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputDynamicArray from '../src/components/InputDynamicArray';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputDynamicArray',
   component: InputDynamicArray,
-  decorators: [withA11y],
 };
 
 

stories/InputEnum.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputEnum from '../src/components/InputEnum';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputEnum',
   component: InputEnum,
-  decorators: [withA11y],
 };
 
 

stories/InputJson.stories.jsx

@@ -2,13 +2,10 @@ import React from 'react';
 import InputJson from '../src/components/InputJson';
 import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
 
 export default {
   title: 'InputJson',
   component: InputJson,
-  decorators: [withA11y],
 };
 
 export const Basic = () => {

stories/InputMultiInput.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputMultiInput from '../src/components/InputMultiInput';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputMultiInput',
   component: InputMultiInput,
-  decorators: [withA11y],
 };
 
 

stories/InputNumber.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputNumber from '../src/components/InputNumber';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputNumber',
   component: InputNumber,
-  decorators: [withA11y],
 };
 
 export const Basic = () => {

stories/InputSelect.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputSelect from '../src/components/InputSelect';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputSelect',
   component: InputSelect,
-  decorators: [withA11y],
 };
 
 

stories/InputString.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputString from '../src/components/InputString';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputString',
   component: InputString,
-  decorators: [withA11y],
 };
 
 

stories/InputUrl.stories.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {useActionState} from './helper';
 import InputUrl from '../src/components/InputUrl';
 import {InputContainer} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'InputUrl',
   component: InputUrl,
-  decorators: [withA11y],
 };
 
 

stories/LayerEditor.stories.jsx

@@ -1,14 +1,10 @@
 import React from 'react';
 import LayerEditor from '../src/components/LayerEditor';
-import {action} from '@storybook/addon-actions';
-import {withA11y} from '@storybook/addon-a11y';
-import {latest} from '@maplibre/maplibre-gl-style-spec'
 
 
 export default {
   title: 'LayerEditor',
   component: LayerEditor,
-  decorators: [withA11y],
 };
 
 export const Background = () => (

stories/LayerListItem.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import LayerList from '../src/components/LayerList';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'LayerList',
   component: LayerList,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/MapMaplibreGl.stories.jsx

@@ -1,14 +1,9 @@
 import React from 'react';
 import MapMaplibreGl from '../src/components/MapMaplibreGl';
-import {action} from '@storybook/addon-actions';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
 
 export default {
   title: 'MapMaplibreGl',
   component: MapMaplibreGl,
-  decorators: [withA11y],
 };
 
 const mapStyle = {

stories/MapOpenLayers.stories.jsx

@@ -1,14 +1,10 @@
 import React from 'react';
 import MapOpenLayers from '../src/components/MapOpenLayers';
-import {action} from '@storybook/addon-actions';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'MapOpenLayers',
   component: MapOpenLayers,
-  decorators: [withA11y],
 };
 
 const mapStyle = {

stories/Modal.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import Modal from '../src/components/Modal';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'Modal',
   component: Modal,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ModalAdd.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import ModalAdd from '../src/components/ModalAdd';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'ModalAdd',
   component: ModalAdd,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ModalDebug.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import ModalDebug from '../src/components/ModalDebug';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'ModalDebug',
   component: ModalDebug,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ModalExport.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import ModalExport from '../src/components/ModalExport';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'ModalExport',
   component: ModalExport,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ModalLoading.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import ModalLoading from '../src/components/ModalLoading';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'ModalLoading',
   component: ModalLoading,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ModalOpen.stories.jsx

@@ -2,13 +2,11 @@ import React from 'react';
 import ModalOpen from '../src/components/ModalOpen';
 import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'ModalOpen',
   component: ModalOpen,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ModalSettings.stories.jsx

@@ -2,13 +2,10 @@ import React from 'react';
 import ModalSettings from '../src/components/ModalSettings';
 import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
 
 export default {
   title: 'ModalSettings',
   component: ModalSettings,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ModalSources.stories.jsx

@@ -2,13 +2,11 @@ import React from 'react';
 import ModalSources from '../src/components/ModalSources';
 import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'ModalSources',
   component: ModalSources,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ModalSurvey.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import ModalSurvey from '../src/components/ModalSurvey';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'ModalSurvey',
   component: ModalSurvey,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (

stories/ScrollContainer.stories.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import ScrollContainer from '../src/components/ScrollContainer';
-import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
   title: 'ScrollContainer',
   component: ScrollContainer,
-  decorators: [withA11y],
 };
 
 export const Basic = () => (