Skip to content

Commit

Permalink
RC #121 - Upgrading dependencies for React, Webpack, Semantic UI; Rep…
Browse files Browse the repository at this point in the history
…lacing react-xml-viewer component; Refactoring broken changes in components
  • Loading branch information
dleadbetter committed Apr 7, 2022
1 parent e93e8ff commit 2aa48eb
Show file tree
Hide file tree
Showing 11 changed files with 40,369 additions and 16,037 deletions.
11 changes: 6 additions & 5 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
module.exports = {
stories: [
'../stories/**/*.stories.js'
],
stories: ['../stories/**/*.stories.js'],
addons: [
'@storybook/addon-a11y/register',
'@storybook/addon-a11y',
'@storybook/addon-actions',
'@storybook/addon-knobs/register',
'@storybook/addon-knobs',
'@storybook/addon-links'
],
core: {
builder: "webpack5"
}
};
56,097 changes: 40,248 additions & 15,849 deletions package-lock.json

Large diffs are not rendered by default.

55 changes: 29 additions & 26 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
},
"license": "ISC",
"dependencies": {
"@react-google-maps/api": "^2.8.1",
"i18next": "^19.4.4",
"moment": "^2.27.0",
"moment-islamic-civil": "ACGC/moment-islamic-civil",
"react-calendar": "^3.3.0",
Expand All @@ -26,20 +28,18 @@
"react-dnd-html5-backend": "^11.1.3",
"react-fast-compare": "^3.2.0",
"react-ga4": "^1.4.1",
"react-google-maps": "^9.4.5",
"react-i18next": "^11.4.0",
"react-syntax-highlighter": "^15.5.0",
"react-uuid": "^1.0.2",
"react-xml-viewer": "^1.1.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^1.2.1",
"semantic-ui-react": "^2.1.2",
"simple-keyboard": "^3.0.0",
"simple-keyboard-layouts": "^3.0.0",
"underscore": "^1.10.2"
"underscore": "^1.13.2"
},
"peerDependencies": {
"i18next": "^19.4.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-i18next": "^11.4.0"
"react": ">= 16.13.1 < 18.0.0",
"react-dom": ">= 16.13.1 < 18.0.0"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
Expand All @@ -49,37 +49,40 @@
"@babel/preset-env": "^7.9.6",
"@babel/preset-flow": "^7.9.0",
"@babel/preset-react": "^7.9.4",
"@storybook/addon-a11y": "^5.3.18",
"@storybook/addon-actions": "^5.3.18",
"@storybook/addon-knobs": "^5.3.18",
"@storybook/addon-links": "^5.3.18",
"@storybook/addons": "^5.3.18",
"@storybook/react": "^5.3.18",
"@storybook/addon-a11y": "^6.4.20",
"@storybook/addon-actions": "^6.4.20",
"@storybook/addon-knobs": "^6.4.0",
"@storybook/addon-links": "^6.4.20",
"@storybook/addons": "^6.4.20",
"@storybook/builder-webpack5": "^6.4.20",
"@storybook/manager-webpack5": "^6.4.20",
"@storybook/react": "^6.4.20",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"buffer": "^6.0.3",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^3.5.3",
"dotenv": "^8.2.0",
"eslint": "^6.8.0",
"dotenv": "^16.0.0",
"eslint": "^7.1.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-plugin-flowtype": "^5.9.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^4.1.2",
"eslint-plugin-storybook": "^0.5.7",
"flow-bin": "^0.123.0",
"flow-copy-source": "^2.0.9",
"i18next": "^19.4.4",
"mini-css-extract-plugin": "^1.4.0",
"mini-css-extract-plugin": "^2.6.0",
"path": "^0.12.7",
"raw-loader": "^4.0.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-i18next": "^11.4.0",
"react-scripts": "^3.4.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sass-loader": "^11.0.1",
"stream-browserify": "^3.0.0",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-node-externals": "^2.5.2"
"webpack": "^5.71.0",
"webpack-cli": "^4.9.2",
"webpack-node-externals": "^3.0.0"
}
}
93 changes: 37 additions & 56 deletions src/semantic-ui/GoogleMap.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
// @flow

import React, { useEffect, useState, type Element } from 'react';
import {
GoogleMap as MapComponent,
Marker,
withGoogleMap,
withScriptjs
} from 'react-google-maps';
import Google from '../utils/Google';
LoadScript,
Marker
} from '@react-google-maps/api';
import React, { useCallback, useEffect, useState } from 'react';
import Map from '../utils/Map';

