@datawheel/bespoke 0.1.20 → 0.1.21

package/dist/index.js

@@ -16,7 +16,7 @@ import { NotificationsProvider, showNotification } from '@mantine/notifications'
 import React, { forwardRef, useMemo, useState, useCallback, useContext, useEffect, createContext, useRef, Fragment as Fragment$1, createElement } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useDispatch, useSelector } from 'react-redux';
-import { Stack, Text, Badge, Group, Tooltip, ActionIcon, Center, useMantineTheme, Modal, Button, Flex, Title, Select, SegmentedControl, MultiSelect, Box, List, Menu, Anchor, MantineProvider, Divider, Burger, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Container, TextInput, Loader, Alert, Autocomplete, Card, Space, Code, Textarea, Overlay, Grid, Input, Popover, Checkbox, Radio, Switch, Drawer, Tabs, Header, SimpleGrid, Image, FileInput, Accordion, CopyButton, Paper, NumberInput, Col } from '@mantine/core';
+import { Stack, Text, Badge, Group, Tooltip, ActionIcon, Center, useMantineTheme, Modal, Button, Flex, Title, Select, SegmentedControl, MultiSelect, Box, List, Menu, Anchor, MantineProvider, Divider, Burger, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Container, TextInput, Loader, Alert, Autocomplete, Card, Space, Code, Textarea, Overlay, Grid, Input, Popover, Checkbox, Radio, Switch, Drawer, Tabs, Header, SimpleGrid, Image, Paper, FileInput, Accordion, CopyButton, NumberInput, Col } from '@mantine/core';
 import { dataConcat } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
 import { IconInfoCircle, IconBoxMargin, IconTable, IconMathFunction, IconUsers, IconLogout, IconSearch, IconTrash, IconUserCircle, IconDatabase, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconCirclePlus, IconCircleX, IconFlag, IconFileAnalytics, IconPlus, IconCamera, IconShare, IconCircleDashed, IconListSearch, IconRefreshAlert, IconSettings, IconMenu, IconRefresh, IconPolaroid, IconCircleMinus, IconEyeOff, IconAlignLeft, IconAlignCenter, IconAlignRight, IconLogin, IconWorld, IconLock, IconVariable, IconArrowRightCircle, IconExternalLink, IconDownload, IconTemplate, IconChartBar, IconCode, IconUpload, IconLink, IconClipboardCheck, IconClipboardCopy, IconPalette, IconEye, IconRss, IconGlobe } from '@tabler/icons';
@@ -35,7 +35,7 @@ import { saveElement } from 'd3plus-export';
 import slugifyFn from 'slugify';
 import { FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, TelegramShareButton, TelegramIcon, WhatsappShareButton, WhatsappIcon, LinkedinShareButton, LinkedinIcon, RedditShareButton, RedditIcon, EmailShareButton, EmailIcon } from 'react-share';
 import Head from 'next/head';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import Editor, { useMonaco } from '@monaco-editor/react';
 import { format } from 'pretty-format';
 import { Editor as Editor$1 } from '@tinymce/tinymce-react';
@@ -3724,16 +3724,12 @@ function createOutline(elements, variables) {
   }
   return roots;
 }
-function useContentOutline(min = 1, max = 6) {
-  if (!min)
-    min = 1;
-  if (!max)
-    max = 6;
+function useContentOutline(min = 1, max = 6, headings = []) {
   const state = useAppSelector((state2) => state2);
   const variables = useAppSelector((state2) => state2.variables.variables);
   const sectionList = useSectionList();
   const titleList = selectBlockList(state).filter((block) => {
-    return block.type === BLOCK_TYPES.TITLE;
+    return block.type === BLOCK_TYPES.TITLE && headings.includes(block.id);
   });
   const titleBlocks = Object.fromEntries(titleList.map((block) => [block.id, block]));
   const titleVariables = Object.fromEntries(titleList.map((block) => [block.id, variables[block.id]]));
@@ -3757,16 +3753,16 @@ function useContentOutline(min = 1, max = 6) {
         return currentOrder >= min && currentOrder <= max;
       });
     }
-  }, [min, max, sectionList, titleBlocks]);
+  }, [headings, sectionList, titleBlocks]);
   return useMemo(() => {
     if (titlesSorted && titlesSorted?.length > 0) {
       return createOutline(titlesSorted, titleVariables);
     }
   }, [titlesSorted, titleVariables]);
 }
