update prettier config and run on all files

package.json

@@ -70,6 +70,7 @@
     "jest": "^29.7.0",
     "jsdom": "^26.0.0",
     "prettier": "^3.4.2",
+    "prettier-plugin-organize-imports": "^4.1.0",
     "run-script-os": "^1.1.6",
     "start-server-and-test": "^2.0.9",
     "ts-jest": "^29.2.5",
@@ -87,7 +88,7 @@
     "build:default": "GENERATE_SOURCEMAP=false VITE_CHANGELOG=`cat CHANGELOG.md` VITE_GIT_SHA=`git rev-parse --short HEAD` VITE_GIT_TIME=`git log -1 --format=%ci` tsc && vite build",
     "build:windows": "set \"GENERATE_SOURCEMAP=false\" && tsc && vite build",
     "test": "jest",
-    "prettier": "prettier --write src/**/*.{ts,tsx,json} --end-of-line lf && prettier --write src/*.{ts,tsx,json} --end-of-line lf",
+    "prettier": "prettier --write src/**/*.{ts,tsx,json} && prettier --write src/*.{ts,tsx,json}",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist",
     "predeploy-wikitree": "npm run build",

prettier.config.mjs

@@ -0,0 +1,8 @@
+const config = {
+  bracketSpacing: false,
+  endOfLine: 'lf',
+  singleQuote: true,
+  plugins: ['prettier-plugin-organize-imports'],
+};
+
+export default config;

src/app.tsx

@@ -1,22 +1,11 @@
 import * as H from 'history';
 import queryString from 'query-string';
