Skip to content

Commit 3f016c7

Browse files
lukewalczaklukewalczak
authored
docs: display screenshots properly (#3960)
1 parent 835fa9a commit 3f016c7

File tree

97 files changed

+257
-563
lines changed

Some content is hidden

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

97 files changed

+257
-563
lines changed

‎docs/component-docs-plugin/generatePageMDX.js‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -58,25 +58,43 @@ function generateMoreExamples(componentName) {
5858
`;
5959
}
6060

61-
function generateThemeColors(componentName, data) {
62-
if (!data) {
61+
function generateThemeColors(componentName, themeColorsData) {
62+
if (!themeColorsData) {
6363
return `<span />`;
6464
}
6565
return `
6666
## Theme colors
6767
68-
<ThemeColorsTable data={${data}} componentName="${componentName}" />
68+
<ThemeColorsTable themeColorsData={${themeColorsData}} componentName="${componentName}" />
69+
`;
70+
}
71+
72+
function generateScreenshots(componentName, screenshotData) {
73+
if (!screenshotData) {
74+
return `<span />`;
75+
}
76+
77+
return `
78+
<ScreenshotTabs screenshotData={${screenshotData}} baseUrl="${baseUrl}"/>
6979
`;
7080
}
7181

7282
function generatePageMDX(doc, link) {
83+
const summaryRegex = /([\s\S]*?)## Usage/;
84+
7385
const description = doc.description
7486
.replace(/<\/br>/g, '')
7587
.replace(/style="[a-zA-Z0-9:;.\s()\-,]*"/gi, '')
7688
.replace(/src="screenshots/g, `src="${baseUrl}screenshots`)
7789
.replace(/@extends.+$/, '');
7890

79-
const data = JSON.stringify(customFields.themeColors[doc.title]);
91+
const summary = summaryRegex.exec(description)
92+
? summaryRegex.exec(description)[1]
93+
: '';
94+
const usage = description.replace(summary, '');
95+
96+
const themeColorsData = JSON.stringify(customFields.themeColors[doc.title]);
97+
const screenshotData = JSON.stringify(customFields.screenshots[doc.title]);
8098

8199
const mdx = `
82100
---
@@ -85,16 +103,21 @@ title: ${doc.title}
85103
86104
import PropTable from '@site/src/components/PropTable.tsx';
87105
import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
106+
import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
107+
108+
${summary}
109+
110+
${generateScreenshots(doc.title, screenshotData)}
88111
89-
${description}
112+
${usage}
90113
91114
${generateMoreExamples(doc.title)}
92115
93116
## Props
94117
95118
<PropTable link="${link}" />
96119
97-
${generateThemeColors(doc.title, data)}
120+
${generateThemeColors(doc.title, themeColorsData)}
98121
99122
${generateKnownIssues(doc.title)}
100123
`;

‎docs/docusaurus.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ const path = require('path');
55
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
66
const lightCodeTheme = require('prism-react-renderer/themes/github');
77

8+
const { screenshots } = require('./src/data/screenshots.js');
89
const { themeColors } = require('./src/data/themeColors.js');
910

1011
const { NODE_ENV, DOCUSAURUS_BASE_URL } = process.env;
@@ -335,6 +336,7 @@ const config = {
335336
},
336337
},
337338
themeColors,
339+
screenshots,
338340
},
339341
};
340342

‎docs/src/components/ScreenshotTabs.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react';
2+
3+
//@ts-ignore
4+
import TabItem from '@theme/TabItem';
5+
//@ts-ignore
6+
import Tabs from '@theme/Tabs';
7+
8+
import type { DataObject } from '../utils/themeColors';
9+
10+
type ScreenshotTabsProps = {
11+
screenshotData: DataObject | string;
12+
baseUrl: string;
13+
};
14+
15+
const getClassName = (value: string) =>
16+
value.endsWith('.gif')
17+
? 'gifScreenshot'
18+
: `tabScreenshot${value.includes('full-width') ? 'full-width' : ''}`;
19+
20+
const ScreenshotTabs: React.FC<ScreenshotTabsProps> = ({
21+
screenshotData,
22+
baseUrl,
23+
}) => {
24+
const renderScreenhot = (src: string): JSX.Element => (
25+
<img src={`${baseUrl}${src}`} className={getClassName(src)} />
26+
);
27+
28+
if (typeof screenshotData === 'string') {
29+
return renderScreenhot(screenshotData);
30+
}
31+
32+
const screenshots = Object.entries(screenshotData).map(([key, value]) => (
33+
<TabItem key={key} value={key} label={key} default>
34+
{renderScreenhot(value as string)}
35+
</TabItem>
36+
));
37+
38+
return <Tabs>{screenshots}</Tabs>;
39+
};
40+
41+
export default ScreenshotTabs;