-function NavView({ settings }) {
+function NavView({ headings, settings }) {
   const { type, min, max } = settings;
-  const contentOutline = useContentOutline(parseInt(min, 10), parseInt(max, 10));
+  const contentOutline = useContentOutline(parseInt(min, 10), parseInt(max, 10), headings);
   const renderMenu = (nodes) => {
     if (!nodes || !nodes?.length) {
       return null;
@@ -4221,9 +4217,16 @@ function SelectorUI(props) {
 }
 var SelectorUI_default = SelectorUI;
 
+// components/blocks/types/simpleEditors/NavUI.tsx
+init_esm_shims();
+function NavUI() {
+  return /* @__PURE__ */ jsx(Title, { order: 4, children: "Nav UI" });
+}
+
 // components/blocks/types/simpleEditors/index.js
 var simpleEditors_default = {
-  [BLOCK_TYPES.SELECTOR]: SelectorUI_default
+  [BLOCK_TYPES.SELECTOR]: SelectorUI_default,
+  [BLOCK_TYPES.NAV]: NavUI
 };
 
 // components/blocks/types/renderers/index.tsx
@@ -4577,9 +4580,9 @@ function stringifyPreview(member) {
   const variant = "variant_slug" in member ? member.variant_slug : member.variant.slug;
   return `${variant}/${member.slug}`;
 }
-function NavPreview({ settings }) {
+function NavPreview({ headings, settings }) {
   const { type, min, max } = settings;
-  const contentOutline = useContentOutline(parseInt(min, 10), parseInt(max, 10));
+  const contentOutline = useContentOutline(parseInt(min, 10), parseInt(max, 10), headings);
   const renderMenu = (nodes) => {
     if (!nodes || !nodes?.length) {
       return null;
@@ -4729,7 +4732,7 @@ function Block({ blockId, active = true }) {
     locale
   };
   const [content, setContent] = useState(() => {
-    if (![BLOCK_TYPES.GENERATOR, BLOCK_TYPES.VIZ].includes(block?.type)) {
+    if (![BLOCK_TYPES.GENERATOR, BLOCK_TYPES.VIZ, BLOCK_TYPES.NAV].includes(block?.type)) {
       if (block?.type === BLOCK_TYPES.SELECTOR) {
         const blockContent2 = getBlockContent(block, locale);
         const { config: renderVariables } = runSelector_default(blockContent2?.logic, formatterFunctions, blockContext);
@@ -4793,12 +4796,22 @@ function Block({ blockId, active = true }) {
         return;
       }
       if (block.type === BLOCK_TYPES.SELECTOR) {
-        const blockContent2 = getBlockContent(block);
+        const blockContent2 = getBlockContent(block, locale);
         const { config: renderVariables } = runSelector_default(blockContent2.logic, formatterFunctions, blockContext);
         const content2 = renderVariables;
         setContent({ ...content2, id: block.id, section: block.section_id });
         return;
       }
+      if (block.type === BLOCK_TYPES.NAV) {
+        console.log("nav block", block);
+        setContent({
+          id: block.id,
+          headings: block.inputs,
+          section: block.section_id,
+          settings: block.settings
+        });
+        return;
+      }
       const swappedLogic = varSwap_default(blockContent?.logic, formatterFunctions, blockContext);
       const { vars } = mortarEval_default(
         "variables",
@@ -4814,9 +4827,11 @@ function Block({ blockId, active = true }) {
     fetch();
   }, [blockContent, variables]);
   if (!block || !content || !allowed)
-    return;
+    return null;
+  if (block.type === "nav")
+    console.log("nav", content);
   const Renderer = blocks_default[block.type];
-  return /* @__PURE__ */ jsx("div", { id: `bespoke-${block.type}-${block.id}`, className: `cms-block-wrapper cms-block-${blockId}`, children: /* @__PURE__ */ jsx(Renderer, { ...content, settings: block.settings }) });
+  return /* @__PURE__ */ jsx("div", { id: `bespoke-${block.type}-${block.id}`, className: `cms-block-wrapper cms-block-${blockId}`, children: /* @__PURE__ */ jsx(Renderer, { ...content }) });
 }
 
 // libs/settings/section.tsx
@@ -5523,35 +5538,69 @@ function Options(props) {
     )
   ] });
 }
-var OuterWrappers = {
-  "sticky": ({ children, ...props }) => /* @__PURE__ */ jsx(
-    Paper,
-    {
-      pos: "sticky",
+
+// frontend/hooks/useBespokeStyles.ts
+init_esm_shims();
+function useBespokeStyles() {
+  const theme = useMantineTheme();
+  return theme.other.bespokeStyles || {};
+}
+var getStyles = (styles, settings) => (theme) => styles ? styles(theme, settings) : {};
+var PositionWrapper = ({ settings, styles, children, ...props }) => {
+  const { position } = settings;
+  const defaultStyles = {
+    "normal": {
+      position: "relative",
+      backgroundColor: "transparent",
+      borderRadius: 0
+    },
+    "sticky": {
+      position: "sticky",
+      zIndex: 3,
       top: 0,
+      borderRadius: 0,
+      borderTop: "none",
+      borderLeft: "none",
+      borderRight: "none"
+    }
+  };
+  const defaultProps = {
+    "normal": {
+      radius: 0
+    },
+    "sticky": {
       radius: 0,
-      sx: { zIndex: 3, borderTop: "none", borderLeft: "none", borderRight: "none" },
-      ...props,
-      withBorder: true,
-      children
+      withBorder: true
     }
-  ),
-  "normal": ({ children, ...props }) => /* @__PURE__ */ jsx(Box, { pos: "relative", ...props, children })
-};
-var WidthWrappers = {
-  "full": ({ children, ...props }) => /* @__PURE__ */ jsx(Container, { ...props, fluid: true, p: "md", children }),
-  "center": ({ children, ...props }) => /* @__PURE__ */ jsx(Container, { ...props, p: "md", children })
+  };
+  const sx = [defaultStyles[position], getStyles(styles, settings)];
+  return /* @__PURE__ */ jsx(Paper, { component: "section", sx, ...defaultProps[position], ...props, children });
 };
-var StyleWrappers = {
-  "none": ({ children, ...props }) => /* @__PURE__ */ jsx(Box, { ...props, children }),
-  "card": ({ children, ...props }) => /* @__PURE__ */ jsx(Paper, { ...props, shadow: "lg", p: "md", radius: "md", children })
+var WidthWrapper = ({ settings, styles, children, ...props }) => {
+  const { width: container } = settings;
+  const defaultStyles = {
+    "center": {},
+    "full": {}
+  };
+  const defaultProps = {
+    "center": { size: "md", p: "sm", fluid: false },
+    "full": { fluid: true, p: "md" }
+  };
+  const sx = [defaultStyles[container], getStyles(styles, settings)];
+  return /* @__PURE__ */ jsx(Container, { sx, ...defaultProps[container], ...props, children });
 };
-var getWrappers = (settings) => {
-  return {
-    Outer: OuterWrappers[settings.position],
-    Container: WidthWrappers[settings.width],
-    Wrapper: StyleWrappers[settings.style]
-  };
+var StyleWrapper = ({ settings, styles, children, ...props }) => {
+  const { style: variant } = settings;
+  const defaultStyles = {
+    "none": {},
+    "card": {}
+  };
+  const defaultProps = {
+    "none": { bg: "transparent" },
+    "card": { shadow: "lg", p: "md", radius: "md" }
+  };
+  const sx = [defaultStyles[variant], getStyles(styles, settings)];
+  return /* @__PURE__ */ jsx(Paper, { sx, ...defaultProps[variant], ...props, children });
 };
 function Section({ section }) {
   const { id, settings } = section;
@@ -5560,6 +5609,7 @@ function Section({ section }) {
     ...settings
   };
   const state = useAppSelector((state2) => state2);
+  const sectionStyles = useBespokeStyles()["Section"];
   const blockRecords = selectBlockRecords(state);
   const theme = useMantineTheme();
   const smallScreen = useMediaQuery(`(max-width: ${theme.breakpoints.sm}px)`);
@@ -5571,55 +5621,62 @@ function Section({ section }) {
     }
     return acc;
   }, {});
-  const Wrappers = getWrappers(sectionSettings2);
-  return /* @__PURE__ */ jsxs(Wrappers.Outer, { component: "section", children: [
-    sectionSettings2.memberImageBg && /* @__PURE__ */ jsx(SectionBackground, {}),
-    /* @__PURE__ */ jsx(
-      Wrappers.Container,
-      {
-        className: `cms-section-${id}`,
-        pos: "relative",
-        p: 0,
-        children: /* @__PURE__ */ jsx(Wrappers.Wrapper, { children: /* @__PURE__ */ jsxs(
-          Flex,
+  return /* @__PURE__ */ jsxs(
+    PositionWrapper,
+    {
+      settings: sectionSettings2,
+      styles: sectionStyles?.root || void 0,
+      children: [
+        sectionSettings2.memberImageBg && /* @__PURE__ */ jsx(SectionBackground, {}),
+        /* @__PURE__ */ jsx(
+          WidthWrapper,
           {
-            className: "cms-section-content",
-            align: "stretch",
-            direction: smallScreen ? "column" : "row",
+            settings: sectionSettings2,
+            styles: sectionStyles?.container,
+            className: `cms-section-${id}`,
             pos: "relative",
-            gap: "md",
-            children: [
-              sectionSettings2.optionsMenu && /* @__PURE__ */ jsx("div", { style: {
-                position: "absolute",
-                right: 10,
-                top: 10,
-                zIndex: 100
-              }, children: /* @__PURE__ */ jsx(Options, { sectionId: section.id }) }),
-              Object.keys(columns).sort((a, b) => orderSort(a, b, "blockcol")).map((columnIndex) => {
-                const column = columns[columnIndex];
-                const staticWidths = Object.values(column).map(({ id: id2 }) => parseFloat(blockRecords[id2]?.settings?.width)).filter((d) => !Number.isNaN(d));
-                return /* @__PURE__ */ jsx(
-                  Stack,
-                  {
-                    className: "cms-section-col",
-                    sx: {
-                      flex: "1 1 100%",
-                      maxWidth: staticWidths.length ? Math.max(...staticWidths) : "none"
-                    },
-                    children: Object.values(column).sort((a, b) => orderSort(a, b, "blockrow")).map((item) => {
-                      if (item.id)
-                        return /* @__PURE__ */ jsx(Block, { blockId: item.id }, item.id);
-                    })
-                  },
-                  columnIndex
-                );
-              })
-            ]
+            children: /* @__PURE__ */ jsx(StyleWrapper, { settings: sectionSettings2, styles: sectionStyles?.content, children: /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                className: "cms-section-content",
+                align: "stretch",
+                direction: smallScreen ? "column" : "row",
+                pos: "relative",
+                gap: "md",
+                children: [
+                  sectionSettings2.optionsMenu && /* @__PURE__ */ jsx("div", { style: {
+                    position: "absolute",
+                    right: 10,
+                    top: 10,
+                    zIndex: 100
+                  }, children: /* @__PURE__ */ jsx(Options, { sectionId: section.id }) }),
+                  Object.keys(columns).sort((a, b) => orderSort(a, b, "blockcol")).map((columnIndex) => {
+                    const column = columns[columnIndex];
+                    const staticWidths = Object.values(column).map(({ id: id2 }) => parseFloat(blockRecords[id2]?.settings?.width || "none")).filter((d) => !Number.isNaN(d));
+                    return /* @__PURE__ */ jsx(
+                      Stack,
+                      {
+                        className: "cms-section-col",
+                        sx: {
+                          flex: "1 1 100%",
+                          maxWidth: staticWidths.length ? Math.max(...staticWidths) : "none"
+                        },
+                        children: Object.values(column).sort((a, b) => orderSort(a, b, "blockrow")).map((item) => {
+                          if (item.id)
+                            return /* @__PURE__ */ jsx(Block, { blockId: item.id }, item.id);
+                        })
+                      },
+                      columnIndex
+                    );
+                  })
+                ]
+              }
+            ) })
           }
-        ) })
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 }
 var Section_default = Section;
 function Report() {
@@ -7573,6 +7630,10 @@ function BlockPreview(props) {
         setStatus2(status2);
         return;
       }
+      if (block.type === BLOCK_TYPES.NAV) {
+        setContent({ headings: block.inputs, settings: block.settings });
+        return;
+      }
       const swappedLogic = varSwap_default(blockContent?.logic, formatterFunctions, blockContext);
       const { vars, error: error2, log: log2 } = mortarEval_default(
         "variables",
@@ -7612,7 +7673,7 @@ function BlockPreview(props) {
       style: { width: "100%", minHeight: block.type === BLOCK_TYPES.VIZ && 300 },
       children: [
         !allowed && allowedOverlay,
-        Renderer ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Renderer, { debug, ...content, settings: block.settings }) }, "renderer") : /* @__PURE__ */ jsx(Center, { style: { minHeight: 100 }, children: /* @__PURE__ */ jsx(Badge, { color: "gray", variant: "outline", children: block.type }, "type") }),
+        Renderer ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Renderer, { debug, ...content }) }, "renderer") : /* @__PURE__ */ jsx(Center, { style: { minHeight: 100 }, children: /* @__PURE__ */ jsx(Badge, { color: "gray", variant: "outline", children: block.type }, "type") }),
         debug && textLog && /* @__PURE__ */ jsx(
           Textarea,
           {
@@ -8884,7 +8945,7 @@ function SectionEditor({
                     className: "cms-section-column",
                     style: {
                       flex: "1 1 100%",
-                      maxWidth: staticWidths.length ? Math.max(...staticWidths) : "none",
+                      maxWidth: staticWidths.length ? Math.max(...staticWidths) : "100%",
                       padding: site_default.column.padding
                     },
                     children: /* @__PURE__ */ jsx(Droppable, { droppableId: columnIndex, children: (provided, snapshot) => /* @__PURE__ */ jsxs(
@@ -8902,7 +8963,8 @@ function SectionEditor({
                           flexWrap: Object.values(column).find(
                             (item) => blocks[item.id]?.settings?.display === "inline"
                           ) ? "wrap" : "nowrap",
-                          height: "100%"
+                          height: "100%",
+                          maxWidth: "100%"
                         },
                         children: [
                           Object.values(column).sort((a, b) => orderSort(a, b, "blockrow")).map((item, rowIndex) => {
@@ -9049,10 +9111,7 @@ function InteractiveReport(props) {
   const sectionMap = useAppSelector(selectSectionRecords);
   const currentLocale = useAppSelector((state) => state.status.currentLocale);
   const [activeSection, setActiveSection] = useState(null);
-  const [sectionOrder, setSectionOrder] = useState(report.sections);
-  useEffect(() => {
-    setSectionOrder(report.sections);
-  }, [report.sections]);
+  const sectionOrder = useMemo(() => report.sections, [report.sections]);
   const maybeActivate = useCallback((sectionId) => {
     const onActivate = () => {
       setActiveSection(sectionId);
@@ -9079,12 +9138,10 @@ function InteractiveReport(props) {
     const newOrder = sectionOrder.slice();
     const changed = newOrder.splice(result.source.index, 1);
     newOrder.splice(result.destination.index, 0, ...changed);
-    setSectionOrder(newOrder);
     dispatch(actions_exports.updateEntity("section", { id, ordering })).then(() => {
       dispatch(actions_exports.readEntity("report", { id: report.id, include: true }));
     });
   }, [sectionMap, sectionOrder]);
-  console.log(sectionOrder);
   const droppableChild = useCallback((droppableProvided) => /* @__PURE__ */ jsxs(
     "div",
     {
@@ -11568,14 +11625,18 @@ function MainLink({ item, disabled }) {
 // views/BespokeRenderer.tsx
 init_esm_shims();
 init_ResourceProvider();
-function BespokeRenderer({ pathSegmentsKey = "bespoke", buildTime }) {
+function BespokeRenderer({
+  pathSegmentsKey = "bespoke",
+  bespokeStyles,
+  buildTime
+}) {
   const loading = useInitialState(pathSegmentsKey);
   if (loading)
     return /* @__PURE__ */ jsx(LoadingOverlay, { visible: true });
-  return /* @__PURE__ */ jsxs(ResourceProvider, { pathSegment: "bespoke", children: [
+  return /* @__PURE__ */ jsx(MantineProvider, { theme: { other: { bespokeStyles } }, inherit: true, children: /* @__PURE__ */ jsxs(ResourceProvider, { pathSegment: "bespoke", children: [
     /* @__PURE__ */ jsx(Report_default, {}),
     /* @__PURE__ */ jsx("small", { children: buildTime })
-  ] });
+  ] }) });
 }
 
 export { Explore_default as BespokeExplore, ExploreModal_default as BespokeExploreModal, LoginButton_default as BespokeLoginBtn, BespokeManager, BespokeRenderer, Report_default as BespokeReport, Search_default as BespokeSearch, UserProvider_default as BespokeUserProvider, withPageRoleAuthRequired as BespokeWithPageRoleAuthRequired, CMS_ROLES, DialogProvider, actions_exports as actions, storeWrapper, useAppDispatch as useBespokeDispatch, useAppSelector as useBespokeSelector, useUser_default as useBespokeUser, useDialog };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/bespoke",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "Content management system for creating automated data reports",
   "exports": {
     ".": {
@@ -41,6 +41,7 @@
   "dependencies": {
     "@auth0/nextjs-auth0": "^2.0.1",
     "@emotion/react": "^11.10.4",
+    "@hello-pangea/dnd": "^16.2.0",
     "@mantine/core": "^5.6.3",
     "@mantine/dates": "^5.6.3",
     "@mantine/dropzone": "^5.6.3",
@@ -88,7 +89,6 @@
     "pg": "^8.7.3",
     "pretty-format": "^28.1.1",
     "react": "^18.0.2",
-    "react-beautiful-dnd": "^13.1.0",
     "react-clipboard.js": "^2.0.16",
     "react-icons": "^4.3.1",
     "react-redux": "^7.2.6",