Skip to content

refactored #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mnajdova merged 2 commits into from
Nov 6, 2020
Merged

refactored #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
03f94a9
refactored
mnajdova Nov 5, 2020
57f0419
changed file to json & used readFileSync
mnajdova Nov 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions docs/data/css/slider-styled-css.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"root": { "class": ".MuiSlider-root", "description": "Class name applied to the root element." },
"colorPrimary": { "class": ".MuiSlider-colorPrimary", "description": "Class name applied to the root element if `color=\"primary\"`." },
"colorSecondary": { "class": ".MuiSlider-colorSecondary", "description": "Class name applied to the root element if `color=\"secondary\"`." },
"marked": { "class": ".MuiSlider-marked", "description": "Class name applied to the root element if `marks` is provided with at least one label." },
"vertical": { "class": ".MuiSlider-vertical", "description": "Class name applied to the root element if `orientation=\"vertical\"`." },
"disabled": { "class": ".Mui-disabled", "description": "Pseudo-class applied to the root and thumb element if `disabled={true}`." },
"rail": { "class": ".MuiSlider-rail", "description": "Class name applied to the rail element." },
"track": { "class": ".MuiSlider-track", "description": "Class name applied to the track element." },
"trackFalse": { "class": ".MuiSlider-trackFalse", "description": "Class name applied to the track element if `track={false}`." },
"trackInverted": { "class": ".MuiSlider-trackInverted", "description": "Class name applied to the track element if `track=\"inverted\"`." },
"thumb": { "class": ".MuiSlider-thumb", "description": "Class name applied to the thumb element." },
"thumbColorPrimary": { "class": ".MuiSlider-thumbColorPrimary", "description": "Class name applied to the thumb element if `color=\"primary\"`." },
"thumbColorSecondary": { "class": ".MuiSlider-thumbColorSecondary", "description": "Class name applied to the thumb element if `color=\"secondary\"`." },
"active": { "class": ".MuiSlider-active", "description": "Pseudo-class applied to the thumb element if it's active." },
"focusVisible": { "class": ".Mui-focusVisible", "description": "Pseudo-class applied to the thumb element if keyboard focused." },
"valueLabel": { "class": ".MuiSlider-valueLabel", "description": "Class name applied to the thumb label element." },
"mark": { "class": ".MuiSlider-mark", "description": "Class name applied to the mark element." },
"markActive": { "class": ".MuiSlider-markActive", "description": "Class name applied to the mark element if active (depending on the value)." },
"markLabel": { "class": ".MuiSlider-markLabel", "description": "Class name applied to the mark label element." },
"markLabelActive": { "class": ".MuiSlider-markLabelActive", "description": "Class name applied to the mark label element if active (depending on the value)." }
}
40 changes: 20 additions & 20 deletions docs/pages/api-docs/slider-styled.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,26 +62,26 @@ Any other props supplied will be provided to the root element (native element).

