From fda2bc0c1375631bae756bcdfab1dd38daef36f1 Mon Sep 17 00:00:00 2001 From: Zeeshan Tamboli Date: Tue, 4 Apr 2023 17:49:43 +0530 Subject: [PATCH] [docs] Remove redundant files and fix regression (#36775) --- .../components/ComponentsApiContent.js | 2 +- docs/src/modules/components/HookApiPage.js | 178 ------------------ .../src/modules/components/HooksApiContent.js | 2 +- docs/src/modules/components/MarkdownDocsV2.js | 22 ++- .../src/modules/components/PropretiesTable.js | 121 ------------ 5 files changed, 23 insertions(+), 302 deletions(-) delete mode 100644 docs/src/modules/components/HookApiPage.js delete mode 100644 docs/src/modules/components/PropretiesTable.js diff --git a/docs/src/modules/components/ComponentsApiContent.js b/docs/src/modules/components/ComponentsApiContent.js index 9ccc29be8b4e8b..d9b4411a8878e9 100644 --- a/docs/src/modules/components/ComponentsApiContent.js +++ b/docs/src/modules/components/ComponentsApiContent.js @@ -6,7 +6,7 @@ import { exactProp } from '@mui/utils'; import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n'; import { SlotsTable } from 'docs/src/modules/components/ApiPage'; import Divider from 'docs/src/modules/components/ApiDivider'; -import PropertiesTable from 'docs/src/modules/components/PropretiesTable'; +import PropertiesTable from 'docs/src/modules/components/PropertiesTable'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; diff --git a/docs/src/modules/components/HookApiPage.js b/docs/src/modules/components/HookApiPage.js deleted file mode 100644 index de4bb1c1afd08d..00000000000000 --- a/docs/src/modules/components/HookApiPage.js +++ /dev/null @@ -1,178 +0,0 @@ -/* eslint-disable react/no-danger */ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { exactProp } from '@mui/utils'; -import Typography from '@mui/material/Typography'; -import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n'; -import PropertiesTable from 'docs/src/modules/components/PropertiesTable'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; -import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs'; -import Ad from 'docs/src/modules/components/Ad'; - -export function getTranslatedHeader(t, header) { - const translations = { - demos: t('api-docs.demos'), - import: t('api-docs.import'), - 'hook-name': t('api-docs.hookName'), - parameters: t('api-docs.parameters'), - 'return-value': t('api-docs.returnValue'), - }; - - // TODO Drop runtime type-checking once we type-check this file - if (!translations.hasOwnProperty(header)) { - throw new TypeError( - `Unable to translate header '${header}'. Did you mean one of '${Object.keys( - translations, - ).join("', '")}'`, - ); - } - - return translations[header] || header; -} - -function Heading(props) { - const { hash, level: Level = 'h2' } = props; - const t = useTranslate(); - - return ( - - {getTranslatedHeader(t, hash)} - - - - - - - ); -} - -Heading.propTypes = { - hash: PropTypes.string.isRequired, - level: PropTypes.string, -}; - -const nonDefaultHooks = ['useFormControlUnstyledContext']; - -export default function ApiPage(props) { - const { descriptions, disableAd = false, pageContent } = props; - const t = useTranslate(); - const userLanguage = useUserLanguage(); - - const { demos, filename, inheritance, name: hookName, parameters, returnValue } = pageContent; - - const { - hookDescription, - hookDescriptionToc = [], - parametersDescriptions, - returnValueDescriptions, - } = descriptions[userLanguage]; - const description = t('api-docs.hooksPageDescription').replace(/{{name}}/, hookName); - - const source = filename.replace( - /\/packages\/mui(-(.+?))?\/src/, - (match, dash, pkg) => `@mui/${pkg}`, - ); - - // Prefer linking the .tsx or .d.ts for the "Edit this page" link. - const apiSourceLocation = filename.replace('.js', '.d.ts'); - - function createTocEntry(sectionName) { - return { - text: getTranslatedHeader(t, sectionName), - hash: sectionName, - children: [ - ...(sectionName === 'props' && inheritance - ? [{ text: t('api-docs.inheritance'), hash: 'inheritance', children: [] }] - : []), - ], - }; - } - - const toc = [ - createTocEntry('demos'), - createTocEntry('import'), - ...hookDescriptionToc, - createTocEntry('parameters'), - createTocEntry('return-value'), - ].filter(Boolean); - - return ( - - -

{hookName} API

- - {description} - {disableAd ? null : } - - -
For examples and details on the usage of this React hook, visit the demo pages:

- ${demos}`, - }} - /> - - - {/* TODO: Add this once the hooks are in dedicated folders */} - {/* */} - {hookDescription ? ( - -
-
- - - ) : null} - - - - -
- {/* TODO: Add section for the hook output type */} - - - - - - - - ); -} - -ApiPage.propTypes = { - descriptions: PropTypes.object.isRequired, - disableAd: PropTypes.bool, - pageContent: PropTypes.object.isRequired, -}; - -if (process.env.NODE_ENV !== 'production') { - ApiPage.propTypes = exactProp(ApiPage.propTypes); -} diff --git a/docs/src/modules/components/HooksApiContent.js b/docs/src/modules/components/HooksApiContent.js index 8a7c396e97bb87..2a6b0c64bb7f05 100644 --- a/docs/src/modules/components/HooksApiContent.js +++ b/docs/src/modules/components/HooksApiContent.js @@ -5,7 +5,7 @@ import kebabCase from 'lodash/kebabCase'; import { exactProp } from '@mui/utils'; import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n'; import Divider from 'docs/src/modules/components/ApiDivider'; -import PropertiesTable from 'docs/src/modules/components/PropretiesTable'; +import PropertiesTable from 'docs/src/modules/components/PropertiesTable'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; diff --git a/docs/src/modules/components/MarkdownDocsV2.js b/docs/src/modules/components/MarkdownDocsV2.js index abcb681dfad95b..c6bf783dc19c11 100644 --- a/docs/src/modules/components/MarkdownDocsV2.js +++ b/docs/src/modules/components/MarkdownDocsV2.js @@ -8,7 +8,6 @@ import Box from '@mui/material/Box'; import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; import ComponentsApiContent from 'docs/src/modules/components/ComponentsApiContent'; import HooksApiContent from 'docs/src/modules/components/HooksApiContent'; -import { getTranslatedHeader as getHookTranslatedHeader } from 'docs/src/modules/components/HookApiPage'; import { getTranslatedHeader as getComponentTranslatedHeader } from 'docs/src/modules/components/ApiPage'; import MarkdownElement from 'docs/src/modules/components/MarkdownElementV2'; import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; @@ -30,6 +29,27 @@ JoyModeObserver.propTypes = { mode: PropTypes.oneOf(['light', 'dark']), }; +function getHookTranslatedHeader(t, header) { + const translations = { + demos: t('api-docs.demos'), + import: t('api-docs.import'), + 'hook-name': t('api-docs.hookName'), + parameters: t('api-docs.parameters'), + 'return-value': t('api-docs.returnValue'), + }; + + // TODO Drop runtime type-checking once we type-check this file + if (!translations.hasOwnProperty(header)) { + throw new TypeError( + `Unable to translate header '${header}'. Did you mean one of '${Object.keys( + translations, + ).join("', '")}'`, + ); + } + + return translations[header] || header; +} + export default function MarkdownDocsV2(props) { const theme = useTheme(); const router = useRouter(); diff --git a/docs/src/modules/components/PropretiesTable.js b/docs/src/modules/components/PropretiesTable.js deleted file mode 100644 index 293b675116d179..00000000000000 --- a/docs/src/modules/components/PropretiesTable.js +++ /dev/null @@ -1,121 +0,0 @@ -/* eslint-disable react/no-danger */ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import clsx from 'clsx'; -import Alert from '@mui/material/Alert'; -import { alpha, styled } from '@mui/material/styles'; -import { useTranslate } from 'docs/src/modules/utils/i18n'; - -const Asterisk = styled('abbr')(({ theme }) => ({ color: theme.palette.error.main })); - -const Wrapper = styled('div')({ - overflow: 'hidden', -}); -const Table = styled('table')(({ theme }) => { - const contentColor = - theme.palette.mode === 'dark' - ? alpha(theme.palette.primaryDark[900], 1) - : 'rgba(255, 255, 255, 1)'; - const contentColorTransparent = - theme.palette.mode === 'dark' - ? alpha(theme.palette.primaryDark[900], 0) - : 'rgba(255, 255, 255, 0)'; - const shadowColor = theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.7)' : 'rgba(0,0,0,0.2)'; - return { - borderRadius: 10, - background: ` - linear-gradient(to right, ${contentColor} 5%, ${contentColorTransparent}), - linear-gradient(to right, ${contentColorTransparent}, ${contentColor} 100%) 100%, - linear-gradient(to right, ${shadowColor}, rgba(0, 0, 0, 0) 5%), - linear-gradient(to left, ${shadowColor}, rgba(0, 0, 0, 0) 5%)`, - backgroundAttachment: 'local, local, scroll, scroll', - // the above background create thin line on the left and right sides of the table - // as a workaround, use negative margin with overflow `hidden` on the parent - marginLeft: -1, - marginRight: -1, - }; -}); - -export default function PropertiesTable(props) { - const { properties, propertiesDescriptions, showOptionalAbbr = false } = props; - const t = useTranslate(); - - return ( - - - - - - - - - - - - {Object.entries(properties).map(([propName, propData]) => { - const typeName = propData.type.description || propData.type.name; - const propDefault = propData.default; - return ( - propData.description !== '@ignore' && ( - - - - - - - ) - ); - })} - -
{t('api-docs.name')}{t('api-docs.type')}{t('api-docs.default')}{t('api-docs.description')}
- - {propName} - {propData.required && !showOptionalAbbr && ( - - * - - )} - {!propData.required && showOptionalAbbr && ( - - ? - - )} - - - - - {propDefault && {propDefault}} - - {propData.deprecated && ( - - {t('api-docs.deprecated')} - {propData.deprecationInfo && ' - '} - {propData.deprecationInfo && ( - - )} - - )} -
-
- - ); -} - -PropertiesTable.propTypes = { - properties: PropTypes.object.isRequired, - propertiesDescriptions: PropTypes.object.isRequired, - showOptionalAbbr: PropTypes.bool, -};