Merge pull request #271 from visualize-admin/feat/cascading-facets

visualize-admin · Jan 27, 2022 · 1d1ee32 · 1d1ee32
2 parents 56604d4 + aac02a6
commit 1d1ee32
Show file tree

Hide file tree

Showing 39 changed files with 1,477 additions and 518 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -5,5 +5,13 @@
     "react/display-name": "off",
     "unused-imports/no-unused-imports-ts": "error",
     "@next/next/no-html-link-for-pages": ["error", "app/pages/"]
-  }
+  },
+  "overrides": [
+    {
+      "files": ["**/*.docs.tsx"], // Or *.test.js
+      "rules": {
+        "import/no-anonymous-default-export": "off"
+      }
+    }
+  ]
 }
diff --git a/app/components/form.tsx b/app/components/form.tsx
@@ -11,11 +11,16 @@ import {
   Select as TUISelect,
   SelectProps,
 } from "theme-ui";
-import { ReactNode, useMemo } from "react";
+import { ChangeEvent, ReactNode, useCallback, useMemo } from "react";
 import { FieldProps, Option } from "../configurator";
 import { Icon } from "../icons";
 import { useId } from "@reach/auto-id";
 import { useLocale } from "../locales/use-locale";
+import { DayPickerInputProps, DayPickerProps } from "react-day-picker";
+import DayPickerInput from "react-day-picker/DayPickerInput";
+import "react-day-picker/lib/style.css";
+import { useTimeFormatUnit } from "../configurator/components/ui-helpers";
+import { TimeUnit } from "../graphql/query-hooks";
 
 export const Label = ({
   label,
@@ -151,18 +156,19 @@ export const Checkbox = ({
 export const Select = ({
   label,
   id,
-  name,
   value,
   disabled,
   options,
   onChange,
   sortOptions = true,
+  controls,
 }: {
   id: string;
   options: Option[];
   label?: ReactNode;
   disabled?: boolean;
   sortOptions?: boolean;
+  controls?: React.ReactNode;
 } & SelectProps) => {
   const locale = useLocale();
   const sortedOptions = useMemo(() => {
@@ -181,6 +187,7 @@ export const Select = ({
       {label && (
         <Label htmlFor={id} disabled={disabled} smaller>
           {label}
+          {controls}
         </Label>
       )}
       <TUISelect
@@ -219,9 +226,7 @@ export const Select = ({
 export const MiniSelect = ({
   label,
   id,
-  name,
   value,
-  disabled,
   options,
   onChange,
 }: {
@@ -292,6 +297,90 @@ export const Input = ({
   </Box>
 );
 
+export const DayPickerField = ({
+  label,
+  name,
+  value,
+  onChange,
+  disabled,
+  controls,
+  ...props
+}: {
+  name: string;
+  value: Date;
+  onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+  controls?: ReactNode;
+  label?: string | ReactNode;
+  disabled?: boolean;
+} & Omit<DayPickerInputProps, "onChange">) => {
+  const handleDayClick = useCallback(
+    (day: Date) => {
+      const ev = {
+        currentTarget: {
+          value: day.toISOString().slice(0, 10),
+        },
+      } as ChangeEvent<HTMLSelectElement>;
+      onChange(ev);
+    },
+    [onChange]
+  );
+  const formatDateAuto = useTimeFormatUnit();
+  const inputProps = useMemo(() => {
+    return {
+      name,
+      formatDate: formatDateAuto,
+      value: formatDateAuto(value, TimeUnit.Day),
+      disabled,
+      ...props.inputProps,
+      style: {
+        padding: "0.625rem 0.75rem",
+        color: disabled ? "monochrome300" : "monochrome700",
+        fontSize: "1rem",
+        minHeight: "1.5rem",
+        display: "block",
+        borderRadius: "0.25rem",
+        width: "100%",
+        border: "1px solid var(--theme-ui-colors-monochrome500)",
+
+        // @ts-ignore
+        ...props.inputProps?.style,
+      },
+    } as DayPickerInputProps;
+  }, [name, formatDateAuto, value, disabled, props.inputProps]);
+
+  const dayPickerProps = useMemo(() => {
+    return {
+      onDayClick: handleDayClick,
+      ...props.dayPickerProps,
+    } as DayPickerProps;
+  }, [handleDayClick, props.dayPickerProps]);
+
+  return (
+    <Box
+      sx={{
+        color: disabled ? "monochrome300" : "monochrome700",
+        fontSize: 4,
+        pb: 2,
+      }}
+    >
+      {label && name && (
+        <Label htmlFor={name} smaller disabled={disabled}>
+          {label}
+          {controls}
+        </Label>
+      )}
+      <DayPickerInput
+        value={value}
+        style={{ width: "100%", color: "inherit" }}
+        {...props}
+        inputProps={inputProps}
+        dayPickerProps={dayPickerProps}
+      />
+      {/* <DayPicker selectedDays={new Date()} /> */}
+    </Box>
+  );
+};
+
 export const SearchField = ({
   id,
   label,

diff --git a/app/components/hint.tsx b/app/components/hint.tsx
@@ -1,7 +1,7 @@
 import { keyframes } from "@emotion/react";
 import { Trans } from "@lingui/macro";
 import { ReactNode } from "react";
-import { Box, Flex, Text } from "theme-ui";
+import { Box, BoxProps, Flex, Text } from "theme-ui";
 import { Icon, IconName } from "../icons";
 
 export const Error = ({ children }: { children: ReactNode }) => (
@@ -45,6 +45,20 @@ const spin = keyframes`
   100% { transform: rotate(0deg) }
 `;
 
+const Spinner = ({ size = 48, ...props }: { size?: number } & BoxProps) => {
+  return (
+    <Box
+      {...props}
+      sx={{
+        animation: `1s linear infinite ${spin}`,
+        ...props.sx,
+      }}
+    >
+      <Icon name="loading" size={size} />
+    </Box>
+  );
+};
+
 export const Loading = ({ delayMs = 1000 }: { delayMs?: number }) => (
   <Flex
     sx={{
@@ -62,13 +76,7 @@ export const Loading = ({ delayMs = 1000 }: { delayMs?: number }) => (
       animation: `0s linear ${delayMs}ms forwards ${delayedShow}`,
     }}
   >
-    <Box
-      sx={{
-        animation: `1s linear infinite ${spin}`,
-      }}
-    >
-      <Icon name="loading" size={48} />
-    </Box>
+    <Spinner />
     <Text as="div" variant="heading4">
       <Trans id="hint.loading.data">Loading data…</Trans>
     </Text>

diff --git a/app/components/reach-ui-custom-styles.css b/app/components/reach-ui-custom-styles.css
@@ -0,0 +1,24 @@
+[data-reach-menu-popover] {
+  margin-top: 0.25rem;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+}
+
+[data-reach-menu-list] {
+  border-radius: 4px;
+  overflow: hidden;
+  padding: 0;
+}
+
+[data-reach-menu-item] {
+  margin: 0;
+  padding: 16px;
+  font-size: 1rem;
+  color: inherit;
+}
+
+[data-reach-menu-item]:hover {
+  background-color: #d8e8ef;
+  color: inherit;
+}
diff --git a/app/components/react-day-picker-custom-styles.css b/app/components/react-day-picker-custom-styles.css
@@ -0,0 +1,28 @@
+.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
+  background-color: var(--theme-ui-colors-primary);
+}
+
+.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover {
+  background-color: var(--theme-ui-colors-primary);
+  cursor: pointer;
+}
+
+.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover {
+  background-color: var(--theme-ui-colors-primaryLight);
+  cursor: pointer;
+}
+
+.DayPicker-Caption > div {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.DayPicker-Weekday {
+  color: var(--theme-ui-colors-monochrome700);
+  font-size: 0.75rem;
+}
+
+.DayPickerInput > input[disabled] {
+  color: var(--theme-ui-colors-monochrome300);
+}