Migration to Kepler v3

apps/frontend/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (0.49.2).
+ * Mock Service Worker (0.49.3).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

apps/frontend/src/components/DeleteProjectModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { css } from 'styled-components';
 import { LoadingProjectInterface, ProjectInterface } from '@datatlas/models';
-import KeyEvent from 'kepler.gl/dist/constants/keyevent';
+import { KeyEvent } from '@kepler.gl/constants';
 import { StyledModal } from './Modal';
 import { useOnKeyEffect } from '../hooks/useOnKeyEffect';
 

apps/frontend/src/components/Modal.tsx

@@ -3,10 +3,10 @@
 import React from 'react';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
 import { FormattedMessage } from 'react-intl';
-import { Delete } from 'kepler.gl/dist/components/common/icons';
-import { Button } from 'kepler.gl/dist/components/common/styled-components';
-import { ModalTitle } from 'kepler.gl/dist/components/common/modal';
-import { media } from 'kepler.gl/dist/styles/media-breakpoints';
+import { Delete } from '@kepler.gl/components/dist/common/icons';
+import { Button } from '@kepler.gl/components';
+import { ModalTitle } from '@kepler.gl/components';
+import { media } from '@kepler.gl/styles';
 import { DatatlasThemeProps } from '../style/theme';
 import Modal from 'react-modal';
 

apps/frontend/src/components/ProjectList.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import styled from 'styled-components';
 import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
 import { SerializedError } from '@reduxjs/toolkit';
-import { deleteEntry } from 'kepler.gl/actions';
+import { deleteEntry } from '@kepler.gl/actions';
 import { ProjectListItem } from './ProjectListItem';
 import { Loader } from './Loader';
 import { LoadingProjectInterface, ProjectInterface } from '@datatlas/models';

apps/frontend/src/components/ProjectUserTable.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { LoadingProjectInterface, UserInterface } from '@datatlas/models';
-import { Trash } from 'kepler.gl/dist/components/common/icons';
+import { Trash } from '@kepler.gl/components/dist/common/icons';
 import { IconButton } from './buttons';
 import { FormattedMessage } from 'react-intl';
 

apps/frontend/src/components/buttons/Button.tsx

@@ -1,6 +1,5 @@
 import React, { ReactElement, ReactNode, ButtonHTMLAttributes } from 'react';
-import styled from 'styled-components';
-import { Button as KeplerButton } from 'kepler.gl/dist/components/common/styled-components';
+import { Button as KeplerButton } from '@kepler.gl/components';
 
 export interface ButtonPropsInterface extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode;
@@ -12,13 +11,12 @@ export interface ButtonPropsInterface extends ButtonHTMLAttributes<HTMLButtonEle
   primary?: boolean;
 }
 
-const StyledKeplerButton = styled(KeplerButton)``;
 export const Button = ({ children, Icon, ...props }: ButtonPropsInterface) => {
   return (
-    <StyledKeplerButton as="button" {...props}>
+    <KeplerButton as="button" {...props}>
       {Icon}
       {children}
-    </StyledKeplerButton>
+    </KeplerButton>
   );
 };
 

apps/frontend/src/components/buttons/DisplayButton.tsx

@@ -1,6 +1,6 @@
 import React, { MouseEventHandler, ReactElement, ReactNode, useState } from 'react';
 import styled from 'styled-components';