‎docs/src/components/ThemeColorsTable.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,17 @@ const getTableCell = (keys: string[], modes: DataObject): JSX.Element[] => {
2828
};
2929

3030
const FlatTable = ({
31-
data,
31+
themeColorsData,
3232
uniqueKeys,
3333
}: {
34-
data: DataObject;
34+
themeColorsData: DataObject;
3535
uniqueKeys: string[];
3636
}): JSX.Element => {
37-
const rows = Object.keys(data).map((mode) => {
37+
const rows = Object.keys(themeColorsData).map((mode) => {
3838
return (
3939
<tr key={`${mode}`}>
4040
<td>{mode}</td>
41-
{getTableCell(uniqueKeys, data[mode] as DataObject)}
41+
{getTableCell(uniqueKeys, themeColorsData[mode] as DataObject)}
4242
</tr>
4343
);
4444
});
@@ -63,14 +63,14 @@ const FlatTable = ({
6363
};
6464

6565
const TabbedTable = ({
66-
data,
66+
themeColorsData,
6767
uniqueKeys,
6868
}: {
69-
data: DataObject;
69+
themeColorsData: DataObject;
7070
uniqueKeys: string[];
7171
}): JSX.Element => {
72-
const tabTableContent = Object.keys(data).map((key) => {
73-
const modes = data[key] as DataObject;
72+
const tabTableContent = Object.keys(themeColorsData).map((key) => {
73+
const modes = themeColorsData[key] as DataObject;
7474
const rows = Object.keys(modes).map((mode) => {
7575
return (
7676
<tr key={`${key}-${mode}`}>
@@ -106,21 +106,21 @@ const TabbedTable = ({
106106
};
107107

108108
const ThemeColorsTable = ({
109-
data,
109+
themeColorsData,
110110
componentName,
111111
}: {
112-
data: DataObject;
112+
themeColorsData: DataObject;
113113
componentName: string;
114114
}): JSX.Element | null => {
115-
const uniqueKeys = getUniqueNestedKeys(data);
116-
const nestingLevel = getMaxNestedLevel(data);
115+
const uniqueKeys = getUniqueNestedKeys(themeColorsData);
116+
const nestingLevel = getMaxNestedLevel(themeColorsData);
117117
const isFlatTable = nestingLevel === 1;
118118

119119
const Table = isFlatTable ? FlatTable : TabbedTable;
120120

121121
return (
122122
<>
123-
<Table data={data} uniqueKeys={uniqueKeys} />
123+
<Table themeColorsData={themeColorsData} uniqueKeys={uniqueKeys} />
124124
<Admonition type="tip">
125125
<p>
126126
If a dedicated prop for a specific color is not available or the{' '}

‎docs/src/css/custom.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,13 @@ html[data-theme='dark'] .nav-link::after {
7979
}
8080

8181
.screenshots img,
82-
.screenshots figure {
83-
max-width: 25%;
82+
83+
.tabScreenshot {
84+
max-width: 45%;
85+
}
86+
87+
.gifScreenshot {
88+
max-width: 40%;
8489
}
8590

8691
.screenshots figure>img {

‎docs/src/data/screenshots.js‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
const screenshots = {
2+
ActivityIndicator: 'screenshots/activity-indicator.gif',
3+
Appbar: 'screenshots/appbar.png',
4+
'Appbar.Action': 'screenshots/appbar-action-android.png',
5+
'Appbar.BackAction': 'screenshots/appbar-backaction-android.png',
6+
'Appbar.Content': 'screenshots/appbar-content.png',
7+
'Appbar.Header': {
8+
small: 'screenshots/appbar-small.png',
9+
medium: 'screenshots/appbar-medium.png',
10+
large: 'screenshots/appbar-large.png',
11+
'center-aligned': 'screenshots/appbar-center-aligned.png',
12+
},
13+
'Avatar.Icon': 'screenshots/avatar-icon.png',
14+
'Avatar.Image': 'screenshots/avatar-image.png',
15+
'Avatar.Text': 'screenshots/avatar-text.png',
16+
Badge: {
17+
'with text': 'screenshots/badge-1.png',
18+
'without text': 'screenshots/badge-2.png',
19+
dot: 'screenshots/badge-3.png',
20+
},
21+
Banner: 'screenshots/banner.gif',
22+
BottomNavigation: 'screenshots/bottom-navigation.gif',
23+
'BottomNavigation.Bar': 'screenshots/bottom-navigation-tabs.jpg',
24+
Button: {
25+
text: 'screenshots/button-1.png',
26+
outlined: 'screenshots/button-2.png',
27+
contained: 'screenshots/button-3.png',
28+
elevated: 'screenshots/button-4.png',
29+
'contained-tonal': 'screenshots/button-5.png',
30+
},
31+
Card: {
32+
elevated: 'screenshots/card-1.png',
33+
outlined: 'screenshots/card-2.png',
34+
contained: 'screenshots/card-3.png',
35+
},
36+
'Card.Actions': 'screenshots/card-actions.png',
37+
'Card.Content': 'screenshots/card-content-example.png',
38+
'Card.Cover': 'screenshots/card-cover.png',
39+
'Card.Title': 'screenshots/card-title-1.png',
40+
Checkbox: {
41+
'Android (enabled)': 'screenshots/checkbox-enabled.android.png',
42+
'Android (disabled)': 'screenshots/checkbox-disabled.android.png',
43+
'iOS (enabled)': 'screenshots/checkbox-enabled.ios.png',
44+
'iOS (disabled)': 'screenshots/checkbox-disabled.ios.png',
45+
},
46+
'Checkbox.Android': {
47+
enabled: 'screenshots/checkbox-enabled.android.png',
48+
disabled: 'screenshots/checkbox-disabled.android.png',
49+
},
50+
'Checkbox.IOS': {
51+
enabled: 'screenshots/checkbox-enabled.ios.png',
52+
disabled: 'screenshots/checkbox-disabled.ios.png',
53+
},
54+
Chip: {
55+
flat: 'screenshots/chip-1.png',
56+
outlined: 'screenshots/chip-2.png',
57+
},
58+
DataTable: 'screenshots/data-table-full-width.png',
59+
'DataTable.Cell': 'screenshots/data-table-row-cell.png',
60+
'DataTable.Header': 'screenshots/data-table-header.png',
61+
'DataTable.Pagination': 'screenshots/data-table-pagination.png',
62+
'DataTable.Row': 'screenshots/data-table-row-cell.png',
63+
'DataTable.Title': 'screenshots/data-table-header.png',
64+
Dialog: 'screenshots/dialog-1.png',
65+
'Dialog.Actions': 'screenshots/dialog-actions.png',
66+
'Dialog.Content': 'screenshots/dialog-content.png',
67+
'Dialog.Icon': 'screenshots/dialog-icon.png',
68+
'Dialog.ScrollArea': 'screenshots/dialog-scroll-area.gif',
69+
'Dialog.Title': 'screenshots/dialog-title.png',
70+
Divider: 'screenshots/divider.png',
71+
'Drawer.CollapsedItem': 'screenshots/drawer-collapsed.png',
72+
'Drawer.Item': 'screenshots/drawer-item.png',
73+
'Drawer.Section': 'screenshots/drawer-section.png',
74+
FAB: {
75+
'all variants': 'screenshots/fab-1.png',
76+
'all sizes': 'screenshots/fab-2.png',
77+
'all modes': 'screenshots/fab-4.png',
78+
'with label': 'screenshots/fab-3.png',
79+
},
80+
AnimatedFAB: 'screenshots/animated-fab.gif',
81+
'FAB.Group': 'screenshots/fab-group.gif',
82+
HelperText: 'screenshots/helper-text.gif',
83+
IconButton: {
84+
default: 'screenshots/icon-button-1.png',
85+
outlined: 'screenshots/icon-button-4.png',
86+
contained: 'screenshots/icon-button-2.png',
87+
'contained-tonal': 'screenshots/icon-button-3.png',
88+
},
89+
'List.Accordion': {
90+
'with left icon': 'screenshots/list-accordion-1.png',
91+
'with description': 'screenshots/list-accordion-2.png',
92+
'items with icon': 'screenshots/list-accordion-3.png',
93+
},
94+
'List.AccordionGroup': 'screenshots/list-accordion-group.png',
95+
'List.Icon': 'screenshots/list-icon.png',
96+
'List.Item': {
97+
'with left icon': 'screenshots/list-item-1.png',
98+
'with description': 'screenshots/list-item-2.png',
99+
'with right element': 'screenshots/list-item-3.png',
100+
},
101+
'List.Section': 'screenshots/list-section.png',
102+
Menu: {
103+
'with icons': 'screenshots/menu-1.png',
104+
'without icons': 'screenshots/menu-2.png',
105+
},
106+
'Menu.Item': 'screenshots/menu-item.png',
107+
Modal: 'screenshots/modal.gif',
108+
ProgressBar: 'screenshots/progress-bar.png',
109+
RadioButton: {
110+
'Android (enabled)': 'screenshots/radio-enabled.android.png',
111+
'Android (disabled)': 'screenshots/radio-disabled.android.png',
112+
'iOS (enabled)': 'screenshots/radio-enabled.ios.png',
113+
'iOS (disabled)': 'screenshots/radio-disabled.ios.png',
114+
},
115+
'RadioButton.Android': {
116+
enabled: 'screenshots/radio-enabled.android.png',
117+
disabled: 'screenshots/radio-disabled.android.png',
118+
},
119+
'RadioButton.Group': {
120+
Android: 'screenshots/radio-button-group-android.gif',
121+
iOS: 'screenshots/radio-button-group-ios.gif',
122+
},
123+
'RadioButton.IOS': {
124+
enabled: 'screenshots/radio-enabled.ios.png',
125+
disabled: 'screenshots/radio-disabled.ios.png',
126+
},
127+
'RadioButton.Item': 'screenshots/radio-item.ios.png',
128+
Searchbar: {
129+
bar: 'screenshots/searchbar.png',
130+
view: 'screenshots/searchbar-view.png',
131+
},
132+
SegmentedButtons: {
133+
'single select': 'screenshots/segmented-button-single-select.png',
134+
multiselect: 'screenshots/segmented-button-multi-select.png',
135+
},
136+
Snackbar: 'screenshots/snackbar.gif',
137+
Surface: {
138+
elevated: 'screenshots/surface-elevated-full-width.png',
139+
flat: 'screenshots/surface-flat-full-width.png',
140+
},
141+
Switch: {
142+
'Android (enabled)': 'screenshots/switch-enabled.android.png',
143+
'Android (disabled)': 'screenshots/switch-disabled.android.png',
144+
'iOS (enabled)': 'screenshots/switch-enabled.ios.png',
145+
'iOS (disabled)': 'screenshots/switch-disabled.ios.png',
146+
},
147+
Text: 'screenshots/typography.png',
148+
TextInput: {
149+
'flat (focused)': 'screenshots/textinput-flat.focused.png',
150+
'flat (disabled)': 'screenshots/textinput-flat.disabled.png',
151+
'outlined (focused)': 'screenshots/textinput-outlined.focused.png',
152+
'outlined (disabled)': 'screenshots/textinput-outlined.disabled.png',
153+
},
154+
'TextInput.Affix': 'screenshots/textinput-outline.affix.png',
155+
'TextInput.Icon': 'screenshots/textinput-flat.icon.png',
156+
ToggleButton: 'screenshots/toggle-button.png',
157+
'ToggleButton.Group': 'screenshots/toggle-button-group.gif',
158+
'ToggleButton.Row': 'screenshots/toggle-button-row.gif',
159+
Tooltip: 'screenshots/tooltip.png',
160+
TouchableRipple: 'screenshots/touchable-ripple.gif',
161+
};
162+
163+
module.exports = {
164+
screenshots,
165+
};

‎docs/static/screenshots/activity-indicator.gif‎

725 KB
Loading

‎docs/static/screenshots/avatar-icon.png‎

470 KB
Loading

‎docs/static/screenshots/avatar-image.png‎

457 KB
Loading

‎docs/static/screenshots/avatar-text.png‎

485 KB
Loading

0 commit comments

Comments
 (0)