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

Commit 3852fb3

Browse files
DanilAndreevDanilAndreev
committed
[Api pages] Changed several api pages to new extension.
1 parent bf983d5 commit 3852fb3

File tree

9 files changed

+179
-243
lines changed

9 files changed

+179
-243
lines changed

‎src/components/ApiPage.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
import React from "react";
7-
import {Code, H3, Markdown} from "@material-docs/core";
7+
import {Code, H3, Markdown, useLang} from "@material-docs/core";
88
import ReactComponentApiPage from "@material-docs/react-components-docs-extension/components/ReactComponentApiPage";
99
import ReactComponentApiPageSummary
1010
from "@material-docs/react-components-docs-extension/components/ReactComponentApiPageSummary";
@@ -24,10 +24,11 @@ import ReactComponentApiPageDetails
2424

2525
export default function ApiPage(props, ref) {
2626
const {
27-
lang,
27+
// lang,
2828
localeName,
2929
importCode,
3030
name,
31+
overrideName,
3132
properties = [],
3233
css = [],
3334
children,
@@ -37,17 +38,19 @@ export default function ApiPage(props, ref) {
3738
propsForwarded = false,
3839
...other
3940
} = props;
40-
if (!lang) throw new Error(`Documentation: lang is required prop`);
41+
const {lang} = useLang();
4142
if (!localeName) throw new Error(`Documentation: localeName is required prop`);
4243

4344
const locale = lang.locale.pages[localeName];
4445
const componentAPILocale = lang.locale.common.ComponentAPI;
4546

47+
const searchTags = locale.searchTags && Object.keys(locale.searchTags).map(key => locale.searchTags[key]);
48+
4649
return (
4750
<ReactComponentApiPage
4851
name={name}
4952
searchDescription={locale.searchDescription}
50-
searchTags={locale.searchTags}
53+
searchTags={searchTags}
5154
>
5255
<ReactComponentApiPageSummary>
5356
<H3 noTag noDivider>
@@ -59,7 +62,7 @@ export default function ApiPage(props, ref) {
5962
<ReactComponentApiPageImport>
6063
<Code theme={"darcula"}>{importCode}</Code>
6164
<Markdown>{componentAPILocale.importDifferenceText}</Markdown>
62-
<Markdown data={{name}}>{componentAPILocale.componentName}</Markdown>
65+
{overrideName && <Markdown data={{name: overrideName}}>{componentAPILocale.componentName}</Markdown>}
6366
</ReactComponentApiPageImport>
6467
{enableProps &&
6568
<ReactComponentApiPageProps>
@@ -74,8 +77,9 @@ export default function ApiPage(props, ref) {
7477
</ReactComponentApiPageDetails>
7578
{enableCss &&
7679
<ReactComponentApiPageStyles>
77-
{css.map(rule => <Style name={rule.name} global={rule.global}
78-
key={rule.name}>{rule.description}</Style>)}
80+
{css.map(rule =>
81+
<Style name={rule.name} global={rule.global} key={rule.name}>{rule.description}</Style>
82+
)}
7983
</ReactComponentApiPageStyles>
8084
}
8185
<ReactComponentApiPageFooter>

‎src/locale/EN.json‎

Lines changed: 80 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -171,62 +171,24 @@
171171
}
172172
},
173173
"DemoWithCodeAPI": {
174-
"pageAbout": "The API documentation of the DemoWithCode React component. Learn more about the props and the CSS customization points.",
175-
"pageSearchDescription": "DemoWithCode - react component, designed to create code blocks with interactive demo.",
176-
"ComponentNameText": "The DemoWithCode name can be used for providing default props or style overriders at the theme level.",
177-
"enableProps": true,
178-
"props": [
179-
{
180-
"name": "name",
181-
"type": "string",
182-
"default": "",
183-
"description": "Name of the component. Will be displayed in H3 header if defined."
184-
},
185-
{
186-
"name": "code",
187-
"type": "string",
188-
"default": "",
189-
"description": "Code to display in inner Code block."
190-
},
191-
{
192-
"name": "ratio",
193-
"type": "AspectRatio",
194-
"default": "",
195-
"description": "If defined, demo field will keep input aspect ratio."
196-
},
197-
{
198-
"name": "defaultExpanded",
199-
"type": "boolean",
200-
"default": "false",
201-
"description": "If true - code area will be expanded on startup."
202-
},
203-
{
204-
"name": "noTag",
205-
"type": "boolean",
206-
"default": "false",
207-
"description": "If true and name prop is defined - header with name will not generate tag for content tab."
208-
},
209-
{
210-
"name": "paperContainer",
211-
"type": "boolean",
212-
"default": "false",
213-
"description": "If true - demo content will be wrapped in Paper component."
214-
},
215-
{
216-
"name": "actions",
217-
"type": "DemoCodeAction[]",
218-
"default": "",
219-
"description": "Array of additional actions. The actions will be displayed in the dropdown menu when you click the ExpandMore icon button."
220-
},
221-
{
222-
"name": "children",
223-
"type": "node",
224-
"default": "",
225-
"description": "Children of an element. Will be placed in demo block."
226-
}
227-
],
228-
"forwardRef": true,
229-
"enableCss": true,
174+
"searchDescription": "DemoWithCode - react component, designed to create code blocks with interactive demo.",
175+
"searchTags": {
176+
"demo": "demo",
177+
"with": "with",
178+
"api": "api",
179+
"showing": "showing",
180+
"code": "code"
181+
},
182+
"props": {
183+
"name": "Name of the component. Will be displayed in H3 header if defined.",
184+
"code": "Code to display in inner Code block.",
185+
"ratio": "If defined, demo field will keep input aspect ratio.",
186+
"defaultExpanded": "If true - code area will be expanded on startup.",
187+
"noTag": "If true and name prop is defined - header with name will not generate tag for content tab.",
188+
"paperContainer": "If true - demo content will be wrapped in Paper component.",
189+
"actions": "Array of additional actions. The actions will be displayed in the dropdown menu when you click the ExpandMore icon button.",
190+
"children": "Children of an element. Will be placed in demo block."
191+
},
230192
"css": {
231193
"root": "Styles applied to the root element.",
232194
"collapse": "Styles applied to the Collapse element, which contains code.",
@@ -237,31 +199,18 @@
237199
}
238200
},
239201
"CodeAPI": {
240-
"pageAbout": "The API documentation of the Code React component. Learn more about the props and the CSS customization points.",
241-
"pageSearchDescription": "Code - react component, designed to create code blocks.",
242-
"ComponentNameText": "The Code name can be used for providing default props or style overriders at the theme level.",
243-
"enableProps": true,
244-
"props": [
245-
{
246-
"name": "language",
247-
"type": "string",
248-
"default": "\"javascript\"",
249-
"description": "Language name for code highlighter."
250-
},
251-
{
252-
"name": "theme",
253-
"type": "\"light\"",
254-
"default": "\"light\" | \"dark\" | \"darcula\"",
255-
"description": "Code highlighting and background styling type."
256-
},
257-
{
258-
"name": "children",
259-
"type": "string",
260-
"default": "",
261-
"description": "Code to display in code highlighter."
262-
}
263-
],
264-
"enableCss": true,
202+
"searchDescription": "Code - react component, designed to create code blocks.",
203+
"searchTags": {
204+
"code": "code",
205+
"highlight": "highlight",
206+
"language": "language",
207+
"api": "api"
208+
},
209+
"props": {
210+
"language": "Language name for code highlighter.",
211+
"theme": "Code highlighting and background styling type.",
212+
"children": "Code to display in code highlighter."
213+
},
265214
"css": {
266215
"root": "Styles applied to the root element.",
267216
"highlighterContainer": "Styles applied to the code highlighter container."
@@ -432,57 +381,39 @@
432381
}
433382
},
434383
"BlockAPI": {
435-
"pageAbout": "The API documentation of the Block React component. Learn more about the props and the CSS customization points.",
436-
"pageSearchDescription": "Block - react component, designed to show slided information blocks, such as tips, notes, etc.",
437-
"ComponentNameText": "The Block name can be used for providing default props or style overriders at the theme level.",
438-
"enableProps": true,
439-
"props": [
440-
{
441-
"name": "color",
442-
"type": "\"dark\" | \"light\"",
443-
"default": "\"light\"",
444-
"description": "Color styling, which will be applied to block."
445-
},
446-
{
447-
"name": "children",
448-
"type": "node",
449-
"default": "",
450-
"description": "Children of an element."
451-
}
452-
],
453-
"forwardRef": true,
454-
"enableCss": true,
384+
"searchDescription": "Block - react component, designed to show slided information blocks, such as tips, notes, etc.",
385+
"searchTags": {
386+
"block": "block",
387+
"tip": "tip",
388+
"slided": "slided",
389+
"separated": "separated",
390+
"blockquote": "blockquote",
391+
"quote": "quote"
392+
},
393+
"props": {
394+
"color": "Color styling, which will be applied to block.",
395+
"children": "Children of an element."
396+
},
455397
"css": {
456398
"root": "Styles applied to the root element.",
457399
"colorLight": "Styles applied to the root element when prop color equals \"light\"",
458400
"colorDark": "Styles applied to the root element when prop color equals \"dark\""
459401
}
460402
},
461403
"CodeSpanAPI": {
462-
"pageAbout": "The API documentation of the CodeSpan React component. Learn more about the props and the CSS customization points.",
463-
"pageSearchDescription": "CodeSpan - react component, designed to show code in monospace font inside inline code block.",
464-
"ComponentNameText": "The CodeSpan name can be used for providing default props or style overriders at the theme level.",
465-
"enableProps": true,
466-
"props": [
467-
{
468-
"name": "color",
469-
"type": "\"default\" | \"primary\" | \"secondary\" | \"grey\"",
470-
"default": "\"default\"",
471-
"description": "Background color of the inline code block."
472-
},
473-
{
474-
"name": "text",
475-
"type": "\"white\" | \"black\" | \"inherit\"",
476-
"default": "\"inherit\"",
477-
"description": "Text color of code."
478-
},
479-
{
480-
"name": "children",
481-
"type": "node",
482-
"default": "",
483-
"description": "Children of an element."
484-
}
485-
],
404+
"searchDescription": "CodeSpan - react component, designed to show code in monospace font inside inline code block.",
405+
"searchTags": {
406+
"code": "code",
407+
"span": "span",
408+
"inline": "inline",
409+
"component": "component",
410+
"block": "block"
411+
},
412+
"props": {
413+
"color": "Background color of the inline code block.",
414+
"text": "Text color of code.",
415+
"children": "Children of an element."
416+
},
486417
"forwardRef": true,
487418
"enableCss": true,
488419
"css": {
@@ -867,42 +798,35 @@
867798
}
868799
},
869800
"BoldAPI": {
870-
"pageAbout": "The API documentation of the Bold React component. Learn more about the props and the CSS customization points.",
871-
"pageSearchDescription": "Bold - react component, designed to create tables.",
872-
"ComponentNameText": "The Bold name can be used for providing default props or style overriders at the theme level.",
873-
"enableProps": true,
874-
"props": [
875-
{
876-
"name": "children",
877-
"type": "node",
878-
"default": "",
879-
"description": "The content of the component."
880-
}
881-
],
882-
"forwardRef": true,
883-
"enableCss": true,
801+
"searchDescription": "Bold - react component, designed to create tables.",
802+
"searchTags": {
803+
"bold": "bold",
804+
"font": "font",
805+
"text": "text",
806+
"styling": "styling",
807+
"api": "api"
808+
},
809+
"props": {
810+
"children": "The content of the component."
811+
},
884812
"css": {
885813
"root": "Styles applied to the root element.",
886814
"bold": "Styles applied to the root element with bold text styling."
887815
}
888816
},
889817
"AutoDocsMenuAPI": {
890-
"pageAbout": "The API documentation of the AutoDocsMenu React component. Learn more about the props and the CSS customization points.",
891-
"pageSearchDescription": "AutoDocsMenu - react component, designed create tables.",
892-
"ComponentNameText": "The AutoDocsMenu name can be used for providing default props or style overriders at the theme level.",
893-
"enableProps": true,
894-
"props": [
895-
{
896-
"name": "layoutData",
897-
"type": "PagesGroupData",
898-
"default": "",
899-
"description": "Pages and groups hierarchy data."
900-
}
901-
],
902-
"forwardRef": true,
903-
"enableCss": false,
904-
"css": {},
905-
"noCssText": "This component is service and doesn't have any styles."
818+
"searchTags": {
819+
"api": "api",
820+
"auto": "auto",
821+
"docs": "docs",
822+
"menu": "menu",
823+
"layout": "layout"
824+
},
825+
"searchDescription": "AutoDocsMenu React component API page.",
826+
"props": {
827+
"layoutData": "Pages and groups hierarchy data."
828+
},
829+
"css": {}
906830
},
907831
"LanguageSelectorAPI": {
908832
"pageAbout": "The API documentation of the LanguageSelector React component. Learn more about the props and the CSS customization points.",
@@ -1474,7 +1398,7 @@
14741398
"summary": "The API documentation of the &&name React component. Learn more about the props and the CSS customization points.",
14751399
"importDifferenceText": "You can learn more about the difference by [reading this guide](https://material-ui.com/guides/minimizing-bundle-size/).",
14761400
"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.",
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.",
1401+
"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.",
14781402
"refText": "The ```ref``` is forwarded to the root element.",
14791403
"propsText": "Any other props supplied will be provided to the root element (native element)."
14801404
}

‎src/pages/APIs/AutoDocsMenuAPI/demos.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## Demos
2+
* Lol
3+
* Kek

0 commit comments

Comments
 (0)