-import { ArrowDown, ArrowRight } from 'kepler.gl/dist/components/common/icons';
+import { ArrowDown, ArrowRight } from '@kepler.gl/components/dist/common/icons';
 
 interface DisplayButtonInterface {
   children: ReactNode;

apps/frontend/src/components/buttons/IconButton.tsx

@@ -1,5 +1,5 @@
 import React, { MouseEventHandler, ReactElement } from 'react';
-import { MapControlButton } from 'kepler.gl/dist/components/common/styled-components';
+import { MapControlButton } from '@kepler.gl/components';
 import styled from 'styled-components';
 
 interface IconButtonInterface {

apps/frontend/src/components/buttons/PublishButton.tsx

@@ -3,29 +3,26 @@ import Button from './Button';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
-import { useSelector } from 'react-redux';
-import { Filter } from 'kepler.gl';
-import { KeplerGlProps } from 'kepler.gl/src/components/kepler-gl';
 import { updateMapInfo } from '../../store/reducers/keplerGl';
 import { useForward } from '../../hooks';
-import { RootState } from '../../store/reducers';
+import { useAppSelector } from '../../store/reducers';
 import { selectIsDraft } from '../../store/selectors';
+import { KeplerGLBasicProps } from '../keplerGl/factories';
 
-export const PublishButton = ({ readOnly }: KeplerGlProps) => {
-  const forward = useForward();
-  const { id } = useParams();
-
+export const PublishButton = ({ readOnly }: KeplerGLBasicProps) => {
+  const { id } = useParams<keyof { id: string }>();
   if (!id) {
     return null;
   }
 
-  const draft = useSelector<RootState, Filter[]>((state) => selectIsDraft(state, id));
+  const forward = useForward();
+  const draft = useAppSelector((state) => selectIsDraft(state, id));
 
   const handlePublish = () => {
     forward(updateMapInfo({ draft: !draft }));
   };
 
-  if (readOnly) {
+  if (readOnly || typeof draft === 'undefined') {
     return null;
   }
 

apps/frontend/src/components/buttons/SidePanelButton.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import { IconButton } from './';
-import { ArrowLeft } from 'kepler.gl/dist/components/common/icons';
+import { ArrowLeft } from '@kepler.gl/components/dist/common/icons';
 
 interface SidePanelButtonInterface {
   children: ReactNode;

apps/frontend/src/components/buttons/StyledFormBtn.tsx

@@ -4,7 +4,7 @@ import { Button, ButtonPropsInterface } from './Button';
 import { Loader } from '../Loader';
 
 export interface StyledFormBtnProps extends ButtonPropsInterface {
-  loading: boolean;
+  loading?: boolean;
 }
 
 export const StyledFormBtn = styled(({ loading, children, ...props }: StyledFormBtnProps) => {

apps/frontend/src/components/card/MapPreview.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Trash, Copy, MapIcon } from 'kepler.gl/dist/components/common/icons';
+import { Copy, MapIcon, Trash } from '@kepler.gl/components/dist/common/icons';
 import { LoadingProjectInterface, Project, PublicUserInterface } from '@datatlas/models';
 import { IconButton } from '../buttons';
 import { StatusProjectBadges } from '../badges';

apps/frontend/src/components/footer/Footer.tsx

@@ -61,7 +61,7 @@ const LogoContainer = styled.div`
   }
 `;
 
-const Footer = () => (
+export const Footer = () => (
   <FooterContainer>
     <div>
       <LogoContainer>
@@ -104,5 +104,3 @@ const Footer = () => (
     </div>
   </FooterContainer>
 );
-
-export default Footer;

apps/frontend/src/components/forms/EditDescriptionForm.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useForm } from 'react-hook-form';
 import { FormattedMessage } from 'react-intl';
-import { MapInfoInterface } from '@datatlas/models';
+import { LoadingProjectInterface, MapInfoInterface } from '@datatlas/models';
 import styled from 'styled-components';
 import { FormError, ServerErrorMessage, StyledLabel } from './';
 import { StyledFormBtn } from '../buttons';
@@ -21,10 +21,10 @@ const FormContainer = styled.form`
 `;
 
 interface EditDescriptionFormProps {
-  description?: string;
+  project?: LoadingProjectInterface;
 }
 
-export function EditDescriptionForm({ description }: EditDescriptionFormProps) {
+export function EditDescriptionForm({ project }: EditDescriptionFormProps) {
   const forward = useForward();
   const {
     register,
@@ -50,8 +50,8 @@ export function EditDescriptionForm({ description }: EditDescriptionFormProps) {
       </StyledLabel>
       <MarkdownTextArea
         id="description"
-        defaultValue={description || ''}
-        readonly={!description}
+        defaultValue={project?.description || ''}
+        readOnly={!project}
         rows={8}
         {...register('description', { required: true })}
       />

apps/frontend/src/components/forms/EditTitleForm.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useForm } from 'react-hook-form';
 import { FormattedMessage } from 'react-intl';
-import { Input } from 'kepler.gl/dist/components/common/styled-components';
+import { Input } from '@kepler.gl/components';
 import { MapInfoInterface } from '@datatlas/models';
 import styled from 'styled-components';
 import { FormError, FormRow, ServerErrorMessage, StyledLabel } from './';

apps/frontend/src/components/forms/FormRow.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Input } from 'kepler.gl/dist/components/common/styled-components';
+import { Input } from '@kepler.gl/components';
 
 export const FormRow = styled.div`
   display: flex;

apps/frontend/src/components/forms/LoadRemoteDatasetForm.tsx

@@ -3,16 +3,15 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { useForm } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
-import { useSelector } from 'react-redux';
 import styled, { ThemeProps } from 'styled-components';
-import { addDataToMap } from 'kepler.gl/actions';
+import { addDataToMap } from '@kepler.gl/actions';
 import { DatasetFactory, DatasetInterface } from '@datatlas/models';
 import { DatatlasTheme } from '../../style/theme';
 import { isValidHttpURL, handleServerError } from '../../utils';
 import { useForward } from '../../hooks';
 import { markdownComponents } from '../markdown';
-import { GUIDES_FILE_FORMAT_DOC } from 'kepler.gl/dist/constants/user-guides';
-import { RootState } from '../../store/reducers';
+import { GUIDES_FILE_FORMAT_DOC } from '@kepler.gl/constants';
+import { useAppSelector } from '../../store/reducers';
 import { selectFileFormatNamesByInstanceId } from '../../store/selectors';
 
 const InputForm = styled.form`
@@ -91,7 +90,7 @@ export function LoadRemoteDatasetForm() {
 
   // @todo We should overwrite the ModalFactory and inject `fileFormatNames` there instead.
   const { id } = useParams();
-  const fileFormatNames = useSelector((state: RootState) => selectFileFormatNamesByInstanceId(state, id));
+  const fileFormatNames = useAppSelector((state) => selectFileFormatNamesByInstanceId(state, id));
 
   const onSubmit = async () => {
     try {

apps/frontend/src/components/forms/LoginForm.tsx

@@ -3,7 +3,7 @@ import { useForm } from 'react-hook-form';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
-import { Input } from 'kepler.gl/dist/components/common/styled-components';
+import { Input } from '@kepler.gl/components';
 import { useLoginMutation } from '../../store/api';
 import { StyledLabel } from './StyledLabel';
 import { StyledFormBtn } from '../buttons';

apps/frontend/src/components/forms/StartNewProjectForm.tsx

@@ -2,19 +2,19 @@ import React, { FormHTMLAttributes, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { FormattedMessage } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
-import { Input } from 'kepler.gl/dist/components/common/styled-components';
-import { KeplerMapStyle } from '@datatlas/models';
-import { StyledFormBtn, StyledFormBtnProps } from '../buttons';
+import { Input } from '@kepler.gl/components';
+import { SavedMapStyle } from '@datatlas/models';
+import styled from 'styled-components';
+import { StyledFormBtn } from '../buttons';
 import { FormError, StyledLabel } from '../forms';
 import { useCreateProjectMutation } from '../../store/api';
 import { CreateProjectFormData } from '../../models';
-import styled from 'styled-components';
 
-const StartNewProjectFormContainer = styled.form<FormHTMLAttributes<HTMLFormElement> & StyledFormBtnProps>`
+const StartNewProjectFormContainer = styled.form<FormHTMLAttributes<HTMLFormElement> & { $loading: boolean }>`
   ${StyledFormBtn} {
     margin: 20px auto;
     padding: 15px 42px;
-    padding-left: ${({ loading }) => (loading ? '18px' : '42px')};
+    padding-left: ${({ $loading }) => ($loading ? '18px' : '42px')};
     font-weight: bold;
     line-height: 20px;
   }
@@ -48,7 +48,7 @@ export function StartNewProjectForm() {
 
   return (
     /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
-    <StartNewProjectFormContainer onSubmit={handleSubmit(createProject)} loading={isLoading}>
+    <StartNewProjectFormContainer onSubmit={handleSubmit(createProject)} $loading={isLoading}>
       <StyledLabel htmlFor={'title'}>
         1.
         <FormattedMessage id={'createProjectForm.projectName'} defaultMessage={'Entrez le nom du projet'} />
@@ -65,7 +65,7 @@ export function StartNewProjectForm() {
         <FormattedMessage id={'createProjectForm.mapStyle'} defaultMessage={'Sélectionnez un fond de carte'} />
       </StyledLabel>
       <select {...register('mapStyleId')}>
-        {KeplerMapStyle.DEFAULT_MAP_STYLES.map(({ id, label }) => (
+        {SavedMapStyle.DEFAULT_MAP_STYLES.map(({ id, label }) => (
           <option key={id} value={id}>
             {label}
           </option>

apps/frontend/src/components/forms/inputs/TextArea.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
-import { TextArea as KeplerTextArea } from 'kepler.gl/dist/components/common/styled-components';
+import { TextArea as KeplerTextArea } from '@kepler.gl/components';
 
+// @ts-ignore
 export const TextArea = styled(KeplerTextArea)`
   white-space: pre-wrap;
   height: initial;

apps/frontend/src/components/guards/AuthenticatedGuard.tsx

@@ -1,12 +1,12 @@
 import React, { PropsWithChildren } from 'react';
 import { Navigate } from 'react-router-dom';
-import { useSelector } from 'react-redux';
 import { selectCurrentUserId } from '../../store/selectors';
+import { useAppSelector } from '../../store/reducers';
 import { getUser } from '../../store/api';
 import { Loader } from '../Loader';
 
 export const AuthenticatedGuard = ({ children }: PropsWithChildren) => {
-  const currentUserId = useSelector(selectCurrentUserId);
+  const currentUserId = useAppSelector(selectCurrentUserId);
   if (!currentUserId) {
     return <Navigate to="/login" />;
   }

apps/frontend/src/components/i18n/DatatlasIntlProvider.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { PropsWithChildren } from 'react';
 import { IntlProvider } from 'react-intl';
-import { useSelector } from 'react-redux';
+import { useAppSelector } from '../../store/reducers';
 import { selectLocale } from '../../store/selectors';
 import { messages } from '../../i18n/messages';
 
 export const DatatlasIntlProvider = ({ children }: PropsWithChildren) => {
-  const locale = useSelector(selectLocale);
+  const locale = useAppSelector(selectLocale);
 
   return (
     // @ts-ignore

apps/frontend/src/components/keplerGl/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "rules": {
+    "react-hooks/rules-of-hooks": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-ts-comment": "off"
+  }
+}

apps/frontend/src/components/keplerGl/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "printWidth": 100,
+  "bracketSpacing": false,
+  "trailingComma": "none",
+  "arrowParens": "avoid"
+}