type LatLng = {
Expand All @@ -16,19 +14,22 @@ type LatLng = {
};

type Props = {
className?: string,
containerStyle?: any,
defaultCenter?: {
lat: number,
lng: number
},
defaultZoom?: number,
onDragEnd: (latLng: LatLng) => ({ lat: number, lng: number }),
position: {
googleMapsApiKey: string,
onDragEnd?: (latLng: LatLng) => void,
position?: {
lat: number,
lng: number
}
};

const DEFAULT_ZOOM = 3;
const DEFAULT_ZOOM = 1;
const DEFAULT_ZOOM_MARKER = 12;

const GoogleMap = (props: Props) => {
Expand Down Expand Up @@ -59,6 +60,8 @@ const GoogleMap = (props: Props) => {
}
};

const onLoad = useCallback((m) => setMap(m), []);

// If the position is changed manually and the new location is outside of the current bounds, re-center the map.
useEffect(() => {
if (map && position) {
Expand All @@ -70,61 +73,39 @@ const GoogleMap = (props: Props) => {
}, [props.position]);

return (
<MapComponent
defaultZoom={defaultZoom}
center={center}
onClick={onDragEnd}
ref={(m) => setMap(m)}
<LoadScript
googleMapsApiKey={props.googleMapsApiKey}
>
{ position && (
<Marker
draggable={!!props.onDragEnd}
onDragEnd={onDragEnd}
position={position}
visible
/>
)}
</MapComponent>
<MapComponent
center={center}
mapContainerClassName={props.className}
mapContainerStyle={props.containerStyle}
onClick={onDragEnd}
onLoad={onLoad}
zoom={defaultZoom}
>
{ position && (
<Marker
draggable={!!props.onDragEnd}
onDragEnd={onDragEnd}
position={position}
visible
/>
)}
</MapComponent>
</LoadScript>
);
};

GoogleMap.defaultProps = {
containerStyle: {
height: '600px',
width: '600px'
},
defaultCenter: {
lat: 0,
lng: 0
}
};

const GoogleMapElement = withScriptjs(withGoogleMap(GoogleMap));

type WrapperProps = {
containerElement?: Element<any>,
googleMapsApiKey: string,
loadingElement?: Element<any>,
mapElement?: Element<any>
};

const GoogleMapWrapper = ({
containerElement,
googleMapsApiKey,
loadingElement,
mapElement,
...rest
}: WrapperProps) => (
<GoogleMapElement
{...rest}
containerElement={containerElement}
googleMapURL={Google.getGoogleMapsUrl(googleMapsApiKey)}
loadingElement={loadingElement}
mapElement={mapElement}
/>
);

GoogleMapWrapper.defaultProps = {
containerElement: <div style={{ height: '400px' }} />,
loadingElement: <div style={{ height: '100%' }} />,
mapElement: <div style={{ height: '100%' }} />

};

export default GoogleMapWrapper;
export default GoogleMap;
90 changes: 30 additions & 60 deletions src/semantic-ui/GooglePlacesSearch.js
Original file line number Diff line number Diff line change
@@ -1,79 +1,49 @@
// @flow

import React, { Component } from 'react';
import { withGoogleMap, withScriptjs } from 'react-google-maps';
import StandaloneSearchBox from 'react-google-maps/lib/components/places/StandaloneSearchBox';
import { LoadScript, StandaloneSearchBox } from '@react-google-maps/api';
import React, { Component, useCallback, useState } from 'react';
import _ from 'underscore';
import Google from '../utils/Google';

type Props = {
children: Component<{}>,
googleMapsApiKey: string,
onLocationSelection: ({ lat: number, lng: number }) => void
}

const GooglePlacesSearchBox = (props: Props) => {
const refs = {};
const GooglePlacesSearch = (props: Props) => {
const [searchBox, setSearchBox] = useState();

const onPlacesChanged = () => {
const place = _.first(refs.searchBox.getPlaces());
const { location } = place.geometry;
const onPlacesChanged = useCallback(() => {
if (searchBox) {
const place = _.first(searchBox.getPlaces());
const { location } = place.geometry;

const name = place.formatted_address;
const lat = location.lat();
const lng = location.lng();
const name = place.formatted_address;
const lat = location.lat();
const lng = location.lng();

props.onLocationSelection({
name,
lat,
lng,
result: place
});
};
props.onLocationSelection({
name,
lat,
lng,
result: place
});
}
}, [searchBox, props.onLocationSelection]);

return (
<StandaloneSearchBox
ref={(searchBox) => {
refs.searchBox = searchBox;
}}
onPlacesChanged={onPlacesChanged.bind(this)}
<LoadScript
googleMapsApiKey={props.googleMapsApiKey}
libraries={['places']}
>
{ props.children }
</StandaloneSearchBox>
<StandaloneSearchBox
onLoad={(s) => setSearchBox(s)}
onPlacesChanged={onPlacesChanged}
>
{ props.children }
</StandaloneSearchBox>
</LoadScript>
);
};

const GooglePlacesSearchInput = withScriptjs(withGoogleMap(GooglePlacesSearchBox));

type WrapperProps = {
children: Component<{}>,
containerElement?: Component<{}>,
googleMapsApiKey: string,
loadingElement?: Component<{}>,
mapElement?: Component<{}>,
onLocationSelection: () => void,
style?: any
};

const GooglePlacesSearch = (props: WrapperProps) => (
<GooglePlacesSearchInput
containerElement={props.containerElement}
googleMapURL={Google.getGoogleMapsUrl(props.googleMapsApiKey)}
loadingElement={props.loadingElement}
mapElement={props.mapElement}
onLocationSelection={props.onLocationSelection.bind(this)}
style={props.style}
>
{ props.children }
</GooglePlacesSearchInput>
);

GooglePlacesSearch.defaultProps = {
containerElement: <div style={{ height: '100%' }} />,
loadingElement: <div style={{ height: '100%' }} />,
mapElement: <div style={{ height: '0px' }} />,
style: {
display: 'inline'
}
};

export default GooglePlacesSearch;
15 changes: 0 additions & 15 deletions src/semantic-ui/ViewXML.css
Original file line number Diff line number Diff line change
@@ -1,15 +0,0 @@
.view-xml-modal .xml {
background: #f4f4f4;
border: 1px solid #ddd;
color: #666;
page-break-inside: avoid;
font-family: monospace;
font-size: 14px;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1em 1.5em;
display: block;
word-wrap: break-word;
}
Loading

0 comments on commit 2aa48eb

Please sign in to comment.