Skip to content
This repository was archived by the owner on Nov 16, 2022. It is now read-only.

Commit bf983d5

Browse files
DanilAndreevDanilAndreev
committed
[ApiPage] Remade with @material-docs/react-components-docs-extension
1 parent 89f0810 commit bf983d5

File tree

4 files changed

+77
-109
lines changed

4 files changed

+77
-109
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"license": "MIT",
3131
"dependencies": {
3232
"@craco/craco": "^5.6.4",
33-
"@material-docs/core": "^0.4.4",
33+
"@material-docs/core": "^0.4.5",
3434
"@material-docs/react-components-docs-extension": "^0.1.9",
3535
"@material-ui/core": "^4.11.0",
3636
"@material-ui/icons": "^4.9.1",

‎src/components/ApiPage.js‎

Lines changed: 68 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -4,112 +4,86 @@
44
*/
55

66
import React from "react";
7-
import {
8-
Code,
9-
DocsPage,
10-
H1,
11-
H2,
12-
H3,
13-
Markdown,
14-
Table,
15-
TableBody,
16-
TableCell,
17-
TableHead,
18-
TableRow
19-
} from "@material-docs/core";
20-
import {makeStyles} from "@material-ui/core/styles";
21-
import {grey, purple} from "@material-ui/core/colors";
22-
import clsx from "clsx";
7+
import {Code, H3, Markdown} from "@material-docs/core";
8+
import ReactComponentApiPage from "@material-docs/react-components-docs-extension/components/ReactComponentApiPage";
9+
import ReactComponentApiPageSummary
10+
from "@material-docs/react-components-docs-extension/components/ReactComponentApiPageSummary";
11+
import ReactComponentApiPageImport
12+
from "@material-docs/react-components-docs-extension/components/ReactComponentApiPageImport";
13+
import ReactComponentApiPageProps
14+
from "@material-docs/react-components-docs-extension/components/ReactComponentApiPageProps";
15+
import Prop from "@material-docs/react-components-docs-extension/components/Prop";
16+
import ReactComponentApiPageStyles
17+
from "@material-docs/react-components-docs-extension/components/ReactComponentApiPageStyles";
18+
import Style from "@material-docs/react-components-docs-extension/components/Style";
19+
import ReactComponentApiPageFooter
20+
from "@material-docs/react-components-docs-extension/components/ReactComponentApiPageFooter";
21+
import ReactComponentApiPageDetails
22+
from "@material-docs/react-components-docs-extension/components/ReactComponentApiPageDetails";
2323

2424

25-
const useStyles = makeStyles(theme => ({
26-
datatype: {
27-
color: purple[800],
28-
},
29-
code: {
30-
fontFamily: "monospace",
31-
fontSize: "14px",
32-
},
33-
underlined: {
34-
textDecoration: `underline dotted ${grey[500]}`,
35-
}
36-
}));
37-
38-
export default function ApiPage({lang, localeName, importCode, name, searchTags, children, ...props}) {
39-
const classes = useStyles();
25+
export default function ApiPage(props, ref) {
26+
const {
27+
lang,
28+
localeName,
29+
importCode,
30+
name,
31+
properties = [],
32+
css = [],
33+
children,
34+
enableCss = true,
35+
enableProps = true,
36+
refNotForwarded = false,
37+
propsForwarded = false,
38+
...other
39+
} = props;
4040
if (!lang) throw new Error(`Documentation: lang is required prop`);
4141
if (!localeName) throw new Error(`Documentation: localeName is required prop`);
4242

4343
const locale = lang.locale.pages[localeName];
44-
const localeSpells = lang.locale.common.spells;
4544
const componentAPILocale = lang.locale.common.ComponentAPI;
4645

47-
const showProps = !!locale.enableProps || !!locale.noPropsText;
48-
const showCss = !!locale.enableCss || !!locale.noCssText;
4946
return (
50-
<DocsPage
47+
<ReactComponentApiPage
5148
name={name}
52-
searchTags={searchTags || locale.searchTags}
53-
searchDescription={locale.pageSearchDescription}
49+
searchDescription={locale.searchDescription}
50+
searchTags={locale.searchTags}
5451
>
55-
<H1 noDivider>{name}</H1>
56-
<H3 noDivider noTag>{locale.pageAbout}</H3>
57-
<H2>{localeSpells.Import}</H2>
58-
<Code language={"javascript"} theme={"darcula"}>
59-
{importCode}
60-
</Code>
61-
<Markdown>{componentAPILocale.importDifferenceText}</Markdown>
62-
<H2>{componentAPILocale.ComponentNameHeader}</H2>
63-
<Markdown>{locale.ComponentNameText}</Markdown>
64-
{showProps && <H2>Props</H2>}
65-
{locale.enableProps &&
66-
<Table>
67-
<TableHead>
68-
<TableRow>
69-
<TableCell>{componentAPILocale.propName}</TableCell>
70-
<TableCell>{componentAPILocale.propType}</TableCell>
71-
<TableCell>{componentAPILocale.propDefault}</TableCell>
72-
<TableCell>{componentAPILocale.propDescription}</TableCell>
73-
</TableRow>
74-
</TableHead>
75-
<TableBody>
76-
{locale.props.map(prop => (
77-
<TableRow key={prop.name}>
78-
<TableCell className={classes.code}>{prop.name}</TableCell>
79-
<TableCell className={clsx(classes.datatype, classes.code)}>{prop.type}</TableCell>
80-
<TableCell className={clsx(classes.code, classes.underlined)}>{prop.default}</TableCell>
81-
<TableCell>{prop.description}</TableCell>
82-
</TableRow>
83-
))}
84-
</TableBody>
85-
</Table>
86-
}
87-
{!locale.enableProps && <Markdown>{locale.noPropsText}</Markdown>}
88-
{locale.forwardRef && <Markdown>{componentAPILocale.ref}</Markdown>}
89-
{showCss && <H2>CSS</H2>}
90-
{locale.enableCss &&
91-
<Table>
92-
<TableHead>
93-
<TableRow>
94-
<TableCell>{componentAPILocale.ruleName}</TableCell>
95-
<TableCell>{componentAPILocale.ruleDescription}</TableCell>
96-
</TableRow>
97-
</TableHead>
98-
<TableBody>
99-
{Object.keys(locale.css).map(key => (
100-
<TableRow key={key}>
101-
<TableCell className={classes.code}>{key}</TableCell>
102-
<TableCell>{locale.css[key]}</TableCell>
103-
</TableRow>
104-
))}
105-
</TableBody>
106-
</Table>
52+
<ReactComponentApiPageSummary>
53+
<H3 noTag noDivider>
54+
<Markdown data={{name}} typographyInheritSize inline>
55+
{componentAPILocale.summary}
56+
</Markdown>
57+
</H3>
58+
</ReactComponentApiPageSummary>
59+
<ReactComponentApiPageImport>
60+
<Code theme={"darcula"}>{importCode}</Code>
61+
<Markdown>{componentAPILocale.importDifferenceText}</Markdown>
62+
<Markdown data={{name}}>{componentAPILocale.componentName}</Markdown>
63+
</ReactComponentApiPageImport>
64+
{enableProps &&
65+
<ReactComponentApiPageProps>
66+
{properties.map(prop =>
67+
<Prop name={prop.name} type={prop.type} def={prop.default} key={prop.name}>{prop.description}</Prop>
68+
)}
69+
</ReactComponentApiPageProps>
10770
}
108-
{!locale.enableCss && <Markdown>{locale.noCssText}</Markdown>}
109-
{locale.enableCss &&
110-
<Markdown>{componentAPILocale.customization}</Markdown>
71+
<ReactComponentApiPageDetails>
72+
{!refNotForwarded && <Markdown>{componentAPILocale.refText}</Markdown>}
73+
{propsForwarded && <Markdown>{componentAPILocale.propsText}</Markdown>}
74+
</ReactComponentApiPageDetails>
75+
{enableCss &&
76+
<ReactComponentApiPageStyles>
77+
{css.map(rule => <Style name={rule.name} global={rule.global}
78+
key={rule.name}>{rule.description}</Style>)}
79+
</ReactComponentApiPageStyles>
11180
}
112-
{children}
113-
</DocsPage>
81+
<ReactComponentApiPageFooter>
82+
<Markdown data={{name}}>
83+
{componentAPILocale.customization}
84+
</Markdown>
85+
{children}
86+
</ReactComponentApiPageFooter>
87+
</ReactComponentApiPage>
11488
);
11589
}

‎src/locale/EN.json‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1471,16 +1471,12 @@
14711471
"Import": "Import"
14721472
},
14731473
"ComponentAPI": {
1474+
"summary": "The API documentation of the &&name React component. Learn more about the props and the CSS customization points.",
14741475
"importDifferenceText": "You can learn more about the difference by [reading this guide](https://material-ui.com/guides/minimizing-bundle-size/).",
14751476
"customization": "You can override the style of the component thanks to one of these customization points: \n* With a rule name of the [```classes``` object prop](https://material-ui.com/customization/components/#overriding-styles-with-classes). \n* With a [global class name](https://material-ui.com/customization/components/#overriding-styles-with-global-class-names). \n* With a theme and an [```overrides``` property](https://material-ui.com/customization/globals/#css). \n\n\n If that's not sufficient, you can check the implementation of the component for more detail.",
1476-
"ruleName": "Rule name",
1477-
"ruleDescription": "Description",
1478-
"propName": "Name",
1479-
"propType": "Type",
1480-
"propDefault": "Default",
1481-
"propDescription": "Description",
1482-
"ComponentNameHeader": "Component name",
1483-
"ref": "The ```ref``` is forwarded to the root element."
1477+
"componentName": "## Component name \nThe ___&&name___ name can be used for providing [default props](https://material-ui.com/customization/globals/#default-props) or [style overrides](https://material-ui.com/customization/globals/#css) at the theme level.",
1478+
"refText": "The ```ref``` is forwarded to the root element.",
1479+
"propsText": "Any other props supplied will be provided to the root element (native element)."
14841480
}
14851481
}
14861482
}

‎yarn.lock‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1310,10 +1310,10 @@
13101310
"@types/yargs" "^15.0.0"
13111311
chalk "^4.0.0"
13121312

1313-
"@material-docs/core@^0.4.4":
1314-
version "0.4.4"
1315-
resolved "https://registry.yarnpkg.com/@material-docs/core/-/core-0.4.4.tgz#38a44257d95cfc3148f29f0d30be97ddccf9a2d1"
1316-
integrity sha512-qpm3UUKZ9F/KVk++BxGz5dLXEDJXMEkakHqyPiNKhuRwpEXDc0lz3om00KoPbrNAR7TYuf605Ya4fxeatFUsfQ==
1313+
"@material-docs/core@^0.4.5":
1314+
version "0.4.5"
1315+
resolved "https://registry.yarnpkg.com/@material-docs/core/-/core-0.4.5.tgz#8a8962b297dd933eb9f03511e629459655d30f83"
1316+
integrity sha512-oNr1mcKRnR4YxrcoBMCLh4ZDz+BOWLJFOxw6ebr7PQ+NwIAy21h/uRl3H7RfMEjjs6FbNI7kcEMWlCG2klK7OA==
13171317
dependencies:
13181318
"@material-ui/core" "^4.11.0"
13191319
"@material-ui/icons" "^4.9.1"
@@ -1324,8 +1324,6 @@
13241324
marked "^1.1.1"
13251325
notistack "^0.9.17"
13261326
prop-types "^15.7.2"
1327-
react "^16.13.1"
1328-
react-dom "^16.13.1"
13291327
react-helmet-async "^1.0.6"
13301328
react-lazy-load-image-component "^1.5.0"
13311329
react-router-dom "^5.2.0"

0 commit comments

Comments
 (0)