Merge pull request #446 from visualize-admin/updates

.github/workflows/lint-test.yml

@@ -24,3 +24,4 @@ jobs:
       - run: yarn lint
       - run: yarn typecheck
       - run: yarn test
+      - run: yarn build:npm

.gitignore

@@ -6,11 +6,12 @@ node_modules
 /app/locales/_build
 /app/locales/**/*.js
 /app/locales/**/*.mjs
+/app/locales/**/*.ts
 /app/public/dist/**/*.js
 /packages/**/dist
 /app/dist
 .now
 
 .env*.local
 
-__diff_output__
+__diff_output__

app/browser/dataset-browser.tsx

@@ -0,0 +1,28 @@
+import { AppLayout } from "../components/layout";
+import { SelectDatasetStep } from "../configurator/components/select-dataset-step";
+import { ConfiguratorStateProvider } from "../src";
+
+export type BrowseParams = {
+  type?: "theme" | "organization" | "dataset";
+  subtype?: "theme" | "organization";
+  iri?: string;
+  subiri?: string;
+  topic?: string;
+  search?: string;
+  order?: string;
+  includeDrafts?: boolean;
+  dataset?: string;
+};
+
+// Generic component for all browse subpages
+export const DatasetBrowser = () => {
+  return (
+    <AppLayout>
+      <ConfiguratorStateProvider chartId="new" allowDefaultRedirect={false}>
+        <SelectDatasetStep />
+      </ConfiguratorStateProvider>
+    </AppLayout>
+  );
+};
+
+export default DatasetBrowser;

app/browser/index.tsx

@@ -0,0 +1 @@
+export { default as DatasetBrowser } from "./dataset-browser";

app/charts/shared/brush.tsx

@@ -1,5 +1,4 @@
 import { bisector, brushX, select, Selection, Transition } from "d3";
-import "d3-transition";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useFormatFullDateAuto } from "../../configurator/components/ui-helpers";
 import { Observation } from "../../domain/data";

app/charts/shared/chart-helpers.spec.tsx

@@ -1,4 +1,4 @@
-import { InternMap } from "d3-array";
+import { InternMap } from "d3";
 import { merge } from "lodash";
 import { LineConfig } from "../../configurator";
 import { FIELD_VALUE_NONE } from "../../configurator/constants";

app/charts/shared/imputation.tsx

