adds custom sections support through props

Datawheel · Mar 10, 2023 · b323af4 · b323af4
1 parent 974cdbe
commit b323af4
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 77 deletions.
diff --git a/example-next/cms/sections/Default.js b/example-next/cms/sections/Default.js
@@ -1,4 +1,4 @@
-import {Grid, SimpleGrid, Stack, Title} from "@mantine/core";
+import {Grid, SimpleGrid, Stack, Title, Box} from "@mantine/core";
 import React, {useRef} from "react";
 import {Viz} from "@datawheel/canon-next";
 
@@ -25,63 +25,67 @@ export default function Default({
   const section = useRef(null);
 
   return (
-    <Grid
-      className={`cp-section-inner cp-default-section-inner cp-${slug}-section-inner ${loading ? "is-loading" : ""}`}
-      ref={section}
-      my="md"
-    >
-      {/* sidebar */}
-      <Grid.Col
-        md={3}
-        span={12}
-        className="cp-section-content cp-default-section-caption"
+    <Box pos="relative">
+      <Title pos="absolute" fs={64} ta="center" sx={{zIndex: -1, opacity: 0.1, top: "50%", left: "50%", transform: "translate(-50%, -50%)"}}>This is a custom section</Title>
+      <Grid
+        className={`cp-section-inner cp-default-section-inner cp-${slug}-section-inner ${loading ? "is-loading" : ""}`}
+        ref={section}
+        my="md"
       >
-        <Stack spacing="sm">
-          {heading}
-          {filters}
-          {stats}
-          {paragraphs}
-          {sources}
-          {resetButton}
-        </Stack>
-      </Grid.Col>
 
-      {/* caption */}
-      {visualizations.length
-        ? <Grid.Col
-          md={9}
+        {/* sidebar */}
+        <Grid.Col
+          md={3}
           span={12}
-          className={`cp-default-section-figure${
-            visualizations.length > 1 ? " cp-multicolumn-default-section-figure" : ""
-          }${
-            visualizations.filter(
-              viz => viz.logic_simple && viz.logic_simple.type === "Graphic"
-            ).length ? " cp-graphic-viz-grid" : ""
-          }`}
+          className="cp-section-content cp-default-section-caption"
         >
-          <SimpleGrid
-            breakpoints={[
-              {minWidth: "sm", cols: 1},
-              {minWidth: "md", cols: visualizations.length >= 2 ? 2 : 1}
-            ]}
-          >
-            {visualizations.map(visualization =>
-              <Viz
-                section={section}
-                config={visualization}
-                headingLevel={vizHeadingLevel}
-                sectionTitle={title}
-                slug={slug}
-                hideOptions={hideOptions}
-                configOverride={configOverride}
-                updateSource={updateSource}
-                onSetVariables={onSetVariables}
-                key={visualization.id}
-              />
-            )}
-          </SimpleGrid>
+          <Stack spacing="sm">
+            {heading}
+            {filters}
+            {stats}
+            {paragraphs}
+            {sources}
+            {resetButton}
+          </Stack>
         </Grid.Col>
-        : ""}
-    </Grid>
+
+        {/* caption */}
+        {visualizations.length
+          ? <Grid.Col
+            md={9}
+            span={12}
+            className={`cp-default-section-figure${
+              visualizations.length > 1 ? " cp-multicolumn-default-section-figure" : ""
+            }${
+              visualizations.filter(
+                viz => viz.logic_simple && viz.logic_simple.type === "Graphic"
+              ).length ? " cp-graphic-viz-grid" : ""
+            }`}
+          >
+            <SimpleGrid
+              breakpoints={[
+                {minWidth: "sm", cols: 1},
+                {minWidth: "md", cols: visualizations.length >= 2 ? 2 : 1}
+              ]}
+            >
+              {visualizations.map(visualization =>
+                <Viz
+                  section={section}
+                  config={visualization}
+                  headingLevel={vizHeadingLevel}
+                  sectionTitle={title}
+                  slug={slug}
+                  hideOptions={hideOptions}
+                  configOverride={configOverride}
+                  updateSource={updateSource}
+                  onSetVariables={onSetVariables}
+                  key={visualization.id}
+                />
+              )}
+            </SimpleGrid>
+          </Grid.Col>
+          : ""}
+      </Grid>
+    </Box>
   );
 }
diff --git a/example-next/next-i18next.config.js b/example-next/next-i18next.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   i18n: {
     defaultLocale: "default",
-    locales: ["default", "en", "es"]
+    locales: ["default", "en", "ar"]
   },
   trailingSlash: true
 };
diff --git a/example-next/next.config.js b/example-next/next.config.js
@@ -1,14 +1,8 @@
 const {i18n} = require("./next-i18next.config");
-const rootDir = process.cwd();
-const path = require("path");
 
 const nextConfig = {
   i18n,
-  reactStrictMode: true,
-  webpack(config, options) {
-    config.resolve.alias.CustomSections = path.join(__dirname, "cms/sections");
-    return config;
-  }
+  reactStrictMode: true
 };
 
 module.exports = nextConfig;
