Skip to content
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

refactored #12

Merged
merged 2 commits into from
Nov 6, 2020
Merged

refactored #12

Show file tree
Hide file tree
Changes from 1 commit
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
24 changes: 24 additions & 0 deletions docs/data/css/slider-styled-css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
const sliderStyledCSS = {
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).' },
};

export default sliderStyledCSS;
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: 20 additions & 67 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,31 @@ 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 { 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 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;
}
},
});
const componentName = path.basename(component.filename).replace(/\.js$/, '');
const cssFilename = `../data/css/${camelCaseToKebabCase(componentName)}-css.js`;
try {
const cssModule = require(cssFilename);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd just read the json with fs-extra. require is slowly getting replace and with require we have to rely on webpack.

Copy link
Owner Author

@mnajdova mnajdova Nov 6, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Converted the file to .json and used readFileSync. Should we merge this on the main branch? Edit: merged this one on the main branch, we can continue discussion there to be more visible.

if (cssModule) {
const cssData = cssModule.default;
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;