Introduce new fsq studio section in home page (#2308)

Signed-off-by: Giuseppe Macri <gmacri@foursquare.com>

src/components/src/common/data-table/grid.tsx

@@ -42,7 +42,7 @@ export default class GridHack extends PureComponent<GridProps> {
   }
 
   componentWillUnmount() {
-    //@ts-expect-error _scrollingContainer not typed in Grid
+    // @ts-expect-error _scrollingContainer not typed in Grid
     this.grid?._scrollingContainer?.removeEventListener('wheel', this._preventScrollBack, {
       passive: false
     });
@@ -67,7 +67,7 @@ export default class GridHack extends PureComponent<GridProps> {
        * This hack exists because we need to add wheel event listener to the div rendered by Grid
        *
        */
-      //@ts-expect-error _scrollingContainer not typed in Grid
+      // @ts-expect-error _scrollingContainer not typed in Grid
       this.grid?._scrollingContainer?.addEventListener('wheel', this._preventScrollBack, {
         passive: false
       });

src/components/src/common/data-table/index.tsx

@@ -222,7 +222,7 @@ const getRowCell = (
   const rowIdx = sortOrder && sortOrder.length ? get(sortOrder, rowIndex) : rowIndex;
   const {type} = colMeta[column];
 
-  let value = dataContainer.valueAt(rowIdx, columns.indexOf(column));
+  const value = dataContainer.valueAt(rowIdx, columns.indexOf(column));
   return value === null || value === undefined || value === ''
     ? ''
     : formatter

src/components/src/common/item-selector/item-selector.tsx

@@ -324,7 +324,7 @@ class ItemSelectorUnmemoized extends Component<ItemSelectorProps> {
         active: this.state.showTypeahead
       }),
       displayOption,
-      disabled: disabled,
+      disabled,
       onClick: this._showTypeahead,
       error: this.props.isError,
       inputTheme,

src/components/src/map-container.tsx

@@ -516,7 +516,7 @@ export default function MapContainerFactory(
     _onDeckError = (error, layer) => {
       const errorMessage = error?.message || 'unknown-error';
       const layerMessage = layer?.id ? ` in ${layer.id} layer` : '';
-      let errorMessageFull =
+      const errorMessageFull =
         errorMessage === 'WebGL context is lost'
           ? 'Your GPU was disconnected. This can happen if your computer goes to sleep. It can also occur for other reasons, such as if you are running too many GPU applications.'
           : `An error in deck.gl: ${errorMessage}${layerMessage}.`;

test/browser/components/map/map-control-test.js

@@ -122,7 +122,7 @@ test('MapControlFactory - click options', t => {
     toggleMapControl: onToggleMapControl,
     setLocale: onSetLocale
   };
-  let updateState = keplerGlReducerCore(StateWSplitMaps, toggleMapControl('mapLegend', 0));
+  const updateState = keplerGlReducerCore(StateWSplitMaps, toggleMapControl('mapLegend', 0));
   const mapContainerProps = mapFieldsSelector(
     mockKeplerPropsWithState({
       state: updateState,

test/browser/components/modals/share-map-modal-test.js

@@ -22,12 +22,7 @@ import React from 'react';
 import test from 'tape';
 import {IntlWrapper, mountWithTheme} from 'test/helpers/component-utils';
 import sinon from 'sinon';
-import {
-  ShareMapUrlModalFactory,
-  SharingUrl,
-  CloudTile,
-  StatusPanel
-} from '@kepler.gl/components';
+import {ShareMapUrlModalFactory, SharingUrl, CloudTile, StatusPanel} from '@kepler.gl/components';
 const ShareMapUrlModal = ShareMapUrlModalFactory();
 
 test('Components -> ShareMapUrlModal.mount', t => {

test/browser/components/plot-container-test.js

@@ -22,11 +22,7 @@ import React from 'react';
 import {IntlWrapper, mountWithTheme} from 'test/helpers/component-utils';
 
 import test from 'tape';
-import {
-  appInjector,
-  PlotContainerFactory,
-  plotContainerSelector
-} from '@kepler.gl/components';
+import {appInjector, PlotContainerFactory, plotContainerSelector} from '@kepler.gl/components';
 import {mockKeplerProps} from '../../helpers/mock-state';
 
 const PlotContainer = appInjector.get(PlotContainerFactory);

test/browser/layer-tests/geojson-layer-specs.js

@@ -19,12 +19,7 @@
 // THE SOFTWARE.
 
 import test from 'tape';
-import {
-  defaultElevation,
-  defaultLineWidth,
-  defaultRadius,
-  KeplerGlLayers
-} from '@kepler.gl/layers';
+import {defaultElevation, defaultLineWidth, defaultRadius, KeplerGlLayers} from '@kepler.gl/layers';
 import {copyTableAndUpdate, createNewDataEntry} from '@kepler.gl/table';
 
 const {GeojsonLayer} = KeplerGlLayers;

test/node/utils/editor-utils-test.js

@@ -24,10 +24,7 @@ import {EditableGeoJsonLayer} from '@nebula.gl/layers';
 import {INITIAL_VIS_STATE} from '@kepler.gl/reducers';
 import {VisStateActions} from '@kepler.gl/actions';
 import {EDITOR_LAYER_ID, EDITOR_MODES} from '@kepler.gl/constants';
-import {
-  EditorLayerUtils,
-  getEditorLayer
-} from '@kepler.gl/layers';
+import {EditorLayerUtils, getEditorLayer} from '@kepler.gl/layers';
 
 test('editorLayerUtils -> isDrawingActive', t => {
   t.equal(
@@ -54,7 +51,11 @@ test('editorLayerUtils -> getCursor', t => {
     editorMenuActive: true,
     editor
   };
-  t.equal(EditorLayerUtils.getCursor(mockSettings), 'crosshair', 'Should return crosshair for active drawing mode');
+  t.equal(
+    EditorLayerUtils.getCursor(mockSettings),
+    'crosshair',
+    'Should return crosshair for active drawing mode'
+  );
 
   mockSettings.editorMenuActive = false;
   t.equal(
@@ -214,20 +215,35 @@ test('editorLayerUtils -> onClick', t => {
   const {onLayerClick, setSelectedFeature} = VisStateActions;
 
   t.equal(
-    EditorLayerUtils.onClick(info, event, {editor, editorMenuActive: true, onLayerClick, setSelectedFeature}),
+    EditorLayerUtils.onClick(info, event, {
+      editor,
+      editorMenuActive: true,
+      onLayerClick,
+      setSelectedFeature
+    }),
     true,
     'Should return true - onClick is handled as drawing is active'
   );
 
   t.equal(
-    EditorLayerUtils.onClick(info, event, {editor, editorMenuActive: false, onLayerClick, setSelectedFeature}),
+    EditorLayerUtils.onClick(info, event, {
+      editor,
+      editorMenuActive: false,
+      onLayerClick,
+      setSelectedFeature
+    }),
     false,
     "Should return false - onClick isn't handled"
   );
 
   info.layer.id = EDITOR_LAYER_ID;
   t.equal(
-    EditorLayerUtils.onClick(info, event, {editor, editorMenuActive: false, onLayerClick, setSelectedFeature}),
+    EditorLayerUtils.onClick(info, event, {
+      editor,
+      editorMenuActive: false,
+      onLayerClick,
+      setSelectedFeature
+    }),
     true,
     'Should return true - onClick is handled'
   );

website/src/components/common/section.js

@@ -41,7 +41,7 @@ export const SectionContainer = styled.div`
       ? `url(${props.background})`
       : 'white'};
   padding: ${props => props.theme.margins.huge};
-  margin-bottom: ${props => props.theme.margins.large};
+  // margin-bottom: ${props => props.theme.margins.large};
   background-size: cover;
 
   ${media.portable`
@@ -57,6 +57,7 @@ export const SectionHeader = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 40px;
 `;
 
 export const SectionTitle = styled.div`
@@ -69,7 +70,7 @@ export const SectionTitle = styled.div`
 
 export const SectionDescription = styled.div`
   font-size: 20px;
-  max-width: 500px;
+  max-width: 700px;
   ${media.palm`
     font-size: 16px;
   `};

website/src/components/common/swipeable.js

@@ -22,6 +22,12 @@ import React, {PureComponent} from 'react';
 import styled from 'styled-components';
 import SwipeableViews from 'react-swipeable-views';
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 72px;
+`;
+
 const PaginationContainer = styled.div`
   display: flex;
   justify-content: center;
@@ -58,12 +64,14 @@ export default class Swipeable extends PureComponent {
   render() {
     const {children, onChange, selectedIndex} = this.props;
     return (
-      <div>
+      <Container>
         <SwipeableViews enableMouseEvents index={selectedIndex} onChange={onChange}>
           {children}
         </SwipeableViews>
-        <Pagination items={children} selectedIndex={selectedIndex} onChange={onChange} />
-      </div>
+        <div>
+          <Pagination items={children} selectedIndex={selectedIndex} onChange={onChange} />
+        </div>
+      </Container>
     );
   }
 }

website/src/components/footer.js

@@ -27,6 +27,7 @@ import {LinkButton} from './common/styled-components';
 import {media} from '../styles';
 import MapboxLogo from './mapbox-logo';
 import NetlifyLogo from './netlify-logo';
+import FoursquareLogo from './foursquare-logo';
 import {DEMO_LINK} from '../constants';
 
 const Container = styled.div`
@@ -49,9 +50,8 @@ const BrandingContainer = styled.div`
     margin-top: ${props => props.theme.margins.small};
   `};
 
-  display: grid;
-  grid-template-columns: repeat(4, auto);
-  column-gap: 20px;
+  display: flex;
+  gap: 20px;
   align-items: center;
 `;
 
@@ -139,6 +139,8 @@ const SocialContainer = styled.div`
   `};
 `;
 
+const GITHUB_BUTTON_STYLE = {marginLeft: '5px'};
+
 export default class Footer extends PureComponent {
   render() {
     return (
@@ -149,6 +151,7 @@ export default class Footer extends PureComponent {
             <img src={cdnUrl('icons/uber.svg')} />
             <MapboxLogo />
             <NetlifyLogo />
+            <FoursquareLogo />
             <CreatedBy>
               created by
               <StyledLogo className="fg">
@@ -168,7 +171,7 @@ export default class Footer extends PureComponent {
               large
               outlineDark
               href="https://github.com/keplergl/kepler.gl"
-              style={{marginLeft: '5px'}}
+              style={GITHUB_BUTTON_STYLE}
             >
               <img src={cdnUrl('icons/github.svg')} /> Github
             </LinkButton>

website/src/components/home.js

@@ -31,6 +31,7 @@ import Tutorials from './tutorials';
 import Walkthrough from './walkthrough';
 import Features from './features';
 import Ecosystems from './ecosystems';
+import Studio from './studio';
 import Footer from './footer';
 import Section from './common/section';
 import Header from './header';
@@ -47,7 +48,8 @@ const SECTION_CONTENT = {
   features: Features,
   examples: Examples,
   tutorials: Tutorials,
-  ecosystems: Ecosystems
+  ecosystems: Ecosystems,
+  studio: Studio
 };
 
 export default class Home extends PureComponent {