From 01095157b0e02645a49ef88d1dae446957c3282c Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Wed, 4 Oct 2023 15:33:19 +0300 Subject: [PATCH] refactor: code refactoring --- www/gatsby-node.js | 6 ++---- www/src/components/PageEditBtn/index.tsx | 2 +- www/src/pages/404.tsx | 11 +++++++++-- www/src/pages/foundations/colors.tsx | 5 ++++- www/src/pages/foundations/elevation.jsx | 6 ++++++ www/src/pages/foundations/responsive.jsx | 7 +++++++ www/src/pages/foundations/spacing.tsx | 15 +++++++++++---- www/src/pages/foundations/typography.tsx | 11 +++++++++-- www/src/pages/playground.tsx | 3 +++ www/src/pages/status.tsx | 7 +++++++ www/src/templates/default-mdx-page-template.tsx | 4 +++- www/utils/createPages.js | 3 ++- 12 files changed, 64 insertions(+), 16 deletions(-) diff --git a/www/gatsby-node.js b/www/gatsby-node.js index 8d2dd1f84f..0edef2e592 100644 --- a/www/gatsby-node.js +++ b/www/gatsby-node.js @@ -20,11 +20,9 @@ exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => { }; exports.onCreatePage = ({ page, actions }) => { - const { createPage, deletePage } = actions; + const { createPage } = actions; const githubEditPath = `https://github.com/openedx/paragon/edit/master/www/src${page.componentPath.split('src')[1]}`; - deletePage(page); - // console.log('=================== page ====================', page.component); - // You can access the variable "house" in your page queries now + createPage({ ...page, context: { diff --git a/www/src/components/PageEditBtn/index.tsx b/www/src/components/PageEditBtn/index.tsx index a158090389..39821143fd 100644 --- a/www/src/components/PageEditBtn/index.tsx +++ b/www/src/components/PageEditBtn/index.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { Button, Hyperlink, Nav } from '~paragon-react'; export interface PageEditBtnProps extends Partial> { - githubEditPath: string, + githubEditPath?: string, isNavLink?: boolean; } diff --git a/www/src/pages/404.tsx b/www/src/pages/404.tsx index e446e19476..57e31c8ff5 100644 --- a/www/src/pages/404.tsx +++ b/www/src/pages/404.tsx @@ -1,11 +1,12 @@ import React from 'react'; +import PropTypes from 'prop-types'; import Layout from '../components/PageLayout'; import SEO from '../components/SEO'; -function NotFoundPage() { +function NotFoundPage({ pageContext }) { return ( - + {/* eslint-disable-next-line react/jsx-pascal-case */}

404: Not Found

@@ -14,4 +15,10 @@ function NotFoundPage() { ); } +NotFoundPage.propTypes = { + pageContext: PropTypes.shape({ + githubEditPath: PropTypes.string, + }).isRequired, +}; + export default NotFoundPage; diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx index 37129d39e9..d0c07e73c7 100644 --- a/www/src/pages/foundations/colors.tsx +++ b/www/src/pages/foundations/colors.tsx @@ -121,13 +121,16 @@ export interface IColorsPage { nodes: [], }, }, + pageContext: { + githubEditPath: string, + } } // eslint-disable-next-line react/prop-types export default function ColorsPage({ data, pageContext }: IColorsPage) { const { settings } = useContext(SettingsContext); parseColors(data.allCssUtilityClasses.nodes); // eslint-disable-line react/prop-types - // console.log('====================== pageContext ========================', pageContext); + return ( {/* eslint-disable-next-line react/jsx-pascal-case */} diff --git a/www/src/pages/foundations/elevation.jsx b/www/src/pages/foundations/elevation.jsx index ba85f6bf31..68d1421c56 100644 --- a/www/src/pages/foundations/elevation.jsx +++ b/www/src/pages/foundations/elevation.jsx @@ -399,3 +399,9 @@ export default function ElevationPage({ pageContext }) { ); } + +ElevationPage.propTypes = { + pageContext: PropTypes.shape({ + githubEditPath: PropTypes.string, + }).isRequired, +}; diff --git a/www/src/pages/foundations/responsive.jsx b/www/src/pages/foundations/responsive.jsx index 16f9b22e80..560c2e4161 100644 --- a/www/src/pages/foundations/responsive.jsx +++ b/www/src/pages/foundations/responsive.jsx @@ -79,6 +79,7 @@ function Responsive({ pageContext }) { { Header: 'Min width', accessor: 'minWidth', Cell: MinWidthCell }, { Header: 'Max Width', accessor: 'maxWidth', Cell: MaxWidthCell }, ]} + itemCount={0} > @@ -103,6 +104,12 @@ function Responsive({ pageContext }) { ); } +Responsive.propTypes = { + pageContext: PropTypes.shape({ + githubEditPath: PropTypes.string, + }).isRequired, +}; + const cellPropTypes = { row: PropTypes.shape({ values: PropTypes.shape({ diff --git a/www/src/pages/foundations/spacing.tsx b/www/src/pages/foundations/spacing.tsx index 419403ea25..2c98bbde58 100644 --- a/www/src/pages/foundations/spacing.tsx +++ b/www/src/pages/foundations/spacing.tsx @@ -109,6 +109,7 @@ export default function SpacingPage({ pageContext }) { { Header: 'Spacer value', accessor: 'spacer' }, { Header: 'Pixel value', accessor: 'pixelValue' }, ]} + itemCount={0} > @@ -197,9 +198,9 @@ export default function SpacingPage({ pageContext }) { {directions.map(({ key }) => ( - + {sizes.map(_size => ( - + .{getUtilityClassName('m', key, _size)} ))} @@ -211,9 +212,9 @@ export default function SpacingPage({ pageContext }) { {directions.map(({ key }) => ( - + {sizes.map(_size => ( - + .{getUtilityClassName('p', key, _size)} ))} @@ -226,3 +227,9 @@ export default function SpacingPage({ pageContext }) { ); } + +SpacingPage.propTypes = { + pageContext: PropTypes.shape({ + githubEditPath: PropTypes.string, + }).isRequired, +}; diff --git a/www/src/pages/foundations/typography.tsx b/www/src/pages/foundations/typography.tsx index e2834dade8..cf72e84bb3 100644 --- a/www/src/pages/foundations/typography.tsx +++ b/www/src/pages/foundations/typography.tsx @@ -1,5 +1,6 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ import React, { useContext } from 'react'; +import PropTypes from 'prop-types'; import { Container } from '~paragon-react'; import SEO from '../../components/SEO'; import MeasuredItem from '../../components/MeasuredItem'; @@ -64,7 +65,7 @@ export default function TypographyPage({ pageContext }) { CSS Class {[1, 2, 3, 4, 5, 6].map(headingSize => ( - +