| Rule name | Global class | Description |
|:-----|:-------------|:------------|
| <span class="prop-name">root</span> | <span class="prop-name">.MuiSlider-root</span> | Class name applied to the root element.
| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiSlider-colorPrimary</span> | Class name applied to the root element if `color="primary"`.
| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiSlider-colorSecondary</span> | Class name applied to the root element if `color="secondary"`.
| <span class="prop-name">marked</span> | <span class="prop-name">.MuiSlider-marked</span> | Class name applied to the root element if `marks` is provided with at least one label.
| <span class="prop-name">vertical</span> | <span class="prop-name">.MuiSlider-vertical</span> | Class name applied to the root element if `orientation="vertical"`.
| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root and thumb element if `disabled={true}`.
| <span class="prop-name">rail</span> | <span class="prop-name">.MuiSlider-rail</span> | Class name applied to the rail element.
| <span class="prop-name">track</span> | <span class="prop-name">.MuiSlider-track</span> | Class name applied to the track element.
| <span class="prop-name">trackFalse</span> | <span class="prop-name">.MuiSlider-trackFalse</span> | Class name applied to the track element if `track={false}`.
| <span class="prop-name">trackInverted</span> | <span class="prop-name">.MuiSlider-trackInverted</span> | Class name applied to the track element if `track="inverted"`.
| <span class="prop-name">thumb</span> | <span class="prop-name">.MuiSlider-thumb</span> | Class name applied to the thumb element.
| <span class="prop-name">thumbColorPrimary</span> | <span class="prop-name">.MuiSlider-thumbColorPrimary</span> | Class name applied to the thumb element if `color="primary"`.
| <span class="prop-name">thumbColorSecondary</span> | <span class="prop-name">.MuiSlider-thumbColorSecondary</span> | Class name applied to the thumb element if `color="secondary"`.
| <span class="prop-name">active</span> | <span class="prop-name">.MuiSlider-active</span> | Pseudo-class applied to the thumb element if it's active.
| <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the thumb element if keyboard focused.
| <span class="prop-name">valueLabel</span> | <span class="prop-name">.MuiSlider-valueLabel</span> | Class name applied to the thumb label element.
| <span class="prop-name">mark</span> | <span class="prop-name">.MuiSlider-mark</span> | Class name applied to the mark element.
| <span class="prop-name">markActive</span> | <span class="prop-name">.MuiSlider-markActive</span> | Class name applied to the mark element if active (depending on the value).
| <span class="prop-name">markLabel</span> | <span class="prop-name">.MuiSlider-markLabel</span> | Class name applied to the mark label element.
| <span class="prop-name">markLabelActive</span> | <span class="prop-name">.MuiSlider-markLabelActive</span> | Class name applied to the mark label element if active (depending on the value).
| <span class="prop-name">root</span> | <span class="prop-name">.MuiSlider-root</span> | Class name applied to the root element.
| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiSlider-colorPrimary</span> | Class name applied to the root element if `color="primary"`.
| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiSlider-colorSecondary</span> | Class name applied to the root element if `color="secondary"`.
| <span class="prop-name">marked</span> | <span class="prop-name">.MuiSlider-marked</span> | Class name applied to the root element if `marks` is provided with at least one label.
| <span class="prop-name">vertical</span> | <span class="prop-name">.MuiSlider-vertical</span> | Class name applied to the root element if `orientation="vertical"`.
| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root and thumb element if `disabled={true}`.
| <span class="prop-name">rail</span> | <span class="prop-name">.MuiSlider-rail</span> | Class name applied to the rail element.
| <span class="prop-name">track</span> | <span class="prop-name">.MuiSlider-track</span> | Class name applied to the track element.
| <span class="prop-name">trackFalse</span> | <span class="prop-name">.MuiSlider-trackFalse</span> | Class name applied to the track element if `track={false}`.
| <span class="prop-name">trackInverted</span> | <span class="prop-name">.MuiSlider-trackInverted</span> | Class name applied to the track element if `track="inverted"`.
| <span class="prop-name">thumb</span> | <span class="prop-name">.MuiSlider-thumb</span> | Class name applied to the thumb element.
| <span class="prop-name">thumbColorPrimary</span> | <span class="prop-name">.MuiSlider-thumbColorPrimary</span> | Class name applied to the thumb element if `color="primary"`.
| <span class="prop-name">thumbColorSecondary</span> | <span class="prop-name">.MuiSlider-thumbColorSecondary</span> | Class name applied to the thumb element if `color="secondary"`.
| <span class="prop-name">active</span> | <span class="prop-name">.MuiSlider-active</span> | Pseudo-class applied to the thumb element if it's active.
| <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the thumb element if keyboard focused.
| <span class="prop-name">valueLabel</span> | <span class="prop-name">.MuiSlider-valueLabel</span> | Class name applied to the thumb label element.
| <span class="prop-name">mark</span> | <span class="prop-name">.MuiSlider-mark</span> | Class name applied to the mark element.
| <span class="prop-name">markActive</span> | <span class="prop-name">.MuiSlider-markActive</span> | Class name applied to the mark element if active (depending on the value).
| <span class="prop-name">markLabel</span> | <span class="prop-name">.MuiSlider-markLabel</span> | Class name applied to the mark label element.
| <span class="prop-name">markLabelActive</span> | <span class="prop-name">.MuiSlider-markLabelActive</span> | Class name applied to the mark label element if active (depending on the value).

You can override the style of the component thanks to one of these customization points:

