[APIs] Added API pages for all of components.

DanilAndreev · DanilAndreev · commit 82650516146e · 2020-09-25T15:09:54.000+03:00
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
   "license": "MIT",
   "dependencies": {
     "@craco/craco": "^5.6.4",
-    "@material-docs/core": "^0.4.7",
+    "@material-docs/core": "^0.4.9",
     "@material-docs/react-components-docs-extension": "^0.2.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/src/Documentation.js b/src/Documentation.js
@@ -68,6 +68,10 @@ import ReactComponentApiPageDemo
     from "./pages/Extensions/ReactComponentsDocsExtension/Components/ReactComponentApiPageDemo";
 import CodeDemo from "./pages/Components/CodeDemo";
 import TablesDemo from "./pages/Components/TablesDemo";
+import LangProviderAPI from "./pages/APIs/LangProviderAPI";
+import LocaleAPI from "./pages/APIs/LocaleAPI";
+import LandingAPI from "./pages/APIs/LandingAPI";
+import LinkAPI from "./pages/APIs/LinkAPI";
 
 
 export default function Documentation() {
@@ -153,7 +157,11 @@ export default function Documentation() {
                     <H6API/>
                     <HeaderAPI/>
                     <AutoDocsMenuAPI/>
+                    <LocaleAPI/>
+                    <LandingAPI/>
+                    <LinkAPI/>
                     <PagesGroup name={"System components"}>
+                        <LangProviderAPI/>
                         <LanguageSelectorAPI/>
                         <SearchFieldAPI/>
                         <TagableAPI/>
diff --git a/src/components/ApiPage.js b/src/components/ApiPage.js
@@ -50,6 +50,7 @@ export default function ApiPage(props, ref) {
         <ReactComponentApiPage
             name={name}
             searchDescription={locale.searchDescription}
+            searchLabel={name + " API"}
             searchTags={searchTags}
         >
             <ReactComponentApiPageSummary>
diff --git a/src/locale/EN.json b/src/locale/EN.json
@@ -182,8 +182,11 @@
           "noTag": "If true and name prop is defined - header with name will not generate tag for content tab.",
           "paperContainer": "If true - demo content will be wrapped in Paper component.",
           "actions": "Array of additional actions. The actions will be displayed in the dropdown menu when you click the ExpandMore icon button.",
-          "p": "Padding of demo block in theme.spacing units.",
-          "m": "Margin of demo block in theme.spacing units.",
+          "p": "Padding of demo block in _theme.spacing_ units.",
+          "m": "Margin of demo block in _theme.spacing_ units.",
+          "theme": "Code highlighting and background styling type.",
+          "themeLight": "Code highlighting and background styling type when global theme in light mode.",
+          "themeDark": "Code highlighting and background styling type when global theme in dark mode.",
           "children": "Children of an element. Will be placed in demo block."
         },
         "css": {
@@ -206,6 +209,8 @@
         "props": {
           "language": "Language name for code highlighter.",
           "theme": "Code highlighting and background styling type.",
+          "themeLight": "Code highlighting and background styling type when global theme in light mode.",
+          "themeDark": "Code highlighting and background styling type when global theme in dark mode.",
           "children": "Code to display in code highlighter."
         },
         "css": {
@@ -225,10 +230,67 @@
           "name": "Name of the group. Will be displayed on button in menu.",
           "getData": "Callback, provided to get group data without context usage.",
           "order": "As lower order as higher will be displayed menu item.",
+          "defaultExpanded": "If true, menu group will be expanded on startup.",
+          "children": "Children of an element."
+        },
+        "css": {}
+      },
+      "LandingAPI": {
+        "searchDescription": "Landing - react component, designed to provide documentation with free style landing page.",
+        "searchTags": {
+          "page": "page",
+          "landing": "landing",
+          "container": "container"
+        },
+        "props": {
           "children": "Children of an element."
         },
         "css": {}
       },
+      "LangProviderAPI": {
+        "searchDescription": "LangProvider - react component, designed to provide children with locale lang settings.",
+        "searchTags": {
+          "page": "page",
+          "lang": "lang",
+          "provider": "provider",
+          "locale": "locale",
+          "container": "container"
+        },
+        "props": {
+          "lang": "lang extension, will be merged with main lang. To main lang will be added fields from provider lang if in main lang they are not defined.",
+          "children": "Children of an element."
+        },
+        "css": {}
+      },
+      "LocaleAPI": {
+        "searchDescription": "Locale - react component, designed to provide user with flexible locale access.",
+        "searchTags": {
+          "locale": "locale",
+          "lang": "lang"
+        },
+        "props": {
+          "path": "Path to the data in the Lang.locale. Exampele: \"hello/darkness/my\".",
+          "children": "Children of an element. Will be displayed by default if can not load data from Lang."
+        },
+        "css": {}
+      },
+      "LinkAPI": {
+        "searchDescription": "Link - react component, designed to create links to outside resource or inner docs page.",
+        "searchTags": {
+          "link": "link",
+          "page": "page",
+          "href": "href",
+          "redirect": "redirect"
+        },
+        "props": {
+          "page": "Page route. Can be passed as string or as array of routes.",
+          "href": "Link to external resource.",
+          "children": "Children of an element. Will be displayed by default if can not load data from Lang."
+        },
+        "css": {
+          "root": "Styles applied to the root element."
+        }
+      },
       "ImageAPI": {
         "searchDescription": "Image - react component, designed to show images. Image component uses lazy load technology.",
         "searchTags": {
@@ -242,8 +304,10 @@
         },
         "props": {
           "src": "Source link. Used to define image path.",
+          "placeholderSrc": "Src of low quality image, which will be displayed while main image is loading.",
           "alt": "Alternative text. Will be displayed if image can not load.",
           "fullWidth": "If true - image will be 100 percent wide.",
+          "frame": "If true, image will be placed inside decorative border frame.",
           "children": "Elements, which will appear in image caption."
         },
         "css": {
@@ -288,6 +352,8 @@
           "collapsedHeight": "Height of the component when it is collapsed.",
           "actions": "Array of additional actions. The actions will be displayed in the dropdown menu when you click the ExpandMore icon button.",
           "theme": "Code highlighting and background styling type.",
+          "themeLight": "Code highlighting and background styling type when global theme in light mode.",
+          "themeDark": "Code highlighting and background styling type when global theme in dark mode.",
           "language": "Language name for code highlighter.",
           "children": "Code to display in code highlighter. This code will appear in the Code block if component is expanded."
         },
@@ -699,6 +765,8 @@
           "name": "Name of the docs. Needs for metadata. Will be displayed in app header. Also you can find this name near version label in side menu drawer.",
           "version": "Version of the docs. Needs for metadata.",
           "logo": "A path to the logo image, will be displayed in drawer near name and version.",
+          "onNameClick": "Callback, designed to handle click on docs name in drawer badge.",
+          "onVersionClick": "Callback, designed to handle click on docs version in drawer badge.",
           "children": "Children of an element. Normally DocsMenu and DocsPages."
         },
         "forwardRef": true,
diff --git a/src/pages/APIs/BoldAPI/index.js b/src/pages/APIs/BoldAPI/index.js
@@ -22,7 +22,7 @@ export default function BoldAPI() {
             localeName={"BoldAPI"}
             importCode={importCode}
             properties={[
-                {name: "chidlren", type: "node", default: "", description: locale.props.children},
+                {name: "children", type: "node", default: "", description: locale.props.children},
             ]}
             css={[
                 {name: "root", global: "MatDocs-root", description: locale.css.root},
diff --git a/src/pages/APIs/CodeAPI/index.js b/src/pages/APIs/CodeAPI/index.js
@@ -22,7 +22,9 @@ export default function CodeAPI() {
             importCode={importCode}
             properties={[
                 {name: "language", type: "string", default: "\"javascript\"", description: locale.props.language},
-                {name: "theme", type: "\"light\" | \"dark\" | \"darcula\"", default: "\"light\"", description: locale.props.theme},
+                {name: "theme", type: "\"light\" | \"dark\" | \"darcula\"", default: "", description: locale.props.theme},
+                {name: "themeLight", type: "\"light\" | \"dark\" | \"darcula\"", default: "\"light\"", description: locale.props.themeLight},
+                {name: "themeDark", type: "\"light\" | \"dark\" | \"darcula\"", default: "\"dark\"", description: locale.props.themeDark},
                 {name: "children", type: "string", default: "", description: locale.props.children},
             ]}
             css={[
diff --git a/src/pages/APIs/DemoWithCodeAPI/index.js b/src/pages/APIs/DemoWithCodeAPI/index.js
@@ -32,6 +32,9 @@ export default function DemoWithCodeAPI() {
                 {name: "p", type: "number", default: "0", description: locale.props.p},
                 {name: "m", type: "number", default: "0", description: locale.props.m},
                 {name: "children", type: "node", default: "", description: locale.props.children},
+                {name: "theme", type: "\"light\" | \"dark\" | \"darcula\"", default: "", description: locale.props.theme},
+                {name: "themeLight", type: "\"light\" | \"dark\" | \"darcula\"", default: "\"light\"", description: locale.props.themeLight},
+                {name: "themeDark", type: "\"light\" | \"dark\" | \"darcula\"", default: "\"dark\"", description: locale.props.themeDark},
             ]}
             css={[
                 {name: "root", global: "MatDoc-root", description: locale.css.root},
diff --git a/src/pages/APIs/DocsLayoutAPI/index.js b/src/pages/APIs/DocsLayoutAPI/index.js
@@ -40,6 +40,8 @@ export default function DocsLayoutAPI() {
                 {name: "name", type: "string", default: "", description: locale.props.name},
                 {name: "version", type: "string", default: "", description: locale.props.version},
                 {name: "logo", type: "string", default: "", description: locale.props.logo},
+                {name: "onNameClick", type: "function(event: Event): void", default: "", description: locale.props.logo},
+                {name: "onVersionClick", type: "function(event: Event): void", default: "", description: locale.props.logo},
                 {name: "children", type: "node", default: "", description: locale.props.children},
             ]}
             css={[
diff --git a/src/pages/APIs/ExpansionCodeAPI/index.js b/src/pages/APIs/ExpansionCodeAPI/index.js
@@ -26,7 +26,9 @@ export default function ExpansionCodeAPI() {
                 {name: "noTag", type: "boolean", default: "false", description: locale.props.noTag},
                 {name: "collapsedHeight", type: "number | string", default: "100px", description: locale.props.collapsedHeight},
                 {name: "actions", type: "DemoCodeAction[]", default: "", description: locale.props.actions},
-                {name: "theme", type: "\"light\" | \"dark\" | \"darcula\"", default: "\"light\"", description: locale.props.theme},
+                {name: "theme", type: "\"light\" | \"dark\" | \"darcula\"", default: "", description: locale.props.theme},
+                {name: "themeLight", type: "\"light\" | \"dark\" | \"darcula\"", default: "\"light\"", description: locale.props.themeLight},
+                {name: "themeDark", type: "\"light\" | \"dark\" | \"darcula\"", default: "\"dark\"", description: locale.props.themeDark},
                 {name: "language", type: "string", default: "\"javascript\"", description: locale.props.language},
                 {name: "children", type: "node", default: "", description: locale.props.children},
             ]}
diff --git a/src/pages/APIs/ImageAPI/index.js b/src/pages/APIs/ImageAPI/index.js
@@ -23,8 +23,10 @@ export default function ImageAPI() {
             importCode={importCode}
             properties={[
                 {name: "src", type: "string", default: "", description: locale.props.src},
+                {name: "placeholderSrc", type: "string", default: "", description: locale.props.placeholderSrc},
                 {name: "alt", type: "string", default: "", description: locale.props.alt},
                 {name: "fullWidth", type: "boolean", default: "false", description: locale.props.fullWidth},
+                {name: "frame", type: "boolean", default: "false", description: locale.props.frame},
                 {name: "children", type: "node", default: "", description: locale.props.children},
             ]}
             css={[
diff --git a/src/pages/APIs/LandingAPI/importCode.md b/src/pages/APIs/LandingAPI/importCode.md
@@ -0,0 +1,3 @@
+import {Landing} from "@material-docs/core";
+// or
+import Landing from "@material-docs/core/components/Landing";
diff --git a/src/pages/APIs/LandingAPI/index.js b/src/pages/APIs/LandingAPI/index.js
@@ -0,0 +1,35 @@
+/*
+ * Author: Andrieiev Danil |  danssg08@gmail.com | https://github.com/DanilAndreev
+ * Copyright (C) 2020.
+ */
+
+import React from "react";
+
+import {H2, List, ListItem, useLang} from "@material-docs/core";
+import ApiPage from "../../../components/ApiPage";
+import Link from "@material-docs/core/components/Link/Link";
+
+import importCode from "./importCode.md";
+
+export default function LandingAPI() {
+    const {lang} = useLang();
+    const locale = lang.locale.pages.LandingAPI;
+
+    return (
+        <ApiPage
+            name={"Landing"}
+            localeName={"LandingAPI"}
+            overrideName={"MaterialDocs-Landing"}
+            importCode={importCode}
+            properties={[
+                {name: "children", type: "node", default: "", description: locale.props.children},
+            ]}
+            enableCss={false}
+        >
+            <H2>Demos</H2>
+            <List>
+                <ListItem><Link page={["Components", "Text decorators"]}>Text styling</Link></ListItem>
+            </List>
+        </ApiPage>
+    );
+}
diff --git a/src/pages/APIs/LangProviderAPI/importCode.md b/src/pages/APIs/LangProviderAPI/importCode.md
@@ -0,0 +1,3 @@
+import {LangProvider} from "@material-docs/core";
+// or
+import LangProvider from "@material-docs/core/components/LangProvider";
diff --git a/src/pages/APIs/LangProviderAPI/index.js b/src/pages/APIs/LangProviderAPI/index.js
@@ -0,0 +1,36 @@
+/*
+ * Author: Andrieiev Danil |  danssg08@gmail.com | https://github.com/DanilAndreev
+ * Copyright (C) 2020.
+ */
+
+import React from "react";
+
+import {H2, List, ListItem, useLang} from "@material-docs/core";
+import ApiPage from "../../../components/ApiPage";
+import Link from "@material-docs/core/components/Link/Link";
+
+import importCode from "./importCode.md";
+
+export default function LangProviderAPI() {
+    const {lang} = useLang();
+    const locale = lang.locale.pages.LangProviderAPI;
+
+    return (
+        <ApiPage
+            name={"LangProvider"}
+            localeName={"LangProviderAPI"}
+            overrideName={"MaterialDocs-LangProvider"}
+            importCode={importCode}
+            properties={[
+                {name: "lang", type: "{locale: object}", default: "", description: locale.props.lang},
+                {name: "children", type: "node", default: "", description: locale.props.children},
+            ]}
+            enableCss={false}
+        >
+            <H2>Demos</H2>
+            <List>
+                <ListItem><Link page={["Components", "Text decorators"]}>Text styling</Link></ListItem>
+            </List>
+        </ApiPage>
+    );
+}
diff --git a/src/pages/APIs/LinkAPI/importCode.md b/src/pages/APIs/LinkAPI/importCode.md
@@ -0,0 +1,3 @@
+import {Link} from "@material-docs/core";
+// or
+import Link from "@material-docs/core/components/Link";
diff --git a/src/pages/APIs/LinkAPI/index.js b/src/pages/APIs/LinkAPI/index.js
@@ -0,0 +1,38 @@
+/*
+ * Author: Andrieiev Danil |  danssg08@gmail.com | https://github.com/DanilAndreev
+ * Copyright (C) 2020.
+ */
+
+import React from "react";
+
+import {H2, List, ListItem, useLang} from "@material-docs/core";
+import ApiPage from "../../../components/ApiPage";
+import Link from "@material-docs/core/components/Link/Link";
+
+import importCode from "./importCode.md";
+export default function LinkAPI() {
+    const {lang} = useLang();
+    const locale = lang.locale.pages.LinkAPI;
+
+    return (
+        <ApiPage
+            name={"Link"}
+            localeName={"LinkAPI"}
+            overrideName={"MaterialDocs-Link"}
+            importCode={importCode}
+            properties={[
+                {name: "page", type: "string | string[]", default: "", description: locale.props.page},
+                {name: "href", type: "string", default: "", description: locale.props.href},
+                {name: "children", type: "node", default: "", description: locale.props.children},
+            ]}
+            css={[
+                {name: "root", global: "MatDoc-root", description: locale.css.root},
+            ]}
+        >
+            <H2>Demos</H2>
+            <List>
+                <ListItem><Link page={["Components", "Lists"]}>Lists</Link></ListItem>
+            </List>
+        </ApiPage>
+    );
+}
diff --git a/src/pages/APIs/LocaleAPI/index.js b/src/pages/APIs/LocaleAPI/index.js
@@ -13,7 +13,7 @@ import importCode from "./importCode.md";
 
 export default function LocaleAPI() {
     const {lang} = useLang();
-    const locale = lang.locale.pages.ListItemContainedAPI;
+    const locale = lang.locale.pages.LocaleAPI;
 
     return (
         <ApiPage
diff --git a/src/pages/APIs/PagesGroupAPI/index.js b/src/pages/APIs/PagesGroupAPI/index.js
@@ -25,6 +25,7 @@ export default function PagesGroupAPI() {
                 {name: "name", type: "string", default: "", description: locale.props.name},
                 {name: "getData", type: "function(data: PagesGroupData): void", default: "", description: locale.props.code},
                 {name: "order", type: "number", default: "", description: locale.props.code},
+                {name: "defaultExpanded", type: "boolean", default: "false", description: locale.props.defaultExpanded},
                 {name: "children", type: "node", default: "", description: locale.props.children},
             ]}
             enableCss={false}
diff --git a/src/pages/Components/ImagesDemo/index.js b/src/pages/Components/ImagesDemo/index.js
@@ -21,8 +21,8 @@ export default function ImagesDemo() {
     return (
         <DocsPage
             name={"Images"}
-            searchLabel={"Text decorators"}
-            searchDescription={"Text styling demonstration page."}
+            searchLabel={"Images"}
+            searchDescription={"Images demo page."}
             keys={["text", "styling", "decoration", "wrappers", "demo"]}
         >
             <H1>Images</H1>
diff --git a/src/pages/Components/TablesDemo/index.js b/src/pages/Components/TablesDemo/index.js
@@ -27,6 +27,7 @@ export default function TablesDemo() {
     return (
         <DocsPage
             name={"Tables"}
+            searchDescription={"Tables demo page."}
         >
             <H1>Tables</H1>
             <H3>{locale.simpleTableHeader}</H3>
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -50,6 +50,7 @@ export default function ApiPage(props, ref) {`
`50`	`50`	`<ReactComponentApiPage`
`51`	`51`	`name={name}`
`52`	`52`	`searchDescription={locale.searchDescription}`
	`53`	`+ searchLabel={name + " API"}`
`53`	`54`	`searchTags={searchTags}`
`54`	`55`	`>`
`55`	`56`	`<ReactComponentApiPageSummary>`