Skip to content

Commit

Permalink
[docs] Generate default values for docs from the unstyled components (#…
Browse files Browse the repository at this point in the history 
…23614)
  • Loading branch information
@mnajdova
mnajdova committed Nov 20, 2020
1 parent 8fc052a commit c634ac5
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 27 deletions.
27 changes: 14 additions & 13 deletions docs/pages/api-docs/slider.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,28 +32,29 @@ The `MuiSlider` name can be used for providing [default props](/customization/gl
| <span class="prop-name">aria-labelledby</span> | <span class="prop-type">string</span> | | The id of the element containing a label for the slider. |
| <span class="prop-name">aria-valuetext</span> | <span class="prop-type">string</span> | | A string value that provides a user-friendly name for the current value of the slider. |
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'</span> | | The color of the component. It supports those theme colors that make sense for this component. |
| <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
| <span class="prop-name">components</span> | <span class="prop-type">{ Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType }</span> | <span class="prop-default">{}</span> | The components used for each slot inside the Slider. Either a string to use a HTML element or a component. |
| <span class="prop-name">componentsProps</span> | <span class="prop-type">object</span> | | The props used for each slot inside the Slider. |
| <span class="prop-name">componentsProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | The props used for each slot inside the Slider. |
| <span class="prop-name">defaultValue</span> | <span class="prop-type">Array&lt;number&gt;<br>&#124;&nbsp;number</span> | | The default element value. Use when the component is not controlled. |
| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | | If `true`, the slider is disabled. |
| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the slider is disabled. |
| <span class="prop-name">getAriaLabel</span> | <span class="prop-type">func</span> | | Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.<br><br>**Signature:**<br>`function(index: number) => string`<br>*index:* The thumb label's index to format. |
| <span class="prop-name">getAriaValueText</span> | <span class="prop-type">func</span> | | Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.<br><br>**Signature:**<br>`function(value: number, index: number) => string`<br>*value:* The thumb label's value to format.<br>*index:* The thumb label's index to format. |
| <span class="prop-name">isRtl</span> | <span class="prop-type">bool</span> | | Indicates whether the theme context has rtl direction. It is set automatically. |
| <span class="prop-name">marks</span> | <span class="prop-type">Array&lt;{ label?: node, value: number }&gt;<br>&#124;&nbsp;bool</span> | | Marks indicate predetermined values to which the user can move the slider. If `true` the marks are spaced according the value of the `step` prop. If an array, it should contain objects with `value` and an optional `label` keys. |
| <span class="prop-name">max</span> | <span class="prop-type">number</span> | | The maximum allowed value of the slider. Should not be equal to min. |
| <span class="prop-name">min</span> | <span class="prop-type">number</span> | | The minimum allowed value of the slider. Should not be equal to max. |
| <span class="prop-name">isRtl</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Indicates whether the theme context has rtl direction. It is set automatically. |
| <span class="prop-name">marks</span> | <span class="prop-type">Array&lt;{ label?: node, value: number }&gt;<br>&#124;&nbsp;bool</span> | <span class="prop-default">false</span> | Marks indicate predetermined values to which the user can move the slider. If `true` the marks are spaced according the value of the `step` prop. If an array, it should contain objects with `value` and an optional `label` keys. |
| <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">100</span> | The maximum allowed value of the slider. Should not be equal to min. |
| <span class="prop-name">min</span> | <span class="prop-type">number</span> | <span class="prop-default">0</span> | The minimum allowed value of the slider. Should not be equal to max. |
| <span class="prop-name">name</span> | <span class="prop-type">string</span> | | Name attribute of the hidden `input` element. |
| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> | | Callback function that is fired when the slider's value changed.<br><br>**Signature:**<br>`function(event: object, value: number \| number[]) => void`<br>*event:* The event source of the callback. **Warning**: This is a generic event not a change event.<br>*value:* The new value. |
| <span class="prop-name">onChangeCommitted</span> | <span class="prop-type">func</span> | | Callback function that is fired when the `mouseup` is triggered.<br><br>**Signature:**<br>`function(event: object, value: number \| number[]) => void`<br>*event:* The event source of the callback. **Warning**: This is a generic event not a change event.<br>*value:* The new value. |
| <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | | The slider orientation. |
| <span class="prop-name">scale</span> | <span class="prop-type">func</span> | | A transformation function, to change the scale of the slider. |
| <span class="prop-name">step</span> | <span class="prop-type">number</span> | | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. |
| <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | <span class="prop-default">'horizontal'</span> | The slider orientation. |
| <span class="prop-name">scale</span> | <span class="prop-type">func</span> | <span class="prop-default">(x) => x</span> | A transformation function, to change the scale of the slider. |
| <span class="prop-name">step</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. |
| <span class="prop-name">sx</span> | <span class="prop-type">object</span> | | The system prop that allows defining system overrides as well as additional CSS styles. |
| <span class="prop-name">track</span> | <span class="prop-type">'inverted'<br>&#124;&nbsp;'normal'<br>&#124;&nbsp;false</span> | | The track presentation:<br>- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. |
| <span class="prop-name">track</span> | <span class="prop-type">'inverted'<br>&#124;&nbsp;'normal'<br>&#124;&nbsp;false</span> | <span class="prop-default">'normal'</span> | The track presentation:<br>- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. |
| <span class="prop-name">value</span> | <span class="prop-type">Array&lt;number&gt;<br>&#124;&nbsp;number</span> | | The value of the slider. For ranged sliders, provide an array with two values. |
| <span class="prop-name">valueLabelDisplay</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on'</span> | | Controls when the value label is displayed:<br>- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. |
| <span class="prop-name">valueLabelFormat</span> | <span class="prop-type">func<br>&#124;&nbsp;string</span> | | The format function the value label's value.<br>When a function is provided, it should have the following signature:<br>- {number} value The value label's value to format - {number} index The value label's index to format |
| <span class="prop-name">valueLabelDisplay</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on'</span> | <span class="prop-default">'off'</span> | Controls when the value label is displayed:<br>- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. |
| <span class="prop-name">valueLabelFormat</span> | <span class="prop-type">func<br>&#124;&nbsp;string</span> | <span class="prop-default">(x) => x</span> | The format function the value label's value.<br>When a function is provided, it should have the following signature:<br>- {number} value The value label's value to format - {number} index The value label's index to format |
| <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'span'</span> | The component used for the root node. Either a string to use a HTML element or a component. |

The `ref` is forwarded to the root element.

Expand Down
31 changes: 29 additions & 2 deletions docs/scripts/buildApi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { pageToTitle } from 'docs/src/modules/utils/helpers';
import createGenerateClassName from '../../packages/material-ui-styles/src/createGenerateClassName';
import getStylesCreator from '../../packages/material-ui-styles/src/getStylesCreator';
import createMuiTheme from '../../packages/material-ui/src/styles/createMuiTheme';
import { getLineFeed, getUnstyledDefinitionFilename } from './helpers';
import { getLineFeed, getUnstyledFilename } from './helpers';

const generateClassName = createGenerateClassName();

Expand Down Expand Up @@ -224,7 +224,7 @@ async function updateStylesDefinition(context: {

const typesFilename = component.filename.replace(/\.js$/, '.d.ts');

const unstyledFileName = getUnstyledDefinitionFilename(typesFilename);
const unstyledFileName = getUnstyledFilename(typesFilename, true);

try {
// If the JSON file doesn't exists try extracting the info from the TS definition
Expand Down Expand Up @@ -451,6 +451,33 @@ async function buildDocs(options: {
throw err;
}

const unstyledFileName = getUnstyledFilename(componentObject.filename);
let unstyledSrc;

// Try to get data for the unstyled component
try {
unstyledSrc = readFileSync(unstyledFileName, 'utf8');
} catch (err) {
// Unstyled component does not exist
}

if (unstyledSrc) {
const unstyledReactAPI = docgenParse(
unstyledSrc,
null,
defaultHandlers.concat(muiDefaultPropsHandler),
{
filename: unstyledFileName,
},
);

Object.keys(unstyledReactAPI.props).forEach((prop) => {
if (unstyledReactAPI.props[prop].defaultValue) {
reactAPI.props[prop] = unstyledReactAPI.props[prop];
}
});
}

reactAPI.name = name;
reactAPI.styles = styles;
reactAPI.pagesMarkdown = pagesMarkdown;
Expand Down
20 changes: 10 additions & 10 deletions docs/scripts/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,23 +27,23 @@ function fixLineEndings(source, target) {
/**
* Converts styled or regular component d.ts file to unstyled d.ts
*
* @param {string} tsFile - the definition file of the styled or regular mui component
* @param {string} filename - the file of the styled or regular mui component
*/
function getUnstyledDefinitionFilename(tsFile) {
if (tsFile.indexOf('Unstyled') > -1) {
return tsFile;
function getUnstyledFilename(filename, definitionFile = false) {
if (filename.indexOf('Unstyled') > -1) {
return filename;
}
let unstyledFile = '';

const separator = tsFile.indexOf('/') > -1 ? '/' : '\\';
const separator = filename.indexOf('/') > -1 ? '/' : '\\';

if (tsFile.endsWith('.d.ts') && tsFile.indexOf('material-ui-unstyled') === -1) {
unstyledFile = tsFile;
if (filename.indexOf('material-ui-unstyled') === -1) {
unstyledFile = filename.replace('.d.ts', '').replace('.ts', '').replace('.js', '');
unstyledFile = unstyledFile.replace(/Styled/g, '');

const pathParts = unstyledFile.split(separator);

const componentName = pathParts[pathParts.length - 1].replace('.d.ts', '');
const componentName = pathParts[pathParts.length - 1];
const directoryName = pathParts[pathParts.length - 2];

const componentNameReg = new RegExp(componentName, 'g');
Expand All @@ -68,12 +68,12 @@ function getUnstyledDefinitionFilename(tsFile) {
}
}

return unstyledFile;
return definitionFile ? `${unstyledFile}.d.ts` : `${unstyledFile}.js`;
}

module.exports = {
getLineFeed,
fixBabelGeneratorIssues,
fixLineEndings,
getUnstyledDefinitionFilename,
getUnstyledFilename,
};
4 changes: 2 additions & 2 deletions scripts/generateProptypes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import * as yargs from 'yargs';
import {
fixBabelGeneratorIssues,
fixLineEndings,
getUnstyledDefinitionFilename,
getUnstyledFilename,
} from '../docs/scripts/helpers';

enum GenerateResult {
Expand Down Expand Up @@ -231,7 +231,7 @@ async function generateProptypes(

const isTsFile = /(\.(ts|tsx))/.test(sourceFile);

const unstyledFile = getUnstyledDefinitionFilename(tsFile);
const unstyledFile = getUnstyledFilename(tsFile, true);

const result = ttp.inject(proptypes, sourceContent, {
disableTypescriptPropTypesValidation: tsTodo,
Expand Down

0 comments on commit c634ac5

Please sign in to comment.