@@ -1,4 +1,4 @@
-import { interpolate } from "d3-interpolate";
+import { interpolate } from "d3";
 import { ChartConfig, isAreaConfig } from "../../configurator";
 
 export const interpolateZerosValue = () => {

app/components/form.tsx

@@ -4,7 +4,6 @@ import VisuallyHidden from "@reach/visually-hidden";
 import { ChangeEvent, ReactNode, useCallback, useMemo } from "react";
 import { DayPickerInputProps, DayPickerProps } from "react-day-picker";
 import DayPickerInput from "react-day-picker/DayPickerInput";
-import "react-day-picker/lib/style.css";
 import {
   Box,
   Button,
@@ -485,7 +484,7 @@ export const FieldSetLegend = ({
       fontWeight: "regular",
       fontSize: [1, 2, 2],
       mb: 1,
-      color: "monochrome600",
+      color: "monochrome800",
     }}
     as="legend"
   >

app/configurator/components/dataset-browse.spec.tsx

@@ -1,5 +1,5 @@
 import { DataCubeOrganization, DataCubeTheme } from "../../graphql/query-hooks";
-import { BrowseParams } from "../../pages/browse";
+import { BrowseParams } from "../../browser/dataset-browser";
 import { getFiltersFromParams } from "./dataset-browse";
 
 const ctx = {

app/configurator/components/dataset-browse.tsx

@@ -40,7 +40,7 @@ import SvgIcCategories from "../../icons/components/IcCategories";
 import SvgIcClose from "../../icons/components/IcClose";
 import SvgIcOrganisations from "../../icons/components/IcOrganisations";
 import { useLocale } from "../../locales/use-locale";
-import { BrowseParams } from "../../pages/browse";
+import { BrowseParams } from "../../browser/dataset-browser";
 import isAttrEqual from "../../utils/is-attr-equal";
 import truthy from "../../utils/truthy";
 import Tag from "./Tag";

app/configurator/components/field.tsx

@@ -2,7 +2,6 @@ import { t } from "@lingui/macro";
 import { extent, TimeLocaleObject, timeParse } from "d3";
 import get from "lodash/get";
 import { ChangeEvent, ReactNode, useCallback, useMemo, useState } from "react";
-import "react-day-picker/lib/style.css";
 import { Flex } from "theme-ui";
 import {
   Option,

app/configurator/components/ui-helpers.ts

@@ -41,8 +41,9 @@ import {
   timeSecond,
   timeWeek,
   timeYear,
+  TimeLocaleObject,
+  timeParse,
 } from "d3";
-import { TimeLocaleObject, timeParse } from "d3-time-format";
 import { memoize } from "lodash";
 import { useMemo } from "react";
 import { ChartProps } from "../../charts/shared/use-chart-state";

app/configurator/interactive-filters/editor-time-brush.tsx

@@ -1,6 +1,5 @@
 import { Trans } from "@lingui/macro";
 import { bisector, brushX, scaleTime, select, Selection } from "d3";
-import "d3-transition";
 import React, { useCallback, useEffect, useRef } from "react";
 import { Flex, Box, Text } from "theme-ui";
 import { Label } from "../../components/form";

app/configurator/interactive-filters/editor-time-interval-brush.tsx

@@ -6,7 +6,6 @@ import {
   select,
   Selection,
 } from "d3";
-import "d3-transition";
 import React, { useCallback, useEffect, useRef } from "react";
 import { Box, Flex, Text } from "theme-ui";
 import { Label } from "../../components/form";

app/docs/color-ramp.docs.tsx

@@ -1,5 +1,5 @@
 import { markdown } from "catalog";
-import { interpolateBrBG, interpolateOranges } from "d3-scale-chromatic";
+import { interpolateBrBG, interpolateOranges } from "d3";
 import { Box } from "theme-ui";
 import { ColorRamp } from "../configurator/components/chart-controls/color-ramp";
 

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interactivethings/visualize-app",
-  "version": "0.5.0",
+  "version": "3.4.9",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,9 @@
     "@deck.gl/layers": "8.6.7",
     "@deck.gl/mesh-layers": "8.6.7",
     "@deck.gl/react": "8.6.7",
+    "@emotion/react": "11.4.0",
     "@juggle/resize-observer": "^3.2.0",
+    "@lingui/core": "3.10.4",
     "@lingui/react": "^3.2.3",
     "@mdx-js/react": "^1.6.22",
     "@next/bundle-analyzer": "^11.0.1",
@@ -44,6 +46,8 @@
     "core-js": "^3.15.1",
     "cors": "^2.8.5",
     "d3": "^6.7.0",
+    "d3-format": "2.0.0",
+    "d3-time-format": "3.0.0",
     "dataloader": "^2.0.0",
     "downshift": "^6.0.6",
     "file-saver": "^2.0.2",
@@ -61,6 +65,7 @@
     "isomorphic-unfetch": "^3.0.0",
     "lodash": "^4.17.20",
     "lunr": "^2.3.9",
+    "make-plural": "6.2.2",
     "maplibre-gl": "^2.1.6",
     "micro-cors": "^0.1.1",
     "nanoid": "^3.1.12",

app/pages/browse/[type].tsx

@@ -1,2 +1,3 @@
-import { GenericBrowse } from "./index";
-export default GenericBrowse;
+import { DatasetBrowser } from "../../browser";
+
+export default DatasetBrowser;

app/pages/browse/[type]/[iri].tsx

@@ -1,9 +1,8 @@
-import { GenericBrowse } from "../index";
 import { GetServerSideProps } from "next";
 import { queryLatestPublishedCubeFromUnversionedIri } from "../../../rdf/query-cube-metadata";
 import { defaultLocale } from "../../../src";
-export default GenericBrowse;
-
+import { DatasetBrowser } from "../../../browser";
+export default DatasetBrowser;
 /**
  * Heuristic to check if a dataset IRI is versioned.
  * Versioned iris look like https://blabla/<number/

app/pages/browse/[type]/[iri]/[subtype]/[subiri].tsx

@@ -1,2 +1,2 @@
-import { GenericBrowse } from "../../../index";
-export default GenericBrowse;
+import { DatasetBrowser } from "../../../../../browser";
+export default DatasetBrowser;

app/pages/browse/index.tsx

@@ -1,33 +1,3 @@
-import React from "react";
-import { AppLayout } from "../../components/layout";
-import { SelectDatasetStep } from "../../configurator/components/select-dataset-step";
-import { ConfiguratorStateProvider } from "../../src";
+import { DatasetBrowser } from "../../browser";
 
-export type BrowseParams = {
-  type?: "theme" | "organization" | "dataset";
-  subtype?: "theme" | "organization";
-  iri?: string;
-  subiri?: string;
-  topic?: string;
-  search?: string;
-  order?: string;
-  includeDrafts?: boolean;
-  dataset?: string;
-};
-
-// Generic component for all browse subpages
-export const GenericBrowse = () => {
-  return (
-    <AppLayout>
-      <ConfiguratorStateProvider chartId="new" allowDefaultRedirect={false}>
-        <SelectDatasetStep />
-      </ConfiguratorStateProvider>
-    </AppLayout>
-  );
-};
-
-const IndexBrowse = () => {
-  return <GenericBrowse />;
-};
-
-export default IndexBrowse;
+export default DatasetBrowser;

app/src/index.ts

@@ -8,6 +8,7 @@ export {
   ConfiguratorStateProvider,
   useConfiguratorState,
 } from "../configurator";
+export { DatasetBrowser } from "../browser";
 export { LocaleProvider, useLocale } from "../locales/use-locale";
 export {
   i18n,

lingui.config.js

@@ -10,7 +10,7 @@ module.exports = {
     },
   ],
   format: "po",
-  compileNamespace: "cjs",
+  compileNamespace: "ts",
   sourceLocale: "en",
   fallbackLocales: {
     default: "en",