Merge pull request #1379 from Datawheel/canon-next-0.1.5

Canon next 0.1.5
Datawheel · Mar 29, 2023 · cc73e7e · cc73e7e
2 parents 50a036c + 8dcffe9
commit cc73e7e
Show file tree

Hide file tree

Showing 22 changed files with 543 additions and 300 deletions.
diff --git a/example-next/cms/sections/CustomSection.js b/example-next/cms/sections/CustomSection.js
@@ -0,0 +1,87 @@
+import {Grid, SimpleGrid, Stack} from "@mantine/core";
+import React, {useRef} from "react";
+import {Viz} from "@datawheel/canon-next";
+
+/**
+ * CMS custom section
+ */
+export default function CustomSection({
+  slug,
+  heading,
+  hideOptions,
+  title,
+  paragraphs,
+  configOverride,
+  loading,
+  filters,
+  resetButton,
+  stats,
+  sources,
+  visualizations,
+  vizHeadingLevel,
+  updateSource,
+  onSetVariables
+}) {
+  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"
+      >
+        <Stack spacing="sm">
+          {heading}
+          {filters}
+          {stats}
+          {paragraphs}
+          {sources}
+          {resetButton}
+        </Stack>
+      </Grid.Col>
+
+      {/* 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>
+  );
+}
diff --git a/example-next/cms/sections/Default.js b/example-next/cms/sections/Default.js
@@ -0,0 +1,91 @@
+import {Grid, SimpleGrid, Stack, Title, Box} from "@mantine/core";
+import React, {useRef} from "react";
+import {Viz} from "@datawheel/canon-next";
+
+/**
+ * CMS custom section
+ */
+export default function Default({
+  slug,
+  heading,
+  hideOptions,
+  title,
+  paragraphs,
+  configOverride,
+  loading,
+  filters,
+  resetButton,
+  stats,
+  sources,
+  visualizations,
+  vizHeadingLevel,
+  updateSource,
+  onSetVariables
+}) {
+  const section = useRef(null);
+
+  return (
+    <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"
+      >
+
+        {/* sidebar */}
+        <Grid.Col
+          md={3}
+          span={12}
+          className="cp-section-content cp-default-section-caption"
+        >
+          <Stack spacing="sm">
+            {heading}
+            {filters}
+            {stats}
+            {paragraphs}
+            {sources}
+            {resetButton}
+          </Stack>
+        </Grid.Col>
+
+        {/* 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/cms/sections/index.js b/example-next/cms/sections/index.js
@@ -0,0 +1,6 @@
+import CustomSection from "./CustomSection";
+import Default from "./Default";
+export default {
+  CustomSection,
+  Default
+};
diff --git a/example-next/jsconfig.json b/example-next/jsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./*"],
     }
   }
 }
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,4 +1,5 @@
 const {i18n} = require("./next-i18next.config");
+
 const nextConfig = {
   i18n,
   reactStrictMode: true

diff --git a/example-next/pages/index.js b/example-next/pages/index.js
@@ -22,7 +22,7 @@ export default function Home() {
           <Button mt="md" onClick={() => handlers.open()}>Search Profiles</Button>
         </Container>
         <Modal opened={opened} onClose={() => handlers.close()} fullScreen>
-          <ProfileSearch t={t} display="grid"/>
+          <ProfileSearch t={t} display="grid" filters limit={20} showExamples/>
         </Modal>
       </main>
     </>

diff --git a/example-next/pages/profile/[...members].js b/example-next/pages/profile/[...members].js
@@ -10,6 +10,8 @@ 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}) {
   const router = useRouter();
@@ -24,7 +26,9 @@ function ProfilePage({profile, formatters}) {
         profile={profile}
         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"}}
+        searchProps={{placeholder: "Seach profiles"}}
+        // and your custom sections mapping object:
+        customSections={customSections}
         t={t}
       />
     </>

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/README.md b/packages/next/README.md
@@ -121,3 +121,30 @@ export default function App(props) {
 }
 
 ```
+
+## Custom Sections
+
+If your CMS instance implements Custom Section, you can add custom JSX renderers to your profiles by passing a mapping object to the `Profile` component. For more information on the usage of Custom Sections see the `canon-cms` [documentation](https://github.com/Datawheel/canon/tree/master/packages/cms#custom-sections).
+
+Example:
+
+```jsx
+
+...
+
+const customSections = {
+  CustomSectionName: CustomSectionComponent
+}
+
+export default function ProfilePage(props) {
+  (...)
+  return (
+    <Profile
+      (...)
+      customSections={customSections}
+    />
+    );
+  }
+...
+
+```
diff --git a/packages/next/cms/components/ProfileRenderer.js b/packages/next/cms/components/ProfileRenderer.js
@@ -14,7 +14,7 @@
    - [ ] test/enable PDF printing
 */
 
-import {useEffect, useMemo, useState} from "react";
+import React, {useEffect, useMemo, useState} from "react";
 // import axios from "axios";
 import {useRouter} from "next/router.js";
 import {assign} from "d3plus-common";
@@ -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,16 +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, ProfileContext} from "../../../index";
+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 {
@@ -120,7 +121,7 @@ function Viz(props) {
 
         <div className={`${namespace}-viz-header`}>
           {title && showTitle
-            ?               <Title
+            ? <Title
               align="center"
               order={parseInt(headingLevel.replace("h", ""), 10)}
               size="h5"