Skip to content

Commit

Permalink
Merge pull request #969 from CodeForAfrica/feat/commons-ui_richtext
Browse files Browse the repository at this point in the history
Enhance `@commons-ui/payload/RichText`
  • Loading branch information
kilemensi authored Oct 24, 2024
2 parents 23e6c9c + 580039f commit 0d55201
Show file tree
Hide file tree
Showing 19 changed files with 195 additions and 74 deletions.
1 change: 0 additions & 1 deletion apps/climatemappedafrica/eslint.webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ module.exports = {
resolve: {
alias: {
"@/climatemappedafrica": path.resolve(__dirname, "src/"),
content: path.resolve(__dirname, "content/"),
},
extensions: [".js"],
},
Expand Down
2 changes: 2 additions & 0 deletions apps/climatemappedafrica/jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ module.exports = {
"<rootDir>/../../packages/commons-ui-core/src/$1",
"^@/commons-ui/next/(.*)$":
"<rootDir>/../../packages/commons-ui-next/src/$1",
"^@/commons-ui/payload/(.*)$":
"<rootDir>/../../packages/commons-ui-payload/src/$1",
},
transformIgnorePatterns: ["<rootDir>/node_modules/(?!camelcase-keys)"],
};
1 change: 1 addition & 0 deletions apps/climatemappedafrica/jsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"@/climatemappedafrica/*": ["./src/*"],
"@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"],
"@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"],
"@/commons-ui/payload/*": ["../../packages/commons-ui-payload/src/*"],
"@/hurumap/core/*": ["../../packages/hurumap-core/src/*"],
"@/hurumap/next/*": ["../../packages/hurumap-next/src/*"]
}
Expand Down
1 change: 1 addition & 0 deletions apps/climatemappedafrica/next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ module.exports = {
transpilePackages: [
"@commons-ui/core",
"@commons-ui/next",
"@commons-ui/payload",
"@hurumap/core",
"@hurumap/next",
],
Expand Down
2 changes: 1 addition & 1 deletion apps/climatemappedafrica/src/components/Footer/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ function Footer(props) {
},
})}
elements={description}
typographyProps={{
TypographyProps={{
LinkProps: {
color: "text.secondary",
sx: {
Expand Down
1 change: 1 addition & 0 deletions apps/climatemappedafrica/src/components/Hero/Hero.snap.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ exports[`<Hero /> renders unchanged 1`] = `
/>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall makeStyles-button-11 css-13dk0vd-MuiButtonBase-root-MuiIconButton-root"
root="[object Object]"
tabindex="0"
type="button"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const RichHeader = React.forwardRef(function RichHeader(props, ref) {
</RichTypography>
<RichText
{...TitleProps}
typographyProps={{
TypographyProps={{
variant: "h1",
...TitleProps?.typographyProps,
}}
Expand All @@ -56,7 +56,7 @@ const RichHeader = React.forwardRef(function RichHeader(props, ref) {
/>
<RichText
{...SubtitleProps}
typographyProps={{
TypographyProps={{
variant: "subtitle1",
sx: (theme) => ({
textDecorationColor: theme.palette.text.primary,
Expand Down
35 changes: 20 additions & 15 deletions apps/climatemappedafrica/src/components/Summary/Summary.js
Original file line number Diff line number Diff line change
@@ -1,28 +1,25 @@
import { RichText } from "@commons-ui/payload";
import { Box, Grid, Typography } from "@mui/material";
import { Box, Grid, Typography, alpha } from "@mui/material";
import PropTypes from "prop-types";
import React from "react";

import useStyles from "./useStyles";

import Section from "@/climatemappedafrica/components/Section";

const Summary = React.forwardRef(function Summary(props, ref) {
const { content, title, subtitle } = props;
const classes = useStyles(props);

if (!content) {
return null;
}
return (
<Box
className={classes.root}
sx={{
bgcolor: "background.paper",
py: { xs: 5, md: 10 },
}}
ref={ref}
>
<Section classes={{ root: classes.section }}>
<Section>
<Grid justifyContent="space-between" container>
<Grid item xs={12} lg={4}>
<Typography
Expand All @@ -45,15 +42,25 @@ const Summary = React.forwardRef(function Summary(props, ref) {
<Grid item xs={12} lg={6}>
<RichText
elements={content}
typographyProps={{
variant: "body2",
MediaProps={{
ImageProps: {
sx: (theme) => ({
border: `1px solid ${theme.palette.divider}`,
borderRadius: 1,
}),
},
CaptionProps: {
sx: (theme) => ({
color: alpha(theme.palette.text.primary, 0.75),
}),
},
}}
TypographyProps={{
LinkProps: {
color: "text.primary",
sx: {
textDecorationColor: "text.primary",
textDecoration: "underline",
},
// TODO(kilemensi): Figure out why textDecorationColor doesn't change
},
variant: "body2",
}}
sx={{
"&>p": {
Expand All @@ -63,9 +70,7 @@ const Summary = React.forwardRef(function Summary(props, ref) {
mb: 0,
},
}}
>
{content}
</RichText>
/>
</Grid>
</Grid>
</Section>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
exports[`<Summary /> renders unchanged 1`] = `
<div>
<div
class="MuiBox-root css-1fs22e1"
class="MuiBox-root css-dx4cvz"
>
<div
class="makeStyles-root-7 makeStyles-root-5 makeStyles-root-3 makeStyles-section-1 makeStyles-fixed-4 MuiBox-root css-0"
class="makeStyles-root-5 makeStyles-root-3 makeStyles-root-1 makeStyles-fixed-2 MuiBox-root css-0"
>
<div
class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
Expand Down
32 changes: 0 additions & 32 deletions apps/climatemappedafrica/src/components/Summary/useStyles.js

This file was deleted.

2 changes: 1 addition & 1 deletion apps/climatemappedafrica/src/lib/data/common/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ function getNavBar(siteSettings, variant) {
export async function getPageProps(api, context) {
// For now, ClimatemappedAfrica only supports single paths i.e. /, /about, etc.,
// so params.slug[0] is good enough
const slugs = context.params?.slug || undefined;
const slugs = context.params?.slugs || undefined;
const [slug] = slugs || ["index"];
const { draftMode = false } = context;
const options = { draft: draftMode };
Expand Down
31 changes: 29 additions & 2 deletions apps/climatemappedafrica/src/payload/blocks/Summary.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,35 @@ const Summary = {
},
editor: slateEditor({
admin: {
elements: ["link", "ol", "ul", "indent"],
leaves: ["bold", "code", "italic", "underline"],
elements: [
"h2",
"h3",
"h4",
"h5",
"h6",
"blockquote",
"link",
"ol",
"ul",
"indent",
"relationship",
"upload",
"textAlign",
],
leaves: ["bold", "code", "italic", "strikethrough", "underline"],
upload: {
collections: {
media: {
fields: [
{
name: "caption",
type: "text",
localized: true,
},
],
},
},
},
},
}),
required: true,
Expand Down
12 changes: 10 additions & 2 deletions apps/climatemappedafrica/src/theme/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ const theme = createTheme({
},
});

const { palette, typography, breakpoints, overrides } = theme;
const { breakpoints, components, palette, typography } = theme;
const { pxToRem } = typography;
// Typography
deepmerge(
Expand Down Expand Up @@ -247,14 +247,22 @@ deepmerge(

// Overrides
deepmerge(
overrides,
components,
{
MuiCssBaseline: {
"@global": {
".leaflet-interactive": {
cursor: `url(${hoverIcon.src}), pointer !important`,
},
},
styleOverrides: `
blockquote {
border-left: 2px solid #333333;
/* MuiTypography-root has margin-left: 0 that we must override */
margin-left: -8px !important;
padding-left: 6px;
}
`,
},
MuiButton: {
root: {
Expand Down
1 change: 1 addition & 0 deletions apps/climatemappedafrica/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"@/climatemappedafrica/*": ["./src/*"],
"@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"],
"@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"],
"@/commons-ui/payload/*": ["../../packages/commons-ui-payload/src/*"],
"@/hurumap/core/*": ["../../packages/hurumap-core/src/*"],
"@/hurumap/next/*": ["../../packages/hurumap-next/src/*"]
}
Expand Down
42 changes: 42 additions & 0 deletions packages/commons-ui-payload/src/RichText/Media.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { Figure, RichTypography } from "@commons-ui/next";
import React from "react";

import { imageFromMedia } from "@/commons-ui/payload/utils";

const Media = React.forwardRef(function Media(props, ref) {
const { CaptionProps, ImageProps, media, caption, sx, ...others } = props;
const image = imageFromMedia(media);

return (
<Figure
{...others}
ImageProps={{
// We're going to set img size directly using style https://nextjs.org/docs/api-reference/next/image#style
fill: false,
height: 0,
style: { width: "100%", height: "auto" },
unoptimized: true,
width: 0,
...ImageProps,
...image,
}}
ref={ref}
>
<RichTypography
component="figcaption"
html={false}
variant="caption"
{...CaptionProps}
sx={[
...(Array.isArray(CaptionProps?.sx)
? CaptionProps.sx
: [CaptionProps?.sx]),
]}
>
{caption}
</RichTypography>
</Figure>
);
});

export default Media;
Loading

0 comments on commit 0d55201

Please sign in to comment.