Expand Down
87 changes: 21 additions & 66 deletions docs/scripts/buildApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,78 +192,33 @@ async function annotateComponentDefinition(context: {
writeFileSync(typesFilename, typesSourceNew, { encoding: 'utf8' });
}

function trimComment(comment: string) {
let i = 0;
for (; i < comment.length; i += 1) {
if (comment[i] !== '*' && comment[i] !== ' ') {
break;
}
}
return comment.substr(i, comment.length - 1);
const camelCaseToKebabCase = (inputString: string) => {
const str = inputString.charAt(0).toLowerCase() + inputString.slice(1)
return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
}

async function updateStylesDefinition(context: { api: ReactApi; component: { filename: string } }) {
const workspaceRoot = path.resolve(__dirname, '../../');
const { api, component } = context;

const typesFilename = component.filename.replace(/\.js$/, '.d.ts');
const typesSource = readFileSync(typesFilename, { encoding: 'utf8' });
const typesAST = await babel.parseAsync(typesSource, {
configFile: false,
filename: typesFilename,
presets: [require.resolve('@babel/preset-typescript')],
});

if (typesAST === null) {
throw new Error('No AST returned from babel.');
}

if (api.styles.classes.length === 0) {
const componentName = path.basename(typesFilename).replace(/\.d\.ts$/, '');

traverse(typesAST, {
ExportNamedDeclaration(babelPath) {
const { node } = babelPath;
const declaration = node.declaration as babel.types.TSTypeAliasDeclaration;
const componentName = path.basename(component.filename).replace(/\.js$/, '');
const cssFilename = `${workspaceRoot}/docs/data/css/${camelCaseToKebabCase(componentName)}-css.json`;

const name = declaration.id?.name;

const typeAnnotation = declaration.typeAnnotation as babel.types.TSUnionType;

if (name === `${componentName}ClassKey` && typeAnnotation.types) {
const classes: string[] = [];

const nodeLeadingComments = declaration.typeAnnotation.leadingComments || [];

typeAnnotation.types.forEach((typeNode) => {
const value = (typeNode as babel.types.TSLiteralType).literal.value as string;

classes.push(value);

let leadingComments = typeNode.leadingComments;
if (leadingComments) {
leadingComments = leadingComments.concat(nodeLeadingComments);
} else {
leadingComments = nodeLeadingComments;
}

if (leadingComments) {
for (let i = 0; i < leadingComments.length; i += 1) {
if (
leadingComments[i].end + 5 ===
(typeNode as babel.types.TSLiteralType).literal.start
) {
api.styles.descriptions[value] = trimComment(leadingComments[i].value);
}
}
}

return '';
});

api.styles.classes = classes;
}
},
});
try {
const jsonCSSData = readFileSync(cssFilename, { encoding: 'utf8' });
if (jsonCSSData) {
const cssData = JSON.parse(jsonCSSData.toString());
const classes = Object.keys(cssData);
api.styles.classes = classes;

api.styles.descriptions = classes.reduce((acc, key) => {
acc[key] = cssData[key].description;
return acc;
}, {} as Record<string, string>);
}
} catch (err) {
// Do nothing if the file doesn't exist
// This is still not supported for all components
}
}

Expand Down
42 changes: 0 additions & 42 deletions packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,46 +48,4 @@ export const SliderValueLabel: React.FC<SliderValueLabel>;
*/
declare const Slider: ExtendSliderUnstyled<SliderStyledTypeMap>;

export type SliderStyledClassKey =
/** Class name applied to the root element. */
| 'root'
/** Class name applied to the root element if `color="primary"`. */
| 'colorPrimary'
/** Class name applied to the root element if `color="secondary"`. */
| 'colorSecondary'
/** Class name applied to the root element if `marks` is provided with at least one label. */
| 'marked'
/** Class name applied to the root element if `orientation="vertical"`. */
| 'vertical'
/** Pseudo-class applied to the root and thumb element if `disabled={true}`. */
| 'disabled'
/** Class name applied to the rail element. */
| 'rail'
/** Class name applied to the track element. */
| 'track'
/** Class name applied to the track element if `track={false}`. */
| 'trackFalse'
/** Class name applied to the track element if `track="inverted"`. */
| 'trackInverted'
/** Class name applied to the thumb element. */
| 'thumb'
/** Class name applied to the thumb element if `color="primary"`. */
| 'thumbColorPrimary'
/** Class name applied to the thumb element if `color="secondary"`. */
| 'thumbColorSecondary'
/** Pseudo-class applied to the thumb element if it's active. */
| 'active'
/** Pseudo-class applied to the thumb element if keyboard focused. */
| 'focusVisible'
/** Class name applied to the thumb label element. */
| 'valueLabel'
/** Class name applied to the mark element. */
| 'mark'
/** Class name applied to the mark element if active (depending on the value). */
| 'markActive'
/** Class name applied to the mark label element. */
| 'markLabel'
/** Class name applied to the mark label element if active (depending on the value). */
| 'markLabelActive';

export default Slider;