From e5db3f657940a99295c42e9ad3e17b3a71df0ebc Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Wed, 13 Sep 2023 16:10:06 +0300 Subject: [PATCH] refactor: refactorng after review --- src/Breadcrumb/README.md | 2 +- www/src/components/PageEditBtn/constants.js | 35 ------------------- www/src/components/PageEditBtn/index.tsx | 9 ++--- www/src/templates/component-page-template.tsx | 23 ++++++++---- www/utils/createPages.js | 3 ++ 5 files changed, 23 insertions(+), 49 deletions(-) delete mode 100644 www/src/components/PageEditBtn/constants.js diff --git a/src/Breadcrumb/README.md b/src/Breadcrumb/README.md index bd063bd2f11..8f9665e827e 100644 --- a/src/Breadcrumb/README.md +++ b/src/Breadcrumb/README.md @@ -1,5 +1,5 @@ --- -title: 'Breadcrumb' +title: 'Breadcrumbs' type: 'component' components: - Breadcrumb diff --git a/www/src/components/PageEditBtn/constants.js b/www/src/components/PageEditBtn/constants.js deleted file mode 100644 index 7b1b27ff5ef..00000000000 --- a/www/src/components/PageEditBtn/constants.js +++ /dev/null @@ -1,35 +0,0 @@ -const PATH_TO_EDIT_PAGE = 'https://github.com/openedx/paragon/edit/master/src'; - -const componentsNamesMap = { - AlertModal: 'Modal/alert-modal.mdx', - ButtonGroup: 'Button/button-group.mdx', - 'Data views': 'DataTable/dataviews.mdx', - 'Form.Autosuggest': 'Form/form-autosuggest.mdx', - 'Form.Checkbox': 'Form/form-checkbox.mdx', - 'Form.Control': 'Form/form-control.mdx', - 'Form.Control.Feedback': 'Form/form-control-feedback.mdx', - 'Form.Group': 'Form/form-group.mdx', - 'Form.Label': 'Form/form-label.mdx', - 'Form.Radio': 'Form/form-radio.mdx', - 'Form.Switch': 'Form/form-switch.mdx', - FullscreenModal: 'Modal/fullscreen-modal.mdx', - InputGroup: 'Form/input-group.mdx', - MarketingModal: 'Modal/marketing-modal.mdx', - ModalDialog: 'Modal/modal-dialog.mdx', - ModalLayer: 'Modal/modal-layer.mdx', - ModalPopup: 'Modal/modal-popup.mdx', - OverflowScroll: 'OverflowScroll/OverflowScroll.mdx', - SelectMenu: 'Menu/select-menu.md', - StandardModal: 'Modal/standard-modal.mdx', - TableControlBar: 'DataTable/tablecontrolbar.mdx', - TableFilters: 'DataTable/tablefilters.mdx', - TableFooter: 'DataTable/tablefooter.mdx', - useArrowKeyNavigation: 'hooks/useArrowKeyNavigation.mdx', - useIndexOfLastVisibleChild: 'hooks/useIndexOfLastVisibleChild.mdx', - useIsVisible: 'hooks/useIsVisible.mdx', - useOverflowScroll: 'OverflowScroll/useOverflowScroll.mdx', - useToggle: 'hooks/useToggle.mdx', - useWindowSize: 'hooks/useWindowSize.mdx', -}; - -export { PATH_TO_EDIT_PAGE, componentsNamesMap }; diff --git a/www/src/components/PageEditBtn/index.tsx b/www/src/components/PageEditBtn/index.tsx index 8c54595a12c..520c614190b 100644 --- a/www/src/components/PageEditBtn/index.tsx +++ b/www/src/components/PageEditBtn/index.tsx @@ -1,12 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Button, Hyperlink } from '~paragon-react'; -import { PATH_TO_EDIT_PAGE, componentsNamesMap } from './constants'; -function PageEditBtn({ componentTitle, ...props }) { - const pageEditUrl = componentsNamesMap[componentTitle] - ? `${PATH_TO_EDIT_PAGE}/${componentsNamesMap[componentTitle]}` - : `${PATH_TO_EDIT_PAGE}/${componentTitle}/README.md`; +function PageEditBtn({ githubEditPath, ...props }) { + const pageEditUrl = `https://github.com/openedx/paragon/edit/master/src${githubEditPath}`; const handlePageEditBtnClick = () => { global.analytics.track('openedx.paragon.docs.page_edit.clicked'); @@ -29,7 +26,7 @@ function PageEditBtn({ componentTitle, ...props }) { } PageEditBtn.propTypes = { - componentTitle: PropTypes.string.isRequired, + githubEditPath: PropTypes.string.isRequired, }; export default PageEditBtn; diff --git a/www/src/templates/component-page-template.tsx b/www/src/templates/component-page-template.tsx index b649fc25b9b..a68f54c8c85 100644 --- a/www/src/templates/component-page-template.tsx +++ b/www/src/templates/component-page-template.tsx @@ -43,6 +43,7 @@ export interface IPageTemplate { pageContext: { scssVariablesData: Record, componentsUsageInsights: string[], + githubEditPath: string, } } @@ -52,7 +53,7 @@ export type ShortCodesTypes = { export default function PageTemplate({ data: { mdx, components: componentNodes }, - pageContext: { scssVariablesData, componentsUsageInsights }, + pageContext: { scssVariablesData, componentsUsageInsights, githubEditPath }, }: IPageTemplate) { const isMobile = useMediaQuery({ maxWidth: breakpoints.large.maxWidth }); const [showMinimizedTitle, setShowMinimizedTitle] = useState(false); @@ -99,7 +100,6 @@ export default function PageTemplate({ const usageInsightsUrl = 'usage-insights'; const sortedComponentNames = mdx.frontmatter?.components || []; - const componentTitle = mdx.frontmatter.title; const filteredComponentsUsageInsights = componentsUsageInsights.map(componentName => componentName.replace(/\./g, '')); const isUsageInsights = (sortedComponentNames as []).some(value => filteredComponentsUsageInsights.includes(value)); @@ -140,13 +140,22 @@ export default function PageTemplate({

{mdx.frontmatter.notes}

)} -
-

{mdx.frontmatter.title}

- - + +

+ {mdx.frontmatter.title} +

+ + -
+ {mdx.body} diff --git a/www/utils/createPages.js b/www/utils/createPages.js index e28cf61e57b..35f90b0e40d 100644 --- a/www/utils/createPages.js +++ b/www/utils/createPages.js @@ -29,6 +29,7 @@ async function createPages(graphql, actions, reporter) { components } slug + fileAbsolutePath } } } @@ -47,6 +48,7 @@ async function createPages(graphql, actions, reporter) { for (const { node } of components) { const componentDir = node.slug.split('/')[0]; const variablesPath = path.resolve(__dirname, `../../src/${componentDir}/_variables.scss`); + const githubEditPath = node.fileAbsolutePath.split('src')[1]; let scssVariablesData = {}; if (fs.existsSync(variablesPath)) { @@ -67,6 +69,7 @@ async function createPages(graphql, actions, reporter) { components: node.frontmatter.components || [], scssVariablesData, componentsUsageInsights: Object.keys(componentsUsage), + githubEditPath, }, }); }