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

Commit 6c23ee3

Browse files
DanilAndreevDanilAndreev
committed
Merge branch 'prod'
2 parents 0468345 + 28855b5 commit 6c23ee3

File tree

123 files changed

+2429
-1962
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

123 files changed

+2429
-1962
lines changed

‎.idea/copyright/Danil_Andreev.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/copyright/profiles_settings.xml

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/dictionaries/danil.xml

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/inspectionProfiles/Project_Default.xml

-6
This file was deleted.

‎.idea/runConfigurations/npm_start.xml

+8-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎craco.config.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const rawLoader = require('craco-raw-loader')
2+
3+
module.exports = {
4+
plugins: [
5+
{
6+
plugin: rawLoader,
7+
options: {test: /\.md$/}
8+
}
9+
]
10+
}

‎package.json

+9-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "material-docs-documentation",
2+
"name": "@material-docs/material-docs-documentation",
33
"version": "0.1.3",
44
"private": false,
55
"description": "Documentation for Material Docs. material-docs - react framework for easy creating documentation site in material design style.",
@@ -29,10 +29,14 @@
2929
},
3030
"license": "MIT",
3131
"dependencies": {
32-
"@material-docs/core": "^0.3.6",
32+
"@craco/craco": "^5.6.4",
33+
"@material-docs/core": "^0.4.5",
34+
"@material-docs/react-components-docs-extension": "^0.2.0",
3335
"@material-ui/core": "^4.11.0",
3436
"@material-ui/icons": "^4.9.1",
3537
"clsx": "^1.1.1",
38+
"craco-raw-loader": "^1.0.1",
39+
"raw-loader": "^4.0.1",
3640
"react": "^16.13.1",
3741
"react-dom": "^16.13.1",
3842
"react-parallax": "^3.0.3",
@@ -44,9 +48,9 @@
4448
"@testing-library/user-event": "^7.1.2"
4549
},
4650
"scripts": {
47-
"start": "react-scripts start",
48-
"build": "react-scripts build",
49-
"test": "react-scripts test",
51+
"start": "craco start",
52+
"build": "craco build",
53+
"test": "craco test",
5054
"eject": "react-scripts eject"
5155
},
5256
"eslintConfig": {

‎src/Documentation.js

+23
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,14 @@ import H4API from "./pages/APIs/H4API";
6060
import H5API from "./pages/APIs/H5API";
6161
import H6API from "./pages/APIs/H6API";
6262
import HeaderAPI from "./pages/APIs/HeaderAPI";
63+
import RCDEPropAPI from "./pages/Extensions/ReactComponentsDocsExtension/APIs/PropAPI";
64+
import RCDEReactComponentApiPageAPI
65+
from "./pages/Extensions/ReactComponentsDocsExtension/APIs/ReactComponentApiPageAPI";
66+
import RCDEStyleAPI from "./pages/Extensions/ReactComponentsDocsExtension/APIs/StyleAPI";
67+
import ReactComponentApiPageDemo
68+
from "./pages/Extensions/ReactComponentsDocsExtension/Components/ReactComponentApiPageDemo";
69+
import CodeDemo from "./pages/Components/CodeDemo";
70+
import TablesDemo from "./pages/Components/TablesDemo";
6371

6472

6573
export default function Documentation() {
@@ -101,12 +109,14 @@ export default function Documentation() {
101109
<Installation/>
102110
</PagesGroup>
103111
<PagesGroup name={"Components"}>
112+
<CodeDemo/>
104113
<ListsDemo/>
105114
<LayoutDemo/>
106115
<HeadersDemo/>
107116
<MarkdownDemo/>
108117
<TextStylingDemo/>
109118
<ImagesDemo/>
119+
<TablesDemo/>
110120
</PagesGroup>
111121
<PagesGroup name={"Component APIs"}>
112122
<DocsLayoutAPI/>
@@ -149,6 +159,19 @@ export default function Documentation() {
149159
<PagesGroup name={"Tutorials"}>
150160
<CreatingMaterialDocs/>
151161
</PagesGroup>
162+
<PagesGroup name={"Extensions"}>
163+
<PagesGroup name={"React Components Docs Extension"}>
164+
<ReactComponentApiPageDemo/>
165+
<PagesGroup name={"Component API"}>
166+
<RCDEPropAPI/>
167+
<RCDEStyleAPI/>
168+
<RCDEReactComponentApiPageAPI/>
169+
</PagesGroup>
170+
</PagesGroup>
171+
</PagesGroup>
172+
<PagesGroup name={"System"}>
173+
174+
</PagesGroup>
152175
</DocsPages>
153176
</DocsLayout>
154177
);

‎src/components/ApiPage.js

+74-96
Original file line numberDiff line numberDiff line change
@@ -4,112 +4,90 @@
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, useLang} 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();
40-
if (!lang) throw new Error(`Documentation: lang is required prop`);
25+
export default function ApiPage(props, ref) {
26+
const {
27+
// lang,
28+
localeName,
29+
importCode,
30+
name,
31+
overrideName,
32+
properties = [],
33+
css = [],
34+
children,
35+
enableCss = true,
36+
enableProps = true,
37+
refNotForwarded = false,
38+
propsForwarded = false,
39+
...other
40+
} = props;
41+
const {lang} = useLang();
4142
if (!localeName) throw new Error(`Documentation: localeName is required prop`);
4243

43-
const locale = lang.locale.pages[localeName];
44-
const localeSpells = lang.locale.common.spells;
44+
const locale = props.locale || lang.locale.pages[localeName];
4545
const componentAPILocale = lang.locale.common.ComponentAPI;
4646

47-
const showProps = !!locale.enableProps || !!locale.noPropsText;
48-
const showCss = !!locale.enableCss || !!locale.noCssText;
47+
const searchTags = locale.searchTags && Object.keys(locale.searchTags).map(key => locale.searchTags[key]);
48+
4949
return (
50-
<DocsPage
50+
<ReactComponentApiPage
5151
name={name}
52-
searchTags={searchTags || locale.searchTags}
53-
searchDescription={locale.pageSearchDescription}
52+
searchDescription={locale.searchDescription}
53+
searchTags={searchTags}
5454
>
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>
55+
<ReactComponentApiPageSummary>
56+
<H3 noTag noDivider>
57+
<Markdown data={{name}} typographyInheritSize inline>
58+
{componentAPILocale.summary}
59+
</Markdown>
60+
</H3>
61+
</ReactComponentApiPageSummary>
62+
<ReactComponentApiPageImport>
63+
<Code theme={"darcula"}>{importCode}</Code>
64+
<Markdown>{componentAPILocale.importDifferenceText}</Markdown>
65+
{overrideName && <Markdown data={{name: overrideName}}>{componentAPILocale.componentName}</Markdown>}
66+
</ReactComponentApiPageImport>
67+
{enableProps &&
68+
<ReactComponentApiPageProps>
69+
{properties.map(prop =>
70+
<Prop name={prop.name} type={prop.type} def={prop.default} key={prop.name}>{prop.description}</Prop>
71+
)}
72+
</ReactComponentApiPageProps>
10773
}
108-
{!locale.enableCss && <Markdown>{locale.noCssText}</Markdown>}
109-
{locale.enableCss &&
110-
<Markdown>{componentAPILocale.customization}</Markdown>
74+
<ReactComponentApiPageDetails>
75+
{!refNotForwarded && <Markdown>{componentAPILocale.refText}</Markdown>}
76+
{propsForwarded && <Markdown>{componentAPILocale.propsText}</Markdown>}
77+
</ReactComponentApiPageDetails>
78+
{enableCss &&
79+
<ReactComponentApiPageStyles>
80+
{css.map(rule =>
81+
<Style name={rule.name} global={rule.global} key={rule.name}>{rule.description}</Style>
82+
)}
83+
</ReactComponentApiPageStyles>
11184
}
112-
{children}
113-
</DocsPage>
85+
<ReactComponentApiPageFooter>
86+
<Markdown data={{name}}>
87+
{componentAPILocale.customization}
88+
</Markdown>
89+
{children}
90+
</ReactComponentApiPageFooter>
91+
</ReactComponentApiPage>
11492
);
11593
}

‎src/examples/Code/Code.js

-8
This file was deleted.

‎src/examples/Code/CodeExample.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/*
2+
* Author: Andrieiev Danil | [email protected] | https://github.com/DanilAndreev
3+
* Copyright (C) 2020.
4+
*/
5+
6+
import React from "react";
7+
import Code from "@material-docs/core/components/Code";
8+
9+
const code = `
10+
function test() {
11+
console.log("Hello world!");
12+
console.log("I am a Code element.");
13+
}
14+
`.trim();
15+
16+
export default function CodeExample() {
17+
return (
18+
<Code theme={"darcula"} language={"javascript"}>
19+
{code}
20+
</Code>
21+
);
22+
}

0 commit comments

Comments
 (0)