@popsure/dirty-swan 0.26.9 → 0.26.12

package/src/index.tsx

@@ -0,0 +1,37 @@
+import ReactDOM from 'react-dom';
+import App from './App';
+
+export {
+  DateSelector,
+  Dropzone,
+  SignaturePad,
+  AutocompleteAddress,
+  Input,
+  MultiDropzone,
+  DownloadRing,
+  IbanInput,
+  CurrencyInput,
+  BottomModal,
+  RegularModal,
+  BottomOrRegularModal,
+  CardWithTopLeftIcon,
+  CardWithLeftIcon,
+  CardWithTopIcon,
+  InfoCard,
+  CardButton,
+  Button,
+  AutoSuggestMultiSelect,
+  Chip,
+  AutoSuggestInput,
+  ComparisonTable,
+  TableRating,
+  TableTrueFalse,
+  TableRowHeader,
+  TableInfoButton,
+  SegmentedControl,
+  DownloadButton
+} from './lib';
+
+export type { TableHeader, DownloadRingDownloadStatus, DownloadStatus } from './lib';
+
+ReactDOM.render(<App />, document.getElementById('root'));

package/src/intro.stories.mdx

@@ -0,0 +1,41 @@
+# Dirty Swan
+
+<Meta title="Intro" />
+
+Dirty Swan is the Design System build and maintained at [Feather](https://feather-insurance.com/).
+
+## Installation
+
+Run the following command using [npm](https://www.npmjs.com):
+
+```bash
+npm install @popsure/dirty-swan --save
+```
+
+If you prefer [Yarn](https://www.npmjs.com), use the following command instead:
+
+```bash
+yarn add @popsure/dirty-swan
+```
+
+## Usage
+
+To use Dirty Swan, import the scss file in one of your App entry point (typically `index/js` or `App.js` if you’re using [create react app](https://create-react-app.dev))
+
+```javaScript
+import '@popsure/dirty-swan/dist/index.css';
+```
+
+## Design values
+
+### Simple Swan
+
+We are a company that believes in the simplicity of things. We don't want to over complicate something that is already a thousand headed hydra at the best of times. We believe that problems can be solved elegantly but most importantly, simply.
+
+We aren't ones to break the wheel, if it works we'll make full use of it. That's why we believe in a design system that is usable and reusable, designing with simplicity and durability in mind.
+
+### Lego Swan
+
+Our design system, like many before it, uses the fundamental methodology of Atomic Design. Building from what is as a foundation and continuously improving from what was.
+
+We believe in building a solid foundation in order to continue solidly from where we began. Future proofing is one of our fundamental values and beliefs. Everything that we design and implement is done with future features in mind.

package/src/lib/components/autocompleteAddress/demo.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { Address } from '@popsure/public-models';
+
+import AutoCompleteAddress from '.';
+
+export const WithoutAddress = () => {
+  const [address, setAddress] = useState<Partial<Address> | undefined>(
+    undefined
+  );
+  return (
+    <AutoCompleteAddress
+      onAddressChange={(address) => {
+        setAddress(address);
+      }}
+      address={address}
+      apiKey="AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8"
+    />
+  );
+};
+
+export const WithAddress = () => {
+  const [address, setAddress] = useState<Partial<Address> | undefined>({
+    street: 'Lohmuehlenstraße',
+    houseNumber: '65',
+    city: 'Berlin',
+    country: 'DE',
+    additionalInformation: 'c/o Factory',
+  });
+  return (
+    <AutoCompleteAddress
+      onAddressChange={(address) => {
+        setAddress(address);
+      }}
+      address={address}
+      apiKey="AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8"
+    />
+  );
+};

package/src/lib/components/autocompleteAddress/index.stories.mdx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import AutocompleteAddress from '.';
+import { WithoutAddress, WithAddress } from './demo';
+
+<Meta title="JSX/Autocomplete Address" component={AutocompleteAddress} />
+
+# Autocomplete Address
+
+| attribute       | unit                                      | description                                                                                                                    | default value | required |
+| --------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------- | -------- |
+| address         | `Partial<Address>`                        | The address                                                                                                                    | undefined     | false    |
+| onAddressChange | `function (newAddress: Partial<Address>)` | Callback with the updated address, this function will get called everytime the address gets updated.                           | n/a           | true     |
+| apiKey          | string                                    | Your private API key for the [Google Places API](https://developers.google.com/maps/documentation/places/web-service/overview) | n/a           | true     |
+
+Autocomplete Address are user interface elements which allow users start typing an address and get autocompletion suggestions on the address.
+
+## Important notes
+
+This component is for now only restricted to "address" types and will restrict every query to Germany.
+
+## Default example
+
+### Input without an address filled
+
+<WithoutAddress />
+
+### Input with an address filled
+
+<WithAddress />
+
+```typescript
+import React, { useState } from 'react';
+import { Address } from '@popsure/public-models';
+
+import AutoCompleteAddress from '.';
+
+export default () => {
+  const [address, setAddress] = useState<Address>(undefined);
+  return <AutoCompleteAddress onAddressChange={setAddress} address={address} />;
+};
+```

package/src/lib/components/autocompleteAddress/index.tsx

@@ -0,0 +1,316 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import debounce from 'lodash.debounce';
+import isEqual from 'lodash.isequal';
+import Input from '../input';
+import { Address, countryNameFromAlphaCode } from '@popsure/public-models';
+
+import { geocoderAddressComponentToPartialAddress } from './util';
+
+import styles from './style.module.scss';
+
+const GERMANY_LAT_LNG = { lat: 51.54317, lng: 10.3181503 };
+
+const GERMANY_ALPHA_CODE = 'DE';
+
+const MAP_CONFIG_OBJ = {
+  zoom: 6,
+  center: GERMANY_LAT_LNG,
+  fullscreenControl: false,
+  mapTypeControl: false,
+  panControl: false,
+  zoomControl: false,
+  streetViewControl: false,
+  scrollwheel: false,
+  scaleControl: false,
+  rotateControl: false,
+  draggable: false,
+};
+
+const loadGoogleMapsApiDynamically = (callback: () => void, apiKey: string) => {
+  const existingScript = document.getElementById('googleMapsImportScript');
+
+  if (existingScript) {
+    return;
+  }
+
+  const googleMapImportScript = document.createElement('script');
+  googleMapImportScript.id = 'googleMapsImportScript';
+  googleMapImportScript.type = 'text/javascript';
+  googleMapImportScript.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`;
+  document.head.appendChild(googleMapImportScript);
+
+  googleMapImportScript.onload = () => {
+    callback();
+  };
+};
+
+const AutoCompleteAddress = ({
+  apiKey,
+  address: initialAddress,
+  onAddressChange,
+}: {
+  apiKey: string;
+  address?: Partial<Address>;
+  onAddressChange: (address: Partial<Address>) => void;
+}) => {
+  const [manualAddressEntry, setManualAddressEntry] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const autocomplete = useRef<google.maps.places.Autocomplete | null>(null);
+  const autocompleteElement = useRef<HTMLInputElement | null>(null);
+  const map = useRef<google.maps.Map | null>(null);
+  const marker = useRef<google.maps.Marker | null>(null);
+  const [address, setAddress] = useState(initialAddress);
+  const [hasLoadedGoogleAPI, setHasLoadedGoogleAPI] = useState(
+    window.google !== undefined
+  );
+
+  loadGoogleMapsApiDynamically(() => {
+    setHasLoadedGoogleAPI(true);
+  }, apiKey);
+
+  const [place, setPlace] = useState<google.maps.places.PlaceResult | null>(
+    null
+  );
+
+  useEffect(() => {
+    if (address) {
+      if (autocompleteElement.current && address.street) {
+        autocompleteElement.current.value = address.street;
+      }
+
+      if (isEqual(address, initialAddress) === false) {
+        onAddressChange({ ...address });
+      }
+      handleEnterAddressManually();
+    }
+  }, [initialAddress, address, onAddressChange, hasLoadedGoogleAPI]);
+
+  useEffect(() => {
+    if (hasLoadedGoogleAPI === false) {
+      return;
+    }
+
+    const reference = document.getElementById(
+      'autocomplete'
+    ) as HTMLInputElement;
+
+    autocomplete.current = new google.maps.places.Autocomplete(reference, {
+      types: ['address'],
+      componentRestrictions: { country: GERMANY_ALPHA_CODE },
+    });
+
+    autocomplete.current.addListener('place_changed', onPlaceChanged);
+
+    map.current = new google.maps.Map(
+      document.getElementById('map')!,
+      MAP_CONFIG_OBJ
+    );
+
+    import('./mapStyle').then(({ style }) => {
+      map.current?.mapTypes.set('styled_map', style);
+      map.current?.setMapTypeId('styled_map');
+    });
+
+    marker.current = new google.maps.Marker({
+      map: map.current,
+    });
+
+    setPlaceFromAddress(address);
+  }, [hasLoadedGoogleAPI]); // eslint-disable-line
+
+  const onPlaceChanged = (
+    newPlace:
+      | google.maps.places.PlaceResult
+      | undefined = autocomplete.current?.getPlace(),
+    updateAddress: boolean = true
+  ) => {
+    if (newPlace?.geometry?.location) {
+      const geocoderAddress = geocoderAddressComponentToPartialAddress(
+        newPlace.address_components!
+      );
+
+      setPlace(newPlace);
+      if (updateAddress) {
+        setAddress((oldValue) => ({
+          ...geocoderAddress,
+          additionalInformation: oldValue?.additionalInformation,
+        }));
+      }
+
+      map.current?.panTo(newPlace.geometry.location);
+      map.current?.setZoom(15);
+
+      marker.current?.setPosition(newPlace.geometry.location);
+    }
+  };
+
+  const setPlaceFromAddress = useCallback((address: Partial<Address> | undefined) => {
+    if (!map.current) {
+      return;
+    }
+
+    if (address) {
+      const service = new google.maps.places.PlacesService(map.current);
+      const query = `${address.street ?? ''} ${address.houseNumber ?? ''}, ${
+        address.city ?? ''
+      }, ${address.country ? countryNameFromAlphaCode(address.country) : ''}`;
+      setIsLoading(true);
+      service.findPlaceFromQuery(
+        {
+          fields: ['place_id'],
+          query,
+        },
+        (results) => {
+          const firstResult = results && results[0];
+          if (firstResult && firstResult.place_id) {
+            service.getDetails(
+              { placeId: firstResult.place_id },
+              (newPlace) => {
+                onPlaceChanged(newPlace ?? undefined, false);
+              }
+            );
+          }
+          setIsLoading(false);
+        }
+      );
+    }
+  }, []);
+
+  const debouncedSetPlace = debounce(setPlaceFromAddress, 1000)
+
+  const handleEnterAddressManually = () => {
+    setManualAddressEntry(true);
+  };
+
+  return (
+    <>
+      <div
+        className={classNames(`wmx8 bg-grey-500 ${styles['map-container']}`, {
+          [styles['map-container--hidden']]: place === null,
+        })}
+      >
+        <div className={styles.map} id="map" />
+        {isLoading && (
+          <div className={styles['loading-spinner']}>
+            <div className="ds-spinner ds-spinner__m" />
+          </div>
+        )}
+      </div>
+      <div className={`wmx8`}>
+        {manualAddressEntry === false ? (
+          <div style={{ position: 'relative' }}>
+            <Input
+              className="w100"
+              id="autocomplete"
+              data-cy="autocomplete"
+              type="text"
+              placeholder="Search for address"
+              ref={autocompleteElement}
+            />
+            {hasLoadedGoogleAPI === false && (
+              <div className={styles['loading-spinner']}>
+                <div className="ds-spinner ds-spinner__m" />
+              </div>
+            )}
+          </div>
+        ) : (
+          <>
+            <div className={`d-flex ${styles['input-line']}`}>
+              <Input
+                className="w100"
+                data-cy="autocomplete"
+                type="text"
+                placeholder="Street"
+                value={address?.street || ''}
+                onChange={(e) => {
+                  const newAddress = {
+                    ...address,
+                    street: e.target.value,
+                    country: GERMANY_ALPHA_CODE,
+                  };
+                  setAddress(newAddress);
+                  debouncedSetPlace(newAddress);
+                }}
+              />
+              <Input
+                className={`wmx2 ${styles['house-number-input']}`}
+                data-cy="autocomplete-house-number"
+                placeholder="House Number"
+                value={address?.houseNumber || ''}
+                onChange={(e) => {
+                  const newAddress = {
+                    ...address,
+                    houseNumber: e.target.value,
+                    country: GERMANY_ALPHA_CODE,
+                  };
+                  setAddress(newAddress);
+                  debouncedSetPlace(newAddress);
+                }}
+              />
+            </div>
+            <Input
+              className="mt16"
+              data-cy="autocomplete-additional-info"
+              placeholder="Additional information (C/O, appartment…)"
+              value={address?.additionalInformation || ''}
+              onChange={(e) => {
+                const newAddress = {
+                  ...address,
+                  additionalInformation: e.target.value,
+                  country: GERMANY_ALPHA_CODE,
+                };
+                setAddress(newAddress);
+              }}
+            />
+            <div className={`d-flex mt16 ${styles['input-line']}`}>
+              <Input
+                className="w100"
+                data-cy="autocomplete-postcode"
+                placeholder="Postcode"
+                value={address?.postcode || ''}
+                onChange={(e) => {
+                  const newAddress = {
+                    ...address,
+                    postcode: e.target.value,
+                    country: GERMANY_ALPHA_CODE,
+                  };
+                  setAddress(newAddress);
+                  debouncedSetPlace(newAddress);
+                }}
+              />
+              <Input
+                className="w100"
+                data-cy="autocomplete-city"
+                placeholder="City"
+                value={address?.city || ''}
+                onChange={(e) => {
+                  const newAddress = {
+                    ...address,
+                    city: e.target.value,
+                    country: GERMANY_ALPHA_CODE,
+                  };
+                  setAddress(newAddress);
+                  debouncedSetPlace(newAddress);
+                }}
+              />
+            </div>
+          </>
+        )}
+      </div>
+      {manualAddressEntry === false && (
+        <div className="p-p mt8">
+          Or{' '}
+          <span
+            className="p-a fw-bold c-pointer"
+            onClick={handleEnterAddressManually}
+          >
+            Enter address manually
+          </span>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default AutoCompleteAddress;

package/src/lib/components/autocompleteAddress/mapStyle.ts

@@ -0,0 +1,187 @@
+export const style = new google.maps.StyledMapType(
+  [
+    {
+      elementType: 'geometry',
+      stylers: [
+        {
+          color: '#f5f5f5',
+        },
+      ],
+    },
+    {
+      elementType: 'labels',
+      stylers: [
+        {
+          visibility: 'off',
+        },
+      ],
+    },
+    {
+      elementType: 'labels.icon',
+      stylers: [
+        {
+          visibility: 'off',
+        },
+      ],
+    },
+    {
+      elementType: 'labels.text.fill',
+      stylers: [
+        {
+          color: '#616161',
+        },
+      ],
+    },
+    {
+      elementType: 'labels.text.stroke',
+      stylers: [
+        {
+          color: '#f5f5f5',
+        },
+      ],
+    },
+    {
+      featureType: 'administrative.land_parcel',
+      stylers: [
+        {
+          visibility: 'off',
+        },
+      ],
+    },
+    {
+      featureType: 'administrative.land_parcel',
+      elementType: 'labels.text.fill',
+      stylers: [
+        {
+          color: '#bdbdbd',
+        },
+      ],
+    },
+    {
+      featureType: 'administrative.neighborhood',
+      stylers: [
+        {
+          visibility: 'off',
+        },
+      ],
+    },
+    {
+      featureType: 'poi',
+      elementType: 'geometry',
+      stylers: [
+        {
+          color: '#eeeeee',
+        },
+      ],
+    },
+    {
+      featureType: 'poi',
+      elementType: 'labels.text.fill',
+      stylers: [
+        {
+          color: '#757575',
+        },
+      ],
+    },
+    {
+      featureType: 'poi.park',
+      elementType: 'geometry',
+      stylers: [
+        {
+          color: '#e5e5e5',
+        },
+      ],
+    },
+    {
+      featureType: 'poi.park',
+      elementType: 'labels.text.fill',
+      stylers: [
+        {
+          color: '#9e9e9e',
+        },
+      ],
+    },
+    {
+      featureType: 'road',
+      elementType: 'geometry',
+      stylers: [
+        {
+          color: '#ffffff',
+        },
+      ],
+    },
+    {
+      featureType: 'road.arterial',
+      elementType: 'labels.text.fill',
+      stylers: [
+        {
+          color: '#757575',
+        },
+      ],
+    },
+    {
+      featureType: 'road.highway',
+      elementType: 'geometry',
+      stylers: [
+        {
+          color: '#dadada',
+        },
+      ],
+    },
+    {
+      featureType: 'road.highway',
+      elementType: 'labels.text.fill',
+      stylers: [
+        {
+          color: '#616161',
+        },
+      ],
+    },
+    {
+      featureType: 'road.local',
+      elementType: 'labels.text.fill',
+      stylers: [
+        {
+          color: '#9e9e9e',
+        },
+      ],
+    },
+    {
+      featureType: 'transit.line',
+      elementType: 'geometry',
+      stylers: [
+        {
+          color: '#e5e5e5',
+        },
+      ],
+    },
+    {
+      featureType: 'transit.station',
+      elementType: 'geometry',
+      stylers: [
+        {
+          color: '#eeeeee',
+        },
+      ],
+    },
+    {
+      featureType: 'water',
+      elementType: 'geometry',
+      stylers: [
+        {
+          color: '#c9c9c9',
+        },
+      ],
+    },
+    {
+      featureType: 'water',
+      elementType: 'labels.text.fill',
+      stylers: [
+        {
+          color: '#9e9e9e',
+        },
+      ],
+    },
+  ],
+  { name: 'Styled Map' }
+);