Skip to content

Commit

Permalink
enable custom sections
Browse files Browse the repository at this point in the history
  • Loading branch information
scespinoza committed Mar 2, 2023
1 parent 26019b6 commit 11e8b36
Show file tree
Hide file tree
Showing 16 changed files with 301 additions and 84 deletions.
87 changes: 87 additions & 0 deletions example-next/cms/sections/CustomSection.js
Original file line number Diff line number Diff line change
@@ -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>
);
}
87 changes: 87 additions & 0 deletions example-next/cms/sections/Default.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import {Grid, SimpleGrid, Stack, Title} 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 (
<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>
);
}
6 changes: 6 additions & 0 deletions example-next/cms/sections/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import CustomSection from "./CustomSection";
import Default from "./Default";
export default {
CustomSection,
Default
};
2 changes: 1 addition & 1 deletion example-next/jsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
"@/*": ["./*"],
}
}
}
9 changes: 8 additions & 1 deletion example-next/next.config.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
const {i18n} = require("./next-i18next.config");
const rootDir = process.cwd();
const path = require("path");

const nextConfig = {
i18n,
reactStrictMode: true
reactStrictMode: true,
webpack(config, options) {
config.resolve.alias.CustomSections = path.join(__dirname, "cms/sections");
return config;
}
};

module.exports = nextConfig;
2 changes: 1 addition & 1 deletion example-next/pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
Expand Down
1 change: 1 addition & 0 deletions example-next/pages/profile/[...members].js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {useRouter} from "next/router";
import {serverSideTranslations} from "next-i18next/serverSideTranslations";
import {Profile, NonIdealState, cmsDefaultPaths, cmsDefaultProps} from "@datawheel/canon-next";


function ProfilePage({profile, formatters}) {
const router = useRouter();
const {t} = useTranslation("profile");
Expand Down
7 changes: 7 additions & 0 deletions example-next/pages/test-viz/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import {Viz} from "@datawheel/canon-next";

/** */
export default function Page() {
console.log(Viz);
return <div>Just testing</div>;
}
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions packages/next/cms/components/Viz/Viz.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ 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.
Expand Down Expand Up @@ -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"
Expand Down
9 changes: 6 additions & 3 deletions packages/next/cms/components/fields/ProfileSearch.js
Original file line number Diff line number Diff line change
Expand Up @@ -352,6 +352,7 @@ function ProfileSearch({
sx={{listStyle: "none"}}
>
<Text
component="li"
key="filters-all"
fw={!filterProfiles ? 700 : 400}
sx={{"cursor": "pointer", "&:hover": {textDecoration: "underline"}}}
Expand All @@ -363,7 +364,9 @@ function ProfileSearch({
return (
<Text
component="li"
id={`filters-${profileIds.join("-")}`}
sx={{"cursor": "pointer", "&:hover": {textDecoration: "underline"}}}
className={`cms-profilesearch-filters-profile ${profileIds.join(",") === filterProfiles ? "active" : ""}`}
key={`filters-${profileIds.join("-")}`}
fw={profileIds.join(",") === filterProfiles ? 700 : 400}
onClick={() => setFilterProfiles(profileIds.join(","))}
Expand All @@ -385,13 +388,13 @@ function ProfileSearch({
>
{ d.levels
? <Anchor
// className={`cms-profilesearch-filters-dimension${filterLevels && filterLevels.includes(d.levels.join(",")) ? " active" : ""}`}
className={`cms-profilesearch-filters-dimension${filterLevels && filterLevels.includes(d.levels.join(",")) ? " active" : ""}`}
onClick={() => onFilterLevels(false)}
dangerouslySetInnerHTML={{__html: d.title}}
/>

: <Anchor
// className={`cms-profilesearch-filters-dimension${filterCubes && filterCubes.includes(d.cubes.join(",")) ? " active" : ""}`}
className={`cms-profilesearch-filters-dimension${filterCubes && filterCubes.includes(d.cubes.join(",")) ? " active" : ""}`}
onClick={() => onFilterLevels(false)}
dangerouslySetInnerHTML={{__html: d.title}}
/>
Expand All @@ -400,7 +403,7 @@ function ProfileSearch({
? d.sortedLevels.map(l =>
<Anchor
key={`filters-level-${l}`}
// className={`cms-profilesearch-filters-level${filterLevels && !filterLevels.includes(d.levels.join(",")) && filterLevels.includes(l) ? " active" : ""}`}
className={`cms-profilesearch-filters-level${filterLevels && !filterLevels.includes(d.levels.join(",")) && filterLevels.includes(l) ? " active" : ""}`}
onClick={() => onFilterLevels(l)}
dangerouslySetInnerHTML={{__html: filterHierarchyTitle(l, activeProfile[0])}}
/>
Expand Down
18 changes: 13 additions & 5 deletions packages/next/cms/components/sections/Hero.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ import {
import {
IconChevronDown, IconChevronUp
} from "@tabler/icons-react";
// eslint-disable-next-line import/no-cycle
import {
ProfileContext, SourceGroup, StatGroup, Viz
} from "../../../index";
import ProfileContext from "../ProfileContext";
import SourceGroup from "../Viz/SourceGroup";
import StatGroup from "../Viz/StatGroup";
import Viz from "../Viz/Viz";
import stripP from "../../utils/formatters/stripP";

// import {strip} from "d3plus-text";
Expand Down Expand Up @@ -181,7 +181,7 @@ function Hero({
</Flex>

{/* display image credits, and images */}
{profile.images.length &&
{profile.images.length ?
<>
{/* credits */}
{type !== "story" && hasAuthor &&
Expand Down Expand Up @@ -268,6 +268,14 @@ function Hero({
zIndex={1}
/>
</>
:

<Overlay
opacity={0.7}
blur={2}
zIndex={1}
/>

}

<Modal
Expand Down
Loading

0 comments on commit 11e8b36

Please sign in to comment.