-import {analyticsEvent} from './util/analytics';
-import {Changelog} from './changelog';
-import {DataSourceEnum, SourceSelection} from './datasource/data_source';
-import {Details} from './details/details';
-import {EmbeddedDataSource, EmbeddedSourceSpec} from './datasource/embedded';
+import {useEffect, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
-import {getI18nMessage} from './util/error_i18n';
-import {IndiInfo} from 'topola';
-import {Intro} from './intro';
+import {Navigate, Route, Routes, useLocation, useNavigate} from 'react-router';
 import {Loader, Message, Portal, Tab} from 'semantic-ui-react';
-import {Media} from './util/media';
-import {Navigate, Route, Routes} from 'react-router';
-import {TopBar} from './menu/top_bar';
-import {TopolaData} from './util/gedcom_util';
-import {useEffect, useState} from 'react';
-import {useNavigate, useLocation} from 'react-router';
-import {idToIndiMap} from './util/gedcom_util';
+import {IndiInfo} from 'topola';
+import {Changelog} from './changelog';
 import {
   Chart,
   ChartType,
@@ -34,20 +23,29 @@ import {
   Ids,
   Sex,
 } from './config';
+import {DataSourceEnum, SourceSelection} from './datasource/data_source';
+import {EmbeddedDataSource, EmbeddedSourceSpec} from './datasource/embedded';
 import {
+  GedcomUrlDataSource,
   getSelection,
+  UploadedDataSource,
   UploadSourceSpec,
   UrlSourceSpec,
-  GedcomUrlDataSource,
-  UploadedDataSource,
 } from './datasource/load_data';
 import {
   loadWikiTree,
   PRIVATE_ID_PREFIX,
   WikiTreeDataSource,
   WikiTreeSourceSpec,
 } from './datasource/wikitree';
+import {Details} from './details/details';
 import {DonatsoChart} from './donatso-chart';
+import {Intro} from './intro';
+import {TopBar} from './menu/top_bar';
+import {analyticsEvent} from './util/analytics';
+import {getI18nMessage} from './util/error_i18n';
+import {idToIndiMap, TopolaData} from './util/gedcom_util';
+import {Media} from './util/media';
 
 /**
  * Load GEDCOM URL from VITE_STATIC_URL environment variable.

src/changelog.tsx

@@ -1,10 +1,10 @@
+import {useEffect, useState} from 'react';
+import {FormattedMessage} from 'react-intl';
 import rehypeStringify from 'rehype-stringify';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import {Button, Header, Modal} from 'semantic-ui-react';
 import {unified} from 'unified';
-import {useEffect, useState} from 'react';
-import {FormattedMessage} from 'react-intl';
 
 const LAST_SEEN_VERSION_KEY = 'last_seen_version';
 

src/chart.tsx

@@ -1,11 +1,6 @@
-import {ChartColors, Ids, Sex} from './config';
-import {interpolateNumber} from 'd3-interpolate';
-import {IntlShape, useIntl} from 'react-intl';
 import {max, min} from 'd3-array';
-import {Media} from './util/media';
-import {saveAs} from 'file-saver';
+import {interpolateNumber} from 'd3-interpolate';
 import {select, Selection} from 'd3-selection';
-import {useEffect, useRef} from 'react';
 import 'd3-transition';
 import {
   D3ZoomEvent,
@@ -14,18 +9,23 @@ import {
   ZoomedElementBaseType,
   zoomTransform,
 } from 'd3-zoom';
+import {saveAs} from 'file-saver';
+import {useEffect, useRef} from 'react';
+import {IntlShape, useIntl} from 'react-intl';
 import {
-  JsonGedcomData,
   ChartHandle,
-  IndiInfo,
+  CircleRenderer,
   createChart,
   DetailedRenderer,
+  FancyChart,
   HourglassChart,
+  IndiInfo,
+  JsonGedcomData,
   RelativesChart,
-  FancyChart,
-  CircleRenderer,
   ChartColors as TopolaChartColors,
 } from 'topola';
+import {ChartColors, Ids, Sex} from './config';
+import {Media} from './util/media';
 import {usePrevious} from './util/previous-hook';
 
 /** How much to zoom when using the +/- buttons. */

src/config.tsx

@@ -1,6 +1,6 @@
-import {Item, Checkbox, Form, Header} from 'semantic-ui-react';
-import {FormattedMessage} from 'react-intl';
 import {ParsedQuery} from 'query-string';
+import {FormattedMessage} from 'react-intl';
+import {Checkbox, Form, Header, Item} from 'semantic-ui-react';
 
 export enum ChartColors {
   NO_COLOR,
@@ -99,7 +99,10 @@ export function ConfigPanel(props: {
                 value="none"
                 checked={props.config.color === ChartColors.NO_COLOR}
                 onClick={() =>
-                  props.onChange({...props.config, color: ChartColors.NO_COLOR})
+                  props.onChange({
+                    ...props.config,
+                    color: ChartColors.NO_COLOR,
+                  })
                 }
               />
             </Form.Field>

src/datasource/embedded.ts

@@ -1,6 +1,6 @@
 import {analyticsEvent} from '../util/analytics';
-import {DataSource, DataSourceEnum, SourceSelection} from './data_source';
 import {getSoftware, TopolaData} from '../util/gedcom_util';
+import {DataSource, DataSourceEnum, SourceSelection} from './data_source';
 import {loadGedcom} from './load_data';
 
 /**

src/datasource/load_data.spec.ts

@@ -1,7 +1,7 @@
-import {expect, describe, it} from '@jest/globals';
-import {loadFile} from './load_data';
-import {readFileSync} from 'fs';
+import {describe, expect, it} from '@jest/globals';
 import {Blob} from 'buffer';
+import {readFileSync} from 'fs';
+import {loadFile} from './load_data';
 
 describe('loadFile', () => {
   global.URL.createObjectURL = jest.fn();

src/datasource/load_data.ts

@@ -1,10 +1,10 @@
+import {Buffer} from 'buffer';
+import {strFromU8, unzip, Unzipped} from 'fflate';
+import {IndiInfo, JsonGedcomData} from 'topola';
 import {analyticsEvent} from '../util/analytics';
+import {TopolaError} from '../util/error';
 import {convertGedcom, getSoftware, TopolaData} from '../util/gedcom_util';
 import {DataSource, DataSourceEnum, SourceSelection} from './data_source';
-import {IndiInfo, JsonGedcomData} from 'topola';
-import {TopolaError} from '../util/error';
-import {strFromU8, unzip, Unzipped} from 'fflate';
-import {Buffer} from 'buffer';
 
 /**
  * Returns a valid IndiInfo object, either with the given indi and generation

src/datasource/wikitree.ts

@@ -1,5 +1,5 @@
-import {analyticsEvent} from '../util/analytics';
-import {DataSource, DataSourceEnum, SourceSelection} from './data_source';
+import {GedcomEntry} from 'parse-gedcom';
+import {IntlShape} from 'react-intl';
 import {
   Date,
   DateOrRange,
@@ -9,19 +9,19 @@ import {
   JsonImage,
   JsonIndi,
 } from 'topola';
-import {GedcomData, normalizeGedcom, TopolaData} from '../util/gedcom_util';
-import {GedcomEntry} from 'parse-gedcom';
-import {IntlShape} from 'react-intl';
-import {TopolaError} from '../util/error';
-import {isValidDateOrRange} from '../util/date_util';
 import {StringUtils} from 'turbocommons-ts';
 import {
-  getAncestors as getAncestorsApi,
-  getRelatives as getRelativesApi,
   clientLogin,
+  getAncestors as getAncestorsApi,
   getLoggedInUserName,
+  getRelatives as getRelativesApi,
   Person,
 } from 'wikitree-js';
+import {analyticsEvent} from '../util/analytics';
+import {isValidDateOrRange} from '../util/date_util';
+import {TopolaError} from '../util/error';
+import {GedcomData, normalizeGedcom, TopolaData} from '../util/gedcom_util';
+import {DataSource, DataSourceEnum, SourceSelection} from './data_source';
 
 const WIKITREE_APP_ID = 'topola-viewer';
 

src/details/details.tsx

@@ -1,4 +1,7 @@
 import flatMap from 'array.prototype.flatmap';
+import {GedcomEntry} from 'parse-gedcom';
+import {FormattedMessage} from 'react-intl';
+import {Header, Item} from 'semantic-ui-react';
 import {
   dereference,
   GedcomData,
@@ -7,11 +10,8 @@ import {
   getImageFileEntry,
 } from '../util/gedcom_util';
 import {Events} from './events';
-import {GedcomEntry} from 'parse-gedcom';
 import {MultilineText} from './multiline-text';
 import {TranslatedTag} from './translated-tag';
-import {Header, Item} from 'semantic-ui-react';
-import {FormattedMessage} from 'react-intl';
 import {WrappedImage} from './wrapped-image';
 
 const EXCLUDED_TAGS = [

src/details/event-extras.tsx

@@ -1,4 +1,7 @@
+import * as React from 'react';
+import {useState} from 'react';
 import {FormattedMessage, IntlShape, useIntl} from 'react-intl';
+import Linkify from 'react-linkify';
 import {
   Icon,
   Item,
@@ -8,13 +11,10 @@ import {
   Popup,
   Tab,
 } from 'semantic-ui-react';
-import {useState} from 'react';
-import {WrappedImage} from './wrapped-image';
-import * as React from 'react';
-import {MultilineText} from './multiline-text';
 import {DateOrRange} from 'topola';
 import {formatDateOrRange} from '../util/date_util';
-import Linkify from 'react-linkify';
+import {MultilineText} from './multiline-text';
+import {WrappedImage} from './wrapped-image';
 
 export interface Image {
   url: string;

src/details/events.tsx

@@ -1,23 +1,23 @@
-import queryString from 'query-string';
 import flatMap from 'array.prototype.flatmap';
+import {GedcomEntry} from 'parse-gedcom';
+import queryString from 'query-string';
+import {FormattedMessage, IntlShape, useIntl} from 'react-intl';
+import {Link, useLocation} from 'react-router';
+import {Header, Item} from 'semantic-ui-react';
+import {DateOrRange, getDate} from 'topola';
 import {calcAge} from '../util/age_util';
 import {compareDates, formatDateOrRange} from '../util/date_util';
-import {DateOrRange, getDate} from 'topola';
 import {
   dereference,
   GedcomData,
   getData,
-  getImageFileEntry,
   getFileName,
+  getImageFileEntry,
   getName,
+  pointerToId,
 } from '../util/gedcom_util';
-import {GedcomEntry} from 'parse-gedcom';
-import {FormattedMessage, IntlShape, useIntl} from 'react-intl';
-import {Link, useLocation} from 'react-router';
-import {pointerToId} from '../util/gedcom_util';
-import {TranslatedTag} from './translated-tag';
-import {Header, Item} from 'semantic-ui-react';
 import {EventExtras, Image, Source} from './event-extras';
+import {TranslatedTag} from './translated-tag';
 
 function PersonLink(props: {person: GedcomEntry}) {
   const location = useLocation();

src/details/wrapped-image.tsx

@@ -1,3 +1,5 @@
+import {SyntheticEvent, useState} from 'react';
+import {FormattedMessage} from 'react-intl';
 import {
   Container,
   Icon,
@@ -7,8 +9,6 @@ import {
   Modal,
   Placeholder,
 } from 'semantic-ui-react';
-import {SyntheticEvent, useState} from 'react';
-import {FormattedMessage} from 'react-intl';
 
 interface Props {
   url: string;

src/donatso-chart.tsx

@@ -2,7 +2,6 @@ import f3 from 'family-chart';
 import {useEffect, useRef} from 'react';
 import {IntlShape, useIntl} from 'react-intl';
 import {IndiInfo, JsonFam, JsonGedcomData} from 'topola';
-
 import {formatDateOrRange} from './util/date_util';
 import {usePrevious} from './util/previous-hook';