diff --git a/example-next/pages/profile/[...members].js b/example-next/pages/profile/[...members].js
@@ -10,6 +10,7 @@ import {useTranslation} from "next-i18next";
 import {useRouter} from "next/router";
 import {serverSideTranslations} from "next-i18next/serverSideTranslations";
 import {Profile, NonIdealState, cmsDefaultPaths, cmsDefaultProps} from "@datawheel/canon-next";
+import customSections from "../../cms/sections";
 
 
 function ProfilePage({profile, formatters}) {
@@ -26,6 +27,7 @@ function ProfilePage({profile, formatters}) {
         linkify={profile => profile.reduce((href, member) => `${href}/${member.slug}/${member.memberSlug || member.id}`, "/profile")}
         // you can also specify the configuration for ProfileSearch here:
         // searchProps={{placeholder: "Seach profiles"}}
+        customSections={customSections}
         t={t}
       />
     </>

diff --git a/example-next/pages/test-viz/index.js b/example-next/pages/test-viz/index.js
diff --git a/example-next/public/locales/es/common.json → example-next/public/locales/ar/common.json b/example-next/public/locales/es/common.json → example-next/public/locales/ar/common.json
diff --git a/example-next/public/locales/es/profile.json → example-next/public/locales/ar/profile.json b/example-next/public/locales/es/profile.json → example-next/public/locales/ar/profile.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/next/cms/components/ProfileRenderer.js b/packages/next/cms/components/ProfileRenderer.js
@@ -65,6 +65,7 @@ function ProfileRenderer({
     "/profile"
   ),
   searchProps = {},
+  customSections = {},
   t
 }) {
   const router = useRouter();
@@ -481,6 +482,7 @@ function ProfileRenderer({
     searchProps,
     print,
     linkify,
+    customSections,
     t
   };
 

diff --git a/packages/next/cms/components/Viz/Table.js b/packages/next/cms/components/Viz/Table.js
@@ -0,0 +1,4 @@
+
+export default function Table() {
+  return <div>Table</div>;
+}
diff --git a/packages/next/cms/components/Viz/Viz.js b/packages/next/cms/components/Viz/Viz.js
@@ -10,17 +10,17 @@ import {useRouter} from "next/router.js";
 import {Title} from "@mantine/core";
 import {useViewportSize} from "@mantine/hooks";
 import * as d3plus from "d3plus-react";
-import Options from "./Options"
+import Options from "./Options";
 import ProfileContext from "../ProfileContext";
 import propify from "../../utils/d3plusPropify";
 import HTML from "./HTML";
 // User must define custom sections in app/cms/sections, and export them from an index.js in that folder.
 // import * as CustomVizzes from "CustomVizzes";
 // import Graphic from "./Graphic";
 // import HTML from "./HTML";
-// import Table from "./Table";
+import Table from "./Table";
 // const vizTypes = {Table, Graphic, HTML, ...d3plus, ...CustomVizzes};
-const vizTypes = {HTML, ...d3plus};
+const vizTypes = {HTML, Table, ...d3plus};
 
 function Viz(props) {
   const {

diff --git a/packages/next/cms/components/sections/Section.js b/packages/next/cms/components/sections/Section.js
@@ -8,7 +8,6 @@ import {
   Text, Flex, Anchor, Button
 } from "@mantine/core";
 import {useWindowEvent} from "@mantine/hooks";
-// eslint-disable-next-line import/extensions
 import isIE from "../../utils/isIE.js";
 // import throttle from "../../utils/throttle";
 import pxToInt from "../../utils/formatters/pxToInt";
@@ -18,7 +17,6 @@ import Parse from "./components/Parse";
 import Selector from "./components/Selector";
 
 import SourceGroup from "../Viz/SourceGroup";
-// eslint-disable-next-line import/no-cycle
 import StatGroup from "../Viz/StatGroup";
 
 import Default from "./Default";
@@ -42,11 +40,12 @@ const sectionTypes = {
   Default, Grouping, SubGrouping, MultiColumn, SingleColumn, Tabs // ...CustomSections
 };
 
+/** */
 function Section({
   headingLevel, hideAnchor, hideOptions, isModal, contents, ...rest
 }) {
   const ctx = useContext(ProfileContext);
-  const {t} = ctx;
+  const {t, customSections} = ctx;
   const [loading, setLoading] = useState(false);
   const [isStickyIE, setIsStickyIE] = useState(false);
   // const [selectors, setSelectors] = useState({});
@@ -129,7 +128,8 @@ function Section({
   const layoutClass = `cp-${toKebabCase(layout)}-section`;
 
 
-  const Layout = contents.position === "sticky" ? Default : sectionTypes[layout] || Default;
+  const allSectionTypes = {...sectionTypes, ...customSections};
+  const Layout = contents.position === "sticky" ? Default : allSectionTypes[layout] || Default;
 
   const showAnchor = !(isModal || hideAnchor);