@@ -166,7 +167,7 @@ export default function TypographyPage({ pageContext }) { CSS Class {[1, 2, 3, 4].map(displaySize => ( - +

@@ -398,3 +399,9 @@ export default function TypographyPage({ pageContext }) { ); } + +TypographyPage.propTypes = { + pageContext: PropTypes.shape({ + githubEditPath: PropTypes.string, + }).isRequired, +}; diff --git a/www/src/pages/playground.tsx b/www/src/pages/playground.tsx index f4ff247aa2..f925e4d1d3 100644 --- a/www/src/pages/playground.tsx +++ b/www/src/pages/playground.tsx @@ -127,4 +127,7 @@ Playground.propTypes = { search: PropTypes.string, href: PropTypes.string, }).isRequired, + pageContext: PropTypes.shape({ + githubEditPath: PropTypes.string, + }).isRequired, }; diff --git a/www/src/pages/status.tsx b/www/src/pages/status.tsx index e0ffdf95d0..9e70298f9d 100644 --- a/www/src/pages/status.tsx +++ b/www/src/pages/status.tsx @@ -1,4 +1,5 @@ import React, { useContext } from 'react'; +import PropTypes from 'prop-types'; import { StaticQuery, graphql } from 'gatsby'; import { Table, Container } from '~paragon-react'; import { ComponentStatus } from '../components/doc-elements'; @@ -91,3 +92,9 @@ export default function StatusPage({ pageContext }) { ); } + +StatusPage.propTypes = { + pageContext: PropTypes.shape({ + githubEditPath: PropTypes.string, + }).isRequired, +}; diff --git a/www/src/templates/default-mdx-page-template.tsx b/www/src/templates/default-mdx-page-template.tsx index 7742495ce4..29fa854ac2 100644 --- a/www/src/templates/default-mdx-page-template.tsx +++ b/www/src/templates/default-mdx-page-template.tsx @@ -29,6 +29,7 @@ export interface IPageTemplateType { frontmatter: { title: string, }, + githubEditPath: string, }, } @@ -36,7 +37,7 @@ export default function PageTemplate({ children, pageContext }: IPageTemplateTyp const { settings } = useContext(SettingsContext); return ( - + {/* eslint-disable-next-line react/jsx-pascal-case */} @@ -53,5 +54,6 @@ PageTemplate.propTypes = { frontmatter: PropTypes.shape({ title: PropTypes.string, }), + githubEditPath: PropTypes.string, }).isRequired, }; diff --git a/www/utils/createPages.js b/www/utils/createPages.js index 3553050e2d..cbca6919f4 100644 --- a/www/utils/createPages.js +++ b/www/utils/createPages.js @@ -75,10 +75,11 @@ async function createPages(graphql, actions, reporter) { } INSIGHTS_PAGES.forEach(({ path: pagePath, tab }) => { + const githubEditPath = 'https://github.com/openedx/paragon/edit/master/www/src/pages/insights.tsx'; createPage({ path: pagePath, component: require.resolve('../src/pages/insights.tsx'), - context: { tab, githubEditPath: 'https://github.com/openedx/paragon/edit/master/www/src/pages/insights.tsx' }, + context: { tab, githubEditPath }, }); });